@enki-tek/fms-web-components 0.1.25 → 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/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.25",
+  "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",