@enki-tek/fms-web-components 0.1.24 → 0.1.26

package/components/Charts/Chart.svelte

@@ -0,0 +1,46 @@
+<!-- src/MyChart.svelte -->
+<script>
+	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;
+	export let config = {
+		colorCount: 1
+	};
+	export let type = 'line';
+
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: type, // Change this to 'bar' for a bar chart
+			data: getChartData({ data, label, config }),
+			options: chartOptions
+		});
+	});
+
+	// Cleanup when component is destroyed
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+/** @typedef {typeof __propDef.props}  ChartProps */
+/** @typedef {typeof __propDef.events}  ChartEvents */
+/** @typedef {typeof __propDef.slots}  ChartSlots */
+export default class Chart {
+    constructor();
+}
+export type ChartProps = typeof __propDef.props;
+export type ChartEvents = typeof __propDef.events;
+export type ChartSlots = typeof __propDef.slots;
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/WidgetCard/BadgeCard.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <span class="{status == 'active' ? "completed-tag" : (status == 'inactive' ? "inactive-tag" : 
-(status == 'warning' ? "progress-tag" : "overdue-tag")) } badge fw-normal"> {title}</span>
+(status == 'warning' ? "progress-tag" : "overdue-tag")) } badge "> {title}</span>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

package/components/WidgetCard/SensorWidgetData.svelte

@@ -3,9 +3,12 @@
 	export let subtitle;
 </script>
 
-<div class="column py-2 ">
+<div class="column py-2">
 	<div class="text-black-50">{title}</div>
-	<div class="text-dark fs-6">{subtitle}</div>
+	<div class="text-dark fs-6">
+		{subtitle}
+		<slot />
+	</div>
 </div>
 
 <style>

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

@@ -6,7 +6,9 @@ export default class SensorWidgetData extends SvelteComponentTyped<{
     subtitle: any;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    default: {};
+}> {
 }
 export type SensorWidgetDataProps = typeof __propDef.props;
 export type SensorWidgetDataEvents = typeof __propDef.events;
@@ -20,6 +22,8 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export {};

package/index.d.ts

@@ -83,5 +83,6 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
 import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
 import PlainCard from './components/StatusCard/PlainCard.svelte';
 import GrayCard from './components/StatusCard/GrayCard.svelte';
-export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard };
+import Chart from './components/Charts/Chart.svelte';
+export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard, Chart };
 export default i18nInit;

package/index.js

@@ -84,5 +84,6 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
 import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
 import PlainCard from './components/StatusCard/PlainCard.svelte';
 import GrayCard from './components/StatusCard/GrayCard.svelte';
-export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard };
+import Chart from './components/Charts/Chart.svelte';
+export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard, Chart };
 export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -78,6 +78,7 @@
     "./components/CardIcon/CardiconSubtitle.svelte": "./components/CardIcon/CardiconSubtitle.svelte",
     "./components/CardIcon/CardiconTitle.svelte": "./components/CardIcon/CardiconTitle.svelte",
     "./components/Charts/Barchart.svelte": "./components/Charts/Barchart.svelte",
+    "./components/Charts/Chart.svelte": "./components/Charts/Chart.svelte",
     "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
     "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
     "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",