@gravity-ui/querieskit 1.0.4 → 1.2.0

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

@@ -0,0 +1,222 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,49 @@
+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

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

package/src/{widgets/QueriesHistory/ComparisonActions.scss → modules/HistoryComparisonActions/HistoryComparisonActions.scss}

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

package/src/{widgets/QueriesHistory/ComparisonActions.tsx → modules/HistoryComparisonActions/HistoryComparisonActions.tsx}

@@ -1,22 +1,22 @@
 import React from 'react';
 import {Button, Flex, Icon} from '@gravity-ui/uikit';
-import {QueryHistoryComparisonConfig, QueryHistoryRow} from '../../types/history';
-import ArrowRotateRightIcon from '@gravity-ui/icons/svgs/arrow-rotate-right.svg';
 import ArrowRightArrowLeftIcon from '@gravity-ui/icons/svgs/arrow-right-arrow-left.svg';
-import './ComparisonActions.scss';
+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';
 
-type Props<T extends QueryHistoryRow> = {
-    comparison: QueryHistoryComparisonConfig<T>;
+export type HistoryComparisonActionsProps<T extends QueryListRow = QueryListRow> = {
+    comparison: QueryListComparisonConfig<T>;
     className?: string;
 };
 
-const block = cn('qp-query-history-comparison-action');
+const block = cn('qp-history-comparison-actions');
 
-export const ComparisonActions = <T extends QueryHistoryRow>({
+export const HistoryComparisonActions = <T extends QueryListRow>({
     comparison: {enabled, comparedRowIds, onCompare, onCancel},
     className,
-}: Props<T>) => {
+}: HistoryComparisonActionsProps<T>) => {
     if (!enabled) return null;
 
     return (

package/src/modules/HistoryComparisonActions/index.ts

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

package/src/modules/HistoryHeader/HistoryHeader.tsx

@@ -1,27 +1,58 @@
-import React, {FC} from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import {HistorySearch} from './HistorySearch';
-import {HistoryFilter} from '../../components/HistoryFilter';
-import {QueryHistoryFilterConfig} from '../../types/history';
+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?: QueryHistoryFilterConfig;
+    filter?: QueryListFilterConfig;
     onUpdate: (data: {value: string; fullSearch: boolean}) => void;
+    className?: string;
 };
 
-export const HistoryHeader: FC<Props> = ({search, fullSearch, hasClear, filter, onUpdate}) => {
+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 (
-        <Flex gap={1}>
-            <HistorySearch
-                value={search}
-                fullSearch={fullSearch}
-                hasClear={hasClear}
-                onUpdate={onUpdate}
-            />
-            {filter && <HistoryFilter {...filter} />}
-        </Flex>
+        <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/internal/FullSearchToggleButton.tsx

@@ -0,0 +1,16 @@
+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,3 +1,7 @@
 .qp-history-layout {
   position: relative;
+
+  &__header {
+    padding: 0 12px;
+  }
 }

package/src/modules/HistoryLayout/HistoryLayout.tsx

@@ -26,14 +26,16 @@ export const HistoryLayout: FC<HistoryLayoutProps> = ({
 }) => {
     return (
         <Flex direction="column" gap={1} className={block(null, className)}>
-            {(logo || actions) && (
-                <Flex alignItems="center" justifyContent={logo ? 'space-between' : 'flex-end'}>
-                    {logo}
-                    {actions}
-                </Flex>
-            )}
-            <Text variant="subheader-1">{title}</Text>
-            {header}
+            <Flex direction="column" gap={1} className={block('header')}>
+                {(logo || actions) && (
+                    <Flex alignItems="center" justifyContent={logo ? 'space-between' : 'flex-end'}>
+                        {logo}
+                        {actions}
+                    </Flex>
+                )}
+                <Text variant="subheader-1">{title}</Text>
+                {header}
+            </Flex>
             {children}
             {footer}
         </Flex>

package/src/modules/HistoryRow/HistoryRow.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 import {HistoryRow} from './HistoryRow';
-import {QueryHistoryRow, QueryHistoryRowAction} from '../../types/history';
+import {QueryListRowAction} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 
 const now = Date.now();
 const min = 60 * 1000;
@@ -19,7 +20,7 @@ const makeRow = (overrides: Partial<QueryHistoryRow>): QueryHistoryRow => ({
     ...overrides,
 });
 
-const defaultActions: Array<QueryHistoryRowAction<QueryHistoryRow>> = [
+const defaultActions: Array<QueryListRowAction<QueryHistoryRow>> = [
     {text: 'Run again', onClick: (row) => alert(`Run: ${row.title}`)},
     {text: 'Copy', onClick: (row) => alert(`Copy: ${row.title}`)},
     {text: 'Delete', onClick: (row) => alert(`Delete: ${row.title}`)},

package/src/modules/HistoryRow/HistoryRow.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
-import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 import {Flex, Text} from '@gravity-ui/uikit';
 import './HistoryRow.scss';
 import cn from 'bem-cn-lite';
-import {HistoryPrivateIcon, QueryDuration, QueryStatusIcon, RowLink} from '../../components';
+import {
+    EditableRowTitle,
+    HistoryPrivateIcon,
+    QueryDuration,
+    QueryStatusIcon,
+    RowActionsMenu,
+    RowLink,
+} from '../../components';
 import {formatTime} from '../../helpers/time';
 import {isFieldVisible} from '../../helpers/isFieldVisible';
-import {HistoryRowTitle} from './HistoryRowTitle';
-import {HistoryRowMenu} from './HistoryRowMenu';
 
 export type Props<T extends QueryHistoryRow> = {
     item: T;
-} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
 
 const block = cn('qp-history-row');
 
@@ -38,8 +44,8 @@ export const HistoryRow = <T extends QueryHistoryRow>({
             <QueryStatusIcon status={status} />
             <Flex direction="column" gap={1} className={block('right-column')}>
                 <Flex justifyContent="space-between" className={block('header')}>
-                    <HistoryRowTitle item={item} editing={editing} />
-                    {showMenu && <HistoryRowMenu item={item} actions={actions} />}
+                    <EditableRowTitle item={item} editing={editing} />
+                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
                 </Flex>
                 <div className={block('data')}>
                     {isFieldVisible(visibleFields, 'duration') && startTime && (

package/src/modules/HistorySearchRow/HistorySearchRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Flex, Text} from '@gravity-ui/uikit';
-import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 import {
     HistoryPrivateIcon,
     QueryDuration,
@@ -17,7 +18,7 @@ const block = cn('qp-history-search-row');
 
 export type Props<T extends QueryHistoryRow> = {
     item: T;
-} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
 
 export const HistorySearchRow = <T extends QueryHistoryRow>({
     item,

package/src/modules/NavigationDetail/NavigationDetail.scss

@@ -0,0 +1,13 @@
+.qp-navigation-detail {
+  min-width: 0;
+
+  &__tabs {
+    overflow-x: auto;
+  }
+
+  &__content {
+    min-width: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+}