@gravity-ui/chartkit 5.17.1 → 5.18.0

package/build/plugins/d3/renderer/utils/symbol.js

@@ -1,36 +0,0 @@
-import { symbolCircle, symbolDiamond2, symbolSquare, symbolTriangle2 } from 'd3';
-import { SymbolType } from '../../../../constants';
-export const getSymbolType = (index) => {
-    const scatterStyles = Object.values(SymbolType);
-    return scatterStyles[index % scatterStyles.length];
-};
-// This is an inverted triangle
-// Based on https://github.com/d3/d3-shape/blob/main/src/symbol/triangle2.js
-const sqrt3 = Math.sqrt(3);
-const triangleDown = {
-    draw: (context, size) => {
-        const s = Math.sqrt(size) * 0.6824;
-        const t = s / 2;
-        const u = (s * sqrt3) / 2;
-        context.moveTo(0, s);
-        context.lineTo(u, -t);
-        context.lineTo(-u, -t);
-        context.closePath();
-    },
-};
-export const getSymbol = (symbolType) => {
-    switch (symbolType) {
-        case SymbolType.Diamond:
-            return symbolDiamond2;
-        case SymbolType.Circle:
-            return symbolCircle;
-        case SymbolType.Square:
-            return symbolSquare;
-        case SymbolType.Triangle:
-            return symbolTriangle2;
-        case SymbolType.TriangleDown:
-            return triangleDown;
-        default:
-            return symbolCircle;
-    }
-};

package/build/plugins/d3/renderer/utils/text.d.ts

@@ -1,29 +0,0 @@
-import type { Selection } from 'd3';
-import { BaseTextStyle } from '../../../../types';
-export declare function handleOverflowingText(tSpan: SVGTSpanElement | null, maxWidth: number): void;
-export declare function setEllipsisForOverflowText<T>(selection: Selection<SVGTextElement, T, null, unknown>, maxWidth: number): void;
-export declare function setEllipsisForOverflowTexts<T>(selection: Selection<SVGTextElement, T, any, unknown>, maxWidth: ((datum: T) => number) | number): void;
-export declare function hasOverlappingLabels({ width, labels, padding, style, }: {
-    width: number;
-    labels: string[];
-    style?: BaseTextStyle;
-    padding?: number;
-}): boolean;
-export declare function getLabelsSize({ labels, style, rotation, html, }: {
-    labels: string[];
-    style?: BaseTextStyle;
-    rotation?: number;
-    html?: boolean;
-}): {
-    maxHeight: number;
-    maxWidth: number;
-};
-export type TextRow = {
-    text: string;
-    y: number;
-};
-export declare function wrapText(args: {
-    text: string;
-    style?: BaseTextStyle;
-    width: number;
-}): TextRow[];

package/build/plugins/d3/renderer/utils/text.js

@@ -1,139 +0,0 @@
-import { select } from 'd3-selection';
-export function handleOverflowingText(tSpan, maxWidth) {
-    var _a, _b, _c;
-    if (!tSpan) {
-        return;
-    }
-    const svg = tSpan.closest('svg');
-    if (!svg) {
-        return;
-    }
-    const textNode = tSpan.closest('text');
-    const angle = ((_a = Array.from((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal) || []).find((item) => item.angle)) === null || _a === void 0 ? void 0 : _a.angle) || 0;
-    const revertRotation = svg.createSVGTransform();
-    revertRotation.setRotate(-angle, 0, 0);
-    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.appendItem(revertRotation);
-    let text = tSpan.textContent || '';
-    let textLength = ((_b = tSpan.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
-    while (textLength > maxWidth && text.length > 1) {
-        text = text.slice(0, -1);
-        tSpan.textContent = text + '…';
-        textLength = ((_c = tSpan.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.width) || 0;
-    }
-    textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.removeItem((textNode === null || textNode === void 0 ? void 0 : textNode.transform.baseVal.length) - 1);
-}
-export function setEllipsisForOverflowText(selection, maxWidth) {
-    const text = selection.text();
-    selection.text(null).append('title').text(text);
-    const tSpan = selection.append('tspan').text(text).style('alignment-baseline', 'inherit');
-    handleOverflowingText(tSpan.node(), maxWidth);
-}
-export function setEllipsisForOverflowTexts(selection, maxWidth) {
-    selection.each(function (datum) {
-        const textMaxWidth = typeof maxWidth === 'function' ? maxWidth(datum) : maxWidth;
-        setEllipsisForOverflowText(select(this), textMaxWidth);
-    });
-}
-export function hasOverlappingLabels({ width, labels, padding = 0, style, }) {
-    const maxWidth = (width - padding * (labels.length - 1)) / labels.length;
-    const textElement = select(document.body)
-        .append('text')
-        .style('font-size', (style === null || style === void 0 ? void 0 : style.fontSize) || '');
-    const result = labels.some((label) => {
-        var _a, _b;
-        const textWidth = ((_b = (_a = textElement.text(label).node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width) || 0;
-        return textWidth > maxWidth;
-    });
-    textElement.remove();
-    return result;
-}
-function renderLabels(selection, { labels, style = {}, attrs = {}, }) {
-    const text = selection.append('g').append('text');
-    text.style('font-size', style.fontSize || '');
-    text.style('font-weight', style.fontWeight || '');
-    Object.entries(attrs).forEach(([name, value]) => {
-        text.attr(name, value);
-    });
-    text.selectAll('tspan')
-        .data(labels)
-        .enter()
-        .append('tspan')
-        .attr('x', 0)
-        .attr('dy', 0)
-        .text((d) => d);
-    return text;
-}
-export function getLabelsSize({ labels, style, rotation, html, }) {
-    var _a, _b, _c;
-    if (!labels.filter(Boolean).length) {
-        return { maxHeight: 0, maxWidth: 0 };
-    }
-    const container = select(document.body)
-        .append('div')
-        .attr('class', 'chartkit chartkit-theme_common');
-    const result = { maxHeight: 0, maxWidth: 0 };
-    let labelWrapper;
-    if (html) {
-        labelWrapper = container.append('div').style('position', 'absolute').node();
-        const { height, width } = labels.reduce((acc, l) => {
-            var _a, _b;
-            if (labelWrapper) {
-                labelWrapper.innerHTML = l;
-            }
-            const rect = labelWrapper === null || labelWrapper === void 0 ? void 0 : labelWrapper.getBoundingClientRect();
-            return {
-                width: Math.max(acc.width, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0),
-                height: Math.max(acc.height, (_b = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _b !== void 0 ? _b : 0),
-            };
-        }, { height: 0, width: 0 });
-        result.maxWidth = width;
-        result.maxHeight = height;
-    }
-    else {
-        const svg = container.append('svg');
-        const textSelection = renderLabels(svg, { labels, style });
-        if (rotation) {
-            textSelection
-                .attr('text-anchor', rotation > 0 ? 'start' : 'end')
-                .style('transform', `rotate(${rotation}deg)`);
-        }
-        const rect = (_a = svg.select('g').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        result.maxWidth = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
-        result.maxHeight = (_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0;
-    }
-    container.remove();
-    return result;
-}
-export function wrapText(args) {
-    const { text, style, width } = args;
-    const height = getLabelsSize({
-        labels: [text],
-        style: style,
-    }).maxHeight;
-    // @ts-ignore
-    const segmenter = new Intl.Segmenter([], { granularity: 'word' });
-    const segments = Array.from(segmenter.segment(text));
-    return segments.reduce((acc, s) => {
-        const item = s;
-        if (!acc.length) {
-            acc.push({
-                text: '',
-                y: acc.length * height,
-            });
-        }
-        let lastRow = acc[acc.length - 1];
-        if (item.isWordLike &&
-            getLabelsSize({
-                labels: [lastRow.text + item.segment],
-                style,
-            }).maxWidth > width) {
-            lastRow = {
-                text: '',
-                y: acc.length * height,
-            };
-            acc.push(lastRow);
-        }
-        lastRow.text += item.segment;
-        return acc;
-    }, []);
-}

package/build/plugins/d3/renderer/utils/time.d.ts

@@ -1,3 +0,0 @@
-export declare const TIME_UNITS: Record<string, number>;
-export declare const DATETIME_LABEL_FORMATS: Record<keyof typeof TIME_UNITS, string>;
-export declare function getDefaultDateFormat(range?: number): string;

package/build/plugins/d3/renderer/utils/time.js

@@ -1,34 +0,0 @@
-export const TIME_UNITS = {
-    millisecond: 1,
-    second: 1000,
-    minute: 60000,
-    hour: 3600000,
-    day: 24 * 3600000,
-    week: 7 * 24 * 3600000,
-    month: 28 * 24 * 3600000,
-    year: 364 * 24 * 3600000,
-};
-export const DATETIME_LABEL_FORMATS = {
-    millisecond: 'DD.MM.YY HH:mm:ss.SSS',
-    second: 'DD.MM.YY HH:mm:ss',
-    minute: 'DD.MM.YY HH:mm',
-    hour: 'DD.MM.YY HH:mm',
-    day: 'DD.MM.YY',
-    week: 'DD.MM.YY',
-    month: "MMM 'YY",
-    year: 'YYYY',
-};
-function getTimeUnit(range) {
-    const units = Object.keys(TIME_UNITS);
-    const index = units.findIndex((unit) => range < TIME_UNITS[unit]);
-    return index === -1 ? 'year' : units[index - 1];
-}
-export function getDefaultDateFormat(range) {
-    if (range) {
-        const unit = getTimeUnit(range);
-        if (unit in DATETIME_LABEL_FORMATS) {
-            return DATETIME_LABEL_FORMATS[unit];
-        }
-    }
-    return DATETIME_LABEL_FORMATS.day;
-}

package/build/plugins/d3/renderer/validation/__mocks__/index.d.ts

@@ -1,3 +0,0 @@
-import { ChartKitWidgetData } from '../../../../../types';
-export declare const XY_SERIES: Record<string, ChartKitWidgetData>;
-export declare const PIE_SERIES: Record<string, ChartKitWidgetData>;

package/build/plugins/d3/renderer/validation/__mocks__/index.js

@@ -1,44 +0,0 @@
-export const XY_SERIES = {
-    INVALID_CATEGORY_X: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
-        },
-        xAxis: { type: 'category' },
-    },
-    INVALID_CATEGORY_Y: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: 1, y: undefined }], name: 'Series' }],
-        },
-        yAxis: [{ type: 'category' }],
-    },
-    INVALID_DATETIME_X: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
-        },
-        xAxis: { type: 'datetime' },
-    },
-    INVALID_DATETIME_Y: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: undefined, y: 1 }], name: 'Series' }],
-        },
-        yAxis: [{ type: 'datetime' }],
-    },
-    INVALID_LINEAR_X: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: 'str', y: 1 }], name: 'Series' }],
-        },
-    },
-    INVALID_LINEAR_Y: {
-        series: {
-            data: [{ type: 'scatter', data: [{ x: 1, y: 'str' }], name: 'Series' }],
-        },
-    },
-};
-export const PIE_SERIES = {
-    INVALID_VALUE: {
-        series: {
-            // @ts-expect-error
-            data: [{ type: 'pie', data: [{ value: undefined, name: 'Series' }] }],
-        },
-    },
-};

package/build/plugins/d3/renderer/validation/index.d.ts

@@ -1,2 +0,0 @@
-import { ChartKitWidgetData } from '../../../../types';
-export declare const validateData: (data?: ChartKitWidgetData) => void;

package/build/plugins/d3/renderer/validation/index.js

@@ -1,221 +0,0 @@
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import { SeriesType } from '../../../../constants';
-import { i18n } from '../../../../i18n';
-import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../../libs';
-import { DEFAULT_AXIS_TYPE } from '../constants';
-const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
-const validateXYSeries = (args) => {
-    const { series, xAxis, yAxis = [] } = args;
-    const yAxisIndex = get(series, 'yAxis', 0);
-    const seriesYAxis = yAxis[yAxisIndex];
-    if (yAxisIndex !== 0 && typeof seriesYAxis === 'undefined') {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-            message: i18n('error', 'label_invalid-y-axis-index', {
-                index: yAxisIndex,
-            }),
-        });
-    }
-    const xType = get(xAxis, 'type', DEFAULT_AXIS_TYPE);
-    const yType = get(seriesYAxis, 'type', DEFAULT_AXIS_TYPE);
-    series.data.forEach(({ x, y }) => {
-        switch (xType) {
-            case 'category': {
-                if (typeof x !== 'string' && typeof x !== 'number') {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-category-data-point', {
-                            key: 'x',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-                break;
-            }
-            case 'datetime': {
-                if (typeof x !== 'number') {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
-                            key: 'x',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-                break;
-            }
-            case 'linear': {
-                if (typeof x !== 'number' && x !== null) {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
-                            key: 'x',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-            }
-        }
-        switch (yType) {
-            case 'category': {
-                if (typeof y !== 'string' && typeof y !== 'number') {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-category-data-point', {
-                            key: 'y',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-                break;
-            }
-            case 'datetime': {
-                if (typeof y !== 'number') {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-datetime-data-point', {
-                            key: 'y',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-                break;
-            }
-            case 'linear': {
-                if (typeof y !== 'number' && y !== null) {
-                    throw new ChartKitError({
-                        code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                        message: i18n('error', 'label_invalid-axis-linear-data-point', {
-                            key: 'y',
-                            seriesName: series.name,
-                        }),
-                    });
-                }
-            }
-        }
-    });
-};
-const validatePieSeries = ({ series }) => {
-    series.data.forEach(({ value }) => {
-        if (typeof value !== 'number') {
-            throw new ChartKitError({
-                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                message: i18n('error', 'label_invalid-pie-data-value'),
-            });
-        }
-    });
-};
-const validateStacking = ({ series }) => {
-    const availableStackingValues = ['normal', 'percent'];
-    if (series.stacking && !availableStackingValues.includes(series.stacking)) {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-            message: i18n('error', 'label_invalid-series-property', {
-                key: 'stacking',
-                values: availableStackingValues,
-            }),
-        });
-    }
-};
-const validateTreemapSeries = ({ series }) => {
-    const parentIds = {};
-    series.data.forEach((d) => {
-        if (d.parentId && !parentIds[d.parentId]) {
-            parentIds[d.parentId] = true;
-        }
-    });
-    series.data.forEach((d) => {
-        let idOrName = d.id;
-        if (!idOrName) {
-            idOrName = Array.isArray(d.name) ? d.name.join() : d.name;
-        }
-        if (parentIds[idOrName] && typeof d.value === 'number') {
-            throw new ChartKitError({
-                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                message: i18n('error', 'label_invalid-treemap-redundant-value', {
-                    id: d.id,
-                    name: d.name,
-                }),
-            });
-        }
-        if (!parentIds[idOrName] && typeof d.value !== 'number') {
-            throw new ChartKitError({
-                code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-                message: i18n('error', 'label_invalid-treemap-missing-value', {
-                    id: d.id,
-                    name: d.name,
-                }),
-            });
-        }
-    });
-};
-const validateSeries = (args) => {
-    const { series, xAxis, yAxis } = args;
-    if (!AVAILABLE_SERIES_TYPES.includes(series.type)) {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-            message: i18n('error', 'label_invalid-series-type', {
-                types: AVAILABLE_SERIES_TYPES.join(', '),
-            }),
-        });
-    }
-    switch (series.type) {
-        case 'area':
-        case 'bar-y':
-        case 'bar-x': {
-            validateXYSeries({ series, xAxis, yAxis });
-            validateStacking({ series });
-            break;
-        }
-        case 'line':
-        case 'scatter': {
-            validateXYSeries({ series, xAxis, yAxis });
-            break;
-        }
-        case 'pie': {
-            validatePieSeries({ series });
-            break;
-        }
-        case 'treemap': {
-            validateTreemapSeries({ series });
-        }
-    }
-};
-const countSeriesByType = (args) => {
-    const { series, type } = args;
-    let count = 0;
-    series.forEach((s) => {
-        if (s.type === type) {
-            count += 1;
-        }
-    });
-    return count;
-};
-export const validateData = (data) => {
-    if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.NO_DATA,
-            message: i18n('error', 'label_no-data'),
-        });
-    }
-    if (data.series.data.some((s) => isEmpty(s.data))) {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-            message: 'You should specify data for all series',
-        });
-    }
-    const treemapSeriesCount = countSeriesByType({
-        series: data.series.data,
-        type: SeriesType.Treemap,
-    });
-    if (treemapSeriesCount > 1) {
-        throw new ChartKitError({
-            code: CHARTKIT_ERROR_CODE.INVALID_DATA,
-            message: 'It looks like you are trying to define more than one "treemap" series.',
-        });
-    }
-    data.series.data.forEach((series) => {
-        validateSeries({ series, yAxis: data.yAxis, xAxis: data.xAxis });
-    });
-};

package/build/plugins/d3/utils/index.d.ts

@@ -1,4 +0,0 @@
-import { pieCenterText } from './pie-center-text';
-export declare const CustomShapeRenderer: {
-    pieCenterText: typeof pieCenterText;
-};

package/build/plugins/d3/utils/index.js

@@ -1,4 +0,0 @@
-import { pieCenterText } from './pie-center-text';
-export const CustomShapeRenderer = {
-    pieCenterText,
-};

package/build/plugins/d3/utils/pie-center-text.d.ts

@@ -1,7 +0,0 @@
-export declare function pieCenterText(text: string, options?: {
-    padding?: number;
-}): ((args: {
-    series: {
-        innerRadius: number;
-    };
-}) => Element | null) | undefined;

package/build/plugins/d3/utils/pie-center-text.js

@@ -1,23 +0,0 @@
-import { create } from 'd3-selection';
-import get from 'lodash/get';
-import { getLabelsSize } from '../renderer/utils';
-const MAX_FONT_SIZE = 64;
-export function pieCenterText(text, options) {
-    if (!text) {
-        return undefined;
-    }
-    const padding = get(options, 'padding', 12);
-    return function (args) {
-        let fontSize = MAX_FONT_SIZE;
-        const textSize = getLabelsSize({ labels: [text], style: { fontSize: `${fontSize}px` } });
-        fontSize = (fontSize * (args.series.innerRadius - padding) * 2) / textSize.maxWidth;
-        const container = create('svg:g');
-        container
-            .append('text')
-            .text(text)
-            .attr('text-anchor', 'middle')
-            .attr('alignment-baseline', 'middle')
-            .style('font-size', `${fontSize}px`);
-        return container.node();
-    };
-}