@gravity-ui/chartkit 4.8.0 → 4.9.1

package/build/components/ChartKit.d.ts

@@ -15,7 +15,7 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
     renderError?: import("../types").RenderError | undefined;
-    renderPluginLoader?: (() => React.ReactNode) | undefined;
+    renderPluginLoader?: import("../types").ChartKitRenderPluginLoader | undefined;
 } & (Omit<import("../types").ChartKitWidget[T], "data" | "widget"> extends infer T_1 ? { [key in keyof T_1]: import("../types").ChartKitWidget[T][key]; } : never) & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;
 }) => ReturnType<typeof ChartKitComponent>;

package/build/components/ChartKit.js

@@ -31,7 +31,7 @@ const ChartKitComponent = (props) => {
             }
         },
     }), []);
-    return (React.createElement(React.Suspense, { fallback: (renderPluginLoader === null || renderPluginLoader === void 0 ? void 0 : renderPluginLoader()) || React.createElement(Loader, null) },
+    return (React.createElement(React.Suspense, { fallback: React.createElement(Loader, { renderPluginLoader: renderPluginLoader }) },
         React.createElement("div", { className: b({ mobile: isMobile }, 'chartkit-theme_common') },
             React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };

package/build/components/Loader/Loader.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import { LoaderProps as BaseLoaderProps } from '@gravity-ui/uikit';
+import type { ChartKitRenderPluginLoader } from '../../types';
 import './Loader.css';
-type LoaderProps = BaseLoaderProps;
-export declare const Loader: (props: LoaderProps) => React.JSX.Element;
+type LoaderProps = BaseLoaderProps & {
+    renderPluginLoader?: ChartKitRenderPluginLoader;
+};
+export declare const Loader: ({ renderPluginLoader, ...props }: LoaderProps) => React.JSX.Element;
 export {};

package/build/components/Loader/Loader.js

@@ -1,9 +1,16 @@
+import { __rest } from "tslib";
 import React from 'react';
 import { Loader as BaseLoader } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import './Loader.css';
 const b = block('loader');
-export const Loader = (props) => {
+export const Loader = (_a) => {
+    var { renderPluginLoader } = _a, props = __rest(_a, ["renderPluginLoader"]);
+    const pluginLoader = renderPluginLoader === null || renderPluginLoader === void 0 ? void 0 : renderPluginLoader();
+    // React.Suspense complains about possible undefined in "fallback" property
+    if (typeof pluginLoader !== 'undefined') {
+        return pluginLoader;
+    }
     return (React.createElement("div", { className: b() },
         React.createElement(BaseLoader, Object.assign({}, props))));
 };

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

@@ -3,7 +3,9 @@ import { ChartKit } from '../../../../components/ChartKit';
 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 displayedYears = [2015, 2016, 2017, 2018, 2019];
+    const games = nintendoGames.filter((ng) => displayedYears.includes(new Date(ng.date).getFullYear()));
+    const grouped = groups(games, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
     const categories = [];
     const series = grouped.map(([platform, years]) => {
         return {
@@ -30,7 +32,7 @@ export const GroupedColumns = () => {
     });
     const widgetData = {
         series: {
-            data: data,
+            data,
         },
         xAxis: {
             type: 'category',

package/build/plugins/d3/examples/bar-y/Basic.d.ts

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

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+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]) => ({
+        y: value,
+        x: games.length,
+    }));
+    return {
+        categories: gamesByPlatform.map(([key]) => key),
+        series: [
+            {
+                data,
+                name: 'Games released',
+            },
+        ],
+    };
+}
+export const Basic = () => {
+    const { categories, series } = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'bar-y',
+                data: s.data,
+                name: s.name,
+            })),
+        },
+        xAxis: { title: { text: 'Number of games released' } },
+        yAxis: [
+            {
+                type: 'category',
+                categories: categories.map(String),
+                title: {
+                    text: 'Game Platforms',
+                },
+            },
+        ],
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/bar-y/GroupedColumns.d.ts

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+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()));
+    const grouped = groups(games, (d) => d.platform, (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown'));
+    const categories = [];
+    const series = grouped.map(([platform, years]) => {
+        return {
+            name: platform,
+            data: years.map(([year, list]) => {
+                categories.push(String(year));
+                return {
+                    y: String(year),
+                    x: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const GroupedColumns = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-y',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        yAxis: [
+            {
+                type: 'category',
+                categories: categories.sort(),
+                title: {
+                    text: 'Release year',
+                },
+            },
+        ],
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/bar-y/StackedColumns.d.ts

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

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+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 = [];
+    const series = grouped.map(([platform, years]) => {
+        return {
+            name: platform,
+            data: years.map(([year, list]) => {
+                categories.push(String(year));
+                return {
+                    y: String(year),
+                    x: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const StackedColumns = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-y',
+            stacking: 'normal',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        yAxis: [
+            {
+                type: 'category',
+                categories: categories.sort(),
+                title: {
+                    text: 'Release year',
+                },
+            },
+        ],
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

package/build/plugins/d3/examples/combined/LineAndBarX.d.ts

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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import nintendoGames from '../../examples/nintendoGames';
+import { groups, max, min, median } from 'd3';
+export const LineAndBarXCombinedChart = () => {
+    const gamesByPlatform = groups(nintendoGames, (item) => item.platform || 'unknown');
+    const widgetData = {
+        series: {
+            options: {
+                line: {
+                    lineWidth: 2,
+                },
+            },
+            data: [
+                {
+                    type: 'bar-x',
+                    data: gamesByPlatform.map(([value, games]) => ({
+                        x: value,
+                        y: median(games, (g) => g.user_score || 0),
+                    })),
+                    name: 'Median user score',
+                },
+                {
+                    type: 'line',
+                    data: gamesByPlatform.map(([value, games]) => ({
+                        x: value,
+                        y: max(games, (g) => g.user_score || 0),
+                    })),
+                    name: 'Max user score',
+                },
+                {
+                    type: 'line',
+                    data: gamesByPlatform.map(([value, games]) => ({
+                        x: value,
+                        y: min(games, (g) => g.user_score || 10),
+                    })),
+                    name: 'Min user score',
+                },
+            ],
+        },
+        xAxis: {
+            categories: gamesByPlatform.map(([key]) => key),
+            type: 'category',
+            title: {
+                text: 'Game Platforms',
+            },
+        },
+        yAxis: [
+            {
+                title: { text: 'User score' },
+                labels: {
+                    enabled: true,
+                },
+                ticks: {
+                    pixelInterval: 120,
+                },
+            },
+        ],
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

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

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+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) => ({
+        x: d.date || undefined,
+        y: d.user_score || undefined,
+        custom: d,
+    }));
+    return {
+        series: [
+            {
+                data,
+                name: 'Nintendo games',
+            },
+        ],
+    };
+}
+export const Basic = () => {
+    const { series } = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'line',
+                data: s.data.filter((d) => d.x),
+                name: s.name,
+            })),
+        },
+        yAxis: [
+            {
+                title: {
+                    text: 'User score',
+                },
+            },
+        ],
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release dates',
+            },
+        },
+        tooltip: {
+            renderer: (d) => {
+                var _a;
+                const point = (_a = d.hovered[0]) === null || _a === void 0 ? void 0 : _a.data;
+                if (!point) {
+                    return null;
+                }
+                const title = point.custom.title;
+                const score = point.custom.user_score;
+                const date = dateTime({ input: point.custom.date }).format('DD MMM YYYY');
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("b", null, title),
+                    React.createElement("br", null),
+                    "Release date: ",
+                    date,
+                    React.createElement("br", null),
+                    "User score: ",
+                    score));
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

@@ -6,8 +6,8 @@ declare const _default: ({
     user_score: null;
     link: string;
     esrb_rating: string;
-    developers: string;
-    genres: string;
+    developers: string[];
+    genres: string[];
 } | {
     meta_score: number;
     title: string;
@@ -16,8 +16,8 @@ declare const _default: ({
     user_score: number;
     link: string;
     esrb_rating: string;
-    developers: string;
-    genres: string;
+    developers: string[];
+    genres: string[];
 } | {
     meta_score: null;
     title: string;
@@ -26,8 +26,18 @@ declare const _default: ({
     user_score: number;
     link: string;
     esrb_rating: string;
+    developers: string[];
+    genres: string[];
+} | {
+    meta_score: number;
+    title: string;
+    platform: string;
+    date: number;
+    user_score: number;
+    link: string;
+    esrb_rating: string;
     developers: string;
-    genres: string;
+    genres: string[];
 } | {
     meta_score: null;
     title: string;
@@ -36,8 +46,8 @@ declare const _default: ({
     user_score: null;
     link: string;
     esrb_rating: string;
-    developers: string;
-    genres: string;
+    developers: string[];
+    genres: string[];
 } | {
     meta_score: number;
     title: string;
@@ -46,8 +56,8 @@ declare const _default: ({
     user_score: null;
     link: string;
     esrb_rating: string;
-    developers: string;
-    genres: string;
+    developers: string[];
+    genres: string[];
 } | {
     meta_score: number;
     title: string;
@@ -56,7 +66,27 @@ declare const _default: ({
     user_score: number;
     link: string;
     esrb_rating: string;
+    developers: string[];
+    genres: string[];
+} | {
+    meta_score: null;
+    title: string;
+    platform: string;
+    date: number;
+    user_score: null;
+    link: string;
+    esrb_rating: string;
+    developers: string;
+    genres: string[];
+} | {
+    meta_score: null;
+    title: string;
+    platform: string;
+    date: null;
+    user_score: null;
+    link: string;
+    esrb_rating: string;
     developers: string;
-    genres: string;
+    genres: string[];
 })[];
 export default _default;