open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix tick formatting glitch

Browse Source
This commit is contained in:
Marshall Polaris 2022-09-28 23:24:20 -07:00
parent f135a17dc9
commit ad4cb719b6
1 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/components/charts/generic-charts.tsx
View File

@ -21,21 +21,9 @@ import {
} from './helpers' } from './helpers'
import { useEvent } from 'web/hooks/use-event' import { useEvent } from 'web/hooks/use-event'
export type MultiPoint<T = never> = { export type MultiPoint<T = never> = { x: Date; y: number[]; datum?: T }
x: Date export type HistoryPoint<T = never> = { x: Date; y: number; datum?: T }
y: number[] export type DistributionPoint<T = never> = { x: number; y: number; datum?: T }
datum?: T
}
export type HistoryPoint<T = never> = {
x: Date
y: number
datum?: T
}
export type DistributionPoint<T = never> = {
x: number
y: number
datum?: T
}
const getTickValues = (min: number, max: number, n: number) => { const getTickValues = (min: number, max: number, n: number) => {
const step = (max - min) / (n - 1) const step = (max - min) / (n - 1)
@ -143,7 +131,9 @@ export const MultiValueHistoryChart = <T,>(props: {
const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
const xAxis = axisBottom<Date>(xScale).ticks(w / 100) const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
const yAxis = pct const yAxis = pct
? axisLeft<number>(yScale).tickValues(pctTickValues).tickFormat(formatPct) ? axisLeft<number>(yScale)
.tickValues(pctTickValues)
.tickFormat((n) => formatPct(n))
: axisLeft<number>(yScale) : axisLeft<number>(yScale)
return { xAxis, yAxis } return { xAxis, yAxis }
}, [w, h, pct, xScale, yScale]) }, [w, h, pct, xScale, yScale])
@ -233,7 +223,9 @@ export const SingleValueHistoryChart = <T,>(props: {
const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5) const pctTickValues = getTickValues(min, max, h < 200 ? 3 : 5)
const xAxis = axisBottom<Date>(xScale).ticks(w / 100) const xAxis = axisBottom<Date>(xScale).ticks(w / 100)
const yAxis = pct const yAxis = pct
? axisLeft<number>(yScale).tickValues(pctTickValues).tickFormat(formatPct) ? axisLeft<number>(yScale)
.tickValues(pctTickValues)
.tickFormat((n) => formatPct(n))
: axisLeft<number>(yScale) : axisLeft<number>(yScale)
return { xAxis, yAxis } return { xAxis, yAxis }
}, [w, h, pct, xScale, yScale]) }, [w, h, pct, xScale, yScale])