@gravity-ui/charts 1.11.3 → 1.12.0

package/dist/esm/hooks/utils/bar-y.js

@@ -0,0 +1,69 @@
+import { max } from 'd3';
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+export function groupBarYDataByYValue(series, yAxis) {
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            const axisIndex = get(s, 'yAxis', 0);
+            const seriesYAxis = yAxis[axisIndex];
+            const categories = get(seriesYAxis, 'categories', []);
+            const key = seriesYAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'y', categories, data: d })
+                : d.y;
+            if (key) {
+                if (!data[key]) {
+                    data[key] = {};
+                }
+                if (!data[key][s.stackId]) {
+                    data[key][s.stackId] = [];
+                }
+                data[key][s.stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    return data;
+}
+export function getBarYLayoutForNumericScale(args) {
+    const { plotHeight, series, seriesOptions } = args;
+    const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-y.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
+    let yValuesWithoutStacking = 0;
+    const yValuesByStackingIdMap = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            if (s.stackId) {
+                if (!yValuesByStackingIdMap[s.stackId]) {
+                    yValuesByStackingIdMap[s.stackId] = new Set();
+                }
+                yValuesByStackingIdMap[s.stackId].add(Number(d.y));
+            }
+            else {
+                yValuesWithoutStacking += 1;
+            }
+        });
+    });
+    const stackedSeriesLength = Object.values(yValuesByStackingIdMap).reduce((acc, set) => acc + set.size, 0);
+    const dataLength = yValuesWithoutStacking + stackedSeriesLength;
+    const bandSize = plotHeight / dataLength;
+    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupSize = bandSize - groupGap;
+    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize - barGap, barMaxWidth));
+    return { bandSize, barGap, barSize, dataLength };
+}
+export function getBarYLayoutForCategoryScale(args) {
+    const { groupedData, seriesOptions, yScale } = args;
+    const barMaxWidth = get(seriesOptions, 'bar-y.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-y.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-y.groupPadding');
+    const bandSize = yScale.bandwidth();
+    const maxGroupSize = max(Object.values(groupedData), (d) => Object.values(d).length) || 1;
+    const groupGap = Math.max(bandSize * groupPadding, MIN_BAR_GROUP_GAP);
+    const groupSize = bandSize - groupGap;
+    const barGap = Math.max(bandSize * barPadding, MIN_BAR_GAP);
+    const barSize = Math.max(MIN_BAR_WIDTH, Math.min(groupSize / maxGroupSize - barGap, barMaxWidth));
+    return { bandSize, barGap, barSize };
+}

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

@@ -0,0 +1 @@
+export * from './bar-y';

package/dist/esm/hooks/utils/index.js

@@ -0,0 +1 @@
+export * from './bar-y';

package/dist/esm/i18n/keysets/en.json

@@ -13,6 +13,12 @@
     "label_invalid-treemap-missing-value": "It seems you are trying to use node without \"value\". Check node with this properties: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-y-axis-index": "It seems you are trying to use inappropriate index for Y axis: \"{{index}}\"",
     "label_invalid-axis-plot-band-option": "It seems you are trying to use inappropriate type for \"{{axis}}\" axis plot band option: \"{{option}}\"",
-    "label_axis-plot-band-options-not-equal": "It seems you are trying to use different type for \"{{axis}}\" axis plot band options"
+    "label_axis-plot-band-options-not-equal": "It seems you are trying to use different type for \"{{axis}}\" axis plot band options",
+    "label_invalid-tooltip-totals-aggregation-type": "It seems you are trying to use inappropriate data type for \"tooltip.totals.aggregation\". Available types: string, function.",
+    "label_invalid-tooltip-totals-aggregation-type-str": "It seems you are trying to use inappropriate value for built-in \"tooltip.totals.aggregation\". Available values: [{{values}}].",
+    "label_invalid-axis-type": "It seems you are trying to use inappropriate type for \"{{key}}\" axis. Available types: [{{values}}]."
+  },
+  "tooltip": {
+    "label_totals_sum": "Sum"
   }
 }

package/dist/esm/i18n/keysets/ru.json

@@ -13,6 +13,12 @@
     "label_invalid-treemap-missing-value": "Похоже, что вы пытаетесь использовать узел без значения \"value\". Проверьте узел с этими свойствами: { id: \"{{id}}\", name: \"{{name}}\" }",
     "label_invalid-y-axis-index": "Похоже, что вы пытаетесь использовать некорректный индекс для оси Y: \"{{index}}\"",
     "label_invalid-axis-plot-band-option": "Похоже, что вы пытаетесь использовать некорректный тип для параметра полосы: \"{{option}}\" для оси \"{{axis}}\"",
-    "label_axis-plot-band-options-not-equal": "Похоже, что вы пытаетесь использовать разные типы для для параметра полосы для оси \"{{axis}}\""
+    "label_axis-plot-band-options-not-equal": "Похоже, что вы пытаетесь использовать разные типы для для параметра полосы для оси \"{{axis}}\"",
+    "label_invalid-tooltip-totals-aggregation-type": "Похоже, что вы пытаетесь использовать некорректный тип данных для \"tooltip.totals.aggregation\". Доступные типы: string, function.",
+    "label_invalid-tooltip-totals-aggregation-type-str": "Похоже, что вы пытаетесь использовать некорректное значение для встроенной агрегации \"tooltip.totals.aggregation\". Доступные значения: [{{values}}].",
+    "label_invalid-axis-type": "Похоже, что вы пытаетесь использовать некорректный тип для оси \"{{key}}\". Доступные типы: [{{values}}]."
+  },
+  "tooltip": {
+    "label_totals_sum": "Сумма"
   }
 }

package/dist/esm/types/chart/axis.d.ts

@@ -1,7 +1,7 @@
-import type { DashStyle } from '../../constants';
+import type { AXIS_TYPE, DashStyle } from '../../constants';
 import type { FormatNumberOptions } from '../formatter';
 import type { BaseTextStyle } from './base';
-export type ChartAxisType = 'category' | 'datetime' | 'linear' | 'logarithmic';
+export type ChartAxisType = (typeof AXIS_TYPE)[keyof typeof AXIS_TYPE];
 export type ChartAxisTitleAlignment = 'left' | 'center' | 'right';
 export interface ChartAxisLabels {
     /** Enable or disable the axis labels. */

package/dist/esm/types/chart/tooltip.d.ts

@@ -1,3 +1,4 @@
+import type { TOOLTIP_TOTALS_BUILT_IN_AGGREGATION } from '../../constants';
 import type { MeaningfulAny } from '../misc';
 import type { AreaSeries, AreaSeriesData } from './area';
 import type { ChartXAxis, ChartYAxis } from './axis';
@@ -79,6 +80,10 @@ export interface ChartTooltipRendererArgs<T = MeaningfulAny> {
     xAxis?: ChartXAxis | null;
     yAxis?: ChartYAxis;
 }
+export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends ChartTooltipRendererArgs<T> {
+}
+export type ChartTooltipTotalsBuiltInAggregation = (typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION)[keyof typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION];
+export type ChartTooltipTotalsAggregationValue = number | string | undefined;
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
@@ -91,4 +96,20 @@ export interface ChartTooltip<T = MeaningfulAny> {
     throttle?: number;
     /** Formatting settings for tooltip value. */
     valueFormat?: ValueFormat;
+    /** Settings for totals block in tooltip */
+    totals?: {
+        /**
+         * The aggregation method for calculating totals.
+         * It can be a built-in function (e.g., 'sum') or a custom function.
+         * @default 'sum'
+         */
+        aggregation?: ChartTooltipTotalsBuiltInAggregation | ((args: ChartTooltipTotalsAggregationArgs) => ChartTooltipTotalsAggregationValue);
+        /**
+         * Enables/disables the display of totals
+         * @default false
+         */
+        enabled?: boolean;
+        /** The label text for the totals. For built-in aggregations, the label can be omitted. */
+        label?: string;
+    };
 }

package/dist/esm/validation/index.js

@@ -1,9 +1,35 @@
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
-import { DEFAULT_AXIS_TYPE, SeriesType } from '../constants';
+import { AXIS_TYPE, DEFAULT_AXIS_TYPE, SeriesType, TOOLTIP_TOTALS_BUILT_IN_AGGREGATION, } from '../constants';
 import { i18n } from '../i18n';
 import { CHART_ERROR_CODE, ChartError } from '../libs';
+function getTypeOf(value) {
+    return typeof value;
+}
 const AVAILABLE_SERIES_TYPES = Object.values(SeriesType);
+const AVAILABLE_TOOLTIP_TOTALS_BUILT_IN_AGGREGATIONS = Object.values(TOOLTIP_TOTALS_BUILT_IN_AGGREGATION);
+const AVAILABLE_TOOLTIP_TOTALS_AGGREGATION_TYPES = ['function', 'string'];
+const AVAILABLE_AXIS_TYPES = Object.values(AXIS_TYPE);
+function validateAxisType({ axis, key }) {
+    if (axis.type && !AVAILABLE_AXIS_TYPES.includes(axis.type)) {
+        throw new ChartError({
+            code: CHART_ERROR_CODE.INVALID_DATA,
+            message: i18n('error', 'label_invalid-axis-type', {
+                key,
+                values: AVAILABLE_AXIS_TYPES,
+            }),
+        });
+    }
+}
+function validateAxes(args) {
+    const { xAxis, yAxis = [] } = args;
+    if (xAxis) {
+        validateAxisType({ axis: xAxis, key: 'x' });
+    }
+    yAxis.forEach((axis) => {
+        validateAxisType({ axis, key: 'y' });
+    });
+}
 function validateXYSeries(args) {
     const { series, xAxis, yAxis = [] } = args;
     const yAxisIndex = get(series, 'yAxis', 0);
@@ -335,6 +361,32 @@ function countSeriesByType(args) {
     });
     return count;
 }
+function validateTooltip({ tooltip }) {
+    if (!tooltip) {
+        return;
+    }
+    if (tooltip.totals) {
+        const aggregation = tooltip.totals.aggregation;
+        if (aggregation) {
+            const aggregationType = getTypeOf(aggregation);
+            if (!AVAILABLE_TOOLTIP_TOTALS_AGGREGATION_TYPES.includes(aggregationType)) {
+                throw new ChartError({
+                    code: CHART_ERROR_CODE.INVALID_DATA,
+                    message: i18n('error', 'label_invalid-tooltip-totals-aggregation-type'),
+                });
+            }
+            if (typeof aggregation === 'string' &&
+                !AVAILABLE_TOOLTIP_TOTALS_BUILT_IN_AGGREGATIONS.includes(aggregation)) {
+                throw new ChartError({
+                    code: CHART_ERROR_CODE.INVALID_DATA,
+                    message: i18n('error', 'label_invalid-tooltip-totals-aggregation-type-str', {
+                        values: AVAILABLE_TOOLTIP_TOTALS_BUILT_IN_AGGREGATIONS,
+                    }),
+                });
+            }
+        }
+    }
+}
 export function validateData(data) {
     if (isEmpty(data) || isEmpty(data.series) || isEmpty(data.series.data)) {
         throw new ChartError({
@@ -342,6 +394,8 @@ export function validateData(data) {
             message: i18n('error', 'label_no-data'),
         });
     }
+    validateAxes({ xAxis: data.xAxis, yAxis: data.yAxis });
+    validateTooltip({ tooltip: data.tooltip });
     if (data.series.data.some((s) => isEmpty(s.data))) {
         throw new ChartError({
             code: CHART_ERROR_CODE.INVALID_DATA,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/charts",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",

package/dist/cjs/components/Tooltip/DefaultContent.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
-type Props = {
-    hovered: TooltipDataChunk[];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
-    valueFormat?: ValueFormat;
-};
-export declare const DefaultContent: ({ hovered, xAxis, yAxis, valueFormat }: Props) => React.JSX.Element;
-export {};

package/dist/cjs/components/Tooltip/DefaultContent.js

@@ -1,187 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { block, getDataCategoryValue } from '../../utils';
-import { getFormattedValue } from '../../utils/chart/format';
-const b = block('tooltip');
-const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-const getRowData = (fieldName, data, axis) => {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'category': {
-            const categories = get(axis, 'categories', []);
-            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
-        }
-        default: {
-            return get(data, fieldName);
-        }
-    }
-};
-const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
-const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
-const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
-    var _a, _b, _c, _d;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
-        return null;
-    }
-    if (data.some((item) => item.series.type === 'radar')) {
-        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
-    }
-    if (data.some((item) => item.series.type === 'bar-y')) {
-        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-        return getFormattedValue({
-            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
-            format,
-        });
-    }
-    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-    return getFormattedValue({
-        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
-        format,
-    });
-};
-function getDefaultValueFormat({ axis, }) {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'linear':
-        case 'logarithmic': {
-            return {
-                type: 'number',
-            };
-        }
-        case 'datetime': {
-            return {
-                type: 'date',
-                format: DEFAULT_DATE_FORMAT,
-            };
-        }
-        default:
-            return undefined;
-    }
-}
-export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
-    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
-    return (React.createElement("div", { className: b('content') },
-        measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
-        // eslint-disable-next-line complexity
-        hovered.map((seriesItem, i) => {
-            var _a, _b;
-            const { data, series, closest } = seriesItem;
-            const id = `${get(series, 'id')}_${i}`;
-            const color = get(series, 'color');
-            switch (series.type) {
-                case 'scatter':
-                case 'line':
-                case 'area':
-                case 'bar-x': {
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-                    const formattedValue = getFormattedValue({
-                        value: getYRowData(data, yAxis),
-                        format,
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        formattedValue));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                case 'waterfall': {
-                    const isTotal = get(data, 'total', false);
-                    const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-                    const subTotal = getFormattedValue({
-                        value: subTotalValue,
-                        format,
-                    });
-                    const formattedValue = getFormattedValue({
-                        value: getYRowData(data, yAxis),
-                        format,
-                    });
-                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
-                        !isTotal && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { key: id, className: b('content-row') },
-                                React.createElement("b", null, getXRowData(data, xAxis))),
-                            React.createElement("div", { className: b('content-row') },
-                                React.createElement("span", null,
-                                    series.name,
-                                    "\u00A0"),
-                                React.createElement("span", null, formattedValue)))),
-                        React.createElement("div", { key: id, className: b('content-row') },
-                            isTotal ? 'Total' : 'Subtotal',
-                            ": ",
-                            subTotal)));
-                }
-                case 'bar-y': {
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-                    const formattedValue = getFormattedValue({
-                        value: getXRowData(data, xAxis),
-                        format,
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        formattedValue));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                case 'pie':
-                case 'treemap': {
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: seriesData.value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: [seriesData.name || seriesData.id]
-                                    .flat()
-                                    .join('\n'),
-                            } }),
-                        "\u00A0",
-                        React.createElement("span", null, formattedValue)));
-                }
-                case 'sankey': {
-                    const { target, data: source } = seriesItem;
-                    const value = (_b = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _b === void 0 ? void 0 : _b.value;
-                    const formattedValue = getFormattedValue({
-                        value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
-                        React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
-                            source.name,
-                            " ",
-                            React.createElement("span", null, "\u2192"),
-                            " ", target === null || target === void 0 ? void 0 :
-                            target.name,
-                            ":",
-                            ' ',
-                            formattedValue)));
-                }
-                case 'radar': {
-                    const radarSeries = series;
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: seriesData.value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        React.createElement("span", null,
-                            radarSeries.name || radarSeries.id,
-                            "\u00A0"),
-                        React.createElement("span", null, formattedValue)));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                default: {
-                    return null;
-                }
-            }
-        })));
-};

package/dist/esm/components/Tooltip/DefaultContent.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ChartXAxis, ChartYAxis, TooltipDataChunk, ValueFormat } from '../../types';
-type Props = {
-    hovered: TooltipDataChunk[];
-    xAxis?: ChartXAxis | null;
-    yAxis?: ChartYAxis;
-    valueFormat?: ValueFormat;
-};
-export declare const DefaultContent: ({ hovered, xAxis, yAxis, valueFormat }: Props) => React.JSX.Element;
-export {};

package/dist/esm/components/Tooltip/DefaultContent.js

@@ -1,187 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { block, getDataCategoryValue } from '../../utils';
-import { getFormattedValue } from '../../utils/chart/format';
-const b = block('tooltip');
-const DEFAULT_DATE_FORMAT = 'DD.MM.YY';
-const getRowData = (fieldName, data, axis) => {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'category': {
-            const categories = get(axis, 'categories', []);
-            return getDataCategoryValue({ axisDirection: fieldName, categories, data });
-        }
-        default: {
-            return get(data, fieldName);
-        }
-    }
-};
-const getXRowData = (data, xAxis) => getRowData('x', data, xAxis);
-const getYRowData = (data, yAxis) => getRowData('y', data, yAxis);
-const getMeasureValue = ({ data, xAxis, yAxis, valueFormat, }) => {
-    var _a, _b, _c, _d;
-    if (data.every((item) => ['pie', 'treemap', 'waterfall', 'sankey'].includes(item.series.type))) {
-        return null;
-    }
-    if (data.some((item) => item.series.type === 'radar')) {
-        return (_b = (_a = data[0].category) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
-    }
-    if (data.some((item) => item.series.type === 'bar-y')) {
-        const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-        return getFormattedValue({
-            value: getYRowData((_c = data[0]) === null || _c === void 0 ? void 0 : _c.data, yAxis),
-            format,
-        });
-    }
-    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-    return getFormattedValue({
-        value: getXRowData((_d = data[0]) === null || _d === void 0 ? void 0 : _d.data, xAxis),
-        format,
-    });
-};
-function getDefaultValueFormat({ axis, }) {
-    switch (axis === null || axis === void 0 ? void 0 : axis.type) {
-        case 'linear':
-        case 'logarithmic': {
-            return {
-                type: 'number',
-            };
-        }
-        case 'datetime': {
-            return {
-                type: 'date',
-                format: DEFAULT_DATE_FORMAT,
-            };
-        }
-        default:
-            return undefined;
-    }
-}
-export const DefaultContent = ({ hovered, xAxis, yAxis, valueFormat }) => {
-    const measureValue = getMeasureValue({ data: hovered, xAxis, yAxis });
-    return (React.createElement("div", { className: b('content') },
-        measureValue && React.createElement("div", { className: b('series-name') }, measureValue),
-        // eslint-disable-next-line complexity
-        hovered.map((seriesItem, i) => {
-            var _a, _b;
-            const { data, series, closest } = seriesItem;
-            const id = `${get(series, 'id')}_${i}`;
-            const color = get(series, 'color');
-            switch (series.type) {
-                case 'scatter':
-                case 'line':
-                case 'area':
-                case 'bar-x': {
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-                    const formattedValue = getFormattedValue({
-                        value: getYRowData(data, yAxis),
-                        format,
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        formattedValue));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                case 'waterfall': {
-                    const isTotal = get(data, 'total', false);
-                    const subTotalValue = (_a = seriesItem.subTotal) !== null && _a !== void 0 ? _a : 0;
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: yAxis });
-                    const subTotal = getFormattedValue({
-                        value: subTotalValue,
-                        format,
-                    });
-                    const formattedValue = getFormattedValue({
-                        value: getYRowData(data, yAxis),
-                        format,
-                    });
-                    return (React.createElement("div", { key: `${id}_${get(data, 'x')}` },
-                        !isTotal && (React.createElement(React.Fragment, null,
-                            React.createElement("div", { key: id, className: b('content-row') },
-                                React.createElement("b", null, getXRowData(data, xAxis))),
-                            React.createElement("div", { className: b('content-row') },
-                                React.createElement("span", null,
-                                    series.name,
-                                    "\u00A0"),
-                                React.createElement("span", null, formattedValue)))),
-                        React.createElement("div", { key: id, className: b('content-row') },
-                            isTotal ? 'Total' : 'Subtotal',
-                            ": ",
-                            subTotal)));
-                }
-                case 'bar-y': {
-                    const format = valueFormat !== null && valueFormat !== void 0 ? valueFormat : getDefaultValueFormat({ axis: xAxis });
-                    const formattedValue = getFormattedValue({
-                        value: getXRowData(data, xAxis),
-                        format,
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        series.name,
-                        ": ",
-                        formattedValue));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                case 'pie':
-                case 'treemap': {
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: seriesData.value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: [seriesData.name || seriesData.id]
-                                    .flat()
-                                    .join('\n'),
-                            } }),
-                        "\u00A0",
-                        React.createElement("span", null, formattedValue)));
-                }
-                case 'sankey': {
-                    const { target, data: source } = seriesItem;
-                    const value = (_b = source.links.find((d) => d.name === (target === null || target === void 0 ? void 0 : target.name))) === null || _b === void 0 ? void 0 : _b.value;
-                    const formattedValue = getFormattedValue({
-                        value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    return (React.createElement("div", { key: id, className: b('content-row') },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: source.color } }),
-                        React.createElement("div", { style: { display: 'flex', gap: 8, verticalAlign: 'center' } },
-                            source.name,
-                            " ",
-                            React.createElement("span", null, "\u2192"),
-                            " ", target === null || target === void 0 ? void 0 :
-                            target.name,
-                            ":",
-                            ' ',
-                            formattedValue)));
-                }
-                case 'radar': {
-                    const radarSeries = series;
-                    const seriesData = data;
-                    const formattedValue = getFormattedValue({
-                        value: seriesData.value,
-                        format: valueFormat !== null && valueFormat !== void 0 ? valueFormat : { type: 'number' },
-                    });
-                    const value = (React.createElement(React.Fragment, null,
-                        React.createElement("span", null,
-                            radarSeries.name || radarSeries.id,
-                            "\u00A0"),
-                        React.createElement("span", null, formattedValue)));
-                    const active = closest && hovered.length > 1;
-                    return (React.createElement("div", { key: id, className: b('content-row', { active }) },
-                        React.createElement("div", { className: b('color'), style: { backgroundColor: color } }),
-                        React.createElement("div", null, value)));
-                }
-                default: {
-                    return null;
-                }
-            }
-        })));
-};