@policystudio/policy-studio-ui-vue 1.1.6 → 1.1.8
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.
- package/dist/css/psui_styles.css +341 -121
- package/package.json +1 -1
- package/src/assets/scss/base.scss +9 -0
- package/src/assets/scss/components/PsDraggable.scss +20 -0
- package/src/assets/scss/components/PsTableResults.scss +224 -75
- package/src/components/controls/PsDraggable.vue +2 -1
- package/src/components/data-graphics/PsBarChart.vue +1 -1
- package/src/components/table-results/PsTableResults.vue +76 -13
- package/src/components/table-results/PsTableResultsBody.vue +0 -1
- package/src/components/table-results/PsTableResultsHead.vue +2 -2
- package/src/components/table-results/PsTableResultsHeadComparison.vue +122 -0
- package/src/components/table-results/PsTableResultsRow.vue +0 -1
- package/src/stories/TableResults.stories.js +288 -11
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<thead>
|
|
3
|
+
<tr>
|
|
4
|
+
<th rowspan="2">
|
|
5
|
+
<div v-if="firstColumnTitle">
|
|
6
|
+
<p class="title">{{ firstColumnTitle }}</p>
|
|
7
|
+
</div>
|
|
8
|
+
<div>
|
|
9
|
+
<p v-if="firstColumnDescription" class="description">{{ firstColumnDescription }}</p>
|
|
10
|
+
</div>
|
|
11
|
+
</th>
|
|
12
|
+
|
|
13
|
+
<th
|
|
14
|
+
v-for="columnGroup of header"
|
|
15
|
+
:key="columnGroup.key"
|
|
16
|
+
:colspan="columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )"
|
|
17
|
+
>
|
|
18
|
+
<div class="psui-flex psui-space-x-1 psui-items-center psui-show-childrens-on-hover">
|
|
19
|
+
<p class="title">{{ columnGroup.title }}</p>
|
|
20
|
+
<PsIcon
|
|
21
|
+
icon="info"
|
|
22
|
+
size="18"
|
|
23
|
+
class="psui-cursor-pointer"
|
|
24
|
+
icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
|
|
25
|
+
:style="{ display: 'flex' }"
|
|
26
|
+
@click.native="$emit('click-column-group-helper', columnGroup, $event)"
|
|
27
|
+
/>
|
|
28
|
+
</div>
|
|
29
|
+
</th>
|
|
30
|
+
</tr>
|
|
31
|
+
|
|
32
|
+
<tr>
|
|
33
|
+
<template v-for="columnGroup of header">
|
|
34
|
+
<th
|
|
35
|
+
v-for="column of columnGroup.columns"
|
|
36
|
+
:key="`${columnGroup.key}-${column.key}`"
|
|
37
|
+
:style="`--dataCount: ${columnGroup.columns.reduce( (prev, cur) => cur.isActive ? prev + 1 : prev, 0 )};`"
|
|
38
|
+
>
|
|
39
|
+
<div class="psui-flex psui-flex-col psui-justify-center psui-items-center psui-text-center">
|
|
40
|
+
<div class="psui-show-childrens-on-hover absolute-childrens psui-mb-px">
|
|
41
|
+
<p class="title" v-if="column.title">{{ column.title }}</p>
|
|
42
|
+
|
|
43
|
+
<PsIcon
|
|
44
|
+
icon="info"
|
|
45
|
+
size="16"
|
|
46
|
+
class="psui-cursor-pointer helper"
|
|
47
|
+
icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
|
|
48
|
+
:style="{ display: 'flex' }"
|
|
49
|
+
@click.native="$emit('click-column-helper', column, $event)"
|
|
50
|
+
/>
|
|
51
|
+
|
|
52
|
+
<PsIcon
|
|
53
|
+
v-if="showOrder"
|
|
54
|
+
:icon="orderDirection == 'asc' ? 'arrow_downward' : 'arrow_upward'"
|
|
55
|
+
:type="orderDirection == 'asc' ? 'arrow_upward' : 'arrow_upward'"
|
|
56
|
+
size="16"
|
|
57
|
+
class="psui-cursor-pointer helper"
|
|
58
|
+
icon-classes="psui-text-blue-50 psui-opacity-0 psui-leading-none psui-transition"
|
|
59
|
+
:style="{ display: 'flex' }"
|
|
60
|
+
@click.native="$emit('click-order-column', column)"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
<p class="description" v-if="column.description">{{ column.description }}</p>
|
|
64
|
+
</div>
|
|
65
|
+
</th>
|
|
66
|
+
</template>
|
|
67
|
+
</tr>
|
|
68
|
+
</thead>
|
|
69
|
+
</template>
|
|
70
|
+
|
|
71
|
+
<script>
|
|
72
|
+
import PsIcon from '../ui/PsIcon.vue'
|
|
73
|
+
export default {
|
|
74
|
+
name: 'PsTableResultsHead',
|
|
75
|
+
components: { PsIcon },
|
|
76
|
+
props: {
|
|
77
|
+
/**
|
|
78
|
+
* It sets the title for the first column.
|
|
79
|
+
*/
|
|
80
|
+
firstColumnTitle: {
|
|
81
|
+
type: String,
|
|
82
|
+
default: ''
|
|
83
|
+
},
|
|
84
|
+
/**
|
|
85
|
+
* It sets the description for the first column.
|
|
86
|
+
*/
|
|
87
|
+
firstColumnDescription: {
|
|
88
|
+
type: String,
|
|
89
|
+
default: ''
|
|
90
|
+
},
|
|
91
|
+
/**
|
|
92
|
+
* It sets the values which will be use to render the header.
|
|
93
|
+
*/
|
|
94
|
+
header: {
|
|
95
|
+
type: Array,
|
|
96
|
+
required: true,
|
|
97
|
+
default: () => {
|
|
98
|
+
return []
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
/**
|
|
102
|
+
* this sets whether sorting will be displayed.
|
|
103
|
+
*/
|
|
104
|
+
showOrder: {
|
|
105
|
+
type: Boolean,
|
|
106
|
+
default: false
|
|
107
|
+
}
|
|
108
|
+
},
|
|
109
|
+
computed: {
|
|
110
|
+
columnsSelectedForStudy() {
|
|
111
|
+
return this.$parent.columnsSelectedForStudy
|
|
112
|
+
},
|
|
113
|
+
orderColumn() {
|
|
114
|
+
return this.$parent.orderColumn
|
|
115
|
+
},
|
|
116
|
+
orderDirection() {
|
|
117
|
+
return this.$parent.orderDirection
|
|
118
|
+
},
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
</script>
|
|
122
|
+
<style> /* Please, use the file src/assets/scss/components/PsTableResults.scss */ </style>
|
|
@@ -1,15 +1,26 @@
|
|
|
1
|
-
import PsTableResults from '../components/table-results/PsTableResults.vue'
|
|
1
|
+
import PsTableResults, { tableLayout } from '../components/table-results/PsTableResults.vue'
|
|
2
2
|
import PsTableResultsHead from '../components/table-results/PsTableResultsHead.vue'
|
|
3
|
+
import PsTableResultsHeadComparison from '../components/table-results/PsTableResultsHeadComparison.vue'
|
|
3
4
|
import PsProgressBar from '../components/badges-and-tags/PsProgressBar.vue'
|
|
4
5
|
|
|
6
|
+
export const RENDER_TYPE = {
|
|
7
|
+
BAR_CHART : 'bar_chart',
|
|
8
|
+
TAG_SCOPE : 'tag_scope',
|
|
9
|
+
}
|
|
10
|
+
export const RENDER_BADGE = {
|
|
11
|
+
EMISSION_REDICTIONS : 'trending_down',
|
|
12
|
+
AFFECTED_UNITS : 'holiday_village',
|
|
13
|
+
LOWEST_COST_PER_UNIT : 'price_check'
|
|
14
|
+
}
|
|
15
|
+
|
|
5
16
|
export default {
|
|
6
17
|
title: 'Data Tables/TableResults',
|
|
7
|
-
component: { PsTableResults, PsTableResultsHead },
|
|
18
|
+
component: { PsTableResults, PsTableResultsHead, PsTableResultsHeadComparison },
|
|
8
19
|
argTypes: {
|
|
20
|
+
layout: { control: { type: 'inline-radio', options: tableLayout } },
|
|
9
21
|
onClick: { action: 'clicked' },
|
|
10
|
-
onCollapse: { action: 'clicked' }
|
|
11
|
-
|
|
12
|
-
}
|
|
22
|
+
onCollapse: { action: 'clicked' },
|
|
23
|
+
},
|
|
13
24
|
}
|
|
14
25
|
|
|
15
26
|
const TableSimple = (args, { argTypes }) => ({
|
|
@@ -28,15 +39,40 @@ const TableSimple = (args, { argTypes }) => ({
|
|
|
28
39
|
|
|
29
40
|
const TableResults = (args, { argTypes }) => ({
|
|
30
41
|
props: Object.keys(argTypes),
|
|
31
|
-
components: { PsTableResults, PsTableResultsHead },
|
|
42
|
+
components: { PsTableResults, PsTableResultsHead, PsTableResultsHeadComparison },
|
|
32
43
|
subcomponents: { PsProgressBar },
|
|
33
44
|
template: `
|
|
34
45
|
<div style="width:100%;">
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
46
|
+
<div
|
|
47
|
+
v-if="$props['layout'] == 'comparison'"
|
|
48
|
+
class="psui-bg-gray-20 psui-p-8"
|
|
49
|
+
>
|
|
50
|
+
<PsTableResults
|
|
51
|
+
v-bind="$props"
|
|
52
|
+
:summary-data="summaryDataComparison"
|
|
53
|
+
:column-groups="comparisonColumnGroups"
|
|
54
|
+
>
|
|
55
|
+
<template v-slot:header>
|
|
56
|
+
<PsTableResultsHeadComparison
|
|
57
|
+
v-bind="$props"
|
|
58
|
+
first-column-title="Comparing 4 Policies"
|
|
59
|
+
first-column-description="add your description here"
|
|
60
|
+
:header="comparisonColumnGroups"
|
|
61
|
+
/>
|
|
62
|
+
</template>
|
|
63
|
+
</PsTableResults>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div
|
|
67
|
+
v-else
|
|
68
|
+
class="psui-bg-white"
|
|
69
|
+
>
|
|
70
|
+
<PsTableResults v-bind="$props">
|
|
71
|
+
<template v-slot:header>
|
|
72
|
+
<PsTableResultsHead v-bind="$props" />
|
|
73
|
+
</template>
|
|
74
|
+
</PsTableResults>
|
|
75
|
+
</div>
|
|
40
76
|
</div>
|
|
41
77
|
`
|
|
42
78
|
})
|
|
@@ -917,6 +953,161 @@ Results.args = {
|
|
|
917
953
|
}
|
|
918
954
|
}
|
|
919
955
|
],
|
|
956
|
+
comparisonColumnGroups: [
|
|
957
|
+
{
|
|
958
|
+
'order': 2,
|
|
959
|
+
'key': 'city_wide_estimates',
|
|
960
|
+
'title': 'City-wide Impact Estimates',
|
|
961
|
+
'columns': [
|
|
962
|
+
{
|
|
963
|
+
'isActive': true,
|
|
964
|
+
'key': 'forecast_units_affected',
|
|
965
|
+
'title': 'Affected Units',
|
|
966
|
+
'description': '(lifecycle)',
|
|
967
|
+
'hasProjections': true,
|
|
968
|
+
'hasHelper': {
|
|
969
|
+
'type': 'helper',
|
|
970
|
+
'id': 17
|
|
971
|
+
},
|
|
972
|
+
'isChart': false,
|
|
973
|
+
'renderType': RENDER_TYPE.BAR_CHART
|
|
974
|
+
},
|
|
975
|
+
{
|
|
976
|
+
'isActive': true,
|
|
977
|
+
'key': 'forecast_emissions_savings',
|
|
978
|
+
'title': 'Emissions Reductions',
|
|
979
|
+
'description': '(lifecycle MTCO2e)',
|
|
980
|
+
'hasProjections': true,
|
|
981
|
+
'hasHelper': {
|
|
982
|
+
'type': 'helper',
|
|
983
|
+
'id': 18
|
|
984
|
+
},
|
|
985
|
+
'isChart': false,
|
|
986
|
+
'renderType': RENDER_TYPE.BAR_CHART
|
|
987
|
+
},
|
|
988
|
+
{
|
|
989
|
+
'isActive': true,
|
|
990
|
+
'key': 'forecast_lifecycle_savings',
|
|
991
|
+
'title': 'Lifecycle Savings',
|
|
992
|
+
'description': '(on-bill)',
|
|
993
|
+
'hasProjections': true,
|
|
994
|
+
'hasHelper': {
|
|
995
|
+
'type': 'helper',
|
|
996
|
+
'id': 19
|
|
997
|
+
},
|
|
998
|
+
'isChart': false,
|
|
999
|
+
'renderType': RENDER_TYPE.BAR_CHART
|
|
1000
|
+
}
|
|
1001
|
+
],
|
|
1002
|
+
'hasHelper': {
|
|
1003
|
+
'type': 'helper',
|
|
1004
|
+
'slug': 'comparison-tables-city_wide_estimates'
|
|
1005
|
+
}
|
|
1006
|
+
},
|
|
1007
|
+
{
|
|
1008
|
+
'order': 3,
|
|
1009
|
+
'key': 'policy_requirements',
|
|
1010
|
+
'title': 'Policy Requirements',
|
|
1011
|
+
'columns': [
|
|
1012
|
+
{
|
|
1013
|
+
'isActive': true,
|
|
1014
|
+
'key': 'multifamily',
|
|
1015
|
+
'title': 'Multifamily',
|
|
1016
|
+
'description': '',
|
|
1017
|
+
'hasHelper': {
|
|
1018
|
+
'type': 'helper',
|
|
1019
|
+
'id': 1
|
|
1020
|
+
},
|
|
1021
|
+
'isScope': true,
|
|
1022
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1023
|
+
},
|
|
1024
|
+
{
|
|
1025
|
+
'isActive': true,
|
|
1026
|
+
'key': 'single_family',
|
|
1027
|
+
'title': 'Single Family',
|
|
1028
|
+
'description': '',
|
|
1029
|
+
'isChart': false,
|
|
1030
|
+
'hasHelper': {
|
|
1031
|
+
'type': 'helper',
|
|
1032
|
+
'id': 2
|
|
1033
|
+
},
|
|
1034
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
'isActive': true,
|
|
1038
|
+
'key': 'zone_7',
|
|
1039
|
+
'title': 'Zone 7',
|
|
1040
|
+
'description': '',
|
|
1041
|
+
'isChart': false,
|
|
1042
|
+
'hasHelper': {
|
|
1043
|
+
'type': 'helper',
|
|
1044
|
+
'id': 3
|
|
1045
|
+
},
|
|
1046
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1047
|
+
},
|
|
1048
|
+
{
|
|
1049
|
+
'isActive': true,
|
|
1050
|
+
'key': 'zone_10',
|
|
1051
|
+
'title': 'Zone 10',
|
|
1052
|
+
'description': '',
|
|
1053
|
+
'isChart': false,
|
|
1054
|
+
'hasHelper': {
|
|
1055
|
+
'type': 'helper',
|
|
1056
|
+
'id': 4
|
|
1057
|
+
},
|
|
1058
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1059
|
+
}
|
|
1060
|
+
],
|
|
1061
|
+
'hasHelper': {
|
|
1062
|
+
'type': 'helper',
|
|
1063
|
+
'id': 23
|
|
1064
|
+
}
|
|
1065
|
+
},
|
|
1066
|
+
{
|
|
1067
|
+
'order': 4,
|
|
1068
|
+
'key': 'city_wide_impact_assumptions',
|
|
1069
|
+
'title': 'City-Wide Impact Assumptions',
|
|
1070
|
+
'columns': [
|
|
1071
|
+
{
|
|
1072
|
+
'isActive': true,
|
|
1073
|
+
'key': 'multifamily',
|
|
1074
|
+
'title': 'Multifamily',
|
|
1075
|
+
'description': '',
|
|
1076
|
+
'hasHelper': {
|
|
1077
|
+
'type': 'helper',
|
|
1078
|
+
'id': 1
|
|
1079
|
+
},
|
|
1080
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1081
|
+
},
|
|
1082
|
+
{
|
|
1083
|
+
'isActive': true,
|
|
1084
|
+
'key': 'single_family',
|
|
1085
|
+
'title': 'Single Family',
|
|
1086
|
+
'description': '',
|
|
1087
|
+
'hasHelper': {
|
|
1088
|
+
'type': 'helper',
|
|
1089
|
+
'id': 2
|
|
1090
|
+
},
|
|
1091
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1092
|
+
},
|
|
1093
|
+
{
|
|
1094
|
+
'isActive': true,
|
|
1095
|
+
'key': 'city_and_policy',
|
|
1096
|
+
'title': 'City and Policy',
|
|
1097
|
+
'description': '',
|
|
1098
|
+
'hasHelper': {
|
|
1099
|
+
'type': 'helper',
|
|
1100
|
+
'id': 3
|
|
1101
|
+
},
|
|
1102
|
+
'renderType': RENDER_TYPE.TAG_SCOPE
|
|
1103
|
+
},
|
|
1104
|
+
],
|
|
1105
|
+
'hasHelper': {
|
|
1106
|
+
'type': 'helper',
|
|
1107
|
+
'id': 23
|
|
1108
|
+
}
|
|
1109
|
+
},
|
|
1110
|
+
],
|
|
920
1111
|
summaryData: [
|
|
921
1112
|
{
|
|
922
1113
|
'data': {
|
|
@@ -1196,6 +1387,92 @@ Results.args = {
|
|
|
1196
1387
|
'last_deep': false
|
|
1197
1388
|
}
|
|
1198
1389
|
],
|
|
1390
|
+
summaryDataComparison: [
|
|
1391
|
+
{
|
|
1392
|
+
'data': {
|
|
1393
|
+
'forecast_units_affected': 77.5,
|
|
1394
|
+
'forecast_emissions_savings': 1427.3145433224304,
|
|
1395
|
+
'forecast_lifecycle_savings': 296624.89395,
|
|
1396
|
+
'multifamily': true,
|
|
1397
|
+
'single_family': true,
|
|
1398
|
+
'zone_7': true,
|
|
1399
|
+
'zone_10': true,
|
|
1400
|
+
'city_and_policy': 'Default',
|
|
1401
|
+
},
|
|
1402
|
+
'deep': 1,
|
|
1403
|
+
'id': 'policy:container-2459',
|
|
1404
|
+
'title': 'Policy name lorem ipsum dolor',
|
|
1405
|
+
'has_badge': RENDER_BADGE.AFFECTED_UNITS,
|
|
1406
|
+
'items': [
|
|
1407
|
+
{
|
|
1408
|
+
'data': {
|
|
1409
|
+
'forecast_units_affected': 0,
|
|
1410
|
+
'forecast_emissions_savings': 0,
|
|
1411
|
+
'forecast_lifecycle_savings': 0,
|
|
1412
|
+
'multifamily': true,
|
|
1413
|
+
'single_family': true,
|
|
1414
|
+
'zone_7': false,
|
|
1415
|
+
'zone_10': false,
|
|
1416
|
+
'city_and_policy': false,
|
|
1417
|
+
},
|
|
1418
|
+
'deep': 2,
|
|
1419
|
+
'id': 'policy:container-2459:climateZone-1-PGE',
|
|
1420
|
+
'title': '',
|
|
1421
|
+
'items': null,
|
|
1422
|
+
'is_disabled': false,
|
|
1423
|
+
'is_last': true,
|
|
1424
|
+
'index': '0-0-0',
|
|
1425
|
+
'last_deep': false
|
|
1426
|
+
}
|
|
1427
|
+
],
|
|
1428
|
+
'is_disabled': false,
|
|
1429
|
+
'is_last': false,
|
|
1430
|
+
'index': '0-0',
|
|
1431
|
+
'last_deep': false
|
|
1432
|
+
},
|
|
1433
|
+
{
|
|
1434
|
+
'data': {
|
|
1435
|
+
'forecast_units_affected': 260,
|
|
1436
|
+
'forecast_emissions_savings': -2897.5373860970467,
|
|
1437
|
+
'forecast_lifecycle_savings': -662408.3057812498,
|
|
1438
|
+
'multifamily': true,
|
|
1439
|
+
'single_family': true,
|
|
1440
|
+
'zone_7': true,
|
|
1441
|
+
'zone_10': true,
|
|
1442
|
+
'city_and_policy': 'Default',
|
|
1443
|
+
},
|
|
1444
|
+
'deep': 1,
|
|
1445
|
+
'id': 'policy:container-2539',
|
|
1446
|
+
'title': 'Policy name lorem ipsum dolor',
|
|
1447
|
+
'has_badge': RENDER_BADGE.EMISSION_REDICTIONS,
|
|
1448
|
+
'items': [
|
|
1449
|
+
{
|
|
1450
|
+
'data': {
|
|
1451
|
+
'forecast_units_affected': 0,
|
|
1452
|
+
'forecast_emissions_savings': 0,
|
|
1453
|
+
'forecast_lifecycle_savings': 0,
|
|
1454
|
+
'multifamily': true,
|
|
1455
|
+
'single_family': false,
|
|
1456
|
+
'zone_7': false,
|
|
1457
|
+
'zone_10': false,
|
|
1458
|
+
'city_and_policy': false,
|
|
1459
|
+
},
|
|
1460
|
+
'deep': 2,
|
|
1461
|
+
'id': 'policy:container-2539:climateZone-1-PGE',
|
|
1462
|
+
'title': '',
|
|
1463
|
+
'items': null,
|
|
1464
|
+
'is_disabled': false,
|
|
1465
|
+
'is_last': true,
|
|
1466
|
+
'index': '0-1-0',
|
|
1467
|
+
'last_deep': false
|
|
1468
|
+
}
|
|
1469
|
+
],
|
|
1470
|
+
'is_disabled': false,
|
|
1471
|
+
'is_last': true,
|
|
1472
|
+
'index': '0-1',
|
|
1473
|
+
'last_deep': false
|
|
1474
|
+
}
|
|
1475
|
+
],
|
|
1199
1476
|
footer: [],
|
|
1200
1477
|
showRowsCollapsed: true,
|
|
1201
1478
|
}
|