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

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.
@@ -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);
@@ -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;
@@ -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
 
@@ -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;
@@ -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
  });
@@ -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;
@@ -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);
@@ -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;
@@ -0,0 +1 @@
1
+ export function getChartColors(number?: number): string[];
@@ -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
+
@@ -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
  };
@@ -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
  }
@@ -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
  }
@@ -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;
@@ -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;
@@ -4,7 +4,7 @@
4
4
  </script>
5
5
 
6
6
  <span class="{status == 'active' ? "completed-tag" : (status == 'inactive' ? "inactive-tag" :
7
- (status == 'warning' ? "progress-tag" : "overdue-tag")) } badge fw-normal"> {title}</span>
7
+ (status == 'warning' ? "progress-tag" : "overdue-tag")) } badge "> {title}</span>
8
8
 
9
9
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
10
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@@ -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;
@@ -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;
@@ -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;
@@ -3,9 +3,12 @@
3
3
  export let subtitle;
4
4
  </script>
5
5
 
6
- <div class="column py-2 ">
6
+ <div class="column py-2">
7
7
  <div class="text-black-50">{title}</div>
8
- <div class="text-dark fs-6">{subtitle}</div>
8
+ <div class="text-dark fs-6">
9
+ {subtitle}
10
+ <slot />
11
+ </div>
9
12
  </div>
10
13
 
11
14
  <style>
@@ -6,7 +6,9 @@ export default class SensorWidgetData extends SvelteComponentTyped<{
6
6
  subtitle: any;
7
7
  }, {
8
8
  [evt: string]: CustomEvent<any>;
9
- }, {}> {
9
+ }, {
10
+ default: {};
11
+ }> {
10
12
  }
11
13
  export type SensorWidgetDataProps = typeof __propDef.props;
12
14
  export type SensorWidgetDataEvents = typeof __propDef.events;
@@ -20,6 +22,8 @@ declare const __propDef: {
20
22
  events: {
21
23
  [evt: string]: CustomEvent<any>;
22
24
  };
23
- slots: {};
25
+ slots: {
26
+ default: {};
27
+ };
24
28
  };
25
29
  export {};
@@ -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;
@@ -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.23",
3
+ "version": "0.1.25",
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",