logitude-dashboard-library 1.2.2 → 1.2.3

package/dist/index.modern.js

@@ -1,9 +1,5 @@
-import React__default, { useRef, createRef, createElement } from 'react';
+import React__default, { useRef, useState, createRef, createElement } from 'react';
 import 'react-grid-layout/css/styles.css';
-import 'primereact/resources/themes/lara-light-indigo/theme.css';
-import 'primereact/resources/primereact.min.css';
-import 'primeicons/primeicons.css';
-import 'line-awesome/dist/line-awesome/css/line-awesome.min.css';
 import { WidthProvider, Responsive } from 'react-grid-layout';
 import { Button } from 'primereact/button';
 import _ from 'lodash';
@@ -994,333 +990,105 @@ var WidgetCard = function WidgetCard(props, state) {
 var ResponsiveReactGridLayout = WidthProvider(Responsive);
 var newWidgetWidth = 3;
 
-var DashboardDesigner = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(DashboardDesigner, _React$Component);
+var DashboardDesigner = function DashboardDesigner() {
+  var _useState = useState(createRef()),
+      moreButtonToggle = _useState[0];
 
-  function DashboardDesigner(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.widgetComponents = [{
-      type: "Bar",
-      component: BarChartComponent
-    }, {
-      type: "Column",
-      component: ColumnChartComponent
-    }, {
-      type: "Pie",
-      component: PieChartComponent
-    }, {
-      type: "Mixed",
-      component: MixedChartComponent
-    }, {
-      type: "Timeline",
-      component: TimelineChartComponent
-    }, {
-      type: "Candle",
-      component: CandleChartComponent
-    }, {
-      type: "Area",
-      component: AreaChartComponent
-    }];
-    _this.showMsg = false;
-
-    _this.deletePanel = function (i) {
-      var layout = _this.state.layouts["lg"];
-      var itemIndex = layout.findIndex(function (d) {
-        return d.i === i;
-      });
-      layout.splice(itemIndex, 1);
-
-      _this.setState({
-        layouts: {
-          lg: [].concat(layout)
-        },
-        widgets: _.reject(_this.state.widgets, {
-          i: i
-        })
-      });
-
-      _this.SaveGrid();
-    };
-
-    _this.editWidget = function (widget) {
-      _this.widgetToEdit = widget;
-
-      _this.toggleDialog();
-    };
-
-    _this.addPanel = function (newWidget) {
-      var newWidgetPosition = _this.EvaluateNewWidgetPosition();
+  var _useState2 = useState(createRef());
 
-      var widgetComponent = widgetComponents.find(function (wc) {
-        return wc.type === newWidget.WidgetType;
-      });
-
-      var randomIndex = _this.getRandomInt(100, 999);
-
-      var newPanel = {
-        i: "" + randomIndex,
-        x: newWidgetPosition.x,
-        y: newWidgetPosition.y,
-        w: newWidgetWidth,
-        h: 5,
-        minH: 5,
-        minW: 3
-      };
+  var _useState3 = useState(createRef());
 
-      _this.state.widgets.push(_extends({
-        i: "" + randomIndex,
-        title: newWidget.WidgetName,
-        component: widgetComponent === null || widgetComponent === void 0 ? void 0 : widgetComponent.component
-      }, newWidget));
-
-      _this.setState({
-        layouts: {
-          lg: _this.state.layouts["lg"].concat(newPanel)
-        },
-        widgets: _this.state.widgets
-      });
-    };
-
-    _this.hideDialog = function () {};
-
-    _this.onOkButton = function (data) {
-      _this.widgetToEdit = null;
-
-      _this.toggleDialog();
-
-      _this.addPanel(data);
-    };
-
-    _this.onCancelButton = function () {
-      _this.widgetToEdit = null;
-
-      _this.toggleDialog();
-    };
-
-    _this.saveToStorage = function (key, value) {
-      _this.setState({
-        showMsg: true
-      });
-
-      setTimeout(function () {
-        _this.setState({
-          showMsg: false
-        });
-      }, 2000);
-      window.localStorage.setItem(key, JSON.stringify(value));
-    };
-
-    _this.getFromStorage = function (key) {
-      var layout = window.localStorage.getItem(key);
-      return JSON.parse(layout);
-    };
-
-    _this.moreButtonToggle = createRef();
-    _this.widgetButtonToggle = createRef();
-    _this.addWidgetButtonToggle = createRef();
-
-    var savedLayouts = _this.getFromStorage("grid-layout");
-
-    var savedWidgets = _this.getFromStorage("grid-widgets");
-
-    _this.state = {
-      layouts: savedLayouts || {
-        lg: []
-      },
-      showMsg: false,
-      dateFilter: null,
-      displayDialog: false,
-      dashboardTitle: "",
-      widgets: savedWidgets || [],
-      placeholderRows: 10
-    };
-    return _this;
-  }
-
-  var _proto = DashboardDesigner.prototype;
-
-  _proto.componentDidUpdate = function componentDidUpdate(prevState) {
-    this.UpdatePlaceholderDimensions(prevState);
-  };
-
-  _proto.UpdatePlaceholderDimensions = function UpdatePlaceholderDimensions(prevState) {
-    var minimumPlaceholderRowsCount = 10;
-    var prevPlaceholderRows = prevState.placeholderRows;
-    var gridElementHeight = document.getElementsByClassName('react-grid-layout')[0].clientHeight;
-    var newPlaceholderRows = Math.floor(gridElementHeight / DashboardDesigner.layoutGridProps.rowHeight);
-    newPlaceholderRows = newPlaceholderRows < minimumPlaceholderRowsCount ? 10 : newPlaceholderRows;
-    if (prevPlaceholderRows != newPlaceholderRows) this.setState({
-      placeholderRows: newPlaceholderRows
-    });
-  };
-
-  _proto.onLayoutChange = function onLayoutChange(layouts) {
-    this.saveToStorage("grid-layout", layouts);
-    this.saveToStorage("grid-widgets", this.state.widgets);
-    this.setState({
-      layouts: layouts
-    });
-  };
-
-  _proto.EvaluateNewWidgetPosition = function EvaluateNewWidgetPosition() {
-    var widgetYPosition = 0;
-    var widgetXPosition = 0;
-    var layout = this.state.layouts["lg"];
-    var maxY = layout.reduce(function (max, widget) {
-      if (widget.y > max) max = widget.y;
-      return max;
-    }, 0);
-
-    var _loop = function _loop(y) {
-      var widgetsRow = layout.filter(function (d) {
-        return d.y == y;
-      });
-      var lastWidgetStartXPosition = Math.max.apply(Math, widgetsRow.map(function (a) {
-        return a.x;
-      }));
-      var lastWidget = widgetsRow.find(function (a) {
-        return a.x == lastWidgetStartXPosition;
-      });
-
-      if (lastWidget) {
-        var lastWidgetEndXPosition = lastWidgetStartXPosition + lastWidget.w;
-        var availableHorizontalSlots = DashboardDesigner.layoutGridProps.cols.lg - lastWidgetEndXPosition;
-
-        if (availableHorizontalSlots >= newWidgetWidth) {
-          widgetYPosition = y;
-          widgetXPosition = lastWidgetEndXPosition;
-          return {
-            v: {
-              x: widgetXPosition,
-              y: widgetYPosition
-            }
-          };
-        } else {
-          widgetYPosition = y + 1;
-        }
-      } else {
-        widgetYPosition = y + 1;
-      }
-    };
-
-    for (var y = 0; y <= maxY; y++) {
-      var _ret = _loop(y);
+  var _useState4 = useState([{
+    type: "Bar",
+    component: BarChartComponent
+  }, {
+    type: "Column",
+    component: ColumnChartComponent
+  }, {
+    type: "Pie",
+    component: PieChartComponent
+  }, {
+    type: "Mixed",
+    component: MixedChartComponent
+  }, {
+    type: "Timeline",
+    component: TimelineChartComponent
+  }, {
+    type: "Candle",
+    component: CandleChartComponent
+  }, {
+    type: "Area",
+    component: AreaChartComponent
+  }]),
+      widgetComponents = _useState4[0];
 
-      if (typeof _ret === "object") return _ret.v;
-    }
+  var savedLayouts = getFromStorage("grid-layout");
+  var savedWidgets = getFromStorage("grid-widgets");
 
-    return {
-      x: widgetXPosition,
-      y: widgetYPosition
-    };
-  };
+  var _useState5 = useState(savedLayouts || {
+    lg: []
+  }),
+      layouts = _useState5[0],
+      setLayouts = _useState5[1];
 
-  _proto.SaveGrid = function SaveGrid() {
-    this.saveToStorage("grid-layout", this.state.layouts);
-    this.saveToStorage("grid-widgets", this.state.widgets);
-  };
+  var _useState6 = useState(false),
+      setShowMsg = _useState6[1];
 
-  _proto.reset = function reset() {
-    window.localStorage.clear();
-    window.location.reload();
-  };
+  var _useState7 = useState(undefined),
+      dateFilter = _useState7[0],
+      setDateFilter = _useState7[1];
 
-  _proto.setToken = function setToken() {
-    var token = localStorage.getItem("token");
-    var newToken = prompt("Token: ", token || "");
-    if (newToken && newToken != "") localStorage.setItem("token", newToken || "");
-  };
+  var _useState8 = useState(false),
+      displayDialog = _useState8[0],
+      setDisplayDialog = _useState8[1];
 
-  _proto.changeTitle = function changeTitle(i) {
-    var widget = this.state.widgets[i];
-    var newTitle = prompt("Title:");
-    widget.title = newTitle;
-    this.setState(this.state.widgets);
-    this.SaveGrid();
-  };
+  var _useState9 = useState(""),
+      dashboardTitle = _useState9[0];
 
-  _proto.addComponent = function addComponent() {
-    this.toggleDialog();
-  };
+  var _useState10 = useState(savedWidgets || []),
+      widgets = _useState10[0],
+      setWidgets = _useState10[1];
 
-  _proto.FindWidget = function FindWidget(el) {
-    return this.state.widgets.find(function (d) {
-      return d.i === el.i;
-    });
-  };
+  var _useState11 = useState(10),
+      placeholderRows = _useState11[0];
 
-  _proto.toggleDialog = function toggleDialog() {
-    this.setState({
-      displayDialog: !this.state.displayDialog
-    });
-  };
+  var _useState12 = useState(),
+      selectedWidget = _useState12[0];
 
-  _proto.toggleWidget = function toggleWidget(widget) {
-    var menuButtons = document.getElementById("widget-more-buttons-" + widget.id);
-
-    if (menuButtons) {
-      var isHidden = menuButtons.className.includes("hidden");
-      menuButtons.className = isHidden ? "" : "hidden";
-    }
-  };
-
-  _proto.getRandomInt = function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  };
-
-  _proto.renderNewWidgetDialog = function renderNewWidgetDialog() {
-    return React__default.createElement(Dialog, {
-      header: this.widgetToEdit ? "Edit Chart" : "New Chart",
-      visible: this.state.displayDialog,
-      onHide: this.toggleDialog.bind(this),
-      breakpoints: {
-        "850px": "95vw",
-        "600px": "100vw"
-      },
-      style: {
-        width: "800px"
-      }
-    }, React__default.createElement(NewWidget, {
-      onOkButton: this.onOkButton,
-      onCancelButton: this.onCancelButton,
-      widget: this.widgetToEdit
-    }));
-  };
-
-  _proto.renderPageHeader = function renderPageHeader() {
-    var _this2 = this;
+  var _useState13 = useState(null),
+      widgetToEdit = _useState13[0],
+      setWidgetToEdit = _useState13[1];
 
+  var renderPageHeader = function renderPageHeader() {
     return React__default.createElement("header", {
       className: "dashboard-header"
-    }, React__default.createElement("div", null, React__default.createElement("h1", null, this.state.dashboardTitle || "Dashboard"), React__default.createElement(Button, {
+    }, React__default.createElement("div", null, React__default.createElement("h1", null, dashboardTitle || "Dashboard"), React__default.createElement(Button, {
       icon: "las la-ellipsis-v",
       onClick: function onClick(e) {
-        var _this2$moreButtonTogg;
+        var _moreButtonToggle$cur;
 
-        return (_this2$moreButtonTogg = _this2.moreButtonToggle.current) === null || _this2$moreButtonTogg === void 0 ? void 0 : _this2$moreButtonTogg.toggle(e);
+        return moreButtonToggle === null || moreButtonToggle === void 0 ? void 0 : (_moreButtonToggle$cur = moreButtonToggle.current) === null || _moreButtonToggle$cur === void 0 ? void 0 : _moreButtonToggle$cur.toggle(e);
       },
       className: "p-button-lg p-button-rounded p-button-text"
     }, React__default.createElement(Ripple, null)), React__default.createElement(OverlayPanel, {
-      ref: this.moreButtonToggle,
+      ref: moreButtonToggle,
       className: "buttons-overlay"
     }, React__default.createElement("div", {
       className: "buttons-list"
     }, React__default.createElement("div", {
-      onClick: this.setToken
+      onClick: setToken
     }, "set token"), React__default.createElement("div", {
-      onClick: this.reset
+      onClick: reset
     }, "reset")))), React__default.createElement("div", null, React__default.createElement(Button, {
       label: "<< back to dashboards",
       className: "p-button-link"
     }), React__default.createElement(Dropdown, {
-      value: this.selectedWidget,
+      value: selectedWidget,
       options: WidgetTypes,
       optionValue: "Name",
       optionLabel: "Name",
       onChange: function onChange(e) {
-        return _this2.addComponent();
+        return addComponent();
       },
       placeholder: "Add Component",
       optionDisabled: function optionDisabled(option) {
@@ -1330,71 +1098,240 @@ var DashboardDesigner = /*#__PURE__*/function (_React$Component) {
     })));
   };
 
-  _proto.renderGridWidgetsPlaceholder = function renderGridWidgetsPlaceholder() {
+  function addComponent(componentType) {
+    toggleDialog();
+  }
+
+  function reset() {
+    window.localStorage.clear();
+    window.location.reload();
+  }
+
+  function setToken() {
+    var token = localStorage.getItem("token");
+    var newToken = prompt("Token: ", token || "");
+    if (newToken && newToken != "") localStorage.setItem("token", newToken || "");
+  }
+
+  function renderGridWidgetsPlaceholder() {
     return React__default.createElement("div", {
       className: "grid grid--bordered"
-    }, [].concat(Array(this.state.placeholderRows)).map(function (e, i) {
-      return [].concat(Array(DashboardDesigner.layoutGridProps.cols.lg)).map(function (e, i) {
+    }, [].concat(Array(placeholderRows)).map(function (e, i) {
+      return [].concat(Array(layoutGridProps.cols.lg)).map(function (e, i) {
         return React__default.createElement("div", {
           style: {
-            height: DashboardDesigner.layoutGridProps.rowHeight
+            height: layoutGridProps.rowHeight
           }
         });
       });
     }));
-  };
+  }
 
-  _proto.renderLayoutGrid = function renderLayoutGrid(layout) {
-    var _this3 = this;
+  function renderLayoutGrid(layout) {
+    function _onLayoutChange(layout, layouts) {
+      saveToStorage("grid-layout", layouts);
+      saveToStorage("grid-widgets", widgets);
+      setLayouts(layouts);
+    }
+
+    function renderWidgetComponent(el) {
+      var widget = FindWidget(el);
+
+      function deletePanel(i) {
+        var layout = layouts["lg"];
+        var itemIndex = layout.findIndex(function (d) {
+          return d.i === i;
+        });
+        layout.splice(itemIndex, 1);
+        setLayouts({
+          lg: [].concat(layout)
+        });
+        setWidgets(_.reject(widgets, {
+          i: i
+        }));
+        SaveGrid();
+      }
+
+      function SaveGrid() {
+        saveToStorage("grid-layout", layouts);
+        saveToStorage("grid-widgets", widgets);
+      }
 
-    return React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, DashboardDesigner.layoutGridProps, {
-      layouts: this.state.layouts,
+      function editWidget(widget) {
+        setWidgetToEdit(widget);
+        toggleDialog();
+      }
+      return React__default.createElement("div", {
+        key: el.i
+      }, React__default.createElement(WidgetCard, {
+        key: el.i,
+        widget: widget,
+        el: el,
+        dateFilter: dateFilter,
+        editBtnClicked: editWidget,
+        deleteBtnClicked: deletePanel
+      }));
+    }
+
+    function FindWidget(el) {
+      return widgets.find(function (d) {
+        return d.i === el.i;
+      });
+    }
+
+    return React__default.createElement(ResponsiveReactGridLayout, Object.assign({}, layoutGridProps, {
+      layouts: layouts,
       compactType: "vertical",
-      onLayoutChange: function onLayoutChange(layouts) {
-        return _this3.onLayoutChange(layout);
+      onLayoutChange: function onLayoutChange(layout, layouts) {
+        return _onLayoutChange(layout, layouts);
       }
     }), _.map(layout, function (el) {
-      return _this3.renderWidgetComponent(el);
+      return renderWidgetComponent(el);
     }));
-  };
+  }
 
-  _proto.renderWidgetComponent = function renderWidgetComponent(el) {
-    var widget = this.FindWidget(el);
-    return React__default.createElement("div", {
-      key: el.i
-    }, React__default.createElement(WidgetCard, {
-      key: el.i,
-      widget: widget,
-      el: el,
-      dateFilter: this.state.dateFilter,
-      editBtnClicked: this.editWidget,
-      deleteBtnClicked: this.deletePanel
-    }));
-  };
+  function saveToStorage(key, value) {
+    setShowMsg(true);
+    setTimeout(function () {
+      setShowMsg(false);
+    }, 2000);
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }
 
-  _proto.render = function render() {
-    var _this4 = this;
+  function getFromStorage(key) {
+    var layout = window.localStorage.getItem(key);
+    return JSON.parse(layout);
+  }
 
-    return React__default.createElement("div", {
-      className: "App"
-    }, this.renderPageHeader(), React__default.createElement(Calendar, {
-      value: this.state.dateFilter,
-      showIcon: true,
-      onChange: function onChange(e) {
-        return _this4.setState({
-          dateFilter: e.value
+  function toggleDialog() {
+    setDisplayDialog(!displayDialog);
+  }
+
+  function renderNewWidgetDialog() {
+    function addPanel(newWidget) {
+      var newWidgetPosition = EvaluateNewWidgetPosition();
+      var widgetComponent = widgetComponents.find(function (wc) {
+        return wc.type === newWidget.WidgetType;
+      });
+      var randomIndex = getRandomInt(100, 999);
+      var newPanel = {
+        i: "" + randomIndex,
+        x: newWidgetPosition.x,
+        y: newWidgetPosition.y,
+        w: newWidgetWidth,
+        h: 5,
+        minH: 5,
+        minW: 3
+      };
+      widgets.push(_extends({
+        i: "" + randomIndex,
+        title: newWidget.WidgetName,
+        component: widgetComponent === null || widgetComponent === void 0 ? void 0 : widgetComponent.component
+      }, newWidget));
+      setLayouts({
+        lg: layouts["lg"].concat(newPanel)
+      });
+      setWidgets(widgets);
+    }
+
+    function EvaluateNewWidgetPosition() {
+      var widgetYPosition = 0;
+      var widgetXPosition = 0;
+      var layout = layouts["lg"];
+      var maxY = layout.reduce(function (max, widget) {
+        if (widget.y > max) max = widget.y;
+        return max;
+      }, 0);
+
+      var _loop = function _loop(y) {
+        var widgetsRow = layout.filter(function (d) {
+          return d.y == y;
+        });
+        var lastWidgetStartXPosition = Math.max.apply(Math, widgetsRow.map(function (a) {
+          return a.x;
+        }));
+        var lastWidget = widgetsRow.find(function (a) {
+          return a.x == lastWidgetStartXPosition;
         });
+
+        if (lastWidget) {
+          var lastWidgetEndXPosition = lastWidgetStartXPosition + lastWidget.w;
+          var availableHorizontalSlots = layoutGridProps.cols.lg - lastWidgetEndXPosition;
+
+          if (availableHorizontalSlots >= newWidgetWidth) {
+            widgetYPosition = y;
+            widgetXPosition = lastWidgetEndXPosition;
+            return {
+              v: {
+                x: widgetXPosition,
+                y: widgetYPosition
+              }
+            };
+          } else {
+            widgetYPosition = y + 1;
+          }
+        } else {
+          widgetYPosition = y + 1;
+        }
+      };
+
+      for (var y = 0; y <= maxY; y++) {
+        var _ret = _loop(y);
+
+        if (typeof _ret === "object") return _ret.v;
+      }
+
+      return {
+        x: widgetXPosition,
+        y: widgetYPosition
+      };
+    }
+
+    function onOkButton(data) {
+      setWidgetToEdit(null);
+      toggleDialog();
+      addPanel(data);
+    }
+
+    function onCancelButton() {
+      setWidgetToEdit(null);
+      toggleDialog();
+    }
+    return React__default.createElement(Dialog, {
+      header: widgetToEdit ? "Edit Chart" : "New Chart",
+      visible: displayDialog,
+      onHide: toggleDialog,
+      breakpoints: {
+        "850px": "95vw",
+        "600px": "100vw"
       },
-      placeholder: "filter by date..."
-    }), React__default.createElement("div", {
-      className: "grid-container"
-    }, this.renderGridWidgetsPlaceholder(), this.renderLayoutGrid(this.state.layouts["lg"])), this.renderNewWidgetDialog());
-  };
+      style: {
+        width: "800px"
+      }
+    }, React__default.createElement(NewWidget, {
+      onOkButton: onOkButton,
+      onCancelButton: onCancelButton,
+      widget: widgetToEdit
+    }));
+  }
 
-  return DashboardDesigner;
-}(React__default.Component);
+  function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  return React__default.createElement("div", null, renderPageHeader(), React__default.createElement(Calendar, {
+    value: dateFilter,
+    showIcon: true,
+    onChange: function onChange(e) {
+      return setDateFilter(e.value);
+    },
+    placeholder: "filter by date..."
+  }), React__default.createElement("div", {
+    className: "grid-container"
+  }, renderGridWidgetsPlaceholder(), renderLayoutGrid(layouts["lg"])), renderNewWidgetDialog());
+};
 
-DashboardDesigner.layoutGridProps = {
+var layoutGridProps = {
   rowHeight: 50,
   className: "layout",
   cols: {
@@ -1425,33 +1362,10 @@ var WidgetTypes = [{
   Name: "Gauge",
   Disabled: true
 }];
-var widgetComponents = [{
-  type: "Bar",
-  component: BarChartComponent
-}, {
-  type: "Column",
-  component: ColumnChartComponent
-}, {
-  type: "Pie",
-  component: PieChartComponent
-}, {
-  type: "Mixed",
-  component: MixedChartComponent
-}, {
-  type: "Timeline",
-  component: TimelineChartComponent
-}, {
-  type: "Candle",
-  component: CandleChartComponent
-}, {
-  type: "Area",
-  component: AreaChartComponent
-}];
 
-var ExampleComponent = function ExampleComponent() {
-  return createElement("div", null, createElement("div", null, "amer"));
+var Dashboard = function Dashboard() {
+  return createElement("div", null, createElement(DashboardDesigner, null));
 };
 
-export default DashboardDesigner;
-export { ExampleComponent };
+export default Dashboard;
 //# sourceMappingURL=index.modern.js.map