@gravity-ui/chartkit 1.5.2 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.6.1](https://github.com/gravity-ui/chartkit/compare/v1.6.0...v1.6.1) (2023-01-24)
+
+
+### Bug Fixes
+
+* add export type for onChartLoad & onRender ([#117](https://github.com/gravity-ui/chartkit/issues/117)) ([e8b4f58](https://github.com/gravity-ui/chartkit/commit/e8b4f586335581df82f13b3f476afb0316e6e598))
+* add types export ([e8b4f58](https://github.com/gravity-ui/chartkit/commit/e8b4f586335581df82f13b3f476afb0316e6e598))
+
+## [1.6.0](https://github.com/gravity-ui/chartkit/compare/v1.5.2...v1.6.0) (2023-01-23)
+
+
+### Features
+
+* add onRender & onChartLoad calbacks ([#111](https://github.com/gravity-ui/chartkit/issues/111)) ([f23c008](https://github.com/gravity-ui/chartkit/commit/f23c008c5c049c813e6704edb1654c90707d00af))
+
 ## [1.5.2](https://github.com/gravity-ui/chartkit/compare/v1.5.1...v1.5.2) (2022-12-20)
 
 

package/README.md

@@ -1,4 +1,4 @@
-# @gravity-ui/chartkit · [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE) [![npm package](https://img.shields.io/npm/v/@gravity-ui/chartkit)](https://www.npmjs.com/package/@gravity-ui/chartkit)
+# @gravity-ui/chartkit · [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE) [![npm package](https://img.shields.io/npm/v/@gravity-ui/chartkit)](https://www.npmjs.com/package/@gravity-ui/chartkit) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/chartkit/)
 
 React component used to render charts based on any sources you need
 

package/build/components/ChartKit.d.ts

@@ -11,6 +11,8 @@ export declare const ChartKit: <T extends keyof import("../types").ChartKitWidge
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../types").ChartKitOnLoadData<T> | undefined) => void) | undefined;
+    onRender?: ((data: import("../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../types").ChartKitOnChartLoad<T>) => void) | undefined;
     onError?: import("../types").ChartKitOnError | undefined;
 } & { [key in keyof Omit<import("../types").ChartKitWidget[T], "widget" | "data">]: import("../types").ChartKitWidget[T][key]; } & {
     ref?: React.ForwardedRef<ChartKitRef | undefined> | undefined;

package/build/components/ChartKit.js

@@ -10,7 +10,7 @@ import './ChartKit.css';
 const b = block('chartkit');
 const ChartKitComponent = (props) => {
     const widgetRef = React.useRef();
-    const { instanceRef, id: propsId, type, data, onLoad, isMobile } = props, restProps = __rest(props, ["instanceRef", "id", "type", "data", "onLoad", "isMobile"]);
+    const { instanceRef, id: propsId, type, isMobile } = props, restProps = __rest(props, ["instanceRef", "id", "type", "isMobile"]);
     const ckId = React.useMemo(() => getRandomCKId(), []);
     const id = propsId || ckId;
     const lang = settings.get('lang');
@@ -33,7 +33,7 @@ const ChartKitComponent = (props) => {
     }), []);
     return (React.createElement(React.Suspense, { fallback: React.createElement(Loader, null) },
         React.createElement("div", { className: b({ mobile: isMobile }, 'chartkit-theme_common') },
-            React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang, data: data, onLoad: onLoad }, restProps)))));
+            React.createElement(ChartComponent, Object.assign({ ref: widgetRef, id: id, lang: lang }, restProps)))));
 };
 const ChartKitComponentWithErrorBoundary = React.forwardRef(function ChartKitComponentWithErrorBoundary(props, ref) {
     return (React.createElement(ErrorBoundary, { onError: props.onError },

package/build/index.d.ts

@@ -1,5 +1,5 @@
 import { ChartKit } from './components/ChartKit';
 import { settings } from './libs';
-export type { ChartKitLang, ChartKitOnLoadData, ChartKitOnError, ChartKitPlugin, ChartKitProps, ChartKitRef, ChartKitWidgetRef, ChartKitType, ChartKitWidget, } from './types';
+export type { ChartKitLang, ChartKitOnLoadData, ChartKitOnRenderData, ChartKitOnChartLoad, ChartKitOnError, ChartKitPlugin, ChartKitProps, ChartKitRef, ChartKitWidgetRef, ChartKitType, ChartKitWidget, } from './types';
 export { settings };
 export default ChartKit;

package/build/plugins/highcharts/__stories__/complex/TwoAxis.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 TwoAxis: Story<import("@storybook/react").Args>;

package/build/plugins/highcharts/__stories__/complex/TwoAxis.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { ChartStory } from '../components/ChartStory';
+import { data } from '../mocks/complex';
+export default {
+    title: 'Plugins/Highcharts/TwoAxis',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data, height: "500px" });
+};
+export const TwoAxis = Template.bind({});

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

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

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

@@ -0,0 +1,323 @@
+/**
+ * Get the X coordinate of the intersection of the two lines 1-2 and 3-4.
+ * @param x1 {number} X-coordinate of the first point of the first line.
+ * @param y1 {number} Y-coordinate of the first point of the first line.
+ * @param x2 {number} X-coordinate of the second point of the first line.
+ * @param y2 {number} Y-coordinate of the second point of the first line.
+ * @param x3 {number} X-coordinate of the first point of the second line.
+ * @param y3 {number} Y-coordinate of the first point of the second line.
+ * @param x4 {number} X-coordinate of the second point of the second line.
+ * @param y4 {number} Y-coordinate of the second point of the second line.
+ * @returns {number} X-coordinate of the intersection.
+ */
+function getIntersectionX(x1, y1, x2, y2, x3, y3, x4, y4) {
+    return Math.trunc(((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) /
+        ((x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4)));
+}
+/**
+ * Get the colored zones for the area chart.
+ * @param counts {object} Area chart data.
+ * @param createdColor {string} Color (html notation) for the positive zone.
+ * @param resolvedColor {string} Color (html notation) for the negative zone.
+ * @returns {SeriesZonesOptionsObject[]} Highcharts zones for area chart.
+ */
+function getZones(counts, createdColor, resolvedColor) {
+    const zones = [];
+    let positive;
+    let color;
+    let prev;
+    for (const count of counts) {
+        const isPositive = count.created - count.resolved >= 0;
+        if (isPositive !== positive) {
+            if (color && prev) {
+                const value = getIntersectionX(prev.to, prev.created, count.to, count.created, prev.to, prev.resolved, count.to, count.resolved);
+                zones.push({ color, value });
+            }
+            positive = isPositive;
+            color = isPositive ? createdColor : resolvedColor;
+        }
+        prev = count;
+    }
+    if (color) {
+        zones.push({ color });
+    }
+    return zones;
+}
+/**
+ * Get parameters for a rectangle between two charts. This rectangle
+ * is used to visually separate the areas of the two charts.
+ * @param chart {Chart} Highcharts chart object.
+ * @returns {object} Parameters for rectangle.
+ */
+function getDividerRect(chart) {
+    const gridLineWidth = 1;
+    const xAxis = chart.xAxis[0];
+    const yAxis0 = chart.yAxis[0];
+    const yAxis1 = chart.yAxis[1];
+    const x = xAxis.left;
+    const y = yAxis0.top + yAxis0.height + gridLineWidth;
+    const width = xAxis.width;
+    const height = yAxis1.top - yAxis0.top - yAxis0.height - gridLineWidth * 2;
+    return { x, y, width, height };
+}
+const rawData = [
+    {
+        from: '2020-04-01T00:00:00Z',
+        to: '2020-05-01T00:00:00Z',
+        created: 42,
+        resolved: 10,
+        trend: 32,
+    },
+    {
+        from: '2020-05-01T00:00:00Z',
+        to: '2020-06-01T00:00:00Z',
+        created: 53,
+        resolved: 30,
+        trend: 55,
+    },
+    {
+        from: '2020-06-01T00:00:00Z',
+        to: '2020-07-01T00:00:00Z',
+        created: 35,
+        resolved: 28,
+        trend: 62,
+    },
+    {
+        from: '2020-07-01T00:00:00Z',
+        to: '2020-08-01T00:00:00Z',
+        created: 30,
+        resolved: 19,
+        trend: 73,
+    },
+    {
+        from: '2020-08-01T00:00:00Z',
+        to: '2020-09-01T00:00:00Z',
+        created: 18,
+        resolved: 23,
+        trend: 68,
+    },
+    {
+        from: '2020-09-01T00:00:00Z',
+        to: '2020-10-01T00:00:00Z',
+        created: 29,
+        resolved: 22,
+        trend: 75,
+    },
+    {
+        from: '2020-10-01T00:00:00Z',
+        to: '2020-11-01T00:00:00Z',
+        created: 24,
+        resolved: 26,
+        trend: 73,
+    },
+    {
+        from: '2020-11-01T00:00:00Z',
+        to: '2020-12-01T00:00:00Z',
+        created: 19,
+        resolved: 21,
+        trend: 71,
+    },
+    {
+        from: '2020-12-01T00:00:00Z',
+        to: '2021-01-01T00:00:00Z',
+        created: 22,
+        resolved: 22,
+        trend: 71,
+    },
+    {
+        from: '2021-01-01T00:00:00Z',
+        to: '2021-02-01T00:00:00Z',
+        created: 17,
+        resolved: 17,
+        trend: 71,
+    },
+    {
+        from: '2021-02-01T00:00:00Z',
+        to: '2021-03-01T00:00:00Z',
+        created: 30,
+        resolved: 26,
+        trend: 75,
+    },
+    {
+        from: '2021-03-01T00:00:00Z',
+        to: '2021-04-01T00:00:00Z',
+        created: 28,
+        resolved: 12,
+        trend: 91,
+    },
+    {
+        from: '2021-04-01T00:00:00Z',
+        to: '2021-05-01T00:00:00Z',
+        created: 11,
+        resolved: 15,
+        trend: 87,
+    },
+    {
+        from: '2021-05-01T00:00:00Z',
+        to: '2021-06-01T00:00:00Z',
+        created: 9,
+        resolved: 4,
+        trend: 92,
+    },
+    {
+        from: '2021-06-01T00:00:00Z',
+        to: '2021-07-01T00:00:00Z',
+        created: 12,
+        resolved: 12,
+        trend: 92,
+    },
+    {
+        from: '2021-07-01T00:00:00Z',
+        to: '2021-08-01T00:00:00Z',
+        created: 13,
+        resolved: 17,
+        trend: 88,
+    },
+    {
+        from: '2021-08-01T00:00:00Z',
+        to: '2021-09-01T00:00:00Z',
+        created: 3,
+        resolved: 14,
+        trend: 77,
+    },
+];
+const counts = rawData.map(({ created, resolved, trend, from, to }) => ({
+    created,
+    resolved,
+    trend,
+    from: Date.parse(from),
+    to: Date.parse(to),
+}));
+const arearange = counts.map(({ created, resolved, to }) => [to, resolved, created]);
+const createdLine = counts.map(({ created, to }) => [to, created]);
+const resolvedLine = counts.map(({ resolved, to }) => [to, resolved]);
+const trends = counts.map(({ trend, to }) => [to, trend]);
+export const data = {
+    data: {
+        graphs: [
+            {
+                type: 'arearange',
+                data: arearange,
+                yAxis: 0,
+                opacity: 0.5,
+                zones: getZones(counts, '#FF3D64', '#8AD554'),
+            },
+            {
+                type: 'line',
+                name: 'Resolved',
+                color: '#8AD554',
+                data: resolvedLine,
+                yAxis: 0,
+            },
+            {
+                type: 'line',
+                name: 'Created',
+                color: '#FF3D64',
+                data: createdLine,
+                yAxis: 0,
+            },
+            {
+                type: 'line',
+                name: 'Average',
+                color: '#4DA2F1',
+                data: trends,
+                yAxis: 1,
+                marker: {
+                    enabled: false,
+                },
+            },
+        ],
+    },
+    config: {
+        hideHolidays: false,
+        normalizeDiv: false,
+        normalizeSub: false,
+        hideHolidaysBands: true,
+    },
+    libraryConfig: {
+        chart: {
+            animation: false,
+            events: {
+                load: function (_event) {
+                    const rect = getDividerRect(this);
+                    this.renderer
+                        .rect(rect.x, rect.y, rect.width, rect.height)
+                        .addClass('highcharts-axis-grid-divider')
+                        .attr({
+                        fill: 'var(--yc-color-base-background)',
+                        zIndex: 8,
+                    })
+                        .add();
+                },
+                redraw: function (_event) {
+                    const rect = getDividerRect(this);
+                    const element = this.container.querySelector('.highcharts-axis-grid-divider');
+                    if (element) {
+                        element.setAttribute('x', String(rect.x));
+                        element.setAttribute('y', String(rect.y));
+                        element.setAttribute('width', String(rect.width));
+                        element.setAttribute('height', String(rect.height));
+                    }
+                },
+            },
+        },
+        xAxis: {
+            type: 'datetime',
+            minPadding: 0.05,
+            maxPadding: 0.05,
+        },
+        yAxis: [
+            {
+                height: '70%',
+                labels: {
+                    x: -14,
+                },
+                offset: 0,
+                lineWidth: 1,
+            },
+            {
+                height: '20%',
+                top: '80%',
+                labels: {
+                    x: -14,
+                },
+                offset: 0,
+                lineWidth: 1,
+            },
+        ],
+        plotOptions: {
+            series: {
+                states: {
+                    inactive: {
+                        opacity: 0.5,
+                    },
+                },
+            },
+            arearange: {
+                showInLegend: false,
+                enableMouseTracking: false,
+                lineWidth: 0,
+                marker: {
+                    enabled: false,
+                },
+                zoneAxis: 'x',
+            },
+            line: {
+                lineWidth: 1,
+                marker: {
+                    enabled: true,
+                    symbol: 'circle',
+                },
+                states: {
+                    hover: {
+                        lineWidth: 1,
+                        lineWidthPlus: 0,
+                    },
+                },
+            },
+        },
+        legend: {
+            enabled: false,
+        },
+    },
+};

package/build/plugins/highcharts/renderer/HighchartsWidget.d.ts

@@ -6,6 +6,8 @@ declare const HighchartsWidget: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"highcharts"> | undefined) => void) | undefined;
+    onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"highcharts">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     hoistConfigError?: boolean | undefined;

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

@@ -81,9 +81,32 @@ export class HighchartsComponent extends React.PureComponent {
         }
     }
     componentDidMount() {
-        this.onLoad();
+        var _a, _b;
+        if (!this.props.onChartLoad) {
+            this.onLoad();
+            return;
+        }
+        const needCallbacks = !this.state.isError && !this.props.splitTooltip;
+        if (!needCallbacks) {
+            return;
+        }
+        const widget = this.chartComponent.current ? this.chartComponent.current.chart : null;
+        if (this.state.callback && widget) {
+            this.state.callback(widget);
+        }
+        (_b = (_a = this.props).onChartLoad) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            widget,
+        });
     }
     componentDidUpdate() {
+        var _a, _b;
+        const needRenderCallback = this.props.onRender && !this.state.isError && !this.props.splitTooltip;
+        if (needRenderCallback) {
+            (_b = (_a = this.props).onRender) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                renderTime: getChartPerformanceDuration(this.getId()),
+            });
+            return;
+        }
         this.onLoad();
     }
     render() {

package/build/plugins/indicator/renderer/IndicatorWidget.d.ts

@@ -7,6 +7,8 @@ declare const IndicatorWidget: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"indicator"> | undefined) => void) | undefined;
+    onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"indicator">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {
     formatNumber?: (<T = any>(value: number, options?: T | undefined) => string) | undefined;

package/build/plugins/indicator/renderer/IndicatorWidget.js

@@ -15,6 +15,7 @@ function IndicatorWidgetInner(props, _ref) {
     React.useLayoutEffect(() => {
         // TODO: swap to onRender after https://github.com/gravity-ui/chartkit/issues/33
         onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+        // TODO: add onRender with renderTime Issue #114
     });
     if (isEmpty(data)) {
         throw new ChartKitError({

package/build/plugins/yagr/renderer/YagrWidget.d.ts

@@ -9,6 +9,8 @@ declare const YagrWidget: React.ForwardRefExoticComponent<{
     id?: string | undefined;
     isMobile?: boolean | undefined;
     onLoad?: ((data?: import("../../../types").ChartKitOnLoadData<"yagr"> | undefined) => void) | undefined;
+    onRender?: ((data: import("../../../types").ChartKitOnRenderData) => void) | undefined;
+    onChartLoad?: ((data: import("../../../types").ChartKitOnChartLoad<"yagr">) => void) | undefined;
     onError?: import("../../../types").ChartKitOnError | undefined;
 } & {} & {
     id: string;

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

@@ -9,7 +9,7 @@ import './polyfills';
 import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 const YagrWidget = React.forwardRef((props, forwardedRef) => {
-    const { id, data: { data }, onLoad, } = props;
+    const { id, data: { data }, onLoad, onRender, onChartLoad, } = props;
     const yagrRef = React.useRef(null);
     if (!data || isEmpty(data)) {
         throw new ChartKitError({
@@ -20,6 +20,7 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
     const { config, debug } = useWidgetData(Object.assign(Object.assign({}, props.data), { id }));
     const handleChartLoading = React.useCallback((chart, { renderTime }) => {
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(Object.assign(Object.assign({}, data), { widget: chart, widgetRendering: renderTime }));
+        onRender === null || onRender === void 0 ? void 0 : onRender({ renderTime });
     }, [onLoad, data]);
     const onWindowResize = React.useCallback(() => {
         var _a;
@@ -67,6 +68,10 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
             }
         });
     });
+    React.useLayoutEffect(() => {
+        var _a;
+        onChartLoad === null || onChartLoad === void 0 ? void 0 : onChartLoad({ widget: (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart });
+    }, []);
     return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
 });
 export default YagrWidget;

package/build/types/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { ChartKitWidget } from './widget';
 export type { ChartKitHolidays } from './misc';
 export declare type ChartKitLang = 'ru' | 'en';
@@ -13,6 +13,12 @@ export declare type ChartKitOnLoadData<T extends ChartKitType> = {
     widget?: ChartKitWidget[T]['widget'];
     widgetRendering?: number;
 };
+export declare type ChartKitOnRenderData = {
+    renderTime?: number;
+};
+export declare type ChartKitOnChartLoad<T extends ChartKitType> = {
+    widget?: ChartKitWidget[T]['widget'] | null;
+};
 export declare type ChartKitOnError = (data: {
     error: any;
 }) => void;
@@ -21,7 +27,21 @@ export declare type ChartKitProps<T extends ChartKitType> = {
     data: ChartKitWidget[T]['data'];
     id?: string;
     isMobile?: boolean;
+    /**
+     * @depricated please use onRender & onChartLoad instead
+     * @param data
+     */
     onLoad?: (data?: ChartKitOnLoadData<T>) => void;
+    /**
+     * called on each render
+     * @param data
+     */
+    onRender?: (data: ChartKitOnRenderData) => void;
+    /**
+     * called on chart mount
+     * @param data
+     */
+    onChartLoad?: (data: ChartKitOnChartLoad<T>) => void;
     onError?: ChartKitOnError;
 } & {
     [key in keyof Omit<ChartKitWidget[T], 'data' | 'widget'>]: ChartKitWidget[T][key];

package/package.json

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