import React from 'react';
import { Grid, Box } from '@material-ui/core';
import { MuiVegaLite } from '@material-vega/material-ui';
import { useReadMetaData } from '../hooks/useReadMetaData';
export const LineGraphWrapper = props => {
    const { propsComponent } = props;
    const { id, columnSize, x, y, values } = useReadMetaData(propsComponent);
    return (React.createElement(Grid, { item: true, xs: columnSize === null || columnSize === void 0 ? void 0 : columnSize.xs, sm: columnSize === null || columnSize === void 0 ? void 0 : columnSize.sm, md: columnSize === null || columnSize === void 0 ? void 0 : columnSize.md, key: id }, React.createElement(Box, { mt: 2, clone: true, overflow: "hidden", sx: { width: '100%', minWidth: '100%' } }, React.createElement(MuiVegaLite, { variant: "lineChart", color: "secondary", background: "paper", autoResize: true, actions: false, spec: {
            $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
            description: 'Values perdicted by the model',
            width: 'container',
            data: {
                // values: [
                //   { a: 'A', b: 28, predicted: false },
                //   { a: 'B', b: 55, predicted: false },
                //   { a: 'D', b: 91, predicted: false },
                //   { a: 'E', b: 81, predicted: false },
                //   { a: 'E', b: 81, predicted: true },
                //   { a: 'G', b: 19, predicted: true },
                //   { a: 'H', b: 87, predicted: true },
                // ],
                values: values,
            },
            mark: 'line',
            encoding: {
                x: { field: 'a', type: 'ordinal' },
                y: { field: 'b', type: 'quantitative' },
                strokeDash: { field: 'predicted', type: 'nominal' },
            },
        } }))));
};
//# sourceMappingURL=LineGraphWrapper.js.map