Skip to content

Commit 29386d4

Browse files
graphierosgraphieros
committed
Fix - VueUiTable - Update component dynamically when dataset changes
1 parent ce7c7e9 commit 29386d4

File tree

4 files changed

+895
-728
lines changed

4 files changed

+895
-728
lines changed

‎TestingArena/ArenaVueUiTable.vue‎

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
<script setup>
2+
import { ref, computed, onMounted } from "vue";
3+
import LocalVueUiTable from '../src/components/vue-ui-table.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import { useArena } from "../src/useArena";
8+
9+
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
10+
11+
const head = ref([
12+
{
13+
name: "touchpoint",
14+
type: "text",
15+
average: false,
16+
decimals: undefined,
17+
sum: false,
18+
isSort: true,
19+
isSearch: true,
20+
isMultiselect: true,
21+
isPercentage: false,
22+
percentageTo: undefined,
23+
suffix: "",
24+
prefix: "",
25+
rangeFilter: false,
26+
},
27+
{
28+
name: "category",
29+
type: "text",
30+
average: false,
31+
decimals: undefined,
32+
sum: false,
33+
isSort: false,
34+
isSearch: false,
35+
isMultiselect: true,
36+
isPercentage: false,
37+
percentageTo: undefined,
38+
suffix: "",
39+
prefix: "",
40+
rangeFilter: false,
41+
},
42+
{
43+
name: "date",
44+
type: "date",
45+
average: false,
46+
decimals: undefined,
47+
sum: false,
48+
isSort: true,
49+
isSearch: false,
50+
isMultiselect: false,
51+
isPercentage: false,
52+
percentageTo: undefined,
53+
suffix: "",
54+
prefix: "",
55+
rangeFilter: false,
56+
},
57+
{
58+
name: "base",
59+
type: "numeric",
60+
average: true,
61+
decimals: 0,
62+
sum: true,
63+
isSort: true,
64+
isSearch: false,
65+
isMultiselect: false,
66+
isPercentage: false,
67+
percentageTo: undefined,
68+
suffix: "",
69+
prefix: "",
70+
rangeFilter: false,
71+
},
72+
{
73+
name: "rating",
74+
type: "numeric",
75+
decimals: 1,
76+
average: true,
77+
sum: false,
78+
isSort: true,
79+
isSearch: false,
80+
isMultiselect: false,
81+
isPercentage: false,
82+
percentageTo: undefined,
83+
suffix: "",
84+
prefix: "",
85+
rangeFilter: true,
86+
},
87+
{
88+
name: "spend",
89+
type: "numeric",
90+
decimals: 1,
91+
average: true,
92+
sum: true,
93+
isSort: true,
94+
isSearch: false,
95+
isMultiselect: false,
96+
isPercentage: false,
97+
percentageTo: undefined,
98+
suffix: "€",
99+
prefix: "",
100+
rangeFilter: true,
101+
},
102+
{
103+
name: "percentage",
104+
type: "numeric",
105+
decimals: 1,
106+
average: false,
107+
sum: false,
108+
isSort: true,
109+
isSearch: false,
110+
isMultiselect: false,
111+
isPercentage: true, // requires an empty slot in the body td arrays!
112+
percentageTo: "base",
113+
suffix: "",
114+
prefix: "",
115+
rangeFilter: false,
116+
},
117+
{
118+
name: "happy",
119+
type: "numeric",
120+
decimals: 0,
121+
average: true,
122+
sum: true,
123+
isSort: true,
124+
isSearch: false,
125+
isMultiselect: false,
126+
isPercentage: false,
127+
percentageTo: "base",
128+
suffix: "",
129+
prefix: "",
130+
rangeFilter: false,
131+
},
132+
{
133+
name: "sad",
134+
type: "numeric",
135+
decimals: 0,
136+
average: true,
137+
sum: true,
138+
isSort: true,
139+
isSearch: false,
140+
isMultiselect: false,
141+
isPercentage: false,
142+
percentageTo: "base",
143+
suffix: "",
144+
prefix: "",
145+
rangeFilter: false,
146+
},
147+
]);
148+
149+
function makeBody(n) {
150+
const categories = ["Accueil", "Magasin", "Caisse", "SAV"];
151+
const itemNames = [
152+
"Qualité du service",
153+
"Rapidité de livraison",
154+
"Efficacité du personnel",
155+
"Variété des produits",
156+
"Propreté des lieux",
157+
"Réactivité du support",
158+
"Prix compétitifs",
159+
"Expérience utilisateur",
160+
"Fiabilité du matériel",
161+
];
162+
163+
function generateRandomData() {
164+
const items = [];
165+
166+
for (let i = 0; i < n; i += 1) {
167+
const itemName = getRandomItemName();
168+
const category = getRandomCategory();
169+
let accueil = Math.random() * 100;
170+
const date = getRandomDate();
171+
const data = [
172+
itemName,
173+
category,
174+
date,
175+
accueil,
176+
Number((Math.random() * 5).toFixed(1)),
177+
Math.random() * 200,
178+
"",
179+
Math.random() * (Math.random() > 0.5 ? 150 : -30),
180+
Math.random() * 350,
181+
];
182+
items.push({ td: data });
183+
}
184+
185+
return items;
186+
}
187+
188+
function getRandomItemName() {
189+
const randomIndex = Math.floor(Math.random() * itemNames.length);
190+
return itemNames[randomIndex];
191+
}
192+
193+
function getRandomCategory() {
194+
const randomIndex = Math.floor(Math.random() * categories.length);
195+
return categories[randomIndex];
196+
}
197+
198+
function getRandomDate() {
199+
const start = new Date(2023, 0, 1).getTime();
200+
const end = new Date(2023, 11, 31).getTime();
201+
const randomTime = Math.random() * (end - start) + start;
202+
const randomDate = new Date(randomTime);
203+
const formattedDate = randomDate.toISOString().split("T")[0];
204+
return formattedDate;
205+
}
206+
return generateRandomData();
207+
}
208+
209+
const body = ref(makeBody(100))
210+
211+
const dataset = ref( {
212+
header: head.value,
213+
body: body.value,
214+
})
215+
216+
onMounted(() => {
217+
setTimeout(() => {
218+
dataset.value.body = makeBody(200)
219+
}, 3000)
220+
})
221+
222+
</script>
223+
224+
<template>
225+
<div style="background: white">
226+
<LocalVueUiTable :dataset="dataset"/>
227+
</div>
228+
</template>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,4 +110,4 @@
110110
"vitest": "^3.1.1",
111111
"vue": "^3.5.14"
112112
}
113-
}
113+
}

‎src/App.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ import ArenaVueUiFunnel from "../TestingArena/ArenaVueUiFunnel.vue";
5454
import ArenaVueUiHistoryPlot from "../TestingArena/ArenaVueUiHistoryPlot.vue";
5555
import ArenaVueUiCirclePack from "../TestingArena/ArenaVueUiCirclePack.vue";
5656
import ArenaVueUiWorld from "../TestingArena/ArenaVueUiWorld.vue";
57+
import ArenaVueUiTable from "../TestingArena/ArenaVueUiTable.vue";
5758
5859
const components = ref([ //------|
5960
/*____________________*/"VueUiXy", // 0
@@ -109,6 +110,7 @@ const components = ref([ //------|
109110
/*___________*/"VueUiHistoryPlot", // 50
110111
/*____________*/"VueUiCirclePack", // 51
111112
/*_________________*/"VueUiWorld", // 52
113+
/*_________________*/"VueUiTable", // 53
112114
113115
/**
114116
* TODO: migrate manual testing for the following:
@@ -121,7 +123,7 @@ const components = ref([ //------|
121123
* Modify the index to display a component
122124
* [0] = VueUiXy
123125
*/
124-
const selectedComponent = ref(components.value[52]);
126+
const selectedComponent = ref(components.value[53]);
125127
126128
/**
127129
* Legacy testing arena where some non chart components can be tested
@@ -297,8 +299,11 @@ const showOldArena = ref(false);
297299
<!-- 51 -->
298300
<ArenaVueUiCirclePack v-if="selectedComponent === 'VueUiCirclePack'" />
299301

300-
<!-- 51 -->
302+
<!-- 52 -->
301303
<ArenaVueUiWorld v-if="selectedComponent === 'VueUiWorld'" />
302304

305+
<!-- 53 -->
306+
<ArenaVueUiTable v-if="selectedComponent === 'VueUiTable'" />
307+
303308
<!-- Add testing arena for new components here -->
304309
</template>

0 commit comments

Comments
 (0)