opendash
Version:
open.DASH data visualization framework
163 lines • 7.67 kB
JavaScript
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
import * as React from "react";
import { useTranslation, useOpenDashServices, useSource, useDataItems, DataItemValueDisplay, DataItemChangedRelative, } from "..";
import { Table, Tag } from "antd";
export var DataSelect = React.memo(function DataSelect(_a) {
var options = _a.selectionOptions, _b = _a.selection, selection = _b === void 0 ? [] : _b, onSelection = _a.onSelection;
var _c;
var t = useTranslation(["opendash"])[0];
var SourceService = useOpenDashServices().SourceService;
var items = useDataItems();
var _d = useSource(), rootSource = _d[0], sources = _d[2];
var data = React.useMemo(function () {
return createNodesForSource(rootSource);
function createNodesForSource(source) {
var sourceChildren = SourceService.getChildren(source).map(function (childSource) { return createNodesForSource(childSource); });
var itemChildren = items
.filter(function (item) { return item.source === source.tag; })
.map(function (item) { return createNodesForItem(item); });
return {
key: JSON.stringify(source.id),
name: source.name,
sourceKey: source.id,
children: __spreadArrays(sourceChildren, itemChildren),
};
}
function createNodesForItem(item) {
var _a;
if (item.valueTypes.length === 1) {
var valueType = item.valueTypes[0];
return {
key: ((_a = options) === null || _a === void 0 ? void 0 : _a.select) === "item"
? JSON.stringify([item.source, item.id])
: JSON.stringify([item.source, item.id, 0]),
name: item.name + " (" + valueType.name + ")",
dimension: valueType,
dimensionKey: [item.source, item.id, 0],
dimensionType: valueType.type,
item: item,
itemKey: [item.source, item.id],
};
}
return {
key: JSON.stringify([item.source, item.id]),
name: item.name,
item: item,
itemKey: [item.source, item.id],
children: item.valueTypes.map(function (valueType, i) {
return {
key: JSON.stringify([item.source, item.id, i]),
name: valueType.name,
dimension: valueType,
dimensionKey: [item.source, item.id, i],
dimensionType: valueType.type,
};
}),
};
}
}, [sources, items, (_c = options) === null || _c === void 0 ? void 0 : _c.select]);
var columns = [
{
title: t("data.viewer.col_name"),
dataIndex: "name",
key: "name",
},
{
title: t("data.viewer.col_type"),
dataIndex: "key",
key: "type",
render: function (key, row) {
if (row.item && row.dimension) {
return (React.createElement(React.Fragment, null,
React.createElement(Tag, null, t("data.item.label")),
React.createElement(Tag, null, t("data.item_dimension.types." + row.dimension.type))));
}
if (row.dimension) {
React.createElement(Tag, null, t("data.item_dimension.types." + row.dimension.type));
}
if (row.item) {
return React.createElement(Tag, null, t("data.item.label"));
}
if (row.sourceKey) {
return React.createElement(Tag, null, t("sources.label"));
}
return null;
},
},
{
title: t("data.viewer.col_value"),
dataIndex: "key",
key: "value",
render: function (key, row) {
if (!row.dimensionKey) {
return null;
}
var _a = row.dimensionKey, dimension = _a[2];
return (React.createElement("span", { style: { fontSize: ".9em" } },
React.createElement(DataItemValueDisplay, { item: row.item, dimension: dimension })));
},
},
{
title: t("data.viewer.col_time"),
dataIndex: "key",
key: "time",
render: function (key, row) {
if (!row.dimensionKey) {
return null;
}
return (React.createElement("span", { style: { fontSize: ".9em" } },
React.createElement(DataItemChangedRelative, { item: row.item })));
},
},
];
var rowSelection = React.useMemo(function () {
var _a, _b;
return !options
? undefined
: {
type: (((_a = options) === null || _a === void 0 ? void 0 : _a.max) === 1 ? "radio" : "checkbox"),
hideDefaultSelections: !!((_b = options) === null || _b === void 0 ? void 0 : _b.max),
selectedRowKeys: selection.map(function (v) { return JSON.stringify(v); }),
getCheckboxProps: function (row) { return ({
disabled: options.select === "source"
? !row.sourceKey
: options.select === "item"
? !row.itemKey
: options.select === "dimension" &&
Array.isArray(options.types)
? !row.dimensionKey ||
!options.types.includes(row.dimensionType)
: options.select === "dimension"
? !row.dimensionKey
: true,
}); },
onChange: function (selectedRowKeys, selectedRows) {
var nextValue = selectedRows
.filter(Boolean)
.map(function (row) {
return options.select === "source"
? row.sourceKey
: options.select === "item"
? row.itemKey
: options.select === "dimension"
? row.dimensionKey
: null;
});
if (options.max && nextValue.length > options.max) {
onSelection(nextValue.slice(nextValue.length - options.max));
}
else {
onSelection(nextValue);
}
},
};
}, [options, selection, onSelection]);
return (React.createElement(Table, { size: "small", columns: columns, pagination: false, rowSelection: rowSelection, dataSource: data.children }));
});
//# sourceMappingURL=DataSelect.js.map