import { __assign, __extends } from "tslib";
import * as React from 'react';
import { VerticalBarChart } from '@fluentui/react-charting';
import { DefaultPalette } from '@fluentui/react/lib/Styling';
import { ChoiceGroup } from '@fluentui/react/lib/ChoiceGroup';
import { Checkbox } from '@fluentui/react/lib/Checkbox';
var options = [
    { key: 'basicExample', text: 'Basic Example' },
    { key: 'calloutExample', text: 'Custom Callout Example' },
];
var VerticalBarChartBasicExample = /** @class */ (function (_super) {
    __extends(VerticalBarChartBasicExample, _super);
    function VerticalBarChartBasicExample(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._onChange = function (ev, option) {
            if (_this.state.isCalloutselected) {
                _this.setState({ isCalloutselected: false });
            }
            else {
                _this.setState({ isCalloutselected: true });
            }
        };
        _this._onCheckChange = function (ev, checked) {
            _this.setState({ useSingleColor: checked });
        };
        _this.state = {
            width: 650,
            height: 350,
            isCalloutselected: false,
            useSingleColor: false,
        };
        return _this;
    }
    VerticalBarChartBasicExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalBarChartBasicExample.prototype._basicExample = function () {
        var points = [
            {
                x: 0,
                y: 10000,
                legend: 'Oranges',
                color: DefaultPalette.accent,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '10%',
                lineData: {
                    y: 7000,
                    yAxisCalloutData: '34%',
                },
            },
            {
                x: 10000,
                y: 50000,
                legend: 'Dogs',
                color: DefaultPalette.blueDark,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '20%',
                lineData: {
                    y: 30000,
                },
            },
            {
                x: 25000,
                y: 30000,
                legend: 'Apples',
                color: DefaultPalette.blueMid,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '37%',
                lineData: {
                    y: 3000,
                    yAxisCalloutData: '43%',
                },
            },
            {
                x: 40000,
                y: 13000,
                legend: 'Bananas',
                color: DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '88%',
            },
            {
                x: 52000,
                y: 43000,
                legend: 'Giraffes',
                color: DefaultPalette.blue,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '71%',
                lineData: {
                    y: 30000,
                },
            },
            {
                x: 68000,
                y: 30000,
                legend: 'Cats',
                color: DefaultPalette.blueDark,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '40%',
                lineData: {
                    y: 5000,
                },
            },
            {
                x: 80000,
                y: 20000,
                legend: 'Elephants',
                color: DefaultPalette.blue,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '87%',
                lineData: {
                    y: 16000,
                },
            },
            {
                x: 92000,
                y: 45000,
                legend: 'Monkeys',
                color: DefaultPalette.blueLight,
                xAxisCalloutData: '2020/04/30',
                yAxisCalloutData: '33%',
                lineData: {
                    y: 40000,
                    yAxisCalloutData: '45%',
                },
            },
        ];
        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(ChoiceGroup, { options: options, defaultSelectedKey: "basicExample", onChange: this._onChange, label: "Pick one" }),
            React.createElement(Checkbox, { label: "use single color(This will have only one color)", checked: this.state.useSingleColor, onChange: this._onCheckChange, styles: { root: { marginTop: '20px' } } }),
            React.createElement("div", { style: rootStyle },
                React.createElement(VerticalBarChart, __assign({ data: points, width: this.state.width, useSingleColor: this.state.useSingleColor, height: this.state.height, chartLabel: 'Basic Chart with Numeric Axes', lineLegendText: 'just line', lineLegendColor: 'brown' }, (this.state.isCalloutselected && {
                    onRenderCalloutPerDataPoint: function (props, defaultRender) { return (props ? defaultRender(props) : null); },
                }))))));
    };
    return VerticalBarChartBasicExample;
}(React.Component));
export { VerticalBarChartBasicExample };
//# sourceMappingURL=VerticalBarChart.Basic.Example.js.map