Skip to content

Commit 81e8cb1

Browse files
graphierosgraphieros
committed
VueUiTreemap new component
1 parent ca72091 commit 81e8cb1

19 files changed

+1907
-31
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
1414
![NPM](https://img.shields.io/npm/l/vue-data-ui)
1515
![npm](https://img.shields.io/npm/dt/vue-data-ui)
16-
![Static Badge](https://img.shields.io/badge/components-41-green)
16+
![Static Badge](https://img.shields.io/badge/components-42-green)
1717

1818
[Interactive documentation](https://vue-data-ui.graphieros.com/)
1919

@@ -42,6 +42,7 @@ Available components:
4242
- [VueUiScatter](https://vue-data-ui.graphieros.com/docs#vue-ui-scatter)
4343
- [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
4444
- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
45+
- [VueUiTreemap](https://vue-data-ui.graphieros.com/docs#vue-ui-treemap)
4546
- [VueUiVerticalBar](https://vue-data-ui.graphieros.com/docs#vue-ui-vertical-bar)
4647
- [VueUiWaffle](https://vue-data-ui.graphieros.com/docs#vue-ui-waffle)
4748
- [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
@@ -236,6 +237,7 @@ The following charts bear these slots:
236237
- VueUiRadar
237238
- VueUiRings
238239
- VueUiScatter
240+
- VueUiTreemap
239241
- VueUiVerticalBar
240242
- VueUiXy \*
241243
- VueUiwaffle

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.61",
4+
"version": "2.0.62",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -12,7 +12,9 @@
1212
"annotator",
1313
"candlestick",
1414
"chart",
15+
"cluster",
1516
"dashboard",
17+
"data storytelling",
1618
"data visualization",
1719
"donut evolution",
1820
"donut",
@@ -39,6 +41,7 @@
3941
"thermometer",
4042
"tiremarks",
4143
"tree",
44+
"treemap",
4245
"waffle",
4346
"wheel"
4447
],

‎src/App.vue‎

Lines changed: 142 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import VueDataUiTest from "./components/vue-data-ui.vue";
5656
import VueDataUi from "./components/vue-data-ui.vue";
5757
import VueUiKpiTest from "./components/vue-ui-kpi.vue";
5858
import GalaxyTest from "./components/vue-ui-galaxy.vue";
59+
import TreemapTest from "./components/vue-ui-treemap.vue";
5960
6061
const dataset = ref([
6162
{
@@ -2156,7 +2157,8 @@ const skeletonOptions = ref([
21562157
'pyramid',
21572158
'rings',
21582159
'wheel',
2159-
'donutEvolution'
2160+
'donutEvolution',
2161+
'treemap'
21602162
]);
21612163
21622164
const skeletonChoice = ref('donutEvolution')
@@ -2924,6 +2926,112 @@ const kpiConfig = ref(
29242926
}
29252927
)
29262928
2929+
const treemapDataset = ref(
2930+
[
2931+
{
2932+
name: "Parent 1",
2933+
value: 100,
2934+
children: [
2935+
{
2936+
name: "P1 C1",
2937+
value: 80,
2938+
},
2939+
{
2940+
name: 'P1 C2',
2941+
value: 20
2942+
},
2943+
{
2944+
name: 'P1 C3',
2945+
value: 10,
2946+
},
2947+
]
2948+
},
2949+
{
2950+
name: "Parent 2",
2951+
value: 100,
2952+
children: [
2953+
{
2954+
name: "P2 C1",
2955+
value: 80,
2956+
},
2957+
{
2958+
name: 'P2 C2',
2959+
value: 20
2960+
},
2961+
{
2962+
name: 'P2 C3',
2963+
value: 10,
2964+
},
2965+
]
2966+
},
2967+
{
2968+
name: "Parent 3",
2969+
value: 75,
2970+
children: [
2971+
{
2972+
name: "P3 C1",
2973+
value: 5,
2974+
},
2975+
{
2976+
name: 'P3 C2',
2977+
value: 3
2978+
},
2979+
{
2980+
name: 'P3 C3',
2981+
value: 2
2982+
},
2983+
{
2984+
name: 'P3 C4',
2985+
value: 1
2986+
},
2987+
{
2988+
name: 'P3 C5',
2989+
value: 1
2990+
},
2991+
{
2992+
name: 'P3 C6',
2993+
value: 0.5
2994+
},
2995+
{
2996+
name: 'P3 C7',
2997+
value: 0.2
2998+
},
2999+
{
3000+
name: 'P3 C8',
3001+
value: 0.05,
3002+
children: [
3003+
{
3004+
name: 'P3 C8 CC1',
3005+
value: 0.025,
3006+
},
3007+
{
3008+
name: 'P3 C8 CC2',
3009+
value: 0.025,
3010+
},
3011+
]
3012+
},
3013+
]
3014+
},
3015+
]
3016+
)
3017+
3018+
const treemapConfig = ref({
3019+
style: {
3020+
chart: {
3021+
// tooltip: {
3022+
// customFormat: ({datapoint, seriesIndex, series}) => {
3023+
// console.log({datapoint, seriesIndex, series})
3024+
// return datapoint.name
3025+
// }
3026+
// }
3027+
}
3028+
}
3029+
})
3030+
3031+
function treemapSelect(data) {
3032+
console.log(data)
3033+
}
3034+
29273035
</script>
29283036

29293037
<template>
@@ -3024,10 +3132,43 @@ const kpiConfig = ref(
30243132
<BaseIcon name="chartSparkbar" stroke="#42d392" />
30253133
<BaseIcon name="chartSparkline" stroke="#42d392" />
30263134
<BaseIcon name="legend" stroke="#42d392" />
3135+
<BaseIcon name="zoomPlus" stroke="#42d392" />
3136+
<BaseIcon name="zoomMinus" stroke="#42d392" />
3137+
<BaseIcon name="chartTreemap" stroke="#42d392" />
30273138
</div>
30283139
</template>
30293140
</Box>
30303141

3142+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_treemap)">
3143+
<template #title>
3144+
<BaseIcon name="chartTreemap"/>
3145+
VueUiTreemap
3146+
</template>
3147+
<template #info>
3148+
</template>
3149+
<template #dev>
3150+
<TreemapTest :dataset="treemapDataset" :config="treemapConfig" @selectLegend="treemapSelect" @selectDatapoint="treemapSelect">
3151+
<template #rect="{ rect, shouldShow, fontSize, isZoom, textColor }">
3152+
<div v-if="shouldShow" :style="`font-size:${fontSize}px;color:${textColor}`">
3153+
{{ rect.color }} {{ isZoom }}
3154+
</div>
3155+
</template>
3156+
<!-- <template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3157+
{{ datapoint.name }}
3158+
</template>
3159+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3160+
{{ seriesIndex }}
3161+
</template> -->
3162+
</TreemapTest>
3163+
</template>
3164+
<template #prod>
3165+
<VueDataUi component="VueUiTreemap" :dataset="treemapDataset" :config="treemapConfig" />
3166+
</template>
3167+
<template #config>
3168+
{{ PROD_CONFIG.vue_ui_treemap }}
3169+
</template>
3170+
</Box>
3171+
30313172
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_kpi)">
30323173
<template #title>
30333174
<!-- <BaseIcon name="chartGalaxy"/> -->

‎src/atoms/BaseIcon.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,10 @@ const icons = computed(() => {
101101
chartSparkbar: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 18 5 M 2 10 L 18 10 M 2 15 L 18 15" style="opacity:0.3" /><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 2 5 L 15 5 M 2 10 L 11 10 M 2 15 L 7 15" />`,
102102
chartSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 1 10 C 1 8 2 8 2 8 C 4 8 4 12 6 13 C 8 12 6 7 8 6 C 10 6 10 11 11 11 C 13 12 12 6 14 4" />`,
103103
legend: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 3 2 L 5 2 C 5 2 6 2 6 3 L 6 5 C 6 6 5 6 5 6 L 3 6 C 3 6 2 6 2 5 L 2 3 C 2 2 3 2 3 2 M 8 4 C 8 3 9 3 9 3 L 17 3 C 17 3 18 3 18 4 C 18 5 17 5 17 5 L 9 5 C 9 5 8 5 8 4 M 3 8 L 5 8 C 5 8 6 8 6 9 L 6 11 C 6 12 5 12 5 12 L 3 12 C 3 12 2 12 2 11 L 2 9 C 2 8 3 8 3 8 M 8 10 C 8 9 9 9 9 9 L 17 9 C 17 9 18 9 18 10 C 18 11 17 11 17 11 L 9 11 C 9 11 8 11 8 10 M 3 14 L 5 14 C 5 14 6 14 6 15 L 6 17 C 6 18 5 18 5 18 L 3 18 C 3 18 2 18 2 17 L 2 15 C 2 14 3 14 3 14 M 8 16 C 8 15 9 15 9 15 L 17 15 C 17 15 18 15 18 16 C 18 17 17 17 17 17 L 9 17 C 9 17 8 17 8 16" />`,
104-
chartGalaxy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11" />`
104+
chartGalaxy: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 7 11 A 1 1 0 0 0 11 11 M 14 11 A 1 1 0 0 0 7 11 M 3 11 A 1 1 0 0 0 14 11 M 18 11 A 1 1 0 0 0 3 11 M 16.4 16 C 17 15 18 13 18 11" />`,
105+
zoomPlus: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 9 1 A 1 1 0 0 0 9 17 A 1 1 0 0 0 9 1 M 14.65 14.65 L 18 18 M 9 5 L 9 13 M 5 9 L 13 9"/>`,
106+
zoomMinus: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 9 1 A 1 1 0 0 0 9 17 A 1 1 0 0 0 9 1 M 14.65 14.65 L 18 18 M 5 9 L 13 9"/>`,
107+
chartTreemap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 19 1 L 19 19 L 1 19 Z M 10 1 L 10 19 M 1 13 L 10 13 M 10 10 L 19 10 M 15 10 L 15 19" />`
105108
}
106109
})
107110

‎src/atoms/Shape.cy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ describe('<Shape />', () => {
7777

7878
cy.get('svg').should('exist');
7979
cy.get('path').should('exist');
80-
cy.get('path').should('have.attr', 'd', 'M17.66377380281882,17.89091699989475 2.109083000105252,17.663773802818824 2.336226197181178,2.109083000105252 17.89091699989475,2.336226197181177 Z');
80+
cy.get('path').should('have.attr', 'd', 'M17.796805541920016,17.75949891046357 2.24050108953643,17.796805541920016 2.2031944580799845,2.24050108953643 17.759498910463574,2.203194458079988 Z');
8181
cy.get('path').should('have.attr', 'fill', '#000000')
8282
});
8383

‎src/atoms/Shape.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ function getPolygonConfigFromName(name){
4141
},
4242
square: {
4343
points: 4,
44-
rotation: 0.8
44+
rotation: 0.783
4545
},
4646
diamond: {
4747
points: 4,

0 commit comments

Comments
 (0)