@gravity-ui/chartkit 3.2.0-beta.2 → 3.3.0

package/build/plugins/d3/__stories__/scatter/LinearCategories.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const LinearAndCategories: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/scatter/LinearCategories.stories.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import random from 'lodash/random';
+import { withKnobs, select, radios, text } from '@storybook/addon-knobs';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../../libs';
+import { ChartKit } from '../../../../components/ChartKit';
+import { D3Plugin } from '../..';
+import penguins from '../penguins.json';
+const shapeScatterSeriesData = (args) => {
+    const { data, groupBy, map } = args;
+    return data.reduce((acc, d) => {
+        const seriesName = d[groupBy];
+        if (!seriesName) {
+            return acc;
+        }
+        if (!acc[seriesName]) {
+            acc[seriesName] = [];
+        }
+        acc[seriesName].push(Object.assign({ x: d[map.x], y: d[map.y], radius: random(3, 6) }, (map.category && { category: d[map.category] })));
+        return acc;
+    }, {});
+};
+const shapeScatterSeries = (data) => {
+    return Object.keys(data).reduce((acc, name) => {
+        acc.push({
+            type: 'scatter',
+            data: data[name],
+            name,
+        });
+        return acc;
+    }, []);
+};
+const shapeScatterChartData = (series, categoriesType, categories) => {
+    let xAxis = {
+        title: {
+            text: text('X axis title', ''),
+        },
+    };
+    let yAxis = {
+        title: {
+            text: text('Y axis title', ''),
+        },
+    };
+    if (categories && categoriesType === 'x') {
+        xAxis = Object.assign(Object.assign({}, xAxis), { type: 'category', categories });
+    }
+    if (categories && categoriesType === 'y') {
+        yAxis = Object.assign(Object.assign({}, yAxis), { type: 'category', categories });
+    }
+    return {
+        series: {
+            data: series,
+        },
+        xAxis,
+        yAxis: [yAxis],
+        title: {
+            text: text('title', 'Chart title'),
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const x = select('x', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_length_mm');
+    const y = select('y', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_depth_mm');
+    const groupBy = select('groupBy', ['species', 'island', 'sex'], 'species');
+    const categoriesType = radios('categoriesType', { none: 'none', x: 'x', y: 'y' }, 'none');
+    const category = categoriesType === 'none'
+        ? undefined
+        : select('category', ['species', 'island', 'sex'], 'island');
+    let categories;
+    if (categoriesType !== 'none' && category) {
+        categories = penguins.reduce((acc, p) => {
+            const cerrentCategory = p[category];
+            if (typeof cerrentCategory === 'string' && !acc.includes(cerrentCategory)) {
+                acc.push(cerrentCategory);
+            }
+            return acc;
+        }, []);
+    }
+    const shapedScatterSeriesData = shapeScatterSeriesData({
+        data: penguins,
+        groupBy,
+        map: { x, y, category },
+    });
+    const shapedScatterSeries = shapeScatterSeries(shapedScatterSeriesData);
+    const data = shapeScatterChartData(shapedScatterSeries, categoriesType, categories);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '80vh', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const LinearAndCategories = Template.bind({});
+const meta = {
+    title: 'Plugins/D3/Scatter',
+    decorators: [withKnobs],
+};
+export default meta;

package/build/plugins/d3/__stories__/scatter/Timestamp.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const Timestamp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/scatter/Timestamp.stories.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import random from 'lodash/random';
+import { boolean, number } from '@storybook/addon-knobs';
+import { dateTime } from '@gravity-ui/date-utils';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../../libs';
+import { ChartKit } from '../../../../components/ChartKit';
+import { D3Plugin } from '../..';
+const rowData = [
+    {
+        x: 1690686000000,
+        y: 86.71905594602345,
+        custom: 'green',
+    },
+    {
+        x: 1690426800000,
+        y: 86.73089353359981,
+        custom: 'yellow',
+    },
+    {
+        x: 1690254000000,
+        y: 86.53675705168267,
+        custom: 'red',
+    },
+    {
+        x: 1690772400000,
+        y: 86.47880981408552,
+        custom: 'blue',
+    },
+    {
+        x: 1690340400000,
+        y: 86.4108836764148,
+        custom: 'gray',
+    },
+    {
+        x: 1690599600000,
+        y: 86.73440096266042,
+        custom: 'pink',
+    },
+    {
+        x: 1690513200000,
+        y: 86.64935929597681,
+        custom: 'purple',
+    },
+];
+const shapeData = (data) => {
+    const scatterData = data.map((d) => ({
+        x: d.x,
+        y: d.y,
+        radius: random(3, 6),
+        custom: d.custom,
+    }));
+    const scatterSeries = {
+        type: 'scatter',
+        data: scatterData,
+        name: 'some-name',
+    };
+    return {
+        series: {
+            data: [scatterSeries],
+        },
+        xAxis: {
+            type: 'datetime',
+            timestamps: data.map((d) => d.x),
+            grid: {
+                enabled: boolean('xAxis.grid.enabled', true),
+            },
+            labels: {
+                enabled: boolean('xAxis.labels.enabled', true),
+            },
+            ticks: {
+                pixelInterval: number('xAxis.ticks.pixelInterval', 100),
+            },
+        },
+        yAxis: [
+            {
+                grid: {
+                    enabled: boolean('yAxis.grid.enabled', true),
+                },
+                labels: {
+                    enabled: boolean('yAxis.labels.enabled', true),
+                },
+            },
+        ],
+        tooltip: {
+            renderer: ({ hovered }) => {
+                const d = hovered.data;
+                return React.createElement("div", { style: { color: d.custom } }, dateTime({ input: d.x }).format('LL'));
+            },
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const data = shapeData(rowData);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '300px', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const Timestamp = Template.bind({});
+const meta = {
+    title: 'Plugins/D3/Scatter',
+};
+export default meta;

package/build/plugins/d3/renderer/components/AxisX.js

@@ -31,20 +31,30 @@ export const AxisX = ({ axis, width, height, scale }) => {
         }
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const xAxisGenerator = axisBottom(scale)
-            .tickSize(height * -1)
+        const tickSize = axis.grid.enabled ? height * -1 : 0;
+        let xAxisGenerator = axisBottom(scale)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+            if (!axis.labels.enabled) {
+                return '';
+            }
             return formatAxisTickLabel({
                 axisType: axis.type,
                 value,
-                dateFormat: axis.labels.dateFormat,
-                numberFormat: axis.labels.numberFormat,
+                dateFormat: axis.labels['dateFormat'],
+                numberFormat: axis.labels['numberFormat'],
             });
         });
+        if (axis.ticks.pixelInterval) {
+            const ticksCount = width / axis.ticks.pixelInterval;
+            xAxisGenerator = xAxisGenerator.ticks(ticksCount);
+        }
         svgElement.call(xAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
-        svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        if (axis.labels.enabled) {
+            svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
+        }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { x } = parseTransformStyle(transformStyle);
         if (x === 0) {

package/build/plugins/d3/renderer/components/AxisY.js

@@ -32,23 +32,33 @@ export const AxisY = ({ axises, width, height, scale }) => {
         const axis = axises[0];
         const svgElement = select(ref.current);
         svgElement.selectAll('*').remove();
-        const yAxisGenerator = axisLeft(scale)
-            .tickSize(width * -1)
+        const tickSize = axis.grid.enabled ? width * -1 : 0;
+        let yAxisGenerator = axisLeft(scale)
+            .tickSize(tickSize)
             .tickPadding(axis.labels.padding)
             .tickFormat((value) => {
+            if (!axis.labels.enabled) {
+                return '';
+            }
             return formatAxisTickLabel({
                 axisType: axis.type,
                 value,
-                dateFormat: axis.labels.dateFormat,
-                numberFormat: axis.labels.numberFormat,
+                dateFormat: axis.labels['dateFormat'],
+                numberFormat: axis.labels['numberFormat'],
             });
         });
+        if (axis.ticks.pixelInterval) {
+            const ticksCount = height / axis.ticks.pixelInterval;
+            yAxisGenerator = yAxisGenerator.ticks(ticksCount);
+        }
         svgElement.call(yAxisGenerator).attr('class', b());
         svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
-        svgElement
-            .selectAll('.tick text')
-            .style('font-size', axis.labels.style.fontSize)
-            .style('transform', 'translateY(-1px)');
+        if (axis.labels.enabled) {
+            svgElement
+                .selectAll('.tick text')
+                .style('font-size', axis.labels.style.fontSize)
+                .style('transform', 'translateY(-1px)');
+        }
         const transformStyle = svgElement.select('.tick').attr('transform');
         const { y } = parseTransformStyle(transformStyle);
         if (y === height) {

package/build/plugins/d3/renderer/hooks/useChartOptions/chart.js

@@ -24,12 +24,15 @@ const getAxisLabelMaxWidth = (args) => {
             maxDomainValue = max(domain);
         }
     }
-    const formattedValue = formatAxisTickLabel({
-        axisType: axis.type,
-        value: maxDomainValue,
-        dateFormat: axis.labels.dateFormat,
-        numberFormat: axis.labels.numberFormat,
-    });
+    let formattedValue = '';
+    if (axis.labels.enabled) {
+        formattedValue = formatAxisTickLabel({
+            axisType: axis.type,
+            value: maxDomainValue,
+            dateFormat: axis.labels['dateFormat'],
+            numberFormat: axis.labels['numberFormat'],
+        });
+    }
     select(document.body)
         .append('text')
         .style('font-size', axis.labels.style.fontSize)
@@ -49,10 +52,14 @@ export const getPreparedChart = (args) => {
         preparedY1Axis.labels.padding +
         getAxisLabelMaxWidth({ axis: preparedY1Axis, series: series.data }) +
         (preparedY1Axis.title.height || 0);
+    const marginTop = get(chart, 'margin.top', 0) +
+        getHorisontalSvgTextDimensions({ text: 'Tmp', style: preparedY1Axis.labels.style }) / 2;
+    const marginRight = get(chart, 'margin.right', 0) +
+        getAxisLabelMaxWidth({ axis: preparedXAxis, series: series.data }) / 2;
     return {
         margin: {
-            top: get(chart, 'margin.top', 0),
-            right: get(chart, 'margin.right', 0),
+            top: marginTop,
+            right: marginRight,
             bottom: marginBottom,
             left: marginLeft,
         },

package/build/plugins/d3/renderer/hooks/useChartOptions/types.d.ts

@@ -15,6 +15,13 @@ export type PreparedAxis = Omit<ChartKitWidgetAxis, 'type' | 'labels'> & {
         style: BaseTextStyle;
     };
     min?: number;
+    grid: {
+        enabled: boolean;
+    };
+    maxPadding: number;
+    ticks: {
+        pixelInterval?: number;
+    };
 };
 export type PreparedTitle = ChartKitWidgetData['title'] & {
     height: number;

package/build/plugins/d3/renderer/hooks/useChartOptions/x-axis.js

@@ -24,6 +24,14 @@ export const getPreparedXAxis = ({ xAxis }) => {
                 ? getHorisontalSvgTextDimensions({ text: titleText, style: titleStyle })
                 : 0,
         },
+        min: get(xAxis, 'min'),
+        maxPadding: get(xAxis, 'maxPadding', 0.01),
+        grid: {
+            enabled: get(xAxis, 'grid.enabled', true),
+        },
+        ticks: {
+            pixelInterval: get(xAxis, 'ticks.pixelInterval'),
+        },
     };
     return preparedXAxis;
 };

package/build/plugins/d3/renderer/hooks/useChartOptions/y-axis.js

@@ -30,6 +30,13 @@ export const getPreparedYAxis = ({ yAxis }) => {
                 : 0,
         },
         min: get(yAxis1, 'min'),
+        maxPadding: get(yAxis1, 'maxPadding', 0.05),
+        grid: {
+            enabled: get(yAxis1, 'grid.enabled', true),
+        },
+        ticks: {
+            pixelInterval: get(yAxis1, 'ticks.pixelInterval'),
+        },
     };
     return [preparedY1Axis];
 };

package/build/plugins/d3/renderer/hooks/useScales/index.js

@@ -15,6 +15,7 @@ const filterCategoriesByVisibleSeries = (categories, series) => {
 export const useScales = (args) => {
     const { boundsWidth, boundsHeight, series, xAxis, yAxis } = args;
     const scales = React.useMemo(() => {
+        const xMin = get(xAxis, 'min');
         const xType = get(xAxis, 'type', 'linear');
         const xCategories = get(xAxis, 'categories');
         const xTimestamps = get(xAxis, 'timestamps');
@@ -31,9 +32,11 @@ export const useScales = (args) => {
         switch (xType) {
             case 'linear': {
                 const domain = getDomainDataXBySeries(visibleSeries);
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
                 if (isNumericalArrayData(domain)) {
-                    const [xMin, xMax] = extent(domain);
-                    xScale = scaleLinear().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    const [domainXMin, xMax] = extent(domain);
+                    const xMinValue = typeof xMin === 'number' ? xMin : domainXMin;
+                    xScale = scaleLinear().domain([xMinValue, xMax]).range(range).nice();
                 }
                 break;
             }
@@ -45,15 +48,16 @@ export const useScales = (args) => {
                 break;
             }
             case 'datetime': {
+                const range = [0, boundsWidth - boundsWidth * xAxis.maxPadding];
                 if (xTimestamps) {
                     const [xMin, xMax] = extent(xTimestamps);
-                    xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                    xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                 }
                 else {
                     const domain = getDomainDataXBySeries(visibleSeries);
                     if (isNumericalArrayData(domain)) {
                         const [xMin, xMax] = extent(domain);
-                        xScale = scaleUtc().domain([xMin, xMax]).range([0, boundsWidth]).nice();
+                        xScale = scaleUtc().domain([xMin, xMax]).range(range).nice();
                     }
                 }
                 break;
@@ -65,13 +69,11 @@ export const useScales = (args) => {
         switch (yType) {
             case 'linear': {
                 const domain = getDomainDataYBySeries(visibleSeries);
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
                 if (isNumericalArrayData(domain)) {
                     const [domainYMin, yMax] = extent(domain);
                     const yMinValue = typeof yMin === 'number' ? yMin : domainYMin;
-                    yScale = scaleLinear()
-                        .domain([yMinValue, yMax])
-                        .range([boundsHeight, 0])
-                        .nice();
+                    yScale = scaleLinear().domain([yMinValue, yMax]).range(range).nice();
                 }
                 break;
             }
@@ -83,15 +85,16 @@ export const useScales = (args) => {
                 break;
             }
             case 'datetime': {
+                const range = [boundsHeight, boundsHeight * yAxis[0].maxPadding];
                 if (yTimestamps) {
                     const [yMin, yMax] = extent(yTimestamps);
-                    yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                    yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                 }
                 else {
                     const domain = getDomainDataYBySeries(visibleSeries);
                     if (isNumericalArrayData(domain)) {
                         const [yMin, yMax] = extent(domain);
-                        yScale = scaleUtc().domain([yMin, yMax]).range([boundsHeight, 0]).nice();
+                        yScale = scaleUtc().domain([yMin, yMax]).range(range).nice();
                     }
                 }
                 break;

package/build/plugins/d3/renderer/hooks/useShapes/{bar.d.ts → bar-x.d.ts}

@@ -2,9 +2,9 @@ import React from 'react';
 import { ChartOptions } from '../useChartOptions/types';
 import { ChartScale } from '../useScales';
 import { OnSeriesMouseLeave, OnSeriesMouseMove } from '../useTooltip/types';
-import { BarSeries } from '../../../../../types/widget-data';
+import { BarXSeries } from '../../../../../types/widget-data';
 type Args = {
-    series: BarSeries[];
+    series: BarXSeries[];
     xAxis: ChartOptions['xAxis'];
     xScale: ChartScale;
     yAxis: ChartOptions['yAxis'];
@@ -12,5 +12,5 @@ type Args = {
     onSeriesMouseMove?: OnSeriesMouseMove;
     onSeriesMouseLeave?: OnSeriesMouseLeave;
 };
-export declare function prepareBarSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+export declare function prepareBarXSeries(args: Args): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
 export {};

package/build/plugins/d3/renderer/hooks/useShapes/{bar.js → bar-x.js}

@@ -46,7 +46,7 @@ function minDiff(arr) {
     }
     return result;
 }
-export function prepareBarSeries(args) {
+export function prepareBarXSeries(args) {
     const { series, xAxis, xScale, yAxis, yScale, onSeriesMouseMove, onSeriesMouseLeave } = args;
     const seriesData = series.map(({ data }) => data).flat(2);
     const minPointDistance = minDiff(seriesData.map((item) => Number(item.x)));

package/build/plugins/d3/renderer/hooks/useShapes/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { group } from 'd3';
 import { getOnlyVisibleSeries } from '../../utils';
-import { prepareBarSeries } from './bar';
+import { prepareBarXSeries } from './bar-x';
 import { prepareScatterSeries } from './scatter';
 export const useShapes = (args) => {
     const { series, xAxis, xScale, yAxis, yScale, svgContainer, onSeriesMouseMove, onSeriesMouseLeave, } = args;
@@ -11,8 +11,8 @@ export const useShapes = (args) => {
         return Array.from(groupedSeries).reduce((acc, item) => {
             const [seriesType, chartSeries] = item;
             switch (seriesType) {
-                case 'bar': {
-                    acc.push(...prepareBarSeries({
+                case 'bar-x': {
+                    acc.push(...prepareBarXSeries({
                         series: chartSeries,
                         xAxis,
                         xScale,

package/build/plugins/highcharts/__stories__/Line.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Line: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/Line.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../components/ChartKit';
+import { data } from '../mocks/line';
+import { ChartStory } from './components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Line',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const Line = Template.bind({});

package/build/plugins/highcharts/__stories__/Pie.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Pie: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/Pie.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../components/ChartKit';
+import { data } from '../mocks/pie';
+import { ChartStory } from './components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Pie',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const Pie = Template.bind({});

package/build/plugins/highcharts/__stories__/area/Range.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const AreaRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/area/Range.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/area-range';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Area',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const AreaRange = Template.bind({});

package/build/plugins/highcharts/__stories__/area/Stacked.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const AreaStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/area/Stacked.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/area-stacked';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Area',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data, height: "500px" });
+};
+export const AreaStacked = Template.bind({});

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const HorizontalStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/column-hor-stacked';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const HorizontalStacked = Template.bind({});

package/build/plugins/highcharts/__stories__/column/Vertical.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Vertical: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/Vertical.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/column-ver';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const Vertical = Template.bind({});

package/build/plugins/highcharts/__stories__/column/VerticalStacked.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const VerticalStacked: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;

package/build/plugins/highcharts/__stories__/column/VerticalStacked.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../../mocks/column-ver-stacked';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const VerticalStacked = Template.bind({});

package/build/plugins/highcharts/__stories__/combined/ComboChartWithSameLegendValues.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ComboChart: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;