opendash
Version:
open.DASH data visualization framework
136 lines • 8.25 kB
JavaScript
import * as React from "react";
import moment from "moment";
import produce from "immer";
import { useTranslation, useDeepCompareEffect, } from "..";
import { Radio, DatePicker, InputNumber, Checkbox, Select, Row, Col, } from "antd";
var COL_STYLE = { marginBottom: 24 };
var INPUT_STYLE = { width: "100%" };
export function DataItemHistoryOptionsPicker(_a) {
var style = _a.style, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.value, value = _c === void 0 ? {} : _c, onChange = _a.onChange;
var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
var t = useTranslation(["opendash"])[0];
useDeepCompareEffect(function () {
onChange(produce(value, function (draft) {
if (!options.live) {
draft.live = false;
}
else if (options.live && options.liveRequired) {
draft.live = true;
}
if (!options.history) {
Object.assign(draft, {
historyType: undefined,
start: undefined,
end: undefined,
unit: undefined,
value: undefined,
aggregation: undefined,
});
}
else if (options.history &&
options.historyRequired &&
!draft.historyType) {
draft.historyType = "absolute";
}
}));
}, [value]);
React.useEffect(function () {
var _a, _b;
if (((_a = value) === null || _a === void 0 ? void 0 : _a.historyType) === "absolute") {
onChange(merge(value, {
start: moment().subtract(7, "day").startOf("day").valueOf(),
end: Date.now(),
unit: undefined,
value: undefined,
}));
}
else if (((_b = value) === null || _b === void 0 ? void 0 : _b.historyType) === "relative") {
onChange(merge(value, {
start: undefined,
end: undefined,
unit: "week",
value: 1,
}));
}
else {
onChange(merge(value, {
start: undefined,
end: undefined,
unit: undefined,
value: undefined,
}));
}
}, [(_d = value) === null || _d === void 0 ? void 0 : _d.historyType]);
return (React.createElement(React.Fragment, null,
React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 24 },
React.createElement(Checkbox, { checked: value.live, disabled: !((_e = options) === null || _e === void 0 ? void 0 : _e.live) || ((_f = options) === null || _f === void 0 ? void 0 : _f.liveRequired), onChange: function (e) {
onChange(merge(value, {
live: e.target.checked,
}));
} }, t("monitoring.history_options.live_enabled")))),
React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 24 },
React.createElement(Checkbox, { checked: !!value.historyType, disabled: !((_g = options) === null || _g === void 0 ? void 0 : _g.history) || ((_h = options) === null || _h === void 0 ? void 0 : _h.historyRequired), onChange: function (e) {
onChange(merge(value, {
historyType: e.target.checked ? "absolute" : undefined,
}));
} }, t("monitoring.history_options.history_enabled")))),
React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 24 },
React.createElement(Radio.Group, { disabled: !value.historyType, size: "small", value: value.historyType, onChange: function (e) {
onChange(merge(value, {
historyType: e.target.value,
}));
} },
React.createElement(Radio.Button, { value: "absolute" }, t("monitoring.history_options.type_absolute")),
React.createElement(Radio.Button, { value: "relative" }, t("monitoring.history_options.type_relative"))))),
value.historyType === "relative" && (React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 12 },
React.createElement(InputNumber, { disabled: !value.historyType, style: INPUT_STYLE, min: 1, value: value.value, onChange: function (nextValue) {
return onChange(merge(value, {
value: Math.floor(Math.max(nextValue, 1)),
}));
} })),
React.createElement(Col, { style: COL_STYLE, span: 12 },
React.createElement(Select, { disabled: !value.historyType, style: INPUT_STYLE, value: value.unit, onChange: function (unit) {
onChange(merge(value, {
unit: unit,
}));
} },
React.createElement(Select.Option, { value: "day" }, t("ui.day", { count: value.value })),
React.createElement(Select.Option, { value: "week" }, t("ui.week", { count: value.value })),
React.createElement(Select.Option, { value: "month" }, t("ui.month", { count: value.value })),
React.createElement(Select.Option, { value: "year" }, t("ui.year", { count: value.value })))))),
value.historyType === "absolute" && (React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 24 },
React.createElement(DatePicker.RangePicker, { disabled: !value.historyType, allowClear: false, placeholder: t("ui.select_date_range"), style: style, value: [moment((_j = value) === null || _j === void 0 ? void 0 : _j.start), moment((_k = value) === null || _k === void 0 ? void 0 : _k.end)], onChange: function (nextValue) {
return onChange(merge(value, {
start: nextValue[0].valueOf(),
end: nextValue[1].valueOf(),
unit: undefined,
value: undefined,
}));
} })))),
React.createElement(Row, { gutter: 16 },
React.createElement(Col, { style: COL_STYLE, span: 24 },
React.createElement(Select, { style: INPUT_STYLE, disabled: !((_l = options) === null || _l === void 0 ? void 0 : _l.aggregation) || ((_m = options) === null || _m === void 0 ? void 0 : _m.aggregationRequired), value: (_o = value
.aggregationType, (_o !== null && _o !== void 0 ? _o : "none")), onChange: function (aggregation) {
onChange(mergeDim(value, {
aggregationType: aggregation === "none" ? null : aggregation,
}));
} },
React.createElement(Select.Option, { value: "none" }, t("monitoring.history_options.aggregation_none")),
React.createElement(Select.Option, { value: "sum" }, t("monitoring.history_options.aggregation_sum")),
React.createElement(Select.Option, { value: "mean" }, t("monitoring.history_options.aggregation_mean")),
React.createElement(Select.Option, { value: "max" }, t("monitoring.history_options.aggregation_max")),
React.createElement(Select.Option, { value: "min" }, t("monitoring.history_options.aggregation_min")),
React.createElement(Select.Option, { value: "count" }, t("monitoring.history_options.aggregation_count")))))));
}
function merge(current, update) {
return Object.assign({}, current || {}, update);
}
function mergeDim(current, update) {
return Object.assign({}, current || {}, update);
}
//# sourceMappingURL=DataItemHistoryOptionsPicker.js.map