@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/widgets/DashboardCharts/DashboardCharts.tsx

@@ -1,214 +0,0 @@
-import React, {useCallback, useMemo, useState} from 'react';
-import {ChartSeries} from '@gravity-ui/charts';
-import {Flex, Modal} from '@gravity-ui/uikit';
-import {ChartEditor, ChartEditorProps} from '../../modules';
-import {AddChartButton, Chart, Dashboard} from '../../components';
-import {ChartData} from '../../modules/ChartEditor/types';
-import type {DashboardChartsProps, DashboardItem} from './types';
-import {EmptyDashboardPlaceholder} from './internal/EmptyDashboardPlaceholder';
-import {CHART_TYPE_ICONS} from './helpers/chartTypeIcons';
-import {ConfigLayout} from '@gravity-ui/dashkit';
-import i18n from './i18n';
-import cn from 'bem-cn-lite';
-import './DashboardCharts.scss';
-
-const block = cn('qp-dashboard-charts');
-
-export const DashboardCharts = ({
-    chartItems: customerChartsItems,
-    defaultLayout,
-    dataSource,
-    emptyTitle,
-    emptyDescription,
-    chartEditorProps,
-    dashboardProps,
-    onItemsChange,
-    onLayoutChange,
-    className,
-    gap = 1,
-}: DashboardChartsProps) => {
-    const [innerChartItems, setInnerChartItems] = useState<DashboardItem[]>(
-        customerChartsItems ?? [],
-    );
-
-    const chartItems = customerChartsItems ?? innerChartItems;
-
-    const [draftChart, setDraftChart] = useState<{
-        id?: string;
-        chartSeries: ChartEditorProps['chartSeriesMap'];
-        formValues: ChartEditorProps['formValues'];
-    } | null>(null);
-
-    const allowedCharts = useMemo(
-        () => Object.keys(dataSource) as ChartSeries['type'][],
-        [dataSource],
-    );
-
-    const handleChartSelect = (chartType: ChartSeries['type']) => {
-        const chartSeries = dataSource[chartType];
-
-        if (chartSeries) {
-            const dataIds = Object.keys(chartSeries);
-
-            setDraftChart({
-                chartSeries,
-                formValues: {
-                    dataIds: dataIds.length ? [dataIds[0]] : [],
-                    axisType: 'linear',
-                },
-            });
-        }
-    };
-
-    const handleCancelDraft = () => {
-        setDraftChart(null);
-    };
-
-    const handleSubmitChart = (chart: ChartData) => {
-        if (!draftChart) return;
-
-        const newChart = {
-            id: draftChart.id ?? crypto.randomUUID().replace(/-/g, ''),
-            chartData: chart,
-        };
-
-        const actualChartItems = draftChart.id
-            ? chartItems.map((ch) => (ch.id === newChart.id ? newChart : ch))
-            : [...chartItems, newChart];
-
-        setDraftChart(null);
-        setInnerChartItems(actualChartItems);
-        onItemsChange?.(actualChartItems);
-    };
-
-    const handleEditChart = useCallback(
-        (id: string, chart: DashboardItem['chartData']) => {
-            const chartType = chart.series.data[0].type;
-            const chartSeries = dataSource[chartType];
-
-            if (!chartSeries) return;
-
-            const selectedDataIds = chart.series.data.map((s) => s.seriesId);
-
-            setDraftChart({
-                id,
-                chartSeries,
-                formValues: {
-                    dataIds: selectedDataIds,
-                    chartTitle: chart.title?.text,
-                    xTitle: chart.xAxis?.title?.text,
-                    yTitle: chart.yAxis?.[0].title?.text,
-                    showLegend: chart?.legend?.enabled,
-                    axisType: chart.xAxis?.type,
-                    axisCategories: chart.xAxis?.categories,
-                },
-            });
-        },
-        [dataSource],
-    );
-
-    const handleDeleteChart = useCallback(
-        (id: string) => {
-            const newChartItems = chartItems.filter((item) => item.id !== id);
-
-            setInnerChartItems(newChartItems);
-
-            onItemsChange?.(newChartItems);
-        },
-        [chartItems, onItemsChange],
-    );
-
-    const handleLayoutChange = (patchedLayout: ConfigLayout[]) => {
-        onLayoutChange?.(patchedLayout);
-    };
-
-    const dashboardItems = useMemo(
-        () =>
-            chartItems.map(({id, chartData}) => ({
-                id,
-                content: (
-                    <Chart
-                        key={id}
-                        data={chartData}
-                        controlsVisibility="hover"
-                        onPencilEdit={() => handleEditChart(id, chartData)}
-                        actions={[
-                            {
-                                text: i18n('action_delete-chart'),
-                                onClick: () => handleDeleteChart(id),
-                            },
-                        ]}
-                    />
-                ),
-            })),
-        [chartItems, handleEditChart, handleDeleteChart],
-    );
-
-    return (
-        <React.Fragment>
-            <Flex
-                as="section"
-                direction="column"
-                width="100%"
-                height="100%"
-                gap={gap}
-                className={block(null, className)}
-            >
-                <AddChartButton
-                    text={i18n('action_add-chart')}
-                    options={allowedCharts.map((chartType) => ({
-                        value: chartType,
-                        text: chartType,
-                        icon: CHART_TYPE_ICONS[chartType],
-                    }))}
-                    onSelect={handleChartSelect}
-                    disabled={allowedCharts.length === 0}
-                />
-
-                {chartItems.length > 0 ? (
-                    <Dashboard
-                        items={dashboardItems}
-                        defaultLayout={defaultLayout}
-                        onLayoutChange={handleLayoutChange}
-                        className={block('dashboard')}
-                        {...dashboardProps}
-                    />
-                ) : (
-                    <EmptyDashboardPlaceholder
-                        emptyTitle={emptyTitle}
-                        emptyDescription={emptyDescription}
-                    />
-                )}
-            </Flex>
-
-            <Modal
-                open={Boolean(draftChart)}
-                onOpenChange={(open) => {
-                    if (!open) {
-                        setDraftChart(null);
-                    }
-                }}
-                contentOverflow="auto"
-                contentClassName={block('modal')}
-            >
-                {draftChart && (
-                    <ChartEditor
-                        chartSeriesMap={draftChart.chartSeries}
-                        formValues={draftChart.formValues}
-                        onSubmit={handleSubmitChart}
-                        onCancel={handleCancelDraft}
-                        axisVariants={['linear', 'datetime', 'logarithmic']}
-                        formProps={{
-                            labels: {
-                                submitLabel: draftChart.id
-                                    ? i18n('action_save-chart')
-                                    : i18n('action_add-chart'),
-                            },
-                        }}
-                        {...chartEditorProps}
-                    />
-                )}
-            </Modal>
-        </React.Fragment>
-    );
-};

package/src/widgets/DashboardCharts/helpers/chartTypeIcons.ts

@@ -1,33 +0,0 @@
-import {
-    BranchesRight,
-    ChartAreaStacked,
-    ChartBar,
-    ChartColumn,
-    ChartLine,
-    ChartPie,
-    ChartTreemap,
-    Circles4Square,
-    Circles5Random,
-    CirclesConcentric,
-    Funnel,
-    ListTimeline,
-    SquareBars,
-} from '@gravity-ui/icons';
-import type {ChartSeries} from '@gravity-ui/charts';
-import type {IconData} from '@gravity-ui/uikit';
-
-export const CHART_TYPE_ICONS: Record<ChartSeries['type'], IconData> = {
-    area: ChartAreaStacked,
-    'bar-x': ChartColumn,
-    'bar-y': ChartBar,
-    funnel: Funnel,
-    heatmap: Circles4Square,
-    line: ChartLine,
-    pie: ChartPie,
-    radar: CirclesConcentric,
-    sankey: BranchesRight,
-    scatter: Circles5Random,
-    treemap: ChartTreemap,
-    waterfall: SquareBars,
-    'x-range': ListTimeline,
-};

package/src/widgets/DashboardCharts/i18n/dicts.ts

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

package/src/widgets/DashboardCharts/i18n/en.json

@@ -1,7 +0,0 @@
-{
-  "action_add-chart": "Add chart",
-  "action_save-chart": "Save",
-  "action_delete-chart": "Delete",
-  "context_no-charts": "No charts yet",
-  "context_add-first-chart": "Add a chart to start building your dashboard"
-}

package/src/widgets/DashboardCharts/i18n/index.ts

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

package/src/widgets/DashboardCharts/i18n/ru.json

@@ -1,7 +0,0 @@
-{
-  "action_add-chart": "Добавить график",
-  "action_save-chart": "Сохранить",
-  "action_delete-chart": "Удалить",
-  "context_no-charts": "Графиков пока нет",
-  "context_add-first-chart": "Добавьте график, чтобы начать собирать дашборд"
-}

package/src/widgets/DashboardCharts/index.ts

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

package/src/widgets/DashboardCharts/internal/EmptyDashboardPlaceholder.tsx

@@ -1,26 +0,0 @@
-import React, {ReactNode} from 'react';
-import {Flex, Text} from '@gravity-ui/uikit';
-import i18n from '../i18n';
-import cn from 'bem-cn-lite';
-
-type EmptyDashboardPlaceholderProps = {
-    emptyTitle?: ReactNode;
-    emptyDescription?: ReactNode;
-};
-
-const block = cn('qp-empty-dashboard-placeholder');
-
-export const EmptyDashboardPlaceholder = ({
-    emptyTitle,
-    emptyDescription,
-}: EmptyDashboardPlaceholderProps) => {
-    const resolvedEmptyTitle = emptyTitle ?? i18n('context_no-charts');
-    const resolvedEmptyDescription = emptyDescription ?? i18n('context_add-first-chart');
-
-    return (
-        <Flex direction="column" centerContent gap={1} className={block('empty')}>
-            <Text variant="subheader-2">{resolvedEmptyTitle}</Text>
-            <Text color="secondary">{resolvedEmptyDescription}</Text>
-        </Flex>
-    );
-};

package/src/widgets/DashboardCharts/story/DashboardCharts.stories.scss

@@ -1,6 +0,0 @@
-.qp-dashboard-charts-story {
-    box-sizing: border-box;
-    height: 720px;
-    padding: var(--g-spacing-4);
-    background: var(--g-color-base-background);
-}

package/src/widgets/DashboardCharts/story/DashboardCharts.stories.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {action} from 'storybook/actions';
-
-import {DashboardCharts} from '../DashboardCharts';
-import {
-    advancedChartItems,
-    advancedChartsDataSource,
-    advancedChartsLayout,
-    allChartTypesDataSource,
-    commonChartItems,
-    commonChartsDataSource,
-    commonChartsLayout,
-} from './mockData';
-
-import './DashboardCharts.stories.scss';
-
-const meta: Meta<typeof DashboardCharts> = {
-    title: 'Widgets/DashboardCharts',
-    component: DashboardCharts,
-    tags: ['autodocs'],
-    parameters: {layout: 'fullscreen'},
-    args: {
-        onItemsChange: action('onItemsChange'),
-        onLayoutChange: action('onLayoutChange'),
-    },
-    render: (args) => (
-        <div className="qp-dashboard-charts-story">
-            <DashboardCharts {...args} />
-        </div>
-    ),
-};
-
-export default meta;
-type Story = StoryObj<typeof DashboardCharts>;
-
-/**
- * Start with an empty dashboard and use the Add chart menu to create any chart type
- * supported by `@gravity-ui/charts`.
- */
-export const Default: Story = {
-    args: {
-        dataSource: allChartTypesDataSource,
-    },
-};
-
-/**
- * A practical monitoring dashboard with the most common cartesian and circular charts.
- * Every card can be dragged, resized and opened in the chart editor.
- */
-export const CommonCharts: Story = {
-    args: {
-        dataSource: commonChartsDataSource,
-        chartItems: commonChartItems,
-        defaultLayout: commonChartsLayout,
-        dashboardProps: {
-            grid: {cols: 6, rowHeight: 72, gap: 12, compactType: 'vertical'},
-            focusable: true,
-        },
-    },
-};
-
-/**
- * Less common visualizations for hierarchy, flow, changes, profiles, density,
- * conversion and execution intervals.
- */
-export const AdvancedCharts: Story = {
-    args: {
-        dataSource: advancedChartsDataSource,
-        chartItems: advancedChartItems,
-        defaultLayout: advancedChartsLayout,
-        dashboardProps: {
-            grid: {cols: 8, rowHeight: 72, gap: 12, compactType: 'vertical'},
-            focusable: true,
-        },
-    },
-};