@gravity-ui/chartkit 5.17.0 → 5.18.0

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

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

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import marsWeatherData from '../mars-weather';
-export const TwoYAxis = () => {
-    const data = marsWeatherData;
-    const pressureData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.pressure,
-    }));
-    const tempData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.max_temp - d.min_temp,
-    }));
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'area',
-                    data: pressureData,
-                    name: 'Pressure',
-                    yAxis: 0,
-                },
-                {
-                    type: 'area',
-                    data: tempData,
-                    name: 'Temperature range',
-                    yAxis: 1,
-                },
-            ],
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'Pressure',
-                },
-            },
-            {
-                title: {
-                    text: 'Temperature range',
-                },
-            },
-        ],
-        xAxis: {
-            type: 'datetime',
-            title: {
-                text: 'Terrestrial date',
-            },
-            ticks: { pixelInterval: 200 },
-        },
-        title: {
-            text: 'Mars weather',
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

@@ -1,88 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-function prepareData({ field, filterNulls } = {
-    field: 'platform',
-}) {
-    const gamesByPlatform = groups(nintendoGames, (item) => item[field]);
-    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: resultData.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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};
-export const BasicLinearBarXChart = () => {
-    const { series } = prepareData({ field: '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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};
-export const BasicDateTimeBarXChart = () => {
-    const { series } = prepareData({ field: 'date', filterNulls: true });
-    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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { groups, sort } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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) => {
-        return d.date && d.user_score;
-    }), (d) => d.date);
-    const groupByYear = (d) => (d.date ? new Date(d.date).getFullYear() : 'unknown');
-    const byGenre = (genre) => {
-        const data = groups(games.filter((d) => d.genres.includes(genre)), groupByYear).map(([year, items]) => {
-            return {
-                x: years.indexOf(String(year)),
-                y: items.length,
-            };
-        });
-        return {
-            type: 'bar-x',
-            name: genre,
-            dataLabels: {
-                enabled: true,
-            },
-            stacking: 'normal',
-            data,
-        };
-    };
-    return [byGenre('Strategy'), byGenre('Shooter'), byGenre('Puzzle'), byGenre('Action')];
-}
-export const DataLabels = () => {
-    const series = prepareData();
-    const widgetData = {
-        series: {
-            data: series,
-        },
-        xAxis: {
-            categories: years,
-            type: 'category',
-            title: {
-                text: 'Release year',
-            },
-            ticks: { pixelInterval: 200 },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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 {
-                    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,
-        },
-        xAxis: {
-            type: 'category',
-            categories: categories.sort(),
-            title: {
-                text: 'Release year',
-            },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import marsWeatherData from '../mars-weather';
-export const NegativeValues = () => {
-    const data = marsWeatherData.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.min_temp,
-    }));
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'bar-x',
-                    data: data,
-                    name: 'Min temperature',
-                },
-            ],
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'Min temperature',
-                },
-            },
-        ],
-        xAxis: {
-            type: 'datetime',
-            title: {
-                text: 'Terrestrial date',
-            },
-            ticks: { pixelInterval: 200 },
-        },
-        title: {
-            text: 'Mars weather',
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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 PercentStackColumns = () => {
-    const { series, categories } = prepareData();
-    const data = series.map((s) => {
-        return {
-            type: 'bar-x',
-            stacking: 'percent',
-            name: s.name,
-            data: s.data,
-        };
-    });
-    const widgetData = {
-        series: {
-            data: data,
-        },
-        xAxis: {
-            type: 'category',
-            categories: categories.sort(),
-            title: {
-                text: 'Release year',
-            },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,47 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,58 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import marsWeatherData from '../mars-weather';
-export const TwoYAxis = () => {
-    const data = marsWeatherData;
-    const pressureData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.pressure,
-    }));
-    const tempData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.max_temp - d.min_temp,
-    }));
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'bar-x',
-                    data: pressureData,
-                    name: 'Pressure',
-                    yAxis: 0,
-                },
-                {
-                    type: 'bar-x',
-                    data: tempData,
-                    name: 'Temperature range',
-                    yAxis: 1,
-                },
-            ],
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'Pressure',
-                },
-            },
-            {
-                title: {
-                    text: 'Temperature range',
-                },
-            },
-        ],
-        xAxis: {
-            type: 'datetime',
-            title: {
-                text: 'Terrestrial date',
-            },
-            ticks: { pixelInterval: 200 },
-        },
-        title: {
-            text: 'Mars weather',
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,50 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,40 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import marsWeatherData from '../mars-weather';
-export const NegativeValues = () => {
-    const data = marsWeatherData.map((d) => ({
-        y: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        x: d.min_temp,
-    }));
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'bar-y',
-                    data: data,
-                    name: 'Min temperature',
-                },
-            ],
-        },
-        xAxis: {
-            title: {
-                text: 'Min temperature',
-            },
-        },
-        yAxis: [
-            {
-                type: 'datetime',
-                title: {
-                    text: 'Terrestrial date',
-                },
-            },
-        ],
-        title: {
-            text: 'Mars weather',
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,49 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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 PercentStackingBars = () => {
-    const { series, categories } = prepareData();
-    const data = series.map((s) => {
-        return {
-            type: 'bar-y',
-            stacking: 'percent',
-            name: s.name,
-            data: s.data,
-        };
-    });
-    const widgetData = {
-        series: {
-            data: data,
-        },
-        yAxis: [
-            {
-                type: 'category',
-                categories: categories.sort(),
-                title: {
-                    text: 'Release year',
-                },
-            },
-        ],
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};