From defdcf768d33fe11f9de8dc14a1e9561c034f6ea Mon Sep 17 00:00:00 2001 From: Vladimir Chernitsyn <47900126+Flunt1k@users.noreply.github.com> Date: Tue, 22 Nov 2022 13:51:28 +0100 Subject: [PATCH] feat: add support border color setting --- .storybook/main.js | 2 +- src/components/ChartKit.scss | 2 +- .../highcharts/__stories__/Bar.stories.tsx | 51 +++++ .../highcharts/__stories__/Column.stories.tsx | 49 +++++ .../__stories__/constants/story-settings.ts | 42 ++++ .../highcharts/__stories__/mocks/bar.ts | 201 ++++++++++++++++++ .../highcharts/__stories__/mocks/column.ts | 199 +++++++++++++++++ .../renderer/helpers/config/options.js | 14 +- .../highcharts/renderer/helpers/graph.ts | 2 +- 9 files changed, 548 insertions(+), 14 deletions(-) create mode 100644 src/plugins/highcharts/__stories__/Bar.stories.tsx create mode 100644 src/plugins/highcharts/__stories__/Column.stories.tsx create mode 100644 src/plugins/highcharts/__stories__/constants/story-settings.ts create mode 100644 src/plugins/highcharts/__stories__/mocks/bar.ts create mode 100644 src/plugins/highcharts/__stories__/mocks/column.ts diff --git a/.storybook/main.js b/.storybook/main.js index e657c387..d8a3d3d3 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -6,7 +6,7 @@ module.exports = { { name: '@storybook/addon-essentials', options: { - controls: false, + controls: true, actions: false, }, }, diff --git a/src/components/ChartKit.scss b/src/components/ChartKit.scss index abab725f..b1ec4e45 100644 --- a/src/components/ChartKit.scss +++ b/src/components/ChartKit.scss @@ -11,7 +11,7 @@ --highcarts-navigator-border: var(--yc-color-line-generic); --highcarts-navigator-track: var(--yc-color-base-generic); --highcarts-navigator-body: var(--yc-color-scroll-handle); - --highcharts-series-border: var(--yc-color-base-background); + --highcharts-chart-background: var(--yc-color-base-background); --highcharts-grid-line: var(--yc-color-line-generic); --highcharts-axis-line: var(--yc-color-line-generic); --highcharts-tick: var(--yc-color-line-generic); diff --git a/src/plugins/highcharts/__stories__/Bar.stories.tsx b/src/plugins/highcharts/__stories__/Bar.stories.tsx new file mode 100644 index 00000000..24d141e3 --- /dev/null +++ b/src/plugins/highcharts/__stories__/Bar.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import {Story, Meta} from '@storybook/react'; +import {Button, ThemeProvider} from '@gravity-ui/uikit'; +import {ChartKit} from '../../../components/ChartKit'; +import {ChartKitRef} from '../../../types'; +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: { + theme: { + options: ['light', 'light-hc', 'dark', 'dark-hc'], + control: {type: 'radio'}, + }, + ...defaultChartKitPropsControlsState, + }, +} as Meta; + +const Template: Story = (args: {theme: 'light' | 'light-hc' | 'dark' | 'dark-hc'}) => { + const [shown, setShown] = React.useState(false); + const chartkitRef = React.useRef(); + + if (!shown) { + settings.set({plugins: [HighchartsPlugin], extra: {holidays}}); + return ; + } + + return ( + +
+ console.log('onError invoked')} + /> +
+ + ); +}; + +export const Bar = Template.bind({}); diff --git a/src/plugins/highcharts/__stories__/Column.stories.tsx b/src/plugins/highcharts/__stories__/Column.stories.tsx new file mode 100644 index 00000000..9472262c --- /dev/null +++ b/src/plugins/highcharts/__stories__/Column.stories.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import {Story, Meta} from '@storybook/react'; +import {Button, ThemeProvider} from '@gravity-ui/uikit'; +import {ChartKit} from '../../../components/ChartKit'; +import {ChartKitRef} from '../../../types'; +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: { + theme: { + options: ['light', 'light-hc', 'dark', 'dark-hc'], + control: {type: 'radio'}, + }, + ...defaultChartKitPropsControlsState, + }, +} as Meta; + +const Template: Story = (args: {theme: 'light' | 'light-hc' | 'dark' | 'dark-hc'}) => { + const [shown, setShown] = React.useState(false); + const chartkitRef = React.useRef(); + + if (!shown) { + settings.set({plugins: [HighchartsPlugin], extra: {holidays}}); + return ; + } + + return ( + + console.log('onError invoked')} + /> + + ); +}; + +export const Column = Template.bind({}); diff --git a/src/plugins/highcharts/__stories__/constants/story-settings.ts b/src/plugins/highcharts/__stories__/constants/story-settings.ts new file mode 100644 index 00000000..98d06e62 --- /dev/null +++ b/src/plugins/highcharts/__stories__/constants/story-settings.ts @@ -0,0 +1,42 @@ +export const defaultChartKitPropsControlsState = { + ref: { + table: { + disable: true, + }, + }, + hoistConfigError: { + table: { + disable: true, + }, + }, + onError: { + table: { + disable: true, + }, + }, + data: { + table: { + disable: true, + }, + }, + type: { + table: { + disable: true, + }, + }, + id: { + table: { + disable: true, + }, + }, + isMobile: { + table: { + disable: true, + }, + }, + onLoad: { + table: { + disable: true, + }, + }, +}; diff --git a/src/plugins/highcharts/__stories__/mocks/bar.ts b/src/plugins/highcharts/__stories__/mocks/bar.ts new file mode 100644 index 00000000..547ce29b --- /dev/null +++ b/src/plugins/highcharts/__stories__/mocks/bar.ts @@ -0,0 +1,201 @@ +import {HighchartsWidgetData} from '../../types'; + +export const data: HighchartsWidgetData = { + data: { + graphs: [ + { + title: 'Central', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 163798.70024430752, + dataLabels: { + enabled: false, + }, + }, + { + y: 167028.80030867457, + dataLabels: { + enabled: false, + }, + }, + { + y: 170420.6004266739, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'Central', + drillDownFilterValue: 'Central', + connectNulls: false, + yAxis: 0, + colorValue: 'Central', + shapeValue: 'Profit', + custom: {}, + color: '#4DA2F1', + }, + { + title: 'East', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 208293.70054268837, + dataLabels: { + enabled: false, + }, + }, + { + y: 205518.80070078373, + dataLabels: { + enabled: false, + }, + }, + { + y: 264979.80019688606, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'East', + drillDownFilterValue: 'East', + connectNulls: false, + yAxis: 0, + colorValue: 'East', + shapeValue: 'Profit', + custom: {}, + color: '#FF3D64', + }, + { + title: 'South', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 117300.00069212914, + dataLabels: { + enabled: false, + }, + }, + { + y: 125653.1994549036, + dataLabels: { + enabled: false, + }, + }, + { + y: 148775.5996557474, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'South', + drillDownFilterValue: 'South', + connectNulls: false, + yAxis: 0, + colorValue: 'South', + shapeValue: 'Profit', + custom: {}, + color: '#8AD554', + }, + { + title: 'West', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 252617.00065851212, + dataLabels: { + enabled: false, + }, + }, + { + y: 220856.3998889923, + dataLabels: { + enabled: false, + }, + }, + { + y: 251998.89954137802, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'West', + drillDownFilterValue: 'West', + connectNulls: false, + yAxis: 0, + colorValue: 'West', + shapeValue: 'Profit', + custom: {}, + color: '#FFC636', + }, + ], + categories: ['Furniture', 'Office Supplies', 'Technology'], + }, + config: { + withoutLineLimit: true, + hideHolidaysBands: true, + enableSum: true, + }, + libraryConfig: { + chart: { + type: 'bar', + zoomType: 'xy', + }, + xAxis: { + endOnTick: false, + title: { + text: null, + }, + type: 'linear', + labels: { + enabled: true, + }, + }, + yAxis: { + opposite: false, + labels: { + y: 3, + enabled: true, + }, + title: { + text: null, + }, + type: 'linear', + }, + tooltip: {}, + plotOptions: { + bar: { + stacking: 'normal', + }, + column: { + dataGrouping: { + enabled: false, + }, + maxPointWidth: 50, + }, + series: { + dataGrouping: { + enabled: false, + }, + dataLabels: { + allowOverlap: false, + }, + }, + }, + }, +}; diff --git a/src/plugins/highcharts/__stories__/mocks/column.ts b/src/plugins/highcharts/__stories__/mocks/column.ts new file mode 100644 index 00000000..4f65a3c3 --- /dev/null +++ b/src/plugins/highcharts/__stories__/mocks/column.ts @@ -0,0 +1,199 @@ +import {HighchartsWidgetData} from '../../types'; + +export const data: HighchartsWidgetData = { + data: { + graphs: [ + { + title: 'Central', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 163798.70024430752, + dataLabels: { + enabled: false, + }, + }, + { + y: 167028.80030867457, + dataLabels: { + enabled: false, + }, + }, + { + y: 170420.6004266739, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'Central', + drillDownFilterValue: 'Central', + connectNulls: false, + yAxis: 0, + colorValue: 'Central', + shapeValue: 'Profit', + custom: {}, + color: '#4DA2F1', + }, + { + title: 'East', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 208293.70054268837, + dataLabels: { + enabled: false, + }, + }, + { + y: 205518.80070078373, + dataLabels: { + enabled: false, + }, + }, + { + y: 264979.80019688606, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'East', + drillDownFilterValue: 'East', + connectNulls: false, + yAxis: 0, + colorValue: 'East', + shapeValue: 'Profit', + custom: {}, + color: '#FF3D64', + }, + { + title: 'South', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 117300.00069212914, + dataLabels: { + enabled: false, + }, + }, + { + y: 125653.1994549036, + dataLabels: { + enabled: false, + }, + }, + { + y: 148775.5996557474, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'South', + drillDownFilterValue: 'South', + connectNulls: false, + yAxis: 0, + colorValue: 'South', + shapeValue: 'Profit', + custom: {}, + color: '#8AD554', + }, + { + title: 'West', + tooltip: { + chartKitFormatting: true, + chartKitPrecision: 0, + }, + data: [ + { + y: 252617.00065851212, + dataLabels: { + enabled: false, + }, + }, + { + y: 220856.3998889923, + dataLabels: { + enabled: false, + }, + }, + { + y: 251998.89954137802, + dataLabels: { + enabled: false, + }, + }, + ], + legendTitle: 'West', + drillDownFilterValue: 'West', + connectNulls: false, + yAxis: 0, + colorValue: 'West', + shapeValue: 'Profit', + custom: {}, + color: '#FFC636', + }, + ], + categories: ['Furniture', 'Office Supplies', 'Technology'], + }, + config: { + withoutLineLimit: true, + hideHolidaysBands: true, + enableSum: true, + }, + libraryConfig: { + chart: { + type: 'column', + zoomType: 'xy', + }, + xAxis: { + endOnTick: false, + title: { + text: null, + }, + type: 'linear', + labels: { + enabled: true, + }, + }, + yAxis: { + opposite: false, + labels: { + y: 3, + enabled: true, + }, + title: { + text: null, + }, + type: 'linear', + }, + tooltip: {}, + plotOptions: { + column: { + stacking: 'normal', + dataGrouping: { + enabled: false, + }, + maxPointWidth: 50, + }, + series: { + dataGrouping: { + enabled: false, + }, + dataLabels: { + allowOverlap: false, + }, + }, + }, + }, +}; diff --git a/src/plugins/highcharts/renderer/helpers/config/options.js b/src/plugins/highcharts/renderer/helpers/config/options.js index 03f4f726..32f3a641 100644 --- a/src/plugins/highcharts/renderer/helpers/config/options.js +++ b/src/plugins/highcharts/renderer/helpers/config/options.js @@ -116,7 +116,7 @@ const statesForLine = { const options = { chart: { zoomType: 'xy', - backgroundColor: 'transparent', + backgroundColor: 'var(--highcharts-chart-background)', className: 'chartkit-highcharts', }, title: { @@ -186,7 +186,7 @@ const options = { }, plotOptions: { series: { - borderColor: 'var(--highcharts-series-border)', + borderColor: 'var(--highcharts-chart-background)', label: { enabled: false, }, @@ -216,15 +216,7 @@ const options = { statesForLine, ), areaspline: first, - bar: Object.assign( - { - borderWidth: 0, - pointWidth: 4, - }, - first, - wizardGraphDataLabels, - notChangeOpacityForInactive, - ), + bar: Object.assign({}, first, wizardGraphDataLabels, notChangeOpacityForInactive), column: Object.assign({}, first, wizardGraphDataLabels, notChangeOpacityForInactive), line: Object.assign({}, first, wizardGraphDataLabels, statesForLine), spline: first, diff --git a/src/plugins/highcharts/renderer/helpers/graph.ts b/src/plugins/highcharts/renderer/helpers/graph.ts index 3bddfeb5..c5890d28 100644 --- a/src/plugins/highcharts/renderer/helpers/graph.ts +++ b/src/plugins/highcharts/renderer/helpers/graph.ts @@ -46,7 +46,7 @@ function getGraph({options, data, comments, isMobile, holidays}: GetGraphArgs) { } chart.userOptions._getComments = () => - chart.userOptions._internalComments.concat(chart.userOptions._externalComments); + chart.userOptions?._internalComments.concat(chart.userOptions?._externalComments); let needRedraw = false;