"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var charting_1 = require("@uifabric/charting");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var d3 = require("d3-format");
var AreaChartCustomAccessibilityExample = /** @class */ (function (_super) {
    tslib_1.__extends(AreaChartCustomAccessibilityExample, _super);
    function AreaChartCustomAccessibilityExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onWidthChange = function (e) {
            _this.setState({ width: parseInt(e.target.value, 10) });
        };
        _this._onHeightChange = function (e) {
            _this.setState({ height: parseInt(e.target.value, 10) });
        };
        _this.state = {
            width: 700,
            height: 300,
        };
        return _this;
    }
    AreaChartCustomAccessibilityExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    AreaChartCustomAccessibilityExample.prototype._basicExample = function () {
        var chart1Points = [
            {
                x: 20,
                y: 9,
                xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 20' },
                callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 9' },
            },
            {
                x: 40,
                y: 20,
                xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 40' },
                callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 20' },
            },
            {
                x: 55,
                y: 27,
                xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 55' },
                callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 27' },
            },
            {
                x: 60,
                y: 37,
                xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 60' },
                callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 37' },
            },
            {
                x: 65,
                y: 51,
                xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 65' },
                callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 51' },
            },
        ];
        var chart2Points = [
            {
                x: 20,
                y: 21,
                callOutAccessibilityData: { ariaLabel: 'Point 2 Second 21' },
            },
            {
                x: 40,
                y: 25,
                callOutAccessibilityData: { ariaLabel: 'Point 2 Second 25' },
            },
            {
                x: 55,
                y: 23,
                callOutAccessibilityData: { ariaLabel: 'Point 2 Second 23' },
            },
            {
                x: 60,
                y: 7,
                callOutAccessibilityData: { ariaLabel: 'Point 2 Second 7' },
            },
            {
                x: 65,
                y: 55,
                callOutAccessibilityData: { ariaLabel: 'Point 2 Second 55' },
            },
        ];
        var chart3Points = [
            {
                x: 20,
                y: 30,
                callOutAccessibilityData: { ariaLabel: 'Point 3 Third 30' },
            },
            {
                x: 40,
                y: 35,
                callOutAccessibilityData: { ariaLabel: 'Point 3 Third 35' },
            },
            {
                x: 55,
                y: 33,
                callOutAccessibilityData: { ariaLabel: 'Point 3 Third 33' },
            },
            {
                x: 60,
                y: 40,
                callOutAccessibilityData: { ariaLabel: 'Point 3 Third 40' },
            },
            {
                x: 65,
                y: 10,
                callOutAccessibilityData: { ariaLabel: 'Point 3 Third 10' },
            },
        ];
        var chartPoints = [
            {
                legend: 'First',
                data: chart1Points,
                color: Styling_1.DefaultPalette.accent,
            },
            {
                legend: 'Second',
                data: chart2Points,
                color: Styling_1.DefaultPalette.blueLight,
            },
            {
                legend: 'Third',
                data: chart3Points,
                color: Styling_1.DefaultPalette.blueDark,
            },
        ];
        var chartData = {
            chartTitle: 'Area chart Custom Accessibility example',
            lineChartData: chartPoints,
        };
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        return (React.createElement(React.Fragment, null,
            React.createElement("label", null, "change Width:"),
            React.createElement("input", { type: "range", value: this.state.width, min: 200, max: 1000, onChange: this._onWidthChange }),
            React.createElement("label", null, "change Height:"),
            React.createElement("input", { type: "range", value: this.state.height, min: 200, max: 1000, onChange: this._onHeightChange }),
            React.createElement("div", { style: rootStyle },
                React.createElement(charting_1.AreaChart, { height: this.state.height, width: this.state.width, data: chartData, legendsOverflowText: 'Overflow Items', yAxisTickFormat: d3.format('$,'), legendProps: {
                        allowFocusOnLegends: true,
                    } }))));
    };
    return AreaChartCustomAccessibilityExample;
}(React.Component));
exports.AreaChartCustomAccessibilityExample = AreaChartCustomAccessibilityExample;
//# sourceMappingURL=AreaChart.CustomAccessibility.Example.js.map