@eturnity/eturnity_reusable_components 8.19.8-EPDM-14690.1 → 8.19.8-EPDM-6306.2

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.
Files changed (16) hide show
  1. package/package.json +1 -1
  2. package/src/components/barchart/BottomFields.vue +37 -125
  3. package/src/components/barchart/composables/useAxisCalculations.js +1 -1
  4. package/src/components/barchart/composables/useChartData.js +1 -1
  5. package/src/components/barchart/composables/useTooltip.js +3 -28
  6. package/src/components/barchart/index.vue +15 -53
  7. package/src/components/barchart/styles/bottomFields.js +4 -18
  8. package/src/components/barchart/styles/chart.js +0 -1
  9. package/src/components/errorMessage/index.vue +1 -1
  10. package/src/components/infoCard/index.vue +3 -15
  11. package/src/components/infoCard/infoCard.spec.js +3 -3
  12. package/src/components/infoText/index.vue +31 -36
  13. package/src/components/inputs/inputNumber/index.vue +73 -161
  14. package/src/components/pageTitle/index.vue +1 -0
  15. package/src/helpers/numberConverter.js +1 -1
  16. package/src/TestChart.vue +0 -229
package/src/TestChart.vue DELETED
@@ -1,229 +0,0 @@
1
- <template>
2
- <div
3
- style="
4
- margin-top: 100px;
5
- margin-left: 80px;
6
- padding-bottom: 100px;
7
- display: flex;
8
- flex-direction: column;
9
- "
10
- >
11
- <!-- Simple bar chart -->
12
- <BarChart
13
- :bar-width="60"
14
- chart-controls-position="bottom"
15
- :data="monthlyData"
16
- height="400px"
17
- :is-bottom-fields-shown="true"
18
- :is-scrollable="false"
19
- :is-selection-enabled="true"
20
- :selection-size="3"
21
- :value-formatter="valueFormatter"
22
- width="700px"
23
- @selection-change="handleSelectionChange"
24
- />
25
- <br />
26
- <br />
27
-
28
- <!-- Stacked bar chart -->
29
- <BarChart
30
- :bar-width="60"
31
- :data="monthLabels"
32
- height="400px"
33
- :is-bottom-fields-shown="true"
34
- :is-legend-shown="true"
35
- :legends-item-per-row="4"
36
- :selected-split-button="selectedTimeFrame"
37
- :series="tariffZones"
38
- :show-percentage-on-tooltip="true"
39
- :split-button-options="options"
40
- :value-formatter="valueFormatter"
41
- width="700px"
42
- y-axis-title="Energy (kWh)"
43
- @input-blur="handleInputBlur"
44
- @select-split-button="handleSelectSplitButton"
45
- />
46
-
47
- <!-- Stacked bar chart -->
48
- <BarChart
49
- :bar-width="60"
50
- :data="monthLabels"
51
- field-mode="percentage"
52
- height="400px"
53
- :is-bottom-fields-shown="true"
54
- :is-legend-shown="false"
55
- :legends-item-per-row="4"
56
- :series="tariffZones"
57
- :value-formatter="valueFormatter"
58
- width="700px"
59
- @input-blur="handleInputBlur"
60
- @select-split-button="handleSelectSplitButton"
61
- >
62
- <!-- <template #tooltip="{ item, segment }">
63
- <div style="display: flex; flex-direction: column">
64
- {{ $c.log(item, segment) }}
65
- <div>{{ item.label }}</div>
66
- <div>{{ item.segments[0].value }} kWh</div>
67
- </div>
68
- </template> -->
69
- </BarChart>
70
- </div>
71
- </template>
72
-
73
- <script setup>
74
- import { ref } from 'vue'
75
- import BarChart from '@/components/barchart/index.vue'
76
-
77
- const options = [
78
- { label: 'Day', value: 'day' },
79
- { label: 'Month', value: 'month' },
80
- { label: 'Year', value: 'year' },
81
- ]
82
-
83
- const selectedTimeFrame = ref('day')
84
-
85
- const handleSelectSplitButton = (value) => {
86
- selectedTimeFrame.value = value
87
- }
88
-
89
- const monthlyData = [
90
- { label: 'Jan', value: 300 },
91
- { label: 'Feb', value: 600 },
92
- { label: 'Mar', value: 1000 },
93
- { label: 'Apr', value: 1200 },
94
- { label: 'May', value: 1400 },
95
- { label: 'Jun', value: 1810 },
96
- { label: 'Jul', value: 1400 },
97
- { label: 'Aug', value: 1200 },
98
- { label: 'Sep', value: 1000 },
99
- // { label: 'Oct', value: 800 },
100
- // { label: 'Nov', value: 600 },
101
- // { label: 'Dec', value: 400 },
102
- // { label: 'Jan', value: 300 },
103
- // { label: 'Feb', value: 600 },
104
- // { label: 'Mar', value: 1000 },
105
- // { label: 'Apr', value: 1200 },
106
- // { label: 'May', value: 1400 },
107
- // { label: 'Jun', value: 1810 },
108
- // { label: 'Jul', value: 1400 },
109
- // { label: 'Aug', value: 1200 },
110
- // { label: 'Sep', value: 1000 },
111
- // { label: 'Oct', value: 800 },
112
- // { label: 'Nov', value: 600 },
113
- // { label: 'Dec', value: 400 },
114
-
115
- // ... more months
116
- ]
117
-
118
- const monthLabels = [
119
- { label: 'Jan' },
120
- { label: 'Feb' },
121
- { label: 'Mar' },
122
- { label: 'Apr' },
123
- { label: 'May' },
124
- { label: 'Jun' },
125
- // ... more months
126
- ]
127
-
128
- const tariffZones = ref([
129
- {
130
- name: 'Tariff Zone 1',
131
- data: [
132
- { label: 'Jan', value: 200 },
133
- { label: 'Feb', value: 130 },
134
- { label: 'Mar', value: 220 },
135
- { label: 'Apr', value: 230 },
136
- { label: 'May', value: 200 },
137
- { label: 'Jun', value: 210 },
138
- // ... more months
139
- ],
140
- },
141
- {
142
- name: 'Tariff Zone 2',
143
- data: [
144
- { label: 'Jan', value: 200 },
145
- { label: 'Feb', value: 100 },
146
- { label: 'Mar', value: 270 },
147
- { label: 'Apr', value: 180 },
148
- { label: 'May', value: 300 },
149
- { label: 'Jun', value: 250 },
150
- // ... more months
151
- ],
152
- },
153
- {
154
- name: 'Tariff Zone 3',
155
- data: [
156
- { label: 'Jan', value: 200 },
157
- { label: 'Feb', value: 100 },
158
- { label: 'Mar', value: 210 },
159
- { label: 'Apr', value: 220 },
160
- { label: 'May', value: 300 },
161
- { label: 'Jun', value: 190 },
162
- // ... more months
163
- ],
164
- },
165
- {
166
- name: 'Tariff Zone 4',
167
- data: [
168
- { label: 'Jan', value: 200 },
169
- { label: 'Feb', value: 100 },
170
- { label: 'Mar', value: 210 },
171
- { label: 'Apr', value: 220 },
172
- { label: 'May', value: 300 },
173
- { label: 'Jun', value: 190 },
174
- // ... more months
175
- ],
176
- },
177
- {
178
- name: 'Tariff Zone 5',
179
- data: [
180
- { label: 'Jan', value: 200 },
181
- { label: 'Feb', value: 100 },
182
- { label: 'Mar', value: 210 },
183
- { label: 'Apr', value: 220 },
184
- { label: 'May', value: 300 },
185
- { label: 'Jun', value: 190 },
186
- // ... more months
187
- ],
188
- },
189
- {
190
- name: 'Tariff Zone 6',
191
- data: [
192
- { label: 'Jan', value: 200 },
193
- { label: 'Feb', value: 100 },
194
- { label: 'Mar', value: 210 },
195
- { label: 'Apr', value: 220 },
196
- { label: 'May', value: 300 },
197
- { label: 'Jun', value: 190 },
198
- // ... more months
199
- ],
200
- },
201
- // ... more tariff zones
202
- ])
203
-
204
- const valueFormatter = (value) => {
205
- return `${value} kWh`
206
- }
207
-
208
- const handleSelectionChange = (selectedBars) => {
209
- console.log('selectedBars', selectedBars)
210
- }
211
-
212
- const handleInputBlur = (payload) => {
213
- const newVal = [...tariffZones.value].map((zone) => {
214
- if (zone.name === payload.seriesName) {
215
- zone.data = zone.data.map((item) => {
216
- if (item.label === payload.label) {
217
- item.value = payload.value
218
- }
219
- return item
220
- })
221
- }
222
- return zone
223
- })
224
-
225
- tariffZones.value = newVal
226
- }
227
- </script>
228
-
229
- <style lang="scss" scoped></style>