@gravity-ui/charts 1.15.0 → 1.16.0

package/dist/esm/hooks/useSeries/prepare-bar-y.js

@@ -52,6 +52,7 @@ export function prepareBarYSeries(args) {
             borderRadius: (_c = (_a = series.borderRadius) !== null && _a !== void 0 ? _a : (_b = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : 0,
             borderWidth: (_f = (_d = series.borderWidth) !== null && _d !== void 0 ? _d : (_e = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _e === void 0 ? void 0 : _e.borderWidth) !== null && _f !== void 0 ? _f : 0,
             borderColor: (_j = (_g = series.borderColor) !== null && _g !== void 0 ? _g : (_h = seriesOptions === null || seriesOptions === void 0 ? void 0 : seriesOptions['bar-y']) === null || _h === void 0 ? void 0 : _h.borderColor) !== null && _j !== void 0 ? _j : 'var(--gcharts-shape-border-color)',
+            tooltip: series.tooltip,
         };
     }));
 }

package/dist/esm/hooks/useSeries/prepare-line.js

@@ -77,6 +77,7 @@ export function prepareLineSeries(args) {
             opacity: get(series, 'opacity', null),
             cursor: get(series, 'cursor', null),
             yAxis: get(series, 'yAxis', 0),
+            tooltip: series.tooltip,
         };
         return prepared;
     }, []);

package/dist/esm/hooks/useSeries/prepare-pie.js

@@ -57,6 +57,7 @@ export function preparePieSeries(args) {
             renderCustomShape: series.renderCustomShape,
             opacity: get(dataItem, 'opacity', null),
             cursor: get(series, 'cursor', null),
+            tooltip: series.tooltip,
         };
         return result;
     });

package/dist/esm/hooks/useSeries/prepare-radar.js

@@ -58,6 +58,7 @@ export function prepareRadarSeries(args) {
             },
             cursor: get(series, 'cursor', null),
             marker: prepareMarker(series, seriesOptions),
+            tooltip: series.tooltip,
         };
         return preparedSeries;
     });

package/dist/esm/hooks/useSeries/prepare-sankey.js

@@ -33,6 +33,7 @@ export function prepareSankeySeries(args) {
                 symbol: prepareLegendSymbol(s),
             },
             cursor: get(s, 'cursor', null),
+            tooltip: s.tooltip,
         };
         return preparedSeries;
     });

package/dist/esm/hooks/useSeries/prepare-scatter.js

@@ -40,6 +40,7 @@ export function prepareScatterSeries(args) {
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
             yAxis: get(s, 'yAxis', 0),
+            tooltip: s.tooltip,
         };
         return prepared;
     }, []);

package/dist/esm/hooks/useSeries/prepare-treemap.js

@@ -34,6 +34,7 @@ export function prepareTreemap(args) {
             layoutAlgorithm: get(s, 'layoutAlgorithm', LayoutAlgorithm.Binary),
             cursor: get(s, 'cursor', null),
             sorting: Object.assign({ enabled: false, direction: 'desc' }, s.sorting),
+            tooltip: s.tooltip,
         };
         return preparedSeries;
     });

package/dist/esm/hooks/useSeries/prepare-waterfall.js

@@ -28,6 +28,7 @@ export function prepareWaterfallSeries(args) {
         },
         cursor: get(series, 'cursor', null),
         data: [],
+        tooltip: series.tooltip,
     };
     const positive = Object.assign(Object.assign({}, common), { name: (_g = (_f = (_e = series.legend) === null || _e === void 0 ? void 0 : _e.itemText) === null || _f === void 0 ? void 0 : _f.positive) !== null && _g !== void 0 ? _g : `${series.name} ↑`, id: getUniqId(), color: series.positiveColor || positiveColor, data: [] });
     const negative = Object.assign(Object.assign({}, common), { name: (_k = (_j = (_h = series.legend) === null || _h === void 0 ? void 0 : _h.itemText) === null || _j === void 0 ? void 0 : _j.negative) !== null && _k !== void 0 ? _k : `${series.name} ↓`, id: getUniqId(), color: series.negativeColor || negativeColor, data: [] });

package/dist/esm/hooks/useSeries/types.d.ts

@@ -1,5 +1,5 @@
 import type { DashStyle, LayoutAlgorithm, LineCap, SeriesOptionsDefaults, SymbolType } from '../../constants';
-import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
+import type { AreaSeries, AreaSeriesData, BarXSeries, BarXSeriesData, BarYSeries, BarYSeriesData, BaseTextStyle, ChartLegend, ChartSeries, ConnectorCurve, ConnectorShape, LineSeries, LineSeriesData, PathLegendSymbolOptions, PieSeries, PieSeriesData, RadarSeries, RadarSeriesCategory, RadarSeriesData, RectLegendSymbolOptions, SankeySeries, SankeySeriesData, ScatterSeries, ScatterSeriesData, SymbolLegendSymbolOptions, TreemapSeries, TreemapSeriesData, ValueFormat, WaterfallSeries, WaterfallSeriesData } from '../../types';
 export type RectLegendSymbol = {
     shape: 'rect';
 } & Required<RectLegendSymbolOptions>;
@@ -76,6 +76,7 @@ type BasePreparedSeries = {
         symbol: PreparedLegendSymbol;
     };
     cursor: string | null;
+    tooltip: ChartSeries['tooltip'];
 };
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];

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';
@@ -110,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?: {
         /**
@@ -125,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'][];
@@ -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 = [
@@ -177,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.15.0",
+  "version": "1.16.0",
   "description": "React component used to render charts",
   "license": "MIT",
   "main": "dist/cjs/index.js",