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

package/components/Charts/Barchart.svelte

@@ -12,6 +12,8 @@
 		colorCount: 1
 	};
 
+	export let options = {};
+
 	// Register all necessary components
 	Chart.register(...registerables);
 
@@ -23,7 +25,7 @@
 		chart = new Chart(ctx, {
 			type: 'bar', // Set chart type to 'bar'
 			data: getChartData({ data, label }),
-			options: chartOptions
+			options: { ...chartOptions, options },
 		});
 	});
 

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

@@ -7,6 +7,7 @@ export default class Barchart extends SvelteComponentTyped<{
     } | undefined;
     label?: string | undefined;
     width?: number | undefined;
+    options?: {} | undefined;
     height?: number | undefined;
     data?: {} | undefined;
 }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
         } | undefined;
         label?: string | undefined;
         width?: number | undefined;
+        options?: {} | undefined;
         height?: number | undefined;
         data?: {} | undefined;
     };

package/components/Charts/DoughnutChart.svelte

@@ -11,6 +11,7 @@
 	export let config = {
 		colorCount : 1,
 	}
+	export let options = {};
 
 	// Register all necessary components
 	Chart.register(...registerables);
@@ -23,7 +24,7 @@
 		chart = new Chart(ctx, {
 			type: 'doughnut',
 			data: getChartData({ data, label }),
-			options: chartOptions
+			options: { ...chartOptions, ...options }
 		});
 	});
 

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

@@ -7,6 +7,7 @@ export default class DoughnutChart extends SvelteComponentTyped<{
     } | undefined;
     label?: string | undefined;
     width?: number | undefined;
+    options?: {} | undefined;
     height?: number | undefined;
     data?: {} | undefined;
 }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
         } | undefined;
         label?: string | undefined;
         width?: number | undefined;
+        options?: {} | undefined;
         height?: number | undefined;
         data?: {} | undefined;
     };

package/components/Charts/{Chart.svelte → Graph.svelte}

@@ -4,16 +4,12 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { chartOptions, getChartData } from './chartOptions';
 
+	export let type = 'line';
 	export let data = {};
-	export let label = '';
 	export let width = 200;
 	export let height = 200;
-	export let config = {
-		colorCount: 1
-	};
-	export let type = 'line';
+	export let options = {};
 
-	// Register all necessary components
 	Chart.register(...registerables);
 
 	let chart;
@@ -23,8 +19,8 @@
 		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
+			data: data,
+			options: { ...chartOptions, ...options }
 		});
 	});
 

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

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  GraphProps */
+/** @typedef {typeof __propDef.events}  GraphEvents */
+/** @typedef {typeof __propDef.slots}  GraphSlots */
+export default class Graph extends SvelteComponentTyped<{
+    type?: string | undefined;
+    width?: number | undefined;
+    options?: {} | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GraphProps = typeof __propDef.props;
+export type GraphEvents = typeof __propDef.events;
+export type GraphSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        width?: number | undefined;
+        options?: {} | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Charts/LineChart.svelte

@@ -11,6 +11,7 @@
 	export let config = {
 		colorCount : 1,
 	}
+	export let options = {};
 
 	// Register all necessary components
 	Chart.register(...registerables);
@@ -24,7 +25,7 @@
 		chart = new Chart(ctx, {
 			type: 'line', // Change this to 'bar' for a bar chart
 			data: getChartData({ data, label, config }),
-			options: chartOptions
+			options: { ...chartOptions, ...options }
 		});
 	});
 

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

@@ -7,6 +7,7 @@ export default class LineChart extends SvelteComponentTyped<{
     } | undefined;
     label?: string | undefined;
     width?: number | undefined;
+    options?: {} | undefined;
     height?: number | undefined;
     data?: {} | undefined;
 }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
         } | undefined;
         label?: string | undefined;
         width?: number | undefined;
+        options?: {} | undefined;
         height?: number | undefined;
         data?: {} | undefined;
     };

package/components/Charts/PieChart.svelte

@@ -15,6 +15,7 @@
 	export let config = {
 		colorCount : 1,
 	}
+	export let options = {};
 
 	// Register all necessary components
 	Chart.register(...registerables);
@@ -29,7 +30,7 @@
 		chart = new Chart(ctx, {
 			type: 'pie', // Set chart type to 'pie'
 			data: getChartData({ data, label }),
-			options: chartOptions
+			options: { ...chartOptions, ...options }
 		});
 	});
 

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

@@ -7,6 +7,7 @@ export default class PieChart extends SvelteComponentTyped<{
     } | undefined;
     label?: string | undefined;
     width?: number | undefined;
+    options?: {} | undefined;
     height?: number | undefined;
     data?: {} | undefined;
 }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
         } | undefined;
         label?: string | undefined;
         width?: number | undefined;
+        options?: {} | undefined;
         height?: number | undefined;
         data?: {} | undefined;
     };

package/components/Charts/StepChart.svelte

@@ -0,0 +1,49 @@
+<!-- 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 options = {};
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let chartData = getChartData({ data, label, config });
+		chartData.datasets[0].stepped = true;
+		chartData.datasets[0].tension = 0;
+		chartData.datasets[0].fill = 0;
+		chart = new Chart(ctx, {
+			type: 'line', // Change this to 'bar' for a bar chart
+			data: chartData,
+			options: { ...chartOptions, ...options }
+		});
+	});
+
+	// 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/StepChart.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  StepChartProps */
+/** @typedef {typeof __propDef.events}  StepChartEvents */
+/** @typedef {typeof __propDef.slots}  StepChartSlots */
+export default class StepChart extends SvelteComponentTyped<{
+    config?: {
+        colorCount: number;
+    } | undefined;
+    label?: string | undefined;
+    width?: number | undefined;
+    options?: {} | undefined;
+    height?: number | undefined;
+    data?: {} | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StepChartProps = typeof __propDef.props;
+export type StepChartEvents = typeof __propDef.events;
+export type StepChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        config?: {
+            colorCount: number;
+        } | undefined;
+        label?: string | undefined;
+        width?: number | undefined;
+        options?: {} | undefined;
+        height?: number | undefined;
+        data?: {} | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Charts/chartOptions.js

@@ -62,7 +62,7 @@ export const getChartData = ({ data, label, config }) => {
                 backgroundColor: getChartColors(config?.colorCount),
                 borderColor: getChartColors(config?.colorCount),
                 borderWidth: 1,
-                tension: 0.1
+                tension: 0.1,
             }
         ],
     };

package/index.d.ts

@@ -83,6 +83,9 @@ 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';
-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 };
+import StepChart from './components/Charts/StepChart.svelte';
+import Graph from './components/Charts/Graph.svelte';
+import { getChartData, chartOptions } from './components/Charts/chartOptions';
+import { getChartColors } from './components/Charts/chartColors';
+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, StepChart, Graph, getChartData, chartOptions, getChartColors };
 export default i18nInit;

package/index.js

@@ -84,6 +84,9 @@ 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';
-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 };
+import StepChart from './components/Charts/StepChart.svelte';
+import Graph from './components/Charts/Graph.svelte';
+import { getChartData, chartOptions } from './components/Charts/chartOptions';
+import { getChartColors } from './components/Charts/chartColors';
+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, StepChart, Graph, getChartData, chartOptions, getChartColors };
 export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -78,10 +78,11 @@
     "./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/Graph.svelte": "./components/Charts/Graph.svelte",
     "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
     "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
+    "./components/Charts/StepChart.svelte": "./components/Charts/StepChart.svelte",
     "./components/Charts/chartColors": "./components/Charts/chartColors.js",
     "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",

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

@@ -1,17 +0,0 @@
-/** @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 {};