Skip to content

Commit 09e7b4d

Browse files
graphierosgraphieros
committed
Refactored with Legend component & added test
1 parent a7fc0a9 commit 09e7b4d

21 files changed

+608
-579
lines changed

‎cypress/fixtures/rings.json

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
{
2+
"dataset": [
3+
{
4+
"name": "serie 1",
5+
"color": "#3366cc",
6+
"values": [
7+
120,120
8+
]
9+
},
10+
{
11+
"name": "serie 2",
12+
"color": "#dc3912",
13+
"values": [
14+
60,60
15+
]
16+
},
17+
{
18+
"name": "serie 3",
19+
"color": "#ff9900",
20+
"values": [
21+
15,15
22+
]
23+
},
24+
{
25+
"name": "serie 4",
26+
"color": "#109618",
27+
"values": [
28+
30,30
29+
]
30+
}
31+
],
32+
"config": {
33+
"useCssAnimation": true,
34+
"useBlurOnHover": true,
35+
"style": {
36+
"fontFamily": "inherit",
37+
"chart": {
38+
"backgroundColor":"#FFFFFF",
39+
"color":"#2D353C",
40+
"layout": {
41+
"rings": {
42+
"strokeWidth": 2,
43+
"stroke":"#FFFFFF",
44+
"gradient": {
45+
"show": true,
46+
"intensity": 40,
47+
"underlayerColor":"#FFFFFF"
48+
},
49+
"useShadow": true
50+
}
51+
},
52+
"legend": {
53+
"backgroundColor": "#FFFFFF",
54+
"color": "#2D353C",
55+
"show": true,
56+
"fontSize": 16,
57+
"bold": false,
58+
"roundingValue": 0,
59+
"roundingPercentage": 0
60+
},
61+
"title": {
62+
"text": "Title",
63+
"color": "#2D353C",
64+
"fontSize": 20,
65+
"bold": true,
66+
"subtitle": {
67+
"color": "#A1A1A1",
68+
"text": "Subtitle",
69+
"fontSize": 16,
70+
"bold": false
71+
}
72+
},
73+
"tooltip": {
74+
"show": true,
75+
"color": "#2D353C",
76+
"backgroundColor": "#FFFFFF",
77+
"fontSize": 14,
78+
"showValue": true,
79+
"showPercentage": true,
80+
"roundingValue": 0,
81+
"roundingPercentage": 0
82+
}
83+
}
84+
},
85+
"userOptions": {
86+
"show": true,
87+
"title": "options",
88+
"labels": {
89+
"showTable": "Show table"
90+
}
91+
},
92+
"table": {
93+
"show": false,
94+
"th": {
95+
"backgroundColor": "#FAFAFA",
96+
"color": "#2D353C",
97+
"outline": "1px solid #e1e5e8"
98+
},
99+
"td": {
100+
"backgroundColor": "#FFFFFF",
101+
"color": "#2D353C",
102+
"outline": "1px solid #e1e5e8",
103+
"roundingValue": 0,
104+
"roundingPercentage": 0
105+
}
106+
}
107+
}
108+
}

‎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: 1 addition & 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": "1.9.21",
4+
"version": "1.9.22",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/atoms/Legend.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<script setup>
2+
import Shape from './Shape.vue';
3+
4+
const props = defineProps({
5+
legendSet: {
6+
type: Array,
7+
default() {
8+
return []
9+
}
10+
},
11+
config: {
12+
type: Object,
13+
default() {
14+
return {}
15+
}
16+
}
17+
})
18+
19+
const emit = defineEmits(['clickMarker'])
20+
21+
function handleClick(legend, i) {
22+
emit('clickMarker', { legend, i})
23+
}
24+
25+
</script>
26+
27+
<template>
28+
<div
29+
:data-cy="config.cy"
30+
class="vue-data-ui-legend"
31+
:style="`background:${config.backgroundColor};font-size:${config.fontSize}px;color:${config.color};padding-bottom:${config.paddingBottom}px;font-weight:${config.fontWeight}`"
32+
>
33+
<div v-for="(legend, i) in legendSet" class="vue-data-ui-legend-item">
34+
<svg @click="handleClick(legend, i)" v-if="legend.shape" :height="config.fontSize" :width="config.fontSize" viewBox="0 0 20 20" :style="`overflow: visible;opacity:${legend.opacity}`">
35+
<Shape
36+
:shape="legend.shape"
37+
:radius="9"
38+
stroke="none"
39+
:plot="{ x: 10, y: 10 }"
40+
:fill="legend.color"
41+
/>
42+
</svg>
43+
<slot name="item" :legend="legend" :index="i"/>
44+
</div>
45+
46+
</div>
47+
</template>
48+
49+
<style scoped>
50+
.vue-data-ui-legend {
51+
height: 100%;
52+
width:100%;
53+
display: flex;
54+
align-items:center;
55+
flex-wrap: wrap;
56+
justify-content:center;
57+
column-gap: 18px;
58+
}
59+
.vue-data-ui-legend-item {
60+
display: flex;
61+
align-items:center;
62+
gap: 6px;
63+
cursor: pointer;
64+
height: 24px;
65+
}
66+
</style>

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

Lines changed: 3 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -43,26 +43,10 @@ describe('<VueUiDonut />', () => {
4343
const grandTotal = fixture.dataset.map((d) => d.values.reduce((a, b) => a + b, 0)).reduce((a, b) => a + b, 0);
4444

4545
for (let i = 0; i < fixture.dataset.length; i += 1) {
46-
cy.get(`[data-cy="donut-div-legend-marker-${i}"]`)
47-
.should('exist')
48-
.invoke('attr', 'fill')
49-
.should('eq', sortedDataset[i].color);
50-
51-
cy.get(`[data-cy="donut-div-legend-name-${i}"]`)
52-
.should('exist')
53-
.contains(sortedDataset[i].name);
54-
5546
const thisValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
56-
57-
cy.get(`[data-cy="donut-div-legend-value-${i}"]`)
58-
.should('exist')
59-
.contains(Number(thisValue.toFixed(fixture.config.style.chart.legend.roundingValue)).toLocaleString());
60-
61-
const thisPercentage = `(${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%)`;
62-
63-
cy.get(`[data-cy="donut-div-legend-percentage-${i}"]`)
64-
.should('exist')
65-
.contains(thisPercentage);
47+
cy.contains(sortedDataset[i].name);
48+
cy.contains(Number(thisValue.toFixed(fixture.config.style.chart.legend.roundingValue)).toLocaleString());
49+
cy.contains(`(${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%)`)
6650
}
6751

6852
let modifiedConfig = {
@@ -88,40 +72,6 @@ describe('<VueUiDonut />', () => {
8872
}
8973
});
9074

91-
92-
cy.get('[data-cy="donut-text-title"]')
93-
.should('exist')
94-
.contains(fixture.config.style.chart.title.text);
95-
96-
cy.get('[data-cy="donut-text-subtitle"]')
97-
.should('exist')
98-
.contains(fixture.config.style.chart.title.subtitle.text);
99-
100-
cy.get('[data-cy="donut-foreignObject-legend"]').should('exist');
101-
102-
for (let i = 0; i < fixture.dataset.length; i += 1) {
103-
cy.get(`[data-cy="donut-foreignObject-legend-marker-${i}"]`)
104-
.should('exist')
105-
.invoke('attr', 'fill')
106-
.should('eq', sortedDataset[i].color);
107-
108-
cy.get(`[data-cy="donut-foreignObject-legend-name-${i}"]`)
109-
.should('exist')
110-
.contains(sortedDataset[i].name);
111-
112-
const thisValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
113-
114-
cy.get(`[data-cy="donut-foreignObject-legend-value-${i}"]`)
115-
.should('exist')
116-
.contains(Number(thisValue.toFixed(fixture.config.style.chart.legend.roundingValue)).toLocaleString());
117-
118-
const thisPercentage = `(${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%)`;
119-
120-
cy.get(`[data-cy="donut-foreignObject-legend-percentage-${i}"]`)
121-
.should('exist')
122-
.contains(thisPercentage);
123-
}
124-
12575
for (let i = 0; i < fixture.dataset.length; i += 1) {
12676
cy.get(`[data-cy="donut-arc-${i}"]`)
12777
.should('exist')
@@ -153,47 +103,6 @@ describe('<VueUiDonut />', () => {
153103
})
154104
}
155105

156-
cy.get(`[data-cy="donut-trap-0"]`)
157-
.then(($element) => {
158-
159-
cy.wrap($element)
160-
.trigger('mouseenter', { force: true })
161-
162-
cy.get(`[data-cy="tooltip"]`).should('exist');
163-
cy.get(`[data-cy="donut-tooltip-name"]`)
164-
.should('exist')
165-
.contains(sortedDataset[0].name);
166-
167-
cy.get(`[data-cy="donut-tooltip-marker"]`)
168-
.should('exist')
169-
.invoke('attr', 'fill')
170-
.should('eq', sortedDataset[0].color);
171-
172-
const expectedTooltipValue = sortedDataset[0].values.reduce((a, b) => a + b, 0).toFixed(fixture.config.style.chart.tooltip.roundingValue);
173-
174-
cy.get(`[data-cy="donut-tooltip-value"]`)
175-
.should('exist')
176-
.contains(expectedTooltipValue);
177-
178-
cy.wrap($element)
179-
.invoke('attr', 'stroke')
180-
.should('eq', 'rgba(0,0,0,0.1)');
181-
182-
cy.wrap($element)
183-
.click({ force: true });
184-
185-
cy.get('.vue-ui-donut-arc-path').should(($arcs) => {
186-
expect($arcs).to.have.length(3)
187-
})
188-
189-
cy.get(`[data-cy="donut-foreignObject-legend-item-0"]`)
190-
.click();
191-
192-
cy.get('.vue-ui-donut-arc-path').should(($arcs) => {
193-
expect($arcs).to.have.length(4)
194-
})
195-
});
196-
197106
for (let i = 0; i < fixture.dataset.length; i += 1) {
198107
const thisValue = sortedDataset[i].values.reduce((a, b) => a + b, 0);
199108
const thisPercentage = `${(thisValue / grandTotal * 100).toFixed(fixture.config.style.chart.legend.roundingPercentage)}%`;

0 commit comments

Comments
 (0)