Skip to content

Commit

Permalink
feat: add support border color setting
Browse files Browse the repository at this point in the history
  • Loading branch information
@Flunt1k
Flunt1k authored Nov 22, 2022
1 parent 4939fb9 commit defdcf7
Show file tree
Hide file tree
Showing 9 changed files with 548 additions and 14 deletions.
2 changes: 1 addition & 1 deletion .storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = {
{
name: '@storybook/addon-essentials',
options: {
controls: false,
controls: true,
actions: false,
},
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/ChartKit.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
51 changes: 51 additions & 0 deletions src/plugins/highcharts/__stories__/Bar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<any> = (args: {theme: 'light' | 'light-hc' | 'dark' | 'dark-hc'}) => {
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 (
<ThemeProvider theme={args.theme}>
<div style={{height: '600px', width: '100%'}}>
<ChartKit
ref={chartkitRef}
id="1"
type="highcharts"
data={data}
onError={() => console.log('onError invoked')}
/>
</div>
</ThemeProvider>
);
};

export const Bar = Template.bind({});
49 changes: 49 additions & 0 deletions src/plugins/highcharts/__stories__/Column.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<any> = (args: {theme: 'light' | 'light-hc' | 'dark' | 'dark-hc'}) => {
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 (
<ThemeProvider theme={args.theme}>
<ChartKit
ref={chartkitRef}
id="1"
type="highcharts"
data={data}
onError={() => console.log('onError invoked')}
/>
</ThemeProvider>
);
};

export const Column = Template.bind({});
42 changes: 42 additions & 0 deletions src/plugins/highcharts/__stories__/constants/story-settings.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
},
},
};
201 changes: 201 additions & 0 deletions src/plugins/highcharts/__stories__/mocks/bar.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
},
},
},
},
};
Loading

0 comments on commit defdcf7

Please sign in to comment.