-
Notifications
You must be signed in to change notification settings - Fork 16
/
ColorBar.stories.tsx
96 lines (83 loc) · 2.35 KB
/
ColorBar.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import { ColorBar, ScaleType } from '@h5web/lib';
import type { ColorBarProps } from '@h5web/lib';
import type { Meta, Story } from '@storybook/react/types-6-0';
import FillHeight from './decorators/FillHeight';
export interface TemplateProps extends Omit<ColorBarProps, 'domain'> {
domainMin: number;
domainMax: number;
}
const Template: Story<TemplateProps> = (args) => {
const { domainMin: min, domainMax: max, ...colorBarArgs } = args;
return <ColorBar {...colorBarArgs} domain={[min, max]} />;
};
export const Default = Template.bind({});
Default.args = {
domainMin: 0.1,
domainMax: 1,
scaleType: ScaleType.Linear,
colorMap: 'Viridis',
};
export const ColorMapStory = Template.bind({});
ColorMapStory.storyName = 'Color Map';
ColorMapStory.args = { ...Default.args, colorMap: 'Blues' };
export const LogScale = Template.bind({});
LogScale.args = { ...Default.args, scaleType: ScaleType.Log };
export const NegativeLogScale = Template.bind({});
NegativeLogScale.storyName = 'Log Scale with negative domain';
NegativeLogScale.args = {
...Default.args,
scaleType: ScaleType.Log,
domainMin: -10,
domainMax: -1,
};
export const SymLogScale = Template.bind({});
SymLogScale.args = {
...Default.args,
scaleType: ScaleType.SymLog,
domainMin: -6,
domainMax: 6,
};
export const WithBounds = Template.bind({});
WithBounds.storyName = 'With bounds';
WithBounds.args = {
...Default.args,
domainMin: -235.111,
domainMax: 98_765,
withBounds: true,
};
export const EmptyDomain = Template.bind({});
EmptyDomain.storyName = 'Empty domain';
EmptyDomain.args = {
...Default.args,
domainMin: 0,
domainMax: 0,
withBounds: true,
};
export const InvertColorMap = Template.bind({});
InvertColorMap.args = {
...Default.args,
invertColorMap: true,
};
export { Template as ColorMapTemplate };
export default {
title: 'Building Blocks/ColorBar',
component: ColorBar,
decorators: [FillHeight],
parameters: {
layout: 'fullscreen',
controls: { exclude: ['domain'] },
},
argTypes: {
domainMin: {
control: { type: 'range', min: -10, max: 10, step: 0.1 },
},
domainMax: {
control: { type: 'range', min: -10, max: 10, step: 0.1 },
},
scaleType: {
control: { type: 'inline-radio' },
options: [ScaleType.Linear, ScaleType.Log, ScaleType.SymLog],
},
},
excludeStories: ['ColorMapTemplate'],
} as Meta;