@gravity-ui/chartkit 4.13.0 → 4.15.0

package/build/constants/index.d.ts

@@ -1 +1,2 @@
 export { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from './common';
+export * from './widget-data';

package/build/constants/index.js

@@ -1 +1,2 @@
 export { CHARTKIT_SCROLLABLE_NODE_CLASSNAME } from './common';
+export * from './widget-data';

package/build/constants/widget-data.d.ts

@@ -0,0 +1,27 @@
+export declare const SeriesType: {
+    readonly Area: "area";
+    readonly BarX: "bar-x";
+    readonly BarY: "bar-y";
+    readonly Line: "line";
+    readonly Pie: "pie";
+    readonly Scatter: "scatter";
+};
+export declare enum DashStyle {
+    Dash = "Dash",
+    DashDot = "DashDot",
+    Dot = "Dot",
+    LongDash = "LongDash",
+    LongDashDot = "LongDashDot",
+    LongDashDotDot = "LongDashDotDot",
+    ShortDash = "ShortDash",
+    ShortDashDot = "ShortDashDot",
+    ShortDashDotDot = "ShortDashDotDot",
+    ShortDot = "ShortDot",
+    Solid = "Solid"
+}
+export declare enum LineCap {
+    Butt = "butt",
+    Round = "round",
+    Square = "square",
+    None = "none"
+}

package/build/constants/widget-data.js

@@ -0,0 +1,29 @@
+export const SeriesType = {
+    Area: 'area',
+    BarX: 'bar-x',
+    BarY: 'bar-y',
+    Line: 'line',
+    Pie: 'pie',
+    Scatter: 'scatter',
+};
+export var DashStyle;
+(function (DashStyle) {
+    DashStyle["Dash"] = "Dash";
+    DashStyle["DashDot"] = "DashDot";
+    DashStyle["Dot"] = "Dot";
+    DashStyle["LongDash"] = "LongDash";
+    DashStyle["LongDashDot"] = "LongDashDot";
+    DashStyle["LongDashDotDot"] = "LongDashDotDot";
+    DashStyle["ShortDash"] = "ShortDash";
+    DashStyle["ShortDashDot"] = "ShortDashDot";
+    DashStyle["ShortDashDotDot"] = "ShortDashDotDot";
+    DashStyle["ShortDot"] = "ShortDot";
+    DashStyle["Solid"] = "Solid";
+})(DashStyle || (DashStyle = {}));
+export var LineCap;
+(function (LineCap) {
+    LineCap["Butt"] = "butt";
+    LineCap["Round"] = "round";
+    LineCap["Square"] = "square";
+    LineCap["None"] = "none";
+})(LineCap || (LineCap = {}));

package/build/i18n/keysets/en.json

@@ -28,7 +28,12 @@
   "error": {
     "label_no-data": "No data",
     "label_unknown-plugin": "Unknown plugin type \"{{type}}\"",
-    "label_unknown-error": "Unknown error"
+    "label_unknown-error": "Unknown error",
+    "label_invalid-axis-category-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"category\". Strings and numbers are allowed.",
+    "label_invalid-axis-datetime-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"datetime\". Only numbers are allowed.",
+    "label_invalid-axis-linear-data-point": "It seems you are trying to use inappropriate data type for \"{{key}}\" value in series \"{{seriesName}}\" for axis with type \"linear\". Numbers and nulls are allowed.",
+    "label_invalid-pie-data-value": "It seems you are trying to use inappropriate data type for \"value\" value. Only numbers are allowed.",
+    "label_invalid-series-type": "It seems you haven't defined \"series.type\" property, or defined it incorrectly. Available values: [{{types}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Reset zoom",

package/build/i18n/keysets/ru.json

@@ -30,7 +30,12 @@
   "error": {
     "label_no-data": "Нет данных",
     "label_unknown-plugin": "Неизвестный тип плагина \"{{type}}\"",
-    "label_unknown-error": "Неизвестная ошибка"
+    "label_unknown-error": "Неизвестная ошибка",
+    "label_invalid-axis-category-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"category\". Допускается использование строк и чисел.",
+    "label_invalid-axis-datetime-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"datetime\". Допускается только использование чисел.",
+    "label_invalid-axis-linear-data-point": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"{{key}}\" в серии \"{{seriesName}}\" для оси с типом \"linear\". Допускается использование чисел и значений null.",
+    "label_invalid-pie-data-value": "Похоже, что вы пытаетесь использовать недопустимый тип данных для значения \"value\". Допускается только использование чисел.",
+    "label_invalid-series-type": "Похоже, что вы не указали значение \"series.type\" или указали его неверно. Доступные значения: [{{types}}]."
   },
   "highcharts": {
     "reset-zoom-title": "Сбросить увеличение",

package/build/libs/chartkit-error/chartkit-error.d.ts

@@ -5,6 +5,7 @@ export type ChartKitErrorArgs = {
 };
 export declare const CHARTKIT_ERROR_CODE: {
     NO_DATA: string;
+    INVALID_DATA: string;
     UNKNOWN: string;
     UNKNOWN_PLUGIN: string;
     TOO_MANY_LINES: string;

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

@@ -1,5 +1,6 @@
 export const CHARTKIT_ERROR_CODE = {
     NO_DATA: 'ERR.CK.NO_DATA',
+    INVALID_DATA: 'ERR.CK.INVALID_DATA',
     UNKNOWN: 'ERR.CK.UNKNOWN_ERROR',
     UNKNOWN_PLUGIN: 'ERR.CK.UNKNOWN_PLUGIN',
     TOO_MANY_LINES: 'ERR.CK.TOO_MANY_LINES',

package/build/plugins/d3/examples/ExampleWrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children?: React.ReactNode;
+    styles?: React.CSSProperties;
+};
+export declare const ExampleWrapper: (props: Props) => React.JSX.Element;
+export {};

package/build/plugins/d3/examples/ExampleWrapper.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export const ExampleWrapper = (props) => {
+    const styles = Object.assign({ height: 280 }, props.styles);
+    return React.createElement("div", { style: styles }, props.children);
+};

package/build/plugins/d3/examples/area/Basic.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Basic: () => React.JSX.Element;

package/build/plugins/d3/examples/area/Basic.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+function prepareData() {
+    const games = nintendoGames.filter((d) => {
+        return d.date && d.user_score && d.genres.includes('Puzzle');
+    });
+    return [
+        {
+            name: 'User score',
+            type: 'area',
+            data: games.map((d) => {
+                return {
+                    x: Number(d.date),
+                    y: Number(d.user_score),
+                };
+            }),
+        },
+    ];
+}
+export const Basic = () => {
+    const series = prepareData();
+    const widgetData = {
+        series: {
+            data: series,
+        },
+        xAxis: {
+            type: 'datetime',
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/area/StackedArea.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const StackedArea: () => React.JSX.Element;

package/build/plugins/d3/examples/area/StackedArea.js

@@ -0,0 +1,47 @@
+import { groups } from 'd3';
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+const years = Array.from(new Set(nintendoGames.map((d) => d.date ? String(new Date(d.date).getFullYear()) : 'unknown'))).sort();
+function prepareData() {
+    const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? String(new Date(d.date).getFullYear()) : 'unknown'));
+    const series = grouped.map(([platform, gamesByYear]) => {
+        const platformGames = Object.fromEntries(gamesByYear) || {};
+        return {
+            name: platform,
+            data: years.reduce((acc, year) => {
+                if (year in platformGames) {
+                    acc.push({
+                        x: year,
+                        y: platformGames[year].length,
+                    });
+                }
+                return acc;
+            }, []),
+        };
+    });
+    return { series };
+}
+export const StackedArea = () => {
+    const { series } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'area',
+            stacking: 'normal',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: years,
+        },
+    };
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
+};

package/build/plugins/d3/examples/bar-x/Basic.js

@@ -1,15 +1,22 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
-function prepareData(field = 'platform') {
+function prepareData({ field, filterNulls } = {
+    field: 'platform',
+}) {
     const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
-    const data = gamesByPlatform.map(([value, games]) => ({
+    let resultData = gamesByPlatform;
+    if (filterNulls) {
+        resultData = gamesByPlatform.filter(([value]) => typeof value === 'number');
+    }
+    const data = resultData.map(([value, games]) => ({
         x: value,
         y: games.length,
     }));
     return {
-        categories: gamesByPlatform.map(([key]) => key),
+        categories: resultData.map(([key]) => key),
         series: [
             {
                 data,
@@ -37,10 +44,11 @@ export const BasicBarXChart = () => {
         },
         yAxis: [{ title: { text: 'Number of games released' } }],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };
 export const BasicLinearBarXChart = () => {
-    const { series } = prepareData('meta_score');
+    const { series } = prepareData({ field: 'meta_score' });
     const widgetData = {
         series: {
             data: series.map((s) => ({
@@ -55,10 +63,11 @@ export const BasicLinearBarXChart = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };
 export const BasicDateTimeBarXChart = () => {
-    const { series } = prepareData('date');
+    const { series } = prepareData({ field: 'date', filterNulls: true });
     const widgetData = {
         series: {
             data: series.map((s) => ({
@@ -74,5 +83,6 @@ export const BasicDateTimeBarXChart = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/DataLabels.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups, sort } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups, sort } from 'd3';
 const years = Array.from(new Set(nintendoGames.map((g) => g.date ? new Date(g.date).getFullYear().toString() : 'unknown')));
 function prepareData() {
     const games = sort(nintendoGames.filter((d) => {
@@ -42,5 +43,6 @@ export const DataLabels = () => {
             ticks: { pixelInterval: 200 },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/GroupedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const displayedYears = [2015, 2016, 2017, 2018, 2019];
     const games = nintendoGames.filter((ng) => displayedYears.includes(new Date(ng.date).getFullYear()));
@@ -42,5 +43,6 @@ export const GroupedColumns = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-x/StackedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
     const categories = [];
@@ -41,5 +42,6 @@ export const StackedColumns = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData(field = 'platform') {
     const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
     const data = gamesByPlatform.map(([value, games]) => ({
@@ -39,5 +40,6 @@ export const Basic = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/GroupedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const displayedYears = [2015, 2016, 2017, 2018, 2019];
     const games = nintendoGames.filter((ng) => displayedYears.includes(new Date(ng.date).getFullYear()));
@@ -44,5 +45,6 @@ export const GroupedColumns = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/bar-y/StackedColumns.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const grouped = groups(nintendoGames, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
     const categories = [];
@@ -43,5 +44,6 @@ export const StackedColumns = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/combined/LineAndBarX.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { ChartKit } from '../../../../components/ChartKit';
-import nintendoGames from '../../examples/nintendoGames';
 import { groups, max, min, median } from 'd3';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
 export const LineAndBarXCombinedChart = () => {
     const gamesByPlatform = groups(nintendoGames, (item) => item.platform || 'unknown');
     const widgetData = {
@@ -57,5 +58,6 @@ export const LineAndBarXCombinedChart = () => {
             },
         ],
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score);
     const data = dataset.map((d) => ({
@@ -62,5 +63,6 @@ export const Basic = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/DataLabels.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const games = nintendoGames.filter((d) => {
         return d.date && d.user_score;
@@ -85,5 +86,6 @@ export const DataLabels = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/LineWithMarkers.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score && new Date(d.date) > new Date(2022, 0, 1));
     const data = dataset.map((d) => ({
@@ -63,5 +64,6 @@ export const LineWithMarkers = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/line/Shapes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LinesWithShapes: () => React.JSX.Element;

package/build/plugins/d3/examples/line/Shapes.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { DashStyle } from '../../../../constants';
+import { ExampleWrapper } from '../ExampleWrapper';
+import nintendoGames from '../nintendoGames';
+const SHAPES = {
+    [DashStyle.Solid]: 1,
+    [DashStyle.Dash]: 2,
+    [DashStyle.Dot]: 3,
+    [DashStyle.ShortDashDot]: 4,
+    [DashStyle.LongDash]: 5,
+    [DashStyle.LongDashDot]: 6,
+    [DashStyle.ShortDot]: 7,
+    [DashStyle.LongDashDotDot]: 8,
+    [DashStyle.ShortDash]: 9,
+    [DashStyle.DashDot]: 10,
+    [DashStyle.ShortDashDotDot]: 11,
+};
+const selectShapes = () => Object.values(DashStyle);
+const getShapesOrder = () => selectShapes().sort((a, b) => SHAPES[a] - SHAPES[b]);
+const SHAPES_IN_ORDER = getShapesOrder();
+function prepareData() {
+    const games = nintendoGames.filter((d) => {
+        return d.date && d.user_score;
+    });
+    const byGenre = (genre) => {
+        return games
+            .filter((d) => d.genres.includes(genre))
+            .map((d) => {
+            return {
+                x: d.date,
+                y: d.user_score,
+                label: d.title,
+            };
+        });
+    };
+    return {
+        series: {
+            options: {
+                line: {
+                    lineWidth: 2,
+                },
+            },
+            data: [
+                {
+                    name: '3D',
+                    type: 'line',
+                    data: byGenre('3D'),
+                },
+                {
+                    name: '2D',
+                    type: 'line',
+                    data: byGenre('2D'),
+                },
+                {
+                    name: 'Strategy',
+                    type: 'line',
+                    data: byGenre('Strategy'),
+                },
+                {
+                    name: 'Shooter',
+                    type: 'line',
+                    data: byGenre('Shooter'),
+                },
+            ],
+        },
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release date',
+            },
+        },
+        yAxis: [
+            {
+                title: { text: 'User score' },
+                labels: {
+                    enabled: true,
+                },
+                ticks: {
+                    pixelInterval: 120,
+                },
+            },
+        ],
+    };
+}
+export const LinesWithShapes = () => {
+    const data = prepareData();
+    data.series.data.forEach((graph, i) => {
+        graph.dashStyle = SHAPES_IN_ORDER[i % SHAPES_IN_ORDER.length];
+    });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: data })));
+};

package/build/plugins/d3/examples/pie/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const gamesByPlatform = groups(nintendoGames, (item) => item.platform);
     return gamesByPlatform.map(([platform, games]) => ({
@@ -26,5 +27,6 @@ export const BasicPie = () => {
             style: { fontSize: '12px', fontWeight: 'normal' },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/pie/Donut.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { groups } from 'd3';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { groups } from 'd3';
 function prepareData() {
     const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
     return gamesByPlatform.map(([value, games]) => ({
@@ -27,5 +28,6 @@ export const Donut = () => {
             style: { fontSize: '12px', fontWeight: 'normal' },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };

package/build/plugins/d3/examples/scatter/Basic.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { dateTime } from '@gravity-ui/date-utils';
 import { ChartKit } from '../../../../components/ChartKit';
+import { ExampleWrapper } from '../ExampleWrapper';
 import nintendoGames from '../nintendoGames';
-import { dateTime } from '@gravity-ui/date-utils';
 function prepareData() {
     const dataset = nintendoGames.filter((d) => d.date && d.user_score);
     const data = dataset.map((d) => ({
@@ -62,5 +63,6 @@ export const Basic = () => {
             },
         },
     };
-    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+    return (React.createElement(ExampleWrapper, null,
+        React.createElement(ChartKit, { type: "d3", data: widgetData })));
 };