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

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/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/{Chart.svelte → StepChart.svelte}

@@ -11,8 +11,7 @@
 	export let config = {
 		colorCount: 1
 	};
-	export let type = 'line';
-
+	export let options = {};
 	// Register all necessary components
 	Chart.register(...registerables);
 
@@ -21,10 +20,14 @@
 
 	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: type, // Change this to 'bar' for a bar chart
-			data: getChartData({ data, label, config }),
-			options: chartOptions
+			type: 'line', // Change this to 'bar' for a bar chart
+			data: chartData,
+			options: { ...chartOptions, ...options }
 		});
 	});
 

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,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';
-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';
+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 };
 export default i18nInit;

package/index.js

@@ -84,6 +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';
-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';
+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 };
 export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -78,10 +78,10 @@
     "./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",
+    "./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 {};