logitude-dashboard-library 1.2.4 → 1.2.7

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

@@ -2,39 +2,55 @@ $blue: #2C99F7;
 $bg-color: #F5F6FB;
 $gray: #F5F6FB;
 $green: #22D792;
-$yellow: #FBC445; 
-$red: #F74E49; 
+$yellow: #FBC445;
+$red: #F74E49;
 $dark-grey: #717585;
 
-.form-field{
+.form-field {
     display: flex;
     align-items: baseline;
     margin-bottom: 5px;
-    >label{
+
+    >label {
         margin-right: 15px;
         width: 100px;
     }
-    .p-inputtext{
+
+    .p-inputtext {
         width: 250px;
     }
 }
-.dialog-footer{
+
+.dialog-footer {
     display: flex;
     justify-content: flex-end;
-    button{
+
+    button {
         margin-left: 10px;
     }
 }
-.dialog-wrapper{
+
+.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;

package/dist/assets/styles/fonts.scss

@@ -1 +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

@@ -6,10 +6,10 @@
   box-shadow: 0px 0px 3px 1px #6273842b;
 }
 
-* {
-  // change ReactPrime component default size
-  font-size: 15px;
-}
+// * {
+//   // change ReactPrime component default size
+//   font-size: 15px;
+// }
 
 .container{
   position: relative;

package/dist/index.css

@@ -1,261 +1,13 @@
-@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"; 
 
-._dashboard-designer__container__3uhvX {
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-._dashboard-designer__container__3uhvX > div {
-  padding: 0 20px;
-}
+@import "react-grid-layout/css/styles";
+@import "react-resizable/css/styles";
 
-#_dashboard-designer__chart__3d4HD, ._dashboard-designer__chart__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";
 
-._dashboard-designer__App__3RJ8q {
-  margin: 0 50px;
-}
-
-._dashboard-designer__dashboard-header__2lGnl {
-  display: flex;
-  justify-content: space-between;
-}
-._dashboard-designer__dashboard-header__2lGnl > div {
-  align-items: center;
-  display: flex;
-}
-._dashboard-designer__dashboard-header__2lGnl > div > * {
-  margin-right: 15px;
-}
-._dashboard-designer__dashboard-header__2lGnl ._dashboard-designer__p-button-icon__18x0U, ._dashboard-designer__dashboard-header__2lGnl i {
-  font-size: 28px !important;
-  color: black;
-}
-
-._dashboard-designer__App-link__3MA9L {
-  color: #61dafb;
-}
-
-@-webkit-keyframes _dashboard-designer__App-logo-spin__1JEML {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes _dashboard-designer__App-logo-spin__1JEML {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-#_dashboard-designer__container__3uhvX {
-  height: 100%;
-  width: 100%;
-  position: absolute;
-}
-
-._dashboard-designer__react-grid-item__26Nxd {
-  background-color: lightblue;
-}
-
-._dashboard-designer__panel__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%;
-}
-._dashboard-designer__panel__39fRL header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-._dashboard-designer__panel__39fRL header i {
-  font-size: 18px;
-  cursor: pointer;
-}
-._dashboard-designer__panel__39fRL h1 {
-  text-transform: capitalize;
-  font-size: 15px;
-  font-family: "Roboto Flex";
-  color: #061436;
-}
-
-#_dashboard-designer__container__3uhvX {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
-
-._dashboard-designer__grid-container__3IiJz {
-  position: relative;
-}
-._dashboard-designer__grid-container__3IiJz ._dashboard-designer__react-grid-layout__Job3x {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-
-._dashboard-designer__grid__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;
-}
-._dashboard-designer__grid__1SnLK > div {
-  box-sizing: border-box;
-  border-radius: 7px;
-}
-
-._dashboard-designer__grid--bordered__NWJ3F > div {
-  border: 2px dotted #d0d0d0;
-}
-
-._dashboard-designer__grid--boxes__2hSmL > div {
-  background: rgba(0, 0, 0, 0.031372549);
-}
-
-._dashboard-designer__dashboard-widget__1GwiB {
-  height: calc(100% - 40px);
-  box-sizing: border-box;
-}
-
-._dashboard-designer__filter-label__1gJPQ {
-  font-size: 12px;
-  color: #717585;
-}
-
-._dashboard-designer__buttons-overlay__3jTkc ._dashboard-designer__p-overlaypanel-content__1pjVN {
-  padding: 0 !important;
-}
-
-._dashboard-designer__buttons-list__1yXJg > div {
-  padding: 15px;
-  width: 150px;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-._dashboard-designer__buttons-list__1yXJg > div:hover {
-  background: #F5F6FB;
-}
-
-._dashboard-designer__hidden__33DWa {
-  display: none;
-}
-._NewWidget__form-field__3LBx0 {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 5px;
-}
-._NewWidget__form-field__3LBx0 > label {
-  margin-right: 15px;
-  width: 100px;
-}
-._NewWidget__form-field__3LBx0 ._NewWidget__p-inputtext__1uVlk {
-  width: 250px;
-}
-
-._NewWidget__dialog-footer__2Zju7 {
-  display: flex;
-  justify-content: flex-end;
-}
-._NewWidget__dialog-footer__2Zju7 button {
-  margin-left: 10px;
-}
-
-._NewWidget__dialog-wrapper__grais {
-  min-height: 400px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-}
-._styles__react-resizable__3s4OD {
-  position: relative;
-}
-._styles__react-resizable-handle__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;
-}
-._styles__react-resizable-handle-sw__3Dv4b {
-  bottom: 0;
-  left: 0;
-  cursor: sw-resize;
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
-}
-._styles__react-resizable-handle-se__1_pdx {
-  bottom: 0;
-  right: 0;
-  cursor: se-resize;
-}
-._styles__react-resizable-handle-nw__3lqDp {
-  top: 0;
-  left: 0;
-  cursor: nw-resize;
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-}
-._styles__react-resizable-handle-ne__1br-A {
-  top: 0;
-  right: 0;
-  cursor: ne-resize;
-  -webkit-transform: rotate(270deg);
-          transform: rotate(270deg);
-}
-._styles__react-resizable-handle-w__2LU8g,
-._styles__react-resizable-handle-e__12Q3f {
-  top: 50%;
-  margin-top: -10px;
-  cursor: ew-resize;
-}
-._styles__react-resizable-handle-w__2LU8g {
-  left: 0;
-  -webkit-transform: rotate(135deg);
-          transform: rotate(135deg);
-}
-._styles__react-resizable-handle-e__12Q3f {
-  right: 0;
-  -webkit-transform: rotate(315deg);
-          transform: rotate(315deg);
-}
-._styles__react-resizable-handle-n__vogN6,
-._styles__react-resizable-handle-s__25fW6 {
-  left: 50%;
-  margin-left: -10px;
-  cursor: ns-resize;
-}
-._styles__react-resizable-handle-n__vogN6 {
-  top: 0;
-  -webkit-transform: rotate(225deg);
-          transform: rotate(225deg);
-}
-._styles__react-resizable-handle-s__25fW6 {
-  bottom: 0;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-}
+   

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

@@ -749,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;
 
@@ -954,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;
@@ -986,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);
@@ -1065,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;
 
@@ -1366,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;