@gravity-ui/chartkit 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.4.2](https://github.com/gravity-ui/chartkit/compare/v1.4.1...v1.4.2) (2022-12-13)
+
+
+### Bug Fixes
+
+* **Highcharts plugin:** fix pie halo on mobile devices ([#97](https://github.com/gravity-ui/chartkit/issues/97)) ([3b4a0b4](https://github.com/gravity-ui/chartkit/commit/3b4a0b46ee6512b8b941ef768c85804b4daf7638))
+
+## [1.4.1](https://github.com/gravity-ui/chartkit/compare/v1.4.0...v1.4.1) (2022-12-12)
+
+
+### Bug Fixes
+
+* fix Hide all and Show all button ([#95](https://github.com/gravity-ui/chartkit/issues/95)) ([4e404e6](https://github.com/gravity-ui/chartkit/commit/4e404e626ad20f455c05ec958b828b7a193b8f9b))
+
 ## [1.4.0](https://github.com/gravity-ui/chartkit/compare/v1.3.0...v1.4.0) (2022-12-09)
 
 

package/build/plugins/highcharts/__stories__/Bar.stories.js

@@ -26,6 +26,6 @@ const Template = (args) => {
     }
     return (React.createElement(ThemeProvider, { theme: args.theme },
         React.createElement("div", { style: { height: '600px', width: '100%' } },
-            React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, onError: () => console.log('onError invoked') }))));
+            React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data }))));
 };
 export const Bar = Template.bind({});

package/build/plugins/highcharts/__stories__/Column.stories.js

@@ -25,6 +25,6 @@ const Template = (args) => {
         return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
     }
     return (React.createElement(ThemeProvider, { theme: args.theme },
-        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, onError: () => console.log('onError invoked') })));
+        React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data })));
 };
 export const Column = Template.bind({});

package/build/plugins/highcharts/__stories__/Line.stories.js

@@ -16,6 +16,6 @@ const Template = () => {
         return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
     }
     return (React.createElement("div", { style: { height: 300, width: '100%' } },
-        React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, hoistConfigError: false, onError: () => console.log('onError invoked') })));
+        React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data, splitTooltip: true })));
 };
 export const Line = Template.bind({});

package/build/plugins/highcharts/__stories__/Pie.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Pie: Story<any>;

package/build/plugins/highcharts/__stories__/Pie.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../libs';
+import { HighchartsPlugin } from '../..';
+import { ChartKit } from '../../../components/ChartKit';
+import { data } from './mocks/pie';
+export default {
+    title: 'Plugins/Highcharts/Pie',
+    component: ChartKit,
+};
+const Template = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef();
+    if (!shown) {
+        settings.set({ plugins: [HighchartsPlugin] });
+        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: { height: 300, width: '100%' } },
+        React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data })));
+};
+export const Pie = Template.bind({});

package/build/plugins/highcharts/__stories__/mocks/pie.d.ts

@@ -0,0 +1,2 @@
+import { HighchartsWidgetData } from '../../types';
+export declare const data: HighchartsWidgetData;

package/build/plugins/highcharts/__stories__/mocks/pie.js

@@ -0,0 +1,37 @@
+export const data = {
+    data: {
+        graphs: [
+            {
+                name: 'Number of requests',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                },
+                dataLabels: {
+                    format: null,
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                    chartKitPrefix: '',
+                    chartKitPostfix: '',
+                    chartKitLabelMode: 'absolute',
+                    chartKitFormat: 'number',
+                    chartKitShowRankDelimiter: true,
+                },
+                data: [
+                    { name: 'Furniture', y: 14344, label: 14344 },
+                    { name: 'Domestic chemistry', y: 14244, label: 14244 },
+                    { name: 'Household goods', y: 14181, label: 14181 },
+                ],
+            },
+        ],
+        categories: ['Furniture', 'Domestic chemistry', 'Household goods'],
+    },
+    config: {
+        showPercentInTooltip: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'pie',
+        },
+    },
+};

package/build/plugins/highcharts/renderer/components/withSplitPane/withSplitPane.js

@@ -1,6 +1,8 @@
+/* eslint callback-return: 0 */
 import React from 'react';
 import block from 'bem-cn-lite';
 import { get, debounce } from 'lodash';
+import { getRandomCKId } from '../../../../../utils';
 import { chartTypesWithoutCrosshair } from '../../helpers/config/config';
 import { StyledSplitPane } from '../StyledSplitPane/StyledSplitPane';
 import './WithSplitPane.css';
@@ -78,6 +80,7 @@ export const withSplitPane = (ComposedComponent) => {
                 paneSplit: window.innerWidth > window.innerHeight
                     ? PaneSplits.VERTICAL
                     : PaneSplits.HORIZONTAL,
+                componentKey: getRandomCKId(),
             };
             this.tooltipContainerRef = React.createRef();
             this.rootRef = React.createRef();
@@ -97,13 +100,11 @@ export const withSplitPane = (ComposedComponent) => {
                 if (this.state.paneSplit === PaneSplits.HORIZONTAL) {
                     this.setInitialPaneSize(callback);
                 }
+                else if (waitForFirstRedraw) {
+                    chart.afterRedrawCallback = callback;
+                }
                 else {
-                    if (waitForFirstRedraw) {
-                        chart.afterRedrawCallback = callback;
-                    }
-                    else {
-                        callback();
-                    }
+                    callback();
                 }
             };
             this.afterCreateCallback = (chart) => {
@@ -123,6 +124,7 @@ export const withSplitPane = (ComposedComponent) => {
                 this.setState({
                     paneSize: paneSize > maxPaneSize ? maxPaneSize : paneSize,
                     maxPaneSize,
+                    componentKey: getRandomCKId(),
                 }, () => {
                     this.reflow();
                     setTimeout(callback, 0);
@@ -192,13 +194,14 @@ export const withSplitPane = (ComposedComponent) => {
                 : this.renderHorizontal()));
         }
         renderHorizontal() {
-            const { paneSize, maxPaneSize } = this.state;
+            const { paneSize, maxPaneSize, componentKey } = this.state;
             const thirdOfViewport = window.innerHeight / 3;
-            return (React.createElement(StyledSplitPane, { split: "horizontal", onChange: this.debouncedHandlePaneChange, minSize: thirdOfViewport, maxSize: maxPaneSize || undefined, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
+            return (React.createElement(StyledSplitPane, { split: "horizontal", onChange: this.debouncedHandlePaneChange, minSize: thirdOfViewport, maxSize: maxPaneSize || undefined, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { key: componentKey, ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
         }
         renderVertical() {
+            const { componentKey } = this.state;
             const paneSize = window.innerWidth * CHART_SECTION_PERCENTAGE;
-            return (React.createElement(StyledSplitPane, { split: "vertical", allowResize: false, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
+            return (React.createElement(StyledSplitPane, { split: "vertical", allowResize: false, size: paneSize, paneOneRender: () => (React.createElement(ComposedComponent, Object.assign({}, this.props, { key: componentKey, ref: this.props.forwardedRef, callback: this.afterCreateCallback }))), paneTwoRender: () => React.createElement("div", { ref: this.tooltipContainerRef }) }));
         }
     }
     return React.forwardRef((props, ref) => {

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

@@ -1 +1 @@
-export type { default as Highcharts } from 'highcharts';
+export * as Highcharts from 'highcharts';

package/build/plugins/highcharts/types/lib.js

@@ -1 +1 @@
-export {};
+export * as Highcharts from 'highcharts';

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

@@ -25,6 +25,11 @@ export declare type HighchartsWidgetData = {
         hideLegend?: boolean;
         /** @deprecated use `hideLegend` instead */
         showLegend?: boolean;
+        /**
+         * Percentage value displayed in tooltip.
+         * Relevant in case of initialized [stacking](https://api.highcharts.com/highcharts/plotOptions.column.stacking) property only.
+         */
+        showPercentInTooltip?: boolean;
         disableExternalComments?: boolean;
         normalizeDiv?: boolean;
         normalizeSub?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -13,7 +13,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@gravity-ui/yagr": "^2.2.1",
+    "@gravity-ui/yagr": "^2.2.2",
     "bem-cn-lite": "^4.1.0",
     "highcharts": "^8.2.2",
     "highcharts-react-official": "^3.0.0",