nustack

refs.leaves.chart

Chart Refs -- one browser node, an ECharts option, and typed builders over it.

Module nustd.ui.refs.leaves.chart.

Chart Refs -- one browser node, an ECharts option, and typed builders over it.

The browser has a single chart node, Chart, that draws whatever ECharts option it holds. Every chart type here is a Python builder: its slot turns a few common settings into an option, and its data hook turns the data you hand set into the part of the option that holds it. A new chart type is a new builder, never new browser code.

Every chart shares one small set of interactions, defined once on Chart:

  • set(data) replace the data (the builder decides its shape)
  • set(option=...) replace the whole option, drawn from scratch
  • merge(option) a partial option, merged the way ECharts merges
  • append(points, series=0) push points onto one series, keeping the newest max_points. A series is a position or a name; an unknown name adds a series styled like the last one. Points are ECharts data items as the chart's series takes them ([x, y], a bare y, {name, value}, ...).
  • clear(series=None) empty one series, or all of them
  • on_click() a data item clicked: {event, series, series_index, name, index, value}

Anything a builder does not expose (a log axis, a second y axis, mark lines, a geo map) goes through the raw option: option= on any builder's slot is merged over what it builds, merge changes it live, and Chart.slot( option=...) takes an option whole. Formatters are ECharts template strings ("{value} ms", "{b}: {d}%", "{HH}:{mm}" on a time axis), never code. A color may be a kit token, "var(--chart-3)", resolved in the browser per theme.

NameSortCallMeaning
AreaChartrefAreaChart(address, parent_ref=None, owner_shape=None, props=None)A line chart filled underneath. stack=True for a stacked area. Same data as LineChart.
BarChartrefBarChart(address, parent_ref=None, owner_shape=None, props=None)Bars per category, one bar series per name.
BoxplotChartrefBoxplotChart(address, parent_ref=None, owner_shape=None, props=None)The spread of each category's samples: whiskers at min and max, box at the quartiles.
CandlestickChartrefCandlestickChart(address, parent_ref=None, owner_shape=None, props=None)Open, close, low and high per period.
ChartrefChart(address, parent_ref=None, owner_shape=None, props=None)A chart drawn from an ECharts option. The base every typed chart builds on.
FunnelChartrefFunnelChart(address, parent_ref=None, owner_shape=None, props=None)Stages narrowing down. Same data as PieChart.
GaugeChartrefGaugeChart(address, parent_ref=None, owner_shape=None, props=None)One value on an arc, between min and max.
HeatmapChartrefHeatmapChart(address, parent_ref=None, owner_shape=None, props=None)A grid of cells colored by value, on the sequential ramp.
HistogramrefHistogram(address, parent_ref=None, owner_shape=None, props=None)How values spread: counts per bin, binned in Python on set.
LineChartrefLineChart(address, parent_ref=None, owner_shape=None, props=None)Lines over an x axis, one per series name.
PieChartrefPieChart(address, parent_ref=None, owner_shape=None, props=None)Slices of a whole.
RadarChartrefRadarChart(address, parent_ref=None, owner_shape=None, props=None)Several measures around a circle, one shape per item.
SankeyChartrefSankeyChart(address, parent_ref=None, owner_shape=None, props=None)Flows between nodes, widths by value.
ScatterChartrefScatterChart(address, parent_ref=None, owner_shape=None, props=None)Points on two value axes, one color per series name.
SparklinerefSparkline(address, parent_ref=None, owner_shape=None, props=None)A small trend line: no axes, no grid, no tooltip. For stat cards and table cells.
SunburstChartrefSunburstChart(address, parent_ref=None, owner_shape=None, props=None)Nested rings sized by value. Same data as TreemapChart.
TreemapChartrefTreemapChart(address, parent_ref=None, owner_shape=None, props=None)Nested rectangles sized by value.

AreaChart

A line chart filled underneath. stack=True for a stacked area. Same data as LineChart.

AreaChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.AreaChart. Kind Ref, sort ref, cardinality scalar.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

BarChart

Bars per category, one bar series per name.

BarChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.BarChart. Kind Ref, sort ref, cardinality scalar.

set takes {name: [[category, value], ...]}, [[category, value], ...]` for the first series, `{category: value} for a single series, or rows [category, v1, v2, ...] across the series. append([["Mon", 3]]) adds a bar.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

BoxplotChart

The spread of each category's samples: whiskers at min and max, box at the quartiles.

BoxplotChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.BoxplotChart. Kind Ref, sort ref, cardinality scalar.

set takes {category: samples}; the five numbers are worked out in Python. Precomputed [min, q1, median, q3, max] rows go through merge.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

CandlestickChart

Open, close, low and high per period.

CandlestickChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.CandlestickChart. Kind Ref, sort ref, cardinality scalar.

set takes rows [x, open, close, low, high]; append takes the same rows. Up periods draw in the ok tone, down in the danger tone.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

Chart

A chart drawn from an ECharts option. The base every typed chart builds on.

Chart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.Chart. Kind Ref, sort ref, cardinality scalar.

Chart.slot(option={...}) draws the option as given: any series, component or setting ECharts has. The typed charts below build the option for you.

Methods

.set(data=<UNSET>, option=<UNSET>)

Replace the data, or with option= the whole option (drawn from scratch).

Builds Nu.

Arguments

NameTypeDefaultMeaning
dataArg<UNSET>
optionDictArg[str, Any]<UNSET>

Undocumented: example.

.merge(option)

Merge a partial option, the way ECharts' setOption merges.

Builds Nu.

Arguments

NameTypeDefaultMeaning
optionDictArg[str, Any]

Undocumented: example.

.append(points, series=0)

Push points onto one series, keeping the newest max_points.

Builds Nu.

Arguments

NameTypeDefaultMeaning
pointsListArg[Any]
seriesStrArg | IntArg0

Undocumented: example.

.clear(series=None)

Empty one series' data (a position or a name), or every series'.

Builds Nu.

Arguments

NameTypeDefaultMeaning
seriesStrArg | IntArg | NoneNone

Undocumented: example.

.on_click()

{event, series, series_index, name, index, value}: a data item clicked.

Builds Changed.

Undocumented: example.

Inherited methods

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

FunnelChart

Stages narrowing down. Same data as PieChart.

FunnelChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.FunnelChart. Kind Ref, sort ref, cardinality scalar.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

GaugeChart

One value on an arc, between min and max.

GaugeChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.GaugeChart. Kind Ref, sort ref, cardinality scalar.

set takes a number (or {name: value} for several needles). For the small inline gauge use GaugeRef; this is the ECharts one.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

HeatmapChart

A grid of cells colored by value, on the sequential ramp.

HeatmapChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.HeatmapChart. Kind Ref, sort ref, cardinality scalar.

set takes [[x, y, value], ...] (x and y as labels or positions) or a matrix, rows along y. Labels not declared are added in the order they come. The color scale fits the data on every set.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

Histogram

How values spread: counts per bin, binned in Python on set.

Histogram(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.Histogram. Kind Ref, sort ref, cardinality scalar.

set takes a list of numbers, or {name: numbers} for overlaid series sharing one set of bins. append adds pre-binned bars only; to re-bin, set again.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

LineChart

Lines over an x axis, one per series name.

LineChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.LineChart. Kind Ref, sort ref, cardinality scalar.

set takes {name: [[x, y], ...]}, [[x, y], ...] for the first series, bare y values, or rows [x, y1, y2, ...] across the series in order. append([[x, y]], "cpu") streams a point.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

PieChart

Slices of a whole.

PieChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.PieChart. Kind Ref, sort ref, cardinality scalar.

set takes {name: value}, [[name, value], ...], [{name, value}, ...]` or bare values. `append([{"name": "Fish", "value": 3}]) adds a slice.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

RadarChart

Several measures around a circle, one shape per item.

RadarChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.RadarChart. Kind Ref, sort ref, cardinality scalar.

set takes {item name: [one value per indicator]} or a single list of values.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

SankeyChart

Flows between nodes, widths by value.

SankeyChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.SankeyChart. Kind Ref, sort ref, cardinality scalar.

set takes links [[source, target, value], ...] (or {source, target, value}` maps); the nodes are the names they mention. `append does not apply; set again.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

ScatterChart

Points on two value axes, one color per series name.

ScatterChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.ScatterChart. Kind Ref, sort ref, cardinality scalar.

set takes {name: [[x, y], ...]} or [[x, y], ...] for the first series. A third value, [x, y, size], sets the dot size when sized.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

Sparkline

A small trend line: no axes, no grid, no tooltip. For stat cards and table cells.

Sparkline(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.Sparkline. Kind Ref, sort ref, cardinality scalar.

set takes bare y values or [[x, y], ...]; append([y]) streams.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

SunburstChart

Nested rings sized by value. Same data as TreemapChart.

SunburstChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.SunburstChart. Kind Ref, sort ref, cardinality scalar.

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

TreemapChart

Nested rectangles sized by value.

TreemapChart(address, parent_ref=None, owner_shape=None, props=None)

Path nustd.ui.TreemapChart. Kind Ref, sort ref, cardinality scalar.

set takes nested {name: value or {child: ...}} or ECharts nodes [{name, value, children}].

Inherited methods

From nustd.ui.refs.leaves.chart.Chart:

CallBuildsMeaning
.set(data=<UNSET>, option=<UNSET>)NuReplace the data, or with option= the whole option (drawn from scratch).
.merge(option)NuMerge a partial option, the way ECharts' setOption merges.
.append(points, series=0)NuPush points onto one series, keeping the newest max_points.
.clear(series=None)NuEmpty one series' data (a position or a name), or every series'.
.on_click()Changed{event, series, series_index, name, index, value}: a data item clicked.

From nustd.ui.core.base.Ref:

CallBuildsMeaning
.erase()NuDrop this Ref's node on the client, and everything under it.

Undocumented: example.

On this page