opendash/dist/components/OpenDashWidgetDevRoute.js

open.DASH data visualization framework

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import * as React from "react";
import { useDataItemHistory, useWidgetDataItem, useWidgetDataItemHistoryOptions, useWidgets, LinkedDataItemPicker, LinkedDataItemHistoryOptionsPicker, WidgetComponent, DataSidebar, WidgetCreationModal, } from "..";
import { Button, Drawer, Select } from "antd";
var selectStyle = { width: "100%", marginBottom: 20 };
var buttonStyle = { marginRight: 10 };
export var OpenDashWidgetDevRoute = function () {
    var widgets = useWidgets();
    var _a = React.useState({
        dataDrawer: false,
        linkedDataDrawer: false,
        selectWidgetModal: false,
        selectedWidget: null,
        widgetFullscreen: false,
        presets: false,
        width: 2,
        height: 2,
    }), settings = _a[0], setSettings = _a[1];
    return (React.createElement("div", { style: { padding: 20 } },
        React.createElement("h1", null, "Widget Development"),
        React.createElement(Select, { style: __assign(__assign({}, buttonStyle), { width: 400 }), value: settings.selectedWidget, onChange: function (value) {
                return setSettings(function (current) { return (__assign(__assign({}, current), { selectedWidget: value })); });
            } }, widgets.map(function (widget) { return (React.createElement(Select.Option, { key: widget.id, value: widget.id },
            widget.name,
            " (",
            widget.type,
            ")")); })),
        React.createElement(Select, { style: __assign(__assign({}, buttonStyle), { width: 80 }), value: settings.width, onChange: function (value) {
                return setSettings(function (current) { return (__assign(__assign({}, current), { width: value })); });
            } }, Array.from(Array(24)).map(function (e, i) { return (React.createElement(Select.Option, { key: i + 1, value: i + 1, children: i + 1 })); })),
        React.createElement(Select, { style: __assign(__assign({}, buttonStyle), { width: 80 }), value: settings.height, onChange: function (value) {
                return setSettings(function (current) { return (__assign(__assign({}, current), { height: value })); });
            } }, Array.from(Array(24)).map(function (e, i) { return (React.createElement(Select.Option, { key: i + 1, value: i + 1, children: i + 1 })); })),
        React.createElement(Button, { style: buttonStyle, onClick: function (e) {
                setSettings(function (current) { return (__assign(__assign({}, current), { linkedDataDrawer: !current.linkedDataDrawer })); });
            } }, "Linked Data"),
        React.createElement(Button, { style: buttonStyle, onClick: function (e) {
                setSettings(function (current) { return (__assign(__assign({}, current), { dataDrawer: !current.dataDrawer })); });
            } }, "Source + Data Items"),
        React.createElement(Button, { style: buttonStyle, onClick: function (e) {
                setSettings(function (current) { return (__assign(__assign({}, current), { presets: !current.presets })); });
            } }, "Add Widget"),
        React.createElement(Drawer, { title: "Linked Data", visible: settings.linkedDataDrawer, width: 600, onClose: function (e) {
                setSettings(function (settings) { return (__assign(__assign({}, settings), { linkedDataDrawer: !settings.linkedDataDrawer })); });
            } },
            React.createElement(LinkedDataDrawer, null)),
        React.createElement(DataSidebar, { open: settings.dataDrawer, close: function () {
                setSettings(function (settings) { return (__assign(__assign({}, settings), { dataDrawer: false })); });
            } }),
        React.createElement(WidgetCreationModal, { open: settings.presets, close: function () {
                setSettings(function (settings) { return (__assign(__assign({}, settings), { presets: false })); });
            } }),
        React.createElement("div", { style: {
                marginTop: 20,
                position: "relative",
                width: "calc(((100vw - 40px) / 24) * " + settings.width + ")",
                height: "calc(((100vw - 40px) / 24) * " + settings.height + ")",
            } },
            React.createElement(WidgetComponent, { id: settings.selectedWidget, fullscreen: settings.widgetFullscreen }))));
};
function LinkedDataDrawer() {
    var _a = useWidgetDataItem(), item = _a[0], dimension = _a[1];
    var options = useWidgetDataItemHistoryOptions()[0];
    var history = useDataItemHistory(item, options);
    return (React.createElement(React.Fragment, null,
        React.createElement(LinkedDataItemPicker, { style: selectStyle }),
        React.createElement(LinkedDataItemHistoryOptionsPicker, { style: selectStyle }),
        React.createElement("h1", null, "Item"),
        React.createElement("pre", null, JSON.stringify(dimension, null, "  ")),
        React.createElement("pre", null, JSON.stringify(item, null, "  ")),
        React.createElement("h1", null, "History"),
        React.createElement("pre", null, JSON.stringify(history, null, "  "))));
}
//# sourceMappingURL=OpenDashWidgetDevRoute.js.map