Skip to content

Chart

Tokenized quantitative visualization foundation.

Quantitative instrument
Live readoutSystem throughputTwo-hour samples · requests per minute
81k
  • Actual
  • Capacity
System throughput over the working day2 series across 6 positions.Actual, 08:00: 36Actual, 10:00: 52Actual, 12:00: 47Actual, 14:00: 68Actual, 16:00: 63Actual, 18:00: 81Capacity, 08:00: 88Capacity, 10:00: 88Capacity, 12:00: 88Capacity, 14:00: 88Capacity, 16:00: 88Capacity, 18:00: 88
Actual, 08:00
36
Actual, 10:00
52
Actual, 12:00
47
Actual, 14:00
68
Actual, 16:00
63
Actual, 18:00
81
Capacity, 08:00
88
Capacity, 10:00
88
Capacity, 12:00
88
Capacity, 14:00
88
Capacity, 16:00
88
Capacity, 18:00
88
CapacitySubsystem utilizationCurrent load by functional subsystem
70%
Subsystem utilization4 categories. Values are proportional to bar length.ComputeCompute: 7474StorageStorage: 5858NetworkNetwork: 8383MemoryMemory: 6666
Compute
74
Storage
58
Network
83
Memory
66
AllocationWorkspace compositionShare of active resources
100%
  • Interface
  • Data
  • Automation
  • Other
Workspace resource composition4 segments totaling 100.Interface: 42 (42.0%)Data: 31 (31.0%)Automation: 19 (19.0%)Other: 8 (8.0%)100TOTAL
Interface
42
Data
31
Automation
19
Other
8
CorrelationEfficiency envelopeResponse time against completion rate · point size is volume
Efficiency envelope5 points. Horizontal position represents Response ms; vertical position represents Completion %.Index: Response ms 32, Completion % 91Resolve: Response ms 44, Completion % 96Render: Response ms 68, Completion % 89Persist: Response ms 81, Completion % 94Export: Response ms 118, Completion % 86
Index
Response ms 32, Completion % 91
Resolve
Response ms 44, Completion % 96
Render
Response ms 68, Completion % 89
Persist
Response ms 81, Completion % 94
Export
Response ms 118, Completion % 86
AccumulationWork completedCumulative output across the same interval
81k
Cumulative work completed1 series across 6 positions.Completed, 08:00: 36Completed, 10:00: 52Completed, 12:00: 47Completed, 14:00: 68Completed, 16:00: 63Completed, 18:00: 81
Completed, 08:00
36
Completed, 10:00
52
Completed, 12:00
47
Completed, 14:00
68
Completed, 16:00
63
Completed, 18:00
81
<ChartFrame title="System throughput" value="81k">
  <LineChart series={series} />
</ChartFrame>
Loading, empty, and error states
Loading state
Loading chart…
Empty state
No data available.
Error state

API Reference

PropTypeDefaultDescription
titleReact.ReactNode-Conclusion-led title rendered by ChartFrame.
descriptionReact.ReactNode-Encoding, scope, and time-range context.
dataCategoricalDatum[] | CartesianSeries[]-Typed data consumed by the selected chart graphic.
formatValue(value: number) => string-Shared visible and accessible value formatter.
loadingbooleanfalseShows the chart loading state in ChartFrame.
errorReact.ReactNode-Shows a readable chart error state.
sourceReact.ReactNode-Source or provenance displayed with the chart.

Import

import { ChartFrame, BarChart, LineChart } from "@uxome/charts";