@gravity-ui/querieskit 1.0.4 → 1.2.0

package/build/esm/modules/ChartEditor/ChartEditor.css

@@ -0,0 +1,11 @@
+.qp-chart-editor {
+  background: var(--g-color-base-background);
+}
+.qp-chart-editor__preview {
+  flex: 1 1 auto;
+}
+.qp-chart-editor__panel {
+  min-width: 320px;
+  border-left: 1px solid var(--g-color-line-generic);
+}
+/*# sourceMappingURL=ChartEditor.css.map */

package/build/esm/modules/ChartEditor/ChartEditor.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartEditor.scss"],"names":[],"mappings":"AAAA;EACI,0CAAA;AACJ;AACI;EACI,cAAA;AACR;AAEI;EACI,gBAAA;EACA,kDAAA;AAAR","file":"ChartEditor.css","sourcesContent":[".qp-chart-editor {\n    background: var(--g-color-base-background);\n\n    &__preview {\n        flex: 1 1 auto;\n    }\n\n    &__panel {\n        min-width: 320px;\n        border-left: 1px solid var(--g-color-line-generic);\n    }\n}\n"],"sourceRoot":""}

package/build/esm/modules/ChartEditor/ChartEditor.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { ChartEditorProps } from './types';
+import './ChartEditor.scss';
+export declare const ChartEditor: ({ axisVariants, chartSeriesMap, className, emptyDataLabel, onCancel, onSubmit, onChange, formProps, formValues: customerFormValues, }: ChartEditorProps) => React.JSX.Element;

package/build/esm/modules/ChartEditor/ChartEditor.js

@@ -0,0 +1,139 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.set.js";
+import "core-js/modules/es.set.difference.v2.js";
+import "core-js/modules/es.set.intersection.v2.js";
+import "core-js/modules/es.set.is-disjoint-from.v2.js";
+import "core-js/modules/es.set.is-subset-of.v2.js";
+import "core-js/modules/es.set.is-superset-of.v2.js";
+import "core-js/modules/es.set.symmetric-difference.v2.js";
+import "core-js/modules/es.set.union.v2.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useMemo, useState } from 'react';
+import { Chart } from '@gravity-ui/charts';
+import { Box, Flex, Text } from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+import { ChartEditorForm } from "../../components/ChartEditorForm";
+import i18n from "./i18n";
+import "./ChartEditor.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-chart-editor');
+export var ChartEditor = function ChartEditor(_ref) {
+  var axisVariants = _ref.axisVariants,
+    chartSeriesMap = _ref.chartSeriesMap,
+    className = _ref.className,
+    emptyDataLabel = _ref.emptyDataLabel,
+    onCancel = _ref.onCancel,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange,
+    formProps = _ref.formProps,
+    customerFormValues = _ref.formValues;
+  var emptyLabel = emptyDataLabel !== null && emptyDataLabel !== void 0 ? emptyDataLabel : i18n('alert_no-chart-data');
+  var dataIdsOptions = useMemo(function () {
+    return Object.keys(chartSeriesMap !== null && chartSeriesMap !== void 0 ? chartSeriesMap : []);
+  }, [chartSeriesMap]);
+  var _useState = useState(customerFormValues !== null && customerFormValues !== void 0 ? customerFormValues : {
+      dataIds: dataIdsOptions.length ? [dataIdsOptions[0]] : [],
+      axisType: 'linear'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    formValues = _useState2[0],
+    setFormValues = _useState2[1];
+  var selectedChartSeries = useMemo(function () {
+    var selectedDataIdsSet = new Set(formValues.dataIds);
+    var record = [];
+    for (var dataId in chartSeriesMap) {
+      if (selectedDataIdsSet.has(dataId)) {
+        record.push(chartSeriesMap[dataId]);
+      }
+    }
+    return record;
+  }, [chartSeriesMap, formValues.dataIds]);
+  var chartData = useMemo(function () {
+    var axisType = formValues.axisType,
+      xTitle = formValues.xTitle,
+      yTitle = formValues.yTitle,
+      showLegend = formValues.showLegend,
+      chartTitle = formValues.chartTitle,
+      axisCategories = formValues.axisCategories;
+    return {
+      series: {
+        data: selectedChartSeries
+      },
+      xAxis: {
+        type: axisType,
+        title: {
+          text: xTitle
+        },
+        categories: axisCategories
+      },
+      yAxis: [{
+        title: {
+          text: yTitle
+        }
+      }],
+      legend: {
+        enabled: Boolean(showLegend)
+      },
+      title: chartTitle ? {
+        text: chartTitle
+      } : undefined
+    };
+  }, [selectedChartSeries, formValues]);
+  var handleSubmit = function handleSubmit() {
+    onSubmit === null || onSubmit === void 0 || onSubmit(chartData);
+  };
+  var handleCancel = function handleCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+  var handleFormValuesChange = function handleFormValuesChange(patchedFormValues) {
+    setFormValues(patchedFormValues);
+    onChange === null || onChange === void 0 || onChange(patchedFormValues);
+  };
+  return /*#__PURE__*/_jsxs(Flex, {
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    as: "section",
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(Box, {
+      spacing: {
+        p: 5
+      },
+      className: block('preview'),
+      children: selectedChartSeries.length ? /*#__PURE__*/_jsx(Box, {
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        children: /*#__PURE__*/_jsx(Chart, {
+          data: chartData
+        })
+      }) : /*#__PURE__*/_jsx(Flex, {
+        width: "100%",
+        height: "100%",
+        centerContent: true,
+        className: block('empty'),
+        children: /*#__PURE__*/_jsx(Text, {
+          color: "secondary",
+          children: emptyLabel
+        })
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: block('panel'),
+      children: /*#__PURE__*/_jsx(ChartEditorForm, _objectSpread({
+        dataIds: dataIdsOptions,
+        axisVariants: axisVariants,
+        formValues: formValues,
+        onFormValuesChange: handleFormValuesChange,
+        onSubmit: handleSubmit,
+        onCancel: handleCancel
+      }, formProps))
+    })]
+  });
+};
+// #sourceMappingURL=ChartEditor.js.map

package/build/esm/modules/ChartEditor/ChartEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","Chart","Box","Flex","Text","cn","ChartEditorForm","i18n","jsx","_jsx","jsxs","_jsxs","block","ChartEditor","_ref","axisVariants","chartSeriesMap","className","emptyDataLabel","onCancel","onSubmit","onChange","formProps","customerFormValues","formValues","emptyLabel","dataIdsOptions","Object","keys","_useState","dataIds","length","axisType","_useState2","_slicedToArray","setFormValues","selectedChartSeries","selectedDataIdsSet","Set","record","dataId","has","push","chartData","xTitle","yTitle","showLegend","chartTitle","axisCategories","series","data","xAxis","type","title","text","categories","yAxis","legend","enabled","Boolean","undefined","handleSubmit","handleCancel","handleFormValuesChange","patchedFormValues","width","height","overflow","as","children","spacing","p","centerContent","color","_objectSpread","onFormValuesChange"],"sources":["ChartEditor.tsx"],"sourcesContent":["import React, {useMemo, useState} from 'react';\nimport {Chart} from '@gravity-ui/charts';\nimport {Box, Flex, Text} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\n\nimport {ChartEditorForm} from '../../components/ChartEditorForm';\nimport type {ChartEditorFormProps} from '../../components/ChartEditorForm';\nimport type {ChartData, ChartEditorProps, ChartSeries} from './types';\nimport i18n from './i18n';\n\nimport './ChartEditor.scss';\n\nconst block = cn('qp-chart-editor');\n\nexport const ChartEditor = ({\n    axisVariants,\n    chartSeriesMap,\n    className,\n    emptyDataLabel,\n    onCancel,\n    onSubmit,\n    onChange,\n    formProps,\n    formValues: customerFormValues,\n}: ChartEditorProps) => {\n    const emptyLabel = emptyDataLabel ?? i18n('alert_no-chart-data');\n\n    const dataIdsOptions = useMemo(() => Object.keys(chartSeriesMap ?? []), [chartSeriesMap]);\n\n    const [formValues, setFormValues] = useState<ChartEditorFormProps['formValues']>(\n        customerFormValues ?? {\n            dataIds: dataIdsOptions.length ? [dataIdsOptions[0]] : [],\n            axisType: 'linear',\n        },\n    );\n\n    const selectedChartSeries = useMemo(() => {\n        const selectedDataIdsSet = new Set(formValues.dataIds);\n        const record: ChartSeries[] = [];\n        for (const dataId in chartSeriesMap) {\n            if (selectedDataIdsSet.has(dataId)) {\n                record.push(chartSeriesMap[dataId]);\n            }\n        }\n        return record;\n    }, [chartSeriesMap, formValues.dataIds]);\n\n    const chartData: ChartData = useMemo(() => {\n        const {axisType, xTitle, yTitle, showLegend, chartTitle, axisCategories} = formValues;\n\n        return {\n            series: {\n                data: selectedChartSeries,\n            },\n            xAxis: {\n                type: axisType,\n                title: {text: xTitle},\n                categories: axisCategories,\n            },\n            yAxis: [\n                {\n                    title: {text: yTitle},\n                },\n            ],\n            legend: {enabled: Boolean(showLegend)},\n            title: chartTitle ? {text: chartTitle} : undefined,\n        };\n    }, [selectedChartSeries, formValues]);\n\n    const handleSubmit = () => {\n        onSubmit?.(chartData);\n    };\n\n    const handleCancel = () => {\n        onCancel?.();\n    };\n\n    const handleFormValuesChange = (patchedFormValues: ChartEditorFormProps['formValues']) => {\n        setFormValues(patchedFormValues);\n        onChange?.(patchedFormValues);\n    };\n\n    return (\n        <Flex\n            width=\"100%\"\n            height=\"100%\"\n            overflow=\"hidden\"\n            as=\"section\"\n            className={block(null, className)}\n        >\n            <Box spacing={{p: 5}} className={block('preview')}>\n                {selectedChartSeries.length ? (\n                    <Box overflow=\"hidden\" width=\"100%\" height=\"100%\">\n                        <Chart data={chartData} />\n                    </Box>\n                ) : (\n                    <Flex width=\"100%\" height=\"100%\" centerContent className={block('empty')}>\n                        <Text color=\"secondary\">{emptyLabel}</Text>\n                    </Flex>\n                )}\n            </Box>\n\n            <div className={block('panel')}>\n                <ChartEditorForm\n                    dataIds={dataIdsOptions}\n                    axisVariants={axisVariants}\n                    formValues={formValues}\n                    onFormValuesChange={handleFormValuesChange}\n                    onSubmit={handleSubmit}\n                    onCancel={handleCancel}\n                    {...formProps}\n                />\n            </div>\n        </Flex>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/modules/ChartEditor/ChartEditor.scss

@@ -0,0 +1,12 @@
+.qp-chart-editor {
+    background: var(--g-color-base-background);
+
+    &__preview {
+        flex: 1 1 auto;
+    }
+
+    &__panel {
+        min-width: 320px;
+        border-left: 1px solid var(--g-color-line-generic);
+    }
+}

package/build/esm/modules/ChartEditor/i18n/dicts.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    en: {
+        "alert_no-chart-data": string;
+    };
+    ru: {
+        "alert_no-chart-data": string;
+    };
+};
+export default _default;

package/build/esm/modules/ChartEditor/i18n/dicts.js

@@ -0,0 +1,7 @@
+import en from "./en.json";
+import ru from "./ru.json";
+export default {
+  en: en,
+  ru: ru
+};
+// #sourceMappingURL=dicts.js.map

package/build/esm/modules/ChartEditor/i18n/dicts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["en","ru"],"sources":["dicts.ts"],"sourcesContent":["import en from './en.json';\nimport ru from './ru.json';\n\nexport default {en, ru};\n"],"mappings":"AAAA,OAAOA,EAAE;AACT,OAAOC,EAAE;AAET,eAAe;EAACD,EAAE,EAAFA,EAAE;EAAEC,EAAE,EAAFA;AAAE,CAAC","ignoreList":[]}

package/build/esm/modules/ChartEditor/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "alert_no-chart-data": "No data for the selected category"
+}

package/build/esm/modules/ChartEditor/i18n/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ((key: "alert_no-chart-data", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "qp:chart-editor": Record<"alert_no-chart-data", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;

package/build/esm/modules/ChartEditor/i18n/index.js

@@ -0,0 +1,4 @@
+import { addI18Keysets } from "../../../i18n";
+import dicts from "./dicts";
+export default addI18Keysets('qp:chart-editor', dicts);
+// #sourceMappingURL=index.js.map

package/build/esm/modules/ChartEditor/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addI18Keysets","dicts"],"sources":["index.ts"],"sourcesContent":["import {addI18Keysets} from '../../../i18n';\n\nimport dicts from './dicts';\n\nexport default addI18Keysets('qp:chart-editor', dicts);\n"],"mappings":"AAAA,SAAQA,aAAa;AAErB,OAAOC,KAAK;AAEZ,eAAeD,aAAa,CAAC,iBAAiB,EAAEC,KAAK,CAAC","ignoreList":[]}

package/build/esm/modules/ChartEditor/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "alert_no-chart-data": "Нет данных для выбранной категории"
+}

package/build/esm/modules/ChartEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { ChartEditor } from './ChartEditor';
+export type { ChartEditorProps } from './types';

package/build/esm/modules/ChartEditor/index.js

@@ -0,0 +1,2 @@
+export { ChartEditor } from "./ChartEditor";
+// #sourceMappingURL=index.js.map

package/build/esm/modules/ChartEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ChartEditor"],"sources":["index.ts"],"sourcesContent":["export {ChartEditor} from './ChartEditor';\nexport type {ChartEditorProps} from './types';\n"],"mappings":"AAAA,SAAQA,WAAW","ignoreList":[]}

package/build/esm/modules/ChartEditor/story/ChartEditor.stories.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ axisVariants, chartSeriesMap, className, emptyDataLabel, onCancel, onSubmit, onChange, formProps, formValues: customerFormValues, }: import("..").ChartEditorProps) => React.JSX.Element;
+    tags: string[];
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        axisVariants?: import("@gravity-ui/charts").ChartAxisType[] | undefined;
+        className?: string | undefined;
+        emptyDataLabel?: string | undefined;
+        chartSeriesMap?: { [chartId in string]: import("../types").ChartSeries; } | undefined;
+        formProps?: Pick<import("../../..").ChartEditorFormProps, "disabled" | "className" | "labels"> | undefined;
+        formValues?: import("../../..").ChartEditorFormProps["formValues"] | undefined;
+        onChange?: ((formValues: import("../../..").ChartEditorFormProps["formValues"]) => void) | undefined;
+        onSubmit?: ((chartData: import("../types").ChartData) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+    }>) => React.JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        axisVariants: import("@gravity-ui/charts").ChartAxisType[];
+        onCancel: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onSubmit: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Line: Story;
+export declare const MultipleLines: Story;
+export declare const TimeSeries: Story;
+export declare const StackedArea: Story;
+export declare const GroupedColumns: Story;
+export declare const HorizontalBars: Story;
+export declare const ScatterPlot: Story;
+export declare const Donut: Story;
+export declare const MixedSeries: Story;
+export declare const LogarithmicScale: Story;
+export declare const EmptyState: Story;

package/build/esm/modules/ChartEditor/story/ChartEditor.stories.js

@@ -0,0 +1,158 @@
+import React from 'react';
+import { fn } from 'storybook/test';
+import { ChartEditor } from '..';
+import { cartesianAxisVariants, donutSeriesMap, emptySeriesMap, groupedColumnsSeriesMap, horizontalBarsSeriesMap, lineSeriesMap, logarithmicAxisVariants, logarithmicSeriesMap, mixedSeriesMap, multiLineSeriesMap, pieAxisVariants, scatterSeriesMap, stackedAreaSeriesMap, timeAxisVariants, timeSeriesMap } from "./mockData";
+import { jsx as _jsx } from "react/jsx-runtime";
+var meta = {
+  title: 'Modules/ChartEditor',
+  component: ChartEditor,
+  tags: ['autodocs'],
+  decorators: [function (Story) {
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        height: 620,
+        minWidth: 760
+      },
+      children: /*#__PURE__*/_jsx(Story, {})
+    });
+  }],
+  parameters: {
+    layout: 'padded'
+  },
+  args: {
+    axisVariants: cartesianAxisVariants,
+    onCancel: fn(),
+    onSubmit: fn()
+  }
+};
+export default meta;
+export var Line = {
+  args: {
+    chartSeriesMap: lineSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A minimal editor configuration with one numeric line series.'
+      }
+    }
+  }
+};
+export var MultipleLines = {
+  args: {
+    chartSeriesMap: multiLineSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Select additional data rows to compare the current week, previous week, and target.'
+      }
+    }
+  }
+};
+export var TimeSeries = {
+  args: {
+    axisVariants: timeAxisVariants,
+    chartSeriesMap: timeSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'An area time series backed by UTC timestamps. Switch the axis type to datetime to format the X axis as dates.'
+      }
+    }
+  }
+};
+export var StackedArea = {
+  args: {
+    chartSeriesMap: stackedAreaSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A stacked traffic breakdown. Select all three data rows to build the complete stack.'
+      }
+    }
+  }
+};
+export var GroupedColumns = {
+  args: {
+    chartSeriesMap: groupedColumnsSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Vertical columns with values rendered on the bars. Add Mobile to compare device groups.'
+      }
+    }
+  }
+};
+export var HorizontalBars = {
+  args: {
+    chartSeriesMap: horizontalBarsSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A horizontal ranking chart using the bar-y series type.'
+      }
+    }
+  }
+};
+export var ScatterPlot = {
+  args: {
+    chartSeriesMap: scatterSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A scatter plot for investigating the relationship between input size and query duration. Select both data rows to compare cached and uncached queries.'
+      }
+    }
+  }
+};
+export var Donut = {
+  args: {
+    axisVariants: pieAxisVariants,
+    chartSeriesMap: donutSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A pie series with an inner radius and percentage labels, rendered as a donut chart.'
+      }
+    }
+  }
+};
+export var MixedSeries = {
+  args: {
+    chartSeriesMap: mixedSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A combined column-and-line chart. Select Plan together with Orders to compare actual values against the target.'
+      }
+    }
+  }
+};
+export var LogarithmicScale = {
+  args: {
+    axisVariants: logarithmicAxisVariants,
+    chartSeriesMap: logarithmicSeriesMap
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Values spanning five orders of magnitude. Switch the X axis to logarithmic to make the distribution readable.'
+      }
+    }
+  }
+};
+export var EmptyState = {
+  args: {
+    chartSeriesMap: emptySeriesMap,
+    emptyDataLabel: 'Run a query or select a result column to preview a chart'
+  }
+};
+// #sourceMappingURL=ChartEditor.stories.js.map

package/build/esm/modules/ChartEditor/story/ChartEditor.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","fn","ChartEditor","cartesianAxisVariants","donutSeriesMap","emptySeriesMap","groupedColumnsSeriesMap","horizontalBarsSeriesMap","lineSeriesMap","logarithmicAxisVariants","logarithmicSeriesMap","mixedSeriesMap","multiLineSeriesMap","pieAxisVariants","scatterSeriesMap","stackedAreaSeriesMap","timeAxisVariants","timeSeriesMap","jsx","_jsx","meta","title","component","tags","decorators","Story","style","height","minWidth","children","parameters","layout","args","axisVariants","onCancel","onSubmit","Line","chartSeriesMap","docs","description","story","MultipleLines","TimeSeries","StackedArea","GroupedColumns","HorizontalBars","ScatterPlot","Donut","MixedSeries","LogarithmicScale","EmptyState","emptyDataLabel"],"sources":["ChartEditor.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {fn} from 'storybook/test';\n\nimport {ChartEditor} from '..';\nimport {\n    cartesianAxisVariants,\n    donutSeriesMap,\n    emptySeriesMap,\n    groupedColumnsSeriesMap,\n    horizontalBarsSeriesMap,\n    lineSeriesMap,\n    logarithmicAxisVariants,\n    logarithmicSeriesMap,\n    mixedSeriesMap,\n    multiLineSeriesMap,\n    pieAxisVariants,\n    scatterSeriesMap,\n    stackedAreaSeriesMap,\n    timeAxisVariants,\n    timeSeriesMap,\n} from './mockData';\n\nconst meta = {\n    title: 'Modules/ChartEditor',\n    component: ChartEditor,\n    tags: ['autodocs'],\n    decorators: [\n        (Story) => (\n            <div style={{height: 620, minWidth: 760}}>\n                <Story />\n            </div>\n        ),\n    ],\n    parameters: {\n        layout: 'padded',\n    },\n    args: {\n        axisVariants: cartesianAxisVariants,\n        onCancel: fn(),\n        onSubmit: fn(),\n    },\n} satisfies Meta<typeof ChartEditor>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Line: Story = {\n    args: {\n        chartSeriesMap: lineSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A minimal editor configuration with one numeric line series.',\n            },\n        },\n    },\n};\n\nexport const MultipleLines: Story = {\n    args: {\n        chartSeriesMap: multiLineSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'Select additional data rows to compare the current week, previous week, and target.',\n            },\n        },\n    },\n};\n\nexport const TimeSeries: Story = {\n    args: {\n        axisVariants: timeAxisVariants,\n        chartSeriesMap: timeSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'An area time series backed by UTC timestamps. Switch the axis type to datetime to format the X axis as dates.',\n            },\n        },\n    },\n};\n\nexport const StackedArea: Story = {\n    args: {\n        chartSeriesMap: stackedAreaSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A stacked traffic breakdown. Select all three data rows to build the complete stack.',\n            },\n        },\n    },\n};\n\nexport const GroupedColumns: Story = {\n    args: {\n        chartSeriesMap: groupedColumnsSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'Vertical columns with values rendered on the bars. Add Mobile to compare device groups.',\n            },\n        },\n    },\n};\n\nexport const HorizontalBars: Story = {\n    args: {\n        chartSeriesMap: horizontalBarsSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A horizontal ranking chart using the bar-y series type.',\n            },\n        },\n    },\n};\n\nexport const ScatterPlot: Story = {\n    args: {\n        chartSeriesMap: scatterSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A scatter plot for investigating the relationship between input size and query duration. Select both data rows to compare cached and uncached queries.',\n            },\n        },\n    },\n};\n\nexport const Donut: Story = {\n    args: {\n        axisVariants: pieAxisVariants,\n        chartSeriesMap: donutSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A pie series with an inner radius and percentage labels, rendered as a donut chart.',\n            },\n        },\n    },\n};\n\nexport const MixedSeries: Story = {\n    args: {\n        chartSeriesMap: mixedSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'A combined column-and-line chart. Select Plan together with Orders to compare actual values against the target.',\n            },\n        },\n    },\n};\n\nexport const LogarithmicScale: Story = {\n    args: {\n        axisVariants: logarithmicAxisVariants,\n        chartSeriesMap: logarithmicSeriesMap,\n    },\n    parameters: {\n        docs: {\n            description: {\n                story: 'Values spanning five orders of magnitude. Switch the X axis to logarithmic to make the distribution readable.',\n            },\n        },\n    },\n};\n\nexport const EmptyState: Story = {\n    args: {\n        chartSeriesMap: emptySeriesMap,\n        emptyDataLabel: 'Run a query or select a result column to preview a chart',\n    },\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/modules/ChartEditor/story/mockData.d.ts

@@ -0,0 +1,27 @@
+import type { ChartAxisType } from '@gravity-ui/charts';
+import type { ChartSeries } from '../types';
+type ChartSeriesMap = Record<string, ChartSeries>;
+export declare const cartesianAxisVariants: ChartAxisType[];
+export declare const timeAxisVariants: ChartAxisType[];
+export declare const logarithmicAxisVariants: ChartAxisType[];
+export declare const pieAxisVariants: ChartAxisType[];
+export declare const aLineCords: {
+    x: number;
+    y: number;
+}[];
+export declare const bLineCords: {
+    x: number;
+    y: number;
+}[];
+export declare const lineSeriesMap: ChartSeriesMap;
+export declare const multiLineSeriesMap: ChartSeriesMap;
+export declare const timeSeriesMap: ChartSeriesMap;
+export declare const stackedAreaSeriesMap: ChartSeriesMap;
+export declare const groupedColumnsSeriesMap: ChartSeriesMap;
+export declare const horizontalBarsSeriesMap: ChartSeriesMap;
+export declare const scatterSeriesMap: ChartSeriesMap;
+export declare const donutSeriesMap: ChartSeriesMap;
+export declare const mixedSeriesMap: ChartSeriesMap;
+export declare const logarithmicSeriesMap: ChartSeriesMap;
+export declare const emptySeriesMap: ChartSeriesMap;
+export {};