@policystudio/policy-studio-ui-vue 1.1.44 → 1.1.48

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.
@@ -0,0 +1,117 @@
1
+ <template>
2
+ <thead>
3
+ <tr>
4
+ <th
5
+ v-for="columnGroup of header"
6
+ :key="columnGroup.key"
7
+ :colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
8
+ >
9
+ <div class="psui-flex psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
10
+ <p class="title">{{ columnGroup.title }}</p>
11
+ <PsIcon
12
+ icon="info"
13
+ size="18"
14
+ class="psui-cursor-pointer"
15
+ icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
16
+ :style="{ display: 'flex' }"
17
+ @click.native="$emit('click-column-group-helper', columnGroup, $event)"
18
+ />
19
+ </div>
20
+ </th>
21
+ </tr>
22
+
23
+ <tr>
24
+ <template v-for="(columnGroup, columnGroupIndex) of header">
25
+ <th
26
+ v-for="column of columnGroup.columns"
27
+ :key="`${columnGroup.key}-${column.key}`"
28
+ :data-test-id="column.key"
29
+ >
30
+ <div
31
+ class="psui-flex psui-flex-col psui-justify-center"
32
+ :class="columnGroupIndex == 0 ? 'psui-items-center' : 'psui-items-end'"
33
+ :data-index="columnGroupIndex"
34
+ >
35
+ <div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
36
+ <p class="title" v-if="column.title">{{ column.title }}</p>
37
+
38
+ <PsIcon
39
+ icon="info"
40
+ size="16"
41
+ class="psui-cursor-pointer helper"
42
+ icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
43
+ :style="{ display: 'flex' }"
44
+ @click.native="$emit('click-column-helper', column, $event)"
45
+ />
46
+
47
+ <PsIcon
48
+ v-if="showOrder"
49
+ :icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
50
+ :type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
51
+ size="16"
52
+ class="psui-cursor-pointer helper"
53
+ icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
54
+ :style="{ display: 'flex' }"
55
+ @click.native="$emit('click-order-column', column)"
56
+ />
57
+ </div>
58
+ <p class="description" v-if="column.description">{{ column.description }}</p>
59
+ </div>
60
+ </th>
61
+ </template>
62
+ </tr>
63
+ </thead>
64
+ </template>
65
+
66
+ <script>
67
+ import PsIcon from '../ui/PsIcon.vue'
68
+ export default {
69
+ name: 'PsTableResultsHeadFlexible',
70
+ components: { PsIcon },
71
+ props: {
72
+ /**
73
+ * It sets the title for the first column.
74
+ */
75
+ firstColumnTitle: {
76
+ type: String,
77
+ default: ''
78
+ },
79
+ /**
80
+ * It sets the description for the first column.
81
+ */
82
+ firstColumnDescription: {
83
+ type: String,
84
+ default: ''
85
+ },
86
+ /**
87
+ * It sets the values which will be use to render the header.
88
+ */
89
+ header: {
90
+ type: Array,
91
+ required: true,
92
+ default: () => {
93
+ return []
94
+ },
95
+ },
96
+ /**
97
+ * this sets whether sorting will be displayed.
98
+ */
99
+ showOrder: {
100
+ type: Boolean,
101
+ default: false
102
+ }
103
+ },
104
+ computed: {
105
+ columnsSelectedForStudy() {
106
+ return this.$parent.columnsSelectedForStudy
107
+ },
108
+ orderColumn() {
109
+ return this.$parent.orderColumn
110
+ },
111
+ orderDirection() {
112
+ return this.$parent.orderDirection
113
+ },
114
+ }
115
+ }
116
+ </script>
117
+ <style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
@@ -1,5 +1,10 @@
1
1
  <template>
2
- <div @mouseenter="open" @mouseleave="close" ref="tooltip" class='psui-el-tooltip'>
2
+ <div
3
+ ref="tooltip"
4
+ class='psui-el-tooltip'
5
+ @mouseenter="open"
6
+ @mouseleave="close"
7
+ >
3
8
  <div ref="tooltiptrigger" class='psui-el-tooltip-trigger'>
4
9
  <slot name="trigger"></slot>
5
10
  </div>
@@ -0,0 +1,378 @@
1
+ const RENDER_TYPE = {
2
+ BAR_CHART : 'bar_chart',
3
+ TAG_SCOPE : 'tag_scope',
4
+ }
5
+ const RENDER_BADGE = {
6
+ EMISSION_REDICTIONS : 'trending_down',
7
+ AFFECTED_UNITS : 'holiday_village',
8
+ LOWEST_COST_PER_UNIT : 'price_check'
9
+ }
10
+
11
+ export const comparisonDataHeader = [
12
+ {
13
+ 'order': 0,
14
+ 'key': 'city_wide_impact',
15
+ 'title': 'City-wide Impact Estimates',
16
+ 'columns': [
17
+ {
18
+ 'isActive': true,
19
+ 'key': 'forecast_units_affected',
20
+ 'title': 'Affected Units',
21
+ 'description': '(lifecycle)',
22
+ 'hasProjections': true,
23
+ 'hasHelper': {
24
+ 'type': 'helper',
25
+ 'id': 17
26
+ },
27
+ 'chartProjection': {
28
+ 'title': 'Number of Affected Units',
29
+ 'subtitle': ''
30
+ }
31
+ },
32
+ {
33
+ 'isActive': true,
34
+ 'key': 'forecast_initial_cost',
35
+ 'title': 'Compliance Cost',
36
+ 'description': '(lifecycle)',
37
+ 'hasProjections': true,
38
+ 'hasHelper': {
39
+ 'type': 'helper',
40
+ 'id': 20
41
+ },
42
+ 'chartProjection': {
43
+ 'title': 'Compliance Cost',
44
+ 'subtitle': ''
45
+ }
46
+ },
47
+ {
48
+ 'isActive': true,
49
+ 'key': 'forecast_emissions_savings',
50
+ 'title': 'Emissions Reductions',
51
+ 'description': '(lifecycle MTCO2e)',
52
+ 'hasProjections': true,
53
+ 'hasHelper': {
54
+ 'type': 'helper',
55
+ 'id': 18
56
+ },
57
+ 'chartProjection': {
58
+ 'title': 'Emissions Reductions',
59
+ 'subtitle': 'MTCO2e'
60
+ }
61
+ },
62
+ {
63
+ 'isActive': true,
64
+ 'key': 'forecast_lifecycle_savings',
65
+ 'title': 'Lifecycle Savings',
66
+ 'description': '(on-bill)',
67
+ 'hasProjections': true,
68
+ 'hasHelper': {
69
+ 'type': 'helper',
70
+ 'id': 19
71
+ },
72
+ 'chartProjection': {
73
+ 'title': 'Bill Savings',
74
+ 'subtitle': ''
75
+ }
76
+ },
77
+ {
78
+ 'isActive': true,
79
+ 'key': 'forecast_kwh_savings',
80
+ 'title': 'Electricity Savings',
81
+ 'description': '(lifecycle kWh)',
82
+ 'hasProjections': true,
83
+ 'hasHelper': {
84
+ 'type': 'helper',
85
+ 'id': 21
86
+ },
87
+ 'chartProjection': {
88
+ 'title': 'Electricity Savings',
89
+ 'subtitle': 'kWh'
90
+ }
91
+ },
92
+ {
93
+ 'isActive': true,
94
+ 'key': 'forecast_therms_savings',
95
+ 'title': 'Gas Savings',
96
+ 'description': '(lifecycle therms)',
97
+ 'hasProjections': true,
98
+ 'hasHelper': {
99
+ 'type': 'helper',
100
+ 'id': 22
101
+ },
102
+ 'chartProjection': {
103
+ 'title': 'Gas Savings',
104
+ 'subtitle': 'therms'
105
+ }
106
+ }
107
+ ],
108
+ 'hasHelper': {
109
+ 'type': 'helper',
110
+ 'id': 25
111
+ }
112
+ },
113
+ {
114
+ 'order': 1,
115
+ 'key': 'fixed_columns',
116
+ 'title': 'City-wide Impact Estimates',
117
+ 'columns': [
118
+ {
119
+ 'isActive': true,
120
+ 'key': 'tdv_benefit_to_cost_ratio',
121
+ 'title': 'TDV',
122
+ 'description': '≥ 1.0 is cost effective',
123
+ 'isChart': true,
124
+ 'hasHelper': {
125
+ 'type': 'helper',
126
+ 'id': 1
127
+ }
128
+ }
129
+ ],
130
+ 'hasHelper': {
131
+ 'type': 'helper',
132
+ 'id': 23
133
+ }
134
+ }
135
+ ]
136
+
137
+ export const comparisonDataSummary = [
138
+ {
139
+ 'data': {
140
+ 'forecast_units_affected': 77.5,
141
+ 'forecast_emissions_savings': 1427.3145433224304,
142
+ 'forecast_lifecycle_savings': 296624.89395,
143
+ 'multifamily': true,
144
+ 'single_family': true,
145
+ 'zone_7': true,
146
+ 'zone_10': true,
147
+ 'city_and_policy': 'Default',
148
+ },
149
+ 'deep': 1,
150
+ 'id': 'policy:container-2459',
151
+ 'title': 'Policy name lorem ipsum dolor',
152
+ 'has_badge': RENDER_BADGE.AFFECTED_UNITS,
153
+ 'items': [
154
+ {
155
+ 'data': {
156
+ 'forecast_units_affected': 0,
157
+ 'forecast_emissions_savings': 0,
158
+ 'forecast_lifecycle_savings': 0,
159
+ 'multifamily': true,
160
+ 'single_family': true,
161
+ 'zone_7': false,
162
+ 'zone_10': false,
163
+ 'city_and_policy': false,
164
+ },
165
+ 'deep': 2,
166
+ 'id': 'policy:container-2459:climateZone-1-PGE',
167
+ 'title': '',
168
+ 'items': null,
169
+ 'is_disabled': false,
170
+ 'is_last': true,
171
+ 'index': '0-0-0',
172
+ 'last_deep': false
173
+ }
174
+ ],
175
+ 'is_disabled': false,
176
+ 'is_last': false,
177
+ 'index': '0-0',
178
+ 'last_deep': false
179
+ },
180
+ {
181
+ 'data': {
182
+ 'forecast_units_affected': 260,
183
+ 'forecast_emissions_savings': -2897.5373860970467,
184
+ 'forecast_lifecycle_savings': -662408.3057812498,
185
+ 'multifamily': true,
186
+ 'single_family': true,
187
+ 'zone_7': true,
188
+ 'zone_10': true,
189
+ 'city_and_policy': 'Default',
190
+ },
191
+ 'deep': 1,
192
+ 'id': 'policy:container-2539',
193
+ 'title': 'Policy name lorem ipsum dolor',
194
+ 'has_badge': RENDER_BADGE.EMISSION_REDICTIONS,
195
+ 'items': [
196
+ {
197
+ 'data': {
198
+ 'forecast_units_affected': 0,
199
+ 'forecast_emissions_savings': 0,
200
+ 'forecast_lifecycle_savings': 0,
201
+ 'multifamily': true,
202
+ 'single_family': false,
203
+ 'zone_7': false,
204
+ 'zone_10': false,
205
+ 'city_and_policy': false,
206
+ },
207
+ 'deep': 2,
208
+ 'id': 'policy:container-2539:climateZone-1-PGE',
209
+ 'title': '',
210
+ 'items': null,
211
+ 'is_disabled': false,
212
+ 'is_last': true,
213
+ 'index': '0-1-0',
214
+ 'last_deep': false
215
+ }
216
+ ],
217
+ 'is_disabled': false,
218
+ 'is_last': true,
219
+ 'index': '0-1',
220
+ 'last_deep': false
221
+ }
222
+ ]
223
+
224
+ export const comparisonDataColumnGroup = [
225
+ {
226
+ 'order': 2,
227
+ 'key': 'city_wide_estimates',
228
+ 'title': 'City-wide Impact Estimates',
229
+ 'columns': [
230
+ {
231
+ 'isActive': true,
232
+ 'key': 'forecast_units_affected',
233
+ 'title': 'Affected Units',
234
+ 'description': '(lifecycle)',
235
+ 'hasProjections': true,
236
+ 'hasHelper': {
237
+ 'type': 'helper',
238
+ 'id': 17
239
+ },
240
+ 'isChart': false,
241
+ 'renderType': RENDER_TYPE.BAR_CHART
242
+ },
243
+ {
244
+ 'isActive': true,
245
+ 'key': 'forecast_emissions_savings',
246
+ 'title': 'Emissions Reductions',
247
+ 'description': '(lifecycle MTCO2e)',
248
+ 'hasProjections': true,
249
+ 'hasHelper': {
250
+ 'type': 'helper',
251
+ 'id': 18
252
+ },
253
+ 'isChart': false,
254
+ 'renderType': RENDER_TYPE.BAR_CHART
255
+ },
256
+ {
257
+ 'isActive': true,
258
+ 'key': 'forecast_lifecycle_savings',
259
+ 'title': 'Lifecycle Savings',
260
+ 'description': '(on-bill)',
261
+ 'hasProjections': true,
262
+ 'hasHelper': {
263
+ 'type': 'helper',
264
+ 'id': 19
265
+ },
266
+ 'isChart': false,
267
+ 'renderType': RENDER_TYPE.BAR_CHART
268
+ }
269
+ ],
270
+ 'hasHelper': {
271
+ 'type': 'helper',
272
+ 'slug': 'comparison-tables-city_wide_estimates'
273
+ }
274
+ },
275
+ {
276
+ 'order': 3,
277
+ 'key': 'policy_requirements',
278
+ 'title': 'Policy Requirements',
279
+ 'columns': [
280
+ {
281
+ 'isActive': true,
282
+ 'key': 'multifamily',
283
+ 'title': 'Multifamily',
284
+ 'description': '',
285
+ 'hasHelper': {
286
+ 'type': 'helper',
287
+ 'id': 1
288
+ },
289
+ 'isScope': true,
290
+ 'renderType': RENDER_TYPE.TAG_SCOPE
291
+ },
292
+ {
293
+ 'isActive': true,
294
+ 'key': 'single_family',
295
+ 'title': 'Single Family',
296
+ 'description': '',
297
+ 'isChart': false,
298
+ 'hasHelper': {
299
+ 'type': 'helper',
300
+ 'id': 2
301
+ },
302
+ 'renderType': RENDER_TYPE.TAG_SCOPE
303
+ },
304
+ {
305
+ 'isActive': true,
306
+ 'key': 'zone_7',
307
+ 'title': 'Zone 7',
308
+ 'description': '',
309
+ 'isChart': false,
310
+ 'hasHelper': {
311
+ 'type': 'helper',
312
+ 'id': 3
313
+ },
314
+ 'renderType': RENDER_TYPE.TAG_SCOPE
315
+ },
316
+ {
317
+ 'isActive': true,
318
+ 'key': 'zone_10',
319
+ 'title': 'Zone 10',
320
+ 'description': '',
321
+ 'isChart': false,
322
+ 'hasHelper': {
323
+ 'type': 'helper',
324
+ 'id': 4
325
+ },
326
+ 'renderType': RENDER_TYPE.TAG_SCOPE
327
+ }
328
+ ],
329
+ 'hasHelper': {
330
+ 'type': 'helper',
331
+ 'id': 23
332
+ }
333
+ },
334
+ {
335
+ 'order': 4,
336
+ 'key': 'city_wide_impact_assumptions',
337
+ 'title': 'City-Wide Impact Assumptions',
338
+ 'columns': [
339
+ {
340
+ 'isActive': true,
341
+ 'key': 'multifamily',
342
+ 'title': 'Multifamily',
343
+ 'description': '',
344
+ 'hasHelper': {
345
+ 'type': 'helper',
346
+ 'id': 1
347
+ },
348
+ 'renderType': RENDER_TYPE.TAG_SCOPE
349
+ },
350
+ {
351
+ 'isActive': true,
352
+ 'key': 'single_family',
353
+ 'title': 'Single Family',
354
+ 'description': '',
355
+ 'hasHelper': {
356
+ 'type': 'helper',
357
+ 'id': 2
358
+ },
359
+ 'renderType': RENDER_TYPE.TAG_SCOPE
360
+ },
361
+ {
362
+ 'isActive': true,
363
+ 'key': 'city_and_policy',
364
+ 'title': 'City and Policy',
365
+ 'description': '',
366
+ 'hasHelper': {
367
+ 'type': 'helper',
368
+ 'id': 3
369
+ },
370
+ 'renderType': RENDER_TYPE.TAG_SCOPE
371
+ },
372
+ ],
373
+ 'hasHelper': {
374
+ 'type': 'helper',
375
+ 'id': 23
376
+ }
377
+ },
378
+ ]