Concepts
Dashboards New in 0.2. A Dashboard lays charts out in a titled, responsive grid from a data-only layout, sizes each chart to its cell, passes the ground to every chart inside, and can link them on a field.
Breakpoints are the dashboard's own width: sm below 640 px, md up to 1024 px, lg above. The defaults are 1, 2 and 4 columns. Point at an hour in any chart: the others mark the same hour.
Operations Service health over the last day. Hover or focus an hour in any chart: the others mark the same hour.
Revenue Revenue. thousands at 171, change +6.4; 14 points from 118 to 171. Revenue 171 thousands +6.4
Revenue point value 1 118 2 124 3 121 4 132 5 140 6 136 7 129 8 142 9 151 10 147 11 155 12 162 13 158 14 171
Churn Churn. per cent at 118, change -0.4; 14 points from 118 to 171. Churn 118 per cent -0.4
Churn point value 1 171 2 158 3 162 4 155 5 147 6 151 7 142 8 129 9 136 10 140 11 132 12 121 13 124 14 118
Traffic Traffic. Line chart of 12 hour values; hits ranges from 11 to 88. Traffic hits 20 40 60 80 100 00 04 08 12 16 20
Traffic hour hits 00 18 02 14 04 11 06 16 08 34 10 58 12 71 14 66 16 74 18 88 20 62 22 41
Errors Errors. Bar chart in columns of 12 hour values; errors from 1 to 12. Errors 2 4 6 8 10 12 00 06 12 18
Errors hour errors 00 2 02 1 04 1 06 3 08 5 10 7 12 9 14 6 16 8 18 12 20 6 22 4
Uptime Uptime. Uptime at 99% of the range. Uptime 99% Uptime
Uptime measure value Uptime 99%
Load Load. Area chart of 12 hour values; load ranges from 15 to 92. Load % 20 40 60 80 100 00 04 08 12 16 20
Load hour load 00 22 02 18 04 15 06 21 08 44 10 63 12 78 14 72 16 81 18 92 20 66 22 47
Capacity Capacity. Capacity used at 64% of the range. Capacity 0 100 64% Capacity used
Capacity measure value Capacity used 64%
React Vue Angular Reflex
import { Dashboard, DashboardCell } from '@silverpoint/react/dashboard';
import { KpiCard } from '@silverpoint/react/kpi-card';
import { LineChart } from '@silverpoint/react/line-chart';
import { BarChart } from '@silverpoint/react/bar-chart';
<Dashboard
id="ops"
title="Operations"
description="Service health over the last day."
layout={{
columns: { sm: 1, md: 2, lg: 4 },
cells: [{ id: 'revenue' }, { id: 'traffic', colSpan: { md: 2, lg: 3 }, rowSpan: 2 }, { id: 'errors' }],
}}
link={{ key: 'hour' }}
onLinkChange={(linked) => console.log(linked)} // { key: 'hour', value: '18' } or null
>
<DashboardCell cell="revenue"><KpiCard title="Revenue" metric="thousands" delta={6.4} /></DashboardCell>
<DashboardCell cell="traffic"><LineChart data={ops} xKey="hour" valueKey="hits" title="Traffic" /></DashboardCell>
<DashboardCell cell="errors"><BarChart data={ops} xKey="hour" valueKey="errors" title="Errors" /></DashboardCell>
</Dashboard><script setup lang="ts">
import { SpDashboard, SpDashboardCell } from '@silverpoint/vue/dashboard';
import { SpKpiCard } from '@silverpoint/vue/kpi-card';
import { SpLineChart } from '@silverpoint/vue/line-chart';
import { SpBarChart } from '@silverpoint/vue/bar-chart';
const layout = {
columns: { sm: 1, md: 2, lg: 4 },
cells: [{ id: 'revenue' }, { id: 'traffic', colSpan: { md: 2, lg: 3 }, rowSpan: 2 }, { id: 'errors' }],
};
</script>
<template>
<SpDashboard id="ops" title="Operations" :layout="layout" :link="{ key: 'hour' }" @link-change="console.log">
<SpDashboardCell cell="revenue"><SpKpiCard title="Revenue" metric="thousands" :delta="6.4" /></SpDashboardCell>
<SpDashboardCell cell="traffic"><SpLineChart :data="ops" x-key="hour" value-key="hits" title="Traffic" /></SpDashboardCell>
<SpDashboardCell cell="errors"><SpBarChart :data="ops" x-key="hour" value-key="errors" title="Errors" /></SpDashboardCell>
</SpDashboard>
</template>import { Component } from '@angular/core';
import { SpDashboard, SpDashboardCell } from '@silverpoint/angular/dashboard';
import { SpKpiCard } from '@silverpoint/angular/kpi-card';
import { SpLineChart } from '@silverpoint/angular/line-chart';
import { SpBarChart } from '@silverpoint/angular/bar-chart';
@Component({
selector: 'app-ops',
imports: [SpDashboard, SpDashboardCell, SpKpiCard, SpLineChart, SpBarChart],
template: `
<sp-dashboard id="ops" title="Operations" [layout]="layout" [link]="{ key: 'hour' }" (linkChange)="linked = $event">
<sp-dashboard-cell cell="revenue"><sp-kpi-card title="Revenue" metric="thousands" [delta]="6.4" /></sp-dashboard-cell>
<sp-dashboard-cell cell="traffic"><sp-line-chart [data]="ops" xKey="hour" valueKey="hits" title="Traffic" /></sp-dashboard-cell>
<sp-dashboard-cell cell="errors"><sp-bar-chart [data]="ops" xKey="hour" valueKey="errors" title="Errors" /></sp-dashboard-cell>
</sp-dashboard>
`,
})
export class Ops {
protected linked: { key: string; value: unknown } | null = null;
protected readonly layout = {
columns: { sm: 1, md: 2, lg: 4 },
cells: [{ id: 'revenue' }, { id: 'traffic', colSpan: { md: 2, lg: 3 }, rowSpan: 2 }, { id: 'errors' }],
};
protected readonly ops = [/* { hour: '00', hits: 18, errors: 2 }, … */];
}from reflex_silverpoint_react import (
bar_chart, dashboard, dashboard_cell, dashboard_cell_layout, dashboard_layout, kpi_card, line_chart,
)
dashboard(
dashboard_cell(kpi_card(title="Revenue", metric="thousands", delta=6.4), cell="revenue"),
dashboard_cell(line_chart(data=OPS, x_key="hour", value_key="hits", title="Traffic"), cell="traffic"),
dashboard_cell(bar_chart(data=OPS, x_key="hour", value_key="errors", title="Errors"), cell="errors"),
id="ops",
title="Operations",
description="Service health over the last day.",
layout=dashboard_layout(
["revenue", dashboard_cell_layout("traffic", col_span={"md": 2, "lg": 3}, row_span=2), "errors"],
columns={"sm": 1, "md": 2, "lg": 4},
),
link="hour", # link the charts on the rows' "hour" field
on_link_change=State.on_link, # {"key": "hour", "value": "18"} or None
)Prop Type What it does idstring, required Stable id; charts inside get derived ids (ops--traffic). title / labelstring A visible heading, or an accessible name without one. One of them is required. layoutDashboardLayout columns, rowHeight (240), gap (16) and cells: [{ id, colSpan, rowSpan }] — per breakpoint if you like. link{ key: string } Links the charts on a datum field. descriptionstring A line under the title. headingLevel2–6 The heading level of the title. ssrWidthnumber The width the grid is laid out for before the browser measures it. ground, substrate, mode, localePassed to every chart inside, below the chart's own props.
With link={{ key: 'hour' }}, exploring an item in one chart marks, in every other chart, the items whose datum has the same hour. The marks are hidden from assistive technology, and linked state never reaches the server render. A chart whose rows have no such field warns SP016. In React the link is its own client boundary, @silverpoint/react/dashboard-link; in Reflex, dashboard_link(...) links charts you lay out yourself.