opendash
Version:
open.DASH data visualization framework
103 lines • 3.89 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 "../..";
import { round, aggregate } from "./helper";
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 id = _a[0], dimension = _a[1];
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 seriesData = React.useMemo(function () {
return state.items.map(function (_a) {
var id = _a[0], dimension = _a[1];
var item = items[id];
var valueType = item.valueTypes[dimension];
var values = data[id].map(function (x) { return x.value[dimension]; });
var value = round(aggregate(state.settings.aggregation, values), 2);
return {
name: item.name + " (" + valueType.name + ")",
_unit: valueType.unit,
color: stringToColor(item.id),
y: value,
};
});
}, [state, data]);
var options = React.useMemo(function () {
var result = {
title: null,
subtitle: null,
chart: {
type: "pie",
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
tooltip: {
pointFormat: "<b>{point.y} {point._unit}</b>",
},
plotOptions: {
pie: {
dataLabels: {
enabled: false,
format: "<b>{point.name}</b>: {point.y} {point._unit}",
},
showInLegend: true,
startAngle: -90,
endAngle: 360 - 90,
center: ["50%", "50%"],
size: "100%",
},
},
legend: {
enabled: false,
},
series: [
// @ts-ignore
{
name: state.settings.series_name,
data: seriesData,
innerSize: "0%",
},
],
};
if (state.settings.style === "donut") {
// @ts-ignore
result.series[0].innerSize = "60%";
}
if (state.settings.style === "half_donut") {
// @ts-ignore
result.series[0].innerSize = "60%";
Object.assign(result.plotOptions.pie, {
startAngle: -90,
endAngle: 90,
center: ["50%", "75%"],
size: "110%",
});
}
if (state.settings.interaction_legend) {
result.legend.enabled = true;
}
return result;
}, [state.settings]);
return (React.createElement(HighchartsChart, { options: options, style: { width: "100%", height: "400px" } }));
};
//# sourceMappingURL=visualisation_pie.js.map