Skip to content

Commit a7cd3a0

Browse files
tannerlinsleytannerlinsley
committed
fix: default tooltip/cursors, voronoi filtering
1 parent 4fc0126 commit a7cd3a0

File tree

4 files changed

+1975
-1946
lines changed

4 files changed

+1975
-1946
lines changed

‎src/components/Chart.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@ function defaultChartOptions<TDatum>(
7575
useIntersectionObserver: options.useIntersectionObserver ?? true,
7676
intersectionObserverRootMargin:
7777
options.intersectionObserverRootMargin ?? '1000px',
78+
tooltip: options.tooltip ?? true,
79+
primaryCursor: options.primaryCursor ?? true,
80+
secondaryCursor: options.secondaryCursor ?? true,
7881
}
7982
}
8083

‎src/components/Voronoi.tsx

Lines changed: 129 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -69,123 +69,146 @@ function PrimaryVoronoi<TDatum>({
6969
} = useChartContext<TDatum>()
7070

7171
return React.useMemo(() => {
72-
const columns = series[0].datums.map((datum, i) => {
73-
const prev = series[0].datums[i - 1]
74-
const next = series[0].datums[i + 1]
75-
76-
const primaryValue = primaryAxis.getValue(datum.originalDatum)
77-
const primaryPx = getPrimary(datum, primaryAxis)
78-
79-
let range = primaryAxis?.scale.range() ?? [0, 0]
80-
81-
let [primaryStart, primaryEnd] = range
82-
83-
if (prev) {
84-
const prevPx = getPrimary(prev, primaryAxis)
85-
primaryStart = primaryPx - (primaryPx - prevPx) / 2
86-
}
87-
88-
if (next) {
89-
const nextPx = getPrimary(next, primaryAxis)
90-
primaryEnd = primaryPx + (nextPx - primaryPx) / 2
91-
}
92-
93-
const datums = groupedDatums.get(`${primaryValue}`) ?? []
94-
95-
datums.sort((a, b) => {
96-
const aAxis = secondaryAxes.find(d => d.id === a.secondaryAxisId)
97-
const bAxis = secondaryAxes.find(d => d.id === b.secondaryAxisId)
98-
99-
const aPx =
100-
aAxis?.scale(
101-
aAxis.stacked ? a.stackData?.[1] : aAxis?.getValue(a.originalDatum)
102-
) ?? NaN
103-
const bPx =
104-
bAxis?.scale(
105-
bAxis.stacked ? b.stackData?.[1] : bAxis?.getValue(b.originalDatum)
106-
) ?? NaN
107-
108-
return aPx - bPx
72+
const columns = series[0].datums
73+
.filter(datum => {
74+
const primaryValue = primaryAxis.getValue(datum.originalDatum)
75+
return primaryValue !== 'undefined' && primaryValue !== null
10976
})
77+
.map((datum, i, all) => {
78+
const prev = all[i - 1]
79+
const next = all[i + 1]
11080

111-
return {
112-
primaryStart,
113-
primaryEnd,
114-
primaryPx,
115-
datumBoundaries: datums.map((datum, i) => {
116-
const prev = datums[i - 1]
117-
const next = datums[i + 1]
118-
119-
const secondaryAxis = secondaryAxes.find(
120-
d => d.id === datum.secondaryAxisId
121-
)
122-
123-
if (secondaryAxis?.stacked) {
124-
let range = secondaryAxis?.scale.range() ?? [0, 0]
81+
const primaryValue = primaryAxis.getValue(datum.originalDatum)
82+
const primaryPx = getPrimary(datum, primaryAxis)
12583

126-
let stackData = [datum.stackData?.[0], datum.stackData?.[1]]
84+
let range = primaryAxis?.scale.range() ?? [0, 0]
12785

128-
if (secondaryAxis?.isVertical) {
129-
range.reverse()
130-
stackData.reverse()
131-
}
86+
let [primaryStart, primaryEnd] = range
13287

133-
let [secondaryStart, secondaryEnd] = range
88+
if (prev) {
89+
const prevPx = getPrimary(prev, primaryAxis)
90+
primaryStart = primaryPx - (primaryPx - prevPx) / 2
91+
}
13492

135-
if (prev) {
136-
secondaryStart = secondaryAxis?.scale(stackData[0] ?? NaN) ?? NaN
137-
}
93+
if (next) {
94+
const nextPx = getPrimary(next, primaryAxis)
95+
primaryEnd = primaryPx + (nextPx - primaryPx) / 2
96+
}
13897

139-
if (next) {
140-
secondaryEnd = secondaryAxis?.scale(stackData[1] ?? NaN) ?? NaN
141-
}
98+
const datums = groupedDatums.get(`${primaryValue}`) ?? []
14299

143-
return {
144-
secondaryStart,
145-
secondaryEnd,
146-
datum,
147-
}
148-
}
100+
datums.sort((a, b) => {
101+
const aAxis = secondaryAxes.find(d => d.id === a.secondaryAxisId)
102+
const bAxis = secondaryAxes.find(d => d.id === b.secondaryAxisId)
149103

150-
const value =
151-
secondaryAxis?.scale(
152-
secondaryAxis?.getValue(datum.originalDatum)
104+
const aPx =
105+
aAxis?.scale(
106+
aAxis.stacked
107+
? a.stackData?.[1]
108+
: aAxis?.getValue(a.originalDatum)
109+
) ?? NaN
110+
const bPx =
111+
bAxis?.scale(
112+
bAxis.stacked
113+
? b.stackData?.[1]
114+
: bAxis?.getValue(b.originalDatum)
153115
) ?? NaN
154116

155-
let range = secondaryAxis?.scale.range() ?? [0, 0]
156-
157-
if (secondaryAxis?.isVertical) {
158-
range.reverse()
159-
}
160-
161-
let [secondaryStart, secondaryEnd] = range
162-
163-
if (prev) {
164-
const prevAxis = secondaryAxes.find(
165-
d => d.id === prev?.secondaryAxisId
166-
)
167-
const prevValue =
168-
prevAxis?.scale(prevAxis?.getValue(prev.originalDatum)) ?? NaN
169-
secondaryStart = value - (value - prevValue) / 2
170-
}
171-
172-
if (next) {
173-
const nextAxis = secondaryAxes.find(
174-
d => d.id === next?.secondaryAxisId
175-
)
176-
const nextValue =
177-
nextAxis?.scale(nextAxis?.getValue(next.originalDatum)) ?? NaN
178-
secondaryEnd = value + (nextValue - value) / 2
179-
}
180-
181-
return {
182-
secondaryStart,
183-
secondaryEnd,
184-
datum,
185-
}
186-
}),
187-
}
188-
})
117+
return aPx - bPx
118+
})
119+
120+
return {
121+
primaryStart,
122+
primaryEnd,
123+
primaryPx,
124+
datumBoundaries: datums
125+
.filter(datum => {
126+
const secondaryAxis = secondaryAxes.find(
127+
d => d.id === datum.secondaryAxisId
128+
)
129+
const secondaryValue = secondaryAxis?.getValue(
130+
datum.originalDatum
131+
)
132+
return (
133+
typeof secondaryValue !== 'undefined' && secondaryValue !== null
134+
)
135+
})
136+
.map((datum, i, all) => {
137+
const prev = all[i - 1]
138+
const next = all[i + 1]
139+
140+
const secondaryAxis = secondaryAxes.find(
141+
d => d.id === datum.secondaryAxisId
142+
)
143+
144+
if (secondaryAxis?.stacked) {
145+
let range = secondaryAxis?.scale.range() ?? [0, 0]
146+
147+
let stackData = [datum.stackData?.[0], datum.stackData?.[1]]
148+
149+
if (secondaryAxis?.isVertical) {
150+
range.reverse()
151+
stackData.reverse()
152+
}
153+
154+
let [secondaryStart, secondaryEnd] = range
155+
156+
if (prev) {
157+
secondaryStart =
158+
secondaryAxis?.scale(stackData[0] ?? NaN) ?? NaN
159+
}
160+
161+
if (next) {
162+
secondaryEnd =
163+
secondaryAxis?.scale(stackData[1] ?? NaN) ?? NaN
164+
}
165+
166+
return {
167+
secondaryStart,
168+
secondaryEnd,
169+
datum,
170+
}
171+
}
172+
173+
const value =
174+
secondaryAxis?.scale(
175+
secondaryAxis?.getValue(datum.originalDatum)
176+
) ?? NaN
177+
178+
let range = secondaryAxis?.scale.range() ?? [0, 0]
179+
180+
if (secondaryAxis?.isVertical) {
181+
range.reverse()
182+
}
183+
184+
let [secondaryStart, secondaryEnd] = range
185+
186+
if (prev) {
187+
const prevAxis = secondaryAxes.find(
188+
d => d.id === prev?.secondaryAxisId
189+
)
190+
const prevValue =
191+
prevAxis?.scale(prevAxis?.getValue(prev.originalDatum)) ?? NaN
192+
secondaryStart = value - (value - prevValue) / 2
193+
}
194+
195+
if (next) {
196+
const nextAxis = secondaryAxes.find(
197+
d => d.id === next?.secondaryAxisId
198+
)
199+
const nextValue =
200+
nextAxis?.scale(nextAxis?.getValue(next.originalDatum)) ?? NaN
201+
secondaryEnd = value + (nextValue - value) / 2
202+
}
203+
204+
return {
205+
secondaryStart,
206+
secondaryEnd,
207+
datum,
208+
}
209+
}),
210+
}
211+
})
189212

190213
return (
191214
<g

‎src/types.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ export type RequiredChartOptions<TDatum> = TSTB.Object.Required<
6363
| 'initialHeight'
6464
| 'useIntersectionObserver'
6565
| 'intersectionObserverThreshold'
66+
| 'tooltip'
67+
| 'primaryCursor'
68+
| 'secondaryCursor'
6669
>
6770

6871
export type ChartContextValue<TDatum> = {

0 commit comments

Comments
 (0)