feat!: replace custom chart components with ThemedChart + Recharts
BREAKING: LineChart, AreaChart, BarChart, ChartSeries, DataPoint removed. Use ThemedChart with Recharts children (Line, Area, Bar, etc.) instead.
This commit is contained in:
hsiegeln
@@ -1,167 +0,0 @@
|
|||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltipTime {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendDot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Axis labels */
|
|
||||||
.yLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
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: 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding-left: 48px;
|
|
||||||
}
|
|
||||||
@@ -1,268 +0,0 @@
|
|||||||
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
|
|
||||||
xLabel: string
|
|
||||||
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 firstS = series[0]
|
|
||||||
const idx0 = Math.max(0, Math.min(firstS.data.length - 1, Math.round(pctX * (firstS.data.length - 1))))
|
|
||||||
const xVal = firstS.data[idx0]?.x
|
|
||||||
const xLabel = xVal instanceof Date
|
|
||||||
? xVal.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
||||||
: typeof xVal === 'number' && xVal > 1e10
|
|
||||||
? new Date(xVal).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
||||||
: String(xVal ?? '')
|
|
||||||
|
|
||||||
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, xLabel, values })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
|
||||||
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
|
||||||
<svg
|
|
||||||
width="100%"
|
|
||||||
height={height}
|
|
||||||
viewBox={`0 0 ${width} ${height}`}
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
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.xLabel && (
|
|
||||||
<div className={styles.tooltipTime}>{tooltip.xLabel}</div>
|
|
||||||
)}
|
|
||||||
{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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltipTitle {
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendDot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
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: 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding-left: 48px;
|
|
||||||
}
|
|
||||||
@@ -1,242 +0,0 @@
|
|||||||
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 })
|
|
||||||
}
|
|
||||||
|
|
||||||
function showBarTooltip(e: React.MouseEvent<SVGRectElement>, cat: string) {
|
|
||||||
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],
|
|
||||||
})),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
|
||||||
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
|
||||||
<svg
|
|
||||||
width="100%"
|
|
||||||
height={height}
|
|
||||||
viewBox={`0 0 ${width} ${height}`}
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
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) => showBarTooltip(e, cat)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
<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) => showBarTooltip(e, cat)}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,156 +0,0 @@
|
|||||||
.wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltipTime {
|
|
||||||
font-family: var(--font-mono);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 4px;
|
|
||||||
padding-bottom: 3px;
|
|
||||||
border-bottom: 1px solid var(--border-subtle);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendDot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yLabel {
|
|
||||||
font-size: 12px;
|
|
||||||
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: 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding-left: 48px;
|
|
||||||
}
|
|
||||||
@@ -1,247 +0,0 @@
|
|||||||
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
|
|
||||||
xLabel: string
|
|
||||||
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 firstS = series[0]
|
|
||||||
const idx0 = Math.max(0, Math.min(firstS.data.length - 1, Math.round(pctX * (firstS.data.length - 1))))
|
|
||||||
const xVal = firstS.data[idx0]?.x
|
|
||||||
const xLabel = xVal instanceof Date
|
|
||||||
? xVal.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
||||||
: typeof xVal === 'number' && xVal > 1e10
|
|
||||||
? new Date(xVal).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })
|
|
||||||
: String(xVal ?? '')
|
|
||||||
|
|
||||||
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, xLabel, values })
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`${styles.wrapper} ${className ?? ''}`}>
|
|
||||||
{yLabel && <div className={styles.yLabel}>{yLabel}</div>}
|
|
||||||
<svg
|
|
||||||
width="100%"
|
|
||||||
height={height}
|
|
||||||
viewBox={`0 0 ${width} ${height}`}
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
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.xLabel && (
|
|
||||||
<div className={styles.tooltipTime}>{tooltip.xLabel}</div>
|
|
||||||
)}
|
|
||||||
{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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
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)',
|
|
||||||
]
|
|
||||||
@@ -1,8 +1,6 @@
|
|||||||
export { Accordion } from './Accordion/Accordion'
|
export { Accordion } from './Accordion/Accordion'
|
||||||
export { AlertDialog } from './AlertDialog/AlertDialog'
|
export { AlertDialog } from './AlertDialog/AlertDialog'
|
||||||
export { AreaChart } from './AreaChart/AreaChart'
|
|
||||||
export { AvatarGroup } from './AvatarGroup/AvatarGroup'
|
export { AvatarGroup } from './AvatarGroup/AvatarGroup'
|
||||||
export { BarChart } from './BarChart/BarChart'
|
|
||||||
export { Breadcrumb } from './Breadcrumb/Breadcrumb'
|
export { Breadcrumb } from './Breadcrumb/Breadcrumb'
|
||||||
export { CommandPalette } from './CommandPalette/CommandPalette'
|
export { CommandPalette } from './CommandPalette/CommandPalette'
|
||||||
export type { SearchResult, SearchCategory, ScopeFilter } from './CommandPalette/types'
|
export type { SearchResult, SearchCategory, ScopeFilter } from './CommandPalette/types'
|
||||||
@@ -20,7 +18,6 @@ export { KpiStrip } from './KpiStrip/KpiStrip'
|
|||||||
export type { KpiItem, KpiStripProps } from './KpiStrip/KpiStrip'
|
export type { KpiItem, KpiStripProps } from './KpiStrip/KpiStrip'
|
||||||
export type { FeedEvent } from './EventFeed/EventFeed'
|
export type { FeedEvent } from './EventFeed/EventFeed'
|
||||||
export { FilterBar } from './FilterBar/FilterBar'
|
export { FilterBar } from './FilterBar/FilterBar'
|
||||||
export { LineChart } from './LineChart/LineChart'
|
|
||||||
export { LogViewer } from './LogViewer/LogViewer'
|
export { LogViewer } from './LogViewer/LogViewer'
|
||||||
export type { LogEntry, LogViewerProps } from './LogViewer/LogViewer'
|
export type { LogEntry, LogViewerProps } from './LogViewer/LogViewer'
|
||||||
export { LoginDialog } from './LoginForm/LoginDialog'
|
export { LoginDialog } from './LoginForm/LoginDialog'
|
||||||
@@ -43,6 +40,11 @@ export { Tabs } from './Tabs/Tabs'
|
|||||||
export { ToastProvider, useToast } from './Toast/Toast'
|
export { ToastProvider, useToast } from './Toast/Toast'
|
||||||
export { TreeView } from './TreeView/TreeView'
|
export { TreeView } from './TreeView/TreeView'
|
||||||
|
|
||||||
// Chart utilities for consumers using Recharts or custom charts
|
// Charts — ThemedChart wrapper + Recharts re-exports
|
||||||
export { CHART_COLORS } from './_chart-utils'
|
export { ThemedChart } from './ThemedChart/ThemedChart'
|
||||||
export type { ChartSeries, DataPoint } from './_chart-utils'
|
export { CHART_COLORS, rechartsTheme } from '../utils/rechartsTheme'
|
||||||
|
export {
|
||||||
|
Line, Area, Bar,
|
||||||
|
ReferenceLine, ReferenceArea,
|
||||||
|
Legend, Brush,
|
||||||
|
} from 'recharts'
|
||||||
|
|||||||
@@ -11,4 +11,4 @@ export { BreadcrumbProvider, useBreadcrumb } from './providers/BreadcrumbProvide
|
|||||||
export type { BreadcrumbItem } from './providers/BreadcrumbProvider'
|
export type { BreadcrumbItem } from './providers/BreadcrumbProvider'
|
||||||
export * from './utils/hashColor'
|
export * from './utils/hashColor'
|
||||||
export * from './utils/timePresets'
|
export * from './utils/timePresets'
|
||||||
export { rechartsTheme } from './utils/rechartsTheme'
|
|
||||||
|
|||||||
Reference in New Issue
Block a user