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 { convertISODate } from '../../utils/ConvertISODate';
export const layout = {
    w: { default: 2, min: 0, max: 4 },
    h: { default: 2, min: 0, max: 4 }
};
export const params = {
    mode: {
        defaultValue: 'chart'
    }
};
const LineGraphWidget = (props, ref) => {
    const { children, params, setParam } = props, other = __rest(props, ["children", "params", "setParam"]);
    const { mockData, apiUrl, theme, dateRange } = params;
    return (React.createElement(WidgetCard, Object.assign({ ref: ref }, other, { title: mockData === null || mockData === void 0 ? void 0 : mockData.title, theme: theme }), mockData ? (React.createElement(Fragment, null, dateRange && (React.createElement(Typography, { gutterBottom: true, variant: "caption", component: "h3" }, "From: ", convertISODate(dateRange.from), " to:", ' ', convertISODate(dateRange.to), ' ')), (mockData === null || mockData === void 0 ? void 0 : mockData.stats) && (React.createElement(Grid, { container: true }, mockData === null || mockData === void 0 ? void 0 : mockData.stats.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: "lineChart", color: "secondary", spec: {
            $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
            description: mockData === null || mockData === void 0 ? void 0 : mockData.description,
            data: {
                values: mockData === null || mockData === void 0 ? void 0 : mockData.data
            },
            mark: 'line',
            encoding: {
                x: { field: 'xAxis', type: mockData === null || mockData === void 0 ? void 0 : mockData.xAxisType },
                y: {
                    field: 'yAxis',
                    type: mockData === null || mockData === void 0 ? void 0 : mockData.yAxisType
                },
                color: {
                    field: 'label',
                    type: 'nominal',
                    legend: { direction: 'vertical', orient: 'right' }
                }
            }
        }, width: "container", height: "container", autoResize: "true" })), children)) : (React.createElement(Typography, { variant: "subtitle2" }, "Could not retrieve widget data. Please contact support"))));
};
export default forwardRef(LineGraphWidget);
//# sourceMappingURL=LineGraphWidget.js.map