@gravity-ui/chartkit 3.1.2 → 3.2.0

package/build/plugins/d3/__stories__/LinearCategories.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const LinearAndCategories: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/LinearCategories.stories.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import random from 'lodash/random';
+import { withKnobs, select, radios, text } from '@storybook/addon-knobs';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { ChartKit } from '../../../components/ChartKit';
+import { D3Plugin } from '..';
+import penguins from './penguins.json';
+const shapeScatterSeriesData = (args) => {
+    const { data, groupBy, map } = args;
+    return data.reduce((acc, d) => {
+        const seriesName = d[groupBy];
+        if (!seriesName) {
+            return acc;
+        }
+        if (!acc[seriesName]) {
+            acc[seriesName] = [];
+        }
+        acc[seriesName].push(Object.assign({ x: d[map.x], y: d[map.y], radius: random(3, 6) }, (map.category && { category: d[map.category] })));
+        return acc;
+    }, {});
+};
+const shapeScatterSeries = (data) => {
+    return Object.keys(data).reduce((acc, name) => {
+        acc.push({
+            type: 'scatter',
+            data: data[name],
+            name,
+        });
+        return acc;
+    }, []);
+};
+const shapeScatterChartData = (series, categoriesType, categories) => {
+    let xAxis = {
+        labels: {
+            enabled: false,
+        },
+        title: {
+            text: text('X axis title', ''),
+        },
+    };
+    let yAxis = {
+        title: {
+            text: text('Y axis title', ''),
+        },
+    };
+    if (categories && categoriesType === 'x') {
+        xAxis = Object.assign(Object.assign({}, xAxis), { type: 'category', categories });
+    }
+    if (categories && categoriesType === 'y') {
+        yAxis = Object.assign(Object.assign({}, yAxis), { type: 'category', categories });
+    }
+    return {
+        series,
+        xAxis,
+        yAxis: [yAxis],
+        title: {
+            text: text('title', 'Chart title'),
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const x = select('x', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_length_mm');
+    const y = select('y', ['culmen_length_mm', 'culmen_depth_mm', 'flipper_length_mm', 'body_mass_g'], 'culmen_depth_mm');
+    const groupBy = select('groupBy', ['species', 'island', 'sex'], 'species');
+    const categoriesType = radios('categoriesType', { none: 'none', x: 'x', y: 'y' }, 'none');
+    const category = categoriesType === 'none'
+        ? undefined
+        : select('category', ['species', 'island', 'sex'], 'island');
+    let categories;
+    if (categoriesType !== 'none' && category) {
+        categories = penguins.reduce((acc, p) => {
+            const cerrentCategory = p[category];
+            if (typeof cerrentCategory === 'string' && !acc.includes(cerrentCategory)) {
+                acc.push(cerrentCategory);
+            }
+            return acc;
+        }, []);
+    }
+    const shapedScatterSeriesData = shapeScatterSeriesData({
+        data: penguins,
+        groupBy,
+        map: { x, y, category },
+    });
+    const shapedScatterSeries = shapeScatterSeries(shapedScatterSeriesData);
+    const data = shapeScatterChartData(shapedScatterSeries, categoriesType, categories);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '80vh', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const LinearAndCategories = Template.bind({});
+const meta = {
+    title: 'Plugins/D3',
+    decorators: [withKnobs],
+};
+export default meta;

package/build/plugins/d3/__stories__/Timestamp.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+export declare const Timestamp: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const meta: Meta;
+export default meta;

package/build/plugins/d3/__stories__/Timestamp.stories.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import random from 'lodash/random';
+import { dateTime } from '@gravity-ui/date-utils';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { ChartKit } from '../../../components/ChartKit';
+import { D3Plugin } from '..';
+const rowData = [
+    {
+        x: 1690686000000,
+        y: 86.71905594602345,
+        custom: 'green',
+    },
+    {
+        x: 1690426800000,
+        y: 86.73089353359981,
+        custom: 'yellow',
+    },
+    {
+        x: 1690254000000,
+        y: 86.53675705168267,
+        custom: 'red',
+    },
+    {
+        x: 1690772400000,
+        y: 86.47880981408552,
+        custom: 'blue',
+    },
+    {
+        x: 1690340400000,
+        y: 86.4108836764148,
+        custom: 'gray',
+    },
+    {
+        x: 1690599600000,
+        y: 86.73440096266042,
+        custom: 'pink',
+    },
+    {
+        x: 1690513200000,
+        y: 86.64935929597681,
+        custom: 'purple',
+    },
+];
+const shapeData = (data) => {
+    const scatterData = data.map((d) => ({
+        x: d.x,
+        y: d.y,
+        radius: random(3, 6),
+        custom: d.custom,
+    }));
+    const scatterSeries = {
+        type: 'scatter',
+        data: scatterData,
+        name: 'some-name',
+    };
+    return {
+        series: [scatterSeries],
+        xAxis: {
+            type: 'datetime',
+            timestamps: data.map((d) => d.x),
+        },
+        tooltip: {
+            renderer: ({ hovered }) => {
+                const d = hovered.data;
+                return React.createElement("div", { style: { color: d.custom } }, dateTime({ input: d.x }).format('LL'));
+            },
+        },
+        title: {
+            text: 'Chart title',
+        },
+    };
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    const data = shapeData(rowData);
+    if (!shown) {
+        settings.set({ plugins: [D3Plugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: '300px', width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "d3", data: data })));
+};
+export const Timestamp = Template.bind({});
+const meta = {
+    title: 'Plugins/D3',
+};
+export default meta;