@gravity-ui/chartkit 4.6.1 → 4.7.1

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const BasicBarXChart: () => React.JSX.Element;
+export declare const BasicLinearBarXChart: () => React.JSX.Element;
+export declare const BasicDateTimeBarXChart: () => React.JSX.Element;

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

@@ -0,0 +1,78 @@
+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]) => ({
+        x: value,
+        y: games.length,
+    }));
+    return {
+        categories: gamesByPlatform.map(([key]) => key),
+        series: [
+            {
+                data,
+                name: 'Games released',
+            },
+        ],
+    };
+}
+export const BasicBarXChart = () => {
+    const { categories, series } = prepareData();
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'bar-x',
+                data: s.data,
+                name: s.name,
+            })),
+        },
+        xAxis: {
+            type: 'category',
+            categories: categories.map(String),
+            title: {
+                text: 'Game Platforms',
+            },
+        },
+        yAxis: [{ title: { text: 'Number of games released' } }],
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};
+export const BasicLinearBarXChart = () => {
+    const { series } = prepareData('meta_score');
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'bar-x',
+                data: s.data,
+                name: s.name,
+            })),
+        },
+        xAxis: {
+            title: {
+                text: 'Meta scores',
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};
+export const BasicDateTimeBarXChart = () => {
+    const { series } = prepareData('date');
+    const widgetData = {
+        series: {
+            data: series.map((s) => ({
+                type: 'bar-x',
+                data: s.data,
+                name: s.name,
+            })),
+        },
+        xAxis: {
+            type: 'datetime',
+            title: {
+                text: 'Release date',
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

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

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

@@ -0,0 +1,44 @@
+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 {
+                    x: String(year),
+                    y: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const GroupedColumns = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-x',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: categories.sort(),
+            title: {
+                text: 'Release year',
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

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

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

@@ -0,0 +1,45 @@
+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 {
+                    x: String(year),
+                    y: list.length,
+                };
+            }),
+        };
+    });
+    return { categories, series };
+}
+export const StackedColumns = () => {
+    const { series, categories } = prepareData();
+    const data = series.map((s) => {
+        return {
+            type: 'bar-x',
+            stacking: 'normal',
+            name: s.name,
+            data: s.data,
+        };
+    });
+    const widgetData = {
+        series: {
+            data: data,
+        },
+        xAxis: {
+            type: 'category',
+            categories: categories.sort(),
+            title: {
+                text: 'Release year',
+            },
+        },
+    };
+    return React.createElement(ChartKit, { type: "d3", data: widgetData });
+};

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

@@ -0,0 +1,62 @@
+declare const _default: ({
+    meta_score: null;
+    title: string;
+    platform: string;
+    date: number;
+    user_score: null;
+    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;
+} | {
+    meta_score: null;
+    title: string;
+    platform: string;
+    date: number;
+    user_score: number;
+    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;
+} | {
+    meta_score: number;
+    title: string;
+    platform: string;
+    date: number;
+    user_score: null;
+    link: string;
+    esrb_rating: string;
+    developers: string;
+    genres: string;
+} | {
+    meta_score: number;
+    title: string;
+    platform: string;
+    date: null;
+    user_score: number;
+    link: string;
+    esrb_rating: string;
+    developers: string;
+    genres: string;
+})[];
+export default _default;