chart = {
if (!hcOptions) return 'missing input';
const figure = html`<div style="width: 100%; height: 400px;">`;
Highcharts.chart(figure, hcOptions);
return figure;
}
a = new Date(1589741167599.019)
// update hcOptions with javascript that cannot be serialized
mutable hcOptions = {
if (!latest || !latest.value) return null;
const opts = latest.value;
opts.xAxis.events = {
afterSetExtremes: function(event) {
// console.log(event);
const { max, min } = event;
mutable minMax = { max, min };
}
};
opts.tooltip.formatter = function() {
return (
'The value for <b>' + new Date(this.x) + '</b> is <b>' + this.y + '</b>'
);
};
return opts;
}
{
const name = 'min-max';
const value = minMax;
const res = send(name, value);
return res;
}
mutable minMax = ({ min: 0, max: 0 })
{
const variables = { channel: "channel-1", name: "hcOpts" };
const opts = { fetchPolicy: 'network-only' };
const obj = await b.actions.read({ client, variables, opts, raw: false });
mutable latest = obj;
return obj;
}
send = async (name, value) => {
const variables = {
channel,
name,
value: JSON.stringify(value),
add_histo: false,
expiry: null
};
const opts = { fetchPolicy: 'no-cache' };
await b.actions.publishWrite({ client, variables, opts, raw: false });
return variables.value;
}
latest
// synced
synced = {
const params = {
client,
channel,
pattern: false,
maxDuration: 3000,
filter: name => name === 'hcOpts'
};
return buildSubscription(params);
}
// handler.remove('10_38_41_582')
Highcharts = {
const Highcharts = await require("highcharts@8");
await require("highcharts@8/highcharts-more.js");
// pick needed modules from list https://code.highcharts.com/
await require("highcharts@8/modules/exporting.js");
await require("highcharts@8/modules/dumbbell.js");
await require("highcharts@8/modules/drilldown.js");
await require("highcharts@8/modules/heatmap.js");
await require("highcharts@8/modules/treemap.js");
// etc
return Highcharts;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
