Skip to content

Commit e3bdbd8

Browse files
graphierosgraphieros
committed
VueUiHeatmap minor fixes on the zoom minimap
1 parent b8993d4 commit e3bdbd8

File tree

4 files changed

+46
-17
lines changed

4 files changed

+46
-17
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.73",
4+
"version": "2.0.74",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3163,7 +3163,7 @@ function treemapSelect(data) {
31633163
</template>
31643164
</Box>
31653165

3166-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_treemap)">
3166+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_treemap)">
31673167
<template #title>
31683168
<BaseIcon name="chartTreemap"/>
31693169
VueUiTreemap
@@ -3307,7 +3307,7 @@ function treemapSelect(data) {
33073307
</template>
33083308
</Box>
33093309

3310-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
3310+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
33113311
<template #title>
33123312
<BaseIcon name="chartTable"/>
33133313
VueUiTableSparkline
@@ -3679,7 +3679,7 @@ function treemapSelect(data) {
36793679
</template>
36803680
</Box>
36813681

3682-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
3682+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkline)">
36833683
<template #title>
36843684
<BaseIcon name="chartSparkline" />
36853685
VueUiSparkline
@@ -3796,7 +3796,7 @@ function treemapSelect(data) {
37963796
</template>
37973797
</Box>
37983798

3799-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
3799+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkhistogram)">
38003800
<template #title>
38013801
<BaseIcon name="chartSparkHistogram" />
38023802
VueUiSparkHistogram
@@ -3918,7 +3918,7 @@ function treemapSelect(data) {
39183918
</template>
39193919
</Box>
39203920

3921-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_vertical_bar)">
3921+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_vertical_bar)">
39223922
<template #title>
39233923
<BaseIcon name="chartVerticalBar" />
39243924
VueUiVerticalBar
@@ -4019,7 +4019,7 @@ function treemapSelect(data) {
40194019
</template>
40204020
</Box>
40214021

4022-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
4022+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
40234023
<template #title>
40244024
<BaseIcon name="chartQuadrant" />
40254025
VueUiQuadrant
@@ -4191,7 +4191,7 @@ function treemapSelect(data) {
41914191
</template>
41924192
</Box>
41934193

4194-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
4194+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
41954195
<template #title>
41964196
<BaseIcon name="chartSparkStackbar" />
41974197
VueUiSparkStackbar

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

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -657,6 +657,10 @@ const miniMap = computed(() => {
657657
y: 20,
658658
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.bl.color
659659
},
660+
crosshairs: {
661+
horizontal: `M ${svg.value.left + svg.value.usableWidth / 4 - 20},${20} ${svg.value.left + svg.value.usableWidth / 4 + 20},${20}`,
662+
vertical: `M ${svg.value.left + svg.value.usableWidth / 4},${0} ${svg.value.left + svg.value.usableWidth / 4},${40}`
663+
}
660664
},
661665
TR: {
662666
tl: {
@@ -670,15 +674,19 @@ const miniMap = computed(() => {
670674
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.tr.color
671675
},
672676
br: {
673-
x: svg.value.centerX + svg.value.usableWidth / 4 - 20,
677+
x: svg.value.centerX + svg.value.usableWidth / 4,
674678
y: 20,
675679
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.br.color
676680
},
677681
bl: {
678-
x: svg.value.centerX + svg.value.usableWidth / 4,
682+
x: svg.value.centerX + svg.value.usableWidth / 4 - 20,
679683
y: 20,
680684
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.bl.color
681685
},
686+
crosshairs: {
687+
horizontal: `M ${svg.value.centerX + svg.value.usableWidth / 4 - 20},${20} ${svg.value.centerX+ svg.value.usableWidth / 4 + 20},${20}`,
688+
vertical: `M ${svg.value.centerX + svg.value.usableWidth / 4},${0} ${svg.value.centerX + svg.value.usableWidth / 4},${40}`
689+
}
682690
},
683691
BR: {
684692
tl: {
@@ -701,6 +709,10 @@ const miniMap = computed(() => {
701709
y: svg.value.centerY - 28,
702710
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.bl.color
703711
},
712+
crosshairs: {
713+
horizontal: `M ${svg.value.centerX + svg.value.usableWidth / 4 - 20},${svg.value.centerY - 28} ${svg.value.centerX + svg.value.usableWidth / 4 + 20},${svg.value.centerY - 28}`,
714+
vertical: `M ${svg.value.centerX + svg.value.usableWidth / 4},${svg.value.centerY - 48} ${svg.value.centerX + svg.value.usableWidth / 4},${svg.value.centerY - 8}`
715+
}
704716
},
705717
BL: {
706718
tl: {
@@ -723,6 +735,10 @@ const miniMap = computed(() => {
723735
y: svg.value.centerY - 28,
724736
fill: quadrantConfig.value.style.chart.layout.labels.quadrantLabels.bl.color
725737
},
738+
crosshairs: {
739+
horizontal: `M ${svg.value.left + svg.value.usableWidth / 4 - 20},${svg.value.centerY - 28} ${svg.value.left + svg.value.usableWidth / 4 + 20},${svg.value.centerY - 28}`,
740+
vertical: `M ${svg.value.left + svg.value.usableWidth / 4},${svg.value.centerY - 48} ${svg.value.left + svg.value.usableWidth / 4},${svg.value.centerY - 8}`
741+
}
726742
},
727743
}
728744
})
@@ -1224,7 +1240,7 @@ defineExpose({
12241240
height="20"
12251241
width="20"
12261242
:fill="miniMap[selectedSide].tl.fill"
1227-
:style="`cursor: pointer; opacity: ${selectedSide === 'TL' ? 1 : 0.3}`"
1243+
:style="`cursor: pointer; opacity: ${selectedSide === 'TL' ? 1 : 0.2}`"
12281244
@click="selectQuadrantSide('TL')"
12291245
:class="{'vue-ui-quadrant-mini-map-cell': true, 'vue-ui-quadrant-mini-map-cell-selectable': selectedSide !== 'TL'}"
12301246
/>
@@ -1234,7 +1250,7 @@ defineExpose({
12341250
height="20"
12351251
width="20"
12361252
:fill="miniMap[selectedSide].tr.fill"
1237-
:style="`cursor: pointer; opacity: ${selectedSide === 'TR' ? 1 : 0.3}`"
1253+
:style="`cursor: pointer; opacity: ${selectedSide === 'TR' ? 1 : 0.2}`"
12381254
@click="selectQuadrantSide('TR')"
12391255
:class="{'vue-ui-quadrant-mini-map-cell': true, 'vue-ui-quadrant-mini-map-cell-selectable': selectedSide !== 'TR'}"
12401256
/>
@@ -1244,7 +1260,7 @@ defineExpose({
12441260
height="20"
12451261
width="20"
12461262
:fill="miniMap[selectedSide].br.fill"
1247-
:style="`cursor: pointer; opacity: ${selectedSide === 'BR' ? 1 : 0.3}`"
1263+
:style="`cursor: pointer; opacity: ${selectedSide === 'BR' ? 1 : 0.2}`"
12481264
@click="selectQuadrantSide('BR')"
12491265
:class="{'vue-ui-quadrant-mini-map-cell': true, 'vue-ui-quadrant-mini-map-cell-selectable': selectedSide !== 'BR'}"
12501266
/>
@@ -1254,10 +1270,22 @@ defineExpose({
12541270
height="20"
12551271
width="20"
12561272
:fill="miniMap[selectedSide].bl.fill"
1257-
:style="`cursor: pointer; opacity: ${selectedSide === 'BL' ? 1 : 0.3}`"
1273+
:style="`cursor: pointer; opacity: ${selectedSide === 'BL' ? 1 : 0.2}`"
12581274
@click="selectQuadrantSide('BL')"
12591275
:class="{'vue-ui-quadrant-mini-map-cell': true, 'vue-ui-quadrant-mini-map-cell-selectable': selectedSide !== 'BL'}"
12601276
/>
1277+
<path
1278+
class="vue-ui-quadrant-minimap-crosshairs"
1279+
:stroke="quadrantConfig.style.chart.backgroundColor"
1280+
:stroke-width="1"
1281+
:d="miniMap[selectedSide].crosshairs.horizontal"
1282+
/>
1283+
<path
1284+
class="vue-ui-quadrant-minimap-crosshairs"
1285+
:stroke="quadrantConfig.style.chart.backgroundColor"
1286+
:stroke-width="1"
1287+
:d="miniMap[selectedSide].crosshairs.vertical"
1288+
/>
12611289
</g>
12621290
<slot name="svg" :svg="svg"/>
12631291
</svg>
@@ -1384,7 +1412,8 @@ path, line, rect, circle, polygon {
13841412
}
13851413
13861414
.vue-ui-quadrant-mini-map-cell,
1387-
.vue-ui-quadrant-mini-map-cell-selectable {
1415+
.vue-ui-quadrant-mini-map-cell-selectable,
1416+
.vue-ui-quadrant-minimap-crosshairs {
13881417
animation: none !important;
13891418
transition: opacity 0.15s ease-in-out;
13901419
}

0 commit comments

Comments
 (0)