opendash
Version:
open.DASH data visualization framework
55 lines • 3.12 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 styled from "styled-components";
import GridLayout from "react-grid-layout";
import { useElementSize, WidgetComponent, useWidgetsForDashboard, useUrlParam, useOpenDashServices, useDeepCompareEffect, } from "..";
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n overflow-x: hidden;\n"], ["\n overflow-x: hidden;\n"])));
export var DashboardDisplay = React.memo(function DashboardDisplayComponent(_a) {
var dashboard = _a.dashboard;
var _b, _c;
var DashboardService = useOpenDashServices().DashboardService;
var container = React.useRef();
var size = useElementSize(container, 1000);
var _d = React.useState([]), layout = _d[0], setLayout = _d[1];
var widgets = useWidgetsForDashboard(dashboard);
var editMode = useUrlParam("dashboard_edit", false)[0];
// Update layout, if it changes elsewhere
useDeepCompareEffect(function () {
var _a;
if ((_a = dashboard) === null || _a === void 0 ? void 0 : _a.layout) {
setLayout(dashboard.layout);
}
}, [(_b = dashboard) === null || _b === void 0 ? void 0 : _b.id, (_c = dashboard) === null || _c === void 0 ? void 0 : _c.layout]);
// Save layout to user storage, if it really changes
useDeepCompareEffect(function () {
DashboardService.updateDashboard(__assign(__assign({}, dashboard), { layout: layout }));
}, [layout]);
if (!dashboard) {
return null;
}
if (size.width < 600) {
return (React.createElement(Container, { ref: container }, widgets.map(function (widget) { return (React.createElement("div", { key: widget.id, style: { height: Math.floor((size.width / 3) * 2), padding: 10 } },
React.createElement(WidgetComponent, { id: widget.id }))); })));
}
return (React.createElement(Container, { ref: container },
React.createElement(GridLayout, { key: dashboard.id, width: size.width, margin: [0, 0], cols: 24, rowHeight: Math.floor(size.width / 24), layout: layout, isDraggable: editMode, isResizable: editMode, onLayoutChange: function (nextLayout) {
setLayout(nextLayout);
} }, widgets.map(function (widget) { return (React.createElement("div", { key: widget.id, style: { padding: 10 } },
React.createElement(WidgetComponent, { id: widget.id }))); }))));
});
var templateObject_1;
//# sourceMappingURL=DashboardDisplay.js.map