Library / Data visualization

Data visualization

Infara chart families, sparklines, and operational map surfaces. Use this route to compare chart variants and plan dashboard composition against the brand token palette.

Overview

Data visualization route

Operational charts and maps in one place. Chart families consolidate the upstream shadcn variants into disciplined Infara blocks with a single variant prop each; tokens come from the Infara palette.

Surfaces

Area, bar, line, pie, radar, and radial family blocks plus the existing Infara chart primitive and sparkline.

Data contract

Blocks stay presentational. Parents supply data, config, and a variant prop that maps to the upstream shadcn example it subsumes.

Maps

Leaflet-based embedded maps for context rails and workspace panes. Full-size operational maps stay on MapLibre GL per platform standards.

Chart families

Area chart family

Default smooth curve plus stacked, gradient, linear, step, legend, icons, and axes variants. One block, nine variants — selected via the variant prop.

Traffic — default

Smooth curve with a muted tooltip cursor.

Traffic — gradient fill

Linear gradient softens the fill so stacked series stay legible.

Traffic — 100% stacked

Expand offset communicates share-of-total without losing category shape.

Traffic — with axes

Both axes visible. Use sparingly in dense dashboards.

Bar chart family

Default plus horizontal, stacked, mixed-category, negative, labeled, and interactive variants. Interactive variant exposes active-series state to parent layers.

Incidents — default

Single-series bars with per-region colors and on-bar value labels.

Incidents — horizontal

Rotate axes for long category labels.

Incidents vs. repairs — stacked

Stack the repaired series onto the incident volume.

Vendors — mixed palette

Each category resolves its own brand token. Ideal for vendor or site slices.

NPS delta — negative aware

Baseline axis handles positive and negative deltas in one frame.

Interactive — parent-controlled active series

Parent owns active-series state. Use for rich dashboards with a cohesive legend.

Line chart family

Monotone, linear, step, multi-series, dot variants, and labeled variants. Dots-custom renders hollow markers ideal for thin trend rails.

Latency — default

Single-series monotone curve.

Latency vs. loss

Multiple series with auto legend.

Latency — step

Step curve for discrete polling intervals.

Latency — custom dots

Hollow dots read like event markers. Good for capacity baselines.

Pie & donut family

Simple pie, donuts with center label and active slice, two-ring stacked view, and an interactive variant where the parent owns the active key.

Fleet health — with center label

Donut with brand-display center readout.

Fleet health — with legend

Full legend beneath the ring.

Severity × fleet — stacked donuts

Inner ring resolves severity inside the outer fleet ring.

Fleet health — interactive

Parent owns which slice is active. Use when the slice selection feeds another pane.

Radar family

Baseline polygon plus circle-grid, filled, no-lines, radius-axis, and legend variants. Useful for scorecards and maturity comparisons.

Ops maturity — default

Polygon grid with translucent fill.

Ops maturity — circle grid

Circular grid reads cleaner at small sizes.

Ops maturity — legend

Show a legend when series compare intent clearly.

Ops maturity — radius axis

Expose the radial scale for audits or QA.

Radial family

Simple gauge, gridded ring, labeled bars, center-text readout, shape (progress) gauge, and stacked regional snapshots.

Uptime gauge

Shape gauge with background ring.

Texas fleet — stacked

Fleet health decomposed across a shared ring.

Dashboard chart primitives

Zero-recharts SVG primitives (area, bar) plus the recharts-wrapped line, pie, status, and type charts. Ship these when a page needs a single chart surface without pulling the showcase families.

Weekly traffic

Sessions vs. exports

Sessions

Exports

Deployed radios by region

Vertical orientation

Texas

Oklahoma

Arkansas

Louisiana

Fleet status

Vendor distribution

Uses the Infara ChartContainer, ChartTooltip, ChartLegend primitives directly. Covers the upstream chart-tooltip-* variants: default, advanced, indicator-line, indicator-none, icons, formatter, label-custom, label-formatter, label-none.

Sparklines

Sparkline

Inline trend rails for dense surfaces. Color flows from currentColor so semantic tokens tint the trend without raw literals.

+12.4%

−9.2%

+0.04 pp

Use inside dense table rows or next to KPI numbers. Keep sparklines under 160px wide so they do not compete with the primary chart on the surface.

Maps

Leaflet map — embedded

Lightweight embedded map for context rails and sidebar views. The block owns tile selection and theme switching; parent layers supply markers and popups.

Map workspace — rail composition

Full-bleed map canvas with a context rail. Use Leaflet for embedded context and MapLibre GL for full operational workspaces per platform standards.

Data visualization