import { __assign, __extends } from "tslib";
import * as React from 'react';
import { VerticalStackedBarChart } from '@uifabric/charting';
import { DefaultPalette } from 'office-ui-fabric-react/lib/Styling';
import { DirectionalHint } from 'office-ui-fabric-react';
import { ChoiceGroup } from 'office-ui-fabric-react/lib/ChoiceGroup';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
var options = [
    { key: 'singleCallout', text: "Single callout (won't work if lines are present)" },
    { key: 'MultiCallout', text: 'Stack callout' },
    { key: 'singleCustomCallout', text: "single callout with custom content (won't work if lines are present)" },
    { key: 'MultiCustomCallout', text: 'stack callout with custom content' },
];
var VerticalStackedBarChartCalloutExample = /** @class */ (function (_super) {
    __extends(VerticalStackedBarChartCalloutExample, _super);
    function VerticalStackedBarChartCalloutExample(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) {
            _this.setState({ selectedCallout: option.key });
        };
        _this._onShowLineChange = function (ev, checked) {
            _this.setState({ showLine: checked });
        };
        _this.state = {
            width: 650,
            height: 350,
            barGapMax: 2,
            showLine: true,
            selectedCallout: 'MultiCallout',
        };
        return _this;
    }
    VerticalStackedBarChartCalloutExample.prototype.render = function () {
        return React.createElement("div", null, this._basicExample());
    };
    VerticalStackedBarChartCalloutExample.prototype._basicExample = function () {
        var _this = this;
        var showLine = this.state.showLine;
        var firstChartPoints = [
            { legend: 'Metadata1', data: 40, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 5, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 15, color: DefaultPalette.blueLight },
        ];
        var secondChartPoints = [
            { legend: 'Metadata1', data: 30, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 3, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
        ];
        var thirdChartPoints = [
            { legend: 'Metadata1', data: 10, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 60, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
        ];
        var fourthChartPoints = [
            { legend: 'Metadata1', data: 40, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 10, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight },
        ];
        var fifthChartPoints = [
            { legend: 'Metadata1', data: 40, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 40, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
        ];
        var sixthChartPoints = [
            { legend: 'Metadata1', data: 40, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 20, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight },
        ];
        var seventhChartPoints = [
            { legend: 'Metadata1', data: 10, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 80, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 20, color: DefaultPalette.blueLight },
        ];
        var eightChartPoints = [
            { legend: 'Metadata1', data: 50, color: DefaultPalette.accent },
            { legend: 'Metadata2', data: 50, color: DefaultPalette.blueMid },
            { legend: 'Metadata3', data: 20, color: DefaultPalette.blueLight },
        ];
        var data = [
            __assign({ chartData: firstChartPoints, xAxisPoint: 'Jan' }, (showLine && { lineData: [{ y: 40, color: DefaultPalette.yellowDark, legend: 'line1' }] })),
            __assign({ chartData: secondChartPoints, xAxisPoint: 'Feb' }, (showLine && {
                lineData: [
                    { y: 15, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 70, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
            __assign({ chartData: thirdChartPoints, xAxisPoint: 'March' }, (showLine && {
                lineData: [
                    { y: 65, color: DefaultPalette.greenDark, legend: 'line2' },
                    { y: 98, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
            __assign({ chartData: fourthChartPoints, xAxisPoint: 'April' }, (showLine && {
                lineData: [
                    { y: 40, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 50, color: DefaultPalette.greenDark, legend: 'line2' },
                    { y: 65, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
            __assign({ chartData: fifthChartPoints, xAxisPoint: 'May' }, (showLine && {
                lineData: [
                    { y: 20, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 65, color: DefaultPalette.greenDark, legend: 'line2' },
                ],
            })),
            __assign({ chartData: sixthChartPoints, xAxisPoint: 'June' }, (showLine && {
                lineData: [
                    { y: 54, color: DefaultPalette.greenDark, legend: 'line2' },
                    { y: 87, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
            __assign({ chartData: seventhChartPoints, xAxisPoint: 'July' }, (showLine && {
                lineData: [
                    { y: 10, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 110, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
            __assign({ chartData: eightChartPoints, xAxisPoint: 'August' }, (showLine && {
                lineData: [
                    { y: 45, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 87, color: DefaultPalette.greenDark, legend: 'line2' },
                ],
            })),
            __assign({ chartData: firstChartPoints, xAxisPoint: 'September' }, (showLine && {
                lineData: [
                    { y: 15, color: DefaultPalette.yellowDark, legend: 'line1' },
                    { y: 60, color: DefaultPalette.magenta, legend: 'line3' },
                ],
            })),
        ];
        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("label", null, "BarGapMax:"),
            React.createElement("input", { type: "range", value: this.state.barGapMax, min: 0, max: 10, onChange: function (e) { return _this.setState({ barGapMax: +e.target.value }); } }),
            React.createElement(ChoiceGroup, { options: options, selectedKey: this.state.selectedCallout, onChange: this._onChange, label: "Pick one" }),
            React.createElement(Checkbox, { label: "show the lines (hide or show the lines)", checked: this.state.showLine, onChange: this._onShowLineChange, styles: { root: { marginTop: '20px' } } }),
            React.createElement("div", { style: rootStyle },
                React.createElement(VerticalStackedBarChart, __assign({ barGapMax: this.state.barGapMax, data: data, height: this.state.height, width: this.state.width, yAxisTickCount: 10, chartLabel: "Card title", isCalloutForStack: this.state.selectedCallout === 'MultiCallout' || this.state.selectedCallout === 'MultiCustomCallout', yMaxValue: 120, calloutProps: {
                        directionalHint: DirectionalHint.topCenter,
                    }, margins: { left: 50 }, colors: ['red', 'white', 'green', 'black'] }, (this.state.selectedCallout === 'singleCustomCallout' && {
                    onRenderCalloutPerDataPoint: function (props) {
                        return (React.createElement("div", null,
                            React.createElement("pre", null, JSON.stringify(props, undefined, 2))));
                    },
                }), (this.state.selectedCallout === 'MultiCustomCallout' && {
                    onRenderCalloutPerStack: function (props) {
                        return (React.createElement("div", null,
                            React.createElement("pre", null,
                                React.createElement("code", null, JSON.stringify(props, null, 4)))));
                    },
                }), { allowHoverOnLegend: false })))));
    };
    return VerticalStackedBarChartCalloutExample;
}(React.Component));
export { VerticalStackedBarChartCalloutExample };
//# sourceMappingURL=VerticalStackedBarChart.Callout.Example.js.map