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

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

@@ -4,27 +4,22 @@
 	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 options = {};
 
-	// Register all necessary components
 	Chart.register(...registerables);
 
 	let chart;
 	let canvas;
 
-
 	onMount(() => {
 		const ctx = canvas.getContext('2d');
 		chart = new Chart(ctx, {
-			type: 'line', // Change this to 'bar' for a bar chart
-			data: getChartData({ data, label, config }),
+			type: type, // Change this to 'bar' for a bar chart
+			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/chartOptions.d.ts

@@ -46,12 +46,5 @@ export function getChartData({ data, label, config }: {
     config: any;
 }): {
     labels: string[];
-    datasets: {
-        label: any;
-        data: any[];
-        backgroundColor: string[];
-        borderColor: string[];
-        borderWidth: number;
-        tension: number;
-    }[];
+    datasets: any[];
 };

package/components/Charts/chartOptions.js

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

package/index.d.ts

@@ -70,10 +70,6 @@ import StatusCardTitle from './components/StatusCard/StatusCardTitle.svelte';
 import StateCard from './components/WidgetCard/StateCard.svelte';
 import WidgetCard from './components/WidgetCard/WidgetCard.svelte';
 import WidgetCardBody from './components/WidgetCard/WidgetCardBody.svelte';
-import DoughnutChart from './components/Charts/DoughnutChart.svelte';
-import PieChart from './components/Charts/PieChart.svelte';
-import BarChart from './components/Charts/Barchart.svelte';
-import LineChart from './components/Charts/LineChart.svelte';
 import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
 import SensorWidgetBody from './components/WidgetCard/SensorWidgetBody.svelte';
 import SensorWidgetTitle from './components/WidgetCard/SensorWidgetTitle.svelte';
@@ -83,6 +79,8 @@ 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 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 };
+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, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard, Graph, getChartData, chartOptions, getChartColors };
 export default i18nInit;

package/index.js

@@ -71,10 +71,6 @@ import StatusCardTitle from './components/StatusCard/StatusCardTitle.svelte';
 import StateCard from './components/WidgetCard/StateCard.svelte';
 import WidgetCard from './components/WidgetCard/WidgetCard.svelte';
 import WidgetCardBody from './components/WidgetCard/WidgetCardBody.svelte';
-import DoughnutChart from './components/Charts/DoughnutChart.svelte';
-import PieChart from './components/Charts/PieChart.svelte';
-import BarChart from './components/Charts/Barchart.svelte';
-import LineChart from './components/Charts/LineChart.svelte';
 import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
 import SensorWidgetBody from './components/WidgetCard/SensorWidgetBody.svelte';
 import SensorWidgetTitle from './components/WidgetCard/SensorWidgetTitle.svelte';
@@ -84,6 +80,8 @@ 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 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 };
+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, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard, Graph, getChartData, chartOptions, getChartColors };
 export default i18nInit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.27",
+  "version": "0.1.29",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -77,11 +77,7 @@
     "./components/CardIcon/CardiconBody.svelte": "./components/CardIcon/CardiconBody.svelte",
     "./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/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/Graph.svelte": "./components/Charts/Graph.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/Barchart.svelte

@@ -1,46 +0,0 @@
-<!-- src/BarChart.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');
-		chart = new Chart(ctx, {
-			type: 'bar', // Set chart type to 'bar'
-			data: getChartData({ data, label }),
-			options: { ...chartOptions, options },
-		});
-	});
-
-	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

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  BarchartProps */
-/** @typedef {typeof __propDef.events}  BarchartEvents */
-/** @typedef {typeof __propDef.slots}  BarchartSlots */
-export default class Barchart 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 BarchartProps = typeof __propDef.props;
-export type BarchartEvents = typeof __propDef.events;
-export type BarchartSlots = 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/DoughnutChart.svelte

@@ -1,45 +0,0 @@
-<!-- src/PieChart.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');
-		chart = new Chart(ctx, {
-			type: 'doughnut',
-			data: getChartData({ data, label }),
-			options: { ...chartOptions, ...options }
-		});
-	});
-
-	onDestroy(() => {
-		if (chart) {
-			chart.destroy();
-		}
-	});
-</script>
-
-<canvas bind:this={canvas} {width} {height} />
-
-<style>
-	canvas {
-		max-width: 100%;
-		height: auto; /* Ensures the canvas takes the full height of the container */
-	}
-</style>

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

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  DoughnutChartProps */
-/** @typedef {typeof __propDef.events}  DoughnutChartEvents */
-/** @typedef {typeof __propDef.slots}  DoughnutChartSlots */
-export default class DoughnutChart 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 DoughnutChartProps = typeof __propDef.props;
-export type DoughnutChartEvents = typeof __propDef.events;
-export type DoughnutChartSlots = 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/LineChart.svelte.d.ts

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  LineChartProps */
-/** @typedef {typeof __propDef.events}  LineChartEvents */
-/** @typedef {typeof __propDef.slots}  LineChartSlots */
-export default class LineChart 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 LineChartProps = typeof __propDef.props;
-export type LineChartEvents = typeof __propDef.events;
-export type LineChartSlots = 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/PieChart.svelte

@@ -1,51 +0,0 @@
-<!-- src/PieChart.svelte -->
-<script>
-	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 = '';
-	export let width = 300;
-	export let height = 300;
-	export let config = {
-		colorCount : 1,
-	}
-	export let options = {};
-
-	// Register all necessary components
-	Chart.register(...registerables);
-	Chart.register(ChartDataLabels);
-	let chart;
-	let canvas;
-
-
-	onMount(() => {
-		// console.log(chartData);
-		const ctx = canvas.getContext('2d');
-		chart = new Chart(ctx, {
-			type: 'pie', // Set chart type to 'pie'
-			data: getChartData({ data, label }),
-			options: { ...chartOptions, ...options }
-		});
-	});
-
-	onDestroy(() => {
-		if (chart) {
-			chart.destroy();
-		}
-	});
-</script>
-
-<canvas bind:this={canvas} {width} {height} />
-
-<style>
-	canvas {
-		max-width: 100%;
-		height: auto; /* Ensures the canvas takes the full height of the container */
-	}
-</style>

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

@@ -1,37 +0,0 @@
-/** @typedef {typeof __propDef.props}  PieChartProps */
-/** @typedef {typeof __propDef.events}  PieChartEvents */
-/** @typedef {typeof __propDef.slots}  PieChartSlots */
-export default class PieChart 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 PieChartProps = typeof __propDef.props;
-export type PieChartEvents = typeof __propDef.events;
-export type PieChartSlots = 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/StepChart.svelte

@@ -1,49 +0,0 @@
-<!-- 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

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