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

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/components/Charts/Graph.svelte +42 -0
  2. package/components/Charts/Graph.svelte.d.ts +31 -0
  3. package/index.d.ts +4 -1
  4. package/index.js +4 -1
  5. package/package.json +2 -1
package/components/Charts/Graph.svelte ADDED
@@ -0,0 +1,42 @@
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 type = 'line';
8
+ export let data = {};
9
+ export let width = 200;
10
+ export let height = 200;
11
+ export let options = {};
12
+
13
+ Chart.register(...registerables);
14
+
15
+ let chart;
16
+ let canvas;
17
+
18
+ onMount(() => {
19
+ const ctx = canvas.getContext('2d');
20
+ chart = new Chart(ctx, {
21
+ type: type, // Change this to 'bar' for a bar chart
22
+ data: data,
23
+ options: { ...chartOptions, ...options }
24
+ });
25
+ });
26
+
27
+ // Cleanup when component is destroyed
28
+ onDestroy(() => {
29
+ if (chart) {
30
+ chart.destroy();
31
+ }
32
+ });
33
+ </script>
34
+
35
+ <canvas bind:this={canvas} {width} {height} />
36
+
37
+ <style>
38
+ canvas {
39
+ max-width: 100%;
40
+ height: auto;
41
+ }
42
+ </style>
package/components/Charts/Graph.svelte.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ /** @typedef {typeof __propDef.props} GraphProps */
2
+ /** @typedef {typeof __propDef.events} GraphEvents */
3
+ /** @typedef {typeof __propDef.slots} GraphSlots */
4
+ export default class Graph extends SvelteComponentTyped<{
5
+ type?: string | undefined;
6
+ width?: number | undefined;
7
+ options?: {} | undefined;
8
+ height?: number | undefined;
9
+ data?: {} | undefined;
10
+ }, {
11
+ [evt: string]: CustomEvent<any>;
12
+ }, {}> {
13
+ }
14
+ export type GraphProps = typeof __propDef.props;
15
+ export type GraphEvents = typeof __propDef.events;
16
+ export type GraphSlots = typeof __propDef.slots;
17
+ import { SvelteComponentTyped } from "svelte";
18
+ declare const __propDef: {
19
+ props: {
20
+ type?: string | undefined;
21
+ width?: number | undefined;
22
+ options?: {} | undefined;
23
+ height?: number | undefined;
24
+ data?: {} | undefined;
25
+ };
26
+ events: {
27
+ [evt: string]: CustomEvent<any>;
28
+ };
29
+ slots: {};
30
+ };
31
+ export {};
package/index.d.ts CHANGED
@@ -84,5 +84,8 @@ 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
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
+ import Graph from './components/Charts/Graph.svelte';
88
+ import { getChartData, chartOptions } from './components/Charts/chartOptions';
89
+ 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 };
88
91
  export default i18nInit;
package/index.js CHANGED
@@ -85,5 +85,8 @@ 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
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
+ import Graph from './components/Charts/Graph.svelte';
89
+ import { getChartData, chartOptions } from './components/Charts/chartOptions';
90
+ 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 };
89
92
  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.27",
3
+ "version": "0.1.28",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -79,6 +79,7 @@
79
79
  "./components/CardIcon/CardiconTitle.svelte": "./components/CardIcon/CardiconTitle.svelte",
80
80
  "./components/Charts/Barchart.svelte": "./components/Charts/Barchart.svelte",
81
81
  "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
82
+ "./components/Charts/Graph.svelte": "./components/Charts/Graph.svelte",
82
83
  "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
83
84
  "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
84
85
  "./components/Charts/StepChart.svelte": "./components/Charts/StepChart.svelte",