[READ-ONLY] Mirror of https://github.com/graphieros/vue-data-ui. An open source user-empowering data visualization Vue 3 components library for eloquent data storytelling
vue-data-ui.graphieros.com/
charts
components-library
dashboard
data-storytelling
data-visualization
donut
gauge
heatmap
quadrant
radar
rating-stars
scatter
screenshot
skeleton-loader
sparkline
table
vue-data-ui
vue3
vuejs
vuejs3
feat(manual-testing): add tasks wordcloud
graphieros
(Jun 20, 2026, 12:14 AM +0200)
1b5ce437
21b1797c
+77
+77
manual-testing/src/components/TodoList.vue
+77
manual-testing/src/components/TodoList.vue
···
7
7
VueUiHorizontalBar,
8
8
VueUiIcon,
9
9
VueUiXy,
10
+
VueUiWordCloud
10
11
} from 'vue-data-ui';
11
12
import PendingTodoList from './PendingTodoList.vue';
12
13
import DoneTodoList from './DoneTodoList.vue';
···
23
24
updateOne,
24
25
deleteOne,
25
26
} = useCrud('/api/items');
27
+
26
28
27
29
onMounted(() => {
28
30
readAll();
···
690
692
},
691
693
};
692
694
});
695
+
696
+
const ignoredWords = [
697
+
'IN',
698
+
'ADD',
699
+
'TO',
700
+
'A',
701
+
'IS',
702
+
'AS',
703
+
'TO',
704
+
'1',
705
+
'AND',
706
+
'WITH',
707
+
'BE',
708
+
'WHERE',
709
+
'THE',
710
+
'FOR',
711
+
'OF',
712
+
'NO',
713
+
'NOT',
714
+
'OR',
715
+
'ON',
716
+
'IF',
717
+
'2',
718
+
'3',
719
+
'4',
720
+
'5',
721
+
'6',
722
+
'7',
723
+
'8',
724
+
'9',
725
+
'0',
726
+
'AT',
727
+
'IT',
728
+
'G',
729
+
'AN',
730
+
'BY',
731
+
'IN',
732
+
'UP',
733
+
'HAS',
734
+
'SHOULD'
735
+
].map(el => el.toLowerCase())
736
+
737
+
const wordCloudData = computed(() => {
738
+
const words = items.value
739
+
.map(item => [item.title.toLowerCase(), item.description.toLowerCase()].join(' ')
740
+
.split(' ')
741
+
.map(w => w.replace('VUEUI', '').replaceAll(',', ' ').replaceAll('_', '').replaceAll('.', ' ').replaceAll('#', '').replaceAll('&', '').replaceAll('-', ' ').replaceAll(':', ' ').replaceAll('/', ' ').replaceAll('(', ' ').replaceAll(')', ' ').replaceAll("'", '').replaceAll('"', '').trim())
742
+
.filter(w => !ignoredWords.includes(w))
743
+
.join(' '))
744
+
.join(' ')
745
+
746
+
console.log(words)
747
+
return words
748
+
});
749
+
750
+
const wordCloudConfig = computed(() => ({
751
+
theme: 'dark',
752
+
userOptions: {
753
+
show: false,
754
+
},
755
+
style: {
756
+
chart: {
757
+
words: {
758
+
color: '#AAAAAA',
759
+
usePalette: false,
760
+
proximity: 20,
761
+
packingWeight: 10,
762
+
}
763
+
}
764
+
}
765
+
}))
766
+
693
767
</script>
694
768
695
769
<template>
770
+
<div style="width:100%; max-width: 500px; margin: 0 auto;">
771
+
<VueUiWordCloud v-if="wordCloudData" :dataset="wordCloudData" :config="wordCloudConfig"/>
772
+
</div>
696
773
<button class="open-btn" @click="openDialog()">
697
774
<VueUiIcon name="checkList" stroke="#8A8A8A" />
698
775
<div class="badge" v-if="toBeDone.length">