+
+
- );
- })
- .add('axis', () => {
- const theme: PartialTheme = {
- axes: {
- axisTitleStyle: {
- fill: color('titleFill', '#333', 'Axis Title'),
- fontSize: range('titleFontSize', 0, 40, 12, 'Axis Title'),
- fontStyle: 'bold',
- fontFamily: `'Open Sans', Helvetica, Arial, sans-serif`,
- padding: range('titlePadding', 0, 40, 5, 'Axis Title'),
- },
- axisLineStyle: {
- stroke: color('axisLinecolor', '#333', 'Axis Line'),
- strokeWidth: range('axisLineWidth', 0, 5, 1, 'Axis Line'),
- },
- tickLabelStyle: {
- fill: color('tickFill', '#333', 'Tick Label'),
- fontSize: range('tickFontSize', 0, 40, 10, 'Tick Label'),
- fontFamily: `'Open Sans', Helvetica, Arial, sans-serif`,
- fontStyle: 'normal',
- padding: number('tickLabelPadding', 1, {}, 'Tick Label'),
- },
- tickLineStyle: {
- visible: boolean('showTicks', true, 'Tick Line'),
- stroke: color('tickLineColor', '#333', 'Tick Line'),
- strokeWidth: range('tickLineWidth', 0, 5, 1, 'Tick Line'),
- },
- },
- };
- return (
-
-
-
- Number(d).toFixed(2)}
- />
-
+
+
- );
- })
- .add('theme/style', () => {
- const customizeLineStroke = boolean('customizeLineStroke', false, 'line');
- const customizePointStroke = boolean('customizeLinePointStroke', false, 'line');
- const customizeAreaFill = boolean('customizeAreaFill', false, 'area');
- const customizeAreaLineStroke = boolean('customizeAreaLineStroke', false, 'area');
- const customizeRectFill = boolean('customizeRectFill', false, 'bar');
- const theme: PartialTheme = {
- chartMargins: {
- left: range('margin left', 0, 50, 10, 'Margins'),
- right: range('margin right', 0, 50, 10, 'Margins'),
- top: range('margin top', 0, 50, 10, 'Margins'),
- bottom: range('margin bottom', 0, 50, 10, 'Margins'),
- },
- chartPaddings: {
- left: range('padding left', 0, 50, 10, 'Paddings'),
- right: range('padding right', 0, 50, 10, 'Paddings'),
- top: range('padding top', 0, 50, 10, 'Paddings'),
- bottom: range('padding bottom', 0, 50, 10, 'Paddings'),
- },
- lineSeriesStyle: {
- line: {
- stroke: customizeLineStroke ? color('customLineStroke', 'red', 'line') : undefined,
- strokeWidth: range('lineStrokeWidth', 0, 10, 1, 'line'),
- visible: boolean('lineVisible', true, 'line'),
- },
- point: {
- visible: boolean('linePointVisible', true, 'line'),
- radius: range('linePointRadius', 0, 20, 1, 'line', 0.5),
- fill: color('linePointFill', 'white', 'line'),
- stroke: customizePointStroke ? color('customLinePointStroke', 'red', 'line') : undefined,
- strokeWidth: range('linePointStrokeWidth', 0, 20, 0.5, 'line'),
- opacity: range('linePointOpacity', 0, 1, 1, 'line', 0.01),
- },
- },
- areaSeriesStyle: {
- area: {
- fill: customizeAreaFill ? color('customAreaFill', 'red', 'area') : undefined,
- visible: boolean('aAreaVisible', true, 'area'),
- opacity: range('aAreaOpacity', 0, 1, 1, 'area'),
- },
- line: {
- stroke: customizeAreaLineStroke ? color('customAreaLineStroke', 'red', 'area') : undefined,
- strokeWidth: range('aStrokeWidth', 0, 10, 1, 'area'),
- visible: boolean('aLineVisible', true, 'area'),
- },
- point: {
- visible: boolean('aPointVisible', true, 'area'),
- fill: color('aPointFill', 'white', 'area'),
- radius: range('aPointRadius', 0, 20, 1, 'area'),
- stroke: color('aPointStroke', 'white', 'area'),
- strokeWidth: range('aPointStrokeWidth', 0, 20, 0.5, 'area'),
- opacity: range('aPointOpacity', 0, 1, 0.01, 'area'),
- },
- },
- barSeriesStyle: {
- rect: {
- fill: customizeRectFill ? color('recCustomFull', 'red', 'bar') : undefined,
- opacity: range('rectOpacity', 0, 1, 0.5, 'bar', 0.1),
- },
- rectBorder: {
- stroke: color('bBorderStroke', 'white', 'bar'),
- strokeWidth: range('bStrokeWidth', 0, 10, 1, 'bar'),
- visible: boolean('bBorderVisible', true, 'bar'),
- },
- },
- sharedStyle: {
- default: {
- opacity: range('sOpacity', 0, 1, 1, 'Shared', 0.05),
- },
- highlighted: {
- opacity: range('sHighlighted', 0, 1, 1, 'Shared', 0.05),
- },
- unhighlighted: {
- opacity: range('sUnhighlighted', 0, 1, 0.25, 'Shared', 0.05),
- },
- },
- colors: {
- vizColors: select(
- 'vizColors',
- {
- colorBlind: palettes.echPaletteColorBlind.colors,
- darkBackground: palettes.echPaletteForDarkBackground.colors,
- lightBackground: palettes.echPaletteForLightBackground.colors,
- forStatus: palettes.echPaletteForStatus.colors,
- },
- palettes.echPaletteColorBlind.colors,
- 'Colors',
- ),
- defaultVizColor: DEFAULT_MISSING_COLOR,
- },
- };
-
- const darkmode = boolean('darkmode', false, 'Colors');
- const className = darkmode ? 'story-chart-dark' : 'story-chart';
- switchTheme(darkmode ? 'dark' : 'light');
-
- return (
-
-
-
- Number(d).toFixed(2)}
- />
-
- Number(d).toFixed(2)}
- />
+
+
-
-
- );
- })
- .add('partial custom theme', () => {
- const customPartialTheme: PartialTheme = {
- barSeriesStyle: {
- rectBorder: {
- stroke: color('BarBorderStroke', 'white'),
- visible: true,
- },
- },
- };
-
- return (
-
-
-
- Number(d).toFixed(2)}
- />
-
- Number(d).toFixed(2)}
- />
+
+
- );
- })
- .add('partial custom theme with baseTheme', () => {
- const customPartialTheme: PartialTheme = {
- barSeriesStyle: {
- rectBorder: {
- stroke: color('BarBorderStroke', 'white'),
- visible: true,
- },
- },
- };
-
- return (
-
-
-
- Number(d).toFixed(2)}
- />
-
- Number(d).toFixed(2)}
- />
+
+
- );
- })
- .add(
- 'multiple custom partial themes',
- () => {
- const primaryTheme: PartialTheme = {
- barSeriesStyle: {
- rect: {
- fill: color('bar fill - primary theme', 'red'),
- },
- },
- };
- const secondaryTheme: PartialTheme = {
- barSeriesStyle: {
- rect: {
- fill: color('bar fill - secondary theme', 'blue'),
- opacity: range('bar opacity - secondary theme', 0.1, 1, 0.7, undefined, 0.1),
- },
- },
- };
+