opendash/dist/components/DataExplorer/visualisation.js

open.DASH data visualization framework

import * as React from "react";
import { Alert, Spin } from "antd";
import { useTranslation } from "../..";
import { VisualisationType } from "./types";
import { Description } from "./layout";
import { useData, useItems } from "./helper";
import { Visualisation as Timeseries } from "./visualisation_timeseries";
import { Visualisation as Pie } from "./visualisation_pie";
import { Visualisation as Heatmap } from "./visualisation_heatmap";
import { Visualisation as Spider } from "./visualisation_spider";
import { Visualisation as Histogramm } from "./visualisation_histogramm";
import { Visualisation as Hierarchy } from "./visualisation_hierarchy";
import { Visualisation as Kpi } from "./visualisation_kpi";
import { Visualisation as Table } from "./visualisation_table";
import { Visualisation as Raw } from "./visualisation_raw";
export var Visualisation = function (_a) {
    var state = _a.state;
    var t = useTranslation(["opendash"])[0];
    var items = useItems(state);
    var _b = useData(state), hasError = _b[0], data = _b[1];
    if (state.items.length === 0) {
        return (React.createElement(Alert, { type: "error", message: t("data_explorer.visualisation_data_missing"), style: { textAlign: "center" } }));
    }
    if (Object.keys(state.time).length === 0) {
        return (React.createElement(Alert, { type: "error", message: t("data_explorer.visualisation_time_missing"), style: { textAlign: "center" } }));
    }
    if (hasError) {
        return (React.createElement(Alert, { type: "error", message: t("data_explorer.visualisation_data_error"), style: { textAlign: "center" } }));
    }
    if (!data) {
        return (React.createElement("div", { style: { textAlign: "center", padding: 24 } },
            React.createElement(Spin, { tip: t("data_explorer.visualisation_data_loading") })));
    }
    switch (state.visualisation) {
        case VisualisationType.TIMESERIES:
            return React.createElement(Timeseries, { state: state, items: items, data: data });
        case VisualisationType.PIE:
            return React.createElement(Pie, { state: state, items: items, data: data });
        case VisualisationType.HEATMAP:
            return React.createElement(Heatmap, { state: state, items: items, data: data });
        case VisualisationType.SPIDER:
            return React.createElement(Spider, { state: state, items: items, data: data });
        case VisualisationType.HISTOGRAMM:
            return React.createElement(Histogramm, { state: state, items: items, data: data });
        case VisualisationType.HIERARCHY:
            return React.createElement(Hierarchy, { state: state, items: items, data: data });
        case VisualisationType.KPI:
            return React.createElement(Kpi, { state: state, items: items, data: data });
        case VisualisationType.TABLE:
            return React.createElement(Table, { state: state, items: items, data: data });
        case VisualisationType.RAW:
            return React.createElement(Raw, { state: state, items: items, data: data });
        default:
            return (React.createElement(Description, { children: t("data_explorer.visualisation_coming_soon") }));
    }
};
//# sourceMappingURL=visualisation.js.map