@mixd-id/web-scaffold 0.1.230406347 → 0.1.230406348
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/widgets/Dashboard/BarChart.vue +45 -9
- package/src/widgets/Dashboard/BarChartSetting.vue +1 -1
- package/src/widgets/Dashboard/Doughnut.vue +1 -1
- package/src/widgets/Dashboard/DoughnutSetting.vue +3 -2
- package/src/widgets/Dashboard/GHeatMapsSetting.vue +1 -1
- package/src/widgets/Dashboard/PieSetting.vue +1 -1
- package/src/widgets/Dashboard/PolarAreaSetting.vue +1 -1
- package/src/widgets/Dashboard/VirtualTableSetting.vue +1 -1
- package/src/widgets/Dashboard.vue +20 -17
package/package.json
CHANGED
|
@@ -14,7 +14,21 @@
|
|
|
14
14
|
</div>
|
|
15
15
|
|
|
16
16
|
<div v-else class="flex flex-col gap-3">
|
|
17
|
-
<
|
|
17
|
+
<div class="flex flex-row items-center gap-4">
|
|
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
|
+
</div>
|
|
18
32
|
|
|
19
33
|
<div class="flex-1">
|
|
20
34
|
<Bar :style="barStyles"
|
|
@@ -22,14 +36,32 @@
|
|
|
22
36
|
:data="chartData"/>
|
|
23
37
|
</div>
|
|
24
38
|
|
|
25
|
-
<
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
39
|
+
<Modal ref="legendModal" width="320" height="360" :dismissable="true" @dismiss="$refs.legendModal.close()">
|
|
40
|
+
<template v-slot:head>
|
|
41
|
+
<div class="relative p-5">
|
|
42
|
+
<h3>Legend</h3>
|
|
43
|
+
<div class="absolute top-0 right-0 p-2">
|
|
44
|
+
<button type="button" class="p-2" @click="$refs.legendModal.close()">
|
|
45
|
+
<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
|
|
46
|
+
<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
|
|
47
|
+
</svg>
|
|
48
|
+
</button>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
<div class="flex-1 p-5 pt-0">
|
|
53
|
+
|
|
54
|
+
<div class="flex flex-col divide-y divide-text-50">
|
|
55
|
+
<div v-for="yLegend in yLegends" class="flex flex-row items-center gap-2 py-2">
|
|
56
|
+
<div class="w-[24px] h-[24px] rounded-full" :style="{ backgroundColor:yLegend.color }"></div>
|
|
57
|
+
<div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden">{{ yLegend.key }}</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<br />
|
|
62
|
+
|
|
31
63
|
</div>
|
|
32
|
-
</
|
|
64
|
+
</Modal>
|
|
33
65
|
</div>
|
|
34
66
|
|
|
35
67
|
</div>
|
|
@@ -146,7 +178,11 @@ export default{
|
|
|
146
178
|
|
|
147
179
|
yLegends(){
|
|
148
180
|
return this.value?.yLegends ?? []
|
|
149
|
-
}
|
|
181
|
+
},
|
|
182
|
+
|
|
183
|
+
showedYLegends(){
|
|
184
|
+
return this.yLegends.slice(0, 5)
|
|
185
|
+
},
|
|
150
186
|
|
|
151
187
|
},
|
|
152
188
|
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
<div class="flex flex-col gap-1">
|
|
27
27
|
<label class="flex-1">Label</label>
|
|
28
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
28
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
<div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
|
|
@@ -11,7 +11,8 @@
|
|
|
11
11
|
<Dropdown class="min-w-[150px]"
|
|
12
12
|
:readonly="readonly"
|
|
13
13
|
v-model="value.props.datasourceUid"
|
|
14
|
-
@change="delete value.props.columns">
|
|
14
|
+
@change="delete value.props.columns;">
|
|
15
|
+
<option disabled selected>Select Datasource</option>
|
|
15
16
|
<option v-for="obj in datasource"
|
|
16
17
|
:value="obj.uid">
|
|
17
18
|
{{ obj.name }}
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
|
|
22
23
|
<div>
|
|
23
24
|
<label class="text-text-400">Label</label>
|
|
24
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
25
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
25
26
|
</div>
|
|
26
27
|
|
|
27
28
|
<div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
<div>
|
|
23
23
|
<label class="text-text-400">Label</label>
|
|
24
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
24
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
27
|
<div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
|
|
26
26
|
<div class="flex flex-col gap-1">
|
|
27
27
|
<label class="text-text-400">Label</label>
|
|
28
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
28
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
<div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
<div>
|
|
23
23
|
<label class="text-text-400">Label</label>
|
|
24
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
24
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
27
|
<div v-if="value.props.datasourceUid" class="flex flex-col gap-5">
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
<div class="flex flex-col gap-1">
|
|
17
17
|
<label class="text-text-400">Label</label>
|
|
18
|
-
<Textbox v-model="value.props.label" maxlength="
|
|
18
|
+
<Textbox v-model="value.props.label" maxlength="50" placeholder="Label" :readonly="readonly" />
|
|
19
19
|
</div>
|
|
20
20
|
|
|
21
21
|
<div class="flex flex-row items-center">
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
<button type="button" @click="delete cConfig.selectedView">
|
|
12
12
|
<svg width="16" height="16" class="fill-text hover: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="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/></svg>
|
|
13
13
|
</button>
|
|
14
|
-
<div class="leading-tight">
|
|
14
|
+
<div class="leading-tight flex-1">
|
|
15
15
|
<small class="text-xs text-text-400">{{ selectedView.type }}</small>
|
|
16
|
-
<h5 class="flex-1" @click="log(selectedView)">
|
|
16
|
+
<h5 class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap" @click="log(selectedView)">
|
|
17
17
|
{{ selectedView.props.label ?? selectedView.name }}
|
|
18
18
|
</h5>
|
|
19
19
|
</div>
|
|
@@ -575,7 +575,8 @@
|
|
|
575
575
|
container-class="divide-y divide-text-50">
|
|
576
576
|
<template v-slot="{ item, index }">
|
|
577
577
|
<div class="flex flex-row items-center gap-1 bg-base-500 hover:bg-text-50 pl-3">
|
|
578
|
-
<Radio class="flex-1 py-3"
|
|
578
|
+
<Radio class="flex-1 py-3" :checked="item.uid === cConfig.viewedUid"
|
|
579
|
+
@click="(e) => e.shiftKey ? openPreset(item.uid) : selectPreset(item.uid)">
|
|
579
580
|
{{ item.name }}
|
|
580
581
|
</Radio>
|
|
581
582
|
<button :ref="`sharedPresetItemBtn${index}`"
|
|
@@ -1210,20 +1211,22 @@ export default{
|
|
|
1210
1211
|
|
|
1211
1212
|
const currentDatasource = this.viewedPreset.datasource.find(_ => _.uid === item.datasourceUid)
|
|
1212
1213
|
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1214
|
+
if(currentDatasource){
|
|
1215
|
+
results.push({
|
|
1216
|
+
datasource: {
|
|
1217
|
+
...currentDatasource,
|
|
1218
|
+
...(uids && uids[item.uid] ? uids[item.uid] : {}),
|
|
1219
|
+
type: currentDatasource.type,
|
|
1220
|
+
filters: [
|
|
1221
|
+
...(currentDatasource.filters ?? []),
|
|
1222
|
+
...(this.queryFilters[currentDatasource.uid] ?? [])
|
|
1223
|
+
]
|
|
1224
|
+
},
|
|
1225
|
+
type: item.type,
|
|
1226
|
+
uid: item.uid,
|
|
1227
|
+
...item
|
|
1228
|
+
})
|
|
1229
|
+
}
|
|
1227
1230
|
}
|
|
1228
1231
|
else if(item.items){
|
|
1229
1232
|
const subResults = this.recurseViews(item.items, uids)
|