var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, Fragment } from 'react';
import { Grid, Box, Typography } from '@material-ui/core';
import { MuiVegaLite } from '@material-vega/material-ui';
import WidgetCard from '../../WidgetCard';
import FluentStatsSnippet from '../../FluentComponents/atoms/FluentStatsSnippet';
import ChartSummaryToggle from '../../FluentComponents/ChartSummaryToggle';
import { convertISODate } from '../../utils/ConvertISODate';
export const layout = {
    w: { default: 2, min: 0, max: 4 },
    h: { default: 2, min: 0, max: 4 }
};
const DonutChartWidget = (props, ref) => {
    var _a;
    const { children, params, setParam } = props, other = __rest(props, ["children", "params", "setParam"]);
    const { mockData, apiUrl, theme, dateRange } = params;
    let body = (React.createElement(Fragment, null, dateRange && (React.createElement(Typography, { gutterBottom: true, variant: "caption", component: "h3" }, "From: ", convertISODate(dateRange.from), " to:", ' ', convertISODate(dateRange.to))), React.createElement(Grid, { container: true }, (_a = mockData === null || mockData === void 0 ? void 0 : mockData.stats) === null || _a === void 0 ? void 0 : _a.map((stat) => (React.createElement(Grid, { item: true, xs: 3, key: stat.label }, React.createElement(FluentStatsSnippet, { label: stat.label, amount: stat.currentValue, prevAmount: stat.previousValue }))))), React.createElement(Box, { clone: true, flex: 1, mt: 1, overflow: "hidden" }, React.createElement(MuiVegaLite, { variant: "donutChart", style: {
            overflow: 'auto',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 0
        }, spec: {
            $schema: 'https://vega.github.io/schema/vega/v5.json',
            width: 200,
            height: 200,
            data: [
                {
                    name: 'table',
                    values: mockData === null || mockData === void 0 ? void 0 : mockData.data,
                    transform: [
                        {
                            type: 'pie',
                            field: 'value'
                        }
                    ]
                },
                {
                    name: 'used',
                    source: 'table',
                    transform: [
                        {
                            type: 'formula',
                            expr: "datum.id === 'Other' ? 'Other' : 'Main'",
                            as: 'id'
                        },
                        {
                            type: 'aggregate',
                            fields: ['field'],
                            groupby: ['id'],
                            ops: ['sum'],
                            as: ['sum']
                        },
                        {
                            type: 'pivot',
                            field: 'label',
                            value: 'sum'
                        }
                    ]
                }
            ],
            scales: [
                {
                    name: 'color',
                    type: 'ordinal',
                    domain: { data: 'table', field: 'label' },
                    range: { scheme: 'greys' }
                }
            ],
            marks: [
                {
                    type: 'arc',
                    from: { data: 'table' },
                    encode: {
                        enter: {
                            fill: { scale: 'color', field: 'label' },
                            x: { signal: 'width / 2' },
                            y: { signal: 'height / 2' },
                            padAngle: { value: 0.01 }
                        },
                        update: {
                            startAngle: { field: 'startAngle' },
                            endAngle: { field: 'endAngle' },
                            innerRadius: { signal: 'width / 2 - 10' },
                            outerRadius: { signal: 'width / 2' }
                        }
                    }
                },
                {
                    type: 'text',
                    from: { data: 'used' },
                    style: ['percent'],
                    encode: {
                        enter: {
                            x: { signal: 'width / 2' },
                            y: { signal: 'height / 2' },
                            align: { value: 'center' },
                            baseline: { value: 'middle' },
                            fontSize: { value: 24 }
                        }
                    }
                }
            ],
            legends: [
                {
                    fill: 'color',
                    direction: 'vertical',
                    encode: {
                        labels: {
                            name: 'legendLabel',
                            enter: { text: { field: 'label' } }
                        }
                    },
                    orient: 'right',
                    labelColor: theme === 'dark' ? 'white' : 'rgba(0, 0, 0, 0.87)'
                }
            ]
        } })), children));
    return (React.createElement(WidgetCard, Object.assign({ theme: theme, ref: ref, headerActions: React.createElement(ChartSummaryToggle, { value: params.mode, onChange: (value) => setParam('mode', value) }) }, other, { title: mockData === null || mockData === void 0 ? void 0 : mockData.title }), mockData ? (body) : (React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support"))));
};
export default forwardRef(DonutChartWidget);
//# sourceMappingURL=DonutChartWidget.js.map