opendash
Version:
open.DASH data visualization framework
92 lines • 6.8 kB
JavaScript
import * as React from "react";
import { useTranslation } from "../..";
import { Select } from "./select";
import { Description } from "./layout";
import "@ant-design/compatible/assets/index.css";
import { Collapse, Input, Checkbox } from "antd";
export var Settings = function (_a) {
var state = _a.state, updateState = _a.updateState;
var t = useTranslation(["opendash"])[0];
return (React.createElement(React.Fragment, null,
React.createElement(Collapse, { bordered: false, defaultActiveKey: ["general"] },
React.createElement(Collapse.Panel, { header: t("data_explorer.timeseries.general_options"), key: "general" },
React.createElement(Description, { children: t("data_explorer.timeseries.style") }),
React.createElement(Select, { value: state.settings.style, size: 4, onChange: function (nextValue) {
updateState(function (draft) {
draft.settings.style = nextValue;
});
}, options: [
{
label: t("data_explorer.timeseries.style_line"),
icon: "line-chart",
tooltip: null,
value: "line",
disabled: false,
},
{
label: t("data_explorer.timeseries.style_area"),
icon: "area-chart",
tooltip: null,
value: "area",
disabled: false,
},
{
label: t("data_explorer.timeseries.style_scatter"),
icon: "dot-chart",
tooltip: null,
value: "scatter",
disabled: false,
},
{
label: t("data_explorer.timeseries.style_bar"),
icon: "bar-chart",
tooltip: null,
value: "bar",
disabled: false,
},
] })),
React.createElement(Collapse.Panel, { header: t("data_explorer.timeseries.interaction_options"), key: "interaction" },
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("opendash.data_explorer.timeseries.interaction_legend"), checked: state.settings.interaction_legend, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.interaction_legend = value); });
} })),
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("opendash.data_explorer.timeseries.interaction_tooltips"), checked: state.settings.interaction_tooltips, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.interaction_tooltips = value); });
} })),
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("opendash.data_explorer.timeseries.interaction_zoom_x"), checked: state.settings.interaction_zoom_x, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.interaction_zoom_x = value); });
} })),
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("opendash.data_explorer.timeseries.interaction_zoom_y"), checked: state.settings.interaction_zoom_y, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.interaction_zoom_y = value); });
} })),
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("opendash.data_explorer.timeseries.interaction_minimap"), checked: state.settings.interaction_minimap, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.interaction_minimap = value); });
} })),
React.createElement(Description, { children: t("opendash.data_explorer.timeseries.interaction_options_description") })),
React.createElement(Collapse.Panel, { header: t("data_explorer.timeseries.axis_options"), key: "axis" },
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Checkbox, { children: t("data_explorer.timeseries.yaxis_auto"), checked: state.settings.yaxis_auto, onChange: function (event) {
var value = event.target.checked;
updateState(function (draft) { return void (draft.settings.yaxis_auto = value); });
} })),
React.createElement("div", { style: { marginBottom: 24 } },
React.createElement(Input, { style: { width: "calc(50% - 12px)", marginRight: 24 }, placeholder: t("data_explorer.timeseries.xaxis_label"), value: state.settings.xaxis_label, onChange: function (event) {
var value = event.target.value;
updateState(function (draft) { return void (draft.settings.xaxis_label = value); });
} }),
React.createElement(Input, { style: { width: "calc(50% - 12px)" }, placeholder: t("data_explorer.timeseries.yaxis_label"), value: state.settings.yaxis_label, disabled: state.settings.yaxis_auto, onChange: function (event) {
var value = event.target.value;
updateState(function (draft) { return void (draft.settings.yaxis_label = value); });
} })),
React.createElement(Description, { children: t("opendash.data_explorer.timeseries.axis_options_description") })))));
};
//# sourceMappingURL=step_3_timeseries.js.map