fix(Highcharts plugin): fix colorAxis legend title color (#100)

* fix(Highcharts plugin): fix colorAxis legend title color

* refactor: refactor column stories

src/plugins/highcharts/__stories__/Bar.stories.tsx → src/plugins/highcharts/__stories__/column/HorizontalStacked.stories.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
-import {ChartKit} from '../../../components/ChartKit';
-import {ChartKitRef} from '../../../types';
-import {settings} from '../../../libs';
-import {HighchartsPlugin} from '../index';
-import holidays from './mocks/holidays';
-import {data} from './mocks/bar';
+import {ChartKit} from '../../../../components/ChartKit';
+import {ChartKitRef} from '../../../../types';
+import {settings} from '../../../../libs';
+import {HighchartsPlugin} from '../../index';
+import holidays from '../mocks/holidays';
+import {data} from '../mocks/column-hor-stacked';
 
 export default {
-    title: 'Plugins/Highcharts/Bar',
+    title: 'Plugins/Highcharts/Column',
     component: ChartKit,
 } as Meta;
 
@@ -29,4 +29,4 @@ const Template: Story<any> = () => {
     );
 };
 
-export const Bar = Template.bind({});
+export const HorizontalStacked = Template.bind({});

src/plugins/highcharts/__stories__/Column.stories.tsx → src/plugins/highcharts/__stories__/column/Vertical.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {Story, Meta} from '@storybook/react';
 import {Button} from '@gravity-ui/uikit';
-import {ChartKit} from '../../../components/ChartKit';
-import {ChartKitRef} from '../../../types';
-import {settings} from '../../../libs';
-import {HighchartsPlugin} from '../index';
-import holidays from './mocks/holidays';
-import {data} from './mocks/column';
+import {ChartKit} from '../../../../components/ChartKit';
+import {ChartKitRef} from '../../../../types';
+import {settings} from '../../../../libs';
+import {HighchartsPlugin} from '../../index';
+import holidays from '../mocks/holidays';
+import {data} from '../mocks/column-ver';
 
 export default {
     title: 'Plugins/Highcharts/Column',
@@ -29,4 +29,4 @@ const Template: Story<any> = () => {
     );
 };
 
-export const Column = Template.bind({});
+export const Vertical = Template.bind({});

src/plugins/highcharts/__stories__/column/VerticalStacked.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Story, Meta} from '@storybook/react';
+import {Button} from '@gravity-ui/uikit';
+import {ChartKit} from '../../../../components/ChartKit';
+import {ChartKitRef} from '../../../../types';
+import {settings} from '../../../../libs';
+import {HighchartsPlugin} from '../../index';
+import holidays from '../mocks/holidays';
+import {data} from '../mocks/column-ver-stacked';
+
+export default {
+    title: 'Plugins/Highcharts/Column',
+    component: ChartKit,
+} as Meta;
+
+const Template: Story<any> = () => {
+    const [shown, setShown] = React.useState(false);
+    const chartkitRef = React.useRef<ChartKitRef>();
+
+    if (!shown) {
+        settings.set({plugins: [HighchartsPlugin], extra: {holidays}});
+        return <Button onClick={() => setShown(true)}>Show chart</Button>;
+    }
+
+    return (
+        <div style={{height: 300, width: '100%'}}>
+            <ChartKit ref={chartkitRef} type="highcharts" data={data} />
+        </div>
+    );
+};
+
+export const VerticalStacked = Template.bind({});

src/plugins/highcharts/__stories__/mocks/column-ver.ts

@@ -0,0 +1,75 @@
+import {HighchartsWidgetData} from '../../types';
+
+export const data: HighchartsWidgetData = {
+    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,
+    },
+};

src/plugins/highcharts/renderer/helpers/config/config.js

@@ -216,6 +216,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) {