import { __extends } from "tslib";
import * as React from 'react';
import { LineChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
var LineChartGapsExample = /** @class */ (function (_super) {
    __extends(LineChartGapsExample, _super);
    function LineChartGapsExample(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._calculateCalloutDescription = function (calloutDataProps) {
            if (calloutDataProps.values.filter(function (value) { return value.legend === 'Low Confidence Data*'; }).length > 0) {
                return '* This data was below our confidence threshold.';
            }
            return undefined;
        };
        _this.state = {
            width: 1200,
            height: 400,
        };
        return _this;
    }
    LineChartGapsExample.prototype.render = function () {
        return React.createElement("div", null, this._gapsExample());
    };
    LineChartGapsExample.prototype._gapsExample = function () {
        var data = {
            chartTitle: 'Line Chart',
            lineChartData: [
                {
                    legend: 'Confidence Level',
                    legendShape: 'dottedLine',
                    hideNonActiveDots: true,
                    lineOptions: {
                        strokeDasharray: '5',
                        strokeLinecap: 'butt',
                        strokeWidth: '2',
                    },
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 250000,
                            hideCallout: true,
                        },
                        {
                            x: new Date('2020-03-10T00:00:00.000Z'),
                            y: 250000,
                            hideCallout: true,
                        },
                    ],
                    color: DefaultPalette.black,
                },
                {
                    legend: 'Normal Data',
                    gaps: [
                        {
                            startIndex: 3,
                            endIndex: 4,
                        },
                        {
                            startIndex: 6,
                            endIndex: 7,
                        },
                        {
                            startIndex: 1,
                            endIndex: 2,
                        },
                    ],
                    hideNonActiveDots: true,
                    lineOptions: {
                        lineBorderWidth: '4',
                    },
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 216000,
                        },
                        {
                            x: new Date('2020-03-03T10:30:00.000Z'),
                            y: 218123,
                            hideCallout: true,
                        },
                        // gap here
                        {
                            x: new Date('2020-03-03T11:00:00.000Z'),
                            y: 219000,
                            hideCallout: true,
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 248000,
                            hideCallout: true,
                        },
                        // gap here
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 252000,
                            hideCallout: true,
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 274000,
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 260000,
                            hideCallout: true,
                        },
                        // gap here
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300000,
                            hideCallout: true,
                        },
                        {
                            x: new Date('2020-03-08T12:00:00.000Z'),
                            y: 218000,
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 218000,
                        },
                        {
                            x: new Date('2020-03-10T00:00:00.000Z'),
                            y: 269000,
                        },
                    ],
                    color: DefaultPalette.blue,
                },
                {
                    legend: 'Low Confidence Data*',
                    legendShape: 'dottedLine',
                    hideNonActiveDots: true,
                    lineOptions: {
                        strokeDasharray: '2',
                        strokeDashoffset: '-1',
                        strokeLinecap: 'butt',
                        lineBorderWidth: '4',
                    },
                    gaps: [
                        {
                            startIndex: 3,
                            endIndex: 4,
                        },
                        {
                            startIndex: 1,
                            endIndex: 2,
                        },
                    ],
                    data: [
                        {
                            x: new Date('2020-03-03T10:30:00.000Z'),
                            y: 218123,
                        },
                        {
                            x: new Date('2020-03-03T11:00:00.000Z'),
                            y: 219000,
                        },
                        // gap here
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 248000,
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 252000,
                        },
                        // gap here
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 260000,
                        },
                        {
                            x: new Date('2020-03-07T00:30:00.000Z'),
                            y: 270000,
                        },
                        {
                            x: new Date('2020-03-07T01:00:00.000Z'),
                            y: 270000,
                        },
                        {
                            x: new Date('2020-03-07T01:30:00.000Z'),
                            y: 270000,
                        },
                        {
                            x: new Date('2020-03-07T02:00:00.000Z'),
                            y: 280000,
                        },
                        {
                            x: new Date('2020-03-07T02:30:00.000Z'),
                            y: 270000,
                        },
                        {
                            x: new Date('2020-03-07T03:00:00.000Z'),
                            y: 290000,
                        },
                        {
                            x: new Date('2020-03-07T03:30:00.000Z'),
                            y: 270000,
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300000,
                        },
                    ],
                    color: DefaultPalette.blue,
                },
                {
                    legend: 'Green Data',
                    lineOptions: {
                        lineBorderWidth: '4',
                    },
                    data: [
                        {
                            x: new Date('2020-03-03T00:00:00.000Z'),
                            y: 297000,
                        },
                        {
                            x: new Date('2020-03-04T00:00:00.000Z'),
                            y: 284000,
                        },
                        {
                            x: new Date('2020-03-05T00:00:00.000Z'),
                            y: 282000,
                        },
                        {
                            x: new Date('2020-03-06T00:00:00.000Z'),
                            y: 294000,
                        },
                        {
                            x: new Date('2020-03-07T00:00:00.000Z'),
                            y: 224000,
                        },
                        {
                            x: new Date('2020-03-08T00:00:00.000Z'),
                            y: 300000,
                        },
                        {
                            x: new Date('2020-03-09T00:00:00.000Z'),
                            y: 298000,
                        },
                        {
                            x: new Date('2020-03-10T00:00:00.000Z'),
                            y: 299000,
                        },
                    ],
                    color: DefaultPalette.green,
                },
            ],
        };
        var rootStyle = { width: this.state.width + "px", height: this.state.height + "px" };
        var margins = { left: 35, top: 20, bottom: 35, right: 20 };
        return (React.createElement(React.Fragment, null,
            React.createElement("label", null, "change Width:"),
            React.createElement("input", { type: "range", value: this.state.width, min: 500, max: 1500, 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(LineChart, { data: data, legendsOverflowText: 'Overflow Items', yMinValue: 150000, yMaxValue: 400000, height: this.state.height, width: this.state.width, margins: margins, calloutProps: {
                        calloutMaxWidth: 200,
                    }, getCalloutDescriptionMessage: this._calculateCalloutDescription }))));
    };
    return LineChartGapsExample;
}(React.Component));
export { LineChartGapsExample };
//# sourceMappingURL=LineChart.Gap.Example.js.map