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

Sign up to get free protection for your applications and to get access to all the features.
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",