feat: AreaChart, LineChart, BarChart SVG composites
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
157
src/design-system/composites/AreaChart/AreaChart.module.css
Normal file
157
src/design-system/composites/AreaChart/AreaChart.module.css
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
display: block;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid */
|
||||||
|
.gridLine {
|
||||||
|
stroke: var(--border-subtle);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axisLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Threshold line */
|
||||||
|
.thresholdLine {
|
||||||
|
stroke: var(--error);
|
||||||
|
stroke-width: 1.5;
|
||||||
|
stroke-dasharray: 5 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Area + line */
|
||||||
|
.area {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Crosshair */
|
||||||
|
.crosshair {
|
||||||
|
stroke: var(--text-faint);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tooltip */
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipDot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipLabel {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipValue {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Legend */
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendDot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Axis labels */
|
||||||
|
.yLabel {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xLabel {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
254
src/design-system/composites/AreaChart/AreaChart.tsx
Normal file
254
src/design-system/composites/AreaChart/AreaChart.tsx
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './AreaChart.module.css'
|
||||||
|
import {
|
||||||
|
computeYScale,
|
||||||
|
computeXScale,
|
||||||
|
seriesPoints,
|
||||||
|
seriesPath,
|
||||||
|
formatAxisLabel,
|
||||||
|
CHART_COLORS,
|
||||||
|
type ChartSeries,
|
||||||
|
} from '../_chart-utils'
|
||||||
|
|
||||||
|
interface Threshold {
|
||||||
|
value: number
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AreaChartProps {
|
||||||
|
series: ChartSeries[]
|
||||||
|
xLabel?: string
|
||||||
|
yLabel?: string
|
||||||
|
threshold?: Threshold
|
||||||
|
height?: number
|
||||||
|
width?: number
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Y_TICK_COUNT = 4
|
||||||
|
const DIMS = {
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingRight: 16,
|
||||||
|
paddingBottom: 28,
|
||||||
|
paddingLeft: 48,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AreaChart({
|
||||||
|
series,
|
||||||
|
xLabel,
|
||||||
|
yLabel,
|
||||||
|
threshold,
|
||||||
|
height = 200,
|
||||||
|
width = 400,
|
||||||
|
className,
|
||||||
|
}: AreaChartProps) {
|
||||||
|
const [tooltip, setTooltip] = useState<{
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
values: { label: string; value: number; color: string }[]
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
const dims = { ...DIMS, width, height }
|
||||||
|
const allData = series.flatMap((s) => s.data)
|
||||||
|
|
||||||
|
if (allData.length === 0) {
|
||||||
|
return <div className={`${styles.empty} ${className ?? ''}`}>No data</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
const { max, toY } = computeYScale(series, dims, threshold?.value)
|
||||||
|
const { toX } = computeXScale(series, dims)
|
||||||
|
const plotH = height - dims.paddingTop - dims.paddingBottom
|
||||||
|
const plotW = width - dims.paddingLeft - dims.paddingRight
|
||||||
|
const bottomY = dims.paddingTop + plotH
|
||||||
|
|
||||||
|
// Y-axis ticks
|
||||||
|
const yTicks = Array.from({ length: Y_TICK_COUNT + 1 }, (_, i) =>
|
||||||
|
Math.round((max / Y_TICK_COUNT) * i),
|
||||||
|
)
|
||||||
|
|
||||||
|
// X-axis ticks (first, middle, last)
|
||||||
|
const firstSeries = series[0]
|
||||||
|
const xSamples =
|
||||||
|
firstSeries && firstSeries.data.length > 0
|
||||||
|
? [
|
||||||
|
firstSeries.data[0].x,
|
||||||
|
firstSeries.data[Math.floor(firstSeries.data.length / 2)]?.x,
|
||||||
|
firstSeries.data[firstSeries.data.length - 1].x,
|
||||||
|
].filter(Boolean)
|
||||||
|
: []
|
||||||
|
|
||||||
|
function handleMouseMove(e: React.MouseEvent<SVGSVGElement>) {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect()
|
||||||
|
const mx = e.clientX - rect.left
|
||||||
|
const my = e.clientY - rect.top
|
||||||
|
|
||||||
|
// Find closest x value
|
||||||
|
const pctX = (mx - dims.paddingLeft) / plotW
|
||||||
|
const values = series.map((s, i) => {
|
||||||
|
const idx = Math.round(pctX * (s.data.length - 1))
|
||||||
|
const clamped = Math.max(0, Math.min(s.data.length - 1, idx))
|
||||||
|
const pt = s.data[clamped]
|
||||||
|
return {
|
||||||
|
label: s.label,
|
||||||
|
value: pt?.y ?? 0,
|
||||||
|
color: s.color ?? CHART_COLORS[i % CHART_COLORS.length],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setTooltip({ x: mx, y: my, values })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
||||||
|
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
||||||
|
<svg
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
className={styles.svg}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseLeave={() => setTooltip(null)}
|
||||||
|
aria-label="Area chart"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
{/* Grid lines */}
|
||||||
|
{yTicks.map((val) => {
|
||||||
|
const y = toY(val)
|
||||||
|
return (
|
||||||
|
<g key={val}>
|
||||||
|
<line
|
||||||
|
x1={dims.paddingLeft}
|
||||||
|
y1={y}
|
||||||
|
x2={width - dims.paddingRight}
|
||||||
|
y2={y}
|
||||||
|
className={styles.gridLine}
|
||||||
|
/>
|
||||||
|
<text x={dims.paddingLeft - 6} y={y + 4} className={styles.axisLabel} textAnchor="end">
|
||||||
|
{formatAxisLabel(val)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* X-axis labels */}
|
||||||
|
{xSamples.map((xVal, i) => {
|
||||||
|
const xPos = toX(xVal)
|
||||||
|
const xv = xVal instanceof Date ? xVal : new Date(xVal as number)
|
||||||
|
const label =
|
||||||
|
xVal instanceof Date || (typeof xVal === 'number' && xVal > 1e10)
|
||||||
|
? xv.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||||
|
: formatAxisLabel(xVal as number)
|
||||||
|
const anchor = i === 0 ? 'start' : i === xSamples.length - 1 ? 'end' : 'middle'
|
||||||
|
return (
|
||||||
|
<text
|
||||||
|
key={i}
|
||||||
|
x={xPos}
|
||||||
|
y={height - dims.paddingBottom + 16}
|
||||||
|
className={styles.axisLabel}
|
||||||
|
textAnchor={anchor}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</text>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* SLA threshold line */}
|
||||||
|
{threshold && (
|
||||||
|
<g>
|
||||||
|
<line
|
||||||
|
x1={dims.paddingLeft}
|
||||||
|
y1={toY(threshold.value)}
|
||||||
|
x2={width - dims.paddingRight}
|
||||||
|
y2={toY(threshold.value)}
|
||||||
|
className={styles.thresholdLine}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={width - dims.paddingRight - 4}
|
||||||
|
y={toY(threshold.value) - 4}
|
||||||
|
className={styles.thresholdLabel}
|
||||||
|
textAnchor="end"
|
||||||
|
>
|
||||||
|
{threshold.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Area fills */}
|
||||||
|
{series.map((s, i) => {
|
||||||
|
const color = s.color ?? CHART_COLORS[i % CHART_COLORS.length]
|
||||||
|
const areaD = seriesPath(s, toX, toY, bottomY)
|
||||||
|
return (
|
||||||
|
<path
|
||||||
|
key={`area-${i}`}
|
||||||
|
d={areaD}
|
||||||
|
fill={color}
|
||||||
|
className={styles.area}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Lines */}
|
||||||
|
{series.map((s, i) => {
|
||||||
|
const color = s.color ?? CHART_COLORS[i % CHART_COLORS.length]
|
||||||
|
const pts = seriesPoints(s, toX, toY)
|
||||||
|
return (
|
||||||
|
<polyline
|
||||||
|
key={`line-${i}`}
|
||||||
|
points={pts}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
className={styles.line}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Crosshair */}
|
||||||
|
{tooltip && (
|
||||||
|
<line
|
||||||
|
x1={tooltip.x}
|
||||||
|
y1={dims.paddingTop}
|
||||||
|
x2={tooltip.x}
|
||||||
|
y2={bottomY}
|
||||||
|
className={styles.crosshair}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Tooltip */}
|
||||||
|
{tooltip && (
|
||||||
|
<div
|
||||||
|
className={styles.tooltip}
|
||||||
|
style={{
|
||||||
|
left: tooltip.x + 12,
|
||||||
|
top: tooltip.y,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tooltip.values.map((v) => (
|
||||||
|
<div key={v.label} className={styles.tooltipRow}>
|
||||||
|
<span className={styles.tooltipDot} style={{ background: v.color }} />
|
||||||
|
<span className={styles.tooltipLabel}>{v.label}:</span>
|
||||||
|
<span className={styles.tooltipValue}>{formatAxisLabel(v.value)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
{series.length > 1 && (
|
||||||
|
<div className={styles.legend}>
|
||||||
|
{series.map((s, i) => (
|
||||||
|
<div key={s.label} className={styles.legendItem}>
|
||||||
|
<span
|
||||||
|
className={styles.legendDot}
|
||||||
|
style={{ background: s.color ?? CHART_COLORS[i % CHART_COLORS.length] }}
|
||||||
|
/>
|
||||||
|
<span className={styles.legendLabel}>{s.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{xLabel && <div className={styles.xLabel}>{xLabel}</div>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
143
src/design-system/composites/BarChart/BarChart.module.css
Normal file
143
src/design-system/composites/BarChart/BarChart.module.css
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
display: block;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridLine {
|
||||||
|
stroke: var(--border-subtle);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axisLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.catLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipTitle {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipDot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipLabel {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipValue {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendDot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yLabel {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xLabel {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
251
src/design-system/composites/BarChart/BarChart.tsx
Normal file
251
src/design-system/composites/BarChart/BarChart.tsx
Normal file
@@ -0,0 +1,251 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './BarChart.module.css'
|
||||||
|
import { formatAxisLabel, CHART_COLORS } from '../_chart-utils'
|
||||||
|
|
||||||
|
interface BarSeries {
|
||||||
|
label: string
|
||||||
|
data: { x: string; y: number }[]
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BarChartProps {
|
||||||
|
series: BarSeries[]
|
||||||
|
stacked?: boolean
|
||||||
|
height?: number
|
||||||
|
width?: number
|
||||||
|
xLabel?: string
|
||||||
|
yLabel?: string
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const PADDING = { top: 12, right: 16, bottom: 40, left: 48 }
|
||||||
|
const Y_TICK_COUNT = 4
|
||||||
|
const BAR_GAP = 0.2 // fraction of bar group width reserved for gaps
|
||||||
|
|
||||||
|
export function BarChart({
|
||||||
|
series,
|
||||||
|
stacked = false,
|
||||||
|
height = 200,
|
||||||
|
width = 400,
|
||||||
|
xLabel,
|
||||||
|
yLabel,
|
||||||
|
className,
|
||||||
|
}: BarChartProps) {
|
||||||
|
const [tooltip, setTooltip] = useState<{
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
label: string
|
||||||
|
values: { series: string; value: number; color: string }[]
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
if (series.length === 0 || series[0].data.length === 0) {
|
||||||
|
return <div className={`${styles.empty} ${className ?? ''}`}>No data</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collect all x categories (union across all series)
|
||||||
|
const categories = Array.from(new Set(series.flatMap((s) => s.data.map((d) => d.x))))
|
||||||
|
const numCats = categories.length
|
||||||
|
|
||||||
|
const plotW = width - PADDING.left - PADDING.right
|
||||||
|
const plotH = height - PADDING.top - PADDING.bottom
|
||||||
|
|
||||||
|
// Compute max Y
|
||||||
|
let maxY = 0
|
||||||
|
if (stacked) {
|
||||||
|
for (const cat of categories) {
|
||||||
|
const sum = series.reduce((acc, s) => {
|
||||||
|
const pt = s.data.find((d) => d.x === cat)
|
||||||
|
return acc + (pt?.y ?? 0)
|
||||||
|
}, 0)
|
||||||
|
maxY = Math.max(maxY, sum)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
maxY = Math.max(...series.flatMap((s) => s.data.map((d) => d.y)))
|
||||||
|
}
|
||||||
|
maxY = maxY || 1
|
||||||
|
|
||||||
|
const yTicks = Array.from({ length: Y_TICK_COUNT + 1 }, (_, i) =>
|
||||||
|
Math.round((maxY / Y_TICK_COUNT) * i),
|
||||||
|
)
|
||||||
|
const toY = (val: number) => PADDING.top + plotH - (val / maxY) * plotH
|
||||||
|
const bottomY = PADDING.top + plotH
|
||||||
|
|
||||||
|
const catWidth = plotW / numCats
|
||||||
|
const groupGap = catWidth * BAR_GAP
|
||||||
|
const groupW = catWidth - groupGap
|
||||||
|
|
||||||
|
function handleMouseEnter(
|
||||||
|
catLabel: string,
|
||||||
|
mx: number,
|
||||||
|
my: number,
|
||||||
|
values: { series: string; value: number; color: string }[],
|
||||||
|
) {
|
||||||
|
setTooltip({ x: mx, y: my, label: catLabel, values })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
||||||
|
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
||||||
|
<svg
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
className={styles.svg}
|
||||||
|
onMouseLeave={() => setTooltip(null)}
|
||||||
|
aria-label="Bar chart"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
{/* Grid lines */}
|
||||||
|
{yTicks.map((val) => {
|
||||||
|
const y = toY(val)
|
||||||
|
return (
|
||||||
|
<g key={val}>
|
||||||
|
<line
|
||||||
|
x1={PADDING.left}
|
||||||
|
y1={y}
|
||||||
|
x2={width - PADDING.right}
|
||||||
|
y2={y}
|
||||||
|
className={styles.gridLine}
|
||||||
|
/>
|
||||||
|
<text x={PADDING.left - 6} y={y + 4} className={styles.axisLabel} textAnchor="end">
|
||||||
|
{formatAxisLabel(val)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Bars */}
|
||||||
|
{categories.map((cat, ci) => {
|
||||||
|
const groupX = PADDING.left + ci * catWidth + groupGap / 2
|
||||||
|
|
||||||
|
if (stacked) {
|
||||||
|
let stackY = bottomY
|
||||||
|
return (
|
||||||
|
<g key={cat}>
|
||||||
|
{series.map((s, si) => {
|
||||||
|
const pt = s.data.find((d) => d.x === cat)
|
||||||
|
const val = pt?.y ?? 0
|
||||||
|
const barH = (val / maxY) * plotH
|
||||||
|
const color = s.color ?? CHART_COLORS[si % CHART_COLORS.length]
|
||||||
|
const y = stackY - barH
|
||||||
|
stackY -= barH
|
||||||
|
return (
|
||||||
|
<rect
|
||||||
|
key={si}
|
||||||
|
x={groupX}
|
||||||
|
y={y}
|
||||||
|
width={groupW}
|
||||||
|
height={barH}
|
||||||
|
fill={color}
|
||||||
|
className={styles.bar}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const rect = e.currentTarget.closest('svg')!.getBoundingClientRect()
|
||||||
|
handleMouseEnter(
|
||||||
|
cat,
|
||||||
|
e.clientX - rect.left,
|
||||||
|
e.clientY - rect.top,
|
||||||
|
series.map((ss, ssi) => ({
|
||||||
|
series: ss.label,
|
||||||
|
value: ss.data.find((d) => d.x === cat)?.y ?? 0,
|
||||||
|
color: ss.color ?? CHART_COLORS[ssi % CHART_COLORS.length],
|
||||||
|
})),
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<text
|
||||||
|
x={groupX + groupW / 2}
|
||||||
|
y={bottomY + 14}
|
||||||
|
className={styles.catLabel}
|
||||||
|
textAnchor="middle"
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grouped
|
||||||
|
const barW = groupW / series.length
|
||||||
|
return (
|
||||||
|
<g key={cat}>
|
||||||
|
{series.map((s, si) => {
|
||||||
|
const pt = s.data.find((d) => d.x === cat)
|
||||||
|
const val = pt?.y ?? 0
|
||||||
|
const barH = (val / maxY) * plotH
|
||||||
|
const color = s.color ?? CHART_COLORS[si % CHART_COLORS.length]
|
||||||
|
return (
|
||||||
|
<rect
|
||||||
|
key={si}
|
||||||
|
x={groupX + si * barW}
|
||||||
|
y={toY(val)}
|
||||||
|
width={barW - 1}
|
||||||
|
height={barH}
|
||||||
|
fill={color}
|
||||||
|
className={styles.bar}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const svgEl = e.currentTarget.closest('svg')!.getBoundingClientRect()
|
||||||
|
handleMouseEnter(
|
||||||
|
cat,
|
||||||
|
e.clientX - svgEl.left,
|
||||||
|
e.clientY - svgEl.top,
|
||||||
|
series.map((ss, ssi) => ({
|
||||||
|
series: ss.label,
|
||||||
|
value: ss.data.find((d) => d.x === cat)?.y ?? 0,
|
||||||
|
color: ss.color ?? CHART_COLORS[ssi % CHART_COLORS.length],
|
||||||
|
})),
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<text
|
||||||
|
x={groupX + groupW / 2}
|
||||||
|
y={bottomY + 14}
|
||||||
|
className={styles.catLabel}
|
||||||
|
textAnchor="middle"
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Tooltip */}
|
||||||
|
{tooltip && (
|
||||||
|
<div
|
||||||
|
className={styles.tooltip}
|
||||||
|
style={{ left: tooltip.x + 12, top: tooltip.y }}
|
||||||
|
>
|
||||||
|
<div className={styles.tooltipTitle}>{tooltip.label}</div>
|
||||||
|
{tooltip.values.map((v) => (
|
||||||
|
<div key={v.series} className={styles.tooltipRow}>
|
||||||
|
<span className={styles.tooltipDot} style={{ background: v.color }} />
|
||||||
|
<span className={styles.tooltipLabel}>{v.series}:</span>
|
||||||
|
<span className={styles.tooltipValue}>{formatAxisLabel(v.value)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
{series.length > 1 && (
|
||||||
|
<div className={styles.legend}>
|
||||||
|
{series.map((s, i) => (
|
||||||
|
<div key={s.label} className={styles.legendItem}>
|
||||||
|
<span
|
||||||
|
className={styles.legendDot}
|
||||||
|
style={{ background: s.color ?? CHART_COLORS[i % CHART_COLORS.length] }}
|
||||||
|
/>
|
||||||
|
<span className={styles.legendLabel}>{s.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{xLabel && <div className={styles.xLabel}>{xLabel}</div>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
146
src/design-system/composites/LineChart/LineChart.module.css
Normal file
146
src/design-system/composites/LineChart/LineChart.module.css
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg {
|
||||||
|
display: block;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 12px;
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gridLine {
|
||||||
|
stroke: var(--border-subtle);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.axisLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdLine {
|
||||||
|
stroke: var(--error);
|
||||||
|
stroke-width: 1.5;
|
||||||
|
stroke-dasharray: 5 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thresholdLabel {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 9px;
|
||||||
|
fill: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crosshair {
|
||||||
|
stroke: var(--text-faint);
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke-dasharray: 3 3;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: absolute;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 10;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipRow:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipDot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipLabel {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltipValue {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendDot {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.legendLabel {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yLabel {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
left: 4px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 28px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xLabel {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-muted);
|
||||||
|
padding-left: 48px;
|
||||||
|
}
|
||||||
233
src/design-system/composites/LineChart/LineChart.tsx
Normal file
233
src/design-system/composites/LineChart/LineChart.tsx
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import styles from './LineChart.module.css'
|
||||||
|
import {
|
||||||
|
computeYScale,
|
||||||
|
computeXScale,
|
||||||
|
seriesPoints,
|
||||||
|
formatAxisLabel,
|
||||||
|
CHART_COLORS,
|
||||||
|
type ChartSeries,
|
||||||
|
} from '../_chart-utils'
|
||||||
|
|
||||||
|
interface Threshold {
|
||||||
|
value: number
|
||||||
|
label: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LineChartProps {
|
||||||
|
series: ChartSeries[]
|
||||||
|
xLabel?: string
|
||||||
|
yLabel?: string
|
||||||
|
threshold?: Threshold
|
||||||
|
height?: number
|
||||||
|
width?: number
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const Y_TICK_COUNT = 4
|
||||||
|
const DIMS = {
|
||||||
|
paddingTop: 12,
|
||||||
|
paddingRight: 16,
|
||||||
|
paddingBottom: 28,
|
||||||
|
paddingLeft: 48,
|
||||||
|
}
|
||||||
|
|
||||||
|
export function LineChart({
|
||||||
|
series,
|
||||||
|
xLabel,
|
||||||
|
yLabel,
|
||||||
|
threshold,
|
||||||
|
height = 200,
|
||||||
|
width = 400,
|
||||||
|
className,
|
||||||
|
}: LineChartProps) {
|
||||||
|
const [tooltip, setTooltip] = useState<{
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
values: { label: string; value: number; color: string }[]
|
||||||
|
} | null>(null)
|
||||||
|
|
||||||
|
const dims = { ...DIMS, width, height }
|
||||||
|
const allData = series.flatMap((s) => s.data)
|
||||||
|
|
||||||
|
if (allData.length === 0) {
|
||||||
|
return <div className={`${styles.empty} ${className ?? ''}`}>No data</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
const { max, toY } = computeYScale(series, dims, threshold?.value)
|
||||||
|
const { toX } = computeXScale(series, dims)
|
||||||
|
const plotH = height - dims.paddingTop - dims.paddingBottom
|
||||||
|
const plotW = width - dims.paddingLeft - dims.paddingRight
|
||||||
|
const bottomY = dims.paddingTop + plotH
|
||||||
|
|
||||||
|
const yTicks = Array.from({ length: Y_TICK_COUNT + 1 }, (_, i) =>
|
||||||
|
Math.round((max / Y_TICK_COUNT) * i),
|
||||||
|
)
|
||||||
|
|
||||||
|
const firstSeries = series[0]
|
||||||
|
const xSamples =
|
||||||
|
firstSeries && firstSeries.data.length > 0
|
||||||
|
? [
|
||||||
|
firstSeries.data[0].x,
|
||||||
|
firstSeries.data[Math.floor(firstSeries.data.length / 2)]?.x,
|
||||||
|
firstSeries.data[firstSeries.data.length - 1].x,
|
||||||
|
].filter(Boolean)
|
||||||
|
: []
|
||||||
|
|
||||||
|
function handleMouseMove(e: React.MouseEvent<SVGSVGElement>) {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect()
|
||||||
|
const mx = e.clientX - rect.left
|
||||||
|
const my = e.clientY - rect.top
|
||||||
|
const pctX = (mx - dims.paddingLeft) / plotW
|
||||||
|
|
||||||
|
const values = series.map((s, i) => {
|
||||||
|
const idx = Math.round(pctX * (s.data.length - 1))
|
||||||
|
const clamped = Math.max(0, Math.min(s.data.length - 1, idx))
|
||||||
|
const pt = s.data[clamped]
|
||||||
|
return {
|
||||||
|
label: s.label,
|
||||||
|
value: pt?.y ?? 0,
|
||||||
|
color: s.color ?? CHART_COLORS[i % CHART_COLORS.length],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
setTooltip({ x: mx, y: my, values })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
||||||
|
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
||||||
|
<svg
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
className={styles.svg}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseLeave={() => setTooltip(null)}
|
||||||
|
aria-label="Line chart"
|
||||||
|
role="img"
|
||||||
|
>
|
||||||
|
{/* Grid lines */}
|
||||||
|
{yTicks.map((val) => {
|
||||||
|
const y = toY(val)
|
||||||
|
return (
|
||||||
|
<g key={val}>
|
||||||
|
<line
|
||||||
|
x1={dims.paddingLeft}
|
||||||
|
y1={y}
|
||||||
|
x2={width - dims.paddingRight}
|
||||||
|
y2={y}
|
||||||
|
className={styles.gridLine}
|
||||||
|
/>
|
||||||
|
<text x={dims.paddingLeft - 6} y={y + 4} className={styles.axisLabel} textAnchor="end">
|
||||||
|
{formatAxisLabel(val)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* X-axis labels */}
|
||||||
|
{xSamples.map((xVal, i) => {
|
||||||
|
const xPos = toX(xVal)
|
||||||
|
const xv = xVal instanceof Date ? xVal : new Date(xVal as number)
|
||||||
|
const label =
|
||||||
|
xVal instanceof Date || (typeof xVal === 'number' && xVal > 1e10)
|
||||||
|
? xv.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||||
|
: formatAxisLabel(xVal as number)
|
||||||
|
const anchor = i === 0 ? 'start' : i === xSamples.length - 1 ? 'end' : 'middle'
|
||||||
|
return (
|
||||||
|
<text
|
||||||
|
key={i}
|
||||||
|
x={xPos}
|
||||||
|
y={height - dims.paddingBottom + 16}
|
||||||
|
className={styles.axisLabel}
|
||||||
|
textAnchor={anchor}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</text>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Threshold line */}
|
||||||
|
{threshold && (
|
||||||
|
<g>
|
||||||
|
<line
|
||||||
|
x1={dims.paddingLeft}
|
||||||
|
y1={toY(threshold.value)}
|
||||||
|
x2={width - dims.paddingRight}
|
||||||
|
y2={toY(threshold.value)}
|
||||||
|
className={styles.thresholdLine}
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={width - dims.paddingRight - 4}
|
||||||
|
y={toY(threshold.value) - 4}
|
||||||
|
className={styles.thresholdLabel}
|
||||||
|
textAnchor="end"
|
||||||
|
>
|
||||||
|
{threshold.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Lines only (no area fill) */}
|
||||||
|
{series.map((s, i) => {
|
||||||
|
const color = s.color ?? CHART_COLORS[i % CHART_COLORS.length]
|
||||||
|
const pts = seriesPoints(s, toX, toY)
|
||||||
|
return (
|
||||||
|
<polyline
|
||||||
|
key={`line-${i}`}
|
||||||
|
points={pts}
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
className={styles.line}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Crosshair */}
|
||||||
|
{tooltip && (
|
||||||
|
<line
|
||||||
|
x1={tooltip.x}
|
||||||
|
y1={dims.paddingTop}
|
||||||
|
x2={tooltip.x}
|
||||||
|
y2={bottomY}
|
||||||
|
className={styles.crosshair}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Tooltip */}
|
||||||
|
{tooltip && (
|
||||||
|
<div
|
||||||
|
className={styles.tooltip}
|
||||||
|
style={{ left: tooltip.x + 12, top: tooltip.y }}
|
||||||
|
>
|
||||||
|
{tooltip.values.map((v) => (
|
||||||
|
<div key={v.label} className={styles.tooltipRow}>
|
||||||
|
<span className={styles.tooltipDot} style={{ background: v.color }} />
|
||||||
|
<span className={styles.tooltipLabel}>{v.label}:</span>
|
||||||
|
<span className={styles.tooltipValue}>{formatAxisLabel(v.value)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Legend */}
|
||||||
|
{series.length > 1 && (
|
||||||
|
<div className={styles.legend}>
|
||||||
|
{series.map((s, i) => (
|
||||||
|
<div key={s.label} className={styles.legendItem}>
|
||||||
|
<span
|
||||||
|
className={styles.legendDot}
|
||||||
|
style={{ background: s.color ?? CHART_COLORS[i % CHART_COLORS.length] }}
|
||||||
|
/>
|
||||||
|
<span className={styles.legendLabel}>{s.label}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{xLabel && <div className={styles.xLabel}>{xLabel}</div>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
101
src/design-system/composites/_chart-utils.ts
Normal file
101
src/design-system/composites/_chart-utils.ts
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
export interface DataPoint {
|
||||||
|
x: number | Date
|
||||||
|
y: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartSeries {
|
||||||
|
label: string
|
||||||
|
data: DataPoint[]
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartDimensions {
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
paddingTop: number
|
||||||
|
paddingRight: number
|
||||||
|
paddingBottom: number
|
||||||
|
paddingLeft: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeYScale(
|
||||||
|
series: ChartSeries[],
|
||||||
|
dims: ChartDimensions,
|
||||||
|
threshold?: number,
|
||||||
|
) {
|
||||||
|
const allY = series.flatMap((s) => s.data.map((d) => d.y))
|
||||||
|
if (threshold != null) allY.push(threshold)
|
||||||
|
const min = 0
|
||||||
|
const max = Math.max(...allY, 1)
|
||||||
|
const range = max - min
|
||||||
|
|
||||||
|
const plotH = dims.height - dims.paddingTop - dims.paddingBottom
|
||||||
|
const toY = (val: number) => dims.paddingTop + plotH - ((val - min) / range) * plotH
|
||||||
|
|
||||||
|
return { min, max, range, toY }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function computeXScale(series: ChartSeries[], dims: ChartDimensions) {
|
||||||
|
const allX = series.flatMap((s) =>
|
||||||
|
s.data.map((d) => (d.x instanceof Date ? d.x.getTime() : d.x)),
|
||||||
|
)
|
||||||
|
const minX = Math.min(...allX)
|
||||||
|
const maxX = Math.max(...allX)
|
||||||
|
const rangeX = maxX - minX || 1
|
||||||
|
|
||||||
|
const plotW = dims.width - dims.paddingLeft - dims.paddingRight
|
||||||
|
const toX = (val: number | Date) => {
|
||||||
|
const v = val instanceof Date ? val.getTime() : val
|
||||||
|
return dims.paddingLeft + ((v - minX) / rangeX) * plotW
|
||||||
|
}
|
||||||
|
|
||||||
|
return { minX, maxX, rangeX, toX }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function seriesPoints(
|
||||||
|
series: ChartSeries,
|
||||||
|
toX: (v: number | Date) => number,
|
||||||
|
toY: (v: number) => number,
|
||||||
|
): string {
|
||||||
|
return series.data.map((d) => `${toX(d.x).toFixed(1)},${toY(d.y).toFixed(1)}`).join(' ')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function seriesPath(
|
||||||
|
series: ChartSeries,
|
||||||
|
toX: (v: number | Date) => number,
|
||||||
|
toY: (v: number) => number,
|
||||||
|
bottomY: number,
|
||||||
|
): string {
|
||||||
|
if (series.data.length === 0) return ''
|
||||||
|
const pts = series.data.map((d) => `${toX(d.x).toFixed(1)},${toY(d.y).toFixed(1)}`)
|
||||||
|
const firstX = toX(series.data[0].x).toFixed(1)
|
||||||
|
const lastX = toX(series.data[series.data.length - 1].x).toFixed(1)
|
||||||
|
return `M${pts.join(' L')} L${lastX},${bottomY} L${firstX},${bottomY} Z`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatAxisLabel(val: number): string {
|
||||||
|
if (val >= 1_000_000) return `${(val / 1_000_000).toFixed(1)}M`
|
||||||
|
if (val >= 1000) return `${(val / 1000).toFixed(1)}k`
|
||||||
|
if (Number.isInteger(val)) return String(val)
|
||||||
|
return val.toFixed(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatXLabel(val: number | Date, totalPoints: number): string {
|
||||||
|
if (val instanceof Date || (typeof val === 'number' && val > 1e10)) {
|
||||||
|
const d = val instanceof Date ? val : new Date(val)
|
||||||
|
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||||
|
}
|
||||||
|
return formatAxisLabel(val as number)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default color tokens for series (fallback when no color given)
|
||||||
|
export const CHART_COLORS = [
|
||||||
|
'var(--chart-1)',
|
||||||
|
'var(--chart-2)',
|
||||||
|
'var(--chart-3)',
|
||||||
|
'var(--chart-4)',
|
||||||
|
'var(--chart-5)',
|
||||||
|
'var(--chart-6)',
|
||||||
|
'var(--chart-7)',
|
||||||
|
'var(--chart-8)',
|
||||||
|
]
|
||||||
Reference in New Issue
Block a user