@gravity-ui/chartkit 5.17.0 → 5.18.0

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

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

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

@@ -1,32 +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 gamesByPlatform = groups(nintendoGames, (item) => item.platform);
-    return gamesByPlatform.map(([platform, games]) => ({
-        name: platform,
-        value: games.length,
-    }));
-}
-export const BasicPie = () => {
-    const data = prepareData();
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'pie',
-                    data: data,
-                },
-            ],
-        },
-        legend: { enabled: true },
-        title: {
-            text: 'Platforms',
-            style: { fontSize: '12px', fontWeight: 'normal' },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/pie/Donut.d.ts

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

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

@@ -1,33 +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 gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
-    return gamesByPlatform.map(([value, games]) => ({
-        name: value,
-        value: games.length,
-    }));
-}
-export const Donut = () => {
-    const data = prepareData();
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'pie',
-                    innerRadius: '50%',
-                    data: data,
-                },
-            ],
-        },
-        legend: { enabled: true },
-        title: {
-            text: 'ESRB ratings',
-            style: { fontSize: '12px', fontWeight: 'normal' },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

package/build/plugins/d3/examples/pie/DonutWithTotals.d.ts

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

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import { groups } from 'd3';
-import { ChartKit } from '../../../../components/ChartKit';
-import { CustomShapeRenderer } from '../../utils';
-import { ExampleWrapper } from '../ExampleWrapper';
-import nintendoGames from '../nintendoGames';
-function prepareData() {
-    const gamesByPlatform = groups(nintendoGames, (d) => d.esrb_rating || 'unknown');
-    return gamesByPlatform.map(([value, games]) => ({
-        name: value,
-        value: games.length,
-    }));
-}
-export const DonutWithTotals = () => {
-    const data = prepareData();
-    const totals = data.reduce((sum, d) => sum + d.value, 0);
-    const widgetData = {
-        series: {
-            data: [
-                {
-                    type: 'pie',
-                    innerRadius: '50%',
-                    data: data,
-                    renderCustomShape: CustomShapeRenderer.pieCenterText(`${totals}`),
-                },
-            ],
-        },
-        legend: { enabled: true },
-        title: {
-            text: 'ESRB ratings',
-            style: { fontSize: '12px', fontWeight: 'normal' },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

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

@@ -1,47 +0,0 @@
-import React from 'react';
-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: 'scatter',
-                data: s.data.filter((d) => d.x),
-                name: s.name,
-            })),
-        },
-        yAxis: [
-            {
-                title: {
-                    text: 'User score',
-                },
-            },
-        ],
-        xAxis: {
-            type: 'datetime',
-            title: {
-                text: 'Release dates',
-            },
-        },
-    };
-    return (React.createElement(ExampleWrapper, null,
-        React.createElement(ChartKit, { type: "d3", data: widgetData })));
-};

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

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

package/build/plugins/d3/examples/scatter/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: 'scatter',
-                    data: minTempData,
-                    name: 'Min Temperature',
-                    yAxis: 0,
-                },
-                {
-                    type: 'scatter',
-                    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/renderer/components/AxisX.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
-type Props = {
-    axis: PreparedAxis;
-    width: number;
-    height: number;
-    scale: ChartScale;
-    split: PreparedSplit;
-};
-export declare function getTitlePosition(args: {
-    axis: PreparedAxis;
-    width: number;
-    rowCount: number;
-}): {
-    x: number;
-    y: number;
-};
-export declare const AxisX: React.NamedExoticComponent<Props>;
-export {};

package/build/plugins/d3/renderer/components/AxisX.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { select } from 'd3';
-import { block } from '../../../../utils/cn';
-import { formatAxisTickLabel, getAxisTitleRows, getClosestPointsRange, getMaxTickCount, getScaleTicks, getTicksCount, handleOverflowingText, } from '../utils';
-import { axisBottom } from '../utils/axis-generators';
-const b = block('d3-axis');
-function getLabelFormatter({ axis, scale }) {
-    const ticks = getScaleTicks(scale);
-    const tickStep = getClosestPointsRange(axis, ticks);
-    return (value) => {
-        if (!axis.labels.enabled) {
-            return '';
-        }
-        return formatAxisTickLabel({
-            axis,
-            value,
-            step: tickStep,
-        });
-    };
-}
-export function getTitlePosition(args) {
-    const { axis, width, rowCount } = args;
-    if (rowCount < 1) {
-        return { x: 0, y: 0 };
-    }
-    let x;
-    const y = axis.title.height / rowCount + axis.title.margin + axis.labels.height + axis.labels.margin;
-    switch (axis.title.align) {
-        case 'left': {
-            x = axis.title.width / 2;
-            break;
-        }
-        case 'right': {
-            x = width - axis.title.width / 2;
-            break;
-        }
-        case 'center': {
-            x = width / 2;
-            break;
-        }
-    }
-    return { x, y };
-}
-export const AxisX = React.memo(function AxisX(props) {
-    const { axis, width, height: totalHeight, scale, split } = props;
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        let tickItems = [];
-        if (axis.grid.enabled) {
-            tickItems = new Array(split.plots.length || 1).fill(null).map((_, index) => {
-                var _a, _b;
-                const top = ((_a = split.plots[index]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-                const height = ((_b = split.plots[index]) === null || _b === void 0 ? void 0 : _b.height) || totalHeight;
-                return [-top, -(top + height)];
-            });
-        }
-        const xAxisGenerator = axisBottom({
-            scale: scale,
-            ticks: {
-                items: tickItems,
-                labelFormat: getLabelFormatter({ axis, scale }),
-                labelsPaddings: axis.labels.padding,
-                labelsMargin: axis.labels.margin,
-                labelsStyle: axis.labels.style,
-                labelsMaxWidth: axis.labels.maxWidth,
-                labelsLineHeight: axis.labels.lineHeight,
-                count: getTicksCount({ axis, range: width }),
-                maxTickCount: getMaxTickCount({ axis, width }),
-                rotation: axis.labels.rotation,
-            },
-            domain: {
-                size: width,
-                color: axis.lineColor,
-            },
-        });
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        svgElement.call(xAxisGenerator).attr('class', b());
-        // add an axis header if necessary
-        if (axis.title.text) {
-            const titleRows = getAxisTitleRows({ axis, textMaxWidth: width });
-            svgElement
-                .append('text')
-                .attr('class', b('title'))
-                .attr('transform', () => {
-                const { x, y } = getTitlePosition({ axis, width, rowCount: titleRows.length });
-                return `translate(${x}, ${y})`;
-            })
-                .attr('font-size', axis.title.style.fontSize)
-                .attr('text-anchor', 'middle')
-                .selectAll('tspan')
-                .data(titleRows)
-                .join('tspan')
-                .attr('x', 0)
-                .attr('y', (d) => d.y)
-                .text((d) => d.text)
-                .each((_d, index, nodes) => {
-                if (index === axis.title.maxRowCount - 1) {
-                    handleOverflowingText(nodes[index], width);
-                }
-            });
-        }
-    }, [axis, width, totalHeight, scale, split]);
-    return React.createElement("g", { ref: ref });
-});

package/build/plugins/d3/renderer/components/AxisY.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { ChartScale, PreparedAxis, PreparedSplit } from '../hooks';
-type Props = {
-    axes: PreparedAxis[];
-    scale: ChartScale[];
-    width: number;
-    height: number;
-    split: PreparedSplit;
-};
-export declare const AxisY: (props: Props) => React.JSX.Element;
-export {};

package/build/plugins/d3/renderer/components/AxisY.js

@@ -1,199 +0,0 @@
-import React from 'react';
-import { axisLeft, axisRight, line, select } from 'd3';
-import { block } from '../../../../utils/cn';
-import { calculateCos, calculateSin, formatAxisTickLabel, getAxisHeight, getAxisTitleRows, getClosestPointsRange, getScaleTicks, getTicksCount, handleOverflowingText, parseTransformStyle, setEllipsisForOverflowTexts, wrapText, } from '../utils';
-const b = block('d3-axis');
-function transformLabel(args) {
-    const { node, axis } = args;
-    let topOffset = axis.labels.lineHeight / 2;
-    let leftOffset = axis.labels.margin;
-    if (axis.position === 'left') {
-        leftOffset = leftOffset * -1;
-    }
-    if (axis.labels.rotation) {
-        if (axis.labels.rotation > 0) {
-            leftOffset -= axis.labels.lineHeight * calculateSin(axis.labels.rotation);
-            topOffset = axis.labels.lineHeight * calculateCos(axis.labels.rotation);
-            if (axis.labels.rotation % 360 === 90) {
-                topOffset = ((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
-            }
-        }
-        else {
-            topOffset = 0;
-            if (axis.labels.rotation % 360 === -90) {
-                topOffset = -((node === null || node === void 0 ? void 0 : node.getBoundingClientRect().width) || 0) / 2;
-            }
-        }
-        return `translate(${leftOffset}px, ${topOffset}px) rotate(${axis.labels.rotation}deg)`;
-    }
-    return `translate(${leftOffset}px, ${topOffset}px)`;
-}
-function getAxisGenerator(args) {
-    const { preparedAxis, axisGenerator: generator, width, height, scale } = args;
-    const tickSize = preparedAxis.grid.enabled ? width * -1 : 0;
-    const step = getClosestPointsRange(preparedAxis, getScaleTicks(scale));
-    let axisGenerator = generator
-        .tickSize(tickSize)
-        .tickPadding(preparedAxis.labels.margin)
-        .tickFormat((value) => {
-        if (!preparedAxis.labels.enabled) {
-            return '';
-        }
-        return formatAxisTickLabel({
-            axis: preparedAxis,
-            value,
-            step,
-        });
-    });
-    const ticksCount = getTicksCount({ axis: preparedAxis, range: height });
-    if (ticksCount) {
-        axisGenerator = axisGenerator.ticks(ticksCount);
-    }
-    return axisGenerator;
-}
-function getTitlePosition(args) {
-    const { axis, axisHeight, rowCount } = args;
-    if (rowCount < 1) {
-        return { x: 0, y: 0 };
-    }
-    const x = -(axis.title.height -
-        axis.title.height / rowCount +
-        axis.title.margin +
-        axis.labels.margin +
-        axis.labels.width);
-    let y;
-    switch (axis.title.align) {
-        case 'left': {
-            y = axisHeight - axis.title.width / 2;
-            break;
-        }
-        case 'right': {
-            y = axis.title.width / 2;
-            break;
-        }
-        case 'center': {
-            y = axisHeight / 2;
-            break;
-        }
-    }
-    return { x, y };
-}
-export const AxisY = (props) => {
-    const { axes, width, height: totalHeight, scale, split } = props;
-    const height = getAxisHeight({ split, boundsHeight: totalHeight });
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const svgElement = select(ref.current);
-        svgElement.selectAll('*').remove();
-        const axisSelection = svgElement
-            .selectAll('axis')
-            .data(axes)
-            .join('g')
-            .attr('class', b())
-            .style('transform', (d) => {
-            var _a;
-            const top = ((_a = split.plots[d.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
-            if (d.position === 'left') {
-                return `translate(0, ${top}px)`;
-            }
-            return `translate(${width}px, 0)`;
-        });
-        axisSelection.each((d, index, node) => {
-            const seriesScale = scale[index];
-            const axisItem = select(node[index]);
-            const yAxisGenerator = getAxisGenerator({
-                axisGenerator: d.position === 'left'
-                    ? axisLeft(seriesScale)
-                    : axisRight(seriesScale),
-                preparedAxis: d,
-                height,
-                width,
-                scale: seriesScale,
-            });
-            yAxisGenerator(axisItem);
-            if (d.labels.enabled) {
-                const tickTexts = axisItem
-                    .selectAll('.tick text')
-                    // The offset must be applied before the labels are rotated.
-                    // Therefore, we reset the values and make an offset in transform  attribute.
-                    // FIXME: give up axisLeft(d3) and switch to our own generation method
-                    .attr('x', null)
-                    .attr('dy', null)
-                    .style('font-size', d.labels.style.fontSize)
-                    .style('transform', function () {
-                    return transformLabel({ node: this, axis: d });
-                });
-                const textMaxWidth = !d.labels.rotation || Math.abs(d.labels.rotation) % 360 !== 90
-                    ? d.labels.maxWidth
-                    : (height - d.labels.padding * (tickTexts.size() - 1)) / tickTexts.size();
-                tickTexts.call(setEllipsisForOverflowTexts, textMaxWidth);
-            }
-            // remove overlapping ticks
-            // Note: this method do not prepared for rotated labels
-            if (!d.labels.rotation) {
-                let elementY = 0;
-                axisItem
-                    .selectAll('.tick')
-                    .filter(function (_d, tickIndex) {
-                    const tickNode = this;
-                    const r = tickNode.getBoundingClientRect();
-                    if (r.bottom > elementY && tickIndex !== 0) {
-                        return true;
-                    }
-                    elementY = r.top - d.labels.padding;
-                    return false;
-                })
-                    .remove();
-            }
-            return axisItem;
-        });
-        axisSelection
-            .select('.domain')
-            .attr('d', () => {
-            const points = [
-                [0, 0],
-                [0, height],
-            ];
-            return line()(points);
-        })
-            .style('stroke', (d) => d.lineColor || '');
-        svgElement.selectAll('.tick').each((_d, index, nodes) => {
-            const tickNode = select(nodes[index]);
-            if (parseTransformStyle(tickNode.attr('transform')).y === height) {
-                // Remove stroke from tick that has the same y coordinate like domain
-                tickNode.select('line').style('stroke', 'none');
-            }
-        });
-        axisSelection
-            .append('text')
-            .attr('class', b('title'))
-            .attr('text-anchor', 'middle')
-            .attr('font-size', (d) => d.title.style.fontSize)
-            .attr('transform', (d) => {
-            const titleRows = wrapText({
-                text: d.title.text,
-                style: d.title.style,
-                width: height,
-            });
-            const rowCount = Math.min(titleRows.length, d.title.maxRowCount);
-            const { x, y } = getTitlePosition({ axis: d, axisHeight: height, rowCount });
-            const angle = d.position === 'left' ? -90 : 90;
-            return `translate(${x}, ${y}) rotate(${angle})`;
-        })
-            .selectAll('tspan')
-            .data((d) => getAxisTitleRows({ axis: d, textMaxWidth: height }))
-            .join('tspan')
-            .attr('x', 0)
-            .attr('y', (d) => d.y)
-            .text((d) => d.text)
-            .each((_d, index, nodes) => {
-            if (index === nodes.length - 1) {
-                handleOverflowingText(nodes[index], height);
-            }
-        });
-    }, [axes, width, height, scale, split]);
-    return React.createElement("g", { ref: ref, className: b('container') });
-};

package/build/plugins/d3/renderer/components/Chart.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ChartKitWidgetData } from '../../../../types';
-import './styles.css';
-type Props = {
-    width: number;
-    height: number;
-    data: ChartKitWidgetData;
-};
-export declare const Chart: (props: Props) => React.JSX.Element;
-export {};