@gravity-ui/querieskit 1.3.0 → 1.3.1

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';

package/src/modules/HistoryHeader/HistoryHeader.stories.tsx

@@ -1,47 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {HistoryHeader} from './HistoryHeader';
-
-const meta: Meta<typeof HistoryHeader> = {
-    title: 'Modules/HistoryHeader',
-    component: HistoryHeader,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-};
-
-export default meta;
-type Story = StoryObj<typeof HistoryHeader>;
-
-const DefaultStory = () => {
-    const [search, setSearch] = useState({value: '', fullSearch: false});
-
-    return (
-        <HistoryHeader
-            search={search.value}
-            fullSearch={search.fullSearch}
-            hasClear={true}
-            onUpdate={setSearch}
-        />
-    );
-};
-
-const FullSearchStory = () => {
-    const [search, setSearch] = useState({value: 'users', fullSearch: true});
-
-    return (
-        <HistoryHeader
-            search={search.value}
-            fullSearch={search.fullSearch}
-            hasClear={true}
-            onUpdate={setSearch}
-        />
-    );
-};
-
-/** Empty header with a search field */
-export const Default: Story = {render: () => <DefaultStory />};
-
-/** Full-text search is active (button is highlighted) */
-export const FullSearchActive: Story = {render: () => <FullSearchStory />};

package/src/modules/HistoryHeader/HistoryHeader.tsx

@@ -1,58 +0,0 @@
-import React, {FC, useEffect, useState} from 'react';
-import {FullSearchToggleButton} from './internal/FullSearchToggleButton';
-import {HistoryFilter, SearchWithButtons} from '../../components';
-import {QueryListFilterConfig} from '../../types/queryList';
-
-type Props = {
-    search?: string;
-    fullSearch?: boolean;
-    hasClear?: boolean;
-    filter?: QueryListFilterConfig;
-    onUpdate: (data: {value: string; fullSearch: boolean}) => void;
-    className?: string;
-};
-
-export const HistoryHeader: FC<Props> = ({
-    search,
-    fullSearch,
-    hasClear,
-    filter,
-    onUpdate,
-    className,
-}) => {
-    const [searchValue, setSearchValue] = useState(search || '');
-    const [isFullSearch, setFullSearch] = useState(fullSearch || false);
-
-    useEffect(() => {
-        setSearchValue(search || '');
-        setFullSearch(fullSearch || false);
-    }, [search, fullSearch]);
-
-    const handleOnUpdate = (newValue: string) => {
-        setSearchValue(newValue);
-        onUpdate({value: newValue, fullSearch: isFullSearch});
-    };
-
-    const handleModeChange = () => {
-        const newValue = !isFullSearch;
-        setFullSearch(newValue);
-        onUpdate({value: searchValue, fullSearch: newValue});
-    };
-
-    return (
-        <SearchWithButtons
-            className={className}
-            value={searchValue}
-            hasClear={hasClear}
-            onUpdate={handleOnUpdate}
-            innerButtons={[
-                <FullSearchToggleButton
-                    key="full-search"
-                    active={isFullSearch}
-                    onClick={handleModeChange}
-                />,
-            ]}
-            endButtons={filter ? [<HistoryFilter key="filter" {...filter} />] : undefined}
-        />
-    );
-};

package/src/modules/HistoryHeader/index.ts

@@ -1 +0,0 @@
-export {HistoryHeader} from './HistoryHeader';

package/src/modules/HistoryHeader/internal/FullSearchToggleButton.tsx

@@ -1,16 +0,0 @@
-import React, {FC} from 'react';
-import {Button, Icon} from '@gravity-ui/uikit';
-import ChevronsExpandHorizontalIcon from '@gravity-ui/icons/svgs/chevrons-expand-horizontal.svg';
-
-type Props = {
-    active?: boolean;
-    onClick: () => void;
-};
-
-export const FullSearchToggleButton: FC<Props> = ({active, onClick}) => {
-    return (
-        <Button size="xs" view={active ? 'action' : undefined} onClick={onClick}>
-            <Icon data={ChevronsExpandHorizontalIcon} size={12} />
-        </Button>
-    );
-};

package/src/modules/HistoryLayout/HistoryLayout.scss

@@ -1,7 +0,0 @@
-.qp-history-layout {
-  position: relative;
-
-  &__header {
-    padding: 0 12px;
-  }
-}