react-d3-utils/stories/hooks/LinearPrimaryExamples.stories.tsx at 3e3da5a0f06392579ff30fc0ac26f238248c3d61 · zakodium-oss/react-d3-utils · GitHub

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import type { Meta } from '@storybook/react-vite';
import { useState } from 'react';

import { HorizontalExample, VerticalExample } from './TestAxis.js';

export default {
  title: 'Hooks/static/useLinearPrimaryTicks',
  component: HorizontalExample || VerticalExample,
} as Meta;
interface Props {
  domain: [number, number];
  scientificNotation: boolean;
}
export function HorizontalCentaines(props: Props) {
  return <HorizontalExample {...props} type="linear" />;
}
HorizontalCentaines.args = {
  domain: [-100, 500],
  scientificNotation: false,
};
HorizontalCentaines.storyName = 'Horizontal centaines';
export function HorizontalCentainesBottom(props: Props) {
  return <HorizontalExample {...props} orientation="bottom" type="linear" />;
}

HorizontalCentainesBottom.args = {
  domain: [-100, 500],
  scientificNotation: false,
};
HorizontalCentainesBottom.storyName = 'Horizontal centaines bottom';
export function HorizontalDecimals() {
  return (
    <HorizontalExample
      domain={[-0.0001, 0.00005]}
      scientificNotation={false}
      type="linear"
    />
  );
}
HorizontalDecimals.storyName = 'Horizontal decimals';

export function HorizontalScientificCentaines() {
  return (
    <HorizontalExample domain={[-100, 500]} scientificNotation type="linear" />
  );
}
HorizontalScientificCentaines.storyName = 'Horizontal scientific centaines';

export function HorizontalScientificDecimals() {
  return (
    <HorizontalExample
      domain={[-0.0001, 0.00005]}
      scientificNotation
      type="linear"
    />
  );
}
HorizontalScientificDecimals.storyName = 'Horizontal scientific decimals';

export function HorizontalToggleDomain() {
  const domain1 = [-1, 1] as const;
  const domain2 = [0, 0] as const;
  const [which, setWhich] = useState(1);

  return (
    <div>
      <HorizontalExample
        domain={which === 1 ? domain1 : domain2}
        type="linear"
      />
      <button type="button" onClick={() => setWhich((w) => (w === 1 ? 2 : 1))}>
        Toggle domain
      </button>
    </div>
  );
}
HorizontalToggleDomain.storyName = 'Horizontal toggle domain';

export function VerticalCentaines() {
  return (
    <VerticalExample
      domain={[-100, 500]}
      scientificNotation={false}
      type="linear"
    />
  );
}
VerticalCentaines.storyName = 'Vertical centaines';
export function VerticalCentainesRight() {
  return (
    <VerticalExample
      domain={[-100, 500]}
      scientificNotation={false}
      orientation="right"
      type="linear"
    />
  );
}
VerticalCentainesRight.storyName = 'Vertical centaines right';
export function VerticalDecimals() {
  return (
    <VerticalExample
      domain={[-0.0001, 0.00005]}
      scientificNotation={false}
      type="linear"
    />
  );
}
VerticalDecimals.storyName = 'Vertical decimals';

export function VerticalScientificCentaines() {
  return (
    <VerticalExample domain={[-100, 500]} scientificNotation type="linear" />
  );
}
VerticalScientificCentaines.storyName = 'Vertical scientific centaines';

export function VerticalScientificDecimals() {
  return (
    <VerticalExample
      domain={[-0.0001, 0.00005]}
      scientificNotation
      type="linear"
    />
  );
}
VerticalScientificDecimals.storyName = 'Vertical scientific decimals';