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 HistogramWrapper = 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: "histogram", color: "secondary", background: "paper", autoResize: true, actions: false, spec: {
            $schema: 'https://vega.github.io/schema/vega/v5.json',
            description: 'An interactive histogram for visualizing a univariate distribution.',
            width: 500,
            height: 100,
            padding: 5,
            signals: [
                {
                    name: 'binOffset',
                    value: 0,
                    bind: { input: 'range', min: -0.1, max: 0.1 },
                },
                {
                    name: 'binStep',
                    value: 0.1,
                    bind: { input: 'range', min: 0.001, max: 0.4, step: 0.001 },
                },
            ],
            data: [
                {
                    name: 'points',
                    url: 'data/normal-2d.json',
                },
                {
                    name: 'binned',
                    source: 'points',
                    transform: [
                        {
                            type: 'bin',
                            field: 'u',
                            extent: [-1, 1],
                            anchor: { signal: 'binOffset' },
                            step: { signal: 'binStep' },
                            nice: false,
                        },
                        {
                            type: 'aggregate',
                            key: 'bin0',
                            groupby: ['bin0', 'bin1'],
                            fields: ['bin0'],
                            ops: ['count'],
                            as: ['count'],
                        },
                    ],
                },
            ],
            scales: [
                {
                    name: 'xscale',
                    type: 'linear',
                    range: 'width',
                    domain: [-1, 1],
                },
                {
                    name: 'yscale',
                    type: 'linear',
                    range: 'height',
                    round: true,
                    domain: { data: 'binned', field: 'count' },
                    zero: true,
                    nice: true,
                },
            ],
            axes: [
                { orient: 'bottom', scale: 'xscale', zindex: 1 },
                { orient: 'left', scale: 'yscale', tickCount: 5, zindex: 1 },
            ],
            marks: [
                {
                    type: 'rect',
                    from: { data: 'binned' },
                    encode: {
                        update: {
                            x: { scale: 'xscale', field: 'bin0' },
                            x2: {
                                scale: 'xscale',
                                field: 'bin1',
                                offset: { signal: 'binStep > 0.02 ? -0.5 : 0' },
                            },
                            y: { scale: 'yscale', field: 'count' },
                            y2: { scale: 'yscale', value: 0 },
                            fill: { value: 'steelblue' },
                        },
                        hover: { fill: { value: 'firebrick' } },
                    },
                },
                {
                    type: 'rect',
                    from: { data: 'points' },
                    encode: {
                        enter: {
                            x: { scale: 'xscale', field: 'u' },
                            width: { value: 1 },
                            y: { value: 25, offset: { signal: 'height' } },
                            height: { value: 5 },
                            fill: { value: 'steelblue' },
                            fillOpacity: { value: 0.4 },
                        },
                    },
                },
            ],
        } }))));
};
//# sourceMappingURL=HistogramWrapper.js.map