Skip to content

Commit f896e08

Browse files
graphierosgraphieros
committed
Improvement - Added animation on serie segregation
1 parent 24911c6 commit f896e08

File tree

1 file changed

+63
-22
lines changed

1 file changed

+63
-22
lines changed

‎src/components/vue-ui-sparkstackbar.vue‎

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from "vue";
33
import {
44
convertColorToHex,
55
createUid,
6+
dataLabel,
67
error,
78
getMissingDatasetAttributes,
89
objectIsEmpty,
@@ -113,16 +114,6 @@ const svg = ref({
113114
114115
const segregated = ref([])
115116
116-
function segregate(id) {
117-
if(segregated.value.includes(id)) {
118-
segregated.value =segregated.value.filter(s => s !== id)
119-
} else {
120-
if(segregated.value.length < safeDatasetCopy.value.length - 1) {
121-
segregated.value.push(id)
122-
}
123-
}
124-
}
125-
126117
const total = computed(() => {
127118
return props.dataset.map(d => d.value || 0).filter((ds, i) => !segregated.value.includes(i)).reduce((a, b) => a + b, 0);
128119
});
@@ -134,24 +125,39 @@ const absoluteDataset = computed(() => {
134125
value: d.value || 0,
135126
proportion: (d.value || 0) / total.value,
136127
width: (d.value || 0) / total.value * svg.value.width,
137-
proportionLabel: `${Number(((d.value || 0) / total.value * 100).toFixed(stackConfig.value.style.legend.percentage.rounding)).toLocaleString()}%`,
128+
proportionLabel: dataLabel({
129+
v: (d.value || 0) / total.value * 100,
130+
s: '%',
131+
r: stackConfig.value.style.legend.percentage.rounding
132+
}),
138133
}
139134
})
140135
});
141136
142-
const computedDataset = computed(() => {
137+
const mutableDataset = computed(() => {
143138
return absoluteDataset.value.filter((ds, i) => !segregated.value.includes(i))
144139
});
145140
141+
142+
function segregate(index) {
143+
if(segregated.value.includes(index)) {
144+
segregated.value =segregated.value.filter(s => s !== index)
145+
} else {
146+
if(segregated.value.length < safeDatasetCopy.value.length - 1) {
147+
segregated.value.push(index)
148+
}
149+
}
150+
}
151+
146152
const drawableDataset = computed(() => {
147153
let start = 0;
148154
const datapoints = [];
149-
for (let i = 0; i < computedDataset.value.length; i += 1) {
155+
for (let i = 0; i < mutableDataset.value.length; i += 1) {
150156
datapoints.push({
151-
...computedDataset.value[i],
157+
...mutableDataset.value[i],
152158
start
153159
});
154-
start += computedDataset.value[i].width
160+
start += mutableDataset.value[i].width
155161
}
156162
return datapoints
157163
});
@@ -197,7 +203,13 @@ function selectDatapoint(datapoint, index) {
197203
</clipPath>
198204
</defs>
199205
<g clip-path="url(#stackPill)">
200-
<rect :x="0" :y="0" :height="svg.height" :width="drawableDataset.map(ds => ds.width).reduce((a, b) => a + b, 0)" :fill="stackConfig.style.bar.gradient.underlayerColor"/>
206+
<rect
207+
:x="0"
208+
:y="0"
209+
:height="svg.height"
210+
:width="drawableDataset.map(ds => ds.width).reduce((a, b) => a + b, 0)"
211+
:fill="stackConfig.style.bar.gradient.underlayerColor"
212+
/>
201213
<rect
202214
v-for="(rect, i) in drawableDataset" :key="`stack_${i}`"
203215
@click="() => selectDatapoint(rect, i)"
@@ -224,20 +236,45 @@ function selectDatapoint(datapoint, index) {
224236
}
225237
}"
226238
/>
227-
<div v-if="stackConfig.style.legend.show" data-cy="sparkstackbar-legend" :style="`background:${stackConfig.style.backgroundColor};margin:0 auto;margin:${stackConfig.style.legend.margin};justify-content:${stackConfig.style.legend.textAlign === 'left' ? 'flex-start' : stackConfig.style.legend.textAlign === 'right' ? 'flex-end' : 'center'}`" class="vue-ui-sparkstackbar-legend">
228-
<div v-for=" (rect, i) in absoluteDataset" :style="`font-size:${stackConfig.style.legend.fontSize}px`" :class="{'vue-ui-sparkstackbar-legend-item': true, 'vue-ui-sparkstackbar-legend-item-unselected': segregated.includes(i)}" @click="segregate(i); selectDatapoint(rect, i)">
239+
<div
240+
v-if="stackConfig.style.legend.show"
241+
data-cy="sparkstackbar-legend"
242+
:style="`background:${stackConfig.style.backgroundColor};margin:0 auto;margin:${stackConfig.style.legend.margin};justify-content:${stackConfig.style.legend.textAlign === 'left' ? 'flex-start' : stackConfig.style.legend.textAlign === 'right' ? 'flex-end' : 'center'}`"
243+
class="vue-ui-sparkstackbar-legend"
244+
>
245+
<div
246+
v-for=" (rect, i) in absoluteDataset"
247+
:style="`font-size:${stackConfig.style.legend.fontSize}px;`"
248+
:class="{'vue-ui-sparkstackbar-legend-item': true, 'vue-ui-sparkstackbar-legend-item-unselected': segregated.includes(i)}"
249+
@click="segregate(i); selectDatapoint(rect, i)"
250+
>
229251
<div style="display:flex;flex-direction:row;align-items:center;gap:4px;justify-content:center" >
230-
<svg :height="`${stackConfig.style.legend.fontSize}px`" :width="`${stackConfig.style.legend.fontSize}px`" viewBox="0 0 10 10">
252+
<svg
253+
:height="`${stackConfig.style.legend.fontSize}px`"
254+
:width="`${stackConfig.style.legend.fontSize}px`"
255+
viewBox="0 0 10 10"
256+
>
231257
<circle :cx="5" :cy="5" :r="5" :fill="rect.color"/>
232258
</svg>
233259
<span :style="`color:${stackConfig.style.legend.name.color}`">
234260
{{ rect.name }}
235261
</span>
236-
<span v-if="stackConfig.style.legend.percentage.show" :style="`font-weight:${stackConfig.style.legend.percentage.bold ? 'bold': 'normal'};color:${stackConfig.style.legend.percentage.color}`">
262+
<span
263+
v-if="stackConfig.style.legend.percentage.show"
264+
:style="`font-weight:${stackConfig.style.legend.percentage.bold ? 'bold': 'normal'};color:${stackConfig.style.legend.percentage.color}`"
265+
>
237266
{{ segregated.includes(i) ? ' - ' : rect.proportionLabel }}
238267
</span>
239-
<span v-if="stackConfig.style.legend.value.show" :style="`font-weight:${stackConfig.style.legend.value.bold ? 'bold' : 'normal'};color:${stackConfig.style.legend.value.color}`">
240-
({{ stackConfig.style.legend.value.prefix }}{{ Number(rect.value.toFixed(stackConfig.style.legend.value.rounding)).toLocaleString() }}{{ stackConfig.style.legend.value.suffix }})
268+
<span
269+
v-if="stackConfig.style.legend.value.show"
270+
:style="`font-weight:${stackConfig.style.legend.value.bold ? 'bold' : 'normal'};color:${stackConfig.style.legend.value.color}`"
271+
>
272+
({{ dataLabel({
273+
p: stackConfig.style.legend.value.prefix,
274+
v: rect.value,
275+
s: stackConfig.style.legend.value.suffix,
276+
r: stackConfig.style.legend.value.rounding
277+
}) }})
241278
</span>
242279
</div>
243280
</div>
@@ -255,8 +292,12 @@ function selectDatapoint(datapoint, index) {
255292
}
256293
.vue-ui-sparkstackbar-legend-item {
257294
cursor: pointer;
295+
transition: opacity 0.2s ease-in-out;
258296
}
259297
.vue-ui-sparkstackbar-legend-item-unselected {
260298
opacity: 0.3;
261299
}
300+
rect {
301+
transition: all 0.3s ease-in-out !important;
302+
}
262303
</style>

0 commit comments

Comments
 (0)