@mixd-id/web-scaffold 0.1.230406348 → 0.1.230406350
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/package.json +1 -1
- package/src/components/GHeatMaps.vue +25 -7
- package/src/configs/dashboard/bar.js +2 -1
- package/src/utils/preset-selector.mjs +2 -2
- package/src/widgets/Dashboard/BarChart.vue +56 -26
- package/src/widgets/Dashboard/BarChartSetting.vue +5 -1
- package/src/widgets/Dashboard/DatasourcePreview.vue +4 -8
- package/src/widgets/Dashboard/Doughnut.vue +13 -0
- package/src/widgets/Dashboard/DoughnutSetting.vue +4 -2
- package/src/widgets/Dashboard/Pie.vue +13 -0
- package/src/widgets/Dashboard/PolarArea.vue +13 -1
- package/src/widgets/Dashboard/PolarAreaSetting.vue +4 -2
- package/src/widgets/Dashboard.vue +49 -132
- package/src/widgets/PresetBar.vue +4 -136
- package/src/widgets/PresetBarPivot.vue +186 -0
package/package.json
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
|
-
<div v-if="apiKey" ref="map" class="flex-1"
|
|
3
|
+
<div v-if="apiKey" ref="map" class="flex-1">
|
|
4
|
+
|
|
5
|
+
</div>
|
|
4
6
|
<div v-else class="flex-1 flex items-center justify-center text-text-400">{{ $t('Google maps api required') }}</div>
|
|
7
|
+
|
|
8
|
+
<div class="flex flex-row gap-2 p-1 px-3 pt-2">
|
|
9
|
+
<label class="text-sm text-text-400">Total points: {{ uniqueCount }}</label>
|
|
10
|
+
|
|
11
|
+
</div>
|
|
5
12
|
</div>
|
|
6
13
|
</template>
|
|
7
14
|
|
|
@@ -9,6 +16,8 @@
|
|
|
9
16
|
|
|
10
17
|
import { Loader } from '@googlemaps/js-api-loader';
|
|
11
18
|
|
|
19
|
+
let loader = null
|
|
20
|
+
|
|
12
21
|
export default{
|
|
13
22
|
|
|
14
23
|
name: "GHeatMaps",
|
|
@@ -43,9 +52,10 @@ export default{
|
|
|
43
52
|
if(!Array.isArray(this.datasets) || this.datasets.length < 1)
|
|
44
53
|
return
|
|
45
54
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
55
|
+
if(!loader)
|
|
56
|
+
loader = new Loader({
|
|
57
|
+
apiKey: this.apiKey // "AIzaSyBmzMlmrR5St-njtN--64y_oLTa9FDLYfQ"
|
|
58
|
+
})
|
|
49
59
|
|
|
50
60
|
loader.load()
|
|
51
61
|
.then(async () => {
|
|
@@ -63,6 +73,7 @@ export default{
|
|
|
63
73
|
mapTypeId: 'roadmap',
|
|
64
74
|
streetViewControl: false,
|
|
65
75
|
keyboardShortcuts: false,
|
|
76
|
+
disableDefaultUI: true,
|
|
66
77
|
styles: [
|
|
67
78
|
{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
|
|
68
79
|
{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
|
|
@@ -207,8 +218,6 @@ export default{
|
|
|
207
218
|
"rgba(255, 0, 0, 1)",
|
|
208
219
|
];
|
|
209
220
|
heatmap.set("gradient", gradient);
|
|
210
|
-
|
|
211
|
-
//console.log('Gmap, data count:', this.data.length)
|
|
212
221
|
});
|
|
213
222
|
}
|
|
214
223
|
|
|
@@ -216,6 +225,15 @@ export default{
|
|
|
216
225
|
|
|
217
226
|
computed: {
|
|
218
227
|
|
|
228
|
+
uniqueCount(){
|
|
229
|
+
if(!Array.isArray(this.value?.items)) return 0
|
|
230
|
+
|
|
231
|
+
return Object.keys(this.value.items.reduce((acc, item) => {
|
|
232
|
+
acc[item[this.column]] = 1
|
|
233
|
+
return acc
|
|
234
|
+
}, {})).length
|
|
235
|
+
},
|
|
236
|
+
|
|
219
237
|
datasets(){
|
|
220
238
|
if(!Array.isArray(this.value?.items)) return []
|
|
221
239
|
|
|
@@ -250,7 +268,7 @@ export default{
|
|
|
250
268
|
<style module>
|
|
251
269
|
|
|
252
270
|
.comp{
|
|
253
|
-
@apply flex flex-col h-[40vh] bg-base-500;
|
|
271
|
+
@apply flex flex-col h-[40vh] border-[1px] border-text-50 bg-base-500 rounded-xl overflow-hidden;
|
|
254
272
|
}
|
|
255
273
|
|
|
256
274
|
</style>
|
|
@@ -147,11 +147,11 @@ const generatePivotColumns = (preset, items) => {
|
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
(preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
|
|
150
|
+
/*(preset.pivot.columns ?? []).filter(_ => !pivotColumns.find(i => i.key === _.key))
|
|
151
151
|
.forEach(_ => {
|
|
152
152
|
_.visible = false
|
|
153
153
|
pivotColumns.push(_)
|
|
154
|
-
})
|
|
154
|
+
})*/
|
|
155
155
|
|
|
156
156
|
preset.pivot.columns = pivotColumns
|
|
157
157
|
|
|
@@ -16,18 +16,6 @@
|
|
|
16
16
|
<div v-else class="flex flex-col gap-3">
|
|
17
17
|
<div class="flex flex-row items-center gap-4">
|
|
18
18
|
<label class="text-text-400 text-ellipsis overflow-hidden whitespace-nowrap flex-1">{{ label }}</label>
|
|
19
|
-
<div v-if="yAxeMultiple && yLegends?.length > 0" class="flex flex-row items-center flex-wrap justify-center gap-1">
|
|
20
|
-
<div v-for="yLegend in showedYLegends"
|
|
21
|
-
v-tooltip="`${yLegend.key}`"
|
|
22
|
-
class="p-0.5 px-1 rounded-full text-black cursor-default text-xs min-w-[50px] max-w-[60px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
|
|
23
|
-
:style="{ backgroundColor:yLegend.color }">
|
|
24
|
-
{{ (yLegend.key ?? '').toString().split(' ')[0].toLowerCase() }}
|
|
25
|
-
</div>
|
|
26
|
-
<button v-if="yLegends.length > showedYLegends.length" @click="$refs.legendModal.open()"
|
|
27
|
-
class="bg-text-200 hover:bg-primary-600 w-[21px] h-[21px] rounded-full flex items-center justify-center">
|
|
28
|
-
<svg width="14" height="14" class="fill-white opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
|
|
29
|
-
</button>
|
|
30
|
-
</div>
|
|
31
19
|
</div>
|
|
32
20
|
|
|
33
21
|
<div class="flex-1">
|
|
@@ -36,6 +24,20 @@
|
|
|
36
24
|
:data="chartData"/>
|
|
37
25
|
</div>
|
|
38
26
|
|
|
27
|
+
<div v-if="yAxeMultiple && yLegends?.length > 0" class="flex flex-row items-center flex-wrap justify-center gap-1">
|
|
28
|
+
<div v-for="yLegend in showedYLegends"
|
|
29
|
+
@click="toggleExcludes(yLegend)"
|
|
30
|
+
class="p-0.5 px-1 rounded-full text-black cursor-default text-xs min-w-[50px] max-w-[60px] text-center text-ellipsis overflow-hidden whitespace-nowrap capitalize"
|
|
31
|
+
:class="excluded.includes(yLegend.key) ? 'bg-text-200' : ''"
|
|
32
|
+
:style="{ backgroundColor:excluded.includes(yLegend.key) ? '' : yLegend.color }">
|
|
33
|
+
{{ yLegend.key }}
|
|
34
|
+
</div>
|
|
35
|
+
<button v-if="yLegends.length > showedYLegends.length" @click="$refs.legendModal.open()"
|
|
36
|
+
class="bg-text-200 hover:bg-primary-600 w-[21px] h-[21px] rounded-full flex items-center justify-center">
|
|
37
|
+
<svg width="14" height="14" class="fill-white opacity-70" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M64 192C28.61 192 0 220.6 0 256s28.61 64 64 64s64-28.62 64-64S99.39 192 64 192zM256 192C220.6 192 192 220.6 192 256s28.61 64 64 64s64-28.62 64-64S291.4 192 256 192zM448 192c-35.39 0-64 28.62-64 64s28.61 64 64 64s64-28.62 64-64S483.4 192 448 192z"/></svg>
|
|
38
|
+
</button>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
39
41
|
<Modal ref="legendModal" width="320" height="360" :dismissable="true" @dismiss="$refs.legendModal.close()">
|
|
40
42
|
<template v-slot:head>
|
|
41
43
|
<div class="relative p-5">
|
|
@@ -53,8 +55,9 @@
|
|
|
53
55
|
|
|
54
56
|
<div class="flex flex-col divide-y divide-text-50">
|
|
55
57
|
<div v-for="yLegend in yLegends" class="flex flex-row items-center gap-2 py-2">
|
|
56
|
-
<div class="w-[
|
|
58
|
+
<div class="w-[19px] h-[19px] rounded-full" :style="{ backgroundColor:yLegend.color }"></div>
|
|
57
59
|
<div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ yLegend.key }}</div>
|
|
60
|
+
<Checkbox :value="!excluded.includes(yLegend.key)" @click.prevent="toggleExcludes(yLegend)" />
|
|
58
61
|
</div>
|
|
59
62
|
</div>
|
|
60
63
|
|
|
@@ -95,16 +98,18 @@ export default{
|
|
|
95
98
|
|
|
96
99
|
return {
|
|
97
100
|
labels: this.value?.labels ?? [],
|
|
98
|
-
datasets: this.value.datasets
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
101
|
+
datasets: this.value.datasets
|
|
102
|
+
.filter(_ => !this.excluded.includes(_.label))
|
|
103
|
+
.map(_ => {
|
|
104
|
+
return {
|
|
105
|
+
..._,
|
|
106
|
+
borderWidth: 0,
|
|
107
|
+
borderColor: function(context, options) {
|
|
108
|
+
const hex = options.color;
|
|
109
|
+
return color(hex).darken(0.5).rgbString()
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
})
|
|
108
113
|
}
|
|
109
114
|
},
|
|
110
115
|
|
|
@@ -125,7 +130,15 @@ export default{
|
|
|
125
130
|
label: (tooltipItem) => {
|
|
126
131
|
if(this.yAxeMultiple && this.usePercentage)
|
|
127
132
|
return `${tooltipItem.dataset.label}: ${tooltipItem.dataset.data0[tooltipItem.dataIndex]} (${tooltipItem.raw}%)`
|
|
128
|
-
|
|
133
|
+
else{
|
|
134
|
+
if(this.stacked){
|
|
135
|
+
const total = this.value.datasets.reduce((acc, cur) => acc + cur.data[tooltipItem.dataIndex], 0)
|
|
136
|
+
const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
|
|
137
|
+
|
|
138
|
+
return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
|
|
139
|
+
}
|
|
140
|
+
return `${tooltipItem.dataset.label}: ${tooltipItem.raw}`;
|
|
141
|
+
}
|
|
129
142
|
}
|
|
130
143
|
},
|
|
131
144
|
}
|
|
@@ -154,10 +167,15 @@ export default{
|
|
|
154
167
|
y: {
|
|
155
168
|
beginAtZero: true,
|
|
156
169
|
ticks: {
|
|
157
|
-
display:
|
|
170
|
+
display: true,
|
|
158
171
|
font: {
|
|
159
172
|
size: 11,
|
|
160
173
|
},
|
|
174
|
+
callback: (value, index, ticks) => {
|
|
175
|
+
if(this.usePercentage)
|
|
176
|
+
return Math.round(index / (ticks.length - 1) * 100) + '%'
|
|
177
|
+
return value
|
|
178
|
+
},
|
|
161
179
|
},
|
|
162
180
|
grid: {
|
|
163
181
|
display: true,
|
|
@@ -244,13 +262,20 @@ export default{
|
|
|
244
262
|
},
|
|
245
263
|
|
|
246
264
|
resetState(){
|
|
247
|
-
this.setState(1)
|
|
265
|
+
//this.setState(1)
|
|
248
266
|
},
|
|
249
267
|
|
|
250
268
|
setState(state){
|
|
251
269
|
this.readyState = state
|
|
252
270
|
},
|
|
253
271
|
|
|
272
|
+
toggleExcludes(yLegend){
|
|
273
|
+
if(this.excluded.includes(yLegend.key))
|
|
274
|
+
this.excluded.splice(this.excluded.indexOf(yLegend.key), 1)
|
|
275
|
+
else
|
|
276
|
+
this.excluded.push(yLegend.key)
|
|
277
|
+
}
|
|
278
|
+
|
|
254
279
|
},
|
|
255
280
|
|
|
256
281
|
props: {
|
|
@@ -272,6 +297,11 @@ export default{
|
|
|
272
297
|
xAxeMultiple: Boolean,
|
|
273
298
|
yAxeMultiple: Boolean,
|
|
274
299
|
|
|
300
|
+
excluded: {
|
|
301
|
+
type: Array,
|
|
302
|
+
default: []
|
|
303
|
+
},
|
|
304
|
+
|
|
275
305
|
segments: Array,
|
|
276
306
|
xAxesGroup: String,
|
|
277
307
|
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
134
134
|
</div>
|
|
135
135
|
<div class="flex-1 flex flex-row gap-2">
|
|
136
|
-
<Dropdown v-model="item.key" :readonly="readonly" class="flex-1">
|
|
136
|
+
<Dropdown v-model="item.key" :readonly="readonly" class="flex-1" @change="clearExcluded">
|
|
137
137
|
<option v-for="column in selectedDatasourceColumns"
|
|
138
138
|
:value="column.key">
|
|
139
139
|
{{ selectedDatasource.pivot?.enabled ? column.key : column.label }}
|
|
@@ -273,6 +273,10 @@ export default{
|
|
|
273
273
|
this.$util.push(this.interactions, obj)
|
|
274
274
|
},
|
|
275
275
|
|
|
276
|
+
clearExcluded(){
|
|
277
|
+
this.value.props.excluded = []
|
|
278
|
+
},
|
|
279
|
+
|
|
276
280
|
swap(){
|
|
277
281
|
const yAxes = this.value.props.yAxes
|
|
278
282
|
const xAxes = this.value.props.xAxes
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
export default{
|
|
30
30
|
|
|
31
|
-
inject: [ 'alert', 'socket' ],
|
|
31
|
+
inject: [ 'alert', 'preview', 'socket' ],
|
|
32
32
|
|
|
33
33
|
props: {
|
|
34
34
|
src: String
|
|
@@ -67,13 +67,9 @@ export default{
|
|
|
67
67
|
},
|
|
68
68
|
|
|
69
69
|
load(){
|
|
70
|
-
this.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
.then(res => {
|
|
74
|
-
this.res = res
|
|
75
|
-
})
|
|
76
|
-
.catch(err => this.alert(err))
|
|
70
|
+
this.preview(this.datasource)
|
|
71
|
+
.then(res => this.res = res)
|
|
72
|
+
.catch(err => this.alert(err))
|
|
77
73
|
},
|
|
78
74
|
|
|
79
75
|
open(datasource){
|
|
@@ -55,6 +55,19 @@ export default{
|
|
|
55
55
|
legend: {
|
|
56
56
|
display: false
|
|
57
57
|
},
|
|
58
|
+
tooltip: {
|
|
59
|
+
callbacks: {
|
|
60
|
+
title: function(tooltipItems) {
|
|
61
|
+
return `${tooltipItems[0].label}`;
|
|
62
|
+
},
|
|
63
|
+
label: (tooltipItem) => {
|
|
64
|
+
const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0)
|
|
65
|
+
const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
|
|
66
|
+
|
|
67
|
+
return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
},
|
|
58
71
|
},
|
|
59
72
|
onClick: this.onClick
|
|
60
73
|
}
|
|
@@ -41,7 +41,8 @@
|
|
|
41
41
|
|
|
42
42
|
<Dropdown v-model="value.props.rowsModifier"
|
|
43
43
|
:readonly="readonly"
|
|
44
|
-
:class="!value.props.rowsModifier ? 'w-[80px]' : 'w-[150px]'"
|
|
44
|
+
:class="!value.props.rowsModifier ? 'w-[80px]' : 'w-[150px]'"
|
|
45
|
+
@change="$emit('change')">
|
|
45
46
|
<option value="">-</option>
|
|
46
47
|
<option value="lowercase">Lower</option>
|
|
47
48
|
<option value="capitalize">Capitalize</option>
|
|
@@ -71,7 +72,8 @@
|
|
|
71
72
|
|
|
72
73
|
<Dropdown v-model="value.props.columnModifier"
|
|
73
74
|
:readonly="readonly"
|
|
74
|
-
:class="!value.props.columnModifier ? 'w-[80px]' : 'w-[150px]'"
|
|
75
|
+
:class="!value.props.columnModifier ? 'w-[80px]' : 'w-[150px]'"
|
|
76
|
+
@change="$emit('change')">
|
|
75
77
|
<option value="">-</option>
|
|
76
78
|
<option value="count">Count</option>
|
|
77
79
|
<option value="countDistinct">Unique Count</option>
|
|
@@ -54,6 +54,19 @@ export default{
|
|
|
54
54
|
legend: {
|
|
55
55
|
display: false
|
|
56
56
|
},
|
|
57
|
+
tooltip: {
|
|
58
|
+
callbacks: {
|
|
59
|
+
title: function(tooltipItems) {
|
|
60
|
+
return `${tooltipItems[0].label}`;
|
|
61
|
+
},
|
|
62
|
+
label: (tooltipItem) => {
|
|
63
|
+
const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0)
|
|
64
|
+
const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
|
|
65
|
+
|
|
66
|
+
return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
},
|
|
57
70
|
},
|
|
58
71
|
onClick: this.onClick
|
|
59
72
|
}
|
|
@@ -50,11 +50,23 @@ export default{
|
|
|
50
50
|
return {
|
|
51
51
|
responsive: true,
|
|
52
52
|
maintainAspectRatio: true,
|
|
53
|
-
/*animation: false,*/
|
|
54
53
|
plugins: {
|
|
55
54
|
legend: {
|
|
56
55
|
display: false
|
|
57
56
|
},
|
|
57
|
+
tooltip: {
|
|
58
|
+
callbacks: {
|
|
59
|
+
title: function(tooltipItems) {
|
|
60
|
+
return `${tooltipItems[0].label}`;
|
|
61
|
+
},
|
|
62
|
+
label: (tooltipItem) => {
|
|
63
|
+
const total = tooltipItem.dataset.data.reduce((a, b) => a + b, 0)
|
|
64
|
+
const percentage = ((tooltipItem.raw / total) * 100).toFixed(1)
|
|
65
|
+
|
|
66
|
+
return `${tooltipItem.dataset.label}: ${tooltipItem.raw} (${percentage}%)`;
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
},
|
|
58
70
|
},
|
|
59
71
|
scales: {
|
|
60
72
|
r: {
|
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
|
|
41
41
|
<Dropdown v-model="value.props.rowsModifier"
|
|
42
42
|
:readonly="readonly"
|
|
43
|
-
class="w-[125px]"
|
|
43
|
+
class="w-[125px]"
|
|
44
|
+
@change="$emit('change')">
|
|
44
45
|
<option value="">-</option>
|
|
45
46
|
<option value="lowercase">Lower</option>
|
|
46
47
|
<option value="capitalize">Capitalize</option>
|
|
@@ -70,7 +71,8 @@
|
|
|
70
71
|
|
|
71
72
|
<Dropdown v-model="value.props.columnModifier"
|
|
72
73
|
:readonly="readonly"
|
|
73
|
-
class="w-[125px]"
|
|
74
|
+
class="w-[125px]"
|
|
75
|
+
@change="$emit('change')">
|
|
74
76
|
<option value="">-</option>
|
|
75
77
|
<option value="count">Count</option>
|
|
76
78
|
<option value="countDistinct">Unique Count</option>
|
|
@@ -214,136 +214,10 @@
|
|
|
214
214
|
</div>
|
|
215
215
|
|
|
216
216
|
<div v-else-if="selectedDatasource.tabIndex === 4" class="p-5 flex-1 flex flex-col gap-5">
|
|
217
|
-
<div>
|
|
218
|
-
<Checkbox v-model="selectedDatasourcePivot.enabled"
|
|
219
|
-
@change="" :disabled="selectedPreset.readonly">
|
|
220
|
-
Pivot Enabled
|
|
221
|
-
</Checkbox>
|
|
222
|
-
</div>
|
|
223
|
-
|
|
224
|
-
<div class="grid grid-cols-1 gap-6">
|
|
225
|
-
|
|
226
|
-
<div>
|
|
227
|
-
<div class="flex flex-row items-center gap-2">
|
|
228
|
-
<label>Groups</label>
|
|
229
|
-
<button v-if="!selectedPreset.readonly" type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), selectedDatasourcePivotColumns)">
|
|
230
|
-
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
231
|
-
</button>
|
|
232
|
-
</div>
|
|
233
|
-
<ListItem :items="selectedDatasourcePivot.rows"
|
|
234
|
-
@reorder="(from, to) => { selectedDatasourcePivot.rows.splice(to, 0, selectedDatasourcePivot.rows.splice(from, 1)[0]); }"
|
|
235
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
236
|
-
container-class="divide-y divide-text-50">
|
|
237
|
-
<template v-slot="{ item, index }">
|
|
238
|
-
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
239
|
-
<div data-reorder v-if="(selectedDatasourcePivot.rows ?? []).length > 1 && !selectedPreset.readonly">
|
|
240
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
241
|
-
</div>
|
|
242
|
-
<div class="flex-1 flex flex-row gap-3">
|
|
243
|
-
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
244
|
-
@click="!selectedPreset.readonly ? $refs.columnSelector.open(obj => { Object.assign(item, obj); }, selectedDatasourcePivotColumns) : null;">
|
|
245
|
-
{{ item.label ? item.label : item.key }}
|
|
246
|
-
</strong>
|
|
247
|
-
<select v-if="item.type === 'date'"
|
|
248
|
-
v-model="item.aggregrate"
|
|
249
|
-
class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
|
|
250
|
-
@change="">
|
|
251
|
-
<option value="hour">Hour</option>
|
|
252
|
-
<option value="date">Date</option>
|
|
253
|
-
<option value="month">Month</option>
|
|
254
|
-
<option value="year">Year</option>
|
|
255
|
-
</select>
|
|
256
|
-
</div>
|
|
257
|
-
<button v-if="!selectedPreset.readonly" type="button" @click="selectedDatasourcePivot.rows.splice(index, 1); loadPivotData()">
|
|
258
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
259
|
-
</button>
|
|
260
|
-
</div>
|
|
261
|
-
</template>
|
|
262
|
-
</ListItem>
|
|
263
|
-
</div>
|
|
264
|
-
|
|
265
|
-
<div>
|
|
266
|
-
<div class="flex flex-row items-center gap-2">
|
|
267
|
-
<label>Aggregrates</label>
|
|
268
|
-
<button v-if="!selectedPreset.readonly" type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), selectedDatasourcePivotColumns)">
|
|
269
|
-
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
270
|
-
</button>
|
|
271
|
-
</div>
|
|
272
|
-
<ListItem :items="selectedDatasourcePivot.values"
|
|
273
|
-
@reorder="(from, to) => { selectedDatasourcePivot.values.splice(to, 0, selectedDatasourcePivot.values.splice(from, 1)[0]); }"
|
|
274
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
275
|
-
container-class="divide-y divide-text-50">
|
|
276
|
-
<template v-slot="{ item, index }">
|
|
277
|
-
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
278
|
-
<div data-reorder v-if="(selectedDatasourcePivot.values ?? []).length > 1 && !selectedPreset.readonly">
|
|
279
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
280
|
-
</div>
|
|
281
|
-
<div class="flex-1 flex flex-row gap-3">
|
|
282
|
-
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
283
|
-
@click="!selectedPreset.readonly ? $refs.columnSelector.open(obj => { Object.assign(item, obj); }, selectedDatasourcePivotColumns) : null;">
|
|
284
|
-
{{ item.label ? item.label : item.key }}
|
|
285
|
-
</strong>
|
|
286
|
-
<select v-model="item.aggregrate"
|
|
287
|
-
:disabled="selectedPreset.readonly"
|
|
288
|
-
class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
|
|
289
|
-
@change="loadPivotData">
|
|
290
|
-
<option value="">Default</option>
|
|
291
|
-
<option value="count">Count</option>
|
|
292
|
-
<option value="countDistinct">Distinct Count</option>
|
|
293
|
-
<option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
|
|
294
|
-
<option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
|
|
295
|
-
<option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
|
|
296
|
-
<option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
|
|
297
|
-
</select>
|
|
298
|
-
</div>
|
|
299
|
-
<button v-if="!selectedPreset.readonly" type="button" @click="selectedDatasourcePivot.values.splice(index, 1); loadPivotData()">
|
|
300
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
301
|
-
</button>
|
|
302
|
-
</div>
|
|
303
|
-
</template>
|
|
304
|
-
</ListItem>
|
|
305
|
-
</div>
|
|
306
|
-
|
|
307
|
-
<div>
|
|
308
|
-
<div class="flex flex-row items-center gap-2">
|
|
309
|
-
<label class="flex-1">Columns</label>
|
|
310
|
-
<button v-if="selectedDatasourcePivot.manualColumns && !selectedPreset.readonly"
|
|
311
|
-
type="button"
|
|
312
|
-
class="text-primary"
|
|
313
|
-
@click="delete selectedDatasourcePivot.manualColumns; ">Reset</button>
|
|
314
|
-
</div>
|
|
315
|
-
<ListItem :items="selectedDatasourcePivot.columns"
|
|
316
|
-
@reorder="(from, to) => { selectedDatasourcePivot.columns.splice(to, 0, selectedDatasourcePivot.columns.splice(from, 1)[0]); selectedDatasourcePivot.manualColumns = true; }"
|
|
317
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
318
|
-
container-class="divide-y divide-text-50">
|
|
319
|
-
<template v-slot="{ item, index }">
|
|
320
|
-
<div class="flex flex-row gap-2 items-center px-2 bg-base-500">
|
|
321
|
-
<div data-reorder v-if="!selectedPreset.readonly">
|
|
322
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
323
|
-
</div>
|
|
324
|
-
<Textbox class="flex-1 border-none" :readonly="selectedPreset.readonly" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
|
|
325
|
-
item-class="p-1"/>
|
|
326
|
-
<button type="button" v-if="[ 'number' ].includes(item.type) && !selectedPreset.readonly" @click="">
|
|
327
|
-
<svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
|
|
328
|
-
@click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); })"
|
|
329
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
|
|
330
|
-
</button>
|
|
331
|
-
<button v-if="!selectedPreset.readonly" type="button" @click="selectedDatasourcePivot.columns.splice(index, 1); selectedDatasourcePivot.manualColumns = true; ">
|
|
332
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
333
|
-
</button>
|
|
334
|
-
</div>
|
|
335
|
-
</template>
|
|
336
|
-
</ListItem>
|
|
337
|
-
|
|
338
|
-
<PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
|
|
339
|
-
</div>
|
|
340
217
|
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
</div>
|
|
345
|
-
|
|
346
|
-
</div>
|
|
218
|
+
<PresetBarPivot :pivot="selectedDatasourcePivot"
|
|
219
|
+
:columns="selectedDatasourcePivotColumns"
|
|
220
|
+
@apply="updatePivot" />
|
|
347
221
|
|
|
348
222
|
<br />
|
|
349
223
|
</div>
|
|
@@ -659,6 +533,10 @@
|
|
|
659
533
|
|
|
660
534
|
</div>
|
|
661
535
|
|
|
536
|
+
<div class="p-5">
|
|
537
|
+
<Button ref="saveConfigBtn" class="w-[90px] py-2" :state="configChanged ? 1 : -1" @click="save">Save</Button>
|
|
538
|
+
</div>
|
|
539
|
+
|
|
662
540
|
</TransitionGroup>
|
|
663
541
|
|
|
664
542
|
<div :class="$style.resize1"
|
|
@@ -775,6 +653,7 @@ import {defineAsyncComponent} from "vue";
|
|
|
775
653
|
import SharingModal from "./Dashboard/SharingModal.vue";
|
|
776
654
|
import PresetSelectorFilterItem from "../components/PresetSelectorFilterItem.vue";
|
|
777
655
|
import {generatePivotColumns} from "../utils/preset-selector.mjs";
|
|
656
|
+
import PresetBarPivot from "./PresetBarPivot.vue";
|
|
778
657
|
|
|
779
658
|
const findComponents = (items, uid) => {
|
|
780
659
|
if(!Array.isArray(items)) return
|
|
@@ -794,6 +673,7 @@ const findComponents = (items, uid) => {
|
|
|
794
673
|
export default{
|
|
795
674
|
|
|
796
675
|
components: {
|
|
676
|
+
PresetBarPivot,
|
|
797
677
|
DatasourcePreview: defineAsyncComponent(() => import('./Dashboard/DatasourcePreview.vue')),
|
|
798
678
|
PresetSelectorFilterItem,
|
|
799
679
|
SharingModal,
|
|
@@ -826,6 +706,10 @@ export default{
|
|
|
826
706
|
return config
|
|
827
707
|
},
|
|
828
708
|
|
|
709
|
+
configChanged(){
|
|
710
|
+
return JSON.stringify(this.cConfig) !== this.initialConfig
|
|
711
|
+
},
|
|
712
|
+
|
|
829
713
|
componentsConfig(){
|
|
830
714
|
if(!this.cConfig.components)
|
|
831
715
|
this.cConfig.components = {}
|
|
@@ -994,6 +878,8 @@ export default{
|
|
|
994
878
|
|
|
995
879
|
data: {},
|
|
996
880
|
|
|
881
|
+
initialConfig: null,
|
|
882
|
+
|
|
997
883
|
datasourceTabs: [
|
|
998
884
|
/*{ text:"Columns", value:1 },*/
|
|
999
885
|
{ text:"Filters", value:2 },
|
|
@@ -1020,7 +906,7 @@ export default{
|
|
|
1020
906
|
}
|
|
1021
907
|
},
|
|
1022
908
|
|
|
1023
|
-
emits: [ 'change' ],
|
|
909
|
+
emits: [ 'change', 'save' ],
|
|
1024
910
|
|
|
1025
911
|
inject: [ 'alert', 'appStyle', 'confirm', 'socket' ],
|
|
1026
912
|
|
|
@@ -1384,6 +1270,32 @@ export default{
|
|
|
1384
1270
|
this.$router.replace({ query })
|
|
1385
1271
|
},
|
|
1386
1272
|
|
|
1273
|
+
async preview(datasource){
|
|
1274
|
+
return new Promise((resolve, reject) => {
|
|
1275
|
+
this.socket.send(this.previewSrc, { datasource })
|
|
1276
|
+
.then(res => {
|
|
1277
|
+
this.previewData = res
|
|
1278
|
+
resolve(res)
|
|
1279
|
+
})
|
|
1280
|
+
.catch(err => reject(err))
|
|
1281
|
+
})
|
|
1282
|
+
},
|
|
1283
|
+
|
|
1284
|
+
updatePivot(){
|
|
1285
|
+
this.preview(this.selectedDatasource)
|
|
1286
|
+
.then(res => {
|
|
1287
|
+
generatePivotColumns(this.selectedDatasource, res.items)
|
|
1288
|
+
})
|
|
1289
|
+
},
|
|
1290
|
+
|
|
1291
|
+
save(){
|
|
1292
|
+
this.$refs.saveConfigBtn.setState(2)
|
|
1293
|
+
this.socket.send(this.configSrc,
|
|
1294
|
+
{ key:this.configKey, config:this.cConfig })
|
|
1295
|
+
.then(_ => this.initialConfig = JSON.stringify(this.cConfig))
|
|
1296
|
+
.finally(_ => this.$refs.saveConfigBtn.resetState())
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1387
1299
|
},
|
|
1388
1300
|
|
|
1389
1301
|
props:{
|
|
@@ -1391,6 +1303,8 @@ export default{
|
|
|
1391
1303
|
config: Object,
|
|
1392
1304
|
|
|
1393
1305
|
src: String,
|
|
1306
|
+
configSrc: String,
|
|
1307
|
+
configKey: String,
|
|
1394
1308
|
|
|
1395
1309
|
datasourceSrc: String,
|
|
1396
1310
|
datasourceListSrc: String,
|
|
@@ -1413,7 +1327,8 @@ export default{
|
|
|
1413
1327
|
previewDatasource: this.previewDatasource,
|
|
1414
1328
|
emitRoot: this.emitRoot,
|
|
1415
1329
|
getConfig: this.getConfig,
|
|
1416
|
-
selectPreset: this.selectPreset
|
|
1330
|
+
selectPreset: this.selectPreset,
|
|
1331
|
+
preview: this.preview
|
|
1417
1332
|
}
|
|
1418
1333
|
},
|
|
1419
1334
|
|
|
@@ -1437,8 +1352,10 @@ export default{
|
|
|
1437
1352
|
},
|
|
1438
1353
|
|
|
1439
1354
|
cConfig(to, from){
|
|
1440
|
-
if(!from)
|
|
1355
|
+
if(!from){
|
|
1441
1356
|
this.load()
|
|
1357
|
+
this.initialConfig = JSON.stringify(this.cConfig)
|
|
1358
|
+
}
|
|
1442
1359
|
}
|
|
1443
1360
|
|
|
1444
1361
|
}
|
|
@@ -454,137 +454,9 @@
|
|
|
454
454
|
|
|
455
455
|
</div>
|
|
456
456
|
|
|
457
|
-
<div v-else-if="config.presetBarTabIndex === 5" class="flex-1
|
|
457
|
+
<div v-else-if="config.presetBarTabIndex === 5" class="flex-1 p-6">
|
|
458
458
|
|
|
459
|
-
<
|
|
460
|
-
<Checkbox v-model="presetPivot.enabled"
|
|
461
|
-
@change="apply()">
|
|
462
|
-
Pivot Enabled
|
|
463
|
-
</Checkbox>
|
|
464
|
-
</div>
|
|
465
|
-
|
|
466
|
-
<div class="grid grid-cols-1 gap-6">
|
|
467
|
-
|
|
468
|
-
<div>
|
|
469
|
-
<div class="flex flex-row items-center gap-2">
|
|
470
|
-
<label>Groups</label>
|
|
471
|
-
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), pivotColumns)">
|
|
472
|
-
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
473
|
-
</button>
|
|
474
|
-
</div>
|
|
475
|
-
<ListItem :items="presetPivot.rows"
|
|
476
|
-
@reorder="(from, to) => { presetPivot.rows.splice(to, 0, presetPivot.rows.splice(from, 1)[0]); apply() }"
|
|
477
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
478
|
-
container-class="divide-y divide-text-50">
|
|
479
|
-
<template v-slot="{ item, index }">
|
|
480
|
-
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
481
|
-
<div data-reorder v-if="(presetPivot.rows ?? []).length > 1">
|
|
482
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
483
|
-
</div>
|
|
484
|
-
<div class="flex-1 flex flex-row gap-3">
|
|
485
|
-
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
486
|
-
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
|
|
487
|
-
{{ item.label ? item.label : item.key }}
|
|
488
|
-
</strong>
|
|
489
|
-
<select v-if="item.type === 'date'"
|
|
490
|
-
v-model="item.aggregrate"
|
|
491
|
-
class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
|
|
492
|
-
@change="apply()">
|
|
493
|
-
<option value="hour">Hour</option>
|
|
494
|
-
<option value="date">Date</option>
|
|
495
|
-
<option value="month">Month</option>
|
|
496
|
-
<option value="year">Year</option>
|
|
497
|
-
</select>
|
|
498
|
-
</div>
|
|
499
|
-
<button type="button" @click="presetPivot.rows.splice(index, 1); apply()">
|
|
500
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
501
|
-
</button>
|
|
502
|
-
</div>
|
|
503
|
-
</template>
|
|
504
|
-
</ListItem>
|
|
505
|
-
</div>
|
|
506
|
-
|
|
507
|
-
<div>
|
|
508
|
-
<div class="flex flex-row items-center gap-2">
|
|
509
|
-
<label>Aggregrates</label>
|
|
510
|
-
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), pivotColumns)">
|
|
511
|
-
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
512
|
-
</button>
|
|
513
|
-
</div>
|
|
514
|
-
<ListItem :items="presetPivot.values"
|
|
515
|
-
@reorder="(from, to) => { presetPivot.values.splice(to, 0, presetPivot.values.splice(from, 1)[0]); }"
|
|
516
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
517
|
-
container-class="divide-y divide-text-50">
|
|
518
|
-
<template v-slot="{ item, index }">
|
|
519
|
-
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
520
|
-
<div data-reorder v-if="(presetPivot.values ?? []).length > 1">
|
|
521
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
522
|
-
</div>
|
|
523
|
-
<div class="flex-1 flex flex-row gap-3">
|
|
524
|
-
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
525
|
-
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, pivotColumns);">
|
|
526
|
-
{{ item.label ? item.label : item.key }}
|
|
527
|
-
</strong>
|
|
528
|
-
<select v-model="item.aggregrate"
|
|
529
|
-
class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
|
|
530
|
-
@change="apply()">
|
|
531
|
-
<option value="">Default</option>
|
|
532
|
-
<option value="count">Count</option>
|
|
533
|
-
<option value="countDistinct">Distinct Count</option>
|
|
534
|
-
<option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
|
|
535
|
-
<option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
|
|
536
|
-
<option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
|
|
537
|
-
<option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
|
|
538
|
-
</select>
|
|
539
|
-
</div>
|
|
540
|
-
<button type="button" @click="presetPivot.values.splice(index, 1); apply()">
|
|
541
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
542
|
-
</button>
|
|
543
|
-
</div>
|
|
544
|
-
</template>
|
|
545
|
-
</ListItem>
|
|
546
|
-
</div>
|
|
547
|
-
|
|
548
|
-
<div>
|
|
549
|
-
<div class="flex flex-row items-center gap-2">
|
|
550
|
-
<label class="flex-1">Columns</label>
|
|
551
|
-
<button v-if="presetPivot.manualColumns"
|
|
552
|
-
type="button"
|
|
553
|
-
class="text-primary"
|
|
554
|
-
@click="delete presetPivot.manualColumns; apply()">Reset</button>
|
|
555
|
-
</div>
|
|
556
|
-
<ListItem :items="presetPivot.columns"
|
|
557
|
-
@reorder="(from, to) => { presetPivot.columns.splice(to, 0, presetPivot.columns.splice(from, 1)[0]); presetPivot.manualColumns = true; apply() }"
|
|
558
|
-
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
559
|
-
container-class="divide-y divide-text-50">
|
|
560
|
-
<template v-slot="{ item, index }">
|
|
561
|
-
<div class="flex flex-row gap-2 items-center px-2 bg-base-500">
|
|
562
|
-
<div data-reorder>
|
|
563
|
-
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
564
|
-
</div>
|
|
565
|
-
<Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
|
|
566
|
-
item-class="p-1"/>
|
|
567
|
-
<button type="button" v-if="[ 'number' ].includes(item.type)" @click="">
|
|
568
|
-
<svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
|
|
569
|
-
@click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); apply() })"
|
|
570
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
|
|
571
|
-
</button>
|
|
572
|
-
<button type="button" @click="presetPivot.columns.splice(index, 1); presetPivot.manualColumns = true; apply()">
|
|
573
|
-
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
574
|
-
</button>
|
|
575
|
-
</div>
|
|
576
|
-
</template>
|
|
577
|
-
</ListItem>
|
|
578
|
-
|
|
579
|
-
<PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
|
|
580
|
-
</div>
|
|
581
|
-
|
|
582
|
-
<div class="flex flex-row items-center gap-3">
|
|
583
|
-
<label>Total</label>
|
|
584
|
-
<Switch v-model="presetPivot.useTotal" @change="apply()"/>
|
|
585
|
-
</div>
|
|
586
|
-
|
|
587
|
-
</div>
|
|
459
|
+
<PresetBarPivot :pivot="presetPivot" :columns="pivotColumns" @apply="apply"/>
|
|
588
460
|
|
|
589
461
|
</div>
|
|
590
462
|
|
|
@@ -622,10 +494,11 @@
|
|
|
622
494
|
<script>
|
|
623
495
|
|
|
624
496
|
import PresetSelectorFilterItem from "../components/PresetSelectorFilterItem.vue";
|
|
497
|
+
import PresetBarPivot from "./PresetBarPivot.vue";
|
|
625
498
|
|
|
626
499
|
export default{
|
|
627
500
|
|
|
628
|
-
components: {PresetSelectorFilterItem},
|
|
501
|
+
components: {PresetBarPivot, PresetSelectorFilterItem},
|
|
629
502
|
|
|
630
503
|
emits: [ 'apply' ],
|
|
631
504
|
|
|
@@ -648,11 +521,6 @@ export default{
|
|
|
648
521
|
this.apply()
|
|
649
522
|
},
|
|
650
523
|
|
|
651
|
-
addPivot(type, obj){
|
|
652
|
-
this.presetPivot[type].push(Object.assign({}, obj))
|
|
653
|
-
this.apply()
|
|
654
|
-
},
|
|
655
|
-
|
|
656
524
|
addSort(obj){
|
|
657
525
|
if(!Array.isArray(this.preset.sorts))
|
|
658
526
|
this.preset.sorts = []
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-col gap-6">
|
|
3
|
+
|
|
4
|
+
<div>
|
|
5
|
+
<Checkbox v-model="pivot.enabled"
|
|
6
|
+
@change="apply()">
|
|
7
|
+
Pivot Enabled
|
|
8
|
+
</Checkbox>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div class="grid grid-cols-1 gap-6">
|
|
12
|
+
|
|
13
|
+
<div>
|
|
14
|
+
<div class="flex flex-row items-center gap-2">
|
|
15
|
+
<label>Groups</label>
|
|
16
|
+
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('rows', obj), columns)">
|
|
17
|
+
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
18
|
+
</button>
|
|
19
|
+
</div>
|
|
20
|
+
<ListItem :items="pivot.rows"
|
|
21
|
+
@reorder="(from, to) => { pivot.rows.splice(to, 0, pivot.rows.splice(from, 1)[0]); apply() }"
|
|
22
|
+
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
23
|
+
container-class="divide-y divide-text-50">
|
|
24
|
+
<template v-slot="{ item, index }">
|
|
25
|
+
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
26
|
+
<div data-reorder v-if="(pivot.rows ?? []).length > 1">
|
|
27
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="flex-1 flex flex-row gap-3">
|
|
30
|
+
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
31
|
+
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, columns);">
|
|
32
|
+
{{ item.label ? item.label : item.key }}
|
|
33
|
+
</strong>
|
|
34
|
+
<select v-if="item.type === 'date'"
|
|
35
|
+
v-model="item.aggregrate"
|
|
36
|
+
class="px-1 appearance-none bg-base-300 rounded-md border-[1px] border-text-50 outline-none"
|
|
37
|
+
@change="apply()">
|
|
38
|
+
<option value="hour">Hour</option>
|
|
39
|
+
<option value="date">Date</option>
|
|
40
|
+
<option value="month">Month</option>
|
|
41
|
+
<option value="year">Year</option>
|
|
42
|
+
</select>
|
|
43
|
+
</div>
|
|
44
|
+
<button type="button" @click="pivot.rows.splice(index, 1); apply()">
|
|
45
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
46
|
+
</button>
|
|
47
|
+
</div>
|
|
48
|
+
</template>
|
|
49
|
+
</ListItem>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div>
|
|
53
|
+
<div class="flex flex-row items-center gap-2">
|
|
54
|
+
<label>Aggregrates</label>
|
|
55
|
+
<button type="button" @click="$refs.columnSelector.open(obj => addPivot('values', obj), columns)">
|
|
56
|
+
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
|
|
57
|
+
</button>
|
|
58
|
+
</div>
|
|
59
|
+
<ListItem :items="pivot.values"
|
|
60
|
+
@reorder="(from, to) => { pivot.values.splice(to, 0, pivot.values.splice(from, 1)[0]); }"
|
|
61
|
+
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
62
|
+
container-class="divide-y divide-text-50">
|
|
63
|
+
<template v-slot="{ item, index }">
|
|
64
|
+
<div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
|
|
65
|
+
<div data-reorder v-if="(pivot.values ?? []).length > 1">
|
|
66
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="flex-1 flex flex-row gap-3">
|
|
69
|
+
<strong class="flex-1 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap"
|
|
70
|
+
@click="$refs.columnSelector.open(obj => { Object.assign(item, obj); apply() }, columns);">
|
|
71
|
+
{{ item.label ? item.label : item.key }}
|
|
72
|
+
</strong>
|
|
73
|
+
<select v-model="item.aggregrate"
|
|
74
|
+
class="px-1 appearance-none bg-base-300 w-[80px] rounded-md border-[1px] border-text-50 outline-none"
|
|
75
|
+
@change="apply()">
|
|
76
|
+
<option value="">Default</option>
|
|
77
|
+
<option value="count">Count</option>
|
|
78
|
+
<option value="countDistinct">Distinct Count</option>
|
|
79
|
+
<option v-if="[ 'number' ].includes(item.type)" value="sum">Sum</option>
|
|
80
|
+
<option v-if="[ 'number' ].includes(item.type)" value="avg">Average</option>
|
|
81
|
+
<option v-if="[ 'number' ].includes(item.type)" value="min">Min</option>
|
|
82
|
+
<option v-if="[ 'number' ].includes(item.type)" value="max">Max</option>
|
|
83
|
+
</select>
|
|
84
|
+
</div>
|
|
85
|
+
<button type="button" @click="pivot.values.splice(index, 1); apply()">
|
|
86
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</template>
|
|
90
|
+
</ListItem>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div>
|
|
94
|
+
<div class="flex flex-row items-center gap-2">
|
|
95
|
+
<label class="flex-1">Columns</label>
|
|
96
|
+
<button v-if="pivot.manualColumns"
|
|
97
|
+
type="button"
|
|
98
|
+
class="text-primary"
|
|
99
|
+
@click="delete pivot.manualColumns; apply()">Reset</button>
|
|
100
|
+
</div>
|
|
101
|
+
<ListItem :items="pivot.columns"
|
|
102
|
+
@reorder="(from, to) => { pivot.columns.splice(to, 0, pivot.columns.splice(from, 1)[0]); pivot.manualColumns = true; apply() }"
|
|
103
|
+
class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
|
|
104
|
+
container-class="divide-y divide-text-50">
|
|
105
|
+
<template v-slot="{ item, index }">
|
|
106
|
+
<div class="flex flex-row gap-2 items-center px-2 bg-base-500">
|
|
107
|
+
<div data-reorder>
|
|
108
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
109
|
+
</div>
|
|
110
|
+
<Textbox class="flex-1 border-none" :class="$style.columnTextbox" v-model="item.label2" :placeholder="item.label"
|
|
111
|
+
item-class="p-1"/>
|
|
112
|
+
<button type="button" v-if="[ 'number' ].includes(item.type)" @click="">
|
|
113
|
+
<svg width="13" height="13" :class="(item.appearances ?? []).length > 0 ? 'fill-primary' : 'fill-text-300 hover:fill-primary'"
|
|
114
|
+
@click="$refs.presetBarPivotColumnEdit.open(item, next => { Object.assign(item, next); apply() })"
|
|
115
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 0h-128C21.49 0 0 21.49 0 48v128C0 202.5 21.49 224 48 224h128C202.5 224 224 202.5 224 176v-128C224 21.49 202.5 0 176 0zM176 288h-128C21.49 288 0 309.5 0 336v128C0 490.5 21.49 512 48 512h128C202.5 512 224 490.5 224 464v-128C224 309.5 202.5 288 176 288zM464 0h-128C309.5 0 288 21.49 288 48v128C288 202.5 309.5 224 336 224h128C490.5 224 512 202.5 512 176v-128C512 21.49 490.5 0 464 0zM488 376h-64v-64C424 298.8 413.3 288 400 288s-24 10.75-24 24v64h-64c-13.25 0-24 10.75-24 24s10.75 24 24 24h64v64c0 13.25 10.75 24 24 24s24-10.75 24-24v-64h64c13.25 0 24-10.75 24-24S501.3 376 488 376z"/></svg>
|
|
116
|
+
</button>
|
|
117
|
+
<button type="button" @click="pivot.columns.splice(index, 1); pivot.manualColumns = true; apply()">
|
|
118
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
119
|
+
</button>
|
|
120
|
+
</div>
|
|
121
|
+
</template>
|
|
122
|
+
</ListItem>
|
|
123
|
+
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div class="flex flex-row items-center gap-3">
|
|
127
|
+
<label>Total</label>
|
|
128
|
+
<Switch v-model="pivot.useTotal" @change="apply()"/>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<ColumnSelector ref="columnSelector" />
|
|
134
|
+
|
|
135
|
+
<PresetBarPivotColumnEdit ref="presetBarPivotColumnEdit" />
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
</template>
|
|
139
|
+
|
|
140
|
+
<script>
|
|
141
|
+
|
|
142
|
+
import PresetBarPivotColumnEdit from "./PresetBarPivotColumnEdit.vue";
|
|
143
|
+
import ColumnSelector from "./ColumnSelector.vue";
|
|
144
|
+
|
|
145
|
+
export default{
|
|
146
|
+
components: {ColumnSelector, PresetBarPivotColumnEdit},
|
|
147
|
+
|
|
148
|
+
emits: [ 'apply' ],
|
|
149
|
+
|
|
150
|
+
methods: {
|
|
151
|
+
|
|
152
|
+
apply(){
|
|
153
|
+
this.$emit('apply')
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
addPivot(type, obj){
|
|
157
|
+
console.log(this.pivot, type)
|
|
158
|
+
this.pivot[type].push(Object.assign({}, obj))
|
|
159
|
+
this.apply()
|
|
160
|
+
},
|
|
161
|
+
|
|
162
|
+
},
|
|
163
|
+
|
|
164
|
+
props:{
|
|
165
|
+
|
|
166
|
+
columns: Array,
|
|
167
|
+
|
|
168
|
+
pivot: Object
|
|
169
|
+
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
</script>
|
|
175
|
+
|
|
176
|
+
<style module>
|
|
177
|
+
|
|
178
|
+
.comp{
|
|
179
|
+
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.columnTextbox input::placeholder{
|
|
183
|
+
@apply text-text;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
</style>
|