opendash
Version:
open.DASH data visualization framework
90 lines • 5.35 kB
JavaScript
import * as React from "react";
import { Steps, Tabs, Divider, Button } from "antd";
import { useImmerState, useTranslation, Boundary } from "../..";
import { Container, StepNav, ButtonNav, SettingsHolder, PreviewHolder, Description, } from "./layout";
import { VisualisationType } from "./types";
import { Step0 } from "./step_0";
import { Step1 } from "./step_1";
import { Step2 } from "./step_2";
import { Step3 } from "./step_3";
import { Visualisation } from "./visualisation";
export var DataExplorer = function (_a) {
var _b, _c;
var t = useTranslation(["opendash"])[0];
var _d = React.useState(0), step = _d[0], setStep = _d[1];
var firstRun = React.useRef(true);
var _e = useImmerState({
items: [
["demo@video.de", "demo.video.energieleistunga", 0],
["demo@video.de", "demo.video.energieverbrauchb", 0],
],
time: {
start: Date.now() - 1000 * 60 * 60 * 1,
end: Date.now(),
live: true,
},
visualisation: VisualisationType.TIMESERIES,
settings: {},
}), state = _e[0], updateState = _e[1];
React.useEffect(function () {
var _a;
if (Object.keys(state.settings).length === 0) {
if (((_a = state) === null || _a === void 0 ? void 0 : _a.visualisation) === VisualisationType.TIMESERIES) {
updateState(function (draft) {
draft.settings.interaction_legend = true;
draft.settings.interaction_tooltips = true;
draft.settings.interaction_zoom_x = true;
draft.settings.yaxis_auto = true;
});
}
}
if (firstRun.current) {
return void (firstRun.current = false);
}
var timeout = setTimeout(function () {
setStep(3);
}, 1000);
return function () {
clearTimeout(timeout);
};
}, [(_b = state) === null || _b === void 0 ? void 0 : _b.visualisation]);
var errorKey = React.useMemo(function () { return "" + Math.random(); }, [(_c = state) === null || _c === void 0 ? void 0 : _c.items]);
var showPreview = !(step === 0 || step === 1);
return (
// <Modal visible width={1000}>
React.createElement(Container, null,
React.createElement(StepNav, null,
React.createElement(Steps, { current: step, onChange: setStep },
React.createElement(Steps.Step, { title: t("data_explorer.step_0_title"), subTitle: t("data_explorer.step_0_subtitle", {
count: state.items.length,
}), status: step !== 0 && state.items.length === 0 ? "error" : undefined }),
React.createElement(Steps.Step, { title: t("data_explorer.step_1_title"), subTitle: t("data_explorer.step_1_subtitle") }),
React.createElement(Steps.Step, { title: t("data_explorer.step_2_title"), subTitle: t("data_explorer.step_2_subtitle") }),
React.createElement(Steps.Step, { title: t("data_explorer.step_3_title"), subTitle: t("data_explorer.step_3_subtitle") }))),
React.createElement(Divider, null),
React.createElement(SettingsHolder, null,
React.createElement(Tabs, { activeKey: step.toString(), renderTabBar: function () { return React.createElement(React.Fragment, null); } },
React.createElement(Tabs.TabPane, { tab: t("data_explorer.step_0_title"), key: "0" },
React.createElement(Description, { children: t("data_explorer.step_0_description") }),
React.createElement(Step0, { state: state, updateState: updateState })),
React.createElement(Tabs.TabPane, { tab: t("data_explorer.step_1_title"), key: "1" },
React.createElement(Description, { children: t("data_explorer.step_1_description") }),
React.createElement(Step1, { state: state, updateState: updateState })),
React.createElement(Tabs.TabPane, { tab: t("data_explorer.step_2_title"), key: "2" },
React.createElement(Description, { children: t("data_explorer.step_2_description") }),
React.createElement(Step2, { state: state, updateState: updateState })),
React.createElement(Tabs.TabPane, { tab: t("data_explorer.step_3_title"), key: "3" },
React.createElement(Step3, { state: state, updateState: updateState })))),
React.createElement(ButtonNav, null,
React.createElement(Button, { type: "default", disabled: step <= 0, onClick: function (e) { return setStep(step - 1); }, children: "Previous" // {t("data_explorer.step_3_title")}
}),
React.createElement(Button, { type: "primary", disabled: step >= 3, onClick: function (e) { return setStep(step + 1); }, style: { float: "right" }, children: "Next" // {t("data_explorer.step_3_title")}
})),
React.createElement(Divider, null),
showPreview && (React.createElement(PreviewHolder, null,
React.createElement(Boundary, { key: errorKey },
React.createElement(Visualisation, { state: state })))))
// </Modal>
);
};
//# sourceMappingURL=index.js.map