-
Notifications
You must be signed in to change notification settings - Fork 16
/
VisCanvasInteraction.stories.tsx
85 lines (75 loc) · 2.18 KB
/
VisCanvasInteraction.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
import { PanZoomMesh, TooltipMesh, SelectionMesh, VisCanvas } from '@h5web/lib';
import type { TooltipMeshProps } from '@h5web/lib';
import { formatTooltipVal } from '@h5web/shared';
import type { Meta, Story } from '@storybook/react';
import VisCanvasStoriesConfig from './VisCanvas.stories';
interface TemplateProps {
panZoom?: boolean;
tooltipValue?: string;
guides?: TooltipMeshProps['guides'];
drawSelection?: boolean;
}
const Template: Story<TemplateProps> = (args) => {
const { panZoom = false, tooltipValue, guides, drawSelection = false } = args;
return (
<VisCanvas
abscissaConfig={{ visDomain: [-10, 0], showGrid: true }}
ordinateConfig={{ visDomain: [50, 100], showGrid: true }}
>
{panZoom && <PanZoomMesh />}
{tooltipValue && (
<TooltipMesh
guides={guides}
renderTooltip={(x, y) => (
<>
{`x=${formatTooltipVal(x)}, y=${formatTooltipVal(y)}`}
<div>
<strong>{tooltipValue}</strong>
</div>
</>
)}
/>
)}
{drawSelection && <SelectionMesh />}
</VisCanvas>
);
};
export const PanZoom = Template.bind({});
PanZoom.args = { panZoom: true };
PanZoom.argTypes = { guides: { table: { disable: true } } };
export const Tooltip = Template.bind({});
Tooltip.args = {
tooltipValue: 'no value to display',
};
export const TooltipWithGuides = Template.bind({});
TooltipWithGuides.args = {
tooltipValue: 'guides="both"',
guides: 'both',
};
export const TooltipWithPanZoom = Template.bind({});
TooltipWithPanZoom.args = {
panZoom: true,
tooltipValue: '<PanZoomMesh /> must come first',
guides: 'vertical',
};
export const SelectingRegions = Template.bind({});
SelectingRegions.args = {
panZoom: false,
drawSelection: true,
};
export default {
...VisCanvasStoriesConfig,
title: 'Building Blocks/VisCanvas/Interaction',
parameters: {
...VisCanvasStoriesConfig.parameters,
controls: {
include: ['panZoom', 'tooltipValue', 'guides', 'drawSelection'],
},
},
argTypes: {
guides: {
control: { type: 'inline-radio' },
options: ['horizontal', 'vertical', 'both'],
},
},
} as Meta;