@enki-tek/fms-web-components 0.1.22 → 0.1.24

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. package/components/Charts/Barchart.svelte +4 -4
  2. package/components/Charts/Barchart.svelte.d.ts +6 -0
  3. package/components/Charts/DoughnutChart.svelte +4 -0
  4. package/components/Charts/DoughnutChart.svelte.d.ts +6 -0
  5. package/components/Charts/LineChart.svelte +4 -1
  6. package/components/Charts/LineChart.svelte.d.ts +6 -0
  7. package/components/Charts/PieChart.svelte +4 -0
  8. package/components/Charts/PieChart.svelte.d.ts +6 -0
  9. package/components/Charts/chartColors.d.ts +1 -0
  10. package/components/Charts/chartColors.js +42 -0
  11. package/components/Charts/chartOptions.d.ts +26 -1
  12. package/components/Charts/chartOptions.js +30 -4
  13. package/components/StatusCard/StatusCard.svelte +1 -1
  14. package/components/Toast/Toast.scss +1 -0
  15. package/components/Toast/Toast.svelte +1 -0
  16. package/components/WidgetCard/AlertFooter.svelte +4 -4
  17. package/components/WidgetCard/BadgeCard.svelte +4 -4
  18. package/components/WidgetCard/Card.scss +4 -4
  19. package/components/WidgetCard/SensorStatusCard.svelte +4 -4
  20. package/components/WidgetCard/StateCard.svelte +4 -4
  21. package/components/WidgetCard/WidgetCard.svelte +4 -4
  22. package/package.json +2 -1
package/components/Charts/Barchart.svelte CHANGED
@@ -2,15 +2,15 @@
2
2
  <script>
3
3
  import { Chart, registerables } from 'chart.js';
4
4
  import { onDestroy, onMount } from 'svelte';
5
- import {
6
- chartOptions,
7
- getChartData
8
- } from './chartOptions';
5
+ import { chartOptions, getChartData } from './chartOptions';
9
6
 
10
7
  export let data = {};
11
8
  export let label = '';
12
9
  export let width = 200;
13
10
  export let height = 200;
11
+ export let config = {
12
+ colorCount: 1
13
+ };
14
14
 
15
15
  // Register all necessary components
16
16
  Chart.register(...registerables);
package/components/Charts/Barchart.svelte.d.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} BarchartEvents */
3
3
  /** @typedef {typeof __propDef.slots} BarchartSlots */
4
4
  export default class Barchart extends SvelteComponentTyped<{
5
+ config?: {
6
+ colorCount: number;
7
+ } | undefined;
5
8
  label?: string | undefined;
6
9
  width?: number | undefined;
7
10
  height?: number | undefined;
@@ -16,6 +19,9 @@ export type BarchartSlots = typeof __propDef.slots;
16
19
  import { SvelteComponentTyped } from "svelte";
17
20
  declare const __propDef: {
18
21
  props: {
22
+ config?: {
23
+ colorCount: number;
24
+ } | undefined;
19
25
  label?: string | undefined;
20
26
  width?: number | undefined;
21
27
  height?: number | undefined;
package/components/Charts/DoughnutChart.svelte CHANGED
@@ -8,6 +8,10 @@
8
8
  export let label = '';
9
9
  export let width = 200;
10
10
  export let height = 200;
11
+ export let config = {
12
+ colorCount : 1,
13
+ }
14
+
11
15
  // Register all necessary components
12
16
  Chart.register(...registerables);
13
17
 
package/components/Charts/DoughnutChart.svelte.d.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} DoughnutChartEvents */
3
3
  /** @typedef {typeof __propDef.slots} DoughnutChartSlots */
4
4
  export default class DoughnutChart extends SvelteComponentTyped<{
5
+ config?: {
6
+ colorCount: number;
7
+ } | undefined;
5
8
  label?: string | undefined;
6
9
  width?: number | undefined;
7
10
  height?: number | undefined;
@@ -16,6 +19,9 @@ export type DoughnutChartSlots = typeof __propDef.slots;
16
19
  import { SvelteComponentTyped } from "svelte";
17
20
  declare const __propDef: {
18
21
  props: {
22
+ config?: {
23
+ colorCount: number;
24
+ } | undefined;
19
25
  label?: string | undefined;
20
26
  width?: number | undefined;
21
27
  height?: number | undefined;
package/components/Charts/LineChart.svelte CHANGED
@@ -8,6 +8,9 @@
8
8
  export let label = '';
9
9
  export let width = 200;
10
10
  export let height = 200;
11
+ export let config = {
12
+ colorCount : 1,
13
+ }
11
14
 
12
15
  // Register all necessary components
13
16
  Chart.register(...registerables);
@@ -20,7 +23,7 @@
20
23
  const ctx = canvas.getContext('2d');
21
24
  chart = new Chart(ctx, {
22
25
  type: 'line', // Change this to 'bar' for a bar chart
23
- data: getChartData({ data, label }),
26
+ data: getChartData({ data, label, config }),
24
27
  options: chartOptions
25
28
  });
26
29
  });
package/components/Charts/LineChart.svelte.d.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} LineChartEvents */
3
3
  /** @typedef {typeof __propDef.slots} LineChartSlots */
4
4
  export default class LineChart extends SvelteComponentTyped<{
5
+ config?: {
6
+ colorCount: number;
7
+ } | undefined;
5
8
  label?: string | undefined;
6
9
  width?: number | undefined;
7
10
  height?: number | undefined;
@@ -16,6 +19,9 @@ export type LineChartSlots = typeof __propDef.slots;
16
19
  import { SvelteComponentTyped } from "svelte";
17
20
  declare const __propDef: {
18
21
  props: {
22
+ config?: {
23
+ colorCount: number;
24
+ } | undefined;
19
25
  label?: string | undefined;
20
26
  width?: number | undefined;
21
27
  height?: number | undefined;
package/components/Charts/PieChart.svelte CHANGED
@@ -12,6 +12,10 @@
12
12
  export let label = '';
13
13
  export let width = 300;
14
14
  export let height = 300;
15
+ export let config = {
16
+ colorCount : 1,
17
+ }
18
+
15
19
  // Register all necessary components
16
20
  Chart.register(...registerables);
17
21
  Chart.register(ChartDataLabels);
package/components/Charts/PieChart.svelte.d.ts CHANGED
@@ -2,6 +2,9 @@
2
2
  /** @typedef {typeof __propDef.events} PieChartEvents */
3
3
  /** @typedef {typeof __propDef.slots} PieChartSlots */
4
4
  export default class PieChart extends SvelteComponentTyped<{
5
+ config?: {
6
+ colorCount: number;
7
+ } | undefined;
5
8
  label?: string | undefined;
6
9
  width?: number | undefined;
7
10
  height?: number | undefined;
@@ -16,6 +19,9 @@ export type PieChartSlots = typeof __propDef.slots;
16
19
  import { SvelteComponentTyped } from "svelte";
17
20
  declare const __propDef: {
18
21
  props: {
22
+ config?: {
23
+ colorCount: number;
24
+ } | undefined;
19
25
  label?: string | undefined;
20
26
  width?: number | undefined;
21
27
  height?: number | undefined;
package/components/Charts/chartColors.d.ts ADDED
@@ -0,0 +1 @@
1
+ export function getChartColors(number?: number): string[];
package/components/Charts/chartColors.js ADDED
@@ -0,0 +1,42 @@
1
+ const colors = [
2
+ "#D12771",
3
+ "#CB459E",
4
+ "#FA72C9",
5
+ "#750E13",
6
+ "#A2191F",
7
+ "#DA1E28",
8
+ "#FA4D56",
9
+ "#FF8389",
10
+ "#FFB3B8",
11
+ "#003A6D",
12
+ "#00539A",
13
+ "#0072C3",
14
+ "#1192E8",
15
+ "#33B1FF",
16
+ "#82CFFF",
17
+ "#491D8B",
18
+ "#6929C4",
19
+ "#8A3FFC",
20
+ "#A56EFF",
21
+ "#BE95FF",
22
+ "#D4BBFF",
23
+ "#004144",
24
+ "#005D5D",
25
+ "#007D79",
26
+ "#009D9A",
27
+ "#08BDBA",
28
+ "#3DDBD9",
29
+ "#C18300",
30
+ "#D79200",
31
+ "#ECA206",
32
+ "#F8B21E",
33
+ "#FAC045",
34
+ "#FFD16D",
35
+ "#8BBC05",
36
+ "#99CE08"
37
+ ];
38
+
39
+ export const getChartColors = (number = 1) => {
40
+ return colors.slice(0, number);
41
+ }
42
+
package/components/Charts/chartOptions.d.ts CHANGED
@@ -17,16 +17,41 @@ export namespace chartOptions {
17
17
  }
18
18
  const responsive: boolean;
19
19
  const maintainAspectRatio: boolean;
20
+ namespace scales {
21
+ namespace x {
22
+ const type: string;
23
+ namespace ticks {
24
+ const maxRotation: number;
25
+ const minRotation: number;
26
+ }
27
+ namespace grid {
28
+ const display: boolean;
29
+ const lineWidth: number;
30
+ }
31
+ }
32
+ namespace y {
33
+ export const beginAtZero: boolean;
34
+ export namespace grid_1 {
35
+ const color: string;
36
+ }
37
+ export { grid_1 as grid };
38
+ }
39
+ }
20
40
  }
21
41
  export function getChartLabelsFromData(data: any): string[];
22
42
  export function getChartValuesFromData(data: any): any[];
23
- export function getChartData({ data, label }: {
43
+ export function getChartData({ data, label, config }: {
24
44
  data: any;
25
45
  label: any;
46
+ config: any;
26
47
  }): {
27
48
  labels: string[];
28
49
  datasets: {
29
50
  label: any;
30
51
  data: any[];
52
+ backgroundColor: string[];
53
+ borderColor: string[];
54
+ borderWidth: number;
55
+ tension: number;
31
56
  }[];
32
57
  };
package/components/Charts/chartOptions.js CHANGED
@@ -1,3 +1,5 @@
1
+ import { getChartColors } from "./chartColors";
2
+
1
3
  export const chartOptions = {
2
4
  plugins: {
3
5
  legend: {
@@ -18,7 +20,27 @@ export const chartOptions = {
18
20
  }
19
21
  },
20
22
  responsive: true,
21
- maintainAspectRatio: false // Allows the chart to resize freely
23
+ maintainAspectRatio: false, // Allows the chart to resize freely
24
+ scales: {
25
+ x: {
26
+ type: 'category', // Set x-axis to category type
27
+ ticks: {
28
+ maxRotation: 90,
29
+ minRotation: 45,
30
+ },
31
+ // You can adjust this to control the number of visible labels on the x-axis
32
+ grid: {
33
+ display: true, // Hides grid lines on x-axis
34
+ lineWidth: 2
35
+ }
36
+ },
37
+ y: {
38
+ beginAtZero: false,
39
+ grid: {
40
+ color: 'rgba(0, 0, 0, 0.1)'
41
+ }
42
+ }
43
+ }
22
44
  };
23
45
 
24
46
  export const getChartLabelsFromData = (data) => {
@@ -30,14 +52,18 @@ export const getChartValuesFromData = (data) => {
30
52
  }
31
53
 
32
54
 
33
- export const getChartData = ({ data, label }) => {
55
+ export const getChartData = ({ data, label, config }) => {
34
56
  return {
35
57
  labels: getChartLabelsFromData(data),
36
58
  datasets: [
37
59
  {
38
60
  label: label,
39
- data: getChartValuesFromData(data)
61
+ data: getChartValuesFromData(data),
62
+ backgroundColor: getChartColors(config?.colorCount),
63
+ borderColor: getChartColors(config?.colorCount),
64
+ borderWidth: 1,
65
+ tension: 0.1
40
66
  }
41
- ]
67
+ ],
42
68
  };
43
69
  }
package/components/StatusCard/StatusCard.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  export let sensor = false;
6
6
  </script>
7
7
 
8
- <div class="{sensor ? "col-12 col-md-12 col-sm-12 col-lg-12 col-xl-6" : "col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3" } ">
8
+ <div class="{sensor ? "col-12" : "col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3" } ">
9
9
  <div class="{notify ? 'blip' : ''} m-2 card {className} {small ? 'card-mini' : ''}">
10
10
  <slot />
11
11
  </div>
package/components/Toast/Toast.scss CHANGED
@@ -24,6 +24,7 @@ $icon-size:20px;
24
24
  font-style: normal;
25
25
  font-weight: 400;
26
26
  line-height: normal;
27
+ background-color: #ffffff;
27
28
  :global(i){
28
29
  font-size: $icon-size;
29
30
  }
package/components/Toast/Toast.svelte CHANGED
@@ -67,6 +67,7 @@
67
67
  font-style: normal;
68
68
  font-weight: 400;
69
69
  line-height: normal;
70
+ background-color: #ffffff;
70
71
  }
71
72
  .toast-main :global(i) {
72
73
  font-size: 20px;
package/components/WidgetCard/AlertFooter.svelte CHANGED
@@ -96,28 +96,28 @@
96
96
  float: left;
97
97
  }
98
98
  .completed-tag {
99
- background-color: #E8F3EE;
99
+ background-color: #E8F3EE !important;
100
100
  color: #00750F;
101
101
  border: 1px solid #C5E1D4;
102
102
  padding: 5px 10px;
103
103
  border-radius: 5px;
104
104
  }
105
105
  .overdue-tag {
106
- background-color: #FFE9E8;
106
+ background-color: #FFE9E8 !important;
107
107
  color: #FF4343;
108
108
  border: 1px solid #FFC9C7;
109
109
  padding: 5px 10px;
110
110
  border-radius: 5px;
111
111
  }
112
112
  .progress-tag {
113
- background-color: #FFF9E6;
113
+ background-color: #FFF9E6 !important;
114
114
  color: #EA6D03;
115
115
  padding: 5px 10px;
116
116
  border: 1px solid #FFEFC1;
117
117
  border-radius: 5px;
118
118
  }
119
119
  .inactive-tag {
120
- background-color: #E9ECEF;
120
+ background-color: #E9ECEF !important;
121
121
  color: #6C757D;
122
122
  padding: 5px 10px;
123
123
  border: 1px solid #DEE2E6;
package/components/WidgetCard/BadgeCard.svelte CHANGED
@@ -70,28 +70,28 @@
70
70
  float: left;
71
71
  }
72
72
  .completed-tag {
73
- background-color: #E8F3EE;
73
+ background-color: #E8F3EE !important;
74
74
  color: #00750F;
75
75
  border: 1px solid #C5E1D4;
76
76
  padding: 5px 10px;
77
77
  border-radius: 5px;
78
78
  }
79
79
  .overdue-tag {
80
- background-color: #FFE9E8;
80
+ background-color: #FFE9E8 !important;
81
81
  color: #FF4343;
82
82
  border: 1px solid #FFC9C7;
83
83
  padding: 5px 10px;
84
84
  border-radius: 5px;
85
85
  }
86
86
  .progress-tag {
87
- background-color: #FFF9E6;
87
+ background-color: #FFF9E6 !important;
88
88
  color: #EA6D03;
89
89
  padding: 5px 10px;
90
90
  border: 1px solid #FFEFC1;
91
91
  border-radius: 5px;
92
92
  }
93
93
  .inactive-tag {
94
- background-color: #E9ECEF;
94
+ background-color: #E9ECEF !important;
95
95
  color: #6C757D;
96
96
  padding: 5px 10px;
97
97
  border: 1px solid #DEE2E6;
package/components/WidgetCard/Card.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  .completed-tag {
73
- background-color: #E8F3EE;
73
+ background-color: #E8F3EE !important;
74
74
  color: #00750F;
75
75
  border: 1px solid #C5E1D4;
76
76
  padding: 5px 10px;
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  .overdue-tag {
81
- background-color: #FFE9E8;
81
+ background-color: #FFE9E8 !important;
82
82
  color: #FF4343;
83
83
  border: 1px solid #FFC9C7;
84
84
  padding: 5px 10px;
@@ -86,7 +86,7 @@
86
86
  }
87
87
 
88
88
  .progress-tag {
89
- background-color: #FFF9E6;
89
+ background-color: #FFF9E6 !important;
90
90
  color: #EA6D03;
91
91
  padding: 5px 10px;
92
92
  border: 1px solid #FFEFC1;
@@ -94,7 +94,7 @@
94
94
  }
95
95
 
96
96
  .inactive-tag {
97
- background-color: $gray-200;
97
+ background-color: $gray-200 !important;
98
98
  color: $gray-600;
99
99
  padding: 5px 10px;
100
100
  border: 1px solid $gray-300;
package/components/WidgetCard/SensorStatusCard.svelte CHANGED
@@ -89,28 +89,28 @@
89
89
  float: left;
90
90
  }
91
91
  .completed-tag {
92
- background-color: #E8F3EE;
92
+ background-color: #E8F3EE !important;
93
93
  color: #00750F;
94
94
  border: 1px solid #C5E1D4;
95
95
  padding: 5px 10px;
96
96
  border-radius: 5px;
97
97
  }
98
98
  .overdue-tag {
99
- background-color: #FFE9E8;
99
+ background-color: #FFE9E8 !important;
100
100
  color: #FF4343;
101
101
  border: 1px solid #FFC9C7;
102
102
  padding: 5px 10px;
103
103
  border-radius: 5px;
104
104
  }
105
105
  .progress-tag {
106
- background-color: #FFF9E6;
106
+ background-color: #FFF9E6 !important;
107
107
  color: #EA6D03;
108
108
  padding: 5px 10px;
109
109
  border: 1px solid #FFEFC1;
110
110
  border-radius: 5px;
111
111
  }
112
112
  .inactive-tag {
113
- background-color: #E9ECEF;
113
+ background-color: #E9ECEF !important;
114
114
  color: #6C757D;
115
115
  padding: 5px 10px;
116
116
  border: 1px solid #DEE2E6;
package/components/WidgetCard/StateCard.svelte CHANGED
@@ -92,28 +92,28 @@
92
92
  float: left;
93
93
  }
94
94
  .completed-tag {
95
- background-color: #E8F3EE;
95
+ background-color: #E8F3EE !important;
96
96
  color: #00750F;
97
97
  border: 1px solid #C5E1D4;
98
98
  padding: 5px 10px;
99
99
  border-radius: 5px;
100
100
  }
101
101
  .overdue-tag {
102
- background-color: #FFE9E8;
102
+ background-color: #FFE9E8 !important;
103
103
  color: #FF4343;
104
104
  border: 1px solid #FFC9C7;
105
105
  padding: 5px 10px;
106
106
  border-radius: 5px;
107
107
  }
108
108
  .progress-tag {
109
- background-color: #FFF9E6;
109
+ background-color: #FFF9E6 !important;
110
110
  color: #EA6D03;
111
111
  padding: 5px 10px;
112
112
  border: 1px solid #FFEFC1;
113
113
  border-radius: 5px;
114
114
  }
115
115
  .inactive-tag {
116
- background-color: #E9ECEF;
116
+ background-color: #E9ECEF !important;
117
117
  color: #6C757D;
118
118
  padding: 5px 10px;
119
119
  border: 1px solid #DEE2E6;
package/components/WidgetCard/WidgetCard.svelte CHANGED
@@ -113,28 +113,28 @@
113
113
  float: left;
114
114
  }
115
115
  .completed-tag {
116
- background-color: #E8F3EE;
116
+ background-color: #E8F3EE !important;
117
117
  color: #00750F;
118
118
  border: 1px solid #C5E1D4;
119
119
  padding: 5px 10px;
120
120
  border-radius: 5px;
121
121
  }
122
122
  .overdue-tag {
123
- background-color: #FFE9E8;
123
+ background-color: #FFE9E8 !important;
124
124
  color: #FF4343;
125
125
  border: 1px solid #FFC9C7;
126
126
  padding: 5px 10px;
127
127
  border-radius: 5px;
128
128
  }
129
129
  .progress-tag {
130
- background-color: #FFF9E6;
130
+ background-color: #FFF9E6 !important;
131
131
  color: #EA6D03;
132
132
  padding: 5px 10px;
133
133
  border: 1px solid #FFEFC1;
134
134
  border-radius: 5px;
135
135
  }
136
136
  .inactive-tag {
137
- background-color: #E9ECEF;
137
+ background-color: #E9ECEF !important;
138
138
  color: #6C757D;
139
139
  padding: 5px 10px;
140
140
  border: 1px solid #DEE2E6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
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/chartColors": "./components/Charts/chartColors.js",
84
85
  "./components/Charts/chartOptions": "./components/Charts/chartOptions.js",
85
86
  "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
86
87
  "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",