Skip to content

Commit 2ce5c96

Browse files
graphierosgraphieros
committed
Improvement - VueUiTreemap - Add config for groups (labels, colors)
1 parent a7a8ece commit 2ce5c96

File tree

8 files changed

+622
-128
lines changed

8 files changed

+622
-128
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,7 @@ From the dataset you pass into the props, this component will produce the most a
477477
| `VueUiStripPlot` | `VueUiStripPlotDataset[]` | `VueUiStripPlotConfig` | `@selectDatapoint`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleLabels`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background` | ✅ | ✅ |
478478
| `VueUiThermometer` | `VueUiThermometerDataset` | `VueUiThermometerConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |
479479
| `VueUiTiremarks` | `VueUiTiremarksDataset` | `VueUiTiremarksConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#legend`, `#watermark`, `#chart-background` | ❌ | ✅ |
480-
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow` | ✅ | ✅ |
480+
| `VueUiTreemap` | `VueUiTreemapDatasetItem[]` | `VueUiTreemapConfig` | `@selectLegend`, `@selectDatapoint`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#rect`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#breadcrumb-label`, `#breadcrumb-arrow`, `#group-label` | ✅ | ✅ |
481481
| `VueUiHorizontalBar` | `VueUiHorizontalBarDatasetItem[]` | `VueUiWheelConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleSort`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#chart-background`, `#pattern` | ✅ | ✅ |
482482
| `VueUiWaffle` | `VueUiWaffleDatasetItem[]` | `VueUiWaffleConfig` | `@selectLegend`, `hideSeries`, `showSeries`, `getData`, `generatePdf`, `generateCsv`, `generateImage`, `toggleTable`, `toggleTooltip` , `getImage` | `#svg`, `#legend`, `#tooltip-before`, `#tooltip-after`, `#watermark`, `#pattern` | ✅ | ✅ |
483483
| `VueUiWheel` | `VueUiWheelDataset` | `VueUiWheelConfig` | `generatePdf`, `generateImage` , `getImage` | `#svg`, `#watermark`, `#chart-background` | ❌ | ✅ |

‎TestingArena/ArenaVueUiTreemap.vue‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,36 @@ onMounted(() => {
1717
setTimeout(() => {
1818
dataset.value = [
1919
{
20-
name: 'Some datapoint',
21-
value: 100,
20+
name: 'P1',
21+
value: 87.5,
2222
children: [
2323
{
24-
name: 'Some kind of child with a very long name that is way too long',
24+
name: 'P1C1',
2525
value: 50
2626
},
2727
{
28-
name: 'Some other child',
28+
name: 'P1C2',
2929
value: 25
3030
},
3131
{
32-
name: 'Yet another child with a long name',
32+
name: 'P1C3',
3333
value: 12.5,
3434
children: [
3535
{
36-
name: 'Some nested child',
36+
name: 'P1C3G1',
3737
value: 6
3838
},
3939
{
40-
name: 'Some other nested child with a very long name',
40+
name: 'P1C3G2',
4141
value: 6.5,
4242
children: [
4343
{
44-
name: 'kiddo1',
45-
value: 6
44+
name: 'P1C3G2L1',
45+
value: 3
4646
},
4747
{
48-
name: 'kiddo2',
49-
value: 6.5
48+
name: 'P1C3G2L2',
49+
value: 3.5
5050
},
5151
]
5252
},
@@ -55,73 +55,73 @@ onMounted(() => {
5555
]
5656
},
5757
{
58-
name: 'S2',
58+
name: 'P2',
5959
value: 200,
6060
children: [
6161
{
62-
name: 'S2 - C1',
62+
name: 'P2C1',
6363
value: 100
6464
},
6565
{
66-
name: 'S2 - C2',
66+
name: 'P2C2',
6767
value: 50
6868
},
6969
{
70-
name: 'S2 - C3',
70+
name: 'P2C3',
7171
value: 25
7272
}
7373
]
7474
},
7575
{
76-
name: 'S3',
76+
name: 'P3',
7777
value: 100,
7878
children: [
7979
{
80-
name: 'S3 - C1',
80+
name: 'P3C1',
8181
value: 50
8282
},
8383
{
84-
name: 'S3 - C2',
84+
name: 'P3C2',
8585
value: 25
8686
},
8787
{
88-
name: 'S3 - C3',
88+
name: 'P3C3',
8989
value: 12.5
9090
}
9191
]
9292
},
9393
{
94-
name: 'S4',
94+
name: 'P4',
9595
value: 20,
9696
children: [
9797
{
98-
name: 'S3 - C1',
98+
name: 'P4C1',
9999
value: 10
100100
},
101101
{
102-
name: 'S3 - C2',
102+
name: 'P4C2',
103103
value: 5
104104
},
105105
{
106-
name: 'S3 - C3',
106+
name: 'P4C3',
107107
value: 2.5
108108
}
109109
]
110110
},
111111
{
112-
name: 'S5',
112+
name: 'P5',
113113
value: 10,
114114
children: [
115115
{
116-
name: 'S3 - C1',
116+
name: 'P5C1',
117117
value: 5
118118
},
119119
{
120-
name: 'S3 - C2',
120+
name: 'P5C2',
121121
value: 2.5
122122
},
123123
{
124-
name: 'S3 - C3',
124+
name: 'P5C3',
125125
value: 1.125
126126
}
127127
]
@@ -185,6 +185,14 @@ const model = ref([
185185
{ key: 'style.chart.layout.rects.selected.stroke', def: '#FFFFFF', type: 'color'},
186186
{ key: 'style.chart.layout.rects.selected.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
187187
{ key: 'style.chart.layout.rects.selected.unselectedOpacity', def: 0.6, type: 'range', min: 0, max: 1, step: 0.01},
188+
189+
{ key: 'style.chart.layout.rects.group.stroke', def: '#CCCCCC', type: 'color'},
190+
{ key: 'style.chart.layout.rects.group.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
191+
{ key: 'style.chart.layout.rects.group.useSeriesBackgroundColor', def: true, type: 'checkbox'},
192+
{ key: 'style.chart.layout.rects.group.backgroundLighterRatio', def: 0.4, type: 'number', min: 0, max: 1, step: 0.01 },
193+
{ key: 'style.chart.layout.rects.group.label.adaptColorToBackground', def: true, type: 'checkbox'},
194+
{ key: 'style.chart.layout.rects.group.label.color', def: '#FF0000', type: 'color'},
195+
188196
{ key: 'style.chart.layout.labels.showDefaultLabels', def: true, type: 'checkbox'},
189197
{ key: 'style.chart.layout.labels.fontSize', def: 14, type: 'range', min: 8, max: 48, step: 1},
190198
{ key: 'style.chart.layout.labels.minFontSize', def: 10, type: 'range', min: 6, max: 48, step: 1},
@@ -396,6 +404,12 @@ onMounted(async() => {
396404

397405
<template #local>
398406
<LocalVueUiTreemap :dataset="dataset" :config="isPropsToggled ? alternateConfig : config" :key="`local_${step}`" @selectDatapoint="selectDatapoint" @selectLegend="selectLegend" ref="local">
407+
<!-- <template #group-label="{ group }">
408+
<div style="width: 100%; text-align:left; padding-left: 12px;">
409+
{{ group.name }}
410+
</div>
411+
</template> -->
412+
399413
<template #svg="{ svg }">
400414
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#42d392" />
401415
<text :x="svg.width / 2" :y="svg.height / 2" text-anchor="middle">#SVG</text>

‎src/components/vue-ui-treemap.cy.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ describe('<VueUiTreemap />', () => {
4747
}
4848
}).then(() => {
4949
cy.get('.vue-ui-treemap-breadcrumbs').should('not.exist')
50-
cy.get('.vue-ui-treemap-rect').first().click()
50+
cy.get('.vue-ui-treemap-rect').eq(12).click({ force: true })
5151
cy.get('.vue-ui-treemap-breadcrumbs').should('exist').and('be.visible')
5252
cy.get('.vue-ui-treemap-crumb').first().click()
5353
cy.get('.vue-ui-treemap-breadcrumbs').should('not.exist')
@@ -74,6 +74,7 @@ describe('<VueUiTreemap />', () => {
7474
'color',
7575
'id',
7676
'name',
77+
'rootId',
7778
'normalizedValue',
7879
'parentId',
7980
'parentName',

0 commit comments

Comments
 (0)