@enki-tek/fms-web-components 0.1.28 → 0.1.30
Sign up to get free protection for your applications and to get access to all the features.
- package/components/Charts/chartOptions.d.ts +1 -8
- package/components/Charts/chartOptions.js +5 -4
- package/components/Sidebar/MenuGroup.svelte +0 -1
- package/components/Sidebar/MenuItem.svelte +0 -1
- package/components/Sidebar/SideBarMenu.svelte +2 -3
- package/components/Sidebar/Sidebar.scss +0 -1
- package/components/Sidebar/Sidebar.svelte +0 -1
- package/index.d.ts +1 -6
- package/index.js +1 -6
- package/package.json +1 -6
- package/components/Charts/Barchart.svelte +0 -46
- package/components/Charts/Barchart.svelte.d.ts +0 -37
- package/components/Charts/DoughnutChart.svelte +0 -45
- package/components/Charts/DoughnutChart.svelte.d.ts +0 -37
- package/components/Charts/LineChart.svelte +0 -47
- package/components/Charts/LineChart.svelte.d.ts +0 -37
- package/components/Charts/PieChart.svelte +0 -51
- package/components/Charts/PieChart.svelte.d.ts +0 -37
- package/components/Charts/StepChart.svelte +0 -49
- package/components/Charts/StepChart.svelte.d.ts +0 -37
@@ -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
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
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
|
};
|
@@ -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 {
|
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,
|
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,
|
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.
|
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 {};
|