@gravity-ui/querieskit 1.0.3 → 1.1.0

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 {};

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

@@ -0,0 +1,343 @@
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.number.to-fixed.js";
+import "core-js/modules/es.object.to-string.js";
+export var cartesianAxisVariants = ['linear', 'datetime', 'logarithmic'];
+export var timeAxisVariants = ['datetime', 'linear'];
+export var logarithmicAxisVariants = ['logarithmic', 'linear'];
+export var pieAxisVariants = ['linear'];
+var getALineCords = function getALineCords() {
+  var linePoints = [82, 46, 54, 49, 38, 41, 65, 46, 58, 58, 54, 30, 38, 65, 36, 53, 45, 75, 69, 64, 31, 38, 53, 66, 52, 33, 34, 38, 37, 34, 26].map(function (y, index) {
+    return {
+      x: Number(Number(1 + index * 0.15).toFixed(2)),
+      y: y
+    };
+  });
+  return linePoints;
+};
+var getBLineCords = function getBLineCords() {
+  var linePoints = [23, 46, 54, 49, 38, 41, 65, 46, 23, 58, 54, 30, 66, 65, 36, 53, 85, 75, 69, 64, 90, 38, 53, 66, 52, 33, 34, 20, 37, 75, 33].map(function (y, index) {
+    return {
+      x: Number(Number(1 + index * 0.65).toFixed(2)),
+      y: y
+    };
+  });
+  return linePoints;
+};
+export var aLineCords = getALineCords();
+export var bLineCords = getBLineCords();
+export var lineSeriesMap = {
+  'Response time': {
+    type: 'line',
+    name: 'Response time',
+    seriesId: 'response-time',
+    data: aLineCords,
+    marker: {
+      enabled: false
+    }
+  }
+};
+export var multiLineSeriesMap = {
+  'Current week': {
+    type: 'line',
+    name: 'Current week',
+    seriesId: 'current-week',
+    data: [42, 48, 45, 61, 58, 72, 68].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    }),
+    marker: {
+      enabled: true
+    }
+  },
+  'Previous week': {
+    type: 'line',
+    name: 'Previous week',
+    seriesId: 'previous-week',
+    data: [38, 43, 49, 52, 55, 60, 63].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    }),
+    dashStyle: 'Dash',
+    marker: {
+      enabled: true
+    }
+  },
+  Target: {
+    type: 'line',
+    name: 'Target',
+    seriesId: 'target',
+    data: [50, 50, 50, 55, 55, 65, 65].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    }),
+    dashStyle: 'Dot',
+    marker: {
+      enabled: false
+    }
+  }
+};
+var hour = 60 * 60 * 1000;
+var timeSeriesStart = Date.UTC(2026, 7, 15, 8);
+export var timeSeriesMap = {
+  'Requests per minute': {
+    type: 'area',
+    name: 'Requests per minute',
+    seriesId: 'requests-per-minute',
+    data: [120, 180, 165, 240, 310, 285, 360, 330, 390, 350, 300, 260].map(function (y, index) {
+      return {
+        x: timeSeriesStart + index * hour,
+        y: y
+      };
+    }),
+    opacity: 0.35
+  }
+};
+export var stackedAreaSeriesMap = {
+  Organic: {
+    type: 'area',
+    name: 'Organic',
+    stacking: 'normal',
+    stackId: 'traffic',
+    seriesId: 'Organic',
+    data: [180, 210, 195, 240, 265, 290, 310].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    })
+  },
+  Advertising: {
+    type: 'area',
+    name: 'Advertising',
+    stacking: 'normal',
+    stackId: 'traffic',
+    seriesId: 'Advertising',
+    data: [80, 95, 120, 110, 140, 155, 170].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    })
+  },
+  Referrals: {
+    type: 'area',
+    name: 'Referrals',
+    stacking: 'normal',
+    stackId: 'traffic',
+    seriesId: 'Referrals',
+    data: [45, 52, 48, 65, 72, 68, 84].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    })
+  }
+};
+export var groupedColumnsSeriesMap = {
+  Desktop: {
+    type: 'bar-x',
+    name: 'Desktop',
+    borderRadius: 3,
+    dataLabels: {
+      enabled: true
+    },
+    seriesId: 'Desktop',
+    data: [420, 510, 590, 640, 710, 760].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    })
+  },
+  Mobile: {
+    type: 'bar-x',
+    name: 'Mobile',
+    borderRadius: 3,
+    dataLabels: {
+      enabled: true
+    },
+    seriesId: 'Mobile',
+    data: [310, 390, 460, 520, 610, 690].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    })
+  }
+};
+export var horizontalBarsSeriesMap = {
+  'Completed tasks': {
+    type: 'bar-y',
+    name: 'Completed tasks',
+    borderRadius: 3,
+    dataLabels: {
+      enabled: true
+    },
+    seriesId: 'Completed-tasks',
+    data: [92, 78, 67, 54, 41].map(function (x, y) {
+      return {
+        x: x,
+        y: y + 1
+      };
+    })
+  }
+};
+export var scatterSeriesMap = {
+  'Cached queries': {
+    type: 'scatter',
+    name: 'Cached queries',
+    data: [{
+      x: 12,
+      y: 90,
+      radius: 5
+    }, {
+      x: 18,
+      y: 125,
+      radius: 6
+    }, {
+      x: 25,
+      y: 145,
+      radius: 5
+    }, {
+      x: 33,
+      y: 170,
+      radius: 7
+    }, {
+      x: 46,
+      y: 210,
+      radius: 6
+    }, {
+      x: 58,
+      y: 245,
+      radius: 8
+    }],
+    seriesId: 'Cached-queries'
+  },
+  'Uncached queries': {
+    type: 'scatter',
+    name: 'Uncached queries',
+    symbolType: 'square',
+    data: [{
+      x: 14,
+      y: 180,
+      radius: 5
+    }, {
+      x: 21,
+      y: 230,
+      radius: 7
+    }, {
+      x: 29,
+      y: 280,
+      radius: 6
+    }, {
+      x: 37,
+      y: 340,
+      radius: 8
+    }, {
+      x: 49,
+      y: 410,
+      radius: 7
+    }, {
+      x: 62,
+      y: 490,
+      radius: 9
+    }],
+    seriesId: 'Uncached-queries'
+  }
+};
+export var donutSeriesMap = {
+  'Traffic sources': {
+    type: 'pie',
+    innerRadius: '55%',
+    dataLabels: {
+      enabled: true
+    },
+    data: [{
+      name: 'Search',
+      value: 42,
+      label: '42%'
+    }, {
+      name: 'Direct',
+      value: 27,
+      label: '27%'
+    }, {
+      name: 'Referrals',
+      value: 18,
+      label: '18%'
+    }, {
+      name: 'Social',
+      value: 13,
+      label: '13%'
+    }],
+    seriesId: 'Traffic-sources'
+  }
+};
+export var mixedSeriesMap = {
+  Orders: {
+    type: 'bar-x',
+    name: 'Orders',
+    borderRadius: 3,
+    data: [34, 46, 41, 55, 62, 68, 74].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    }),
+    seriesId: 'Orders'
+  },
+  Plan: {
+    type: 'line',
+    name: 'Plan',
+    dashStyle: 'Dash',
+    lineWidth: 2,
+    marker: {
+      enabled: true
+    },
+    data: [40, 44, 48, 52, 60, 66, 72].map(function (y, x) {
+      return {
+        x: x + 1,
+        y: y
+      };
+    }),
+    seriesId: 'Plan'
+  }
+};
+export var logarithmicSeriesMap = {
+  'Execution time': {
+    type: 'line',
+    name: 'Execution time',
+    marker: {
+      enabled: true
+    },
+    seriesId: 'Execution-time',
+    data: [{
+      x: 1,
+      y: 18
+    }, {
+      x: 10,
+      y: 32
+    }, {
+      x: 100,
+      y: 85
+    }, {
+      x: 1000,
+      y: 240
+    }, {
+      x: 10000,
+      y: 710
+    }, {
+      x: 100000,
+      y: 2150
+    }]
+  }
+};
+export var emptySeriesMap = {};
+// #sourceMappingURL=mockData.js.map