@gravity-ui/chartkit 3.2.0 → 3.4.0

package/build/types/widget-data/index.d.ts

@@ -1,7 +1,7 @@
 import type { ChartKitWidgetAxis } from './axis';
 import type { ChartKitWidgetChart } from './chart';
 import type { ChartKitWidgetLegend } from './legend';
-import type { ChartKitWidgetSeries } from './series';
+import type { ChartKitWidgetSeries, ChartKitWidgetSeriesOptions } from './series';
 import type { ChartKitWidgetTitle } from './title';
 import type { ChartKitWidgetTooltip } from './tooltip';
 export * from './axis';
@@ -10,13 +10,17 @@ export * from './chart';
 export * from './legend';
 export * from './pie';
 export * from './scatter';
+export * from './bar-x';
 export * from './series';
 export * from './title';
 export * from './tooltip';
 export type ChartKitWidgetData<T = any> = {
     chart?: ChartKitWidgetChart;
     legend?: ChartKitWidgetLegend;
-    series: ChartKitWidgetSeries<T>[];
+    series: {
+        data: ChartKitWidgetSeries<T>[];
+        options?: ChartKitWidgetSeriesOptions;
+    };
     title?: ChartKitWidgetTitle;
     tooltip?: ChartKitWidgetTooltip<T>;
     xAxis?: ChartKitWidgetAxis;

package/build/types/widget-data/index.js

@@ -4,6 +4,7 @@ export * from './chart';
 export * from './legend';
 export * from './pie';
 export * from './scatter';
+export * from './bar-x';
 export * from './series';
 export * from './title';
 export * from './tooltip';

package/build/types/widget-data/series.d.ts

@@ -1,4 +1,18 @@
 import type { PieSeries, PieSeriesData } from './pie';
 import type { ScatterSeries, ScatterSeriesData } from './scatter';
-export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T>;
-export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T>;
+import type { BarXSeries, BarXSeriesData } from './bar-x';
+import React from 'react';
+export type ChartKitWidgetSeries<T = any> = ScatterSeries<T> | PieSeries<T> | BarXSeries<T>;
+export type ChartKitWidgetSeriesData<T = any> = ScatterSeriesData<T> | PieSeriesData<T> | BarXSeriesData<T>;
+export type DataLabelRendererData<T = any> = {
+    data: ChartKitWidgetSeriesData<T>;
+};
+export type ChartKitWidgetSeriesOptions = {
+    /** Individual data label for each point. */
+    dataLabels?: {
+        /** Enable or disable the data labels */
+        enabled?: boolean;
+        /** Callback function to render the data label */
+        renderer?: (args: DataLabelRendererData) => React.SVGTextElementAttributes<SVGTextElement>;
+    };
+};

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
   "files": [
-    "build"
+    "build",
+    "!**/__tests__/**",
+    "!**/__stories__/**"
   ],
   "publishConfig": {
     "access": "public"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
     "@gravity-ui/date-utils": "^1.4.1",
     "@gravity-ui/yagr": "^3.7.8",

package/build/libs/chartkit-error/__tests__/chartkit-error.js

@@ -1,27 +0,0 @@
-import { CHARTKIT_ERROR_CODE, ChartKitError, isChartKitError } from '../chartkit-error';
-describe('libs/chartkit-error', () => {
-    test.each([
-        [new ChartKitError(), true],
-        [new Error(), false],
-        [null, false],
-        [undefined, false],
-    ])('isChartKitError (args: %j)', (error, expected) => {
-        const result = isChartKitError(error);
-        expect(result).toEqual(expected);
-    });
-    test.each([
-        [undefined, CHARTKIT_ERROR_CODE.UNKNOWN],
-        [{ code: CHARTKIT_ERROR_CODE.NO_DATA }, CHARTKIT_ERROR_CODE.NO_DATA],
-    ])('check ChartKitError code (args: %j)', (args, expected) => {
-        let result = '';
-        try {
-            throw new ChartKitError(args);
-        }
-        catch (error) {
-            if (isChartKitError(error)) {
-                result = error.code;
-            }
-        }
-        expect(result).toEqual(expected);
-    });
-});

package/build/libs/settings/__tests__/settings.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/libs/settings/__tests__/settings.test.js

@@ -1,17 +0,0 @@
-import { settings } from '../settings';
-const resetSettings = () => settings.set({ lang: 'en' });
-describe('libs/settings', () => {
-    it('Default lang should be equal to en', () => {
-        const result = settings.get('lang');
-        expect(result).toBe('en');
-    });
-    it('Changed lang should be equal to ru', () => {
-        settings.set({
-            lang: 'ru',
-        });
-        const result = settings.get('lang');
-        expect(result).toBe('ru');
-    });
-    beforeAll(resetSettings);
-    afterEach(resetSettings);
-});

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

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

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

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

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