Skip to content

Commit 285c042

Browse files
frysztakfrysztak
committed
demo: draw axes, better default values
1 parent f47e2ce commit 285c042

File tree

5 files changed

+85
-21
lines changed

5 files changed

+85
-21
lines changed

‎example/LoaderDemo.tsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { useWaveforms } from './hooks/useWaveforms';
88
export function LoaderDemo() {
99
const [runAnimation, setRunAnimation] = useState(false);
1010
const [requestOffset, setRequestOffset] = useState(100);
11-
const [requestDuration, setRequestDuration] = useState(500);
11+
const [requestDuration, setRequestDuration] = useState(1000);
1212
const [debounceDelay, setDebounceDelay] = useState(300);
13-
const [debounceTimeOn, setDebounceTimeOn] = useState(500);
13+
const [debounceTimeOn, setDebounceTimeOn] = useState(600);
1414
const [startClicked, setStartClicked] = useState(false);
1515

1616
const totalLength = 3000;
@@ -50,15 +50,7 @@ export function LoaderDemo() {
5050
if (startClicked) {
5151
start();
5252
}
53-
}, [
54-
requestOffset,
55-
requestDuration,
56-
debounceDelay,
57-
debounceTimeOn,
58-
reset,
59-
start,
60-
startClicked,
61-
]);
53+
}, [start, startClicked]);
6254

6355
useEffect(() => {
6456
if (done) {
@@ -76,27 +68,31 @@ export function LoaderDemo() {
7668
minValue={0}
7769
maxValue={400}
7870
onValueChange={setRequestOffset}
71+
disabled={runAnimation}
7972
/>
8073
<TimeSlider
8174
name="Request duration"
8275
value={requestDuration}
8376
minValue={20}
84-
maxValue={1000}
77+
maxValue={1500}
8578
onValueChange={setRequestDuration}
79+
disabled={runAnimation}
8680
/>
8781
<TimeSlider
8882
name="Debounce delay"
8983
value={debounceDelay}
9084
minValue={1}
9185
maxValue={1000}
9286
onValueChange={setDebounceDelay}
87+
disabled={runAnimation}
9388
/>
9489
<TimeSlider
9590
name="Debounce time on"
9691
value={debounceTimeOn}
9792
minValue={1}
9893
maxValue={1000}
9994
onValueChange={setDebounceTimeOn}
95+
disabled={runAnimation}
10096
/>
10197

10298
<Button size="lg" onClick={start} disabled={runAnimation}>
@@ -106,6 +102,7 @@ export function LoaderDemo() {
106102
<Waveforms
107103
totalLength={totalLength}
108104
x={x}
105+
requestOffset={requestOffset}
109106
originalLength={originalLength ?? totalLength}
110107
originalOffset={originalOffset ?? totalLength}
111108
debouncedLength={debouncedLength ?? totalLength}

‎example/components/PulseWave.tsx

+61-7
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
11
import { useToken } from '@chakra-ui/core';
22
import * as React from 'react';
3+
import { useMemo } from 'react';
34
import { clamp } from '../hooks/utils';
45

56
export interface PulseWaveProps {
67
highOffset: number | null;
78
highLength: number | null;
89
x: number;
10+
tickStart: number;
11+
totalLength: number;
912
}
1013

1114
export function PulseWave(props: PulseWaveProps) {
12-
const { highLength, highOffset, x } = props;
15+
const { highLength, highOffset, x, tickStart, totalLength } = props;
1316

14-
const blue = useToken('colors', 'blue.300');
17+
const [blue, gray] = useToken('colors', ['blue.300', 'gray.300']);
1518

16-
const height = 80;
19+
const arrowSize = 6;
20+
const axisMargin = arrowSize * 2;
21+
22+
const height = 80 + 2 * axisMargin + arrowSize;
1723
const margin = 8;
1824

19-
const lowY = height - margin;
25+
const lowY = height - margin - 2 * axisMargin;
2026
const highY = margin;
2127

22-
const line = () => {
28+
const axisY = height - arrowSize - axisMargin;
29+
30+
const tickStep = 200;
31+
32+
const line = useMemo(() => {
2333
if (highOffset !== null && highLength !== null) {
2434
const highX = clamp(highOffset + highLength, 0, 100);
2535
return (
@@ -39,7 +49,12 @@ export function PulseWave(props: PulseWaveProps) {
3949
} else {
4050
return <line x1="0" y1={lowY} x2="100%" y2={lowY} />;
4151
}
42-
};
52+
}, [highLength, highOffset, highY, lowY]);
53+
54+
const ticks = useMemo(() => {
55+
const nTicks = Math.floor((totalLength - tickStart) / tickStep);
56+
return [...Array(nTicks).keys()].map(x => tickStart + tickStep * x);
57+
}, [tickStart, totalLength]);
4358

4459
return (
4560
<svg
@@ -50,7 +65,46 @@ export function PulseWave(props: PulseWaveProps) {
5065
shapeRendering="crispedges"
5166
style={{ clipPath: `inset(0 ${100 - x}% 0 0)` }}
5267
>
53-
<g stroke={blue}>{line()}</g>
68+
<g stroke={blue}>{line}</g>
69+
<g stroke={gray} strokeWidth="2">
70+
<line x1="0" x2="100%" y1={axisY} y2={axisY} />
71+
<line
72+
x1="0"
73+
x2={arrowSize}
74+
y1={axisY - axisMargin / 2}
75+
y2={axisY}
76+
style={{ transform: `translate(calc(100% - ${arrowSize}px))` }}
77+
/>
78+
<line
79+
x1={arrowSize}
80+
x2="0"
81+
y1={axisY}
82+
y2={axisY + axisMargin / 2}
83+
style={{ transform: `translate(calc(100% - ${arrowSize}px))` }}
84+
/>
85+
86+
{ticks.map(x => (
87+
<g key={x}>
88+
<line
89+
x1={`${(x * 100) / totalLength}%`}
90+
x2={`${(x * 100) / totalLength}%`}
91+
y1={axisY}
92+
y2={axisY - axisMargin / 2}
93+
/>
94+
<text
95+
x={`${(x * 100) / totalLength}%`}
96+
y={axisY + axisMargin}
97+
textAnchor="middle"
98+
dominantBaseline="middle"
99+
strokeWidth="0"
100+
fontSize="small"
101+
fill={gray}
102+
>
103+
{x}
104+
</text>
105+
</g>
106+
))}
107+
</g>
54108
</svg>
55109
);
56110
}

‎example/components/TimeSlider.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,14 @@ import * as React from 'react';
1010

1111
export interface TimeSliderProps {
1212
name: string;
13+
disabled: boolean;
1314
value: number;
1415
minValue: number;
1516
maxValue: number;
1617
onValueChange: (ms: number) => void;
1718
}
1819
export function TimeSlider(props: TimeSliderProps) {
19-
const { name, value, minValue, maxValue, onValueChange } = props;
20+
const { name, disabled, value, minValue, maxValue, onValueChange } = props;
2021
return (
2122
<HStack width={'full'} spacing={4}>
2223
<Box flexBasis={'30%'}>{name}</Box>
@@ -27,6 +28,7 @@ export function TimeSlider(props: TimeSliderProps) {
2728
min={minValue}
2829
max={maxValue}
2930
step={20}
31+
isDisabled={disabled}
3032
>
3133
<SliderTrack>
3234
<SliderFilledTrack />

‎example/components/Waveforms.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { PulseWave } from './PulseWave';
55
export interface WavesformsProps {
66
totalLength: number;
77
x: number;
8+
requestOffset: number;
9+
810
originalOffset: number;
911
originalLength: number;
1012
debouncedOffset: number | null;
@@ -22,6 +24,8 @@ export function Waveforms(props: WavesformsProps) {
2224
const {
2325
totalLength,
2426
x,
27+
requestOffset,
28+
2529
originalOffset,
2630
originalLength,
2731
debouncedOffset,
@@ -42,6 +46,8 @@ export function Waveforms(props: WavesformsProps) {
4246
highOffset={((originalOffset ?? totalLength) * 100) / totalLength}
4347
highLength={((originalLength ?? totalLength) * 100) / totalLength}
4448
x={x}
49+
tickStart={requestOffset}
50+
totalLength={totalLength}
4551
/>
4652
<Spinner opacity={isLoading ? 1 : 0} />
4753
</HStack>
@@ -56,6 +62,8 @@ export function Waveforms(props: WavesformsProps) {
5662
}
5763
highLength={((debouncedLength ?? totalLength) * 100) / totalLength}
5864
x={x}
65+
tickStart={requestOffset}
66+
totalLength={totalLength}
5967
/>
6068
<Spinner opacity={debouncedIsLoading ? 1 : 0} />
6169
</HStack>
@@ -70,6 +78,8 @@ export function Waveforms(props: WavesformsProps) {
7078
}
7179
highLength={((debouncedLength2 ?? totalLength) * 100) / totalLength}
7280
x={x}
81+
tickStart={requestOffset}
82+
totalLength={totalLength}
7383
/>
7484
<Spinner opacity={debouncedIsLoading2 ? 1 : 0} />
7585
</HStack>

‎example/tsconfig.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"preserveConstEnums": true,
1414
"sourceMap": true,
1515
"lib": ["es2015", "es2016", "dom"],
16-
"types": ["node"]
16+
"types": ["node"],
17+
"downlevelIteration": true
1718
}
1819
}

0 commit comments

Comments
 (0)