logitude-dashboard-library 1.4.4 → 1.4.6

package/dist/assets/styles/dl-dashboard.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.cdnfonts.com/css/manrope');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
 
 $blue: #2C99F7;
 $bg-color: #ffffff;
@@ -311,7 +311,7 @@ $dark-grey: #717585;
     h1 {
         text-transform: capitalize;
         font-size: 15px;
-        font-family: 'Manrope';
+        font-family: 'Manrope', sans-serif;
         font-style: normal;
         color: #292D30;
         margin-top: 0;
@@ -442,14 +442,14 @@ $dark-grey: #717585;
 
 
 .kpIcontainer {
+    width: 100%;
     height: 100%;
-    flex-direction: column;
+    flex-direction: row;
     box-sizing: border-box;
-    display: flex;
-    place-content: center;
-    align-items: center;
+    display: inline-block;
     gap: 20px;
     cursor: pointer;
+   
 }
 
 .kpIHeader {
@@ -481,15 +481,15 @@ $dark-grey: #717585;
 }
 
 .dl-kpi-arrow-up {
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid greenyellow;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 4px solid #4AC76F;
 }
 
 .dl-kpi-arrow-down {
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid red;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 4px solid red;
 }
 
 .dl-kpi-same-line {
@@ -499,4 +499,48 @@ $dark-grey: #717585;
 
 .dl-kpi-margin {
     margin-right: 4px;
+}
+
+.dl-kpi-value{
+    height: 31px;
+
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 26px;
+    line-height: 120%;
+    color: #292D30;
+    padding-left: 12px;
+    
+}
+.dl-kpi-unit {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 125%;
+    color: #292D30;
+    padding-left: 4px;
+    padding-top: 5px;
+    
+}
+
+.dl-kpi-ratio {
+    height: 15px;
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 11px;
+    line-height: 15px;
+    text-align: right;
+
+    color: #A4A4A4;
+    padding-left: 15px;
+    padding-top: 12px;
+    padding-right: 10px;
+}
+.dl-kpi-textTrimming {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }

package/dist/features/Dashboard/ChartsComponents/ApexChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ReactWidgetPM } from "../../../types/widget";
 import { DataPointSelection } from '../../../types/SeriesMeasure';
 import { ApexOptions } from "apexcharts";

package/dist/features/Dashboard/ChartsComponents/CustomCharts/CustomChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
 import { DataPointSelection } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";

package/dist/features/Dashboard/ChartsComponents/CustomCharts/KpiChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { KpiChart } from "../../../../types/KpiChart";
 import { CustomChartProps } from "./CustomChart";
 declare type KpiChartProps = {

package/dist/features/Dashboard/ChartsComponents/FusionChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DashboardDataBinding } from "../../../types/DashboardDataBinding";
 import { DataPointSelection } from "../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../types/widget";

package/dist/features/Dashboard/ChartsComponents/FusionChartDataSoruceBuilder.d.ts

@@ -0,0 +1,4 @@
+import { SeriesMeasure } from "../../../types/SeriesMeasure";
+import { ChartInfo } from "./FusionChartObjectBuilder";
+export declare function getCategoriesBasedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;
+export declare function getSimpleDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;

package/dist/features/Dashboard/ChartsComponents/FusionChartObjectBuilder.d.ts

@@ -1,4 +1,4 @@
 import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../types/SeriesMeasure";
-import { FusionChartProps } from "./FusionChart";
-export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], props: FusionChartProps): ChartObject;
+import { ReactWidgetPM } from "../../../types/widget";
+export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;

package/dist/features/Dashboard/ChartsComponents/FusionChartTest.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare function FusionChartTest(): JSX.Element;
 export default FusionChartTest;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChart.d.ts

@@ -0,0 +1,11 @@
+import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
+import { DataPointSelection } from "../../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare type FusionChartProps = {
+    widget: ReactWidgetPM | undefined;
+    widgetRef: ReactWidgetPM | undefined;
+    dataBinding: DashboardDataBinding;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+};
+declare const FusionChart: (props: FusionChartProps) => JSX.Element;
+export default FusionChart;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartDataSoruceBuilder.d.ts

@@ -0,0 +1,4 @@
+import { SeriesMeasure } from "../../../../types/SeriesMeasure";
+import { ChartInfo } from "./FusionChartObjectBuilder";
+export declare function getCategoriesBasedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;
+export declare function getSimpleDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartObjectBuilder.d.ts

@@ -0,0 +1,36 @@
+import { ChartObject } from "fusioncharts";
+import { SeriesMeasure } from "../../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;
+export interface ChartInfo {
+    theme: string;
+    scrollHeight: string;
+    scrollWidth: string;
+    scrollPadding: string;
+    flatScrollBars: string;
+    enableSlicing: string;
+    chartLeftMargin: string;
+    chartTopMargin: string;
+    chartRightMargin: string;
+    chartBottomMargin: string;
+    baseFont: string;
+    baseFontSize: string;
+    showPercentValues: string;
+    showValues: string;
+    showLegend: string;
+    lineColor: string;
+    vDivLineDashed: string;
+    vDivLineDashLen: string;
+    divLineDashed: string;
+    divLineDashLen: string;
+    enableRotation: string;
+    legendItemFont: string;
+    legendItemFontSize: string;
+    legendCaptionFont: string;
+    legendCaptionFontSize: string;
+    labelFont: string;
+    labelFontSize: string;
+    plottooltext: string;
+}
+export declare function getTooltip(): string;
+export declare function getSeriesPositionColor(position: number): string | null;

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionColors.d.ts

@@ -0,0 +1,18 @@
+export declare const mainYellowColor = "#F6CF33";
+export declare const mainRedColor = "#EE5F77";
+export declare const mainGreenColor = "#4AC76F";
+export declare const mainTurquoiseColor = "#32C7C7";
+export declare const mainBlueColor = "#369CFB";
+export declare const mainPurpleColor = "#935BE0";
+export declare const mainOrangeColor = "#FAAD14";
+export declare const lightYellowColor = "#FBE799";
+export declare const lightRedColor = "#F7AFBB";
+export declare const lightGreenColor = "#A4E3B7";
+export declare const lightTurquoiseColor = "#99E3E3";
+export declare const lightBlueColor = "#9BCDFD";
+export declare const lightPurpleColor = "#C9ADF0";
+export declare const lightOrangeColor = "#FDD689";
+export declare const grey1Color = "#F6F6F6";
+export declare const grey2Color = "#F0F0F0";
+export declare const grey3Color = "#D9D9D9";
+export declare const grey4Color = "#A4A4A4";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Layouts } from "react-grid-layout";
 import { ReactWidgetPM } from "../../types/widget";
 import { DataPointSelection } from "../../types/SeriesMeasure";

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../types/widget";
 import { DashboardDataBinding } from '../../types/DashboardDataBinding';

package/dist/features/Dashboard/dashboard-dialog/dashboard-dialog-component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type DashboardDialogProps = {
     display: boolean;
     onClose: () => void;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./styles.module.css";
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';