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

package/examples/javascript/hierarchy-sunburst/index.js

@@ -2,50 +2,41 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// 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/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create wrapper container
- */
-const container = root.container.children.push(
-  am5.Container.new(root, {
-    width: am5.percent(100),
-    height: am5.percent(100),
-    layout: root.verticalLayout
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
- */
-const series = container.children.push(
-  am5hierarchy.Sunburst.new(root, {
-    singleBranchOnly: true,
-    downDepth: 10,
-    initialDepth: 10,
-    valueField: "value",
-    categoryField: "name",
-    childDataField: "children"
-  })
-);
-
-/**
- * Generate and set data
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
- */
+
+// Create wrapper container
+const container = root.container.children.push(am5.Container.new(root, {
+  width: am5.percent(100),
+  height: am5.percent(100),
+  layout: root.verticalLayout
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
+const series = container.children.push(am5hierarchy.Sunburst.new(root, {
+  singleBranchOnly: true,
+  downDepth: 10,
+  initialDepth: 10,
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children"
+}));
+
+
+// Generate and set data
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
 const maxLevels = 2;
 const maxNodes = 3;
 const maxValue = 100;
@@ -87,4 +78,8 @@ function generateLevel(data, name, level) {
 
   level++;
   return data;
-}
+}
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/javascript/hierarchy-sunburst/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-sunburst",
   "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",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",

package/examples/javascript/hierarchy-tree/index.js

@@ -2,50 +2,41 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// 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/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create wrapper container
- */
-const container = root.container.children.push(
-  am5.Container.new(root, {
-    width: am5.percent(100),
-    height: am5.percent(100),
-    layout: root.verticalLayout
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
- */
-const series = container.children.push(
-  am5hierarchy.Tree.new(root, {
-    singleBranchOnly: false,
-    downDepth: 1,
-    initialDepth: 10,
-    valueField: "value",
-    categoryField: "name",
-    childDataField: "children"
-  })
-);
-
-/**
- * Generate and set data
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
- */
+
+// Create wrapper container
+const container = root.container.children.push(am5.Container.new(root, {
+  width: am5.percent(100),
+  height: am5.percent(100),
+  layout: root.verticalLayout
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
+const series = container.children.push(am5hierarchy.Tree.new(root, {
+  singleBranchOnly: false,
+  downDepth: 1,
+  initialDepth: 10,
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children"
+}));
+
+
+// Generate and set data
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
 const maxLevels = 3;
 const maxNodes = 3;
 const maxValue = 100;
@@ -87,4 +78,8 @@ function generateLevel(data, name, level) {
 
   level++;
   return data;
-}
+}
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/javascript/hierarchy-tree/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-tree",
   "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",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",

package/examples/javascript/hierarchy-treemap/index.js

@@ -2,51 +2,42 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5hierarchy from "@amcharts/amcharts5/hierarchy";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 
-/**
- * Create root element
- * https://www.amcharts.com/docs/v5/getting-started/#Root_element
- */
+
+// 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/
- */
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
   am5themes_Animated.new(root)
 ]);
 
-/**
- * Create wrapper container
- */
-const container = root.container.children.push(
-  am5.Container.new(root, {
-    width: am5.percent(100),
-    height: am5.percent(100),
-    layout: root.verticalLayout
-  })
-);
 
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
- */
-const series = container.children.push(
-  am5hierarchy.Treemap.new(root, {
-    singleBranchOnly: false,
-    downDepth: 1,
-    upDepth: 1,
-    initialDepth: 1,
-    valueField: "value",
-    categoryField: "name",
-    childDataField: "children"
-  })
-);
+// Create wrapper container
+const container = root.container.children.push(am5.Container.new(root, {
+  width: am5.percent(100),
+  height: am5.percent(100),
+  layout: root.verticalLayout
+}));
+
 
-/**
- * Generate and set data
- * https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
- */
+// Create series
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Adding
+const series = container.children.push(am5hierarchy.Treemap.new(root, {
+  singleBranchOnly: false,
+  downDepth: 1,
+  upDepth: 1,
+  initialDepth: 1,
+  valueField: "value",
+  categoryField: "name",
+  childDataField: "children"
+}));
+
+
+// Generate and set data
+// https://www.amcharts.com/docs/v5/charts/hierarchy/#Setting_data
 const maxLevels = 2;
 const maxNodes = 6;
 const maxValue = 100;
@@ -94,4 +85,8 @@ function generateLevel(data, name, level) {
 
   level++;
   return data;
-}
+}
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/javascript/hierarchy-treemap/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-treemap",
   "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",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",

package/examples/javascript/map-animating-along-lines/index.js

@@ -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 
+    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/javascript/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",
     "webpack": "^5.1.3",
     "webpack-cli": "^4.1.0",