@gravity-ui/charts 0.1.0

package/dist/esm/utils/chart/symbol.js

@@ -0,0 +1,36 @@
+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/dist/esm/utils/chart/text.d.ts

@@ -0,0 +1,29 @@
+import type { Selection } from 'd3';
+import type { BaseTextStyle, MeaningfulAny } 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, MeaningfulAny, 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/dist/esm/utils/chart/text.js

@@ -0,0 +1,139 @@
+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');
+    // TODO: Why do we need this styles?
+    // .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/dist/esm/utils/chart/time.d.ts

@@ -0,0 +1,3 @@
+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/dist/esm/utils/chart/time.js

@@ -0,0 +1,34 @@
+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/dist/esm/utils/chart-ui/index.d.ts

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

package/dist/esm/utils/chart-ui/index.js

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

package/dist/esm/utils/chart-ui/pie-center-text.d.ts

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

package/dist/esm/utils/chart-ui/pie-center-text.js

@@ -0,0 +1,23 @@
+import { create } from 'd3-selection';
+import get from 'lodash/get';
+import { getLabelsSize } from '../chart/text';
+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();
+    };
+}

package/dist/esm/utils/cn.d.ts

@@ -0,0 +1,3 @@
+export declare const CN_NAMESPACE = "gcharts-";
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/dist/esm/utils/cn.js

@@ -0,0 +1,4 @@
+import { withNaming } from '@bem-react/classname';
+export const CN_NAMESPACE = 'gcharts-';
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: CN_NAMESPACE, e: '__', m: '_' });

package/dist/esm/utils/d3-dispatcher.d.ts

@@ -0,0 +1 @@
+export declare const getD3Dispatcher: () => import("d3-dispatch").Dispatch<object>;

package/dist/esm/utils/d3-dispatcher.js

@@ -0,0 +1,4 @@
+import { dispatch } from 'd3';
+export const getD3Dispatcher = () => {
+    return dispatch('hover-shape', 'click-chart');
+};

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,5 @@
+export * from './chart';
+export * from './chart-ui';
+export * from './cn';
+export * from './d3-dispatcher';
+export * from './misc';

package/dist/esm/utils/index.js

@@ -0,0 +1,5 @@
+export * from './chart';
+export * from './chart-ui';
+export * from './cn';
+export * from './d3-dispatcher';
+export * from './misc';

package/dist/esm/utils/misc.d.ts

@@ -0,0 +1,2 @@
+export declare const randomString: (length: number, chars: string) => string;
+export declare const getUniqId: () => string;

package/dist/esm/utils/misc.js

@@ -0,0 +1,8 @@
+export const randomString = (length, chars) => {
+    let result = '';
+    for (let i = length; i > 0; --i) {
+        result += chars[Math.floor(Math.random() * chars.length)];
+    }
+    return result;
+};
+export const getUniqId = () => `gravity-chart.${randomString(5, '0123456789abcdefghijklmnopqrstuvwxyz')}`;

package/dist/esm/validation/index.d.ts

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

package/dist/esm/validation/index.js

@@ -0,0 +1,220 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { DEFAULT_AXIS_TYPE, SeriesType } from '../constants';
+import { i18n } from '../i18n';
+import { CHART_ERROR_CODE, ChartError } from '../libs';
+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 ChartError({
+            code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                        code: CHART_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 ChartError({
+                code: CHART_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 ChartError({
+            code: CHART_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 ChartError({
+                code: CHART_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 ChartError({
+                code: CHART_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 ChartError({
+            code: CHART_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 ChartError({
+            code: CHART_ERROR_CODE.NO_DATA,
+            message: i18n('error', 'label_no-data'),
+        });
+    }
+    if (data.series.data.some((s) => isEmpty(s.data))) {
+        throw new ChartError({
+            code: CHART_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 ChartError({
+            code: CHART_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 });
+    });
+};