@gravity-ui/querieskit 1.0.3 → 1.1.0

package/src/components/index.ts

@@ -1,17 +1,56 @@
+export {DataTable} from './DataTable';
+export type {DataTableProps, Column} from './DataTable';
 export {QueryStatusIcon} from './QueryStatusIcon';
 export {QueryDuration} from './QueryDuration';
+export {LazyList} from './LazyList';
+export type {LazyListProps} from './LazyList';
+export {ListSpinner} from './ListSpinner';
+export type {ListSpinnerProps} from './ListSpinner';
+export {Breadcrumbs} from './Breadcrumbs';
+export type {BreadcrumbsProps} from './Breadcrumbs';
+export {PathEditor} from './PathEditor';
+export type {PathEditorProps} from './PathEditor';
 export {HistoryFilter} from './HistoryFilter';
 export {HistoryPrivateIcon} from './HistoryPrivateIcon';
 export {FieldsSelector} from './FieldsSelector';
+export type {FieldsSelectorOption, FieldsSelectorProps} from './FieldsSelector';
+export {FieldsSearchToolbar} from './FieldsSearchToolbar';
+export type {FieldsSearchToolbarProps} from './FieldsSearchToolbar';
 export {HistoryGroupHeader} from './HistoryGroupHeader';
-export {HistoryListEmpty} from './HistoryListEmpty';
-export type {HistoryListEmptyProps} from './HistoryListEmpty';
+export {EmptyContent} from './EmptyContent';
+export type {EmptyContentProps, EmptyContentVariant} from './EmptyContent';
+export {ClusterRow} from './ClusterRow';
+export type {ClusterRowProps} from './ClusterRow';
+export {NavigationItemRow} from './NavigationItemRow';
+export type {NavigationItemRowProps} from './NavigationItemRow';
+export {NavigationActionButtons} from './NavigationActionButtons';
+export type {NavigationActionButtonsProps} from './NavigationActionButtons';
+export {SkeletonRows} from './SkeletonRows';
+export type {SkeletonRowsProps} from './SkeletonRows';
 export {RowLink} from './RowLink';
 export type {RowLinkProps} from './RowLink';
 export {SearchRowLayout} from './SearchRowLayout';
 export type {SearchRowLayoutProps} from './SearchRowLayout';
+export {SearchWithButtons} from './SearchWithButtons';
+export type {SearchWithButtonsProps} from './SearchWithButtons';
 export {MonacoEditor} from './MonacoEditor';
 export type {MonacoEditorConfig} from './MonacoEditor';
+export {AddChartButton, DEFAULT_ADD_CHART_BUTTON_OPTIONS} from './AddChartButton';
+export type {
+    AddChartButtonOption,
+    AddChartButtonProps,
+    DefaultAddChartButtonValue,
+} from './AddChartButton';
+export {ChartEditorForm} from './ChartEditorForm';
+export type {
+    ChartEditorFormProps,
+    ChartEditorFormValues,
+    ChartEditorLabels,
+    ChartEditorOption,
+} from './ChartEditorForm';
+export * from './Dashboard';
+export {Chart} from './Chart';
+export type {ChartAction, ChartProps} from './Chart';
 export {
     MonacoLanguage,
     YT_DARK_HC_MONACO_THEME,

package/src/constants/row.ts

@@ -1 +1,2 @@
 export const SEARCH_ROW_HEIGHT = 110;
+export const NAVIGATION_ROW_HEIGHT = 32;

package/src/helpers/buildColumnsFromKeys.ts

@@ -0,0 +1,17 @@
+import type {ReactNode} from 'react';
+import type {Column} from '../components';
+import {isEmptyValue} from './isEmptyValue';
+
+export function buildColumnsFromKeys<TRow extends Record<string, unknown>>(
+    columns: string[],
+    emptyText: string,
+): Array<Column<TRow>> {
+    return columns.map((column) => ({
+        name: column,
+        header: column,
+        render: ({row}) => {
+            const value = row[column];
+            return isEmptyValue(value) ? emptyText : (value as ReactNode);
+        },
+    }));
+}

package/src/helpers/getDefaultNavigationIcon.ts

@@ -0,0 +1,33 @@
+import type {IconData} from '@gravity-ui/uikit';
+import BanIcon from '@gravity-ui/icons/svgs/ban.svg';
+import EyeSlashIcon from '@gravity-ui/icons/svgs/eye-slash.svg';
+import FileTextIcon from '@gravity-ui/icons/svgs/file-text.svg';
+import FolderIcon from '@gravity-ui/icons/svgs/folder.svg';
+import LayoutHeaderCellsLargeIcon from '@gravity-ui/icons/svgs/layout-header-cells-large.svg';
+import LinkIcon from '@gravity-ui/icons/svgs/link.svg';
+import LinkSlashIcon from '@gravity-ui/icons/svgs/link-slash.svg';
+import type {NavigationItemKind} from '../types/navigation';
+
+export function getDefaultNavigationIcon(
+    kind: NavigationItemKind = 'unknown',
+    targetPathBroken?: boolean,
+): IconData {
+    if (kind === 'link' && targetPathBroken) {
+        return LinkSlashIcon;
+    }
+
+    switch (kind) {
+        case 'folder':
+            return FolderIcon;
+        case 'file':
+            return FileTextIcon;
+        case 'table':
+            return LayoutHeaderCellsLargeIcon;
+        case 'link':
+            return LinkIcon;
+        case 'unknown':
+            return EyeSlashIcon;
+        default:
+            return BanIcon;
+    }
+}

package/src/helpers/getParentPath.ts

@@ -0,0 +1,10 @@
+export function getParentPath(path: string): string | undefined {
+    const trimmed = path.replace(/\/+$/, '');
+    const lastSlashIndex = trimmed.lastIndexOf('/');
+
+    if (lastSlashIndex <= 0) {
+        return trimmed.startsWith('/') ? '/' : undefined;
+    }
+
+    return trimmed.slice(0, lastSlashIndex);
+}

package/src/helpers/isEmptyValue.ts

@@ -0,0 +1,2 @@
+export const isEmptyValue = (value: unknown): boolean =>
+    value === undefined || value === null || value === '';

package/src/helpers/useLoadMoreSentinel.ts

@@ -0,0 +1,31 @@
+import {useCallback, useEffect, useRef} from 'react';
+
+export function useLoadMoreSentinel(hasMore: boolean | undefined, onLoadMore?: () => void) {
+    const observerRef = useRef<IntersectionObserver | null>(null);
+    const hasMoreRef = useRef(hasMore);
+    hasMoreRef.current = hasMore;
+    const onLoadMoreRef = useRef(onLoadMore);
+    onLoadMoreRef.current = onLoadMore;
+
+    useEffect(() => {
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, []);
+
+    return useCallback((node: HTMLElement | null) => {
+        observerRef.current?.disconnect();
+
+        if (!node) {
+            return;
+        }
+
+        observerRef.current = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting) && hasMoreRef.current) {
+                onLoadMoreRef.current?.();
+            }
+        });
+
+        observerRef.current.observe(node);
+    }, []);
+}

package/src/helpers/useVisibleColumns.ts

@@ -0,0 +1,26 @@
+import {useState} from 'react';
+
+export type UseVisibleColumnsOptions = {
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    defaultValue?: string[];
+};
+
+export function useVisibleColumns(
+    allColumns: string[],
+    {value, onChange, defaultValue}: UseVisibleColumnsOptions,
+): [string[], (value: string[]) => void] {
+    const isControlled = value !== undefined;
+    const [state, setState] = useState<string[]>(() => defaultValue ?? allColumns);
+
+    const activeColumns = isControlled ? value : state;
+
+    const handleChange = (next: string[]) => {
+        if (!isControlled) {
+            setState(next);
+        }
+        onChange?.(next);
+    };
+
+    return [activeColumns, handleChange];
+}

package/src/index.ts

@@ -3,3 +3,5 @@ export * from './modules';
 export * from './widgets';
 export * from './types/history';
 export * from './types/tutorial';
+export * from './types/navigation';
+export * from './types/pathEditor';

package/src/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/src/modules/ChartEditor/ChartEditor.tsx

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

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

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

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

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

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

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

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

package/src/modules/ChartEditor/index.ts

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

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

@@ -0,0 +1,186 @@
+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',
+    },
+};