@gravity-ui/chartkit 5.19.1 → 5.20.0

package/build/plugins/highcharts/renderer/helpers/config/config.js

@@ -13,7 +13,7 @@ import { i18n } from '../../../../../i18n';
 import { block } from '../../../../../utils/cn';
 import { formatNumber } from '../../../../shared';
 import { drawComments, drawOnlyRendererComments, getCommentsOnLine, hideComments, } from '../comments/drawing';
-import formatTooltip, { SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
+import formatTooltip, { SERIES_NAME_DATA_ATTRIBUTE, TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_HEADER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NAME, } from '../tooltip';
 import { handleLegendItemClick } from './handleLegendItemClick';
 import defaultOptions from './options';
 import { addShowInNavigatorToSeries, buildNavigatorFallback, calculatePrecision, checkTooltipPinningAvailability, concatStrings, getFormatOptionsFromLine, getSortedData, isSafari, isTooltipShared, mergeArrayWithObject, numberFormat, setNavigatorDefaultPeriod, } from './utils';
@@ -121,7 +121,7 @@ export function synchronizeTooltipTablesCellsWidth(tooltipContainer, isMobile) {
         cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
     }
     if (isMobile && tooltipOverflowsViewport) {
-        const rowNamesNodes = tooltipContainer.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NANE}`);
+        const rowNamesNodes = tooltipContainer.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NAME}`);
         for (let i = 0; i < rowNamesNodes.length; i++) {
             const node = rowNamesNodes[i];
             node.setAttribute('style', `max-width: ${nodeWithWidesRowsCellsWidth[1]}px`);

package/build/plugins/highcharts/renderer/helpers/highcharts/highcharts.js

@@ -3,7 +3,7 @@ import Highcharts from 'highcharts';
 import get from 'lodash/get';
 import { i18n } from '../../../../../i18n';
 import { getTooltipPositioner, handleScroll, hideFixedTooltip, synchronizeTooltipTablesCellsWidth, } from '../config/config';
-import { TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NANE, } from '../tooltip';
+import { TOOLTIP_CONTAINER_CLASS_NAME, TOOLTIP_FOOTER_CLASS_NAME, TOOLTIP_LIST_CLASS_NAME, TOOLTIP_ROW_CLASS_NAME, TOOLTIP_ROW_NAME_CLASS_NAME, } from '../tooltip';
 import colors from './colors';
 import { calculateClosestPointManually } from './utils';
 function formatQ(timestamp) {
@@ -276,7 +276,7 @@ function initHighcharts({ isMobile }) {
                 synchronizeTooltipTablesCellsWidth(this.container, isMobile);
             }
             if (isFixation) {
-                const rowNames = this.container.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NANE}`);
+                const rowNames = this.container.querySelectorAll(`.${TOOLTIP_ROW_NAME_CLASS_NAME}`);
                 for (let i = 0; i < rowNames.length; i++) {
                     const rowNameNode = rowNames[i];
                     if (rowNameNode.scrollWidth > rowNameNode.clientWidth) {

package/build/plugins/yagr/renderer/tooltip/renderTooltip.js

@@ -7,25 +7,9 @@ const calcOption = (d) => {
         })
         : d;
 };
-const getSeriesColorProperty = (args) => {
-    var _a;
-    const { data, userData, row, rowIndex } = args;
-    const userSeries = userData.graphs[rowIndex];
-    const lineColor = (_a = data.yagr.getSeriesById(row.id)) === null || _a === void 0 ? void 0 : _a.lineColor;
-    let seriesColor = row.color;
-    switch (userSeries === null || userSeries === void 0 ? void 0 : userSeries.legendColorKey) {
-        case 'lineColor': {
-            if (lineColor) {
-                seriesColor = lineColor;
-            }
-            break;
-        }
-        case 'color':
-        default: {
-            seriesColor = row.color;
-        }
-    }
-    return seriesColor;
+const getSeriesColorProperty = ({ data, rowId }) => {
+    const series = data.yagr.getSeriesById(rowId);
+    return data.yagr.getSerieLegendColor(series);
 };
 /*
  * Default tooltip renderer.
@@ -62,7 +46,7 @@ export const getRenderTooltip = (userData) => (data) => {
         activeRowAlwaysFirstInTooltip: rows.length > 1,
         tooltipHeader: dateTime({ input: x / timeMultiplier, timeZone }).format('DD MMMM YYYY HH:mm:ss'),
         shared: true,
-        lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: getSeriesColorProperty({ data, userData, row, rowIndex: i }), selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
+        lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: getSeriesColorProperty({ data, rowId: row.id }), selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
         withPercent: calcOption(opts.percent),
         hiddenRowsNumber: hiddenRowsNumber,
         hiddenRowsSum,

package/build/plugins/yagr/renderer/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import './tooltip.css';
 const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
 const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
 const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
-const TOOLTIP_ROW_NAME_CLASS_NANE = '_tooltip-rows__name-td';
+const TOOLTIP_ROW_NAME_CLASS_NAME = '_tooltip-rows__name-td';
 const TOOLTIP_ROW_CLASS_NAME = '_tooltip-row';
 const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
 const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
@@ -14,7 +14,7 @@ const renderEmptyCell = () => '<td />';
 const renderColorCell = (line) => `<td class="_tooltip-rows__bubble-td">
         <div class="_tooltip-rows__bubble-div" style="background-color:${line.seriesColor};"></div>
     </td>`;
-const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NANE}">
+const renderNameCell = (line) => `<td class="${TOOLTIP_ROW_NAME_CLASS_NAME}">
         ${line.hideSeriesName ? '' : escapeHTML(line.seriesName)}
     </td>`;
 const renderPercentCell = (line) => `<td class="_tooltip-rows__percent-td">

package/build/plugins/yagr/types.d.ts

@@ -1,4 +1,4 @@
-import type { MinimalValidConfig, RawSerieData, SeriesOptions, YagrConfig } from '@gravity-ui/yagr';
+import type { MinimalValidConfig, RawSerieData, YagrConfig } from '@gravity-ui/yagr';
 import type Yagr from '@gravity-ui/yagr';
 import { ChartKitProps } from 'src/types';
 export type { default as Yagr } from '@gravity-ui/yagr';
@@ -10,19 +10,9 @@ export interface CustomTooltipProps {
 export type YagrWidgetProps = ChartKitProps<'yagr'> & {
     id: string;
 };
-export type YagrSeriesData<T = Omit<SeriesOptions, 'type'>> = RawSerieData<T> & {
-    /**
-     * Determines what data value should be used to get a color for tooltip series. Does not work in case of using custom tooltip rendered via `tooltip` property.
-     * - `lineColor` indicates that lineColor property should be used
-     * - `color` indicates that color property should be used
-     *
-     * @default 'color'
-     */
-    legendColorKey?: 'color' | 'lineColor';
-};
 export type YagrWidgetData = {
     data: {
-        graphs: YagrSeriesData[];
+        graphs: RawSerieData[];
         timeline: number[];
         /**
          * Allow to setup timezone for X axis and tooltip's header.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "5.19.1",
+  "version": "5.20.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -50,7 +50,7 @@
     "@gravity-ui/charts": "^0.5.0",
     "@gravity-ui/date-utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.0.0",
-    "@gravity-ui/yagr": "^4.3.4",
+    "@gravity-ui/yagr": "^4.5.0",
     "afterframe": "^1.0.2",
     "lodash": "^4.17.21",
     "tslib": "^2.6.2"