@gravity-ui/chartkit 5.17.0 → 5.18.0

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

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

package/build/plugins/d3/examples/bar-y/StackedColumns.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 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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import { groups, max, median, min } 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 = {
-        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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

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

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

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

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-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;
-    });
-    const byGenre = (genre) => {
-        return games
-            .filter((d) => d.genres.includes(genre))
-            .map((d) => {
-            return {
-                x: d.date,
-                y: d.user_score,
-                label: `${d.title} (${d.user_score})`,
-                custom: d,
-            };
-        });
-    };
-    return [
-        {
-            name: 'Strategy',
-            type: 'line',
-            data: byGenre('Strategy'),
-            dataLabels: {
-                enabled: true,
-            },
-        },
-        {
-            name: 'Shooter',
-            type: 'line',
-            data: byGenre('Shooter'),
-            dataLabels: {
-                enabled: true,
-            },
-        },
-    ];
-}
-export const DataLabels = () => {
-    const series = prepareData();
-    const widgetData = {
-        series: {
-            data: series.map((s) => ({
-                type: 'line',
-                data: s.data.filter((d) => d.x),
-                name: s.name,
-                dataLabels: {
-                    enabled: true,
-                },
-            })),
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'User score',
-                },
-            },
-        ],
-        xAxis: {
-            type: 'datetime',
-            title: {
-                text: 'Release dates',
-            },
-            ticks: { pixelInterval: 200 },
-        },
-        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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,69 +0,0 @@
-import React from 'react';
-import { dateTime } from '@gravity-ui/date-utils';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-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) => ({
-        x: d.date || undefined,
-        y: d.user_score || undefined,
-        custom: d,
-    }));
-    return {
-        series: [
-            {
-                data,
-                name: 'Nintendo games',
-            },
-        ],
-    };
-}
-export const LineWithMarkers = () => {
-    const { series } = prepareData();
-    const widgetData = {
-        series: {
-            data: series.map((s) => ({
-                type: 'line',
-                data: s.data.filter((d) => d.x),
-                name: s.name,
-                marker: { enabled: true, symbol: 'square' },
-            })),
-        },
-        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(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Col, Container, Row, Text } from '@gravity-ui/uikit';
-import { randomNormal } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { ExampleWrapper } from '../ExampleWrapper';
-export const LineWithLogarithmicAxis = () => {
-    const randomY = randomNormal(0, 100);
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'line',
-                    name: 'Line series',
-                    data: new Array(25).fill(null).map((_, index) => ({
-                        x: index,
-                        y: Math.abs(randomY()),
-                    })),
-                },
-            ],
-        },
-    };
-    const lineWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'line' } });
-    const logarithmicWidgetData = Object.assign(Object.assign({}, widgetData), { title: { text: 'logarithmic' }, yAxis: [
-            {
-                type: 'logarithmic',
-            },
-        ] });
-    return (React.createElement(Container, { spaceRow: 5 },
-        React.createElement(Row, { space: 1 },
-            React.createElement(Text, { variant: "header-2" }, "logarithmic VS line")),
-        React.createElement(Row, { space: 3 },
-            React.createElement(Col, { s: 12, m: 6 },
-                React.createElement(ExampleWrapper, null,
-                    React.createElement(ChartKit, { type: "d3", data: lineWidgetData }))),
-            React.createElement(Col, { s: 12, m: 6 },
-                React.createElement(ExampleWrapper, null,
-                    React.createElement(ChartKit, { type: "d3", data: logarithmicWidgetData }))))));
-};

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

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

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

@@ -1,93 +0,0 @@
-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/line/TwoYAxis.d.ts

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

package/build/plugins/d3/examples/line/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 minTempData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.min_temp,
-    }));
-    const maxTempData = data.map((d) => ({
-        x: dateTime({ input: d.terrestrial_date, format: 'YYYY-MM-DD' }).valueOf(),
-        y: d.max_temp,
-    }));
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'line',
-                    data: minTempData,
-                    name: 'Min Temperature',
-                    yAxis: 0,
-                },
-                {
-                    type: 'line',
-                    data: maxTempData,
-                    name: 'Max Temperature',
-                    yAxis: 1,
-                },
-            ],
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'Min',
-                },
-            },
-            {
-                title: {
-                    text: 'Max',
-                },
-            },
-        ],
-        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/mars-weather.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    id: string;
-    terrestrial_date: string;
-    sol: number;
-    ls: number;
-    season: string;
-    min_temp: number;
-    max_temp: number;
-    pressure: number;
-    wind_speed: null;
-    atmo_opacity: string;
-}[];
-export default _default;