logitude-dashboard-library 1.2.3 → 1.2.6

package/dist/assets/styles/colors.scss

@@ -0,0 +1,10 @@
+$blue: #2C99F7;
+$bg-color: #F5F6FB;
+$gray: #F5F6FB;
+$green: #22D792;
+$yellow: #FBC445; 
+$red: #F74E49; 
+$dark-grey: #717585;
+
+
+

package/dist/assets/styles/components-style.scss

@@ -0,0 +1,206 @@
+$blue: #2C99F7;
+$bg-color: #F5F6FB;
+$gray: #F5F6FB;
+$green: #22D792;
+$yellow: #FBC445;
+$red: #F74E49;
+$dark-grey: #717585;
+
+.form-field {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 5px;
+
+    >label {
+        margin-right: 15px;
+        width: 100px;
+    }
+
+    .p-inputtext {
+        width: 250px;
+    }
+}
+
+.dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+
+    button {
+        margin-left: 10px;
+    }
+}
+
+.dialog-wrapper {
+    min-height: 400px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+}
+
+.dashboard-body {
+    background: $bg-color;
+    height: 100%;
+
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+.App {
+    margin: 0 50px;
+}
+
+.dashboard-header {
+    display: flex;
+    justify-content: space-between;
+
+    >div {
+        align-items: center;
+        display: flex;
+    }
+
+    >div>* {
+        margin-right: 15px;
+    }
+
+    .p-button-icon,
+    i {
+        font-size: 28px !important;
+        color: black;
+    }
+
+}
+
+
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+
+#container {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
+
+
+.react-grid-item {
+    background-color: lightblue;
+}
+
+.panel {
+    background: white !important;
+    border-radius: 7px;
+    box-shadow: 0px 0px 3px 1px #6273842b;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+    height: 100%;
+
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        i {
+            font-size: 18px;
+            // color: colors.$red;
+            cursor: pointer;
+        }
+    }
+
+    h1 {
+        text-transform: capitalize;
+        font-size: 15px;
+        font-family: 'Roboto Flex';
+        color: #061436;
+    }
+}
+
+
+#container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+
+.grid-container {
+    position: relative;
+
+    .react-grid-layout {
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    height: fit-content;
+    padding: 10px;
+
+    >div {
+        box-sizing: border-box;
+        border-radius: 7px;
+    }
+
+}
+
+.grid--bordered>div {
+    border: 2px dotted #d0d0d0;
+}
+
+.grid--boxes>div {
+    background: #00000008;
+}
+
+
+.dashboard-widget {
+    height: calc(100% - 40px);
+    box-sizing: border-box;
+}
+
+.filter-label {
+    font-size: 12px;
+    color: $dark-grey;
+}
+
+.buttons-overlay .p-overlaypanel-content {
+    padding: 0 !important;
+}
+
+.buttons-list>div {
+    padding: 15px;
+    width: 150px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        background: $bg-color;
+    }
+}
+
+.hidden {
+    display: none;
+}

package/dist/assets/styles/fonts.scss

@@ -0,0 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap');
+*{
+    font-family: 'Roboto Flex';
+}

package/dist/assets/styles/global.scss

@@ -0,0 +1,26 @@
+@use 'colors.scss';
+
+@mixin card { 
+  background: white !important;
+  border-radius: 7px;
+  box-shadow: 0px 0px 3px 1px #6273842b;
+}
+
+// * {
+//   // change ReactPrime component default size
+//   font-size: 15px;
+// }
+
+.container{
+  position: relative;
+   display: flex;
+   width: 100%;
+   >div{
+    //  width: 50%;
+    padding: 0 20px;
+   }
+}
+
+#chart,.chart{
+  height: 100%;
+}

package/dist/features/Dashboard/DashboardDesigner.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import "react-grid-layout/css/styles.css";
-import "react-resizable/css/styles.css";
-import "./dashboard-designer.scss";
 import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
 declare const DashboardDesigner: () => JSX.Element;
 export declare const layoutGridProps: {

package/dist/features/Dashboard/NewWidget.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { DropdownChangeParams } from "primereact/dropdown";
-import "./NewWidget.scss";
 import { Widget } from "../../types/widget";
 interface NewWidgetProps {
     onOkButton(data: Widget): any;

package/dist/index.css

@@ -1,261 +1,13 @@
-._3s4OD {
-  position: relative;
-}
-._3ACrv {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
-}
-._3Dv4b {
-  bottom: 0;
-  left: 0;
-  cursor: sw-resize;
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
-}
-._1_pdx {
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
-}
-._3lqDp {
-  top: 0;
-  left: 0;
-  cursor: nw-resize;
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-}
-._1br-A {
-  top: 0;
-  right: 0;
-  cursor: ne-resize;
-  -webkit-transform: rotate(270deg);
-          transform: rotate(270deg);
-}
-._2LU8g,
-._12Q3f {
-  top: 50%;
-  margin-top: -10px;
-  cursor: ew-resize;
-}
-._2LU8g {
-  left: 0;
-  -webkit-transform: rotate(135deg);
-          transform: rotate(135deg);
-}
-._12Q3f {
-  right: 0;
-  -webkit-transform: rotate(315deg);
-          transform: rotate(315deg);
-}
-._vogN6,
-._25fW6 {
-  left: 50%;
-  margin-left: -10px;
-  cursor: ns-resize;
-}
-._vogN6 {
-  top: 0;
-  -webkit-transform: rotate(225deg);
-          transform: rotate(225deg);
-}
-._25fW6 {
-  bottom: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap");
-* {
-  font-size: 15px;
-}
+@import "primereact/resources/themes/lara-light-indigo/theme.css"; 
+@import "primereact/resources/primereact.css";                 
+@import "primeicons/primeicons.css"; 
 
-._3uhvX {
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-._3uhvX > div {
-  padding: 0 20px;
-}
+@import "react-grid-layout/css/styles";
+@import "react-resizable/css/styles";
 
-#_3d4HD, ._3d4HD {
-  height: 100%;
-}
+@import "logitude-dashboard-library/dist/assets/styles/components-style.scss";
+@import "logitude-dashboard-library/dist/assets/styles/colors.scss";
+@import "logitude-dashboard-library/dist/assets/styles/fonts.scss";
+@import "logitude-dashboard-library/dist/assets/styles/global.scss";
 
-._3RJ8q {
-  margin: 0 50px;
-}
-
-._2lGnl {
-  display: flex;
-  justify-content: space-between;
-}
-._2lGnl > div {
-  align-items: center;
-  display: flex;
-}
-._2lGnl > div > * {
-  margin-right: 15px;
-}
-._2lGnl ._18x0U, ._2lGnl i {
-  font-size: 28px !important;
-  color: black;
-}
-
-._3MA9L {
-  color: #61dafb;
-}
-
-@-webkit-keyframes _1JEML {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes _1JEML {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-#_3uhvX {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-}
-
-._26Nxd {
-  background-color: lightblue;
-}
-
-._39fRL {
-  background: white !important;
-  border-radius: 7px;
-  box-shadow: 0px 0px 3px 1px rgba(98, 115, 132, 0.168627451);
-  padding: 20px;
-  box-sizing: border-box;
-  position: relative;
-  height: 100%;
-}
-._39fRL header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-._39fRL header i {
-  font-size: 18px;
-  cursor: pointer;
-}
-._39fRL h1 {
-  text-transform: capitalize;
-  font-size: 15px;
-  font-family: "Roboto Flex";
-  color: #061436;
-}
-
-#_3uhvX {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-._3IiJz {
-  position: relative;
-}
-._3IiJz ._Job3x {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-._1SnLK {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  padding: 10px;
-}
-._1SnLK > div {
-  box-sizing: border-box;
-  border-radius: 7px;
-}
-
-._NWJ3F > div {
-  border: 2px dotted #d0d0d0;
-}
-
-._2hSmL > div {
-  background: rgba(0, 0, 0, 0.031372549);
-}
-
-._1GwiB {
-  height: calc(100% - 40px);
-  box-sizing: border-box;
-}
-
-._1gJPQ {
-  font-size: 12px;
-  color: #717585;
-}
-
-._3jTkc ._1pjVN {
-  padding: 0 !important;
-}
-
-._1yXJg > div {
-  padding: 15px;
-  width: 150px;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-._1yXJg > div:hover {
-  background: #F5F6FB;
-}
-
-._33DWa {
-  display: none;
-}
-._3LBx0 {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 5px;
-}
-._3LBx0 > label {
-  margin-right: 15px;
-  width: 100px;
-}
-._3LBx0 ._1uVlk {
-  width: 250px;
-}
-
-._2Zju7 {
-  display: flex;
-  justify-content: flex-end;
-}
-._2Zju7 button {
-  margin-left: 10px;
-}
-
-._grais {
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
+   

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import "./styles.module.css";
 declare const Dashboard: () => JSX.Element;
 export default Dashboard;

package/dist/index.js

@@ -2,7 +2,6 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-require('react-grid-layout/css/styles.css');
 var reactGridLayout = require('react-grid-layout');
 var button = require('primereact/button');
 var _ = _interopDefault(require('lodash'));
@@ -750,13 +749,15 @@ var BarChartComponent = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(BarChartComponent, _React$Component);
 
   function BarChartComponent(props) {
+    var _this$props$widget;
+
     var _this;
 
     _this = _React$Component.call(this, props) || this;
     _this.data = [];
     var filters = new ApiQueryFilters();
     var dataService = new DataService();
-    dataService.getDataByFilters(filters, _this.props.widget.EntityName || '').then(function (response) {
+    if ((_this$props$widget = _this.props.widget) !== null && _this$props$widget !== void 0 && _this$props$widget.EntityName) dataService.getDataByFilters(filters, _this.props.widget.EntityName || '').then(function (response) {
       console.log("dataService.getDataByFilters", response);
       _this.data = response.data.Result;
 
@@ -955,11 +956,11 @@ var WidgetCard = function WidgetCard(props, state) {
     type: "Area",
     component: AreaChartComponent
   }];
-  return React__default.createElement("div", null, React__default.createElement("div", {
+  return React__default.createElement("div", {
     className: "panel",
     key: props.el.i
   }, React__default.createElement("header", null, React__default.createElement("h1", null, ((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.WidgetName) || "not set"), React__default.createElement(button.Button, {
-    icon: "las la-ellipsis-v",
+    icon: "pi pi-ellipsis-v",
     className: "p-button-lg p-button-rounded p-button-text",
     onClick: function onClick(e) {
       var _moreBtnToggle$curren;
@@ -987,7 +988,7 @@ var WidgetCard = function WidgetCard(props, state) {
     key: props.el.i,
     dateFilter: props.dateFilter,
     widget: props.widget
-  }))));
+  })));
 };
 
 var ResponsiveReactGridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
@@ -1066,7 +1067,7 @@ var DashboardDesigner = function DashboardDesigner() {
     return React__default.createElement("header", {
       className: "dashboard-header"
     }, React__default.createElement("div", null, React__default.createElement("h1", null, dashboardTitle || "Dashboard"), React__default.createElement(button.Button, {
-      icon: "las la-ellipsis-v",
+      icon: "pi pi-ellipsis-v",
       onClick: function onClick(e) {
         var _moreButtonToggle$cur;
 
@@ -1367,7 +1368,11 @@ var WidgetTypes = [{
 }];
 
 var Dashboard = function Dashboard() {
-  return React.createElement("div", null, React.createElement(DashboardDesigner, null));
+  return React.createElement("div", {
+    className: 'dashboard-body'
+  }, React.createElement("div", {
+    className: 'App'
+  }, React.createElement(DashboardDesigner, null)));
 };
 
 module.exports = Dashboard;