import React from 'react';
import { Box, Grid } from '@material-ui/core';
import { MuiVegaLite } from '@material-vega/material-ui';
import { useReadMetaData } from '../hooks/useReadMetaData';
export const BarChartWrapper = props => {
    const { propsComponent } = props;
    const { id, columnSize, values, encoding, x, y, xfield, yfield } = 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: "verticalBarChart", color: "secondary", background: "paper", autoResize: true, actions: false, spec: {
            $schema: 'https://vega.github.io/schema/vega-lite/v4.json',
            width: 'container',
            data: {
                // values: [
                //   { quarter: 'Q1', percent: 0.2 },
                //   { quarter: 'Q2', percent: 0.28 },
                //   { quarter: 'Q3', percent: 0.32 },
                //   { quarter: 'Q4', percent: 0.39 },
                // ],
                values: values,
            },
            mark: 'bar',
            //encoding: encoding,
            encoding: {
                x: {
                    field: xfield,
                    type: 'nominal',
                    axis: {
                        ticks: false,
                    },
                    band: 0.5,
                },
                y: {
                    field: yfield,
                    type: 'quantitative',
                    axis: {
                        format: 'p',
                    },
                },
            },
        } }))));
};
export const barChartWrapperProps = [
    {
        structure: [
            { label: 'Data1', value: 0 },
            { label: 'Data2', value: 1 },
            { label: 'Data3', value: 0 },
            { label: 'Data4', value: 1 },
        ],
    },
];
//# sourceMappingURL=BarChartWrapper.js.map