@gravity-ui/chartkit 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.2.0](https://github.com/gravity-ui/chartkit/compare/v2.1.0...v2.2.0) (2023-03-21)
+
+
+### Features
+
+* **Higcharts plugin:** add type for manageTooltipConfig ([#139](https://github.com/gravity-ui/chartkit/issues/139)) ([f781cca](https://github.com/gravity-ui/chartkit/commit/f781cca112bb1e87607d24916aa38bf44fe2abf6))
+
+
+### Bug Fixes
+
+* **Highcharts:** fix resetZoomButton styles ([#137](https://github.com/gravity-ui/chartkit/issues/137)) ([07f610e](https://github.com/gravity-ui/chartkit/commit/07f610e443f2c9a2543ac68bbff443112a1d650a))
+
 ## [2.1.0](https://github.com/gravity-ui/chartkit/compare/v2.0.0...v2.1.0) (2023-03-13)
 
 

package/build/plugins/highcharts/mocks/line.js

@@ -89,6 +89,12 @@ export const data = {
         hideHolidays: false,
         normalizeDiv: false,
         normalizeSub: false,
+        manageTooltipConfig: (config) => {
+            config.lines.forEach((line, index) => {
+                line.commentText = `Some comment ${index + 1}`;
+            });
+            return config;
+        },
     },
     libraryConfig: {
         chart: {

package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts

@@ -487,6 +487,9 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                 labels: {
                     formatter: () => any;
                 };
+                events: {
+                    setExtremes: () => void;
+                };
             };
             yAxis: {
                 gridLineColor: string;

package/build/plugins/highcharts/renderer/helpers/config/config.d.ts

@@ -565,6 +565,9 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
         labels: {
             formatter: () => any;
         };
+        events: {
+            setExtremes: () => void;
+        };
     };
     yAxis: {
         crosshair: boolean | {

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

@@ -924,7 +924,7 @@ function fixTooltip(tooltip, options, event) {
             top = tooltipRect.top;
             tooltip.preFixationHeight = height;
         }
-        tooltip.lastVisibleRowIndex = null;
+        tooltip.lastVisibleRowIndex = undefined;
         tooltip.update({
             style: Object.assign(Object.assign({}, tooltip.style), { pointerEvents: 'auto' }),
         });
@@ -1324,6 +1324,20 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     return Highcharts.Axis.prototype.defaultLabelFormatter.call(this);
                 },
             },
+            events: {
+                setExtremes: function () {
+                    // There is no better way to align zoom button text
+                    // Callback setExtremes used because of it obligatory invocation on every zoom event
+                    // setTimeout used because of absence resetZoomButton node in dom on first zoom event
+                    setTimeout(() => {
+                        var _a;
+                        const text = (_a = this.chart.resetZoomButton) === null || _a === void 0 ? void 0 : _a.text;
+                        if (text) {
+                            text.translate(0, -6);
+                        }
+                    }, 0);
+                },
+            },
         }, yAxis: {
             crosshair: options.splitTooltip
                 ? getCrosshairConfig(hasScatterSeries ? 'scatter' : chartType, true)

package/build/plugins/highcharts/renderer/helpers/graph.d.ts

@@ -481,6 +481,9 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
             labels: {
                 formatter: () => any;
             };
+            events: {
+                setExtremes: () => void;
+            };
         };
         yAxis: {
             gridLineColor: string;

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

@@ -31,11 +31,15 @@ Highcharts.setOptions({
         resetZoomButton: {
             relativeTo: 'chart',
             theme: {
-                width: 16,
-                height: 16,
+                r: 6,
+                width: 12,
+                height: 12,
                 'text-align': 'center',
                 opacity: '0.8',
                 cursor: 'pointer',
+                style: {
+                    fontSize: '20px',
+                },
             },
             position: {
                 y: 30,
@@ -223,7 +227,7 @@ function initHighcharts({ isMobile }) {
     });
     Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function (proceed, ...rest) {
         if (this.lastVisibleRowIndex) {
-            this.lastVisibleRowIndex = null;
+            this.lastVisibleRowIndex = undefined;
         }
         if (this.scrollHandler && !this.fixed) {
             window.removeEventListener('scroll', this.scrollHandler);
@@ -257,7 +261,7 @@ function initHighcharts({ isMobile }) {
         const isFixation = rest[1];
         if ((!this.fixed || isFixation) && points) {
             if (isFixation) {
-                this.lastVisibleRowIndex = null;
+                this.lastVisibleRowIndex = undefined;
             }
             proceed.apply(this, [points, ...rest]);
             if (chartType === 'timeline') {
@@ -292,7 +296,7 @@ function initHighcharts({ isMobile }) {
                 const bottomPadding = parseFloat(window.getComputedStyle(tooltipNode, null).getPropertyValue('padding-bottom'), 10);
                 const containerBottomEdge = top + height;
                 const rows = tooltipNode.querySelectorAll(`.${TOOLTIP_LIST_CLASS_NAME} .${TOOLTIP_ROW_CLASS_NAME}`);
-                let lastVisibleRowIndex = null;
+                let lastVisibleRowIndex;
                 const selectedSeriesIndex = this.chart.hoverPoints.indexOf(this.chart.hoverPoint);
                 const rowForSelectedSeriesHeight = selectedSeriesIndex >= 0
                     ? rows[selectedSeriesIndex].getBoundingClientRect().height

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

@@ -160,7 +160,8 @@ export const formatTooltip = (data, tooltip, isMobile) => {
         cellsRenderers,
         useCompareFrom: data.useCompareFrom,
         isSelectedLine: true,
-        allowComment: selectedLineIndex > tooltip.lastVisibleRowIndex,
+        allowComment: typeof tooltip.lastVisibleRowIndex === 'number' &&
+            selectedLineIndex > tooltip.lastVisibleRowIndex,
     };
     // @ts-ignore
     const windowHeight = document.body.clientHeight / ((window.visualViewport && window.visualViewport.scale) || 1);

package/build/plugins/highcharts/types/widget.d.ts

@@ -1,11 +1,32 @@
 import type { Highcharts } from './lib';
 import type { HighchartsComment } from './comments';
 import type { DrillDownConfig, StringParams } from './misc';
+import type { TooltipData, TooltipLine } from '../renderer/helpers/tooltip/types';
 export declare type CkHighchartsSeriesOptionsType = Highcharts.SeriesOptionsType & {
     title?: string;
     sname?: string;
     fname?: string;
 };
+export declare type HighchartsManageTooltipConfigOptions = {
+    count: number;
+    lines: TooltipLine[];
+    shared: boolean;
+    this: {
+        x: string;
+        y: number;
+        points: Highcharts.Point[];
+    };
+    activeRowAlwaysFirstInTooltip?: boolean;
+    hiddenRowsNumber?: number;
+    hiddenRowsSum?: string;
+    splitTooltip?: boolean;
+    tooltipHeader?: string;
+    unsafe?: boolean;
+    useCompareFrom?: boolean;
+    withPercent?: boolean;
+    xComments?: TooltipData['xComments'];
+};
+export declare type HighchartsManageTooltipConfig = (options: HighchartsManageTooltipConfigOptions, chart: Highcharts.Chart) => HighchartsManageTooltipConfigOptions;
 export declare type HighchartsWidgetData = {
     data: (CkHighchartsSeriesOptionsType[] | {
         graphs: CkHighchartsSeriesOptionsType[];
@@ -58,6 +79,10 @@ export declare type HighchartsWidgetData = {
         drillDown?: DrillDownConfig;
         enableSum?: boolean;
         unsafe?: boolean;
+        /**
+         * Used to modify tooltip data
+         */
+        manageTooltipConfig?: HighchartsManageTooltipConfig;
     };
     libraryConfig: Highcharts.Options;
     params?: StringParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",