@ohos-ports/jsvectormap 1.7.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/LICENSE +21 -0
  2. package/dist/jsvectormap.cjs +2355 -0
  3. package/dist/jsvectormap.css +147 -0
  4. package/dist/jsvectormap.esm.js +2293 -0
  5. package/dist/jsvectormap.js +2301 -0
  6. package/dist/jsvectormap.min.css +1 -0
  7. package/dist/jsvectormap.min.js +1 -0
  8. package/dist/maps/world-merc.js +1 -0
  9. package/dist/maps/world.js +1 -0
  10. package/package.json +49 -0
  11. package/src/js/components/base.js +18 -0
  12. package/src/js/components/concerns/interactable.js +68 -0
  13. package/src/js/components/line.js +50 -0
  14. package/src/js/components/marker.js +109 -0
  15. package/src/js/components/region.js +53 -0
  16. package/src/js/components/route.js +76 -0
  17. package/src/js/components/tooltip.js +88 -0
  18. package/src/js/core/applyTransform.js +43 -0
  19. package/src/js/core/coordsToPoint.js +22 -0
  20. package/src/js/core/createLines.js +44 -0
  21. package/src/js/core/createMarkers.js +55 -0
  22. package/src/js/core/createRegions.js +23 -0
  23. package/src/js/core/createRoutes.js +16 -0
  24. package/src/js/core/createSeries.js +13 -0
  25. package/src/js/core/getInsetForPoint.js +13 -0
  26. package/src/js/core/getMarkerPosition.js +12 -0
  27. package/src/js/core/index.js +41 -0
  28. package/src/js/core/repositionLabels.js +21 -0
  29. package/src/js/core/repositionLines.js +30 -0
  30. package/src/js/core/repositionMarkers.js +11 -0
  31. package/src/js/core/resize.js +15 -0
  32. package/src/js/core/setFocus.js +46 -0
  33. package/src/js/core/setScale.js +65 -0
  34. package/src/js/core/setupContainerEvents.js +50 -0
  35. package/src/js/core/setupContainerTouchEvents.js +85 -0
  36. package/src/js/core/setupElementEvents.js +112 -0
  37. package/src/js/core/setupZoomButtons.js +40 -0
  38. package/src/js/core/updateSize.js +7 -0
  39. package/src/js/dataVisualization.js +87 -0
  40. package/src/js/defaults/events.js +11 -0
  41. package/src/js/defaults/options.js +90 -0
  42. package/src/js/eventHandler.js +47 -0
  43. package/src/js/index.js +25 -0
  44. package/src/js/legend.js +69 -0
  45. package/src/js/map.js +367 -0
  46. package/src/js/projection.js +127 -0
  47. package/src/js/scales/ordinalScale.js +21 -0
  48. package/src/js/series.js +68 -0
  49. package/src/js/svg/baseElement.js +53 -0
  50. package/src/js/svg/canvasElement.js +99 -0
  51. package/src/js/svg/imageElement.js +49 -0
  52. package/src/js/svg/shapeElement.js +48 -0
  53. package/src/js/svg/textElement.js +13 -0
  54. package/src/js/util/deepMerge.js +129 -0
  55. package/src/js/util/index.js +81 -0
  56. package/src/scss/_variables.scss +37 -0
  57. package/src/scss/jsvectormap.scss +153 -0
package/src/scss/_variables.scss ADDED
@@ -0,0 +1,37 @@
1
+ $border-color: #E5E6E7 !default;
2
+ $box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !default;
3
+
4
+ // Tooltip
5
+ $tooltip-font-size: 0.9rem !default;
6
+ $tooltip-bg-color: #337FFA !default;
7
+ $tooltip-color: #FFF !default;
8
+ $tooltip-padding: 3px 5px !default;
9
+ $tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
10
+ $tooltip-radius: 3px !default;
11
+
12
+ // Zoom buttons
13
+ $zoom-btn-bg-color: #292929 !default;
14
+ $zoom-btn-color: #FFF !default;
15
+ $zoom-btn-size: 15px !default;
16
+ $zoom-btn-radius: 3px !default;
17
+
18
+ // Series
19
+ $series-container-right: 15px !default;
20
+
21
+ // Legends
22
+ $legend-bg-color: #FFF !default;
23
+ $legend-radius: .15rem !default;
24
+ $legend-margin-left: .75rem !default;
25
+ $legend-padding: .6rem !default;
26
+
27
+ // Legend title
28
+ $legend-title-padding-bottom: .5rem !default;
29
+ $legend-title-margin-bottom: .575rem !default;
30
+
31
+ // Legend ticks
32
+ $legend-tick-margin-top: .575rem !default;
33
+ $legend-tick-sample-radius: 0 !default;
34
+ $legend-tick-sample-height: 12px !default;
35
+ $legend-tick-sample-width: 30px !default;
36
+ $legend-tick-text-font-size: 12px !default;
37
+ $legend-tick-text-margin-top: 3px !default;
package/src/scss/jsvectormap.scss ADDED
@@ -0,0 +1,153 @@
1
+ @import './variables';
2
+
3
+ :root {
4
+ --jvm-border-color: #{$border-color};
5
+ --jvm-box-shadow: #{$box-shadow};
6
+
7
+ // Tooltip
8
+ --jvm-tooltip-font-size: #{$tooltip-font-size};
9
+ --jvm-tooltip-bg-color: #{$tooltip-bg-color};
10
+ --jvm-tooltip-color: #{$tooltip-color};
11
+ --jvm-tooltip-padding: #{$tooltip-padding};
12
+ --jvm-tooltip-shadow: var(--jvm-box-shadow);
13
+ --jvm-tooltip-radius: #{$tooltip-radius};
14
+
15
+ // Zoom buttons
16
+ --jvm-zoom-btn-bg-color: #{$zoom-btn-bg-color};
17
+ --jvm-zoom-btn-color: #{$zoom-btn-color};
18
+ --jvm-zoom-btn-size: #{$zoom-btn-size};
19
+ --jvm-zoom-btn-radius: #{$zoom-btn-radius};
20
+
21
+ // Series
22
+ --jvm-series-container-right: #{$series-container-right};
23
+
24
+ // Legends
25
+ --jvm-legend-bg-color: #{$legend-bg-color};
26
+ --jvm-legend-radius: #{$legend-radius};
27
+ --jvm-legend-margin-left: #{$legend-margin-left};
28
+ --jvm-legend-padding: #{$legend-padding};
29
+
30
+ // Legend title
31
+ --jvm-legend-title-padding-bottom: #{$legend-title-padding-bottom};
32
+ --jvm-legend-title-margin-bottom: #{$legend-title-margin-bottom};
33
+
34
+ // Legend ticks
35
+ --jvm-legend-tick-margin-top: #{$legend-tick-margin-top};
36
+ --jvm-legend-tick-sample-radius: #{$legend-tick-sample-radius};
37
+ --jvm-legend-tick-sample-height: #{$legend-tick-sample-height};
38
+ --jvm-legend-tick-sample-width: #{$legend-tick-sample-width};
39
+ --jvm-legend-tick-text-font-size: #{$legend-tick-text-font-size};
40
+ --jvm-legend-tick-text-margin-top: #{$legend-tick-text-margin-top};
41
+ }
42
+
43
+ // Global resets
44
+ image, text, .jvm-zoom-btn { user-select: none }
45
+
46
+ // jsVectorMap container
47
+ .jvm-container {
48
+ position: relative;
49
+ height: 100%;
50
+ width: 100%;
51
+ }
52
+
53
+ // Tooltip
54
+ .jvm-tooltip {
55
+ border-radius: var(--jvm-tooltip-radius);
56
+ background-color: var(--jvm-tooltip-bg-color);
57
+ color: var(--jvm-tooltip-color);
58
+ font-size: var(--jvm-tooltip-font-size);
59
+ box-shadow: var(--jvm-tooltip-shadow);
60
+ padding: var(--jvm-tooltip-padding);
61
+ white-space: nowrap;
62
+ position: absolute;
63
+ display: none;
64
+ &.active {
65
+ display: block;
66
+ }
67
+ }
68
+
69
+ // Zoom buttons
70
+ .jvm-zoom-btn {
71
+ background-color: var(--jvm-zoom-btn-bg-color);
72
+ color: var(--jvm-zoom-btn-color);
73
+ border-radius: var(--jvm-zoom-btn-radius);
74
+ height: var(--jvm-zoom-btn-size);
75
+ width: var(--jvm-zoom-btn-size);
76
+ box-sizing: border-box;
77
+ position: absolute;
78
+ left: 10px;
79
+ line-height: var(--jvm-zoom-btn-size);
80
+ text-align: center;
81
+ cursor: pointer;
82
+
83
+ &.jvm-zoomin {
84
+ top: var(--jvm-zoom-btn-size)
85
+ }
86
+
87
+ &.jvm-zoomout {
88
+ top: calc(var(--jvm-zoom-btn-size) * 2 + (var(--jvm-zoom-btn-size) / 3));
89
+ }
90
+ }
91
+
92
+ // Series
93
+ .jvm-series-container {
94
+ position: absolute;
95
+ right: var(--jvm-series-container-right);
96
+ &.jvm-series-h { bottom: 15px }
97
+ &.jvm-series-v {
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 0.75rem;
101
+ top: 15px;
102
+ }
103
+ }
104
+
105
+ // Legends
106
+ .jvm-legend {
107
+ background-color: var(--jvm-legend-bg-color);
108
+ border: 1px solid var(--jvm-border-color);
109
+ margin-left: var(--jvm-legend-margin-left);
110
+ border-radius: var(--jvm-legend-radius);
111
+ padding: var(--jvm-legend-padding);
112
+ box-shadow: var(--jvm-box-shadow);
113
+ }
114
+
115
+ .jvm-legend-title {
116
+ line-height: 1;
117
+ border-bottom: 1px solid var(--jvm-border-color);
118
+ padding-bottom: var(--jvm-legend-title-padding-bottom);
119
+ margin-bottom: var(--jvm-legend-title-margin-bottom);
120
+ text-align: left;
121
+ }
122
+
123
+ .jvm-legend-tick {
124
+ display: flex;
125
+ align-items: center;
126
+ min-width: 40px;
127
+ &:not(:first-child) {
128
+ margin-top: var(--jvm-legend-tick-margin-top);
129
+ }
130
+ }
131
+
132
+ .jvm-legend-tick-sample {
133
+ border-radius: var(--jvm-legend-tick-sample-radius);
134
+ margin-right: 0.45rem;
135
+ height: var(--jvm-legend-tick-sample-height);
136
+ width: var(--jvm-legend-tick-sample-width);
137
+ }
138
+
139
+ .jvm-legend-tick-text {
140
+ font-size: var(--jvm-legend-tick-text-font-size);
141
+ text-align: center;
142
+ line-height: 1;
143
+ }
144
+
145
+ // Line animation
146
+ .jvm-line[animation="true"] {
147
+ -webkit-animation: jvm-line-animation 10s linear forwards infinite;
148
+ animation: jvm-line-animation 10s linear forwards infinite;
149
+
150
+ @keyframes jvm-line-animation {
151
+ from { stroke-dashoffset: 250; }
152
+ }
153
+ }