"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineChartStyledExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_charting_1 = require("@fluentui/react-charting");
var Styling_1 = require("@fluentui/react/lib-commonjs/Styling");
var LineChartStyledExample = /** @class */ (function (_super) {
    tslib_1.__extends(LineChartStyledExample, _super);
    function LineChartStyledExample(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;
    }
    LineChartStyledExample.prototype.render = function () {
        return React.createElement("div", null, this._styledExample());
    };
    LineChartStyledExample.prototype._styledExample = function () {
        var points = [
            {
                data: [
                    { x: new Date('2018/01/06'), y: 10 },
                    { x: new Date('2018/01/16'), y: 18 },
                    { x: new Date('2018/01/20'), y: 24 },
                    { x: new Date('2018/01/24'), y: 35 },
                    { x: new Date('2018/01/26'), y: 35 },
                    { x: new Date('2018/01/29'), y: 90 },
                ],
                legend: 'Week',
                color: Styling_1.DefaultPalette.blue,
            },
        ];
        var data = {
            chartTitle: 'Line Chart',
            lineChartData: points,
        };
        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(react_charting_1.LineChart, { data: data, strokeWidth: 4, yMaxValue: 90, hideLegend: true, showXAxisLablesTooltip: true, height: this.state.height, width: this.state.width, tickFormat: '%m/%d', tickValues: [new Date('2018-01-01'), new Date('2018-02-09')], 
                    // eslint-disable-next-line react/jsx-no-bind
                    onRenderCalloutPerDataPoint: function (props) {
                        return props ? (React.createElement(react_charting_1.ChartHoverCard, { XValue: 'Custom XVal', Legend: 'Custom Legend', YValue: (props.values[0].yAxisCalloutData || props.values[0].y) + " h", color: 'red' })) : null;
                    } }))));
    };
    return LineChartStyledExample;
}(React.Component));
exports.LineChartStyledExample = LineChartStyledExample;
//# sourceMappingURL=LineChart.Styled.Example.js.map