Skip to content

Commit f198980

Browse files
authored
Merge pull request #69 from hyemyn2/master
add key 'color' in props & remove popup text in slot
2 parents 42a4b75 + 506a22a commit f198980

File tree

5 files changed

+81
-46
lines changed

5 files changed

+81
-46
lines changed

Diff for: example/src/components/DatamapsAwsRegionArc.vue

+26-14
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121

2222
<script>
2323
import { world } from '../../../data/index'
24-
import { VueDatamaps } from 'vue-datamaps'
24+
// import { VueDatamaps } from 'vue-datamaps'
25+
import { VueDatamaps } from '../../../src/index'
2526
export default {
2627
components: {
2728
VueDatamaps
@@ -41,27 +42,33 @@ export default {
4142
},
4243
awsRegionsConfig: {
4344
popupOnHover: true,
44-
borderColor: '#e8762e',
45+
borderColor: 'transparent',
4546
data: [
4647
{
47-
code: 'ap-northeast-2',
48-
fillKey: 'active'
48+
code: 'ap-northeast-1',
49+
fillKey: 'active',
50+
color: 'orange'
4951
},
5052
{
51-
code: 'ap-northeast-1',
52-
fillKey: 'active'
53+
code: 'ap-northeast-2',
54+
fillKey: 'active',
55+
color: 'orange'
5356
},
57+
5458
{
5559
code: 'us-east-2',
56-
fillKey: 'active'
60+
fillKey: 'active',
61+
color: 'red'
5762
},
5863
{
5964
code: 'ap-southeast-1',
60-
fillKey: 'active'
65+
fillKey: 'active',
66+
color: 'red'
6167
},
6268
{
6369
code: 'ca-central-1',
64-
fillKey: 'active'
70+
fillKey: 'active',
71+
color: 'red'
6572
}
6673
]
6774
},
@@ -71,23 +78,28 @@ export default {
7178
data: [
7279
{
7380
origin: 'ap-northeast-1',
74-
destination: 'ap-northeast-2'
81+
destination: 'ap-northeast-2',
82+
color: 'orange'
7583
},
7684
{
7785
origin: 'ap-southeast-1',
78-
destination: 'ap-northeast-2'
86+
destination: 'ap-northeast-2',
87+
color: 'red'
7988
},
8089
{
8190
origin: 'ap-southeast-2',
82-
destination: 'ap-northeast-1'
91+
destination: 'ap-northeast-1',
92+
color: 'red'
8393
},
8494
{
8595
origin: 'ca-central-1',
86-
destination: 'ap-northeast-2'
96+
destination: 'ap-northeast-2',
97+
color: 'red'
8798
},
8899
{
89100
origin: 'us-east-2',
90-
destination: 'ap-northeast-2'
101+
destination: 'ap-northeast-2',
102+
color: 'red'
91103
}
92104
],
93105
strokeColor: '#e8762e',

Diff for: example/src/components/DatamapsDataTransfer.vue

+45
Large diffs are not rendered by default.

Diff for: src/components/Datamaps.vue

+5-28
Original file line numberDiff line numberDiff line change
@@ -54,33 +54,10 @@
5454
style="z-index:10001;position:absolute"
5555
:style="popupPosition"
5656
>
57-
<slot name="hoverinfo">
58-
<div v-if="showHoverInfo" class="hoverinfo">
59-
<strong>
60-
{{ popupText.title }}
61-
</strong>
62-
</div>
63-
64-
</slot>
65-
<slot name="hoverBubbleInfo" v-if="showHoverBubbleInfo">
66-
<div class="hoverinfo">
67-
<strong>
68-
{{ popupText.title }}
69-
</strong>
70-
</div>
71-
</slot>
72-
<slot name="hoverArcInfo" v-if="showHoverArcInfo">
73-
<div class="hoverinfo">
74-
<strong>{{ popupText.title }}</strong><br>
75-
{{ popupText.origin }} -> {{ popupText.destination }}
76-
{{ popupText.value }}
77-
</div>
78-
</slot>
79-
<slot name="hoverRegionInfo" v-if="showHoverRegionInfo">
80-
<div class="hoverinfo">
81-
<strong>{{ popupText.title }}</strong><br>
82-
</div>
83-
</slot>
57+
<slot v-if="showHoverInfo" name="hoverinfo"></slot>
58+
<slot name="hoverBubbleInfo" v-if="showHoverBubbleInfo"></slot>
59+
<slot name="hoverArcInfo" v-if="showHoverArcInfo"></slot>
60+
<slot name="hoverRegionInfo" v-if="showHoverRegionInfo"></slot>
8461
</div>
8562
</div>
8663
</template>
@@ -156,7 +133,7 @@ export default {
156133
},
157134
computed: {
158135
regions () {
159-
return (this.awsRegions && this.awsRegionsConfig.region) || regions
136+
return this.awsRegionsConfig.region || regions
160137
},
161138
isPopupOn () {
162139
return (this.geograpphyConfigOptions.popupOnHover || this.bubblesConfigOptions.popupOnHover) && (this.showHoverInfo || this.showHoverBubbleInfo || this.showHoverArcInfo || this.showHoverRegionInfo)

Diff for: src/components/LayerArc.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default {
3131
return {
3232
origin: item.origin,
3333
destination: item.destination,
34+
color: item.color,
3435
...item.options
3536
}
3637
})
@@ -45,7 +46,7 @@ export default {
4546
styles (datum, index) {
4647
const data = {
4748
strokeLinecap: 'round',
48-
stroke: val(datum.strokeColor, this.options.strokeColor, datum),
49+
stroke: datum.color || val(datum.strokeColor, this.options.strokeColor, datum),
4950
fill: 'none',
5051
strokeWidth: val(datum.strokeWidth, this.options.strokeWidth, datum)
5152
}

Diff for: src/components/LayerAwsRegions.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,15 @@ export default {
6666
},
6767
innerStyles (datum, index) {
6868
return {
69-
stroke: val(datum.borderColor, this.options.borderColor, datum),
69+
stroke: datum.color || val(datum.borderColor, this.options.borderColor, datum),
7070
strokeWidth: val(datum.borderWidth, this.options.borderWidth, datum),
71-
fill: this.options.fills[val(datum.fillKey, this.options.fillKey, datum)] || 'transparent',
71+
fill: datum.color || this.options.fills[val(datum.fillKey, this.options.fillKey, datum)] || 'transparent',
7272
fillOpacity: val(datum.borderOpacity, this.options.borderOpacity, datum)
7373
}
7474
},
7575
outerStyles (datum, index) {
7676
return {
77-
stroke: val(datum.borderColor, this.options.borderColor, datum),
77+
stroke: this.options.borderColor || datum.color || val(datum.borderColor, this.options.borderColor, datum),
7878
strokeWidth: val(datum.borderWidth, this.options.borderWidth, datum),
7979
fill: 'transparent',
8080
fillOpacity: val(datum.borderOpacity, this.options.borderOpacity, datum)

0 commit comments

Comments
 (0)