Skip to content

Commit f660464

Browse files
seveibarseveibar
committed
refactor out visible point calculation
1 parent cdf5bce commit f660464

File tree

1 file changed

+105
-104
lines changed

1 file changed

+105
-104
lines changed

‎src/components/Wave/index.js‎

Lines changed: 105 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Fragment } from "react"
1+
import React, { Fragment, useMemo } from "react"
22
import range from "lodash/range"
33
import { styled } from "@material-ui/core/styles"
44
import colorAlpha from "color-alpha"
@@ -11,8 +11,6 @@ const userSelectOffStyle = {
1111
fontVariantNumeric: "tabular-nums",
1212
}
1313

14-
const Container = styled("div")({})
15-
1614
const reduceForVisibleDuration = (data, startTime, visibleDuration, width) => {
1715
const firstInnerIndex = data.findIndex(([t]) => t >= startTime)
1816
let visibleSamples = data
@@ -79,127 +77,130 @@ export const Wave = ({
7977
minorGridLinePixelDistance,
8078
} = gridLineMetrics
8179

80+
const visibleTransformedPointsOnCurves = useMemo(() => {
81+
const visibleTransformedPointsOnCurves = []
82+
for (const curve of curves) {
83+
visibleTransformedPointsOnCurves.push(
84+
reduceForVisibleDuration(
85+
curve.data,
86+
startTimeOnGraph,
87+
visibleDuration,
88+
width
89+
).map(([t, y]) => {
90+
return transformMatrix.applyToPoint(t, y)
91+
})
92+
)
93+
}
94+
return visibleTransformedPointsOnCurves
95+
}, [transformMatrix, curves, startTimeOnGraph, visibleDuration, width])
96+
8297
return (
83-
<Container style={{ curves, width, height }}>
84-
<svg width={width} height={height}>
85-
{range(-5, numberOfMajorGridLines + 1).map((i) => {
86-
const timeAtLine =
87-
Math.floor(startTimeOnGraph / majorDuration) * majorDuration +
88-
majorDuration * i
98+
<svg width={width} height={height}>
99+
{range(-5, numberOfMajorGridLines + 1).map((i) => {
100+
const timeAtLine =
101+
Math.floor(startTimeOnGraph / majorDuration) * majorDuration +
102+
majorDuration * i
89103

90-
const lineX =
91-
majorGridLinePixelOffset + majorGridLinePixelDistance * i
104+
const lineX = majorGridLinePixelOffset + majorGridLinePixelDistance * i
92105

93-
const globalTimelineIndex = Math.floor(timeAtLine / majorDuration)
106+
const globalTimelineIndex = Math.floor(timeAtLine / majorDuration)
94107

95-
let textElm = null
96-
if (globalTimelineIndex % 1 === 0) {
97-
const timeLines = formatTime(
98-
timeAtLine,
99-
timeFormat,
100-
visibleDuration
101-
).split("\n")
102-
textElm = timeLines.map((tl, i) => (
103-
<text
104-
key={i}
105-
x={lineX + 5}
106-
y={12 + i * 12}
107-
fill={colors.base0}
108-
fontSize={12}
109-
pointerEvents="none"
110-
style={userSelectOffStyle}
111-
>
112-
{tl}
113-
</text>
114-
))
115-
}
108+
let textElm = null
109+
if (globalTimelineIndex % 1 === 0) {
110+
const timeLines = formatTime(
111+
timeAtLine,
112+
timeFormat,
113+
visibleDuration
114+
).split("\n")
115+
textElm = timeLines.map((tl, i) => (
116+
<text
117+
key={i}
118+
x={lineX + 5}
119+
y={12 + i * 12}
120+
fill={colors.base0}
121+
fontSize={12}
122+
pointerEvents="none"
123+
style={userSelectOffStyle}
124+
>
125+
{tl}
126+
</text>
127+
))
128+
}
116129

117-
return (
118-
<Fragment key={i}>
119-
{i >= 0 && (
120-
<line
121-
opacity={0.5}
122-
stroke={colors.base01}
123-
x1={lineX}
124-
x2={lineX}
125-
y1={0}
126-
y2={height}
127-
/>
128-
)}
129-
{textElm}
130-
</Fragment>
131-
)
132-
})}
133-
{numberOfMajorGridLines < 12 &&
134-
range(numberOfMinorGridLines).map((i) => {
135-
const lineX =
136-
minorGridLinePixelOffset + minorGridLinePixelDistance * i
137-
return (
130+
return (
131+
<Fragment key={i}>
132+
{i >= 0 && (
138133
<line
139-
key={i}
140-
opacity={0.25}
134+
opacity={0.5}
141135
stroke={colors.base01}
142136
x1={lineX}
143137
x2={lineX}
144138
y1={0}
145139
y2={height}
146140
/>
147-
)
148-
})}
149-
{durationGroups.flatMap(({ durations, color: dgColor }, dgi) => {
150-
return durations.map((duration, di) => {
151-
const { x: startX } = transformMatrix.applyToPoint(
152-
duration.start,
153-
0
154-
)
155-
const { x: endX } = transformMatrix.applyToPoint(duration.end, 0)
156-
if (isNaN(startX) || isNaN(endX)) return null
157-
return (
158-
<rect
159-
key={`${dgi},${di}`}
160-
fill={colorAlpha(duration.color || dgColor, 0.2)}
161-
x={startX}
162-
y={0}
163-
width={endX - startX}
164-
height={height}
165-
/>
166-
)
167-
})
168-
})}
169-
{curves.map((curve, i) => (
170-
<polyline
171-
key={i}
172-
stroke={curve.color}
173-
fill="transparent"
174-
points={reduceForVisibleDuration(
175-
curve.data,
176-
startTimeOnGraph,
177-
visibleDuration,
178-
width
179-
)
180-
.map(([t, y]) => {
181-
const p = transformMatrix.applyToPoint(t, y)
182-
return `${p.x},${p.y}`
183-
})
184-
.join(" ")}
185-
/>
186-
))}
187-
{timestamps.map((ts, i) => {
188-
const { x } = transformMatrix.applyToPoint(ts.time, 0)
141+
)}
142+
{textElm}
143+
</Fragment>
144+
)
145+
})}
146+
{numberOfMajorGridLines < 12 &&
147+
range(numberOfMinorGridLines).map((i) => {
148+
const lineX =
149+
minorGridLinePixelOffset + minorGridLinePixelDistance * i
189150
return (
190151
<line
191152
key={i}
192-
x1={x}
193-
x2={x}
153+
opacity={0.25}
154+
stroke={colors.base01}
155+
x1={lineX}
156+
x2={lineX}
194157
y1={0}
195158
y2={height}
196-
stroke={ts.color}
197-
strokeWidth={1}
198159
/>
199160
)
200161
})}
201-
</svg>
202-
</Container>
162+
{durationGroups.flatMap(({ durations, color: dgColor }, dgi) => {
163+
return durations.map((duration, di) => {
164+
const { x: startX } = transformMatrix.applyToPoint(duration.start, 0)
165+
const { x: endX } = transformMatrix.applyToPoint(duration.end, 0)
166+
if (isNaN(startX) || isNaN(endX)) return null
167+
return (
168+
<rect
169+
key={`${dgi},${di}`}
170+
fill={colorAlpha(duration.color || dgColor, 0.2)}
171+
x={startX}
172+
y={0}
173+
width={endX - startX}
174+
height={height}
175+
/>
176+
)
177+
})
178+
})}
179+
{curves.map((curve, i) => (
180+
<polyline
181+
key={i}
182+
stroke={curve.color}
183+
fill="transparent"
184+
points={visibleTransformedPointsOnCurves[i]
185+
.map((p) => `${p.x},${p.y}`)
186+
.join(" ")}
187+
/>
188+
))}
189+
{timestamps.map((ts, i) => {
190+
const { x } = transformMatrix.applyToPoint(ts.time, 0)
191+
return (
192+
<line
193+
key={i}
194+
x1={x}
195+
x2={x}
196+
y1={0}
197+
y2={height}
198+
stroke={ts.color}
199+
strokeWidth={1}
200+
/>
201+
)
202+
})}
203+
</svg>
203204
)
204205
}
205206

0 commit comments

Comments
 (0)