Skip to content

Commit 347eb26

Browse files
graphierosgraphieros
committed
VueUiHeatmap & VueUiQuadrant fixes
1 parent b1f16f8 commit 347eb26

File tree

7 files changed

+39
-22
lines changed

7 files changed

+39
-22
lines changed

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

‎src/App.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -431,8 +431,8 @@ const quadrantDataset = ref([
431431
series: [
432432
{
433433
name: "cat2 item1",
434-
x: -50,
435-
y: -50,
434+
x: -60,
435+
y: -60,
436436
},
437437
{
438438
name: "cat2 item2",
@@ -925,10 +925,15 @@ const heatmapConfig = ref({
925925
style: {
926926
layout: {
927927
useDiv: true,
928+
padding: {
929+
bottom: 48,
930+
},
928931
cells: {
929932
value: {
930933
show: true,
934+
fontSize: 10
931935
},
936+
spacing: 2
932937
},
933938
dataLabels: {
934939
prefix: "$",
@@ -3072,7 +3077,7 @@ const moodRadarConfig = ref({
30723077
</template>
30733078
</Box>
30743079

3075-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
3080+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
30763081
<template #title>
30773082
<BaseIcon name="chartOnion" />
30783083
VueUiOnion
@@ -3625,7 +3630,7 @@ const moodRadarConfig = ref({
36253630
</template>
36263631
</Box>
36273632

3628-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
3633+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
36293634
<template #title>
36303635
<BaseIcon name="chartHeatmap"/>
36313636
VueUiHeatmap

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const drawingArea = computed(() => {
104104
});
105105
106106
const sideLegendHeight = computed(() => {
107-
return drawingArea.value.height - (heatmapConfig.value.style.layout.padding.top - heatmapConfig.value.style.layout.padding.bottom)
107+
return cellSize.value.height * props.dataset.length
108108
})
109109
110110
@@ -351,17 +351,17 @@ defineExpose({
351351
<g v-for="(serie, i) in mutableDataset">
352352
<g v-for="(cell, j) in serie.temperatures">
353353
<rect
354-
:x="drawingArea.left + cellSize.width * j"
355-
:y="drawingArea.top + cellSize.height * i"
354+
:x="drawingArea.left + cellSize.width * j + (heatmapConfig.style.layout.cells.spacing / 2)"
355+
:y="drawingArea.top + cellSize.height * i + (heatmapConfig.style.layout.cells.spacing / 2)"
356356
:width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
357357
:height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
358358
:fill="heatmapConfig.style.layout.cells.colors.underlayer"
359359
:stroke="heatmapConfig.style.backgroundColor"
360360
:stroke-width="heatmapConfig.style.layout.cells.spacing"
361361
/>
362362
<rect
363-
:x="drawingArea.left + cellSize.width * j"
364-
:y="drawingArea.top + cellSize.height * i"
363+
:x="drawingArea.left + cellSize.width * j + (heatmapConfig.style.layout.cells.spacing / 2)"
364+
:y="drawingArea.top + cellSize.height * i + (heatmapConfig.style.layout.cells.spacing / 2)"
365365
:width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
366366
:height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
367367
:fill="cell.color"
@@ -377,7 +377,7 @@ defineExpose({
377377
:x="(drawingArea.left + cellSize.width * j) + (cellSize.width / 2)"
378378
:y="(drawingArea.top + cellSize.height * i) + (cellSize.height / 2) + heatmapConfig.style.layout.cells.value.fontSize / 3"
379379
>
380-
{{ Number(cell.value.toFixed(heatmapConfig.style.layout.cells.value.roundingValue)).toLocaleString() }}
380+
{{ heatmapConfig.style.layout.dataLabels.prefix }}{{ Number(cell.value.toFixed(heatmapConfig.style.layout.cells.value.roundingValue)).toLocaleString() }}{{ heatmapConfig.style.layout.dataLabels.suffix }}
381381
</text>
382382
</g>
383383
<g v-for="(cell, j) in serie.temperatures">
@@ -429,7 +429,7 @@ defineExpose({
429429
</defs>
430430
<text
431431
:x="drawingArea.right + 36 + 18"
432-
:y="drawingArea.top - heatmapConfig.style.legend.fontSize * 2"
432+
:y="drawingArea.top - heatmapConfig.style.legend.fontSize * 1.5"
433433
text-anchor="middle"
434434
:font-size="heatmapConfig.style.legend.fontSize * 2"
435435
:fill="heatmapConfig.style.legend.color"
@@ -446,7 +446,7 @@ defineExpose({
446446
/>
447447
<text
448448
:x="drawingArea.right + 36 + 18"
449-
:y="drawingArea.bottom + heatmapConfig.style.legend.fontSize"
449+
:y="drawingArea.top + sideLegendHeight + heatmapConfig.style.legend.fontSize * 2.5"
450450
text-anchor="middle"
451451
:font-size="heatmapConfig.style.legend.fontSize * 2"
452452
:fill="heatmapConfig.style.legend.color"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -434,7 +434,7 @@ defineExpose({
434434
<text
435435
v-if="!segregated.includes(onion.id)"
436436
:x="svg.width / 2 - onionSkin.gutter * 0.8 + onionConfig.style.chart.layout.labels.offsetX"
437-
:y="onion.labelY"
437+
:y="onion.labelY + onionConfig.style.chart.layout.labels.offsetX"
438438
text-anchor="end"
439439
:font-size="onionConfig.style.chart.layout.labels.fontSize"
440440
:fill="onionConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && selectedSerie === i ? onion.color: onionConfig.style.chart.layout.labels.color"

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,13 +278,23 @@ const drawableDataset = computed(() => {
278278
});
279279
280280
function calcX(x) {
281-
const ratio = x / axisValues.value.x.max;
282-
return svg.value.centerX + ((svg.value.usableWidth / 2) * ratio);
281+
if(x >= 0) {
282+
const ratio = x / axisValues.value.x.max;
283+
return svg.value.centerX + ((svg.value.usableWidth / 2) * ratio);
284+
} else {
285+
const ratio = Math.abs(x) / Math.abs(axisValues.value.x.min)
286+
return svg.value.centerX - ((svg.value.usableWidth / 2) * ratio);
287+
}
283288
}
284289
285290
function calcY(y) {
286-
const ratio = y / axisValues.value.y.max;
287-
return svg.value.centerY + (1-(svg.value.usableHeight / 2) * ratio);
291+
if(y >= 0) {
292+
const ratio = y / axisValues.value.y.max;
293+
return svg.value.centerY + (1-(svg.value.usableHeight / 2) * ratio);
294+
} else {
295+
const ratio = Math.abs(y) / Math.abs(axisValues.value.y.min);
296+
return svg.value.centerY - (1 - (svg.value.usableHeight / 2) * ratio);
297+
}
288298
}
289299
290300
const table = computed(() => {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -657,7 +657,7 @@
657657
<BaseIcon name="chartLine" :size="20" :stroke="chartConfig.chart.color"/>
658658
</div>
659659
</div>
660-
<TableSparkline v-if="showSparklineTable" :dataset="tableSparklineDataset" :config="tableSparklineConfig"/>
660+
<TableSparkline v-if="showSparklineTable" :key="`sparkline_${segregateStep}`" :dataset="tableSparklineDataset" :config="tableSparklineConfig"/>
661661
<DataTable
662662
v-else
663663
:colNames="dataTable.colNames"
@@ -787,7 +787,8 @@ export default {
787787
slicer,
788788
__to__: null,
789789
maxX,
790-
showSparklineTable: true
790+
showSparklineTable: true,
791+
segregateStep: 0
791792
}
792793
},
793794
computed: {
@@ -1935,6 +1936,7 @@ export default {
19351936
if(this.chartConfig.useCanvas) {
19361937
this.drawCanvas();
19371938
}
1939+
this.segregateStep += 1;
19381940
},
19391941
toggleTooltip(show, selectedIndex = null) {
19401942
this.isTooltip = show;

0 commit comments

Comments
 (0)