opendash
Version:
open.DASH data visualization framework
106 lines • 3.99 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import * as React from "react";
import { useTranslation, HighchartsChart, stringToColor } from "../..";
export var Visualisation = function (_a) {
var state = _a.state, data = _a.data, items = _a.items;
var _b;
var t = useTranslation(["opendash"])[0];
var units = React.useMemo(function () {
return Object.fromEntries(state.items.map(function (_a, index) {
var source = _a[0], id = _a[1], dimension = _a[2];
return [
items[id].valueTypes[dimension].name +
items[id].valueTypes[dimension].unit,
__assign(__assign({}, items[id].valueTypes[dimension]), { index: index }),
];
}));
}, [(_b = state) === null || _b === void 0 ? void 0 : _b.items, items]);
var series = React.useMemo(function () {
return state.items.map(function (_a) {
var source = _a[0], id = _a[1], dimension = _a[2];
var item = items[id];
var valueType = item.valueTypes[dimension];
var unit = units[valueType.name + valueType.unit];
return {
name: item.name + " (" + valueType.name + ")",
color: stringToColor(item.id),
type: state.settings.style,
yAxis: state.settings.yaxis_auto
? Object.values(units).indexOf(unit)
: 0,
data: data[id].map(function (x) { return [x.date, x.value[dimension]]; }),
};
});
}, [state, data]);
var options = React.useMemo(function () {
var result = {
title: null,
subtitle: null,
chart: {
zoomType: null,
},
xAxis: {
title: {
text: state.settings.xaxis_label,
},
type: "datetime",
},
yAxis: {
title: {
text: state.settings.yaxis_label,
},
labels: {
format: "{value}",
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
enableMouseTracking: false,
},
},
series: series,
};
if (state.settings.yaxis_auto) {
result.yAxis = Object.values(units).map(function (unit) { return ({
title: {
text: unit.name + " (" + unit.unit + ")",
},
labels: {
format: "{value}" + unit.unit,
},
}); });
}
if (state.settings.interaction_zoom_x) {
result.chart.zoomType = "x";
}
if (state.settings.interaction_zoom_y) {
result.chart.zoomType = "y";
}
if (state.settings.interaction_zoom_x &&
state.settings.interaction_zoom_y) {
result.chart.zoomType = "xy";
}
if (state.settings.interaction_legend) {
result.legend.enabled = true;
}
if (state.settings.interaction_tooltips) {
result.plotOptions.series.enableMouseTracking = true;
}
return result;
}, [state.settings]);
return (React.createElement(HighchartsChart, { options: options, style: { width: "100%", height: "400px" } }));
};
//# sourceMappingURL=visualisation_timeseries.js.map