From 06c992a5a614798a475aa7c3358058ed7080c6c1 Mon Sep 17 00:00:00 2001 From: "Mr.Dr.Professor Patrick" Date: Tue, 13 Dec 2022 20:04:58 +0600 Subject: [PATCH] fix(Highcharts plugin): fix colorAxis legend title color (#100) * fix(Highcharts plugin): fix colorAxis legend title color * refactor: refactor column stories --- .../HorizontalStacked.stories.tsx} | 16 ++-- .../Vertical.stories.tsx} | 14 ++-- .../column/VerticalStacked.stories.tsx | 32 ++++++++ .../mocks/{bar.ts => column-hor-stacked.ts} | 0 .../{column.ts => column-ver-stacked.ts} | 0 .../__stories__/mocks/column-ver.ts | 75 +++++++++++++++++++ .../renderer/helpers/config/config.js | 3 + 7 files changed, 125 insertions(+), 15 deletions(-) rename src/plugins/highcharts/__stories__/{Bar.stories.tsx => column/HorizontalStacked.stories.tsx} (63%) rename src/plugins/highcharts/__stories__/{Column.stories.tsx => column/Vertical.stories.tsx} (68%) create mode 100644 src/plugins/highcharts/__stories__/column/VerticalStacked.stories.tsx rename src/plugins/highcharts/__stories__/mocks/{bar.ts => column-hor-stacked.ts} (100%) rename src/plugins/highcharts/__stories__/mocks/{column.ts => column-ver-stacked.ts} (100%) create mode 100644 src/plugins/highcharts/__stories__/mocks/column-ver.ts diff --git a/src/plugins/highcharts/__stories__/Bar.stories.tsx b/src/plugins/highcharts/__stories__/column/HorizontalStacked.stories.tsx similarity index 63% rename from src/plugins/highcharts/__stories__/Bar.stories.tsx rename to src/plugins/highcharts/__stories__/column/HorizontalStacked.stories.tsx index d83c0088..308521cc 100644 --- a/src/plugins/highcharts/__stories__/Bar.stories.tsx +++ b/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 = () => { ); }; -export const Bar = Template.bind({}); +export const HorizontalStacked = Template.bind({}); diff --git a/src/plugins/highcharts/__stories__/Column.stories.tsx b/src/plugins/highcharts/__stories__/column/Vertical.stories.tsx similarity index 68% rename from src/plugins/highcharts/__stories__/Column.stories.tsx rename to src/plugins/highcharts/__stories__/column/Vertical.stories.tsx index 0cf6efda..be124f1c 100644 --- a/src/plugins/highcharts/__stories__/Column.stories.tsx +++ b/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 = () => { ); }; -export const Column = Template.bind({}); +export const Vertical = Template.bind({}); diff --git a/src/plugins/highcharts/__stories__/column/VerticalStacked.stories.tsx b/src/plugins/highcharts/__stories__/column/VerticalStacked.stories.tsx new file mode 100644 index 00000000..5b16d76a --- /dev/null +++ b/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 = () => { + const [shown, setShown] = React.useState(false); + const chartkitRef = React.useRef(); + + if (!shown) { + settings.set({plugins: [HighchartsPlugin], extra: {holidays}}); + return ; + } + + return ( +
+ +
+ ); +}; + +export const VerticalStacked = Template.bind({}); diff --git a/src/plugins/highcharts/__stories__/mocks/bar.ts b/src/plugins/highcharts/__stories__/mocks/column-hor-stacked.ts similarity index 100% rename from src/plugins/highcharts/__stories__/mocks/bar.ts rename to src/plugins/highcharts/__stories__/mocks/column-hor-stacked.ts diff --git a/src/plugins/highcharts/__stories__/mocks/column.ts b/src/plugins/highcharts/__stories__/mocks/column-ver-stacked.ts similarity index 100% rename from src/plugins/highcharts/__stories__/mocks/column.ts rename to src/plugins/highcharts/__stories__/mocks/column-ver-stacked.ts diff --git a/src/plugins/highcharts/__stories__/mocks/column-ver.ts b/src/plugins/highcharts/__stories__/mocks/column-ver.ts new file mode 100644 index 00000000..f7c58ad9 --- /dev/null +++ b/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, + }, +}; diff --git a/src/plugins/highcharts/renderer/helpers/config/config.js b/src/plugins/highcharts/renderer/helpers/config/config.js index ec2cd824..bee706c5 100644 --- a/src/plugins/highcharts/renderer/helpers/config/config.js +++ b/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) {