opendash
Version:
open.DASH data visualization framework
71 lines • 3.79 kB
JavaScript
import * as React from "react";
import { useTranslation, DataItemValueDisplay, compare, DataItemChangedRelative, } from "..";
import { Table, TableBody, TableHeader, TableRowLabels, TableRow, TableCell, } from "./DataSidebar.layout";
import { Drawer, Input } from "antd";
import { useDataItems } from "../hooks/useDataItems";
export var DataSidebar = function (_a) {
var open = _a.open, close = _a.close;
var t = useTranslation(["opendash"])[0];
var _b = React.useState(), searchString = _b[0], setSearchString = _b[1];
var items = useDataItems(searchString);
var groups = useData(items);
return (React.createElement(Drawer, { title: t("monitoring.data_sidebar.title"), visible: open, width: Math.min(600, window.innerWidth), onClose: function (e) { return close(); }, bodyStyle: { padding: 0 } },
React.createElement("div", { style: { padding: 24 } },
React.createElement(Input.Search, { placeholder: t("monitoring.data_sidebar.search_placeholder"), onSearch: function (value) {
setSearchString(value);
} })),
React.createElement(Table, null, groups.map(function (_a) {
var unit = _a.unit, count = _a.count, items = _a.items;
return (React.createElement(TableBody, { key: unit },
React.createElement(TableHeader, null,
React.createElement(TableCell, { colSpan: 7 },
unit,
" (",
count,
")")),
React.createElement(TableRowLabels, null,
React.createElement(TableCell, null, t("monitoring.data_sidebar.col_name")),
React.createElement(TableCell, null, t("monitoring.data_sidebar.col_value")),
React.createElement(TableCell, null, t("monitoring.data_sidebar.col_date"))),
items.map(function (item) { return (React.createElement(TableRow, { key: item.key, title: "ID: " + item.id + "\nDimension: " + item.dimension },
React.createElement(TableCell, null, item.name),
React.createElement(TableCell, null,
React.createElement(DataItemValueDisplay, { item: item.item, dimension: item.dimension })),
React.createElement(TableCell, null,
React.createElement(DataItemChangedRelative, { item: item.item })))); })));
}))));
};
function useData(items) {
return React.useMemo(function () {
var units = {
Events: [],
};
items.forEach(function (item) {
item.valueTypes.forEach(function (valueType, dimension) {
if (["Boolean", "Number", "String"].includes(valueType.type)) {
var group = valueType.type === "Boolean" ? "Events" : valueType.unit || "-";
if (!units[group]) {
units[group] = [];
}
var x = {
id: item.id,
dimension: dimension,
item: item,
key: [item.id, dimension].join("~"),
name: item.name + " ~ " + valueType.name,
};
units[group].push(x);
}
});
});
return Object.entries(units).map(function (_a) {
var unit = _a[0], items = _a[1];
return ({
unit: unit,
count: items.length,
items: items.sort(compare(function (i) { return i.name; })),
});
});
}, [items]);
}
//# sourceMappingURL=DataSidebar.js.map