@enki-tek/fms-web-components 0.1.28 → 0.1.30

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.
@@ -46,12 +46,5 @@ export function getChartData({ data, label, config }: {
46
46
  config: any;
47
47
  }): {
48
48
  labels: string[];
49
- datasets: {
50
- label: any;
51
- data: any[];
52
- backgroundColor: string[];
53
- borderColor: string[];
54
- borderWidth: number;
55
- tension: number;
56
- }[];
49
+ datasets: any[];
57
50
  };
@@ -59,10 +59,11 @@ export const getChartData = ({ data, label, config }) => {
59
59
  {
60
60
  label: label,
61
61
  data: getChartValuesFromData(data),
62
- backgroundColor: getChartColors(config?.colorCount),
63
- borderColor: getChartColors(config?.colorCount),
64
- borderWidth: 1,
65
- tension: 0.1,
62
+ ...config
63
+ // backgroundColor: getChartColors(config?.colorCount),
64
+ // borderColor: getChartColors(config?.colorCount),
65
+ // borderWidth: 1,
66
+ // tension: 0.1,
66
67
  }
67
68
  ],
68
69
  };
@@ -109,5 +109,4 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
109
109
  #sidebarMenu {
110
110
  height: calc(100vh - 146px);
111
111
  overflow: auto;
112
- border-radius: 0.75rem;
113
112
  }</style>
@@ -122,6 +122,5 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
122
122
  #sidebarMenu {
123
123
  height: calc(100vh - 146px);
124
124
  overflow: auto;
125
- border-radius: 0.75rem;
126
125
  }</style>
127
126
 
@@ -5,9 +5,9 @@
5
5
  export let companyName = 'EnkiTek';
6
6
  </script>
7
7
 
8
- <div class="sidebar pe-0" >
8
+ <div class="sidebar pe-0">
9
9
  <div
10
- class="offcanvas-md offcanvas-end bg-white"
10
+ class="offcanvas-md offcanvas-end bg-white rounded-3"
11
11
  tabindex="-1"
12
12
  id="sidebarMenu"
13
13
  aria-labelledby="sidebarMenuLabel"
@@ -132,7 +132,6 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
132
132
  #sidebarMenu {
133
133
  height: calc(100vh - 146px);
134
134
  overflow: auto;
135
- border-radius: 0.75rem;
136
135
  }
137
136
  @media (min-width: 768px) {
138
137
  .sidebar .offcanvas-lg {
@@ -153,5 +153,4 @@ ul {
153
153
  #sidebarMenu {
154
154
  height: calc(100vh - 146px);
155
155
  overflow: auto;
156
- border-radius: .75rem;
157
156
  }
@@ -185,7 +185,6 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
185
185
  #sidebarMenu {
186
186
  height: calc(100vh - 146px);
187
187
  overflow: auto;
188
- border-radius: 0.75rem;
189
188
  }
190
189
  :global(.ebg-none) {
191
190
  background-color: #ffffff !important;
package/index.d.ts CHANGED
@@ -70,10 +70,6 @@ import StatusCardTitle from './components/StatusCard/StatusCardTitle.svelte';
70
70
  import StateCard from './components/WidgetCard/StateCard.svelte';
71
71
  import WidgetCard from './components/WidgetCard/WidgetCard.svelte';
72
72
  import WidgetCardBody from './components/WidgetCard/WidgetCardBody.svelte';
73
- import DoughnutChart from './components/Charts/DoughnutChart.svelte';
74
- import PieChart from './components/Charts/PieChart.svelte';
75
- import BarChart from './components/Charts/Barchart.svelte';
76
- import LineChart from './components/Charts/LineChart.svelte';
77
73
  import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
78
74
  import SensorWidgetBody from './components/WidgetCard/SensorWidgetBody.svelte';
79
75
  import SensorWidgetTitle from './components/WidgetCard/SensorWidgetTitle.svelte';
@@ -83,9 +79,8 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
83
79
  import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
84
80
  import PlainCard from './components/StatusCard/PlainCard.svelte';
85
81
  import GrayCard from './components/StatusCard/GrayCard.svelte';
86
- import StepChart from './components/Charts/StepChart.svelte';
87
82
  import Graph from './components/Charts/Graph.svelte';
88
83
  import { getChartData, chartOptions } from './components/Charts/chartOptions';
89
84
  import { getChartColors } from './components/Charts/chartColors';
90
- 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, Graph, getChartData, chartOptions, getChartColors };
85
+ 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 };
91
86
  export default i18nInit;
package/index.js CHANGED
@@ -71,10 +71,6 @@ import StatusCardTitle from './components/StatusCard/StatusCardTitle.svelte';
71
71
  import StateCard from './components/WidgetCard/StateCard.svelte';
72
72
  import WidgetCard from './components/WidgetCard/WidgetCard.svelte';
73
73
  import WidgetCardBody from './components/WidgetCard/WidgetCardBody.svelte';
74
- import DoughnutChart from './components/Charts/DoughnutChart.svelte';
75
- import PieChart from './components/Charts/PieChart.svelte';
76
- import BarChart from './components/Charts/Barchart.svelte';
77
- import LineChart from './components/Charts/LineChart.svelte';
78
74
  import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
79
75
  import SensorWidgetBody from './components/WidgetCard/SensorWidgetBody.svelte';
80
76
  import SensorWidgetTitle from './components/WidgetCard/SensorWidgetTitle.svelte';
@@ -84,9 +80,8 @@ import BadgeCard from './components/WidgetCard/BadgeCard.svelte';
84
80
  import AlertFooter from './components/WidgetCard/AlertFooter.svelte';
85
81
  import PlainCard from './components/StatusCard/PlainCard.svelte';
86
82
  import GrayCard from './components/StatusCard/GrayCard.svelte';
87
- import StepChart from './components/Charts/StepChart.svelte';
88
83
  import Graph from './components/Charts/Graph.svelte';
89
84
  import { getChartData, chartOptions } from './components/Charts/chartOptions';
90
85
  import { getChartColors } from './components/Charts/chartColors';
91
- 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, Graph, getChartData, chartOptions, getChartColors };
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, SensorWidgetBody, SensorWidgetTitle, SensorWidgetData, SensorWidgetFooter, BadgeCard, AlertFooter, PlainCard, GrayCard, Graph, getChartData, chartOptions, getChartColors };
92
87
  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.28",
3
+ "version": "0.1.30",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -77,12 +77,7 @@
77
77
  "./components/CardIcon/CardiconBody.svelte": "./components/CardIcon/CardiconBody.svelte",
78
78
  "./components/CardIcon/CardiconSubtitle.svelte": "./components/CardIcon/CardiconSubtitle.svelte",
79
79
  "./components/CardIcon/CardiconTitle.svelte": "./components/CardIcon/CardiconTitle.svelte",
80
- "./components/Charts/Barchart.svelte": "./components/Charts/Barchart.svelte",
81
- "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
82
80
  "./components/Charts/Graph.svelte": "./components/Charts/Graph.svelte",
83
- "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
84
- "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
85
- "./components/Charts/StepChart.svelte": "./components/Charts/StepChart.svelte",
86
81
  "./components/Charts/chartColors": "./components/Charts/chartColors.js",
87
82
  "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
88
83
  "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
@@ -1,46 +0,0 @@
1
- <!-- src/BarChart.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
-
15
- export let options = {};
16
-
17
- // Register all necessary components
18
- Chart.register(...registerables);
19
-
20
- let chart;
21
- let canvas;
22
-
23
- onMount(() => {
24
- const ctx = canvas.getContext('2d');
25
- chart = new Chart(ctx, {
26
- type: 'bar', // Set chart type to 'bar'
27
- data: getChartData({ data, label }),
28
- options: { ...chartOptions, options },
29
- });
30
- });
31
-
32
- onDestroy(() => {
33
- if (chart) {
34
- chart.destroy();
35
- }
36
- });
37
- </script>
38
-
39
- <canvas bind:this={canvas} {width} {height} />
40
-
41
- <style>
42
- canvas {
43
- max-width: 100%;
44
- height: 100%; /* Ensures the canvas takes the full height of the container */
45
- }
46
- </style>
@@ -1,37 +0,0 @@
1
- /** @typedef {typeof __propDef.props} BarchartProps */
2
- /** @typedef {typeof __propDef.events} BarchartEvents */
3
- /** @typedef {typeof __propDef.slots} BarchartSlots */
4
- export default class Barchart 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 BarchartProps = typeof __propDef.props;
18
- export type BarchartEvents = typeof __propDef.events;
19
- export type BarchartSlots = 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 {};
@@ -1,45 +0,0 @@
1
- <!-- src/PieChart.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
-
16
- // Register all necessary components
17
- Chart.register(...registerables);
18
-
19
- let chart;
20
- let canvas;
21
-
22
- onMount(() => {
23
- const ctx = canvas.getContext('2d');
24
- chart = new Chart(ctx, {
25
- type: 'doughnut',
26
- data: getChartData({ data, label }),
27
- options: { ...chartOptions, ...options }
28
- });
29
- });
30
-
31
- onDestroy(() => {
32
- if (chart) {
33
- chart.destroy();
34
- }
35
- });
36
- </script>
37
-
38
- <canvas bind:this={canvas} {width} {height} />
39
-
40
- <style>
41
- canvas {
42
- max-width: 100%;
43
- height: auto; /* Ensures the canvas takes the full height of the container */
44
- }
45
- </style>
@@ -1,37 +0,0 @@
1
- /** @typedef {typeof __propDef.props} DoughnutChartProps */
2
- /** @typedef {typeof __propDef.events} DoughnutChartEvents */
3
- /** @typedef {typeof __propDef.slots} DoughnutChartSlots */
4
- export default class DoughnutChart 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 DoughnutChartProps = typeof __propDef.props;
18
- export type DoughnutChartEvents = typeof __propDef.events;
19
- export type DoughnutChartSlots = 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 {};
@@ -1,47 +0,0 @@
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
-
16
- // Register all necessary components
17
- Chart.register(...registerables);
18
-
19
- let chart;
20
- let canvas;
21
-
22
-
23
- onMount(() => {
24
- const ctx = canvas.getContext('2d');
25
- chart = new Chart(ctx, {
26
- type: 'line', // Change this to 'bar' for a bar chart
27
- data: getChartData({ data, label, config }),
28
- options: { ...chartOptions, ...options }
29
- });
30
- });
31
-
32
- // Cleanup when component is destroyed
33
- onDestroy(() => {
34
- if (chart) {
35
- chart.destroy();
36
- }
37
- });
38
- </script>
39
-
40
- <canvas bind:this={canvas} {width} {height} />
41
-
42
- <style>
43
- canvas {
44
- max-width: 100%;
45
- height: auto;
46
- }
47
- </style>
@@ -1,37 +0,0 @@
1
- /** @typedef {typeof __propDef.props} LineChartProps */
2
- /** @typedef {typeof __propDef.events} LineChartEvents */
3
- /** @typedef {typeof __propDef.slots} LineChartSlots */
4
- export default class LineChart 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 LineChartProps = typeof __propDef.props;
18
- export type LineChartEvents = typeof __propDef.events;
19
- export type LineChartSlots = 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 {};
@@ -1,51 +0,0 @@
1
- <!-- src/PieChart.svelte -->
2
- <script>
3
- import { Chart, registerables } from 'chart.js';
4
- import ChartDataLabels from 'chartjs-plugin-datalabels';
5
- import { onDestroy, onMount } from 'svelte';
6
- import {
7
- chartOptions,
8
- getChartData
9
- } from './chartOptions';
10
-
11
- export let data = {};
12
- export let label = '';
13
- export let width = 300;
14
- export let height = 300;
15
- export let config = {
16
- colorCount : 1,
17
- }
18
- export let options = {};
19
-
20
- // Register all necessary components
21
- Chart.register(...registerables);
22
- Chart.register(ChartDataLabels);
23
- let chart;
24
- let canvas;
25
-
26
-
27
- onMount(() => {
28
- // console.log(chartData);
29
- const ctx = canvas.getContext('2d');
30
- chart = new Chart(ctx, {
31
- type: 'pie', // Set chart type to 'pie'
32
- data: getChartData({ data, label }),
33
- options: { ...chartOptions, ...options }
34
- });
35
- });
36
-
37
- onDestroy(() => {
38
- if (chart) {
39
- chart.destroy();
40
- }
41
- });
42
- </script>
43
-
44
- <canvas bind:this={canvas} {width} {height} />
45
-
46
- <style>
47
- canvas {
48
- max-width: 100%;
49
- height: auto; /* Ensures the canvas takes the full height of the container */
50
- }
51
- </style>
@@ -1,37 +0,0 @@
1
- /** @typedef {typeof __propDef.props} PieChartProps */
2
- /** @typedef {typeof __propDef.events} PieChartEvents */
3
- /** @typedef {typeof __propDef.slots} PieChartSlots */
4
- export default class PieChart 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 PieChartProps = typeof __propDef.props;
18
- export type PieChartEvents = typeof __propDef.events;
19
- export type PieChartSlots = 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 {};
@@ -1,49 +0,0 @@
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>
@@ -1,37 +0,0 @@
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 {};