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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/components/Charts/Barchart.svelte +3 -1
  2. package/components/Charts/Barchart.svelte.d.ts +2 -0
  3. package/components/Charts/DoughnutChart.svelte +2 -1
  4. package/components/Charts/DoughnutChart.svelte.d.ts +2 -0
  5. package/components/Charts/LineChart.svelte +2 -1
  6. package/components/Charts/LineChart.svelte.d.ts +2 -0
  7. package/components/Charts/PieChart.svelte +2 -1
  8. package/components/Charts/PieChart.svelte.d.ts +2 -0
  9. package/components/Charts/StepChart.svelte +49 -0
  10. package/components/Charts/StepChart.svelte.d.ts +37 -0
  11. package/components/Charts/chartOptions.js +1 -1
  12. package/index.d.ts +2 -1
  13. package/index.js +2 -1
  14. package/package.json +2 -1
package/components/Charts/Barchart.svelte CHANGED
@@ -12,6 +12,8 @@
12
12
  colorCount: 1
13
13
  };
14
14
 
15
+ export let options = {};
16
+
15
17
  // Register all necessary components
16
18
  Chart.register(...registerables);
17
19
 
@@ -23,7 +25,7 @@
23
25
  chart = new Chart(ctx, {
24
26
  type: 'bar', // Set chart type to 'bar'
25
27
  data: getChartData({ data, label }),
26
- options: chartOptions
28
+ options: { ...chartOptions, options },
27
29
  });
28
30
  });
29
31
 
package/components/Charts/Barchart.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ export default class Barchart extends SvelteComponentTyped<{
7
7
  } | undefined;
8
8
  label?: string | undefined;
9
9
  width?: number | undefined;
10
+ options?: {} | undefined;
10
11
  height?: number | undefined;
11
12
  data?: {} | undefined;
12
13
  }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
24
25
  } | undefined;
25
26
  label?: string | undefined;
26
27
  width?: number | undefined;
28
+ options?: {} | undefined;
27
29
  height?: number | undefined;
28
30
  data?: {} | undefined;
29
31
  };
package/components/Charts/DoughnutChart.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  export let config = {
12
12
  colorCount : 1,
13
13
  }
14
+ export let options = {};
14
15
 
15
16
  // Register all necessary components
16
17
  Chart.register(...registerables);
@@ -23,7 +24,7 @@
23
24
  chart = new Chart(ctx, {
24
25
  type: 'doughnut',
25
26
  data: getChartData({ data, label }),
26
- options: chartOptions
27
+ options: { ...chartOptions, ...options }
27
28
  });
28
29
  });
29
30
 
package/components/Charts/DoughnutChart.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ export default class DoughnutChart extends SvelteComponentTyped<{
7
7
  } | undefined;
8
8
  label?: string | undefined;
9
9
  width?: number | undefined;
10
+ options?: {} | undefined;
10
11
  height?: number | undefined;
11
12
  data?: {} | undefined;
12
13
  }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
24
25
  } | undefined;
25
26
  label?: string | undefined;
26
27
  width?: number | undefined;
28
+ options?: {} | undefined;
27
29
  height?: number | undefined;
28
30
  data?: {} | undefined;
29
31
  };
package/components/Charts/LineChart.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  export let config = {
12
12
  colorCount : 1,
13
13
  }
14
+ export let options = {};
14
15
 
15
16
  // Register all necessary components
16
17
  Chart.register(...registerables);
@@ -24,7 +25,7 @@
24
25
  chart = new Chart(ctx, {
25
26
  type: 'line', // Change this to 'bar' for a bar chart
26
27
  data: getChartData({ data, label, config }),
27
- options: chartOptions
28
+ options: { ...chartOptions, ...options }
28
29
  });
29
30
  });
30
31
 
package/components/Charts/LineChart.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ export default class LineChart extends SvelteComponentTyped<{
7
7
  } | undefined;
8
8
  label?: string | undefined;
9
9
  width?: number | undefined;
10
+ options?: {} | undefined;
10
11
  height?: number | undefined;
11
12
  data?: {} | undefined;
12
13
  }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
24
25
  } | undefined;
25
26
  label?: string | undefined;
26
27
  width?: number | undefined;
28
+ options?: {} | undefined;
27
29
  height?: number | undefined;
28
30
  data?: {} | undefined;
29
31
  };
package/components/Charts/PieChart.svelte CHANGED
@@ -15,6 +15,7 @@
15
15
  export let config = {
16
16
  colorCount : 1,
17
17
  }
18
+ export let options = {};
18
19
 
19
20
  // Register all necessary components
20
21
  Chart.register(...registerables);
@@ -29,7 +30,7 @@
29
30
  chart = new Chart(ctx, {
30
31
  type: 'pie', // Set chart type to 'pie'
31
32
  data: getChartData({ data, label }),
32
- options: chartOptions
33
+ options: { ...chartOptions, ...options }
33
34
  });
34
35
  });
35
36
 
package/components/Charts/PieChart.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ export default class PieChart extends SvelteComponentTyped<{
7
7
  } | undefined;
8
8
  label?: string | undefined;
9
9
  width?: number | undefined;
10
+ options?: {} | undefined;
10
11
  height?: number | undefined;
11
12
  data?: {} | undefined;
12
13
  }, {
@@ -24,6 +25,7 @@ declare const __propDef: {
24
25
  } | undefined;
25
26
  label?: string | undefined;
26
27
  width?: number | undefined;
28
+ options?: {} | undefined;
27
29
  height?: number | undefined;
28
30
  data?: {} | undefined;
29
31
  };
package/components/Charts/StepChart.svelte ADDED
@@ -0,0 +1,49 @@
1
+ <!-- src/MyChart.svelte -->
2
+ <script>
3
+ import { Chart, registerables } from 'chart.js';
4
+ import { onDestroy, onMount } from 'svelte';
5
+ import { chartOptions, getChartData } from './chartOptions';
6
+
7
+ export let data = {};
8
+ export let label = '';
9
+ export let width = 200;
10
+ export let height = 200;
11
+ export let config = {
12
+ colorCount: 1
13
+ };
14
+ export let options = {};
15
+ // Register all necessary components
16
+ Chart.register(...registerables);
17
+
18
+ let chart;
19
+ let canvas;
20
+
21
+ onMount(() => {
22
+ const ctx = canvas.getContext('2d');
23
+ let chartData = getChartData({ data, label, config });
24
+ chartData.datasets[0].stepped = true;
25
+ chartData.datasets[0].tension = 0;
26
+ chartData.datasets[0].fill = 0;
27
+ chart = new Chart(ctx, {
28
+ type: 'line', // Change this to 'bar' for a bar chart
29
+ data: chartData,
30
+ options: { ...chartOptions, ...options }
31
+ });
32
+ });
33
+
34
+ // Cleanup when component is destroyed
35
+ onDestroy(() => {
36
+ if (chart) {
37
+ chart.destroy();
38
+ }
39
+ });
40
+ </script>
41
+
42
+ <canvas bind:this={canvas} {width} {height} />
43
+
44
+ <style>
45
+ canvas {
46
+ max-width: 100%;
47
+ height: auto;
48
+ }
49
+ </style>
package/components/Charts/StepChart.svelte.d.ts ADDED
@@ -0,0 +1,37 @@
1
+ /** @typedef {typeof __propDef.props} StepChartProps */
2
+ /** @typedef {typeof __propDef.events} StepChartEvents */
3
+ /** @typedef {typeof __propDef.slots} StepChartSlots */
4
+ export default class StepChart extends SvelteComponentTyped<{
5
+ config?: {
6
+ colorCount: number;
7
+ } | undefined;
8
+ label?: string | undefined;
9
+ width?: number | undefined;
10
+ options?: {} | undefined;
11
+ height?: number | undefined;
12
+ data?: {} | undefined;
13
+ }, {
14
+ [evt: string]: CustomEvent<any>;
15
+ }, {}> {
16
+ }
17
+ export type StepChartProps = typeof __propDef.props;
18
+ export type StepChartEvents = typeof __propDef.events;
19
+ export type StepChartSlots = typeof __propDef.slots;
20
+ import { SvelteComponentTyped } from "svelte";
21
+ declare const __propDef: {
22
+ props: {
23
+ config?: {
24
+ colorCount: number;
25
+ } | undefined;
26
+ label?: string | undefined;
27
+ width?: number | undefined;
28
+ options?: {} | undefined;
29
+ height?: number | undefined;
30
+ data?: {} | undefined;
31
+ };
32
+ events: {
33
+ [evt: string]: CustomEvent<any>;
34
+ };
35
+ slots: {};
36
+ };
37
+ export {};
package/components/Charts/chartOptions.js CHANGED
@@ -62,7 +62,7 @@ export const getChartData = ({ data, label, config }) => {
62
62
  backgroundColor: getChartColors(config?.colorCount),
63
63
  borderColor: getChartColors(config?.colorCount),
64
64
  borderWidth: 1,
65
- tension: 0.1
65
+ tension: 0.1,
66
66
  }
67
67
  ],
68
68
  };
package/index.d.ts CHANGED
@@ -83,5 +83,6 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
83
83
  import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
84
84
  import PlainCard from './components/StatusCard/PlainCard.svelte';
85
85
  import GrayCard from './components/StatusCard/GrayCard.svelte';
86
- 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 };
86
+ import StepChart from './components/Charts/StepChart.svelte';
87
+ 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 };
87
88
  export default i18nInit;
package/index.js CHANGED
@@ -84,5 +84,6 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
84
84
  import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
85
85
  import PlainCard from './components/StatusCard/PlainCard.svelte';
86
86
  import GrayCard from './components/StatusCard/GrayCard.svelte';
87
- 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 };
87
+ import StepChart from './components/Charts/StepChart.svelte';
88
+ 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 };
88
89
  export default i18nInit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.1.25",
3
+ "version": "0.1.27",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -81,6 +81,7 @@
81
81
  "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
82
82
  "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
83
83
  "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
84
+ "./components/Charts/StepChart.svelte": "./components/Charts/StepChart.svelte",
84
85
  "./components/Charts/chartColors": "./components/Charts/chartColors.js",
85
86
  "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
86
87
  "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",