Index

mmo-chart-config

1 symbol · generated 5 Oct 2026

element

mmo-chart-config

mmo-chart-config.jhs:1

Configure a <mmo-chart>: where its values come from, which plot draws them, and everything shown around them -- with a live preview, and the code that builds the same chart.

<mmo-chart-config></mmo-chart-config>
Extends
CustomShadowElement
Not every value can be drawn by every plot, nor every option makes sense everywhere, so the configurator reads the shape of the data (how many labels and series, points or values, negatives, rates) and: - turns off a type that cannot draw it, saying why, and moves off it when the data changes under it; - shows an option only where the current plot reads it (`stacked` for bars and pies, `smooth` for lines...), and only when the source can keep it (a chart read from `url` has no `padding`); - turns off, with the reason, an option the data makes meaningless (stacking rates, a percentage of a percentage, comparing to a series that does not exist). The sources: - `values`: typed in a grid, one row per series, one column per label; - `points`: typed too, `x`, `y`, a size and a label per point, for a scatter; - `statistics`: counted by the server over a collection (`StatisticController::routeCount`), offered when the application registered that controller; - `url`: any address answering a chart's configuration as its `data`.
const config = document.createElement('mmo-chart-config'); config.chart = document.querySelector('mmo-chart'); // read what it shows // ... later config.applyTo(document.querySelector('mmo-chart')); // and give it what was configured

Index

TYPES staticthe plots, in the order they are offered
SOURCES staticwhere the values come from
ANIMATIONS staticthe easings MMO.core.transitions knows
PALETTES staticthe palettes the server knows (\MMO\core\classes\aDataController::COLORS)
DEFAULTS staticwhat <mmo-chart> uses when its configuration says nothing
ATTRIBUTES staticthe attributes of a chart this element writes, by option
ViewDefault static readonly accessor
chart accessorThe chart this element was read from, if any.
constructor()
init()
read(chart)Take everything a chart shows: its source, its type and its options.
readStatistics(url)Take the statistics an address counts, if it is the server's statistics route.
applyTo(chart)Give a chart what is configured here.
IsPoints(data) staticWhether a list of series holds points ([x, y], {x, y}) rather than values.
Point(point) staticOne point as the grid edits it.
getShape()What the data looks like, whatever its source: what the type and the options are checked against.
whyNotType(type, shape)Why a plot cannot draw this data.
refresh()Work out what the current type and source allow, turn off what they do not, and redraw the preview.
disableTargets()Turn off the comparisons the data cannot make (refresh).
changed()Something was edited: refresh once the burst of events it fires is over.
describe()Everything configured, as a chart takes it: its attributes, and either its configuration (typed values) or the address it reads them from.
getStatisticsUrl()The server's statistics route, with every setting in its query.
getDatasets()The series of the statistics that count something: named, and filtered.
IsEmptyFilter(filter) staticWhether a filter keeps everything: no condition, or an empty group.
selectSource(source)Pick the source of the values.
whyNotSource(source)Why a source cannot be picked here.
selectType(type)Pick the plot.
setMeasure(measure)Count the entities, or sum one of their fields.
setFrom(value)The date the current period is counted from.
loadCollections()Read what the server can count, once.
selectRepository(repository)
selectCollection(collection)Count another collection: its fields are not the last one's, so the filters and fields start over.
getEntityClass()The schema of the collection counted, which the fields and the filters are picked from.
addDataset()Add a series to the statistics.
renderDatasets()Draw the series of the statistics: a name and a filter each.
fillControls()Fill the controls the template cannot bind: the lists of the server, the paths, the filters, the grids.
connect(selector, property, entity)Bind one <mmo-path> or <mmo-filter> to a property of this element, on the collection's schema.
renderStrips()Draw the strips of sources and types once: their state follows the data (updateStrips).
updateStrips(shape)Mark the source and the type picked, and turn off, with their reason, those that cannot be.
renderNotes()List what was turned off or changed, and why.
renderValues()Draw the grid of values: one row per series, one column per label.
renderPoints()Draw the points, one block per series.
getColorCount()How many colours the chart uses: one per label for a pie, one per series otherwise.
getColors(count)The colours of the first count series (or labels), the palette repeated when it is shorter.
renderColors()Draw one swatch per series (per label for a pie).
resetColors()Back to the chart's own palette.
schedulePreview()Redraw the preview once the edits pause: a chart read from the server is read again each time.
updatePreview()Give the preview what is configured.
getCode()The markup (and the script) that builds the same chart.
ToCode(value, indent) staticA value as javascript, the way a person writes it: a series, a point or a list of labels on one line.
renderCode()Show the code of what is configured.
copyCode()Copy the code to the clipboard.
.narrowset by itself when the element is too narrow to show the preview beside the form

Constants6

TYPES

staticmmo-chart-config.jhs:265

the plots, in the order they are offered

static TYPES = { bar: {label: 'Bar', icon: 'chart-column', hint: 'One bar per label and series. Stacked, the series pile into one bar per label.'}, line: {label: 'Line', icon: 'chart-line', hint: 'One line per series, across the labels.'}, area: {label: 'Area', icon: 'chart-area', hint: 'A line with the area under it filled, always smoothed.'}, pie: {label: 'Pie', icon: 'chart-pie', hint: 'One slice per label: the shares of a whole. Several series make several rings.'}, radar: {label: 'Radar', icon: 'chart-radar', hint: 'One axis per label, one polygon per series, scaled on the largest value.'}, scatter: {label: 'Scatter', icon: 'circle-dot', hint: 'One dot per point, on two numeric axes; a point with a size is a bubble.'}, tendency: {label: 'Value', icon: 'arrow-trend-up', hint: 'The first label is the current period: its value large, its change since the next one, then the other series.'}, table: {label: 'Table', icon: 'table', hint: 'Every value, with its change when one is shown.'} };

SOURCES

staticmmo-chart-config.jhs:277

where the values come from

static SOURCES = { values: {label: 'Values', icon: 'table-cells-large', hint: 'Typed here: one row per series, one column per label.'}, points: {label: 'Points', icon: 'location-dot', hint: 'Typed here: x, y, an optional size and label per point. Only a scatter, or the table, draws points.'}, statistics: {label: 'Statistics', icon: 'database', hint: 'Counted by the server over a collection, one label per period, the current one first.'}, url: {label: 'Address', icon: 'link', hint: "Read from any address answering a chart's configuration."} };

ANIMATIONS

staticmmo-chart-config.jhs:285

the easings MMO.core.transitions knows

static ANIMATIONS = ['linear', 'quadIn', 'quadOut', 'quadInOut', 'cubicIn', 'cubicOut', 'cubicInOut', 'quartIn', 'quartOut', 'quartInOut', 'quintIn', 'quintOut', 'quintInOut', 'easeIn', 'easeOut', 'easeInOut', 'backIn', 'backOut', 'backInOut', 'circIn', 'circOut', 'circInOut', 'bounceIn', 'bounceOut', 'bounceInOut', 'elasticIn', 'elasticOut', 'elasticInOut'];

PALETTES

staticmmo-chart-config.jhs:290

the palettes the server knows (\MMO\core\classes\aDataController::COLORS)

static PALETTES = ['default', 'dark', 'pastel', 'retro', 'dutch', 'river', 'blue-yellow', 'grey-red', 'black-pink', 'blues', 'blue-red', 'blue-pink', 'pink-blue', 'orange-purple'];

DEFAULTS

staticmmo-chart-config.jhs:294

what <mmo-chart> uses when its configuration says nothing

static DEFAULTS = { width: 560, height: 300, icon: 'chart-pie', animation: 'elasticInOut', padding: {left: 55, top: 20, right: 20, bottom: 40}, colors: ['#7c6af7', '#f76a8a', '#6af7c8', '#f7c46a', '#6ab3f7', '#f7a06a', '#a06af7', '#6af78a'] };

ATTRIBUTES

staticmmo-chart-config.jhs:301

the attributes of a chart this element writes, by option

static ATTRIBUTES = {type: 'type', icon: 'icon', unit: 'unit', stacked: 'stacked', smooth: 'smooth', trend: 'trend', trendTarget: 'trend-target', trendUnit: 'trend-unit', width: 'width', height: 'height'};

Properties2

chart

accessormmo-chart-config.jhs:385

The chart this element was read from, if any.

get chart() set chart(value)
Type
?HTMLElement

Methods44

read(chart)

mmo-chart-config.jhs:399

Take everything a chart shows: its source, its type and its options.

read(chart)
chartHTMLElement- a <mmo-chart>
returnsvoid

readStatistics(url)

mmo-chart-config.jhs:457

Take the statistics an address counts, if it is the server's statistics route.

readStatistics(url)
urlstring
returnsbooleanfalse when it is another address

applyTo(chart)

mmo-chart-config.jhs:495

Give a chart what is configured here. A chart read from an address keeps its options as attributes, which is what the next read of the address takes them from (and what a dashboard saves).

applyTo(chart)
chartHTMLElement- a <mmo-chart>
returnsvoid

IsPoints(data)

staticmmo-chart-config.jhs:526

Whether a list of series holds points ([x, y], {x, y}) rather than values.

static IsPoints(data)
dataArray
returnsboolean

Point(point)

staticmmo-chart-config.jhs:540

One point as the grid edits it.

static Point(point)
pointArray | object
returnsx: ?number, y: ?number, size: ?number, label: string}

getShape()

mmo-chart-config.jhs:552

What the data looks like, whatever its source: what the type and the options are checked against.

getShape()A source read from the server is known once the preview has read it; until then, what its settings promise (the statistics) or nothing (an address).
returnsknown: boolean, points: boolean, labels: number, series: number, negative: boolean, rate: boolean}

whyNotType(type, shape)

mmo-chart-config.jhs:589

Why a plot cannot draw this data.

whyNotType(type, shape)
typestring
shapeobject- getShape
returns?stringnull when it can

refresh()

mmo-chart-config.jhs:618

Work out what the current type and source allow, turn off what they do not, and redraw the preview.

refresh()
returnsvoid

disableTargets()

mmo-chart-config.jhs:735

Turn off the comparisons the data cannot make (refresh).

disableTargets()
returnsvoid

changed()

mmo-chart-config.jhs:743

Something was edited: refresh once the burst of events it fires is over.

changed()
returnsvoid

describe()

mmo-chart-config.jhs:761

Everything configured, as a chart takes it: its attributes, and either its configuration (typed values) or the address it reads them from. An option the type does not read, or the source cannot keep, is left out.

describe()
returnsattributes: object, config: ?object, url: ?string}

getStatisticsUrl()

mmo-chart-config.jhs:823

The server's statistics route, with every setting in its query.

getStatisticsUrl()
returns?stringnull until a collection is picked

getDatasets()

mmo-chart-config.jhs:852

The series of the statistics that count something: named, and filtered.

getDatasets()
returnsArray<{name: string, filter: object>}

IsEmptyFilter(filter)

staticmmo-chart-config.jhs:867

Whether a filter keeps everything: no condition, or an empty group.

static IsEmptyFilter(filter)
filter?object
returnsboolean

selectSource(source)

mmo-chart-config.jhs:882

Pick the source of the values.

selectSource(source)
sourcestring- values, points, statistics or url
returnsvoid

whyNotSource(source)

mmo-chart-config.jhs:901

Why a source cannot be picked here.

whyNotSource(source)
sourcestring
returns?string

setMeasure(measure)

mmo-chart-config.jhs:922

Count the entities, or sum one of their fields.

setMeasure(measure)
measurestring- count or sum
returnsvoid

setFrom(value)

mmo-chart-config.jhs:931

The date the current period is counted from.

setFrom(value)
valuestring- Y-m-d, empty for today
returnsvoid

selectCollection(collection)

mmo-chart-config.jhs:977

Count another collection: its fields are not the last one's, so the filters and fields start over.

selectCollection(collection)
collectionstring
returnsvoid

getEntityClass()

mmo-chart-config.jhs:993

The schema of the collection counted, which the fields and the filters are picked from.

getEntityClass()
returns?stringthe entity's class

renderDatasets()

mmo-chart-config.jhs:1013

Draw the series of the statistics: a name and a filter each.

renderDatasets()
returnsvoid

fillControls()

mmo-chart-config.jhs:1045

Fill the controls the template cannot bind: the lists of the server, the paths, the filters, the grids.

fillControls()Called whenever a section of the form is shown again.
returnsvoid

connect(selector, property, entity)

mmo-chart-config.jhs:1093

Bind one <mmo-path> or <mmo-filter> to a property of this element, on the collection's schema.

connect(selector, property, entity)
selectorstring
propertystring
entity?string- the class of the collection's entities
returnsvoid

renderStrips()

mmo-chart-config.jhs:1117

Draw the strips of sources and types once: their state follows the data (updateStrips).

renderStrips()
returnsvoid

updateStrips(shape)

mmo-chart-config.jhs:1137

Mark the source and the type picked, and turn off, with their reason, those that cannot be.

updateStrips(shape)
shapeobject- getShape
returnsvoid

renderValues()

mmo-chart-config.jhs:1177

Draw the grid of values: one row per series, one column per label. Every cell writes to values as it is typed; adding or removing a row or a column redraws it.

renderValues()
returnsvoid

getColorCount()

mmo-chart-config.jhs:1285

How many colours the chart uses: one per label for a pie, one per series otherwise.

getColorCount()
returnsnumber

getColors(count)

mmo-chart-config.jhs:1295

The colours of the first count series (or labels), the palette repeated when it is shorter.

getColors(count)
countnumber
returnsArray<string>

schedulePreview()

mmo-chart-config.jhs:1349

Redraw the preview once the edits pause: a chart read from the server is read again each time.

schedulePreview()
returnsvoid

updatePreview()

mmo-chart-config.jhs:1359

Give the preview what is configured. A chart that read an address is replaced rather than given values, so an answer still on its way cannot overwrite them.

updatePreview()
returnsvoid

ToCode(value, indent)

staticmmo-chart-config.jhs:1442

A value as javascript, the way a person writes it: a series, a point or a list of labels on one line.

static ToCode(value, indent = '')
value*
indent = ''string- the indentation of the line the value starts on
returnsstring

CSS hooks1

.narrow

mmo-chart-config.jhs

set by itself when the element is too narrow to show the preview beside the form

.narrow