import { __extends } from "tslib";
import * as React from 'react';
import { LineChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
var LineChartCustomAccessibilityExample = /** @class */ (function (_super) {
    __extends(LineChartCustomAccessibilityExample, _super);
    function LineChartCustomAccessibilityExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onShapeChange = function (ev, checked) {
            _this.setState({ allowMultipleShapes: checked });
        };
        _this._onLegendClickHandler = function (selectedLegend) {
            if (selectedLegend !== null) {
                console.log("Selected legend - " + selectedLegend);
            }
        };
        _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,
            allowMultipleShapes: false,
        };
        return _this;
    }
    LineChartCustomAccessibilityExample.prototype.render = function () {
        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(Toggle, { label: "Enabled  multiple shapes for each line", onText: "On", offText: "Off", onChange: this._onShapeChange, checked: this.state.allowMultipleShapes }),
            React.createElement("div", null, this._styledExample())));
    };
    LineChartCustomAccessibilityExample.prototype._styledExample = function () {
        var points = [
            {
                data: [
                    {
                        x: new Date('2018/01/01'),
                        y: 10,
                        xAxisCalloutData: '2018/01/01',
                        yAxisCalloutData: '10%',
                        xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/01' },
                        callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 10%' },
                    },
                    {
                        x: new Date('2018/02/01'),
                        y: 30,
                        xAxisCalloutData: '2018/01/15',
                        yAxisCalloutData: '18%',
                        xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/15' },
                        callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 18%' },
                    },
                    {
                        x: new Date('2018/03/01'),
                        y: 10,
                        xAxisCalloutData: '2018/01/28',
                        yAxisCalloutData: '24%',
                        xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/01/28' },
                        callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 24%' },
                    },
                    {
                        x: new Date('2018/04/01'),
                        y: 30,
                        xAxisCalloutData: '2018/02/01',
                        yAxisCalloutData: '25%',
                        xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/02/01' },
                        callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 25%' },
                    },
                    {
                        x: new Date('2018/05/01'),
                        y: 10,
                        xAxisCalloutData: '2018/03/01',
                        yAxisCalloutData: '15%',
                        xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 2018/03/01' },
                        callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 15%' },
                    },
                ],
                legend: 'First',
                color: DefaultPalette.blue,
                onLegendClick: this._onLegendClickHandler,
            },
            {
                data: [
                    {
                        x: new Date('2018/01/01'),
                        y: 30,
                        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
                    },
                    {
                        x: new Date('2018/02/01'),
                        y: 50,
                        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
                    },
                    {
                        x: new Date('2018/03/01'),
                        y: 30,
                        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
                    },
                    {
                        x: new Date('2018/04/01'),
                        y: 50,
                        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 50' },
                    },
                    {
                        x: new Date('2018/05/01'),
                        y: 30,
                        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 30' },
                    },
                ],
                legend: 'Second',
                color: DefaultPalette.green,
                onLegendClick: this._onLegendClickHandler,
            },
            {
                data: [
                    { x: new Date('2018/01/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
                    { x: new Date('2018/02/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
                    { x: new Date('2018/03/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
                    { x: new Date('2018/04/01'), y: 70, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 70' } },
                    { x: new Date('2018/05/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } },
                ],
                legend: 'Third',
                color: DefaultPalette.red,
                onLegendClick: this._onLegendClickHandler,
            },
        ];
        var data = {
            chartTitle: 'Line Chart Custom Accessibility Example',
            lineChartData: points,
        };
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        var timeFormat = '%m/%d';
        // Passing tick values is optional, for more control.
        // If you do not pass them the line chart will render them for you based on D3's standard.
        var tickValues = [
            new Date('01-01-2018'),
            new Date('02-01-2018'),
            new Date('03-01-2018'),
            new Date('04-01-2018'),
            new Date('05-01-2018'),
        ];
        var colorFillBarData = [
            {
                legend: 'Time range 1',
                color: 'blue',
                data: [
                    {
                        startX: new Date('2018/01/06'),
                        endX: new Date('2018/01/25'),
                    },
                ],
            },
            {
                legend: 'Time range 2',
                color: 'red',
                data: [
                    {
                        startX: new Date('2018/01/18'),
                        endX: new Date('2018/02/20'),
                    },
                    {
                        startX: new Date('2018/04/17'),
                        endX: new Date('2018/05/10'),
                    },
                ],
                applyPattern: true,
            },
        ];
        return (React.createElement("div", { style: rootStyle },
            React.createElement(LineChart, { data: data, strokeWidth: 4, tickFormat: timeFormat, tickValues: tickValues, height: this.state.height, width: this.state.width, legendProps: { canSelectMultipleLegends: true, allowFocusOnLegends: true }, colorFillBars: colorFillBarData, allowMultipleShapesForPoints: this.state.allowMultipleShapes })));
    };
    return LineChartCustomAccessibilityExample;
}(React.Component));
export { LineChartCustomAccessibilityExample };
//# sourceMappingURL=LineChart.CustomAccessibility.Example.js.map