@enki-tek/fms-web-components 0.1.7 → 0.1.10

package/components/Charts/Barchart.svelte

@@ -1,74 +1,44 @@
 <!-- src/BarChart.svelte -->
 <script>
-    import { onMount, onDestroy } from 'svelte';
-    import { Chart, registerables } from 'chart.js';
-  
-    // Register all necessary components
-    Chart.register(...registerables);
-  
-    let chart;
-    let canvas;
-  
-    // Chart configuration
-    const chartData = {
-      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-      datasets: [
-        {
-          label: '# of Votes',
-          backgroundColor: [
-            'rgba(255, 99, 132, 0.2)',
-            'rgba(54, 162, 235, 0.2)',
-            'rgba(255, 206, 86, 0.2)',
-            'rgba(75, 192, 192, 0.2)',
-            'rgba(153, 102, 255, 0.2)',
-            'rgba(255, 159, 64, 0.2)',
-          ],
-          borderColor: [
-            'rgba(255, 99, 132, 1)',
-            'rgba(54, 162, 235, 1)',
-            'rgba(255, 206, 86, 1)',
-            'rgba(75, 192, 192, 1)',
-            'rgba(153, 102, 255, 1)',
-            'rgba(255, 159, 64, 1)',
-          ],
-          borderWidth: 1,
-          data: [12, 19, 3, 5, 2, 3],
-        },
-      ],
-    };
-  
-    const chartOptions = {
-      responsive: true,
-      maintainAspectRatio: false, // Allows the chart to resize freely
-      scales: {
-        y: {
-          beginAtZero: true,
-        },
-      },
-    };
-  
-    onMount(() => {
-      const ctx = canvas.getContext('2d');
-      chart = new Chart(ctx, {
-        type: 'bar', // Set chart type to 'bar'
-        data: chartData,
-        options: chartOptions,
-      });
-    });
-  
-    onDestroy(() => {
-      if (chart) {
-        chart.destroy();
-      }
-    });
-  </script>
-  
-  <canvas bind:this={canvas} width="400" height="200" />
-  
-  <style>
-    canvas {
-      max-width: 100%;
-      height: 100%; /* Ensures the canvas takes the full height of the container */
-    }
-  </style>
-  
+	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import {
+		chartOptions,
+		getChartData
+	} from './chartOptions';
+
+	export let data = {};
+	export let label = '';
+	export let width = 200;
+	export let height = 200;
+
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: 'bar', // Set chart type to 'bar'
+			data: getChartData({ data, label }),
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: 100%; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

package/components/Charts/Barchart.svelte.d.ts

@@ -2,7 +2,10 @@
 /** @typedef {typeof __propDef.events}  BarchartEvents */
 /** @typedef {typeof __propDef.slots}  BarchartSlots */
 export default class Barchart extends SvelteComponentTyped<{
-    [x: string]: never;
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +16,10 @@ export type BarchartSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Charts/DoughnutChart.svelte

@@ -1,7 +1,8 @@
 <!-- src/PieChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import { chartOptions, getChartData } from './chartOptions';
 
 	export let data = {};
 	export let label = '';
@@ -13,45 +14,11 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: Object.keys(data),
-		datasets: [
-			{
-				label: label,
-				data: Object.values(data)
-			}
-		]
-	};
-
-	const chartOptions = {
-		plugins: {
-			legend: {
-				position: 'bottom' // Set legend position to bottom
-			},
-			datalabels: {
-				anchor: 'center',
-				align: 'end',
-				clamp: true,
-                font: {
-                    size: 16, // Set the font size here
-                    weight: 'bold', // Optional: set font weight
-                    family: 'Roboto', // Set the font family to Roboto
-                },
-				formatter: (value) => {
-					return value; // Show the value directly
-				}
-			}
-		},
-		responsive: true,
-		maintainAspectRatio: false // Allows the chart to resize freely
-	};
-
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'doughnut',
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});

package/components/Charts/LineChart.svelte

@@ -1,9 +1,13 @@
 <!-- src/MyChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
+	import { onDestroy, onMount } from 'svelte';
+	import { chartOptions } from './chartOptions';
 
 	export let data = {};
+	export let label = '';
+	export let width = 200;
+	export let height = 200;
 
 	// Register all necessary components
 	Chart.register(...registerables);
@@ -11,35 +15,12 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-		datasets: [
-			{
-				label: 'My First dataset',
-				backgroundColor: 'rgba(75, 192, 192, 0.2)',
-				borderColor: 'rgba(75, 192, 192, 1)',
-				borderWidth: 1,
-				data: [40, 30, 20, 50, 60, 70, 80]
-			}
-		]
-	};
-
-	const chartOptions = {
-		responsive: true,
-		maintainAspectRatio: false, // Allows the chart to resize without maintaining aspect ratio
-		scales: {
-			y: {
-				beginAtZero: true
-			}
-		}
-	};
 
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'line', // Change this to 'bar' for a bar chart
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});
@@ -52,7 +33,7 @@
 	});
 </script>
 
-<canvas bind:this={canvas} />
+<canvas bind:this={canvas} {width} {height} />
 
 <style>
 	canvas {

package/components/Charts/LineChart.svelte.d.ts

@@ -2,6 +2,9 @@
 /** @typedef {typeof __propDef.events}  LineChartEvents */
 /** @typedef {typeof __propDef.slots}  LineChartSlots */
 export default class LineChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    height?: number | undefined;
     data?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -13,6 +16,9 @@ export type LineChartSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
         data?: {} | undefined;
     };
     events: {

package/components/Charts/PieChart.svelte

@@ -1,8 +1,12 @@
 <!-- src/PieChart.svelte -->
 <script>
-	import { onMount, onDestroy } from 'svelte';
 	import { Chart, registerables } from 'chart.js';
 	import ChartDataLabels from 'chartjs-plugin-datalabels';
+	import { onDestroy, onMount } from 'svelte';
+	import {
+		chartOptions,
+		getChartData
+	} from './chartOptions';
 
 	export let data = {};
 	export let label = '';
@@ -14,46 +18,13 @@
 	let chart;
 	let canvas;
 
-	// Chart configuration
-	const chartData = {
-		labels: Object.keys(data),
-		datasets: [
-			{
-				label: label,
-				data: Object.values(data)
-			}
-		]
-	};
-
-	const chartOptions = {
-		plugins: {
-			legend: {
-				position: 'bottom' // Set legend position to bottom
-			},
-			datalabels: {
-				anchor: 'center',
-				align: 'end',
-                clamp: true,
-                font: {
-                    size: 16, // Set the font size here
-                    weight: 'bold', // Optional: set font weight
-                    family: 'Roboto', // Set the font family to Roboto
-                },
-				formatter: (value) => {
-					return value; // Show the value directly
-				}
-			}
-		},
-		responsive: true,
-		maintainAspectRatio: false // Allows the chart to resize freely
-	};
 
 	onMount(() => {
 		// console.log(chartData);
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
 			type: 'pie', // Set chart type to 'pie'
-			data: chartData,
+			data: getChartData({ data, label }),
 			options: chartOptions
 		});
 	});

package/components/Charts/chartOptions.d.ts

@@ -0,0 +1,32 @@
+export namespace chartOptions {
+    namespace plugins {
+        namespace legend {
+            const position: string;
+        }
+        namespace datalabels {
+            const anchor: string;
+            const align: string;
+            const clamp: boolean;
+            namespace font {
+                const size: number;
+                const weight: string;
+                const family: string;
+            }
+            function formatter(value: any): any;
+        }
+    }
+    const responsive: boolean;
+    const maintainAspectRatio: boolean;
+}
+export function getChartLabelsFromData(data: any): string[];
+export function getChartValuesFromData(data: any): any[];
+export function getChartData({ data, label }: {
+    data: any;
+    label: any;
+}): {
+    labels: string[];
+    datasets: {
+        label: any;
+        data: any[];
+    }[];
+};

package/components/Charts/chartOptions.js

@@ -0,0 +1,43 @@
+export const chartOptions = {
+    plugins: {
+        legend: {
+            position: 'bottom' // Set legend position to bottom
+        },
+        datalabels: {
+            anchor: 'center',
+            align: 'end',
+            clamp: true,
+            font: {
+                size: 16, // Set the font size here
+                weight: 'bold', // Optional: set font weight
+                family: 'Roboto', // Set the font family to Roboto
+            },
+            formatter: (value) => {
+                return value; // Show the value directly
+            }
+        }
+    },
+    responsive: true,
+    maintainAspectRatio: false // Allows the chart to resize freely
+};
+
+export const getChartLabelsFromData = (data) => {
+    return Object.keys(data)
+}
+
+export const getChartValuesFromData = (data) => {
+    return Object.values(data);
+}
+
+
+export const getChartData = ({ data, label }) => {
+    return {
+        labels: getChartLabelsFromData(data),
+        datasets: [
+            {
+                label: label,
+                data: getChartValuesFromData(data)
+            }
+        ]
+    };
+}

package/components/Icon/ActionInconGroup.svelte

@@ -1,8 +1,8 @@
 <script>
-
+export let className = "";
 </script>
 
-<div class="icons">
+<div class="icons {className}">
    <slot></slot>
 </div>
 

package/components/Icon/ActionInconGroup.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  ActionInconGroupEvents */
 /** @typedef {typeof __propDef.slots}  ActionInconGroupSlots */
 export default class ActionInconGroup extends SvelteComponentTyped<{
-    [x: string]: never;
+    className?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type ActionInconGroupSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        className?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/Layout/Footer.svelte

@@ -1,12 +1,10 @@
 <script>
-	// import { i18nInit } from '../i18n/i18n';
 	import ShiftLanguage from '../i18n/ShiftLanguage.svelte';
 
 	import { _ } from 'svelte-i18n';	
-	// i18nInit();
 </script>
 
-<footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between ">
+<footer class="main-footer p-10 d-flex flex-row align-items-center justify-content-between position-fixed bottom-0">
 	<div class="copy-right">
 		{$_({id: 'Common.rightReserved', default: 'All rights reserved.'})}
 		<i class="ml-2 text-secondary ">{$_({id: 'Common.Version', default:'Version'})} 0.0.2</i>		

package/components/Layout/Page.svelte

@@ -8,7 +8,7 @@
 "
 	>
 		<Row class="d-flex flex-lg-row flex-column px-3" style="width:100%">
-			<Col md="4">
+			<Col md="7">
 				<header>
 					<div class="d-flex flex-row justify-content-start mt-2 title">
 						<slot name="title" />

package/components/Sidebar/MenuGroup.svelte

@@ -99,10 +99,13 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   .box a {
     color: #ffffff;
   }
+  .active {
+    background-color: #3A736D !important;
+  }
 }
 .active {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }</style>

package/components/Sidebar/MenuItem.svelte

@@ -8,7 +8,7 @@
 
 <li class="nav-item  p-2 box {active ? "active" : ""}">
 	<a
-		class="nav-link d-flex align-items-center gap-2"
+		class="nav-link d-flex align-items-center gap-2 flex-grow-1"
 		aria-current="page"
 		href={link}
 		on:click
@@ -112,11 +112,14 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   .box a {
     color: #ffffff;
   }
+  .active {
+    background-color: #3A736D !important;
+  }
 }
 .active {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }</style>
 

package/components/Sidebar/SideBarMenu.svelte

@@ -122,12 +122,15 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   .box a {
     color: #ffffff;
   }
+  .active {
+    background-color: #3A736D !important;
+  }
 }
 .active {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }
 @media (min-width: 768px) {
   .sidebar .offcanvas-lg {

package/components/Sidebar/Sidebar.scss

@@ -138,10 +138,15 @@ ul {
   .box a{
     color: #ffffff;
   }
+
+  .active{
+    background-color: #3A736D !important;
+   }
 }
+
 .active{
  background-color: #ddf9f6;
 }
 #sidebarMenu{
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }

package/components/Sidebar/Sidebar.svelte

@@ -175,12 +175,15 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
   .box a {
     color: #ffffff;
   }
+  .active {
+    background-color: #3A736D !important;
+  }
 }
 .active {
   background-color: #ddf9f6;
 }
 #sidebarMenu {
-  min-height: calc(100vh - 112px);
+  min-height: calc(100vh - 130px);
 }
 :global(.ebg-none) {
   background-color: #ffffff !important;

package/components/WidgetCard/Card.scss

@@ -68,14 +68,14 @@
     .statecardtitle {
         font-weight: 400;
         float: right;
-        width: max-content;
+        width: 50%;
     }
 
     .subtitle {
         float: left;
         font-size: 16px;
         font-weight: 400;
-        width: max-content;
+        width: 100%;
     }
 
     .time {

package/components/WidgetCard/SensorStatusCard.svelte

@@ -92,13 +92,13 @@
 .statecardtitle {
   font-weight: 400;
   float: right;
-  width: max-content;
+  width: 50%;
 }
 .subtitle {
   float: left;
   font-size: 16px;
   font-weight: 400;
-  width: max-content;
+  width: 100%;
 }
 .time {
   float: right;

package/components/WidgetCard/StateCard.svelte

@@ -16,13 +16,13 @@
     </Col>
             <Col>
         <div class="content">
-            <div class="statecardtitle">{title}</div>
+            <div class="statecardtitle text-truncate">{title}</div>
         </div>
     </Col>
 </Row>
 <Row>
     <Col>
-        <div class="subtitle">{subtitle}</div>
+        <div class="subtitle text-truncate">{subtitle}</div>
     </Col>
             <Col> <div class="time mt-1">{time}</div>
     </Col>
@@ -95,13 +95,13 @@
 .statecardtitle {
   font-weight: 400;
   float: right;
-  width: max-content;
+  width: 50%;
 }
 .subtitle {
   float: left;
   font-size: 16px;
   font-weight: 400;
-  width: max-content;
+  width: 100%;
 }
 .time {
   float: right;

package/components/WidgetCard/WidgetCard.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { onMount } from 'svelte';
 	import { Col, Row } from 'sveltestrap';
 	export let title;
 	export let resizable = false;
@@ -17,18 +16,6 @@
 			cardLength /= 2;
 			console.log(cardLength);
 		}
-		// if (!maximized) {
-		// 	element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
-		// 	if (!widthOnly) {
-		// 		element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
-		// 	}
-
-		// 	return;
-		// }
-		// element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
-		// if (!widthOnly) {
-		// 	element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
-		// }
 	};
 </script>
 
@@ -37,11 +24,11 @@
 		<div bind:this={element}>
 			<div class="m-2 card">
 				<Row>
-					<Col>
+					<Col md=10>
 						<div class="title fw-normal">{title}</div>
 					</Col>
 					{#if resizable}
-						<Col>
+						<Col md=2>
 							<div class="float-end">
 								<i on:click={toggleMaximize} class="material-icons"
 									>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
@@ -125,13 +112,13 @@
 .statecardtitle {
   font-weight: 400;
   float: right;
-  width: max-content;
+  width: 50%;
 }
 .subtitle {
   float: left;
   font-size: 16px;
   font-weight: 400;
-  width: max-content;
+  width: 100%;
 }
 .time {
   float: right;
@@ -150,4 +137,4 @@
   color: #c9443a;
   padding: 5px 10px;
   border-radius: 5px;
-}</style>
+}</style>

package/components/WidgetCard/WidgetCardBody.svelte

@@ -1,7 +1,8 @@
 <script>
+	export let className = "";
 </script>
 
-<div class="widget-card-body">
+<div class="widget-card-body card-height {className}">
 	<slot />
 </div>
 
@@ -10,4 +11,8 @@
 		width: 100%;
 		position: relative;
 	}
+	.card-height { 
+		height: 350px;
+		overflow: auto;
+	}
 </style>

package/components/WidgetCard/WidgetCardBody.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  WidgetCardBodyEvents */
 /** @typedef {typeof __propDef.slots}  WidgetCardBodySlots */
 export default class WidgetCardBody extends SvelteComponentTyped<{
-    [x: string]: never;
+    className?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type WidgetCardBodySlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        className?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -81,6 +81,7 @@
     "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
     "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
     "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
+    "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
     "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
     "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",