logitude-dashboard-library 1.2.2 → 1.2.5

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,190 @@
+$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%;
+}
+
+
+
+.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 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&family=Roboto+Flex:opsz@8..144&display=swap');

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,67 +1,24 @@
-import "./dashboard-designer.scss";
-import "react-grid-layout/css/styles.css";
-import "react-resizable/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 { Layouts } from "react-grid-layout";
-import React, { RefObject } from "react";
-import { OverlayPanel } from "primereact/overlaypanel";
-import { WidgetComponent } from "../../types/WidgetComponent";
-import { Widget } from "../../types/widget";
-declare class DashboardDesigner extends React.Component<any, any> {
-    moreButtonToggle: RefObject<OverlayPanel>;
-    widgetButtonToggle: RefObject<OverlayPanel>;
-    addWidgetButtonToggle: RefObject<OverlayPanel>;
-    widgetComponents: WidgetComponent[];
-    constructor(props: any);
-    static layoutGridProps: {
-        rowHeight: number;
-        className: string;
-        cols: {
-            lg: number;
-            md: number;
-            sm: number;
-            xs: number;
-            xxs: number;
-        };
-        useCSSTransforms: boolean;
+/// <reference types="react" />
+import ColumnChartComponent from "./ChartsComponents/ColumnChartComponent";
+declare const DashboardDesigner: () => JSX.Element;
+export declare const layoutGridProps: {
+    rowHeight: number;
+    className: string;
+    cols: {
+        lg: number;
+        md: number;
+        sm: number;
+        xs: number;
+        xxs: number;
     };
-    componentDidUpdate(prevState: any): void;
-    private UpdatePlaceholderDimensions;
-    showMsg: boolean;
-    onLayoutChange(layouts: Layouts): void;
-    deletePanel: (i: any) => void;
-    editWidget: (widget: any) => void;
-    addPanel: (newWidget: Widget) => void;
-    EvaluateNewWidgetPosition(): {
-        x: number;
-        y: number;
-    };
-    SaveGrid(): void;
-    hideDialog: () => void;
-    reset(): void;
-    setToken(): void;
-    changeTitle(i: string | number): void;
-    selectedWidget: any;
-    addComponent(): void;
-    onOkButton: (data: any) => void;
-    onCancelButton: () => void;
-    saveToStorage: (key: string, value: any) => void;
-    getFromStorage: (key: string) => any;
-    FindWidget(el: any): any;
-    toggleDialog(): void;
-    toggleWidget(widget: {
-        id: string;
-    }): void;
-    getRandomInt(min: number, max: number): number;
-    widgetToEdit: Widget | null;
-    renderNewWidgetDialog(): JSX.Element;
-    renderPageHeader(): JSX.Element;
-    renderGridWidgetsPlaceholder(): JSX.Element;
-    renderLayoutGrid(layout: any): JSX.Element;
-    renderWidgetComponent(el: any): JSX.Element;
-    render(): JSX.Element;
-}
+    useCSSTransforms: boolean;
+};
+export declare const WidgetTypes: {
+    Name: string;
+    Disabled: boolean;
+}[];
+export declare const widgetComponents: {
+    type: string;
+    component: typeof ColumnChartComponent;
+}[];
 export default DashboardDesigner;

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/features/Dashboard/WidgetCard.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import "./dashboard-designer.scss";
 declare type WidgetCardProps = {
     editBtnClicked(widget: any): any;
     deleteBtnClicked(i: any): any;

package/dist/index.css

@@ -1,218 +1,10 @@
-@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;
-}
-
-._3uhvX {
-  position: relative;
-  display: flex;
-  width: 100%;
-}
-._3uhvX > div {
-  padding: 0 20px;
-}
-
-#_3d4HD, ._3d4HD {
-  height: 100%;
-}
-
-._1WqvU {
-  background-color: antiquewhite;
-}
-
-._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;
-}
-._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);
-}
-._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%;
-}
+@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";
+
+@import "react-grid-layout/css/styles";
+@import "react-resizable/css/styles";
+@import "primereact/resources/themes/lara-light-indigo/theme"; 
+@import "primereact/resources/primereact";                 
+@import "primeicons/primeicons";     

package/dist/index.d.ts

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