@gravity-ui/querieskit 1.0.4 → 1.1.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/modules/HistoryHeader/HistoryHeader.tsx

@@ -1,7 +1,6 @@
-import React, {FC} from 'react';
-import {Flex} from '@gravity-ui/uikit';
-import {HistorySearch} from './HistorySearch';
-import {HistoryFilter} from '../../components/HistoryFilter';
+import React, {FC, useEffect, useState} from 'react';
+import {FullSearchToggleButton} from './internal/FullSearchToggleButton';
+import {HistoryFilter, SearchWithButtons} from '../../components';
 import {QueryHistoryFilterConfig} from '../../types/history';
 
 type Props = {
@@ -10,18 +9,50 @@ type Props = {
     hasClear?: boolean;
     filter?: QueryHistoryFilterConfig;
     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/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;
+  }
+}

package/src/modules/NavigationDetail/NavigationDetail.tsx

@@ -0,0 +1,121 @@
+import React, {useMemo, useState} from 'react';
+import cn from 'bem-cn-lite';
+import {Flex} from '@gravity-ui/uikit';
+import {NavigationHeader} from '../NavigationHeader';
+import {SearchWithButtons} from '../../components';
+import {
+    NavigationDetailConfig,
+    NavigationHeaderAction,
+    NavigationLocation,
+} from '../../types/navigation';
+import type {LoadPathSuggestions} from '../../types/pathEditor';
+import {NavigationDetailTabs} from './internal/NavigationDetailTabs';
+import {getInitialTab} from './helpers/getInitialTab';
+import {getVisibleTabs} from './helpers/getVisibleTabs';
+import './NavigationDetail.scss';
+
+const block = cn('qp-navigation-detail');
+
+export type NavigationDetailProps = {
+    config: NavigationDetailConfig;
+    location: NavigationLocation;
+    onUpdate: (location: NavigationLocation) => void;
+    onLoadSuggestions?: LoadPathSuggestions;
+    actions?: NavigationHeaderAction[];
+    activeTab?: string;
+    onTabUpdate?: (tab: string) => void;
+    search?: string;
+    onSearchUpdate?: (value: string) => void;
+    className?: string;
+};
+
+export const NavigationDetail: React.FC<NavigationDetailProps> = ({
+    config,
+    location,
+    onUpdate,
+    onLoadSuggestions,
+    actions,
+    activeTab: activeTabProp,
+    onTabUpdate,
+    search: searchProp,
+    onSearchUpdate,
+    className,
+}) => {
+    const isTabControlled = activeTabProp !== undefined;
+    const isSearchControlled = searchProp !== undefined;
+
+    const visibleTabs = useMemo(() => getVisibleTabs(config.tabs), [config.tabs]);
+
+    const [activeTabState, setActiveTabState] = useState(() =>
+        getInitialTab(visibleTabs, config.defaultTab),
+    );
+    const [searchState, setSearchState] = useState('');
+
+    const activeTab = isTabControlled ? activeTabProp : activeTabState;
+    const search = isSearchControlled ? searchProp : searchState;
+
+    const handleTabUpdate = (tab: string) => {
+        if (!isTabControlled) {
+            setActiveTabState(tab);
+        }
+        onTabUpdate?.(tab);
+    };
+
+    const handleSearchUpdate = (value: string) => {
+        if (!isSearchControlled) {
+            setSearchState(value);
+        }
+        onSearchUpdate?.(value);
+    };
+
+    const mergedActions = useMemo(() => {
+        if (!actions && !config.actions) {
+            return undefined;
+        }
+        return [...(actions ?? []), ...(config.actions ?? [])];
+    }, [actions, config.actions]);
+
+    const activeTabConfig = visibleTabs.find((tab) => tab.id === activeTab);
+    const activeContent = activeTabConfig
+        ? (activeTabConfig.renderContent?.({
+              search,
+              onSearchUpdate: handleSearchUpdate,
+              searchPlaceholder: config.searchPlaceholder,
+          }) ??
+          activeTabConfig.content ??
+          null)
+        : null;
+
+    const hasTabs = visibleTabs.length > 0;
+
+    return (
+        <Flex direction="column" gap={2} className={block(null, className)}>
+            <NavigationHeader
+                location={location}
+                actions={mergedActions}
+                onUpdate={onUpdate}
+                onLoadSuggestions={onLoadSuggestions}
+            />
+            {hasTabs ? (
+                <>
+                    <NavigationDetailTabs
+                        tabs={visibleTabs}
+                        activeTab={activeTab}
+                        onUpdate={handleTabUpdate}
+                        className={block('tabs')}
+                    />
+                    {config.hasSearch && (
+                        <SearchWithButtons
+                            placeholder={config.searchPlaceholder}
+                            value={search}
+                            onUpdate={handleSearchUpdate}
+                        />
+                    )}
+                    <div className={block('content')}>{activeContent}</div>
+                </>
+            ) : (
+                config.emptyContent
+            )}
+        </Flex>
+    );
+};

package/src/modules/NavigationDetail/helpers/getInitialTab.ts

@@ -0,0 +1,9 @@
+import type {NavigationDetailTab} from '../../../types/navigation';
+
+export function getInitialTab(visibleTabs: NavigationDetailTab[], defaultTab?: string): string {
+    const defaultTabConfig = defaultTab
+        ? visibleTabs.find((tab) => tab.id === defaultTab)
+        : undefined;
+    const firstEnabled = visibleTabs.find((tab) => !tab.disabled);
+    return (defaultTabConfig ?? firstEnabled ?? visibleTabs[0])?.id ?? '';
+}

package/src/modules/NavigationDetail/helpers/getVisibleTabs.ts

@@ -0,0 +1,5 @@
+import type {NavigationDetailTab} from '../../../types/navigation';
+
+export function getVisibleTabs(tabs: NavigationDetailTab[]): NavigationDetailTab[] {
+    return tabs.filter((tab) => !tab.hidden);
+}

package/src/modules/NavigationDetail/index.ts

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

package/src/modules/NavigationDetail/internal/NavigationDetailTabs.tsx

@@ -0,0 +1,32 @@
+import React, {FC} from 'react';
+import {SegmentedRadioGroup} from '@gravity-ui/uikit';
+import {NavigationDetailTab} from '../../../types/navigation';
+
+export type NavigationDetailTabsProps = {
+    tabs: NavigationDetailTab[];
+    activeTab: string;
+    onUpdate: (tab: string) => void;
+    className?: string;
+};
+
+export const NavigationDetailTabs: FC<NavigationDetailTabsProps> = ({
+    tabs,
+    activeTab,
+    onUpdate,
+    className,
+}) => {
+    return (
+        <SegmentedRadioGroup
+            value={activeTab}
+            onUpdate={onUpdate}
+            width="max"
+            className={className}
+        >
+            {tabs.map((tab) => (
+                <SegmentedRadioGroup.Option key={tab.id} value={tab.id} disabled={tab.disabled}>
+                    {tab.title}
+                </SegmentedRadioGroup.Option>
+            ))}
+        </SegmentedRadioGroup>
+    );
+};