@gravity-ui/chartkit 1.4.2 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [1.4.3](https://github.com/gravity-ui/chartkit/compare/v1.4.2...v1.4.3) (2022-12-14)
+
+
+### Bug Fixes
+
+* **Highcharts plugin:** fix colorAxis legend title color ([#100](https://github.com/gravity-ui/chartkit/issues/100)) ([06c992a](https://github.com/gravity-ui/chartkit/commit/06c992a5a614798a475aa7c3358058ed7080c6c1))
+* **Highcharts plugin:** remove tooltip lines sorting ([#103](https://github.com/gravity-ui/chartkit/issues/103)) ([5e57035](https://github.com/gravity-ui/chartkit/commit/5e57035b7c1d572d66926c48889e8b5905399592))
+* **Yagr plugin:** add core styles import ([#104](https://github.com/gravity-ui/chartkit/issues/104)) ([4de763d](https://github.com/gravity-ui/chartkit/commit/4de763d7f502f4bacf202beddeb0e5ef27381917))
+
 ## [1.4.2](https://github.com/gravity-ui/chartkit/compare/v1.4.1...v1.4.2) (2022-12-13)
 
 

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

@@ -1,21 +1,12 @@
 import React from 'react';
-import { Button } from '@gravity-ui/uikit';
-import { settings } from '../../../libs';
-import { HighchartsPlugin } from '../../../plugins';
 import { ChartKit } from '../../../components/ChartKit';
 import { data } from './mocks/line';
+import { ChartStory } from './components/ChartStory';
 export default {
     title: 'Plugins/Highcharts/Line',
     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, splitTooltip: true })));
+    return React.createElement(ChartStory, { data: data });
 };
 export const Line = Template.bind({});

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

@@ -1,21 +1,12 @@
 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';
+import { ChartStory } from './components/ChartStory';
 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 })));
+    return React.createElement(ChartStory, { data: data });
 };
 export const Pie = Template.bind({});

package/build/plugins/highcharts/__stories__/area/Range.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../mocks/area-range';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Area',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const AreaRange = Template.bind({});

package/build/plugins/highcharts/__stories__/area/Stacked.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 AreaStacked: Story<any>;

package/build/plugins/highcharts/__stories__/area/Stacked.stories.js

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

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.d.ts

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

package/build/plugins/highcharts/__stories__/column/HorizontalStacked.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../mocks/column-hor-stacked';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const HorizontalStacked = Template.bind({});

package/build/plugins/highcharts/__stories__/{Column.stories.d.ts → column/Vertical.stories.d.ts}

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

package/build/plugins/highcharts/__stories__/column/Vertical.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../mocks/column-ver';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const Vertical = Template.bind({});

package/build/plugins/highcharts/__stories__/{Bar.stories.d.ts → column/VerticalStacked.stories.d.ts}

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

package/build/plugins/highcharts/__stories__/column/VerticalStacked.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartKit } from '../../../../components/ChartKit';
+import { data } from '../mocks/column-ver-stacked';
+import { ChartStory } from '../components/ChartStory';
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+};
+const Template = () => {
+    return React.createElement(ChartStory, { data: data });
+};
+export const VerticalStacked = Template.bind({});

package/build/plugins/highcharts/__stories__/components/ChartStory.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HighchartsWidgetData } from '../../types';
+export declare type ChartStoryProps = {
+    height?: string;
+    width?: string;
+    data: HighchartsWidgetData;
+};
+export declare const ChartStory: React.FC<ChartStoryProps>;

package/build/plugins/highcharts/__stories__/components/ChartStory.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from '@gravity-ui/uikit';
+import { settings } from '../../../../libs';
+import { HighchartsPlugin } from '../../index';
+import holidays from '../mocks/holidays';
+import { ChartKit } from '../../../../components/ChartKit';
+const DEFAULT_STORY_HEIGHT = '300px';
+const DEFAULT_STORY_WIDTH = '100%';
+export const ChartStory = (props) => {
+    const { height, width, data } = props;
+    const [visible, setVisible] = React.useState(false);
+    const chartKitRef = React.useRef();
+    if (!visible) {
+        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
+        return React.createElement(Button, { onClick: () => setVisible(true) }, "Show chart");
+    }
+    return (React.createElement("div", { style: {
+            height: height || DEFAULT_STORY_HEIGHT,
+            width: width || DEFAULT_STORY_WIDTH,
+        } },
+        React.createElement(ChartKit, { ref: chartKitRef, type: "highcharts", data: data })));
+};

package/build/plugins/highcharts/__stories__/mocks/area-stacked.js

@@ -0,0 +1,104 @@
+export const data = {
+    data: {
+        graphs: [
+            {
+                title: 'Appliances',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                },
+                data: [
+                    {
+                        y: 2420,
+                        x: 2014,
+                    },
+                    {
+                        y: 2472,
+                        x: 2015,
+                    },
+                    {
+                        y: 5248,
+                        x: 2016,
+                    },
+                    {
+                        y: 7787,
+                        x: 2017,
+                    },
+                ],
+                legendTitle: 'Appliances',
+                connectNulls: false,
+                yAxis: 0,
+                color: '#FF3D64',
+            },
+            {
+                title: 'Bookcases',
+                tooltip: {
+                    chartKitFormatting: true,
+                    chartKitPrecision: 0,
+                },
+                data: [
+                    {
+                        y: -363,
+                        x: 2014,
+                    },
+                    {
+                        y: -2777,
+                        x: 2015,
+                    },
+                    {
+                        y: 1880,
+                        x: 2016,
+                    },
+                    {
+                        y: -616,
+                        x: 2017,
+                    },
+                ],
+                legendTitle: 'Bookcases',
+                connectNulls: false,
+                yAxis: 0,
+                color: '#8AD554',
+            },
+        ],
+        categories: ['2014', '2015', '2016', '2017'],
+    },
+    config: {
+        withoutLineLimit: true,
+        hideHolidaysBands: true,
+        enableSum: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'area',
+            zoomType: 'x',
+        },
+        xAxis: {
+            endOnTick: false,
+            type: 'linear',
+            labels: {
+                enabled: true,
+            },
+        },
+        yAxis: {
+            opposite: false,
+            labels: {
+                y: 3,
+                enabled: true,
+            },
+            type: 'linear',
+        },
+        plotOptions: {
+            area: {
+                stacking: 'normal',
+            },
+            series: {
+                dataGrouping: {
+                    enabled: false,
+                },
+                dataLabels: {
+                    allowOverlap: false,
+                },
+            },
+        },
+    },
+};

package/build/plugins/highcharts/__stories__/mocks/column-ver-stacked.d.ts

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

package/build/plugins/highcharts/__stories__/mocks/column-ver.d.ts

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

package/build/plugins/highcharts/__stories__/mocks/column-ver.js

@@ -0,0 +1,73 @@
+export const data = {
+    data: {
+        graphs: [
+            {
+                data: [
+                    {
+                        y: 50.55,
+                        color: 'rgb(255, 61, 9)',
+                    },
+                    {
+                        y: 80.45,
+                        color: 'rgb(255, 65, 9)',
+                    },
+                    {
+                        y: 100.34,
+                        color: 'rgb(255, 83, 9)',
+                    },
+                ],
+                name: 'Profit',
+            },
+            {
+                data: [
+                    {
+                        y: 350.65,
+                        color: 'rgb(208, 189, 48)',
+                    },
+                    {
+                        y: 119.82,
+                        color: 'rgb(255, 95, 88)',
+                    },
+                    {
+                        y: 452.15,
+                        color: 'rgb(84, 165, 32)',
+                    },
+                ],
+                name: 'Sales',
+            },
+        ],
+        categories: ['Furniture', 'Office Supplies', 'Technology'],
+    },
+    config: {
+        enableSum: true,
+        precision: 2,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'column',
+        },
+        legend: {
+            title: {
+                text: 'Measure Values',
+            },
+            enabled: true,
+        },
+        colorAxis: {
+            startOnTick: false,
+            endOnTick: false,
+            min: 50.55,
+            max: 452.72057380654326,
+            stops: [
+                [0, 'rgb(255, 61, 100)'],
+                [0.5, 'rgb(255, 198, 54)'],
+                [1, 'rgb(84, 165, 32)'],
+            ],
+        },
+        plotOptions: {
+            column: {
+                maxPointWidth: 50,
+            },
+        },
+        enableSum: true,
+    },
+};

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

@@ -453,6 +453,11 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
                         color: string;
                     };
                 };
+                title: {
+                    style: {
+                        color: string;
+                    };
+                };
             } | {
                 enabled: boolean;
             });

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

@@ -10,6 +10,11 @@ export function buildLegend(options: any): {
             color: string;
         };
     };
+    title: {
+        style: {
+            color: string;
+        };
+    };
 };
 export function hasChartVisibleSeries(chart: any): any;
 export function handleScroll(): false | undefined;
@@ -486,6 +491,11 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
                 color: string;
             };
         };
+        title: {
+            style: {
+                color: string;
+            };
+        };
     } | {
         enabled: boolean;
     };

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

@@ -162,6 +162,9 @@ export function buildLegend(options) {
             inactiveColor: 'var(--yc-color-base-generic-accent-disabled)',
             style: { color: 'var(--yc-color-text-primary)' },
         },
+        title: {
+            style: { color: 'var(--yc-color-text-secondary)' },
+        },
     };
     if (options.outsideLegend) {
         options.legendPosition = null;

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

@@ -447,6 +447,11 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
                     color: string;
                 };
             };
+            title: {
+                style: {
+                    color: string;
+                };
+            };
         } | {
             enabled: boolean;
         });

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

@@ -1,5 +1,5 @@
 /* eslint-disable complexity */
-import { escape as _escape, orderBy as _orderBy } from 'lodash';
+import _escape from 'lodash/escape';
 import { i18n } from '../../../../../i18n';
 import { renderShapeIcon } from './render-shape-icon';
 import { escapeHTML } from './helpers';
@@ -131,7 +131,6 @@ export const formatTooltip = (data, tooltip, isMobile) => {
     const selectedLineIndex = data.lines.findIndex(({ selectedSeries }) => selectedSeries);
     const selectedLine = data.lines[selectedLineIndex];
     const lines = data.lines.slice(0, (tooltip.lastVisibleRowIndex || data.lines.length) + 1);
-    const sortedLines = _orderBy(lines, ['originalValue'], ['desc']);
     const withShapes = lines.every((line) => line.seriesShape);
     const unsafe = data.unsafe;
     const tooltipHeaderRaw = (_a = data.tooltipHeader) === null || _a === void 0 ? void 0 : _a.trim();
@@ -212,7 +211,7 @@ export const formatTooltip = (data, tooltip, isMobile) => {
             .join('')}</tr>
                             </thead>`}
                     <tbody class="${TOOLTIP_LIST_CLASS_NAME}">
-                        ${sortedLines
+                        ${lines
         .map((line, index) => renderRow(line, getRowRenderConfig(index)))
         .join('')}
                     </tbody>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { ChartKitWidgetRef } from '../../../types';
 import './polyfills';
+import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 declare const YagrWidget: React.ForwardRefExoticComponent<{
     type: "yagr";

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

@@ -6,6 +6,7 @@ import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
 import { useWidgetData } from './useWidgetData';
 import { checkFocus, detectClickOutside, synchronizeTooltipTablesCellsWidth } from './utils';
 import './polyfills';
+import '@gravity-ui/yagr/dist/index.css';
 import './YagrWidget.css';
 const YagrWidget = React.forwardRef((props, forwardedRef) => {
     const { id, data: { data }, onLoad, } = props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/chartkit",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "React component used to render charts based on any sources you need",
   "license": "MIT",
   "repository": "git@github.com:gravity-ui/ChartKit.git",
@@ -37,6 +37,8 @@
     "@types/react": "^17.0.48",
     "@types/react-dom": "^17.0.17",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.7",
     "eslint": "^8.11.0",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
@@ -51,9 +53,12 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
     "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "sass": "^1.56.2",
     "sass-loader": "^10.2.1",
+    "style-loader": "^2.0.0",
     "stylelint": "^14.6.0",
     "ts-jest": "^28.0.5",
     "ts-node": "^10.2.1",
@@ -68,7 +73,7 @@
     "test": "jest",
     "test:watch": "jest --watchAll",
     "clean": "gulp clean",
-    "start": "start-storybook -p 7007",
+    "start": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook -p 7007",
     "build": "gulp",
     "lint:js": "eslint --quiet --ext .js,.jsx,.ts,.tsx .",
     "lint:styles": "stylelint '{styles,src}/**/*.scss' --quiet",

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

@@ -1,22 +0,0 @@
-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/area-range';
-import holidays from './mocks/holidays';
-export default {
-    title: 'Plugins/Highcharts/AreaRange',
-    component: ChartKit,
-};
-const Template = () => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    if (!shown) {
-        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
-        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 })));
-};
-export const AreaRange = Template.bind({});

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Button, ThemeProvider } from '@gravity-ui/uikit';
-import { ChartKit } from '../../../components/ChartKit';
-import { settings } from '../../../libs';
-import { HighchartsPlugin } from '../index';
-import { defaultChartKitPropsControlsState } from './constants/story-settings';
-import holidays from './mocks/holidays';
-import { data } from './mocks/bar';
-export default {
-    title: 'Plugins/Highcharts/Bar',
-    component: ChartKit,
-    args: {
-        theme: 'light',
-    },
-    argTypes: Object.assign({ theme: {
-            options: ['light', 'light-hc', 'dark', 'dark-hc'],
-            control: { type: 'radio' },
-        } }, defaultChartKitPropsControlsState),
-};
-const Template = (args) => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    if (!shown) {
-        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
-        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
-    }
-    return (React.createElement(ThemeProvider, { theme: args.theme },
-        React.createElement("div", { style: { height: '600px', width: '100%' } },
-            React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data }))));
-};
-export const Bar = Template.bind({});

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Button, ThemeProvider } from '@gravity-ui/uikit';
-import { ChartKit } from '../../../components/ChartKit';
-import { settings } from '../../../libs';
-import { HighchartsPlugin } from '../index';
-import { defaultChartKitPropsControlsState } from './constants/story-settings';
-import holidays from './mocks/holidays';
-import { data } from './mocks/column';
-export default {
-    title: 'Plugins/Highcharts/Column',
-    component: ChartKit,
-    args: {
-        theme: 'light',
-    },
-    argTypes: Object.assign({ theme: {
-            options: ['light', 'light-hc', 'dark', 'dark-hc'],
-            control: { type: 'radio' },
-        } }, defaultChartKitPropsControlsState),
-};
-const Template = (args) => {
-    const [shown, setShown] = React.useState(false);
-    const chartkitRef = React.useRef();
-    if (!shown) {
-        settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
-        return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
-    }
-    return (React.createElement(ThemeProvider, { theme: args.theme },
-        React.createElement(ChartKit, { ref: chartkitRef, type: "highcharts", data: data })));
-};
-export const Column = Template.bind({});