import { __extends } from "tslib";
import * as React from 'react';
import { GroupedVerticalBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
var GroupedVerticalBarChartStyledExample = /** @class */ (function (_super) {
    __extends(GroupedVerticalBarChartStyledExample, _super);
    function GroupedVerticalBarChartStyledExample(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: 400,
        };
        return _this;
    }
    GroupedVerticalBarChartStyledExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    GroupedVerticalBarChartStyledExample.prototype._basicExample = function () {
        var data = [
            {
                name: '2000',
                series: [
                    {
                        key: 'series1',
                        data: 66,
                        color: DefaultPalette.accent,
                        legend: 'MetaData1',
                    },
                    {
                        key: 'series2',
                        data: 13,
                        color: DefaultPalette.blueMid,
                        legend: 'MetaData2',
                    },
                    {
                        key: 'series3',
                        data: 34,
                        color: DefaultPalette.blueLight,
                        legend: 'MetaData3',
                    },
                ],
            },
            {
                name: '2010',
                series: [
                    {
                        key: 'series1',
                        data: 14,
                        color: DefaultPalette.accent,
                        legend: 'MetaData1',
                    },
                    {
                        key: 'series2',
                        data: 90,
                        color: DefaultPalette.blueMid,
                        legend: 'MetaData2',
                    },
                    {
                        key: 'series3',
                        data: 33,
                        color: DefaultPalette.blueLight,
                        legend: 'MetaData3',
                    },
                ],
            },
            {
                name: '2020',
                series: [
                    {
                        key: 'series1',
                        data: 54,
                        color: DefaultPalette.accent,
                        legend: 'MetaData1',
                    },
                    {
                        key: 'series2',
                        data: 72,
                        color: DefaultPalette.blueMid,
                        legend: 'MetaData2',
                    },
                    {
                        key: 'series3',
                        data: 18,
                        color: DefaultPalette.blueLight,
                        legend: 'MetaData3',
                    },
                ],
            },
        ];
        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(GroupedVerticalBarChart, { data: data, width: this.state.width, height: this.state.height, showYAxisGridLines: true, yAxisTickCount: 10, barwidth: 43 }))));
    };
    return GroupedVerticalBarChartStyledExample;
}(React.Component));
export { GroupedVerticalBarChartStyledExample };
//# sourceMappingURL=GroupedVerticalBarChart.Styled.Example.js.map