Version 2.0.2 is out, and includes the timestack scale.
Demo View
{
"custom": {
"format": {
"month": "short"
}
},
"params": {},
"propConfig": {
"custom.data": {
"access": "PRIVATE",
"binding": {
"config": {
"expression": "now(0)"
},
"transforms": [
{
"code": "\t\t\n\timport random\n\t\t\n\tnow \u003d value\n\tend \u003d system.date.toMillis(now)\n\tstart \u003d system.date.toMillis(system.date.addMonths(now, -1))\n\tsteps \u003d (end - start) / 2048\n\t\n\tpoints \u003d []\n\ty \u003d 50\n\t\n\tmoves \u003d [-1, 1]\n\t\n\tfor ts in range(start, end, steps):\n\t\ty +\u003d random.choice(moves)\n\t\tpoints.append({ \u0027x\u0027: ts, \u0027y\u0027: y })\n\t\t\t\n\treturn points",
"type": "script"
}
],
"type": "expr"
},
"persistent": false
},
"custom.format": {
"persistent": true
}
},
"props": {
"defaultSize": {
"height": 477
}
},
"root": {
"children": [
{
"meta": {
"name": "Chartjs"
},
"position": {
"basis": "300px",
"grow": 1,
"shrink": 0
},
"propConfig": {
"props.data.datasets[0].data": {
"binding": {
"config": {
"path": "view.custom.data"
},
"type": "property"
}
},
"props.options.scales.x.timestack.format_style.month": {
"binding": {
"config": {
"path": "view.custom.format.month"
},
"type": "property"
}
}
},
"props": {
"data": {
"datasets": [
{
"label": "Dataset 1"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 1
},
"point": {
"radius": 0
}
},
"parsing": false,
"plugins": {
"legend": {
"display": false
}
},
"scales": {
"x": {
"timestack": {
"format_style": {}
},
"type": "timestack"
},
"y": {
"type": "linear"
}
}
},
"redraw": true
},
"type": "embr.chart.chart-js"
},
{
"children": [
{
"events": {
"component": {
"onActionPerformed": {
"config": {
"script": "\tchart \u003d self.parent.parent.getChild(\"Chartjs\")\n\tproxy \u003d chart.getJavaScriptProxy(\u0027chart\u0027)\n\tproxy.runAsync(\u0027\u0027\u0027\n\t\t() \u003d\u003e this.resetZoom()\n\t\u0027\u0027\u0027)\n\t"
},
"scope": "G",
"type": "script"
}
}
},
"meta": {
"name": "ResetZoom"
},
"position": {
"shrink": 0
},
"props": {
"image": {
"icon": {
"path": "material/zoom_out_map"
}
},
"style": {
"padding": "0.25rem"
},
"text": "Reset Zoom"
},
"type": "ia.input.button"
},
{
"children": [
{
"meta": {
"name": "Label"
},
"position": {
"shrink": 0
},
"props": {
"text": "Month Style"
},
"type": "ia.display.label"
},
{
"meta": {
"name": "Dropdown"
},
"position": {
"basis": "150px",
"shrink": 0
},
"propConfig": {
"props.value": {
"binding": {
"config": {
"bidirectional": true,
"path": "view.custom.format.month"
},
"type": "property"
}
}
},
"props": {
"options": [
{
"label": "short",
"value": "short"
},
{
"label": "long",
"value": "long"
},
{
"label": "numeric",
"value": "numeric"
},
{
"label": "2-digit",
"value": "2-digit"
}
],
"style": {
"minWidth": "150px"
}
},
"type": "ia.input.dropdown"
}
],
"meta": {
"name": "MonthStyle"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"gap": "0.5rem",
"marginLeft": "auto"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "Interaction"
},
"position": {
"shrink": 0
},
"props": {
"style": {
"padding": "0.5rem"
}
},
"type": "ia.container.flex"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column",
"style": {
"gap": "1rem",
"padding": "0.25rem"
}
},
"type": "ia.container.flex"
}
}