@gravity-ui/querieskit 1.2.0 → 1.3.1

package/src/modules/ChartEditor/ChartEditor.tsx

@@ -1,116 +0,0 @@
-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 type {ChartEditorFormProps} from '../../components/ChartEditorForm';
-import type {ChartData, ChartEditorProps, ChartSeries} from './types';
-import i18n from './i18n';
-
-import './ChartEditor.scss';
-
-const block = cn('qp-chart-editor');
-
-export const ChartEditor = ({
-    axisVariants,
-    chartSeriesMap,
-    className,
-    emptyDataLabel,
-    onCancel,
-    onSubmit,
-    onChange,
-    formProps,
-    formValues: customerFormValues,
-}: ChartEditorProps) => {
-    const emptyLabel = emptyDataLabel ?? i18n('alert_no-chart-data');
-
-    const dataIdsOptions = useMemo(() => Object.keys(chartSeriesMap ?? []), [chartSeriesMap]);
-
-    const [formValues, setFormValues] = useState<ChartEditorFormProps['formValues']>(
-        customerFormValues ?? {
-            dataIds: dataIdsOptions.length ? [dataIdsOptions[0]] : [],
-            axisType: 'linear',
-        },
-    );
-
-    const selectedChartSeries = useMemo(() => {
-        const selectedDataIdsSet = new Set(formValues.dataIds);
-        const record: ChartSeries[] = [];
-        for (const dataId in chartSeriesMap) {
-            if (selectedDataIdsSet.has(dataId)) {
-                record.push(chartSeriesMap[dataId]);
-            }
-        }
-        return record;
-    }, [chartSeriesMap, formValues.dataIds]);
-
-    const chartData: ChartData = useMemo(() => {
-        const {axisType, xTitle, yTitle, showLegend, chartTitle, axisCategories} = formValues;
-
-        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]);
-
-    const handleSubmit = () => {
-        onSubmit?.(chartData);
-    };
-
-    const handleCancel = () => {
-        onCancel?.();
-    };
-
-    const handleFormValuesChange = (patchedFormValues: ChartEditorFormProps['formValues']) => {
-        setFormValues(patchedFormValues);
-        onChange?.(patchedFormValues);
-    };
-
-    return (
-        <Flex
-            width="100%"
-            height="100%"
-            overflow="hidden"
-            as="section"
-            className={block(null, className)}
-        >
-            <Box spacing={{p: 5}} className={block('preview')}>
-                {selectedChartSeries.length ? (
-                    <Box overflow="hidden" width="100%" height="100%">
-                        <Chart data={chartData} />
-                    </Box>
-                ) : (
-                    <Flex width="100%" height="100%" centerContent className={block('empty')}>
-                        <Text color="secondary">{emptyLabel}</Text>
-                    </Flex>
-                )}
-            </Box>
-
-            <div className={block('panel')}>
-                <ChartEditorForm
-                    dataIds={dataIdsOptions}
-                    axisVariants={axisVariants}
-                    formValues={formValues}
-                    onFormValuesChange={handleFormValuesChange}
-                    onSubmit={handleSubmit}
-                    onCancel={handleCancel}
-                    {...formProps}
-                />
-            </div>
-        </Flex>
-    );
-};

package/src/modules/ChartEditor/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/modules/ChartEditor/i18n/en.json

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

package/src/modules/ChartEditor/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:chart-editor', dicts);

package/src/modules/ChartEditor/i18n/ru.json

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

package/src/modules/ChartEditor/index.ts

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

package/src/modules/ChartEditor/story/ChartEditor.stories.tsx

@@ -1,186 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/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';
-
-const meta = {
-    title: 'Modules/ChartEditor',
-    component: ChartEditor,
-    tags: ['autodocs'],
-    decorators: [
-        (Story) => (
-            <div style={{height: 620, minWidth: 760}}>
-                <Story />
-            </div>
-        ),
-    ],
-    parameters: {
-        layout: 'padded',
-    },
-    args: {
-        axisVariants: cartesianAxisVariants,
-        onCancel: fn(),
-        onSubmit: fn(),
-    },
-} satisfies Meta<typeof ChartEditor>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Line: Story = {
-    args: {
-        chartSeriesMap: lineSeriesMap,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'A minimal editor configuration with one numeric line series.',
-            },
-        },
-    },
-};
-
-export const MultipleLines: Story = {
-    args: {
-        chartSeriesMap: multiLineSeriesMap,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Select additional data rows to compare the current week, previous week, and target.',
-            },
-        },
-    },
-};
-
-export const TimeSeries: Story = {
-    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 const StackedArea: Story = {
-    args: {
-        chartSeriesMap: stackedAreaSeriesMap,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'A stacked traffic breakdown. Select all three data rows to build the complete stack.',
-            },
-        },
-    },
-};
-
-export const GroupedColumns: Story = {
-    args: {
-        chartSeriesMap: groupedColumnsSeriesMap,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'Vertical columns with values rendered on the bars. Add Mobile to compare device groups.',
-            },
-        },
-    },
-};
-
-export const HorizontalBars: Story = {
-    args: {
-        chartSeriesMap: horizontalBarsSeriesMap,
-    },
-    parameters: {
-        docs: {
-            description: {
-                story: 'A horizontal ranking chart using the bar-y series type.',
-            },
-        },
-    },
-};
-
-export const ScatterPlot: Story = {
-    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 const Donut: Story = {
-    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 const MixedSeries: Story = {
-    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 const LogarithmicScale: Story = {
-    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 const EmptyState: Story = {
-    args: {
-        chartSeriesMap: emptySeriesMap,
-        emptyDataLabel: 'Run a query or select a result column to preview a chart',
-    },
-};

package/src/modules/ChartEditor/story/mockData.ts

@@ -1,222 +0,0 @@
-import type {ChartAxisType} from '@gravity-ui/charts';
-import type {ChartSeries} from '../types';
-
-type ChartSeriesMap = Record<string, ChartSeries>;
-
-export const cartesianAxisVariants: ChartAxisType[] = ['linear', 'datetime', 'logarithmic'];
-export const timeAxisVariants: ChartAxisType[] = ['datetime', 'linear'];
-export const logarithmicAxisVariants: ChartAxisType[] = ['logarithmic', 'linear'];
-export const pieAxisVariants: ChartAxisType[] = ['linear'];
-
-const getALineCords = () => {
-    const 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((y, index) => ({x: Number(Number(1 + index * 0.15).toFixed(2)), y}));
-
-    return linePoints;
-};
-
-const getBLineCords = () => {
-    const 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((y, index) => ({x: Number(Number(1 + index * 0.65).toFixed(2)), y}));
-
-    return linePoints;
-};
-
-export const aLineCords = getALineCords();
-export const bLineCords = getBLineCords();
-
-export const lineSeriesMap: ChartSeriesMap = {
-    'Response time': {
-        type: 'line',
-        name: 'Response time',
-        seriesId: 'response-time',
-        data: aLineCords,
-        marker: {enabled: false},
-    },
-};
-
-export const multiLineSeriesMap: ChartSeriesMap = {
-    'Current week': {
-        type: 'line',
-        name: 'Current week',
-        seriesId: 'current-week',
-        data: [42, 48, 45, 61, 58, 72, 68].map((y, x) => ({x: x + 1, y})),
-        marker: {enabled: true},
-    },
-    'Previous week': {
-        type: 'line',
-        name: 'Previous week',
-        seriesId: 'previous-week',
-        data: [38, 43, 49, 52, 55, 60, 63].map((y, x) => ({x: x + 1, y})),
-        dashStyle: 'Dash',
-        marker: {enabled: true},
-    },
-    Target: {
-        type: 'line',
-        name: 'Target',
-        seriesId: 'target',
-        data: [50, 50, 50, 55, 55, 65, 65].map((y, x) => ({x: x + 1, y})),
-        dashStyle: 'Dot',
-        marker: {enabled: false},
-    },
-};
-
-const hour = 60 * 60 * 1000;
-const timeSeriesStart = Date.UTC(2026, 7, 15, 8);
-
-export const timeSeriesMap: ChartSeriesMap = {
-    '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((y, index) => ({
-            x: timeSeriesStart + index * hour,
-            y,
-        })),
-        opacity: 0.35,
-    },
-};
-
-export const stackedAreaSeriesMap: ChartSeriesMap = {
-    Organic: {
-        type: 'area',
-        name: 'Organic',
-        stacking: 'normal',
-        stackId: 'traffic',
-        seriesId: 'Organic',
-        data: [180, 210, 195, 240, 265, 290, 310].map((y, x) => ({x: x + 1, y})),
-    },
-    Advertising: {
-        type: 'area',
-        name: 'Advertising',
-        stacking: 'normal',
-        stackId: 'traffic',
-        seriesId: 'Advertising',
-        data: [80, 95, 120, 110, 140, 155, 170].map((y, x) => ({x: x + 1, y})),
-    },
-    Referrals: {
-        type: 'area',
-        name: 'Referrals',
-        stacking: 'normal',
-        stackId: 'traffic',
-        seriesId: 'Referrals',
-        data: [45, 52, 48, 65, 72, 68, 84].map((y, x) => ({x: x + 1, y})),
-    },
-};
-
-export const groupedColumnsSeriesMap: ChartSeriesMap = {
-    Desktop: {
-        type: 'bar-x',
-        name: 'Desktop',
-        borderRadius: 3,
-        dataLabels: {enabled: true},
-        seriesId: 'Desktop',
-        data: [420, 510, 590, 640, 710, 760].map((y, x) => ({x: x + 1, y})),
-    },
-    Mobile: {
-        type: 'bar-x',
-        name: 'Mobile',
-        borderRadius: 3,
-        dataLabels: {enabled: true},
-        seriesId: 'Mobile',
-        data: [310, 390, 460, 520, 610, 690].map((y, x) => ({x: x + 1, y})),
-    },
-};
-
-export const horizontalBarsSeriesMap: ChartSeriesMap = {
-    'Completed tasks': {
-        type: 'bar-y',
-        name: 'Completed tasks',
-        borderRadius: 3,
-        dataLabels: {enabled: true},
-        seriesId: 'Completed-tasks',
-        data: [92, 78, 67, 54, 41].map((x, y) => ({x, y: y + 1})),
-    },
-};
-
-export const scatterSeriesMap: ChartSeriesMap = {
-    '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 const donutSeriesMap: ChartSeriesMap = {
-    '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 const mixedSeriesMap: ChartSeriesMap = {
-    Orders: {
-        type: 'bar-x',
-        name: 'Orders',
-        borderRadius: 3,
-        data: [34, 46, 41, 55, 62, 68, 74].map((y, x) => ({x: x + 1, y})),
-        seriesId: 'Orders',
-    },
-    Plan: {
-        type: 'line',
-        name: 'Plan',
-        dashStyle: 'Dash',
-        lineWidth: 2,
-        marker: {enabled: true},
-        data: [40, 44, 48, 52, 60, 66, 72].map((y, x) => ({x: x + 1, y})),
-        seriesId: 'Plan',
-    },
-};
-
-export const logarithmicSeriesMap: ChartSeriesMap = {
-    '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 const emptySeriesMap: ChartSeriesMap = {};

package/src/modules/ChartEditor/types.ts

@@ -1,18 +0,0 @@
-import type {ChartData as BaseChartData, ChartSeries as BaseChartSeries} from '@gravity-ui/charts';
-import type {ChartEditorFormProps} from '../../components/ChartEditorForm';
-
-export type ChartSeries = BaseChartSeries & {seriesId: string};
-export type ChartData = Omit<BaseChartData, 'series'> & {series: {data: ChartSeries[]}};
-
-export type ChartEditorProps = Pick<ChartEditorFormProps, 'axisVariants'> & {
-    className?: string;
-    emptyDataLabel?: string;
-    chartSeriesMap?: {
-        [chartId in string]: ChartSeries;
-    };
-    formProps?: Pick<ChartEditorFormProps, 'disabled' | 'className' | 'labels'>;
-    formValues?: ChartEditorFormProps['formValues'];
-    onChange?: (formValues: ChartEditorFormProps['formValues']) => void;
-    onSubmit?: (chartData: ChartData) => void;
-    onCancel?: () => void;
-};

package/src/modules/ClustersList/ClustersList.scss

@@ -1,11 +0,0 @@
-.qp-cluster-row {
-  width: 100%;
-  padding: 0 var(--g-spacing-2);
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &__title {
-    flex-grow: 1;
-    min-width: 0;
-  }
-}

package/src/modules/ClustersList/ClustersList.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import cn from 'bem-cn-lite';
-import {NavigationCluster, RenderNavigationCluster} from '../../types/navigation';
-import {ClusterRow, LazyList} from '../../components';
-import {NAVIGATION_ROW_HEIGHT} from '../../constants/row';
-import './ClustersList.scss';
-
-const block = cn('qp-clusters-list');
-
-export type ClustersListProps<T extends NavigationCluster = NavigationCluster> = {
-    items: T[];
-    loading?: boolean;
-    error?: React.ReactNode;
-    hasMore?: boolean;
-    onLoadMore?: () => void;
-    emptyContent?: React.ReactNode;
-    renderRowItem?: RenderNavigationCluster<T>;
-    onItemClick?: (cluster: T) => void;
-    className?: string;
-};
-
-export const ClustersList = <T extends NavigationCluster = NavigationCluster>({
-    items,
-    loading,
-    error,
-    hasMore,
-    onLoadMore,
-    emptyContent,
-    renderRowItem,
-    onItemClick,
-    className,
-}: ClustersListProps<T>) => {
-    return (
-        <LazyList<T>
-            className={block(null, className)}
-            items={items}
-            itemHeight={() => NAVIGATION_ROW_HEIGHT}
-            renderItem={(cluster, isActive, index) =>
-                renderRowItem?.({cluster, index, isActive}) ?? <ClusterRow cluster={cluster} />
-            }
-            hasMore={hasMore}
-            onLoadMore={onLoadMore}
-            loading={loading}
-            error={error}
-            emptyContent={emptyContent}
-            onItemClick={onItemClick}
-        />
-    );
-};

package/src/modules/ClustersList/index.ts

@@ -1,2 +0,0 @@
-export {ClustersList} from './ClustersList';
-export type {ClustersListProps} from './ClustersList';

package/src/modules/HistoryComparisonActions/HistoryComparisonActions.scss

@@ -1,4 +0,0 @@
-.qp-history-comparison-actions {
-  padding: 12px 20px;
-  background: var(--g-color-base-background);
-}

package/src/modules/HistoryComparisonActions/HistoryComparisonActions.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import {Button, Flex, Icon} from '@gravity-ui/uikit';
-import ArrowRightArrowLeftIcon from '@gravity-ui/icons/svgs/arrow-right-arrow-left.svg';
-import ArrowRotateRightIcon from '@gravity-ui/icons/svgs/arrow-rotate-right.svg';
-import {QueryListComparisonConfig, QueryListRow} from '../../types/queryList';
-import cn from 'bem-cn-lite';
-import './HistoryComparisonActions.scss';
-
-export type HistoryComparisonActionsProps<T extends QueryListRow = QueryListRow> = {
-    comparison: QueryListComparisonConfig<T>;
-    className?: string;
-};
-
-const block = cn('qp-history-comparison-actions');
-
-export const HistoryComparisonActions = <T extends QueryListRow>({
-    comparison: {enabled, comparedRowIds, onCompare, onCancel},
-    className,
-}: HistoryComparisonActionsProps<T>) => {
-    if (!enabled) return null;
-
-    return (
-        <Flex
-            gap={3}
-            alignItems="center"
-            justifyContent="center"
-            className={block(null, className)}
-        >
-            <Button onClick={onCancel} width="max">
-                <Icon data={ArrowRotateRightIcon} size={16} />
-            </Button>
-            <Button
-                view="action"
-                onClick={onCompare}
-                disabled={comparedRowIds.length < 2}
-                width="max"
-            >
-                <Icon data={ArrowRightArrowLeftIcon} size={16} />
-            </Button>
-        </Flex>
-    );
-};

package/src/modules/HistoryComparisonActions/index.ts

@@ -1,2 +0,0 @@
-export {HistoryComparisonActions} from './HistoryComparisonActions';
-export type {HistoryComparisonActionsProps} from './HistoryComparisonActions';