@gravity-ui/charts 1.14.0 → 1.16.0

package/dist/esm/hooks/utils/bar-x.d.ts

@@ -0,0 +1,16 @@
+import type { BarXSeries, BarXSeriesData } from '../../types';
+import type { PreparedAxis } from '../useChartOptions/types';
+import type { PreparedBarXSeries, PreparedSeriesOptions } from '../useSeries/types';
+export declare function groupBarXDataByXValue<T extends BarXSeries | PreparedBarXSeries>(series: T[], xAxis: PreparedAxis): Record<string | number, Record<string, {
+    data: BarXSeriesData;
+    series: T;
+}[]>>;
+export declare function getBarXLayoutForNumericScale(args: {
+    plotWidth: number;
+    seriesOptions: PreparedSeriesOptions;
+    groupedData: ReturnType<typeof groupBarXDataByXValue>;
+}): {
+    bandSize: number;
+    barGap: number;
+    barSize: number;
+};

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

@@ -0,0 +1,41 @@
+import get from 'lodash/get';
+import { getDataCategoryValue } from '../../utils';
+import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../constants';
+import { getSeriesStackId } from '../useSeries/utils';
+export function groupBarXDataByXValue(series, xAxis) {
+    const data = {};
+    series.forEach((s) => {
+        s.data.forEach((d) => {
+            var _a;
+            const categories = (_a = xAxis.categories) !== null && _a !== void 0 ? _a : [];
+            const key = xAxis.type === 'category'
+                ? getDataCategoryValue({ axisDirection: 'x', categories, data: d })
+                : d.x;
+            if (key) {
+                if (!data[key]) {
+                    data[key] = {};
+                }
+                const stackId = getSeriesStackId(s);
+                if (!data[key][stackId]) {
+                    data[key][stackId] = [];
+                }
+                data[key][stackId].push({ data: d, series: s });
+            }
+        });
+    });
+    return data;
+}
+export function getBarXLayoutForNumericScale(args) {
+    const { plotWidth, groupedData, seriesOptions } = args;
+    const barMaxWidth = get(seriesOptions, 'bar-x.barMaxWidth');
+    const barPadding = get(seriesOptions, 'bar-x.barPadding');
+    const groupPadding = get(seriesOptions, 'bar-x.groupPadding');
+    const groups = Object.values(groupedData);
+    const maxGroupItemCount = groups.reduce((acc, items) => Math.max(acc, Object.keys(items).length), 0);
+    const bandSize = plotWidth / groups.length;
+    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) / maxGroupItemCount, barMaxWidth));
+    return { bandSize, barGap, barSize };
+}

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

@@ -21,6 +21,7 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "It seems you are trying to use \"labels.html\" property for an axis with an unsupported type. This property is supported only for \"category\" axis."
   },
   "tooltip": {
-    "label_totals_sum": "Sum"
+    "label_totals_sum": "Sum",
+    "label_more": "{{count}} more"
   }
 }

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

@@ -21,6 +21,7 @@
     "label_invalid-axis-labels-html-not-supported-axis-type": "Похоже, что вы пытаетесь использовать свойство \"labels.html\" для оси с неподдерживаемым типом. Это свойство поддерживается только для оси типа \"category\"."
   },
   "tooltip": {
-    "label_totals_sum": "Сумма"
+    "label_totals_sum": "Сумма",
+    "label_more": "Еще {{count}}"
   }
 }

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

@@ -7,6 +7,12 @@ type DateFormat = {
     type: 'date';
     format?: string;
 };
+export type CustomFormat = {
+    type: 'custom';
+    formatter: (args: {
+        value: unknown;
+    }) => string;
+};
 export type ValueFormat = NumberFormat | DateFormat;
 export interface BaseSeries {
     /** Initial visibility of the series */
@@ -41,6 +47,13 @@ export interface BaseSeries {
     };
     /** You can set the cursor to "pointer" if you have click events attached to the series, to signal to the user that the points and lines can be clicked. */
     cursor?: string;
+    /**
+     * Options for the tooltip that appears when the user hovers over a series or point.
+     */
+    tooltip?: {
+        /** Formatting settings for tooltip value. */
+        valueFormat?: ValueFormat;
+    };
 }
 export interface BaseSeriesData<T = MeaningfulAny> {
     /**

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

@@ -4,7 +4,7 @@ import type { AreaSeries, AreaSeriesData } from './area';
 import type { ChartXAxis, ChartYAxis } from './axis';
 import type { BarXSeries, BarXSeriesData } from './bar-x';
 import type { BarYSeries, BarYSeriesData } from './bar-y';
-import type { ValueFormat } from './base';
+import type { CustomFormat, ValueFormat } from './base';
 import type { LineSeries, LineSeriesData } from './line';
 import type { PieSeries, PieSeriesData } from './pie';
 import type { RadarSeries, RadarSeriesCategory, RadarSeriesData } from './radar';
@@ -84,10 +84,24 @@ export interface ChartTooltipTotalsAggregationArgs<T = MeaningfulAny> extends Ch
 }
 export type ChartTooltipTotalsBuiltInAggregation = (typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION)[keyof typeof TOOLTIP_TOTALS_BUILT_IN_AGGREGATION];
 export type ChartTooltipTotalsAggregationValue = number | string | undefined;
+export type ChartTooltipRowRendererArgs = {
+    id: string;
+    name: string;
+    active?: boolean;
+    color?: string;
+    striped?: boolean;
+    value: string | number | null | undefined;
+    formattedValue?: string;
+    hovered?: TooltipDataChunk<unknown>[];
+    className?: string;
+};
 export interface ChartTooltip<T = MeaningfulAny> {
     enabled?: boolean;
     /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
     renderer?: (args: ChartTooltipRendererArgs<T>) => React.ReactElement | null;
+    /** Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart).
+     * It is useful in cases where you need to display additional information, but keep the general format of the tooltip. */
+    rowRenderer?: (args: ChartTooltipRowRendererArgs) => React.ReactElement | null;
     pin?: {
         enabled?: boolean;
         modifierKey?: 'altKey' | 'metaKey';
@@ -96,6 +110,8 @@ export interface ChartTooltip<T = MeaningfulAny> {
     throttle?: number;
     /** Formatting settings for tooltip value. */
     valueFormat?: ValueFormat;
+    /** Formatting settings for tooltip header row. */
+    headerFormat?: ValueFormat | CustomFormat;
     /** Settings for totals block in tooltip */
     totals?: {
         /**
@@ -111,5 +127,7 @@ export interface ChartTooltip<T = MeaningfulAny> {
         enabled?: boolean;
         /** The label text for the totals. For built-in aggregations, the label can be omitted. */
         label?: string;
+        /** Formatting settings for totals tooltip value. */
+        valueFormat?: ValueFormat;
     };
 }

package/dist/esm/utils/chart/format.d.ts

@@ -1,5 +1,12 @@
-import type { ValueFormat } from '../../types';
+import type { AxisDomain } from 'd3';
+import type { PreparedAxis } from '../../hooks';
+import type { CustomFormat, ValueFormat } from '../../types';
 export declare function getFormattedValue(args: {
     value: string | number | undefined | null;
-    format?: ValueFormat;
+    format?: ValueFormat | CustomFormat;
+}): string;
+export declare function formatAxisTickLabel(args: {
+    axis: PreparedAxis;
+    value: AxisDomain;
+    step?: number;
 }): string;

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

@@ -1,17 +1,51 @@
 import { dateTime } from '@gravity-ui/date-utils';
-import { formatNumber } from '../../libs';
+import capitalize from 'lodash/capitalize';
+import { formatNumber, getDefaultUnit } from '../../libs';
+import { getDefaultDateFormat } from './time';
+const LETTER_MOUNTH_AT_START_FORMAT_REGEXP = /^M{3,}/;
+function getFormattedDate(args) {
+    const { value, format = '' } = args;
+    const date = dateTime({ input: value });
+    if (date === null || date === void 0 ? void 0 : date.isValid()) {
+        const formattedDate = date.format(format);
+        if (LETTER_MOUNTH_AT_START_FORMAT_REGEXP.test(format)) {
+            return capitalize(formattedDate);
+        }
+        return formattedDate;
+    }
+    return String(value);
+}
 export function getFormattedValue(args) {
+    var _a;
     const { value, format } = args;
     switch (format === null || format === void 0 ? void 0 : format.type) {
         case 'number': {
             return formatNumber(Number(value), format);
         }
         case 'date': {
-            const date = dateTime({ input: value });
-            if (date === null || date === void 0 ? void 0 : date.isValid()) {
-                return date.format(format.format);
-            }
+            return getFormattedDate({ value, format: format.format });
+        }
+        case 'custom': {
+            return (_a = format.formatter) === null || _a === void 0 ? void 0 : _a.call(format, { value });
         }
     }
     return String(value);
 }
+export function formatAxisTickLabel(args) {
+    const { axis, value, step } = args;
+    switch (axis.type) {
+        case 'category': {
+            return value;
+        }
+        case 'datetime': {
+            const date = value;
+            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
+            return getFormattedDate({ value: date, format });
+        }
+        case 'linear':
+        default: {
+            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
+            return formatNumber(value, numberFormat);
+        }
+    }
+}

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

@@ -2,15 +2,16 @@ import type { AxisDomain } from 'd3';
 import type { PreparedAxis } from '../../hooks';
 import type { BaseTextStyle, ChartSeries, ChartSeriesData } from '../../types';
 import type { AxisDirection } from './types';
-export * from './math';
-export * from './text';
-export * from './time';
 export * from './axis';
+export * from './color';
+export * from './format';
 export * from './labels';
 export * from './legend';
-export * from './symbol';
+export * from './math';
 export * from './series';
-export * from './color';
+export * from './symbol';
+export * from './text';
+export * from './time';
 export * from './zoom';
 export declare const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS: ChartSeries['type'][];
 export declare const CHART_SERIES_WITH_VOLUME_ON_X_AXIS: ChartSeries['type'][];
@@ -43,7 +44,7 @@ export declare function isSeriesWithCategoryValues(series: UnknownSeries): serie
         category: string;
     }[];
 };
-export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => unknown[];
+export declare const getDomainDataXBySeries: (series: UnknownSeries[]) => ({} | undefined)[];
 export declare function getDefaultMaxXAxisValue(series: UnknownSeries[]): 0 | undefined;
 export declare function getDefaultMinXAxisValue(series: UnknownSeries[]): number | undefined;
 export declare function getDefaultMinYAxisValue(series?: UnknownSeries[]): number | undefined;
@@ -56,11 +57,6 @@ export declare const parseTransformStyle: (style: string | null) => {
     x?: number;
     y?: number;
 };
-export declare const formatAxisTickLabel: (args: {
-    axis: PreparedAxis;
-    value: AxisDomain;
-    step?: number;
-}) => string;
 export declare const getHorizontalHtmlTextHeight: (args: {
     text: string;
     style?: Partial<BaseTextStyle>;

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

@@ -1,22 +1,20 @@
-import { dateTime } from '@gravity-ui/date-utils';
 import { group, select } from 'd3';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import sortBy from 'lodash/sortBy';
 import { DEFAULT_AXIS_LABEL_FONT_SIZE } from '../../constants';
 import { getSeriesStackId } from '../../hooks/useSeries/utils';
-import { formatNumber, getDefaultUnit } from '../../libs/format-number';
 import { getWaterfallPointSubtotal } from './series/waterfall';
-import { getDefaultDateFormat } from './time';
-export * from './math';
-export * from './text';
-export * from './time';
 export * from './axis';
+export * from './color';
+export * from './format';
 export * from './labels';
 export * from './legend';
-export * from './symbol';
+export * from './math';
 export * from './series';
-export * from './color';
+export * from './symbol';
+export * from './text';
+export * from './time';
 export * from './zoom';
 const CHARTS_WITHOUT_AXIS = ['pie', 'treemap', 'sankey', 'radar'];
 export const CHART_SERIES_WITH_VOLUME_ON_Y_AXIS = [
@@ -51,7 +49,11 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
         seriesStack.forEach((singleSeries) => {
             const data = new Map();
             singleSeries.data.forEach((point) => {
-                const key = String(point[keyAttr]);
+                const keyValue = point[keyAttr];
+                if (keyValue === null) {
+                    return;
+                }
+                const key = String(keyValue);
                 let value = 0;
                 if (valueAttr in point && typeof point[valueAttr] === 'number') {
                     value = point[valueAttr];
@@ -71,7 +73,7 @@ function getDomainDataForStackedSeries(seriesList, keyAttr = 'x', valueAttr = 'y
 }
 export const getDomainDataXBySeries = (series) => {
     const groupedSeries = group(series, (item) => item.type);
-    return Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
+    const values = Array.from(groupedSeries).reduce((acc, [type, seriesList]) => {
         switch (type) {
             case 'bar-y': {
                 acc.push(...getDomainDataForStackedSeries(seriesList, 'y', 'x'));
@@ -85,6 +87,7 @@ export const getDomainDataXBySeries = (series) => {
         }
         return acc;
     }, []);
+    return Array.from(new Set(values.filter((v) => v !== null)));
 };
 export function getDefaultMaxXAxisValue(series) {
     if (series.some((s) => s.type === 'bar-y')) {
@@ -172,24 +175,6 @@ export const parseTransformStyle = (style) => {
     const y = Number.isNaN(Number(yString)) ? undefined : Number(yString);
     return { x, y };
 };
-export const formatAxisTickLabel = (args) => {
-    const { axis, value, step } = args;
-    switch (axis.type) {
-        case 'category': {
-            return value;
-        }
-        case 'datetime': {
-            const date = value;
-            const format = axis.labels.dateFormat || getDefaultDateFormat(step);
-            return dateTime({ input: date }).format(format);
-        }
-        case 'linear':
-        default: {
-            const numberFormat = Object.assign({ unit: value && step ? getDefaultUnit(step) : undefined }, axis.labels.numberFormat);
-            return formatNumber(value, numberFormat);
-        }
-    }
-};
 export const getHorizontalHtmlTextHeight = (args) => {
     var _a;
     const { text, style } = args;

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

@@ -11,3 +11,4 @@ export declare function isMacintosh(): boolean;
 export declare function measurePerformance(): {
     end(): number;
 };
+export declare function hasVerticalScrollbar(node: HTMLElement | null): boolean;

package/dist/esm/utils/misc.js

@@ -26,3 +26,9 @@ export function measurePerformance() {
         },
     };
 }
+export function hasVerticalScrollbar(node) {
+    if (!node) {
+        return false;
+    }
+    return node.scrollHeight > node.clientHeight;
+}

package/package.json

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