logitude-dashboard-library 1.3.2 → 1.3.5

package/dist/index.js

@@ -2,15 +2,12 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var button = require('primereact/button');
 var reactGridLayout = require('react-grid-layout');
 var ReactApexChart = _interopDefault(require('react-apexcharts'));
 var axios = _interopDefault(require('axios'));
+var button = require('primereact/button');
 var overlaypanel = require('primereact/overlaypanel');
 var progressspinner = require('primereact/progressspinner');
-var dropdown = require('primereact/dropdown');
-var dialog = require('primereact/dialog');
-var ripple = require('primereact/ripple');
 var uuid = require('uuid');
 
 function _unsupportedIterableToArray(o, minLen) {
@@ -362,7 +359,7 @@ var ApexChart = function ApexChart(props) {
           }
         },
         dataLabels: {
-          enabled: true,
+          enabled: false,
           offsetX: -6,
           style: {
             fontSize: '12px',
@@ -418,6 +415,9 @@ var ApexChart = function ApexChart(props) {
         },
         labels: labels,
         colors: colors,
+        tooltip: {
+          fillSeriesColor: false
+        },
         noData: {
           text: 'No Data Found'
         }
@@ -428,22 +428,22 @@ var ApexChart = function ApexChart(props) {
   var CreateColors = function CreateColors(count) {
     GroupCount.current = count;
     var colors = [];
-    CreateDeferuntColors(colors, 0, 100, 50);
+    CreateDifferentColors(colors, 0, 100, 50);
     if (GroupCount.current <= 0) return colors;
-    CreateDeferuntColors(colors, 15, 100, 50);
+    CreateDifferentColors(colors, 15, 100, 50);
     if (GroupCount.current <= 0) return colors;
-    CreateDeferuntColors(colors, 0, 50, 50);
+    CreateDifferentColors(colors, 0, 50, 50);
     if (GroupCount.current <= 0) return colors;
-    CreateDeferuntColors(colors, 15, 50, 50);
+    CreateDifferentColors(colors, 15, 50, 50);
     if (GroupCount.current <= 0) return colors;
-    CreateDeferuntColors(colors, 0, 50, 30);
+    CreateDifferentColors(colors, 0, 50, 30);
     if (GroupCount.current <= 0) return colors;
-    CreateDeferuntColors(colors, 15, 50, 30);
+    CreateDifferentColors(colors, 15, 50, 30);
     if (GroupCount.current <= 0) return colors;
     return undefined;
   };
 
-  var CreateDeferuntColors = function CreateDeferuntColors(colors, startAngle, s, v) {
+  var CreateDifferentColors = function CreateDifferentColors(colors, startAngle, s, v) {
     for (var index = 0; GroupCount.current > 0 && index < 12; index++) {
       var color = "hsl(" + (startAngle + index * 30) + "deg " + s + "% " + v + "%)";
       colors.push(color);
@@ -513,6 +513,9 @@ var ApexChart = function ApexChart(props) {
         },
         labels: labels,
         colors: colors,
+        tooltip: {
+          fillSeriesColor: false
+        },
         noData: {
           text: 'No Data Found'
         }
@@ -800,204 +803,32 @@ var layoutGridProps = {
   useCSSTransforms: true
 };
 
-var DashBoardService = /*#__PURE__*/function () {
-  function DashBoardService() {
-    this.tableName = 'DashBoard';
-    this._ApiServices = new ApiServices();
-  }
-
-  var _proto = DashBoardService.prototype;
-
-  _proto.getDataByFilters = function getDataByFilters(filters) {
-    return this._ApiServices.getByFilters("/api/" + this.tableName + "Views/getbyfilters?", filters);
-  };
-
-  _proto.add = function add(data) {
-    return this._ApiServices.post("/api/DashBoards", data);
-  };
-
-  return DashBoardService;
-}();
-
-var WidgetTypeListService = /*#__PURE__*/function () {
-  function WidgetTypeListService() {
-    this._ApiServices = new ApiServices();
-  }
-
-  var _proto = WidgetTypeListService.prototype;
-
-  _proto.getDataByFilters = function getDataByFilters(filters) {
-    return this._ApiServices.getByFilters("/api/WidgetTypeViews/getbyfilters?", filters);
-  };
-
-  _proto.getAll = function getAll() {
-    return this._ApiServices.get("/api/WidgetTypeViews/getall");
-  };
-
-  return WidgetTypeListService;
-}();
-
-function deepClone(obj) {
-  return JSON.parse(JSON.stringify(obj));
-}
-
 var Dashboard = function Dashboard(props) {
   var _props$token;
 
-  var newWidgetWidth = 3;
-  var newWidgetHeight = 5;
-
-  var _useState = React.useState([]),
-      dashbords = _useState[0],
-      setDashbords = _useState[1];
-
-  var _useState2 = React.useState(undefined),
-      currentDashbord = _useState2[0],
-      setCurrentDashbord = _useState2[1];
-
-  var _useState3 = React.useState(undefined),
-      beforEditDashbord = _useState3[0],
-      setBeforEditDashbord = _useState3[1];
-
-  var _useState4 = React.useState(false),
-      hasChanges = _useState4[0],
-      setHasChanges = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      isInEditMode = _useState5[0],
-      setIsInEditMode = _useState5[1];
-
-  var _useState6 = React.useState(),
-      WidgetTypes = _useState6[0],
-      setWidgetTypes = _useState6[1];
-
-  var _useState7 = React.useState({
+  var _useState = React.useState({
     lg: []
   }),
-      layouts = _useState7[0],
-      setLayouts = _useState7[1];
+      Widgetlayouts = _useState[0],
+      setWidgetLayouts = _useState[1];
 
-  var _useState8 = React.useState(false),
-      cancelConfirmDialog = _useState8[0],
-      setCancelConfirmDialog = _useState8[1];
+  var _useState2 = React.useState(false),
+      isInEditMode = _useState2[0],
+      setIsInEditMode = _useState2[1];
 
-  var dashboardMoreButtonToggle = React.createRef();
-  var dashboardService = new DashBoardService();
-  var widgetTypeListService = new WidgetTypeListService();
   React.useEffect(function () {
-    getWidgetTypes();
-    props.dataBinding.onGetDashboard.subscribe(function (e) {
-      console.log('onGetDashboard.subscribe', e);
-      setCurrentDashbord(e);
-      applyLayouts(e);
+    props.dataBinding.onGetLayouts.subscribe(function (layouts) {
+      applyLayouts(layouts);
     });
-    props.dataBinding.onGetAllDashboards.subscribe(function (e) {
-      console.log('onGetAllDashboard.subscribe', e);
-      setDashbords(e);
-    });
-    props.dataBinding.onAddUpdateWidget.subscribe(function (isUpdated) {
-      if (!isUpdated) return;
-      setHasChanges(true);
+    props.dataBinding.isOnEditLayout.subscribe(function (e) {
+      setIsInEditMode(e);
     });
   }, []);
   if ((props === null || props === void 0 ? void 0 : (_props$token = props.token) === null || _props$token === void 0 ? void 0 : _props$token.length) > 0) localStorage.setItem("token", props === null || props === void 0 ? void 0 : props.token);
 
-  var getWidgetTypes = function getWidgetTypes() {
-    widgetTypeListService.getAll().then(function (data) {
-      setWidgetTypes(data.data);
-    });
-  };
-
-  var EditDashBoard = function EditDashBoard() {
-    var _dashboardMoreButtonT;
-
-    props.openAddEditDashboard(currentDashbord);
-    dashboardMoreButtonToggle === null || dashboardMoreButtonToggle === void 0 ? void 0 : (_dashboardMoreButtonT = dashboardMoreButtonToggle.current) === null || _dashboardMoreButtonT === void 0 ? void 0 : _dashboardMoreButtonT.hide();
-  };
-
-  var addWidget = function addWidget(widgetCode) {
-    var position = EvaluateNewWidgetPosition();
-    props.openAddEditWidget({
-      TypeCode: widgetCode,
-      StartPotistion: position.x + "," + position.y,
-      EndPosition: position.w + "," + position.h,
-      ChangeSetOp: 'Insert'
-    });
-  };
-
-  var EvaluateNewWidgetPosition = function EvaluateNewWidgetPosition() {
-    var widgetYPosition = 0;
-    var widgetXPosition = 0;
-    var allLayouts = layouts["lg"].map(function (e) {
-      return e.Layout;
-    });
-
-    for (var y = 0; true; y++) {
-      widgetYPosition = y;
-
-      for (var x = 0; x < 10; x++) {
-        widgetXPosition = x;
-        var exisitWidgetInNewPosition = allLayouts.find(function (e) {
-          return e && widgetXPosition < e.x + e.w && widgetXPosition + newWidgetWidth > e.x && widgetYPosition < e.y + e.h && widgetYPosition + newWidgetHeight > e.y;
-        });
-        if (!exisitWidgetInNewPosition) return {
-          x: widgetXPosition,
-          y: widgetYPosition,
-          w: newWidgetWidth,
-          h: newWidgetHeight
-        };
-      }
-    }
-  };
-
-  var editLayout = function editLayout() {
-    var _dashboardMoreButtonT2;
-
-    setIsInEditMode(true);
-    setHasChanges(false);
-    dashboardMoreButtonToggle === null || dashboardMoreButtonToggle === void 0 ? void 0 : (_dashboardMoreButtonT2 = dashboardMoreButtonToggle.current) === null || _dashboardMoreButtonT2 === void 0 ? void 0 : _dashboardMoreButtonT2.hide();
-    setBeforEditDashbord(deepClone(currentDashbord));
-  };
-
-  var save = function save() {
-    setIsInEditMode(false);
-    console.log('onSaveDashboard > ', currentDashbord);
-    props.onSaveDashboard(currentDashbord);
-    onHide();
-    setHasChanges(false);
-  };
-
-  var cancelSave = function cancelSave() {
-    if (!hasChanges) {
-      setIsInEditMode(false);
-      setHasChanges(false);
-    } else {
-      setCancelConfirmDialog(true);
-    }
-  };
-
-  var dontSave = function dontSave() {
-    setHasChanges(false);
-    setIsInEditMode(false);
-    props.dataBinding.onGetDashboard.next(beforEditDashbord);
-    setCancelConfirmDialog(false);
-  };
-
-  var changeDashboard = function changeDashboard(event) {
-    if (event.value == (currentDashbord === null || currentDashbord === void 0 ? void 0 : currentDashbord.Id)) return;
-    var dasboard = dashbords.find(function (e) {
-      return e.Id == event.value;
-    });
-    props.onChangeDashboard(dasboard);
-    props.dataBinding.onGetDashboard.next(dasboard);
-  };
-
-  var applyLayouts = function applyLayouts(dashbord) {
-    if (!(dashbord !== null && dashbord !== void 0 && dashbord.Widgets)) return;
-    var layout = {
-      lg: []
-    };
-    dashbord === null || dashbord === void 0 ? void 0 : dashbord.Widgets.map(function (widget) {
+  var applyLayouts = function applyLayouts(widgets) {
+    if (!widgets) return;
+    widgets.lg.map(function (widget) {
       if (widget.Id && widget.Id.length > 0) widget.key = widget.Id;else widget.key = uuid.v4();
       widget.Layout = {
         minH: 5,
@@ -1008,10 +839,9 @@ var Dashboard = function Dashboard(props) {
         x: +widget.StartPotistion.split(',')[0],
         y: +widget.StartPotistion.split(',')[1]
       };
-      layout.lg.push(widget);
     });
-    console.log('setLayouts -- > ', layout);
-    setLayouts(layout);
+    console.log('setLayouts -- > ', widgets);
+    setWidgetLayouts(widgets);
   };
 
   var updateWidgets = function updateWidgets(layouts) {
@@ -1025,160 +855,28 @@ var Dashboard = function Dashboard(props) {
         return;
       }
     });
-    var widgets = [];
-    currentDashbord === null || currentDashbord === void 0 ? void 0 : currentDashbord.Widgets.forEach(function (widget) {
+    Widgetlayouts.lg.forEach(function (widget) {
       if (layoutsDic[widget.key]) {
         widget.StartPotistion = layoutsDic[widget.key].x + "," + layoutsDic[widget.key].y;
         widget.EndPosition = layoutsDic[widget.key].w + "," + layoutsDic[widget.key].h;
         widget.Layout = layoutsDic[widget.key];
-        widgets.push(widget);
       }
     });
-
-    if (currentDashbord) {
-      currentDashbord.Widgets = widgets;
-    }
-
-    console.log('after update widget', currentDashbord);
-    setHasChanges(true);
-  };
-
-  var renderCancelConfirmDialogFooter = function renderCancelConfirmDialogFooter() {
-    return React.createElement("div", {
-      className: 'dl-flex-row-end'
-    }, React.createElement(button.Button, {
-      label: "Cancel",
-      onClick: function onClick() {
-        return onHide();
-      },
-      className: "p-button-secondary"
-    }), React.createElement(button.Button, {
-      label: "Don't Save",
-      onClick: function onClick() {
-        return dontSave();
-      },
-      className: "p-button-secondary"
-    }), React.createElement(button.Button, {
-      label: "Save",
-      onClick: function onClick() {
-        return save();
-      },
-      autoFocus: true,
-      className: "p-button-warning"
-    }));
-  };
-
-  var onHide = function onHide() {
-    setCancelConfirmDialog(false);
+    console.log('after update widget', Widgetlayouts);
+    props.onChangeLayouts(Widgetlayouts);
   };
 
   return React.createElement("div", {
     className: 'dl-full-hight'
   }, React.createElement("div", {
-    className: 'dl-dashboard-header dl-card'
-  }, React.createElement("div", {
-    className: 'dl-flex-row dl-custom-btn'
-  }, React.createElement("div", {
-    className: 'dl-title-1'
-  }, currentDashbord === null || currentDashbord === void 0 ? void 0 : currentDashbord.Name), React.createElement(button.Button, {
-    icon: "pi pi-ellipsis-v",
-    onClick: function onClick(e) {
-      var _dashboardMoreButtonT3;
-
-      return dashboardMoreButtonToggle === null || dashboardMoreButtonToggle === void 0 ? void 0 : (_dashboardMoreButtonT3 = dashboardMoreButtonToggle.current) === null || _dashboardMoreButtonT3 === void 0 ? void 0 : _dashboardMoreButtonT3.toggle(e);
-    },
-    className: "p-button p-button-icon-only p-button-rounded p-button-text"
-  }, React.createElement(ripple.Ripple, null)), React.createElement(overlaypanel.OverlayPanel, {
-    ref: dashboardMoreButtonToggle,
-    className: "buttons-overlay"
-  }, React.createElement("div", {
-    className: "buttons-list"
-  }, React.createElement("div", {
-    onClick: function onClick() {
-      return EditDashBoard();
-    }
-  }, "Edit"), React.createElement("div", {
-    onClick: editLayout
-  }, "Edit Layout")))), React.createElement("div", {
-    className: 'dl-flex-row'
-  }, !isInEditMode ? React.createElement("div", {
-    className: 'dl-flex-row'
-  }, React.createElement("div", {
-    style: {
-      width: "161px"
-    }
-  }, React.createElement(dropdown.Dropdown, {
-    value: [],
-    options: dashbords,
-    optionValue: "Id",
-    optionLabel: "Name",
-    onChange: changeDashboard,
-    placeholder: "Choose Dashboard",
-    optionDisabled: function optionDisabled(option) {
-      return option === null || option === void 0 ? void 0 : option.Disabled;
-    },
-    scrollHeight: "300px",
-    style: {
-      width: '100%'
-    }
-  })), React.createElement(button.Button, {
-    icon: "pi pi-plus",
-    onClick: function onClick() {
-      return props.openAddEditDashboard(undefined);
-    },
-    className: "dl-dashboard-add p-button-rounded p-button-success"
-  })) : null, isInEditMode ? React.createElement("div", {
-    className: 'dl-flex-row'
-  }, React.createElement(button.Button, {
-    label: "Cancel",
-    className: "p-button-secondary dl-m-r-s ",
-    onClick: cancelSave
-  }), React.createElement(dialog.Dialog, {
-    header: "Unsaved Changes",
-    visible: cancelConfirmDialog,
-    style: {
-      width: '50vw'
-    },
-    footer: renderCancelConfirmDialogFooter(),
-    onHide: onHide
-  }, React.createElement("p", null, "This Dashboard has unsaved changes do you want to save it?")), hasChanges ? React.createElement(button.Button, {
-    label: "Save",
-    form: "frm",
-    onClick: save,
-    autoFocus: true,
-    className: "p-button-warning "
-  }) : null, !hasChanges ? React.createElement(button.Button, {
-    label: "Save",
-    form: "frm",
-    onClick: save,
-    autoFocus: true,
-    className: "p-button-secondary "
-  }) : null, React.createElement("div", {
-    style: {
-      width: '192px',
-      marginLeft: '15px'
-    }
-  }, React.createElement(dropdown.Dropdown, {
-    options: WidgetTypes,
-    optionValue: "Code",
-    optionLabel: "Name",
-    onChange: function onChange(e) {
-      return addWidget(e.value);
-    },
-    placeholder: "Add Component",
-    optionDisabled: function optionDisabled(option) {
-      return option === null || option === void 0 ? void 0 : option.Disabled;
-    },
-    scrollHeight: "300px"
-  }))) : null)), React.createElement("div", {
     className: 'dl-dashboard-body'
   }, React.createElement(DashboardDesigner, {
     onSelectDataPoint: props.onSelectDataPoint,
     editMode: isInEditMode,
     onLayoutChange: updateWidgets,
-    dashboardLayouts: layouts,
+    dashboardLayouts: Widgetlayouts,
     openEditWidget: function openEditWidget(widget) {
-      return props.openAddEditWidget(widget);
+      return props.openEditWidget(widget);
     }
   })));
 };