@amcharts/amcharts5 5.16.2 → 5.17.0

package/examples/javascript/map-sankey/index.js

@@ -0,0 +1,368 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5map from "@amcharts/amcharts5/map";
+import am5geodata_worldLow from "@amcharts/amcharts5-geodata/worldLow";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+const root = am5.Root.new("chartdiv");
+
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+const coffeeTheme = am5.Theme.new(root);
+coffeeTheme.rule("InterfaceColors").setAll({
+	primaryButton: am5.color(0x8b5e3c),
+	primaryButtonHover: am5.color(0x5c3a1e),
+	primaryButtonDown: am5.color(0x3c1e0e),
+	primaryButtonActive: am5.color(0xc4956a),
+	primaryButtonText: am5.color(0xf5ece0),
+	secondaryButton: am5.color(0xe8d5b7),
+	secondaryButtonHover: am5.color(0xd4c4a8),
+	secondaryButtonDown: am5.color(0xc4956a),
+	secondaryButtonText: am5.color(0x3c1e0e),
+	background: am5.color(0xe8d5b7),
+	text: am5.color(0x3c1e0e)
+});
+
+root.setThemes([am5themes_Animated.new(root), coffeeTheme]);
+
+
+// Grainy paper background
+root.container.set("background", am5.Rectangle.new(root, {
+	fill: am5.color(0xf0e6d6),
+	fillPattern: am5.GrainPattern.new(root, {
+		density: 0.4,
+		maxOpacity: 0.07,
+		colors: [am5.color(0x000000)]
+	})
+}));
+
+
+// Coffee palette
+const espresso = am5.color(0x3c1e0e);
+const darkRoast = am5.color(0x5c3a1e);
+const mediumRoast = am5.color(0x8b5e3c);
+const lightRoast = am5.color(0xc4956a);
+const crema = am5.color(0xe8d5b7);
+const cream = am5.color(0xf5ece0);
+
+
+// Create the map chart
+// https://www.amcharts.com/docs/v5/charts/map-chart/
+const chart = root.container.children.push(am5map.MapChart.new(root, {
+	panX: "rotateX",
+	panY: "rotateY",
+	projection: am5map.geoOrthographic(),
+	rotationX: -15,
+	rotationY: -20,
+	minZoomLevel: 0.5,
+	zoomLevel: 0.9
+}));
+
+
+// Create series for background fill
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+const bgSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
+bgSeries.mapPolygons.template.setAll({
+	fill: am5.color(0xede4d4),
+	fillOpacity: 1,
+	strokeOpacity: 0
+});
+bgSeries.data.push({ geometry: am5map.getGeoRectangle(90, 180, -90, -180) });
+
+
+// Create graticule series
+// https://www.amcharts.com/docs/v5/charts/map-chart/graticule-series/
+const graticuleSeries = chart.series.push(am5map.GraticuleSeries.new(root, {}));
+graticuleSeries.mapLines.template.setAll({
+	stroke: mediumRoast,
+	strokeOpacity: 0.15,
+	strokeWidth: 0.5
+});
+
+
+// Create main polygon series for countries
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
+const polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
+	geoJSON: am5geodata_worldLow 
+}));
+polygonSeries.mapPolygons.template.setAll({
+	fill: cream,
+	stroke: lightRoast,
+	strokeWidth: 0.5,
+	strokeOpacity: 0.5
+});
+
+// Highlight producer, hub, and consumer countries
+const producerIds = ["BR", "VN", "CO", "ET", "ID", "HN"];
+const hubIds = ["DE", "BE", "IT", "US"];
+const consumerIds = ["FR", "PL", "SE", "RU", "GB", "NL", "GR", "AT", "CA", "JP"];
+
+polygonSeries.events.on("datavalidated", () => {
+	am5.array.each(polygonSeries.dataItems, (di) => {
+		const id = di.get("id");
+		if (id && producerIds.includes(id)) {
+			di.get("mapPolygon").setAll({ fill: am5.color(0x8fae7e) });
+		} else if (id && hubIds.includes(id)) {
+			di.get("mapPolygon").setAll({ fill: am5.color(0xc4a878) });
+		} else if (id && consumerIds.includes(id)) {
+			di.get("mapPolygon").setAll({ fill: am5.color(0xddc8a0) });
+		}
+	});
+});
+
+
+// Create Map Sankey series
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-sankey-series/
+const sankeySeries = chart.series.push(am5map.MapSankeySeries.new(root, {
+	polygonSeries: polygonSeries,
+	maxWidth: 2,
+	controlPointDistance: 0.4,
+	resolution: 60,
+	nodePadding: 0.3
+}));
+
+sankeySeries.mapPolygons.template.setAll({
+	fill: mediumRoast,
+	fillOpacity: 0.65,
+	strokeOpacity: 0,
+	tooltipText: "{sourceNode.name} > {targetNode.name}\n{value}k tonnes"
+});
+
+sankeySeries.nodes.mapPolygons.template.setAll({
+	fill: espresso,
+	stroke: crema,
+	strokeWidth: 1.5,
+	fillOpacity: 0.95,
+	strokeOpacity: 1,
+	tooltipText: "{name}\n{sum}k tonnes"
+});
+
+
+// Add animated coffee bean bullets
+sankeySeries.bullets.push(() => {
+	return am5.Bullet.new(root, {
+		locationX: 0,
+		autoRotate: true,
+		sprite: am5.Graphics.new(root, {
+			svgPath: "M-4,-2.5 C-4,-5 -1.5,-6.5 1,-6.5 C3.5,-6.5 5,-4.5 5,-2 C5,1 3,3.5 0.5,5 C-0.5,5.7 -1.5,5.7 -2.5,5 C-5,3.5 -6,1 -4,-2.5 Z M-1,-5 C-1,-1 -1,2 -0.5,4.5",
+			fill: espresso,
+			stroke: darkRoast,
+			strokeWidth: 0.5,
+			centerX: am5.p50,
+			centerY: am5.p50,
+			scale: 0.35,
+			visible: false
+		})
+	});
+});
+
+// Set data after polygonSeries loads (sourceId/targetId need centroid lookup)
+// Producers > Processing Hubs > Consumer Markets
+polygonSeries.events.once("datavalidated", () => {
+	sankeySeries.data.setAll([
+		// Producers > Hubs
+		{ sourceId: "BR", targetId: "DE", value: 350 },
+		{ sourceId: "BR", targetId: "US", value: 450 },
+		{ sourceId: "BR", targetId: "IT", value: 200 },
+		{ sourceId: "VN", targetId: "DE", value: 200 },
+		{ sourceId: "VN", targetId: "BE", value: 150 },
+		{ sourceId: "CO", targetId: "US", value: 250 },
+		{ sourceId: "CO", targetId: "DE", value: 80 },
+		{ sourceId: "ET", targetId: "DE", value: 60 },
+		{ sourceId: "ET", targetId: "BE", value: 40 },
+		{ sourceId: "ID", targetId: "US", value: 80 },
+		{ sourceId: "HN", targetId: "DE", value: 60 },
+		{ sourceId: "HN", targetId: "BE", value: 40 },
+
+		// Hubs > Consumer Markets
+		{ sourceId: "DE", targetId: "FR", value: 150 },
+		{ sourceId: "DE", targetId: "PL", value: 100 },
+		{ sourceId: "DE", targetId: "SE", value: 80 },
+		{ sourceId: "DE", targetId: "RU", value: 120 },
+		{ sourceId: "BE", targetId: "GB", value: 100 },
+		{ sourceId: "BE", targetId: "NL", value: 80 },
+		{ sourceId: "IT", targetId: "GR", value: 50 },
+		{ sourceId: "IT", targetId: "AT", value: 40 },
+		{ sourceId: "US", targetId: "CA", value: 120 },
+		{ sourceId: "US", targetId: "JP", value: 80 }
+	]);
+});
+
+
+// Set country names on auto-created nodes and animate bullets
+const countryNames = {
+	BR: "Brazil", VN: "Vietnam", CO: "Colombia", ET: "Ethiopia",
+	ID: "Indonesia", HN: "Honduras", DE: "Germany", BE: "Belgium",
+	IT: "Italy", US: "United States", FR: "France", PL: "Poland",
+	SE: "Sweden", RU: "Russia", GB: "United Kingdom", NL: "Netherlands",
+	GR: "Greece", AT: "Austria", CA: "Canada", JP: "Japan"
+};
+
+sankeySeries.events.on("datavalidated", () => {
+	am5.array.each(sankeySeries.nodes.dataItems, (di) => {
+		const id = di.get("id");
+		if (id && countryNames[id]) {
+			di.set("name", countryNames[id]);
+		}
+	});
+
+	// Defer bullet animation to next frame — bullets are not yet
+	// instantiated when datavalidated fires inside polygonSeries handler
+	setTimeout(() => {
+		am5.array.each(sankeySeries.dataItems, (dataItem) => {
+			const bullets = dataItem.bullets;
+			if (bullets) {
+				am5.array.each(bullets, (bullet) => {
+					var randomDur = 3000 + Math.random() * 3000;
+					var delay = Math.random() * randomDur;
+					setTimeout(() => {
+						const sprite = bullet.get("sprite");
+						if (sprite) sprite.set("visible", true);
+						bullet.animate({
+							key: "locationX",
+							from: 0,
+							to: 1,
+							duration: randomDur,
+							easing: am5.ease.linear,
+							loops: Infinity
+						});
+					}, delay);
+				});
+			}
+		});
+	}, 100);
+});
+
+
+// Add title and subtitle
+const titleCont = chart.children.push(am5.Container.new(root, {
+	layout: root.verticalLayout,
+	x: am5.p50,
+	centerX: am5.p50,
+	y: am5.p100,
+	centerY: am5.p100,
+	position: "absolute",
+	paddingBottom: 16
+}));
+
+titleCont.children.push(am5.Label.new(root, {
+	text: "Global Coffee Supply Chain",
+	fontSize: 18,
+	fontWeight: "600",
+	fill: espresso,
+	x: am5.p50,
+	centerX: am5.p50
+}));
+
+titleCont.children.push(am5.Label.new(root, {
+	text: "(Thousands of tonnes)",
+	fontSize: 11,
+	fill: mediumRoast,
+	x: am5.p50,
+	centerX: am5.p50
+}));
+
+
+// Add Globe / Map projection toggle
+const switchCont = chart.children.push(am5.Container.new(root, {
+	layout: root.horizontalLayout,
+	x: 20,
+	y: 40
+}));
+
+switchCont.children.push(am5.Label.new(root, {
+	centerY: am5.p50,
+	text: "Globe",
+	fill: espresso,
+	fontSize: 13
+}));
+
+const switchButton = switchCont.children.push(am5.Button.new(root, {
+	themeTags: ["switch"],
+	centerY: am5.p50,
+	icon: am5.Circle.new(root, {
+		themeTags: ["icon"]
+	})
+}));
+
+const easing = am5.ease.inOut(am5.ease.cubic);
+const duration = 1500;
+const fadeDuration = 300;
+
+function zoomToGlobe() {
+	chart.set("projection", am5map.geoOrthographic());
+	chart.set("panX", "rotateX");
+	chart.set("panY", "rotateY");
+	chart.animate({ key: "rotationX", to: -15, duration, easing });
+	chart.animate({ key: "rotationY", to: -20, duration, easing });
+	bgSeries.mapPolygons.template.set("fillOpacity", 1);
+	chart.set("minZoomLevel", 0.9);
+	chart.animate({ key: "zoomLevel", to: 0.9, duration, easing });
+}
+
+function zoomToMap() {
+	chart.set("projection", am5map.geoMercator());
+	chart.set("panX", "translateX");
+	chart.set("panY", "translateY");
+	chart.animate({ key: "rotationX", to: 0, duration, easing });
+	chart.animate({ key: "rotationY", to: 0, duration, easing });
+	bgSeries.mapPolygons.template.set("fillOpacity", 0);
+	chart.set("minZoomLevel", 1);
+	chart.animate({ key: "zoomLevel", to: 1.7, duration, easing });
+}
+
+switchButton.on("active", () => {
+	chart.goHome(duration);
+	// Fade out before projection switch
+	setTimeout(() => {
+		chart.seriesContainer.animate({ key: "opacity", to: 0, duration: fadeDuration });
+	}, duration - fadeDuration);
+	setTimeout(() => {
+		if (switchButton.get("active")) {
+			zoomToMap();
+		} else {
+			zoomToGlobe();
+		}
+		// Fade in after projection switch
+		chart.seriesContainer.animate({ key: "opacity", to: 1, duration: fadeDuration });
+	}, duration);
+});
+
+switchCont.children.push(am5.Label.new(root, {
+	centerY: am5.p50,
+	text: "Map",
+	fill: espresso,
+	fontSize: 13
+}));
+
+
+// Add zoom controls
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-zoom/
+const zoomControl = chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
+zoomControl.homeButton.set("visible", true);
+
+
+// Auto-rotate globe until user interaction
+let rotationAnimation = chart.animate({
+	key: "rotationX",
+	from: -15,
+	to: -15 + 360,
+	duration: 120000,
+	loops: Infinity,
+	easing: am5.ease.linear
+});
+
+chart.chartContainer.events.on("pointerdown", () => {
+	if (rotationAnimation) {
+		rotationAnimation.stop();
+		rotationAnimation = null;
+	}
+});
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
+chart.appear(1000, 100);

package/examples/javascript/map-sankey/package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "name": "amcharts5-example-map-sankey",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.17.0",
+    "@amcharts/amcharts5-geodata": "^5.1.5",
+    "source-map-loader": "^4.0.1",
+    "webpack": "^5.1.3",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack serve --mode development"
+  }
+}

package/examples/javascript/map-sankey/webpack.config.js

@@ -0,0 +1,38 @@
+var $path = require("path");
+
+module.exports = {
+  mode: "production",
+
+  devtool: "source-map",
+
+  stats: "errors-warnings",
+
+  target: ["web", "es5"],
+
+  entry: {
+    index: "./index.js",
+  },
+
+  devServer: {
+    publicPath: "/dist/",
+    liveReload: true,
+    overlay: true,
+    noInfo: true,
+    open: true
+  },
+
+  output: {
+    path: $path.join(__dirname, "dist"),
+    publicPath: "dist/",
+    filename: "[name].js",
+    chunkFilename: "[name].js"
+  },
+
+  module: {
+    rules: [{
+      test: /.js$/,
+      use: ["source-map-loader"],
+      enforce: "pre"
+    }]
+  }
+};

package/examples/javascript/map-sankey-waypoints/README.md

@@ -0,0 +1,6 @@
+Steps to use
+============
+
+1. Run `yarn`
+
+2. Run `yarn start` for development, or `yarn build` for production

package/examples/javascript/map-sankey-waypoints/index.css

@@ -0,0 +1,11 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  padding: 0;
+  margin: 0;
+  background-color: #ffffff;
+}
+
+#chartdiv {
+  width: 100%;
+  height: 80vh;
+}

package/examples/javascript/map-sankey-waypoints/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>amCharts 5 Example - map-sankey-waypoints</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <style>body { margin: 0; padding: 0; background: #0a0e12; overflow: hidden; }</style>
+    <div id="chartdiv" style="width: 100%; height: 100vh; background: #0a0e12;"></div>
+    <script src="dist/index.js"></script>
+  </body>
+</html>