@amcharts/amcharts5 5.16.2 → 5.17.1

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 (227) hide show
  1. package/.internal/charts/map/MapChartDefaultTheme.d.ts.map +1 -1
  2. package/.internal/charts/map/MapChartDefaultTheme.js +3 -0
  3. package/.internal/charts/map/MapChartDefaultTheme.js.map +1 -1
  4. package/.internal/charts/map/MapSankeyNodes.d.ts +155 -0
  5. package/.internal/charts/map/MapSankeyNodes.d.ts.map +1 -0
  6. package/.internal/charts/map/MapSankeyNodes.js +151 -0
  7. package/.internal/charts/map/MapSankeyNodes.js.map +1 -0
  8. package/.internal/charts/map/MapSankeySeries.d.ts +412 -0
  9. package/.internal/charts/map/MapSankeySeries.d.ts.map +1 -0
  10. package/.internal/charts/map/MapSankeySeries.js +868 -0
  11. package/.internal/charts/map/MapSankeySeries.js.map +1 -0
  12. package/.internal/core/Classes.d.ts +6 -0
  13. package/.internal/core/Classes.d.ts.map +1 -1
  14. package/.internal/core/Classes.js.map +1 -1
  15. package/.internal/core/Registry.js +1 -1
  16. package/.internal/core/Registry.js.map +1 -1
  17. package/.internal/core/util/Entity.d.ts.map +1 -1
  18. package/.internal/core/util/Entity.js +6 -0
  19. package/.internal/core/util/Entity.js.map +1 -1
  20. package/.internal/core/util/Math.d.ts +132 -49
  21. package/.internal/core/util/Math.d.ts.map +1 -1
  22. package/.internal/core/util/Math.js +151 -50
  23. package/.internal/core/util/Math.js.map +1 -1
  24. package/.internal/core/util/Object.d.ts +24 -1
  25. package/.internal/core/util/Object.d.ts.map +1 -1
  26. package/.internal/core/util/Object.js +24 -1
  27. package/.internal/core/util/Object.js.map +1 -1
  28. package/.internal/core/util/Utils.d.ts +69 -3
  29. package/.internal/core/util/Utils.d.ts.map +1 -1
  30. package/.internal/core/util/Utils.js +72 -18
  31. package/.internal/core/util/Utils.js.map +1 -1
  32. package/.internal/plugins/json/Classes-script.d.ts +6 -0
  33. package/.internal/plugins/json/Classes-script.d.ts.map +1 -1
  34. package/.internal/plugins/json/Classes-script.js +3 -0
  35. package/.internal/plugins/json/Classes-script.js.map +1 -1
  36. package/.internal/plugins/json/Classes.d.ts +6 -0
  37. package/.internal/plugins/json/Classes.d.ts.map +1 -1
  38. package/.internal/plugins/json/Classes.js +3 -0
  39. package/.internal/plugins/json/Classes.js.map +1 -1
  40. package/CHANGELOG.md +23 -8
  41. package/examples/javascript/flow-arc-horizontal/package.json +1 -1
  42. package/examples/javascript/flow-arc-vertical/package.json +1 -1
  43. package/examples/javascript/flow-chord/package.json +1 -1
  44. package/examples/javascript/flow-chord-directed/package.json +1 -1
  45. package/examples/javascript/flow-chord-non-ribbon/package.json +1 -1
  46. package/examples/javascript/flow-sankey/package.json +1 -1
  47. package/examples/javascript/gantt/package.json +1 -1
  48. package/examples/javascript/gantt-multilevel/package.json +1 -1
  49. package/examples/javascript/gantt-simple/package.json +1 -1
  50. package/examples/javascript/gauge/package.json +1 -1
  51. package/examples/javascript/gauge-bands/package.json +1 -1
  52. package/examples/javascript/hierarchy-force-directed/package.json +1 -1
  53. package/examples/javascript/hierarchy-pack/package.json +1 -1
  54. package/examples/javascript/hierarchy-partition/package.json +1 -1
  55. package/examples/javascript/hierarchy-sunburst/package.json +1 -1
  56. package/examples/javascript/hierarchy-tree/package.json +1 -1
  57. package/examples/javascript/hierarchy-treemap/package.json +1 -1
  58. package/examples/javascript/hierarchy-voronoi-treemap/package.json +1 -1
  59. package/examples/javascript/jest/package.json +1 -1
  60. package/examples/javascript/json-pie/package.json +1 -1
  61. package/examples/javascript/json-xy/package.json +1 -1
  62. package/examples/javascript/map-animating-along-lines/package.json +1 -1
  63. package/examples/javascript/map-clustered-points/package.json +1 -1
  64. package/examples/javascript/map-day-and-night/package.json +1 -1
  65. package/examples/javascript/map-globe-rotate-to-country/package.json +1 -1
  66. package/examples/javascript/map-globe-with-projected-circles/package.json +1 -1
  67. package/examples/javascript/map-sankey/README.md +6 -0
  68. package/examples/javascript/map-sankey/index.css +11 -0
  69. package/examples/javascript/map-sankey/index.html +13 -0
  70. package/examples/javascript/map-sankey/index.js +361 -0
  71. package/examples/javascript/map-sankey/package.json +17 -0
  72. package/examples/javascript/map-sankey/webpack.config.js +38 -0
  73. package/examples/javascript/map-sankey-waypoints/README.md +6 -0
  74. package/examples/javascript/map-sankey-waypoints/index.css +11 -0
  75. package/examples/javascript/map-sankey-waypoints/index.html +13 -0
  76. package/examples/javascript/map-sankey-waypoints/index.js +394 -0
  77. package/examples/javascript/map-sankey-waypoints/package.json +17 -0
  78. package/examples/javascript/map-sankey-waypoints/webpack.config.js +38 -0
  79. package/examples/javascript/map-with-bubbles/package.json +1 -1
  80. package/examples/javascript/map-zoom-to-country/package.json +1 -1
  81. package/examples/javascript/misc-40-charts/package.json +1 -1
  82. package/examples/javascript/misc-microchart-grid/package.json +1 -1
  83. package/examples/javascript/pie-chart/package.json +1 -1
  84. package/examples/javascript/pie-donut-chart/package.json +1 -1
  85. package/examples/javascript/pie-variable-radius/package.json +1 -1
  86. package/examples/javascript/radar-column-iwatch-style/package.json +1 -1
  87. package/examples/javascript/radar-heat-map/package.json +1 -1
  88. package/examples/javascript/radar-line/package.json +1 -1
  89. package/examples/javascript/radar-time-line/package.json +1 -1
  90. package/examples/javascript/sliced-funnel/package.json +1 -1
  91. package/examples/javascript/sliced-pictorial-stacked/package.json +1 -1
  92. package/examples/javascript/sliced-pyramid/package.json +1 -1
  93. package/examples/javascript/stock-chart/package.json +1 -1
  94. package/examples/javascript/stock-chart-comparing-stocks/package.json +1 -1
  95. package/examples/javascript/stock-chart-data-granularity/package.json +1 -1
  96. package/examples/javascript/stock-chart-data-grouping/package.json +1 -1
  97. package/examples/javascript/stock-chart-intraday/package.json +1 -1
  98. package/examples/javascript/stock-chart-live/package.json +1 -1
  99. package/examples/javascript/stock-chart-volume-separate-panel/package.json +1 -1
  100. package/examples/javascript/timeline-horizontal-serpentine-chart/package.json +1 -1
  101. package/examples/javascript/timeline-linear-process-diagram/package.json +1 -1
  102. package/examples/javascript/timeline-serpentine-chart/package.json +1 -1
  103. package/examples/javascript/timeline-spiral-chart/package.json +1 -1
  104. package/examples/javascript/venn-diagram/package.json +1 -1
  105. package/examples/javascript/wordcloud-with-data/package.json +1 -1
  106. package/examples/javascript/wordcloud-with-text/package.json +1 -1
  107. package/examples/javascript/xy-100-percent-stacked-column/package.json +1 -1
  108. package/examples/javascript/xy-animated-bullet-at-the-end-of-the-series/package.json +1 -1
  109. package/examples/javascript/xy-bubble/package.json +1 -1
  110. package/examples/javascript/xy-candlestick/package.json +1 -1
  111. package/examples/javascript/xy-clustered-column/package.json +1 -1
  112. package/examples/javascript/xy-column/package.json +1 -1
  113. package/examples/javascript/xy-comparing-series-google-analytics-style/package.json +1 -1
  114. package/examples/javascript/xy-data-grouping/package.json +1 -1
  115. package/examples/javascript/xy-draggable-range/package.json +1 -1
  116. package/examples/javascript/xy-drawing-series-with-mouse-or-touch/package.json +1 -1
  117. package/examples/javascript/xy-dumbbell plot/package.json +1 -1
  118. package/examples/javascript/xy-evenly-spaced-date-axis/package.json +1 -1
  119. package/examples/javascript/xy-line/package.json +1 -1
  120. package/examples/javascript/xy-line-highlight-on-legend-hover/package.json +1 -1
  121. package/examples/javascript/xy-live-data/package.json +1 -1
  122. package/examples/javascript/xy-multiple-synced-value-axes/package.json +1 -1
  123. package/examples/javascript/xy-ohlc/package.json +1 -1
  124. package/examples/javascript/xy-real-time-data-sorting/package.json +1 -1
  125. package/examples/javascript/xy-smoothed-line/package.json +1 -1
  126. package/examples/javascript/xy-stacked-and-clustered-column/package.json +1 -1
  127. package/examples/javascript/xy-stacked-column/package.json +1 -1
  128. package/examples/javascript/xy-stacked-step/package.json +1 -1
  129. package/examples/javascript/xy-stock/package.json +1 -1
  130. package/examples/javascript/xy-stock-comparing/package.json +1 -1
  131. package/examples/typescript/flow-arc-horizontal/package.json +1 -1
  132. package/examples/typescript/flow-arc-vertical/package.json +1 -1
  133. package/examples/typescript/flow-chord/package.json +1 -1
  134. package/examples/typescript/flow-chord-directed/package.json +1 -1
  135. package/examples/typescript/flow-chord-non-ribbon/package.json +1 -1
  136. package/examples/typescript/flow-sankey/package.json +1 -1
  137. package/examples/typescript/gantt/package.json +1 -1
  138. package/examples/typescript/gantt-multilevel/package.json +1 -1
  139. package/examples/typescript/gantt-simple/package.json +1 -1
  140. package/examples/typescript/gauge/package.json +1 -1
  141. package/examples/typescript/gauge-bands/package.json +1 -1
  142. package/examples/typescript/hierarchy-force-directed/package.json +1 -1
  143. package/examples/typescript/hierarchy-pack/package.json +1 -1
  144. package/examples/typescript/hierarchy-partition/package.json +1 -1
  145. package/examples/typescript/hierarchy-sunburst/package.json +1 -1
  146. package/examples/typescript/hierarchy-tree/package.json +1 -1
  147. package/examples/typescript/hierarchy-treemap/package.json +1 -1
  148. package/examples/typescript/hierarchy-voronoi-treemap/package.json +1 -1
  149. package/examples/typescript/jest/package.json +1 -1
  150. package/examples/typescript/json-pie/package.json +1 -1
  151. package/examples/typescript/json-xy/package.json +1 -1
  152. package/examples/typescript/map-animating-along-lines/package.json +1 -1
  153. package/examples/typescript/map-clustered-points/package.json +1 -1
  154. package/examples/typescript/map-day-and-night/package.json +1 -1
  155. package/examples/typescript/map-globe-rotate-to-country/package.json +1 -1
  156. package/examples/typescript/map-globe-with-projected-circles/package.json +1 -1
  157. package/examples/typescript/map-sankey/README.md +6 -0
  158. package/examples/typescript/map-sankey/index.css +11 -0
  159. package/examples/typescript/map-sankey/index.html +13 -0
  160. package/examples/typescript/map-sankey/index.ts +361 -0
  161. package/examples/typescript/map-sankey/package.json +19 -0
  162. package/examples/typescript/map-sankey/tsconfig.json +12 -0
  163. package/examples/typescript/map-sankey/webpack.config.js +45 -0
  164. package/examples/typescript/map-sankey-waypoints/README.md +6 -0
  165. package/examples/typescript/map-sankey-waypoints/index.css +11 -0
  166. package/examples/typescript/map-sankey-waypoints/index.html +13 -0
  167. package/examples/typescript/map-sankey-waypoints/index.ts +394 -0
  168. package/examples/typescript/map-sankey-waypoints/package.json +19 -0
  169. package/examples/typescript/map-sankey-waypoints/tsconfig.json +12 -0
  170. package/examples/typescript/map-sankey-waypoints/webpack.config.js +45 -0
  171. package/examples/typescript/map-with-bubbles/package.json +1 -1
  172. package/examples/typescript/map-zoom-to-country/package.json +1 -1
  173. package/examples/typescript/misc-40-charts/package.json +1 -1
  174. package/examples/typescript/misc-microchart-grid/package.json +1 -1
  175. package/examples/typescript/pie-chart/package.json +1 -1
  176. package/examples/typescript/pie-donut-chart/package.json +1 -1
  177. package/examples/typescript/pie-variable-radius/package.json +1 -1
  178. package/examples/typescript/radar-column-iwatch-style/package.json +1 -1
  179. package/examples/typescript/radar-heat-map/package.json +1 -1
  180. package/examples/typescript/radar-line/package.json +1 -1
  181. package/examples/typescript/radar-time-line/package.json +1 -1
  182. package/examples/typescript/sliced-funnel/package.json +1 -1
  183. package/examples/typescript/sliced-pictorial-stacked/package.json +1 -1
  184. package/examples/typescript/sliced-pyramid/package.json +1 -1
  185. package/examples/typescript/stock-chart/package.json +1 -1
  186. package/examples/typescript/stock-chart-comparing-stocks/package.json +1 -1
  187. package/examples/typescript/stock-chart-data-granularity/package.json +1 -1
  188. package/examples/typescript/stock-chart-data-grouping/package.json +1 -1
  189. package/examples/typescript/stock-chart-intraday/package.json +1 -1
  190. package/examples/typescript/stock-chart-live/package.json +1 -1
  191. package/examples/typescript/stock-chart-volume-separate-panel/package.json +1 -1
  192. package/examples/typescript/timeline-horizontal-serpentine-chart/package.json +1 -1
  193. package/examples/typescript/timeline-linear-process-diagram/package.json +1 -1
  194. package/examples/typescript/timeline-serpentine-chart/package.json +1 -1
  195. package/examples/typescript/timeline-spiral-chart/package.json +1 -1
  196. package/examples/typescript/venn-diagram/package.json +1 -1
  197. package/examples/typescript/wordcloud-with-data/package.json +1 -1
  198. package/examples/typescript/wordcloud-with-text/package.json +1 -1
  199. package/examples/typescript/xy-100-percent-stacked-column/package.json +1 -1
  200. package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/package.json +1 -1
  201. package/examples/typescript/xy-bubble/package.json +1 -1
  202. package/examples/typescript/xy-candlestick/package.json +1 -1
  203. package/examples/typescript/xy-clustered-column/package.json +1 -1
  204. package/examples/typescript/xy-column/package.json +1 -1
  205. package/examples/typescript/xy-comparing-series-google-analytics-style/package.json +1 -1
  206. package/examples/typescript/xy-data-grouping/package.json +1 -1
  207. package/examples/typescript/xy-draggable-range/package.json +1 -1
  208. package/examples/typescript/xy-drawing-series-with-mouse-or-touch/package.json +1 -1
  209. package/examples/typescript/xy-dumbbell plot/package.json +1 -1
  210. package/examples/typescript/xy-evenly-spaced-date-axis/package.json +1 -1
  211. package/examples/typescript/xy-line/package.json +1 -1
  212. package/examples/typescript/xy-line-highlight-on-legend-hover/package.json +1 -1
  213. package/examples/typescript/xy-live-data/package.json +1 -1
  214. package/examples/typescript/xy-multiple-synced-value-axes/package.json +1 -1
  215. package/examples/typescript/xy-ohlc/package.json +1 -1
  216. package/examples/typescript/xy-real-time-data-sorting/package.json +1 -1
  217. package/examples/typescript/xy-smoothed-line/package.json +1 -1
  218. package/examples/typescript/xy-stacked-and-clustered-column/package.json +1 -1
  219. package/examples/typescript/xy-stacked-column/package.json +1 -1
  220. package/examples/typescript/xy-stacked-step/package.json +1 -1
  221. package/examples/typescript/xy-stock/package.json +1 -1
  222. package/examples/typescript/xy-stock-comparing/package.json +1 -1
  223. package/map.d.ts +2 -0
  224. package/map.d.ts.map +1 -1
  225. package/map.js +2 -0
  226. package/map.js.map +1 -1
  227. package/package.json +1 -1
@@ -0,0 +1,394 @@
1
+ import * as am5 from "@amcharts/amcharts5";
2
+ import * as am5map from "@amcharts/amcharts5/map";
3
+ import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";
4
+ import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
5
+
6
+
7
+ // ============================================================
8
+ // Strait of Hormuz — Oil Export Flows (MapSankeySeries Demo)
9
+ // Gulf Producers → Asian & European Importers
10
+ // ============================================================
11
+
12
+ var root = am5.Root.new("chartdiv");
13
+
14
+ var oilTheme = am5.Theme.new(root);
15
+ oilTheme.rule("InterfaceColors").setAll({
16
+ primaryButton: am5.color(0x1e2824),
17
+ primaryButtonHover: am5.color(0x3a5040),
18
+ primaryButtonDown: am5.color(0x0a0e12),
19
+ primaryButtonActive: am5.color(0xc8890a),
20
+ primaryButtonText: am5.color(0xf5d090),
21
+ secondaryButton: am5.color(0x1e2824),
22
+ secondaryButtonHover: am5.color(0x3a5040),
23
+ secondaryButtonDown: am5.color(0x141a1a),
24
+ secondaryButtonText: am5.color(0xf5d090),
25
+ background: am5.color(0x0a0e12),
26
+ text: am5.color(0xf5d090)
27
+ });
28
+ root.setThemes([am5themes_Animated.new(root), oilTheme]);
29
+
30
+ // Crude & Tar palette
31
+ var deepCrude = am5.color(0x141a1a); // ocean — very dark teal-black
32
+ var slick = am5.color(0x1e2824); // land dark — oil slick green-black
33
+ var pipeline = am5.color(0x3a5040); // accents — industrial dark green
34
+ var amber = am5.color(0xc8890a); // primary — dark amber / crude oil
35
+ var sulfur = am5.color(0xa89050); // secondary — sulfurous yellow-brown
36
+ var flare = am5.color(0xf5d090); // text/highlights — gas flare warm
37
+
38
+ // ---- Chart (start zoomed out at home) ----
39
+ var chart = root.container.children.push(am5map.MapChart.new(root, {
40
+ panX: "rotateX",
41
+ panY: "rotateY",
42
+ projection: am5map.geoOrthographic(),
43
+ homeGeoPoint: { longitude: 0, latitude: 0 },
44
+ homeRotationX: 0,
45
+ homeRotationY: 0,
46
+ homeZoomLevel: 1,
47
+ minZoomLevel: 0.8,
48
+ zoomLevel: 1
49
+ }));
50
+
51
+ // ---- Ocean background ----
52
+ var bgSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
53
+ bgSeries.mapPolygons.template.setAll({
54
+ fill: deepCrude,
55
+ fillOpacity: 1,
56
+ strokeOpacity: 0
57
+ });
58
+ bgSeries.data.push({ geometry: am5map.getGeoRectangle(90, 180, -90, -180) });
59
+
60
+ // ---- Graticule ----
61
+ var graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {}));
62
+ graticuleSeries.mapLines.template.setAll({
63
+ stroke: pipeline,
64
+ strokeOpacity: 0.25,
65
+ strokeWidth: 0.5
66
+ });
67
+
68
+ // ---- Countries ----
69
+ var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
70
+ geoJSON: am5geodata_worldLow
71
+ }));
72
+ polygonSeries.mapPolygons.template.setAll({
73
+ fill: slick,
74
+ stroke: pipeline,
75
+ strokeWidth: 0.5,
76
+ strokeOpacity: 0.6
77
+ });
78
+
79
+ // Highlight producer & importer countries
80
+ var producerIds = ["SA", "IQ", "AE", "KW", "IR", "QA"];
81
+ var importerIds = ["CN", "JP", "KR", "IN", "SG", "IT", "GR", "NL"];
82
+
83
+ polygonSeries.events.on("datavalidated", function() {
84
+ am5.array.each(polygonSeries.dataItems, function(di) {
85
+ var id = di.get("id");
86
+ if (producerIds.includes(id)) {
87
+ di.get("mapPolygon").setAll({ fill: am5.color(0x6b5a10), tooltipText: "{name}" });
88
+ } else if (importerIds.includes(id)) {
89
+ di.get("mapPolygon").setAll({ fill: am5.color(0x2a4030), tooltipText: "{name}" });
90
+ }
91
+ });
92
+ });
93
+
94
+ // ---- MapSankeySeries — Oil flows through Hormuz ----
95
+ var sankeySeries = chart.series.push(am5map.MapSankeySeries.new(root, {
96
+ polygonSeries: polygonSeries,
97
+ maxWidth: 0.8,
98
+ controlPointDistance: 0.4,
99
+ resolution: 60,
100
+ nodePadding: 0.1
101
+ }));
102
+
103
+ sankeySeries.mapPolygons.template.setAll({
104
+ fill: amber,
105
+ fillOpacity: 0.4,
106
+ strokeOpacity: 0,
107
+ tooltipText: "{source} > {target}\n{value}k bbl/day"
108
+ });
109
+
110
+ sankeySeries.nodes.mapPolygons.template.setAll({
111
+ fill: amber,
112
+ stroke: flare,
113
+ strokeWidth: 1.5,
114
+ fillOpacity: 0.95,
115
+ strokeOpacity: 1,
116
+ tooltipText: "{name}"
117
+ });
118
+
119
+ // ---- Animated oil drop bullets ----
120
+ sankeySeries.bullets.push(function() {
121
+ return am5.Bullet.new(root, {
122
+ locationX: 0,
123
+ autoRotate: true,
124
+ autoRotateAngle: -90,
125
+ sprite: am5.Graphics.new(root, {
126
+ // Oil drop shape
127
+ svgPath: "M0,-7 C2,-4 5,0 5,3 C5,6 3,8 0,8 C-3,8 -5,6 -5,3 C-5,0 -2,-4 0,-7 Z",
128
+ fill: amber,
129
+ stroke: am5.color(0x8b6914),
130
+ strokeWidth: 0.5,
131
+ centerX: am5.p50,
132
+ centerY: am5.p50,
133
+ scale: 0.45,
134
+ visible: false
135
+ })
136
+ });
137
+ });
138
+
139
+ sankeySeries.events.on("datavalidated", function() {
140
+ // Find the longest path to scale durations proportionally
141
+ var maxLength = 0;
142
+ am5.array.each(sankeySeries.dataItems, function(dataItem) {
143
+ var len = sankeySeries.getPathLength(dataItem);
144
+ if (len > maxLength) maxLength = len;
145
+ });
146
+
147
+ var baseDuration = 8000; // longest path duration
148
+ var minDuration = 2000;
149
+
150
+ am5.array.each(sankeySeries.dataItems, function(dataItem) {
151
+ var pathLength = sankeySeries.getPathLength(dataItem) || maxLength;
152
+ var dur = maxLength > 0 ? Math.max(minDuration, (pathLength / maxLength) * baseDuration) : baseDuration;
153
+
154
+ var bullets = dataItem.bullets;
155
+ if (bullets) {
156
+ am5.array.each(bullets, function(bullet) {
157
+ var randomDur = dur * (0.8 + Math.random() * 0.4);
158
+ var delay = Math.random() * randomDur;
159
+ setTimeout(function() {
160
+ var sprite = bullet.get("sprite");
161
+ if (sprite) sprite.set("visible", true);
162
+ bullet.animate({
163
+ key: "locationX",
164
+ from: 0,
165
+ to: 1,
166
+ duration: randomDur,
167
+ easing: am5.ease.linear,
168
+ loops: Infinity
169
+ });
170
+ }, delay);
171
+ });
172
+ }
173
+ });
174
+ });
175
+
176
+ // ---- Oil Export Data — through Strait of Hormuz ----
177
+ // Coordinates: actual oil port / terminal locations
178
+ // Values in thousands of barrels per day (approximate)
179
+
180
+ // Gulf export terminals
181
+ var rasTanura = { lon: 50.17, lat: 26.64 }; // Saudi Arabia — Ras Tanura
182
+ var basra = { lon: 48.80, lat: 29.69 }; // Iraq — Basra Oil Terminal
183
+ var fujairah = { lon: 56.33, lat: 25.12 }; // UAE — Port of Fujairah
184
+ var minaAhmadi = { lon: 48.17, lat: 29.08 }; // Kuwait — Mina Al Ahmadi
185
+ var khargIsland = { lon: 50.32, lat: 29.23 }; // Iran — Kharg Island
186
+ var rasLaffan = { lon: 51.56, lat: 25.93 }; // Qatar — Ras Laffan
187
+
188
+ // Asian import terminals
189
+ var ningbo = { lon: 121.97, lat: 29.87 }; // China — Ningbo-Zhoushan
190
+ var qingdao = { lon: 120.38, lat: 36.07 }; // China — Qingdao
191
+ var yokohama = { lon: 139.64, lat: 35.44 }; // Japan — Yokohama
192
+ var chiba = { lon: 140.10, lat: 35.60 }; // Japan — Chiba
193
+ var ulsan = { lon: 129.38, lat: 35.50 }; // South Korea — Ulsan
194
+ var jamnagar = { lon: 69.66, lat: 22.42 }; // India — Jamnagar / Vadinar
195
+ var mumbai = { lon: 72.88, lat: 19.08 }; // India — Mumbai (JNPT)
196
+ var singapore = { lon: 103.84, lat: 1.26 }; // Singapore — Jurong Island
197
+
198
+ // European import terminals
199
+ var trieste = { lon: 13.78, lat: 45.65 }; // Italy — Trieste (SIOT)
200
+ var piraeus = { lon: 23.63, lat: 37.94 }; // Greece — Piraeus / Agioi Theodoroi
201
+ var rotterdam = { lon: 4.12, lat: 51.95 }; // Netherlands — Rotterdam
202
+
203
+ function flow(src, srcName, tgt, tgtName, value, wp) {
204
+ var result = {
205
+ sourceLongitude: src.lon, sourceLatitude: src.lat,
206
+ targetLongitude: tgt.lon, targetLatitude: tgt.lat,
207
+ source: srcName, target: tgtName, value: value
208
+ };
209
+ if (wp) result.waypoints = wp;
210
+ return result;
211
+ }
212
+
213
+ // Maritime waypoints — keep ships on water
214
+ var wpHormuz = { longitude: 58, latitude: 24 }; // Strait of Hormuz exit
215
+ var wpArabianSea = { longitude: 64, latitude: 18 }; // Mid Arabian Sea
216
+ var wpSouthIndia = { longitude: 78, latitude: 6 }; // South of Sri Lanka
217
+ var wpMalacca = { longitude: 101, latitude: 3 }; // Malacca Strait
218
+ var wpAden = { longitude: 47, latitude: 12 }; // Gulf of Aden
219
+ var wpSuez = { longitude: 34, latitude: 29 }; // Suez Canal
220
+
221
+ // Route templates — fan out East Asia routes so they don't merge
222
+ var viaJapan = [{ longitude: 58, latitude: 26 }, { longitude: 80, latitude: 9 }, { longitude: 104, latitude: 7 }];
223
+ var viaKorea = [{ longitude: 58, latitude: 24 }, { longitude: 78, latitude: 6 }, { longitude: 101, latitude: 3 }];
224
+ var viaChina = [{ longitude: 58, latitude: 22 }, { longitude: 76, latitude: 3 }, { longitude: 99, latitude: 1 }];
225
+ var viaChinaNorth = [{ longitude: 58, latitude: 22 }, { longitude: 76, latitude: 3 }, { longitude: 99, latitude: 1 }, { longitude: 124, latitude: 32 }];
226
+ var viaIndiaNear = [wpHormuz]; // > Jamnagar (close)
227
+ var viaIndiaFar = [wpHormuz, wpArabianSea]; // > Mumbai
228
+ var viaSingapore = [wpHormuz, wpSouthIndia]; // > Singapore
229
+ var viaSuez = [wpHormuz, wpAden, wpSuez]; // > Mediterranean / Europe
230
+ var wpSouthGreece = { longitude: 22, latitude: 35 }; // South of Peloponnese
231
+ var wpOtranto = { longitude: 18.5, latitude: 40 }; // Strait of Otranto (Adriatic entry)
232
+ var viaSuezItaly = [wpHormuz, wpAden, wpSuez, wpSouthGreece, wpOtranto]; // > Italy via south of Greece
233
+ var wpSicily = { longitude: 13, latitude: 37 }; // Near Sicily
234
+ var wpPortugal = { longitude: -10, latitude: 39 }; // Off Portugal coast
235
+ var viaAtlantic = [wpHormuz, wpAden, wpSuez, wpSicily, wpPortugal]; // > Atlantic Europe
236
+
237
+ sankeySeries.data.setAll([
238
+ // === Ras Tanura (Saudi Arabia) ===
239
+ flow(rasTanura, "Ras Tanura", ningbo, "Ningbo", 1100, viaChina),
240
+ flow(rasTanura, "Ras Tanura", qingdao, "Qingdao", 600, viaChinaNorth),
241
+ flow(rasTanura, "Ras Tanura", yokohama, "Yokohama", 700, viaJapan),
242
+ flow(rasTanura, "Ras Tanura", chiba, "Chiba", 300, viaJapan),
243
+ flow(rasTanura, "Ras Tanura", ulsan, "Ulsan", 800, viaKorea),
244
+ flow(rasTanura, "Ras Tanura", jamnagar, "Jamnagar", 500, viaIndiaNear),
245
+ flow(rasTanura, "Ras Tanura", mumbai, "Mumbai", 300, viaIndiaFar),
246
+ flow(rasTanura, "Ras Tanura", rotterdam, "Rotterdam", 350, viaAtlantic),
247
+
248
+ // === Basra Oil Terminal (Iraq) ===
249
+ flow(basra, "Basra", ningbo, "Ningbo", 700, viaChina),
250
+ flow(basra, "Basra", qingdao, "Qingdao", 400, viaChinaNorth),
251
+ flow(basra, "Basra", jamnagar, "Jamnagar", 600, viaIndiaNear),
252
+ flow(basra, "Basra", mumbai, "Mumbai", 400, viaIndiaFar),
253
+ flow(basra, "Basra", ulsan, "Ulsan", 400, viaKorea),
254
+ flow(basra, "Basra", trieste, "Trieste", 350, viaSuezItaly),
255
+ flow(basra, "Basra", piraeus, "Piraeus", 250, viaSuez),
256
+
257
+ // === Fujairah (UAE) — already outside Hormuz ===
258
+ flow(fujairah, "Fujairah", yokohama, "Yokohama", 400, viaJapan.slice(1)),
259
+ flow(fujairah, "Fujairah", chiba, "Chiba", 200, viaJapan.slice(1)),
260
+ flow(fujairah, "Fujairah", jamnagar, "Jamnagar", 300),
261
+ flow(fujairah, "Fujairah", mumbai, "Mumbai", 200, [wpArabianSea]),
262
+ flow(fujairah, "Fujairah", ningbo, "Ningbo", 250, viaChina.slice(1)),
263
+ flow(fujairah, "Fujairah", ulsan, "Ulsan", 350, viaKorea.slice(1)),
264
+ flow(fujairah, "Fujairah", singapore, "Singapore", 250, [wpSouthIndia]),
265
+
266
+ // === Mina Al Ahmadi (Kuwait) ===
267
+ flow(minaAhmadi, "Mina Al Ahmadi", ulsan, "Ulsan", 400, viaKorea),
268
+ flow(minaAhmadi, "Mina Al Ahmadi", yokohama, "Yokohama", 300, viaJapan),
269
+ flow(minaAhmadi, "Mina Al Ahmadi", ningbo, "Ningbo", 300, viaChina),
270
+ flow(minaAhmadi, "Mina Al Ahmadi", jamnagar, "Jamnagar", 200, viaIndiaNear),
271
+
272
+ // === Kharg Island (Iran) ===
273
+ flow(khargIsland, "Kharg Island", ningbo, "Ningbo", 400, viaChina),
274
+ flow(khargIsland, "Kharg Island", qingdao, "Qingdao", 200, viaChinaNorth),
275
+ flow(khargIsland, "Kharg Island", jamnagar, "Jamnagar", 200, viaIndiaNear),
276
+ flow(khargIsland, "Kharg Island", piraeus, "Piraeus", 100, viaSuez),
277
+
278
+ // === Ras Laffan (Qatar) ===
279
+ flow(rasLaffan, "Ras Laffan", yokohama, "Yokohama", 300, viaJapan),
280
+ flow(rasLaffan, "Ras Laffan", ulsan, "Ulsan", 200, viaKorea),
281
+ flow(rasLaffan, "Ras Laffan", jamnagar, "Jamnagar", 150, viaIndiaNear),
282
+ flow(rasLaffan, "Ras Laffan", singapore,"Singapore", 120, viaSingapore)
283
+ ]);
284
+
285
+ // ---- Title + Subtitle (top center) ----
286
+ var titleCont = chart.children.push(am5.Container.new(root, {
287
+ layout: root.verticalLayout,
288
+ x: am5.p50,
289
+ centerX: am5.p50,
290
+ y: 0,
291
+ position: "absolute",
292
+ paddingTop: 16
293
+ }));
294
+
295
+ titleCont.children.push(am5.Label.new(root, {
296
+ text: "Strait of Hormuz — Oil Export Flows",
297
+ fontSize: 18,
298
+ fontWeight: "600",
299
+ fill: amber,
300
+ x: am5.p50,
301
+ centerX: am5.p50
302
+ }));
303
+
304
+ titleCont.children.push(am5.Label.new(root, {
305
+ text: "Gulf Producers > Major Importers (thousands of barrels/day)",
306
+ fontSize: 11,
307
+ fill: sulfur,
308
+ x: am5.p50,
309
+ centerX: am5.p50
310
+ }));
311
+
312
+ // ---- Globe / Map switch ----
313
+ var switchCont = chart.children.push(am5.Container.new(root, {
314
+ layout: root.horizontalLayout,
315
+ x: 20,
316
+ y: 40
317
+ }));
318
+
319
+ switchCont.children.push(am5.Label.new(root, {
320
+ centerY: am5.p50,
321
+ text: "Globe",
322
+ fill: flare,
323
+ fontSize: 13
324
+ }));
325
+
326
+ var switchButton = switchCont.children.push(am5.Button.new(root, {
327
+ themeTags: ["switch"],
328
+ centerY: am5.p50,
329
+ icon: am5.Circle.new(root, {
330
+ themeTags: ["icon"]
331
+ })
332
+ }));
333
+
334
+ var easing = am5.ease.inOut(am5.ease.cubic);
335
+ var duration = 1500;
336
+
337
+ function zoomToGlobe() {
338
+ chart.set("projection", am5map.geoOrthographic());
339
+ chart.set("panX", "rotateX");
340
+ chart.set("panY", "rotateY");
341
+ chart.animate({ key: "rotationX", to: -74, duration, easing });
342
+ chart.animate({ key: "rotationY", to: -30, duration, easing });
343
+ chart.animate({ key: "zoomLevel", to: 1.6, duration, easing });
344
+ bgSeries.mapPolygons.template.set("fillOpacity", 1);
345
+ }
346
+
347
+ function zoomToMap() {
348
+ chart.set("projection", am5map.geoMercator());
349
+ chart.set("panX", "translateX");
350
+ chart.set("panY", "translateY");
351
+ chart.animate({ key: "rotationY", to: 0, duration, easing });
352
+ setTimeout(function() {
353
+ chart.zoomToGeoPoint({ longitude: 67, latitude: 32 }, 3.5, true, duration);
354
+ }, 100);
355
+ bgSeries.mapPolygons.template.set("fillOpacity", 0);
356
+ }
357
+
358
+ var fadeDuration = 300;
359
+
360
+ switchButton.on("active", function() {
361
+ chart.goHome(duration);
362
+ // Fade out before projection switch
363
+ setTimeout(function() {
364
+ chart.seriesContainer.animate({ key: "opacity", to: 0, duration: fadeDuration });
365
+ }, duration - fadeDuration);
366
+ setTimeout(function() {
367
+ if (switchButton.get("active")) {
368
+ zoomToMap();
369
+ } else {
370
+ zoomToGlobe();
371
+ }
372
+ // Fade in after projection switch
373
+ chart.seriesContainer.animate({ key: "opacity", to: 1, duration: fadeDuration });
374
+ }, duration);
375
+ });
376
+
377
+ switchCont.children.push(am5.Label.new(root, {
378
+ centerY: am5.p50,
379
+ text: "Map",
380
+ fill: flare,
381
+ fontSize: 13
382
+ }));
383
+
384
+ // ---- Zoom controls with home button ----
385
+ const zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
386
+ zoomControl.homeButton.set("visible", true);
387
+
388
+
389
+ chart.appear(1000, 100);
390
+
391
+ // Initial animation: rotate to globe position, then zoom in
392
+ setTimeout(function() {
393
+ zoomToGlobe();
394
+ }, 1000);
@@ -0,0 +1,17 @@
1
+ {
2
+ "private": true,
3
+ "name": "amcharts5-example-map-sankey-waypoints",
4
+ "version": "0.1.0",
5
+ "devDependencies": {
6
+ "@amcharts/amcharts5": "^5.17.1",
7
+ "@amcharts/amcharts5-geodata": "^5.1.5",
8
+ "source-map-loader": "^4.0.1",
9
+ "webpack": "^5.1.3",
10
+ "webpack-cli": "^5.1.1",
11
+ "webpack-dev-server": "^4.15.0"
12
+ },
13
+ "scripts": {
14
+ "build": "webpack",
15
+ "start": "webpack serve --mode development"
16
+ }
17
+ }
@@ -0,0 +1,38 @@
1
+ var $path = require("path");
2
+
3
+ module.exports = {
4
+ mode: "production",
5
+
6
+ devtool: "source-map",
7
+
8
+ stats: "errors-warnings",
9
+
10
+ target: ["web", "es5"],
11
+
12
+ entry: {
13
+ index: "./index.js",
14
+ },
15
+
16
+ devServer: {
17
+ publicPath: "/dist/",
18
+ liveReload: true,
19
+ overlay: true,
20
+ noInfo: true,
21
+ open: true
22
+ },
23
+
24
+ output: {
25
+ path: $path.join(__dirname, "dist"),
26
+ publicPath: "dist/",
27
+ filename: "[name].js",
28
+ chunkFilename: "[name].js"
29
+ },
30
+
31
+ module: {
32
+ rules: [{
33
+ test: /.js$/,
34
+ use: ["source-map-loader"],
35
+ enforce: "pre"
36
+ }]
37
+ }
38
+ };
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-map-with-bubbles",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "@amcharts/amcharts5-geodata": "^5.1.5",
8
8
  "source-map-loader": "^4.0.1",
9
9
  "webpack": "^5.1.3",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-map-zoom-to-country",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "@amcharts/amcharts5-geodata": "^5.1.5",
8
8
  "source-map-loader": "^4.0.1",
9
9
  "webpack": "^5.1.3",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-misc-40-charts",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-misc-microchart-grid",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-donut-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-pie-variable-radius",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-column-iwatch-style",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-heat-map",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-line",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-radar-time-line",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-funnel",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-pictorial-stacked",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-sliced-pyramid",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-comparing-stocks",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-data-granularity",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-data-grouping",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-intraday",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-live",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",
@@ -3,7 +3,7 @@
3
3
  "name": "amcharts5-example-stock-chart-volume-separate-panel",
4
4
  "version": "0.1.0",
5
5
  "devDependencies": {
6
- "@amcharts/amcharts5": "^5.16.2",
6
+ "@amcharts/amcharts5": "^5.17.1",
7
7
  "source-map-loader": "^4.0.1",
8
8
  "webpack": "^5.1.3",
9
9
  "webpack-cli": "^5.1.1",