@amcharts/amcharts5 5.0.0-beta.3 → 5.0.0-beta.30

package/examples/typescript/map-animating-along-lines/index.ts

@@ -3,25 +3,29 @@ 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/
+ * ---------------------------------------
+ * This demo was created using amCharts 5.
+ *
+ * For more information visit:
+ * https://www.amcharts.com/
+ *
+ * Documentation is available at:
+ * https://www.amcharts.com/docs/v5/
+ * ---------------------------------------
  */
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
 
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+const root = am5.Root.new("chartdiv");
 
-/**
- * Create the map chart
- * https://www.amcharts.com/docs/v5/charts/map-chart/
- */
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([am5themes_Animated.new(root)]);
+
+// 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",
@@ -38,10 +42,7 @@ const cont = chart.children.push(
   })
 );
 
-
-/**
- * Add labels and controls
- */
+// Add labels and controls
 cont.children.push(
   am5.Label.new(root, {
     centerY: am5.p50,
@@ -49,57 +50,69 @@ cont.children.push(
   })
 );
 
-const switchButton = cont.children.push(am5.Button.new(root, {
-  themeTags: ["switch"],
-  centerY: am5.p50,
-  icon: am5.Circle.new(root, {
-    themeTags: ["icon"]
+const switchButton = cont.children.push(
+  am5.Button.new(root, {
+    themeTags: ["switch"],
+    centerY: am5.p50,
+    icon: am5.Circle.new(root, {
+      themeTags: ["icon"]
+    })
   })
-}));
+);
 
-switchButton.on("active", () => {
+switchButton.on("active", function () {
   if (!switchButton.get("active")) {
     chart.set("projection", am5map.geoMercator());
-  }
-  else {
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0);
+  } else {
     chart.set("projection", am5map.geoOrthographic());
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0.1);
   }
-})
+});
 
-cont.children.push(am5.Label.new(root, {
-  centerY: am5.p50,
-  text: "Globe"
-}));
+cont.children.push(
+  am5.Label.new(root, {
+    centerY: am5.p50,
+    text: "Globe"
+  })
+);
 
-/**
- * Create main polygon series for countries
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
- */
+// Create series for background fill
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+const backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
+backgroundSeries.mapPolygons.template.setAll({
+  fill: root.interfaceColors.get("alternativeBackground"),
+  fillOpacity: 0,
+  strokeOpacity: 0
+});
+
+// Add background polygon
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+backgroundSeries.data.push({
+  geometry: am5map.getGeoRectangle(90, 180, -90, -180)
+});
+
+// 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 as any
+    geoJSON: am5geodata_worldLow
   })
 );
 
-/**
- * Create line series for trajectory lines
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-line-series/
- */
+// Create line series for trajectory lines
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-line-series/
 const lineSeries = chart.series.push(am5map.MapLineSeries.new(root, {}));
 lineSeries.mapLines.template.setAll({
   stroke: root.interfaceColors.get("alternativeBackground"),
   strokeOpacity: 0.3
 });
 
-/**
- * Create point series for markers
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/
- */
-const pointSeries = chart.series.push(
-  am5map.MapPointSeries.new(root, {})
-);
+// Create point series for markers
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/
+const pointSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
 
-pointSeries.bullets.push(() => {
+pointSeries.bullets.push(function () {
   const circle = am5.Circle.new(root, {
     radius: 7,
     tooltipText: "Drag me!",
@@ -111,10 +124,10 @@ pointSeries.bullets.push(() => {
     draggable: true
   });
 
-  circle.events.on("dragged", (event) => {
+  circle.events.on("dragged", function (event) {
     const dataItem = event.target.dataItem;
-    const projection = chart.get("projection")!
-    const geoPoint = chart.invert({ x: circle.x(), y: circle.y() })
+    const projection = chart.get("projection");
+    const geoPoint = chart.invert({ x: circle.x(), y: circle.y() });
 
     dataItem.setAll({
       longitude: geoPoint.longitude,
@@ -127,28 +140,27 @@ pointSeries.bullets.push(() => {
   });
 });
 
-var paris = addCity({ "latitude": 48.8567, "longitude": 2.3510 }, "Paris");
-var toronto = addCity({ "latitude": 43.8163, "longitude": -79.4287 }, "Toronto");
-var la = addCity({ "latitude": 34.3, "longitude": -118.15 }, "Los Angeles");
-var havana = addCity({ "latitude": 23, "longitude": -82 }, "Havana");
+const paris = addCity({ latitude: 48.8567, longitude: 2.351 }, "Paris");
+const toronto = addCity({ latitude: 43.8163, longitude: -79.4287 }, "Toronto");
+const la = addCity({ latitude: 34.3, longitude: -118.15 }, "Los Angeles");
+const havana = addCity({ latitude: 23, longitude: -82 }, "Havana");
 
 const lineDataItem = lineSeries.pushDataItem({
   pointsToConnect: [paris, toronto, la, havana]
 });
 
-const planeSeries = chart.series.push(
-  am5map.MapPointSeries.new(root, {})
-);
+const planeSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
 
 const plane = am5.Graphics.new(root, {
-  svgPath: "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
+  svgPath:
+    "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47",
   scale: 0.06,
   centerY: am5.p50,
   centerX: am5.p50,
   fill: am5.color(0x000000)
 });
 
-planeSeries.bullets.push(() => {
+planeSeries.bullets.push(function () {
   const container = am5.Container.new(root, {});
   container.children.push(plane);
   return am5.Bullet.new(root, { sprite: container });
@@ -168,18 +180,20 @@ planeDataItem.animate({
   easing: am5.ease.yoyo(am5.ease.linear)
 });
 
-planeDataItem.on("positionOnLine", (value) => {
+planeDataItem.on("positionOnLine", function (value) {
   if (value >= 0.99) {
     plane.set("rotation", 180);
-  }
-  else if (value <= 0.01) {
+  } else if (value <= 0.01) {
     plane.set("rotation", 0);
   }
-})
+});
 
 function addCity(coords, title) {
   return pointSeries.pushDataItem({
     latitude: coords.latitude,
     longitude: coords.longitude
   });
-}
+}
+
+// Make stuff animate on load
+chart.appear(1000, 100);

package/examples/typescript/map-animating-along-lines/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-map-animating-along-lines",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.3",
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/map-day-and-night/index.ts

@@ -4,23 +4,27 @@ 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
+ * ---------------------------------------
+ * This demo was created using amCharts 5.
+ *
+ * For more information visit:
+ * https://www.amcharts.com/
+ *
+ * Documentation is available at:
+ * https://www.amcharts.com/docs/v5/
+ * ---------------------------------------
  */
+
+// 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/
- */
-root.setThemes([
-  am5themes_Animated.new(root)
-]);
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([am5themes_Animated.new(root)]);
 
-/**
- * Create the map chart
- * https://www.amcharts.com/docs/v5/charts/map-chart/
- */
+// 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",
@@ -29,26 +33,33 @@ const chart = root.container.children.push(
   })
 );
 
+// Create series for background fill
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+const backgroundSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
+backgroundSeries.mapPolygons.template.setAll({
+  fill: root.interfaceColors.get("alternativeBackground"),
+  fillOpacity: 0,
+  strokeOpacity: 0
+});
+// Add background polygo
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/#Background_polygon
+backgroundSeries.data.push({
+  geometry: am5map.getGeoRectangle(90, 180, -90, -180)
+});
 
-/**
- * Create main polygon series for countries
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
- */
+// 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 as any
+    geoJSON: am5geodata_worldLow
   })
 );
 
-/**
- * Create point series for Sun icon
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/
- */
-const sunSeries = chart.series.push(
-  am5map.MapPointSeries.new(root, {})
-);
+// Create point series for Sun icon
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-point-series/
+const sunSeries = chart.series.push(am5map.MapPointSeries.new(root, {}));
 
-sunSeries.bullets.push(() => {
+sunSeries.bullets.push(function () {
   const circle = am5.Circle.new(root, {
     radius: 18,
     fill: am5.color(0xffba00),
@@ -68,25 +79,20 @@ sunSeries.bullets.push(() => {
   });
 });
 
-sunSeries.bullets.push(() => {
+sunSeries.bullets.push(function () {
   return am5.Bullet.new(root, {
-    sprite:
-      am5.Circle.new(root, {
-        radius: 14, fill:
-          am5.color(0xffba00)
-      })
+    sprite: am5.Circle.new(root, {
+      radius: 14,
+      fill: am5.color(0xffba00)
+    })
   });
 });
 
 const sunDataItem = sunSeries.pushDataItem({});
 
-/**
- * Create polygon series for night-time polygons
- * https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
- */
-const nightSeries = chart.series.push(
-  am5map.MapPolygonSeries.new(root, {})
-);
+// Create polygon series for night-time polygons
+// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
+const nightSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));
 
 nightSeries.mapPolygons.template.setAll({
   fill: am5.color(0x000000),
@@ -98,9 +104,7 @@ const nightDataItem0 = nightSeries.pushDataItem({});
 const nightDataItem1 = nightSeries.pushDataItem({});
 const nightDataItem2 = nightSeries.pushDataItem({});
 
-/**
- * Create controls
- */
+// Create controls
 const container = chart.children.push(
   am5.Container.new(root, {
     y: am5.percent(95),
@@ -111,27 +115,28 @@ const container = chart.children.push(
   })
 );
 
-const playButton = container.children.push(am5.Button.new(root, {
-  themeTags: ["play"],
-  centerY: am5.p50,
-  marginRight: 15,
-  icon: am5.Graphics.new(root, {
-    themeTags: ["icon"]
+const playButton = container.children.push(
+  am5.Button.new(root, {
+    themeTags: ["play"],
+    centerY: am5.p50,
+    marginRight: 15,
+    icon: am5.Graphics.new(root, {
+      themeTags: ["icon"]
+    })
   })
-}));
+);
 
-playButton.events.on("click", () => {
+playButton.events.on("click", function () {
   if (playButton.get("active")) {
     slider.set("start", slider.get("start") + 0.0001);
-  }
-  else {
+  } else {
     slider.animate({
       key: "start",
       to: 1,
       duration: 15000 * (1 - slider.get("start"))
     });
   }
-})
+});
 
 const slider = container.children.push(
   am5.Slider.new(root, {
@@ -141,16 +146,18 @@ const slider = container.children.push(
   })
 );
 
-slider.on("start", (start) => {
+slider.on("start", function (start) {
   if (start === 1) {
     playButton.set("active", false);
   }
-})
-
-slider.events.on("rangechanged", () => {
-  updateDateNight((slider.get("start", 0) - 0.5) * am5.time.getDuration("day", 2) + new Date().getTime());
-})
+});
 
+slider.events.on("rangechanged", function () {
+  updateDateNight(
+    (slider.get("start", 0) - 0.5) * am5.time.getDuration("day", 2) +
+      new Date().getTime()
+  );
+});
 
 const cont = chart.children.push(
   am5.Container.new(root, {
@@ -160,27 +167,36 @@ const cont = chart.children.push(
   })
 );
 
-cont.children.push(am5.Label.new(root, {
-  centerY: am5.p50,
-  text: "Map"
-}));
+cont.children.push(
+  am5.Label.new(root, {
+    centerY: am5.p50,
+    text: "Map"
+  })
+);
 
-const switchButton = cont.children.push(am5.Button.new(root, {
-  themeTags: ["switch"],
-  centerY: am5.p50,
-  icon: am5.Circle.new(root, {
-    themeTags: ["icon"]
+const switchButton = cont.children.push(
+  am5.Button.new(root, {
+    themeTags: ["switch"],
+    centerY: am5.p50,
+    icon: am5.Circle.new(root, {
+      themeTags: ["icon"]
+    })
   })
-}));
+);
 
-switchButton.on("active", () => {
+switchButton.on("active", function () {
   if (!switchButton.get("active")) {
     chart.set("projection", am5map.geoMercator());
-  }
-  else {
+    chart.set("panY", "translateY");
+    chart.set("panX", "translateX");
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0);
+  } else {
     chart.set("projection", am5map.geoOrthographic());
+    chart.set("panY", "rotateY");
+    chart.set("panX", "rotateX");
+    backgroundSeries.mapPolygons.template.set("fillOpacity", 0.1);
   }
-})
+});
 cont.children.push(
   am5.Label.new(root, {
     centerY: am5.p50,
@@ -188,88 +204,125 @@ cont.children.push(
   })
 );
 
+chart.appear(1000, 100);
 
 function updateDateNight(time) {
-  const sunPosition = solarPosition(time)
+  const sunPosition = solarPosition(time);
   sunDataItem.set("longitude", sunPosition.longitude);
   sunDataItem.set("latitude", sunPosition.latitude);
 
-  const nightPosition = { longitude: sunPosition.longitude + 180, latitude: -sunPosition.latitude }
+  const nightPosition = {
+    longitude: sunPosition.longitude + 180,
+    latitude: -sunPosition.latitude
+  };
 
   nightDataItem0.set("geometry", am5map.getGeoCircle(nightPosition, 92));
-  nightDataItem1.set("geometry", am5map.getGeoCircle(nightPosition, 90)); nightDataItem2.set("geometry", am5map.getGeoCircle(nightPosition, 88));
+  nightDataItem1.set("geometry", am5map.getGeoCircle(nightPosition, 90));
+  nightDataItem2.set("geometry", am5map.getGeoCircle(nightPosition, 88));
 }
 
-var offset = new Date().getTimezoneOffset() * 60 * 1000;
+const offset = new Date().getTimezoneOffset() * 60 * 1000;
 //updateDateNight(new Date().getTime());
 
-
 // all sun position calculation is taken from: http://bl.ocks.org/mbostock/4597134
 function solarPosition(time) {
-  let centuries = (time - Date.UTC(2000, 0, 1, 12)) / 864e5 / 36525; // since J2000
-  let longitude = (am5.time.round(new Date(time), "day", 1).getTime() - time - offset) / 864e5 * 360 - 180;
+  const centuries = (time - Date.UTC(2000, 0, 1, 12)) / 864e5 / 36525; // since J2000
+  const longitude =
+    ((am5.time.round(new Date(time), "day", 1).getTime() - time - offset) /
+      864e5) *
+      360 -
+    180;
 
   return am5map.normalizeGeoPoint({
     longitude: longitude - equationOfTime(centuries) * am5.math.DEGREES,
     latitude: solarDeclination(centuries) * am5.math.DEGREES
   });
-};
-
+}
 
 // Equations based on NOAA’s Solar Calculator; all angles in RADIANS.
 // http://www.esrl.noaa.gov/gmd/grad/solcalc/
 
 function equationOfTime(centuries) {
-  var e = eccentricityEarthOrbit(centuries),
+  const e = eccentricityEarthOrbit(centuries),
     m = solarGeometricMeanAnomaly(centuries),
     l = solarGeometricMeanLongitude(centuries),
     y = Math.tan(obliquityCorrection(centuries) / 2);
 
   y *= y;
-  return y * Math.sin(2 * l)
-    - 2 * e * Math.sin(m)
-    + 4 * e * y * Math.sin(m) * Math.cos(2 * l)
-    - 0.5 * y * y * Math.sin(4 * l)
-    - 1.25 * e * e * Math.sin(2 * m);
+  return (
+    y * Math.sin(2 * l) -
+    2 * e * Math.sin(m) +
+    4 * e * y * Math.sin(m) * Math.cos(2 * l) -
+    0.5 * y * y * Math.sin(4 * l) -
+    1.25 * e * e * Math.sin(2 * m)
+  );
 }
 
 function solarDeclination(centuries) {
-  return Math.asin(Math.sin(obliquityCorrection(centuries)) * Math.sin(solarApparentLongitude(centuries)));
+  return Math.asin(
+    Math.sin(obliquityCorrection(centuries)) *
+      Math.sin(solarApparentLongitude(centuries))
+  );
 }
 
 function solarApparentLongitude(centuries) {
-  return solarTrueLongitude(centuries) - (0.00569 + 0.00478 * Math.sin((125.04 - 1934.136 * centuries) * am5.math.RADIANS)) * am5.math.RADIANS;
+  return (
+    solarTrueLongitude(centuries) -
+    (0.00569 +
+      0.00478 * Math.sin((125.04 - 1934.136 * centuries) * am5.math.RADIANS)) *
+      am5.math.RADIANS
+  );
 }
 
 function solarTrueLongitude(centuries) {
-  return solarGeometricMeanLongitude(centuries) + solarEquationOfCenter(centuries);
+  return (
+    solarGeometricMeanLongitude(centuries) + solarEquationOfCenter(centuries)
+  );
 }
 
 function solarGeometricMeanAnomaly(centuries) {
-  return (357.52911 + centuries * (35999.05029 - 0.0001537 * centuries)) * am5.math.RADIANS;
+  return (
+    (357.52911 + centuries * (35999.05029 - 0.0001537 * centuries)) *
+    am5.math.RADIANS
+  );
 }
 
 function solarGeometricMeanLongitude(centuries) {
-  var l = (280.46646 + centuries * (36000.76983 + centuries * 0.0003032)) % 360;
-  return (l < 0 ? l + 360 : l) / 180 * Math.PI;
+  const l = (280.46646 + centuries * (36000.76983 + centuries * 0.0003032)) % 360;
+  return ((l < 0 ? l + 360 : l) / 180) * Math.PI;
 }
 
 function solarEquationOfCenter(centuries) {
-  var m = solarGeometricMeanAnomaly(centuries);
-  return (Math.sin(m) * (1.914602 - centuries * (0.004817 + 0.000014 * centuries))
-    + Math.sin(m + m) * (0.019993 - 0.000101 * centuries)
-    + Math.sin(m + m + m) * 0.000289) * am5.math.RADIANS;
+  const m = solarGeometricMeanAnomaly(centuries);
+  return (
+    (Math.sin(m) * (1.914602 - centuries * (0.004817 + 0.000014 * centuries)) +
+      Math.sin(m + m) * (0.019993 - 0.000101 * centuries) +
+      Math.sin(m + m + m) * 0.000289) *
+    am5.math.RADIANS
+  );
 }
 
 function obliquityCorrection(centuries) {
-  return meanObliquityOfEcliptic(centuries) + 0.00256 * Math.cos((125.04 - 1934.136 * centuries) * am5.math.RADIANS) * am5.math.RADIANS;
+  return (
+    meanObliquityOfEcliptic(centuries) +
+    0.00256 *
+      Math.cos((125.04 - 1934.136 * centuries) * am5.math.RADIANS) *
+      am5.math.RADIANS
+  );
 }
 
 function meanObliquityOfEcliptic(centuries) {
-  return (23 + (26 + (21.448 - centuries * (46.8150 + centuries * (0.00059 - centuries * 0.001813))) / 60) / 60) * am5.math.RADIANS;
+  return (
+    (23 +
+      (26 +
+        (21.448 -
+          centuries * (46.815 + centuries * (0.00059 - centuries * 0.001813))) /
+          60) /
+        60) *
+    am5.math.RADIANS
+  );
 }
 
 function eccentricityEarthOrbit(centuries) {
   return 0.016708634 - centuries * (0.000042037 + 0.0000001267 * centuries);
 }
-

package/examples/typescript/map-day-and-night/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-map-day-and-night",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.3",
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",