{ "name": "TimeSeriesChart", "package": "@magicblocksai/ui", "file": "packages/ui/src/components/TimeSeriesChart.tsx", "chapterTag": "07 Data Display", "chapter": "08-data-display.html", "sectionId": "time-series-chart", "elName": "TimeSeriesChart", "demoUrl": "https://brand.magicblocks.ai/components/08-data-display#time-series-chart", "hasLiveDemo": false, "description": "", "useClient": true, "interactivity": "interactive", "namedExports": [ { "name": "TimeSeriesChart", "isPrincipal": true, "isType": false }, { "name": "TimeSeriesChartProps", "isPrincipal": false, "isType": true }, { "name": "TimeSeriesSeries", "isPrincipal": false, "isType": true }, { "name": "TimeSeriesPoint", "isPrincipal": false, "isType": false } ], "importStatement": "import { TimeSeriesChart } from \"@magicblocksai/ui\";", "props": [ { "name": "series", "optional": false, "type": "TimeSeriesSeries[]", "doc": "Series to render." }, { "name": "height", "optional": true, "type": "number", "doc": "Chart height in CSS pixels. Default `240`." }, { "name": "viewBoxWidth", "optional": true, "type": "number", "doc": "Width of the SVG viewBox. Drives aspect ratio. Default `800`." }, { "name": "visibleSeries", "optional": true, "type": "string[]", "doc": "Controlled visible series ids." }, { "name": "defaultVisibleSeries", "optional": true, "type": "string[]", "doc": "Uncontrolled initial visible series ids. Defaults to all series." }, { "name": "onVisibleSeriesChange", "optional": true, "type": "(ids: string[]) => void", "doc": "Fires when legend toggle changes the visible set." }, { "name": "showLegend", "optional": true, "type": "boolean", "doc": "Show the legend below the chart. Default `true`." }, { "name": "showGrid", "optional": true, "type": "boolean", "doc": "Show grid lines. Default `true`." }, { "name": "showAxis", "optional": true, "type": "boolean", "doc": "Show axis labels. Default `true`." }, { "name": "smooth", "optional": true, "type": "boolean", "doc": "Smooth lines via Catmull-Rom interpolation. Default `false`." }, { "name": "defaultPalette", "optional": true, "type": "\"brand4\"", "doc": "Auto-assign the 4 brand series colours (pink · yellow · blue · green) by index to any series without an explicit `color`. Defaults to the kit's 8-colour palette." }, { "name": "showTooltip", "optional": true, "type": "boolean", "doc": "Show hover tooltip. Default `true`." }, { "name": "yMin", "optional": true, "type": "number", "doc": "Override Y axis lower bound. Default auto." }, { "name": "yMax", "optional": true, "type": "number", "doc": "Override Y axis upper bound. Default auto." }, { "name": "valueFormat", "optional": true, "type": "(value: number) => string", "doc": "Format Y values in axis ticks + tooltip. Default `String(y)`." }, { "name": "xFormat", "optional": true, "type": "(x: Date | number | string) => string", "doc": "Format X values in axis ticks + tooltip. Default: a deterministic, SSR-safe `\"Mon D\"` off the date's UTC parts (no `toLocaleString`)." }, { "name": "yTicks", "optional": true, "type": "number", "doc": "Number of Y ticks. Default `5`." }, { "name": "xTicks", "optional": true, "type": "number", "doc": "Number of X ticks. Default `6`." }, { "name": "caption", "optional": true, "type": "ReactNode", "doc": "Caption / subtitle slot rendered above the chart." }, { "name": "title", "optional": true, "type": "ReactNode", "doc": "Optional title (rendered above the chart)." }, { "name": "meta", "optional": true, "type": "ReactNode", "doc": "Right-aligned slot in the header — e.g. range picker." }, { "name": "emptyState", "optional": true, "type": "ReactNode", "doc": "Shown when all series are empty or hidden." } ], "classesUsed": [ "time-series-chart", "time-series-chart-axis-label", "time-series-chart-caption", "time-series-chart-empty", "time-series-chart-gridline", "time-series-chart-head", "time-series-chart-head-text", "time-series-chart-hover-dot", "time-series-chart-hover-line", "time-series-chart-legend", "time-series-chart-legend-chip", "time-series-chart-legend-swatch", "time-series-chart-line", "time-series-chart-meta", "time-series-chart-svg", "time-series-chart-svg-wrap", "time-series-chart-title", "time-series-chart-tooltip", "time-series-chart-tooltip-name", "time-series-chart-tooltip-row", "time-series-chart-tooltip-rows", "time-series-chart-tooltip-swatch", "time-series-chart-tooltip-time", "time-series-chart-tooltip-value", "title", "toLocaleString", "tooltip" ], "examples": { "react": null, "html": "
\n
\n
\n
Last 14 days
\n
All workspaces · UTC.
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n
\n
", "css": ".time-series-chart {\n display: flex;\n flex-direction: column;\n gap: var(--s-3);\n font: 400 13px/1.4 var(--f-body);\n}\n\n.time-series-chart-axis-label {\n font: 400 10.5px/1 var(--f-mono);\n fill: var(--fg-faint);\n font-variant-numeric: tabular-nums;\n}\n\n.time-series-chart-caption {\n font: 400 12.5px/1.4 var(--f-body);\n color: var(--fg-soft);\n}\n\n.time-series-chart-empty {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--fg-soft);\n font: 400 13px/1.4 var(--f-body);\n}\n\n.time-series-chart-gridline {\n stroke: var(--hair);\n stroke-width: 1;\n shape-rendering: crispEdges;\n opacity: 0.7;\n}\n\n.time-series-chart-head {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--s-3);\n}\n\n.time-series-chart-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.time-series-chart-hover-dot {\n pointer-events: none;\n}\n\n.time-series-chart-hover-line {\n stroke: color-mix(in oklab, var(--ink) 20%, transparent);\n stroke-width: 1;\n stroke-dasharray: 3 3;\n pointer-events: none;\n}\n\n.time-series-chart-legend {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n padding: 0 4px;\n}\n\n.time-series-chart-legend-chip {\n appearance: none;\n background: transparent;\n border: 0;\n padding: 4px 8px;\n border-radius: var(--r-xs);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font: 500 12px/1 var(--f-body);\n color: var(--fg);\n cursor: pointer;\n transition: background var(--dur-2) var(--ease),\n opacity var(--dur-2) var(--ease);\n}\n\n.time-series-chart-legend-swatch {\n width: 10px;\n height: 10px;\n border-radius: 2px;\n border: 1.5px solid currentColor;\n}\n\n.time-series-chart-line {\n transition: opacity var(--dur-2) var(--ease);\n}\n\n.time-series-chart-meta { display: inline-flex; align-items: center; gap: var(--s-2); }\n\n.time-series-chart-svg {\n width: 100%;\n height: 100%;\n display: block;\n overflow: visible;\n}\n\n.time-series-chart-svg-wrap {\n position: relative;\n width: 100%;\n}\n\n.time-series-chart-title {\n font: 600 14px/1.3 var(--f-display);\n color: var(--fg);\n}\n\n.time-series-chart-tooltip {\n position: absolute;\n top: 8px;\n transform: translateX(-50%);\n pointer-events: none;\n background: var(--bg-paper);\n border: 1px solid var(--hair);\n border-radius: var(--r-md);\n box-shadow: 0 6px 16px color-mix(in oklab, var(--ink) 14%, transparent);\n padding: 8px 10px;\n min-width: 140px;\n z-index: 5;\n font: 400 12px/1.4 var(--f-body);\n}\n\n.time-series-chart-tooltip-name { color: var(--fg-soft); }\n\n.time-series-chart-tooltip-row {\n display: grid;\n grid-template-columns: 8px 1fr auto;\n align-items: center;\n gap: 6px;\n font: 400 12px/1.3 var(--f-body);\n color: var(--fg);\n}\n\n.time-series-chart-tooltip-rows { display: flex; flex-direction: column; gap: 2px; }\n\n.time-series-chart-tooltip-swatch {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n}\n\n.time-series-chart-tooltip-time {\n font: 600 10.5px/1 var(--f-mono);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--fg-faint);\n margin-bottom: 4px;\n}\n\n.time-series-chart-tooltip-value {\n font-variant-numeric: tabular-nums;\n font-weight: 500;\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\nfunction toLocaleString() { [native code] }\n.tooltip {\n background: var(--ink); color: var(--paper);\n padding: 7px 10px;\n font: 500 12.5px/1.4 var(--f-body);\n border-radius: var(--r-sm);\n box-shadow: var(--sh-2);\n white-space: nowrap;\n position: absolute;\n z-index: 50;\n}" } }