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

package/examples/typescript/flow-chord-directed/index.ts

@@ -2,34 +2,29 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5flow from "@amcharts/amcharts5/flow";
 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 series
- * https://www.amcharts.com/docs/v5/charts/flow-charts/
- */
-const series = root.container.children.push(
-  am5flow.ChordDirected.new(root, {
-    startAngle: 80,
-    padAngle: 1,
-    linkHeadRadius: null,
-    sourceIdField: "from",
-    targetIdField: "to",
-    valueField: "value"
-  })
-);
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/
+const series = root.container.children.push(am5flow.ChordDirected.new(root, {
+  startAngle: 80,
+  padAngle: 1,
+  linkHeadRadius: null,
+  sourceIdField: "from",
+  targetIdField: "to",
+  valueField: "value"
+}));
 
 series.nodes.labels.template.setAll({
   textType: "radial",
@@ -39,10 +34,9 @@ series.nodes.labels.template.setAll({
 
 series.links.template.set("fillStyle", "source");
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
- */
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
 series.data.setAll([
   { "from": "Monica", "to": "Rachel", "value": 4 },
   { "from": "Monica", "to": "Chandler", "value": 113 },
@@ -153,4 +147,8 @@ series.data.setAll([
   { "from": "Carol", "to": "Susan", "value": 1 },
   { "from": "Mr Geller", "to": "Mrs Geller", "value": 3 },
   { "from": "Frank", "to": "Alice", "value": 5 }
-]);
+]);
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/typescript/flow-chord-directed/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord-directed",
   "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/flow-chord-non-ribbon/index.ts

@@ -2,31 +2,26 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5flow from "@amcharts/amcharts5/flow";
 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 series
- * https://www.amcharts.com/docs/v5/charts/flow-charts/
- */
-const series = root.container.children.push(
-  am5flow.ChordNonRibbon.new(root, {
-    sourceIdField: "from",
-    targetIdField: "to",
-    valueField: "value"
-  })
-);
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/
+const series = root.container.children.push(am5flow.ChordNonRibbon.new(root, {
+  sourceIdField: "from",
+  targetIdField: "to",
+  valueField: "value"
+}));
 
 series.nodes.get("colors")!.set("step", 2);
 
@@ -44,8 +39,8 @@ series.bullets.push((_root, _series, dataItem) => {
     to: 1,
     from: 0,
     duration: Math.random() * 1000 + 2000,
-    loops:Infinity,
-    easing:am5.ease.yoyo(am5.ease.cubic)
+    loops: Infinity,
+    easing: am5.ease.yoyo(am5.ease.cubic)
   });
 
   return bullet;
@@ -69,10 +64,9 @@ series.nodes.bullets.push((_root, _series, dataItem) => {
 
 series.children.moveValue(series.bulletsContainer, 0);
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
- */
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
 series.data.setAll([
   { from: "A", to: "D", value: 10 },
   { from: "B", to: "D", value: 8 },
@@ -82,4 +76,8 @@ series.data.setAll([
   { from: "E", to: "D", value: 8 },
   { from: "C", to: "A", value: 4 },
   { from: "G", to: "A", value: 7 }
-]);
+]);
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/typescript/flow-chord-non-ribbon/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord-non-ribbon",
   "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/flow-sankey/index.ts

@@ -2,39 +2,33 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5flow from "@amcharts/amcharts5/flow";
 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 series
- * https://www.amcharts.com/docs/v5/charts/flow-charts/
- */
-const series = root.container.children.push(
-  am5flow.Sankey.new(root, {
-    sourceIdField: "from",
-    targetIdField: "to",
-    valueField: "value",
-    paddingRight: 50
-  })
-);
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/
+const series = root.container.children.push(am5flow.Sankey.new(root, {
+  sourceIdField: "from",
+  targetIdField: "to",
+  valueField: "value",
+  paddingRight: 50
+}));
 
 series.nodes.get("colors").set("step", 2);
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
- */
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
 series.data.setAll([
   { from: "A", to: "D", value: 10 },
   { from: "B", to: "D", value: 8 },
@@ -47,4 +41,8 @@ series.data.setAll([
   { from: "G", to: "J", value: 5 },
   { from: "I", to: "J", value: 1 },
   { from: "H", to: "J", value: 9 }
-]);
+]);
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/typescript/flow-sankey/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-sankey",
   "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/gauge/index.ts

@@ -3,62 +3,53 @@ import * as am5xy from "@amcharts/amcharts5/xy";
 import * as am5radar from "@amcharts/amcharts5/radar";
 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 chart
- * https://www.amcharts.com/docs/v5/charts/radar-chart/
- */
-const chart = root.container.children.push(
-  am5radar.RadarChart.new(root, {
-    panX: false,
-    panY: false,
-    startAngle: 180,
-    endAngle: 360
-  })
-);
 
-/**
- * Create axis and its renderer
- * https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
- */
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/radar-chart/
+const chart = root.container.children.push(am5radar.RadarChart.new(root, {
+  panX: false,
+  panY: false,
+  startAngle: 180,
+  endAngle: 360
+}));
+
+
+// Create axis and its renderer
+// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
 const axisRenderer = am5radar.AxisRendererCircular.new(root, {
   innerRadius: -10,
   strokeOpacity: 0.1
 });
 
-const xAxis = chart.xAxes.push(
-  am5xy.ValueAxis.new(root, {
-    maxDeviation: 0,
-    min: 0,
-    max: 100,
-    strictMinMax: true,
-    renderer: axisRenderer
-  })
-);
+const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
+  maxDeviation: 0,
+  min: 0,
+  max: 100,
+  strictMinMax: true,
+  renderer: axisRenderer
+}));
+
 
-/**
- * Add clock hand
- * https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
- */
+// Add clock hand
+// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
 const axisDataItem = xAxis.makeDataItem({});
 axisDataItem.set("value", 0);
 
 const bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
   sprite: am5radar.ClockHand.new(root, {
-    radius:am5.percent(99)
+    radius: am5.percent(99)
   })
 }));
 
@@ -73,4 +64,8 @@ setInterval(() => {
     duration: 800,
     easing: am5.ease.out(am5.ease.cubic)
   });
-}, 2000);
+}, 2000);
+
+
+// Make stuff animate on load
+chart.appear(1000, 100);

package/examples/typescript/gauge/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-gauge",
   "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/gauge-bands/index.ts

@@ -3,37 +3,31 @@ import * as am5xy from "@amcharts/amcharts5/xy";
 import * as am5radar from "@amcharts/amcharts5/radar";
 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 chart
- * https://www.amcharts.com/docs/v5/charts/radar-chart/
- */
-const chart = root.container.children.push(
-  am5radar.RadarChart.new(root, {
-    panX: false,
-    panY: false,
-    startAngle: 160,
-    endAngle: 380
-  })
-);
 
-/**
- * Create axis and its renderer
- * https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
- */
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/radar-chart/
+const chart = root.container.children.push(am5radar.RadarChart.new(root, {
+  panX: false,
+  panY: false,
+  startAngle: 160,
+  endAngle: 380
+}));
+
+
+// Create axis and its renderer
+// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Axes
 const axisRenderer = am5radar.AxisRendererCircular.new(root, {
   innerRadius: -40
 });
@@ -53,10 +47,8 @@ const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
 }));
 
 
-/**
- * Add clock hand
- * https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
- */
+// Add clock hand
+// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Clock_hands
 const axisDataItem = xAxis.makeDataItem({});
 
 const clockHand = am5radar.ClockHand.new(root, {
@@ -71,15 +63,13 @@ const bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
 
 xAxis.createAxisRange(axisDataItem);
 
-const label = chart.radarContainer.children.push(
-  am5.Label.new(root, {
-    fill:am5.color(0xffffff),
-    centerX: am5.percent(50),
-    textAlign: "center",
-    centerY: am5.percent(50),
-    fontSize: "3em"
-  })
-);
+const label = chart.radarContainer.children.push(am5.Label.new(root, {
+  fill: am5.color(0xffffff),
+  centerX: am5.percent(50),
+  textAlign: "center",
+  centerY: am5.percent(50),
+  fontSize: "3em"
+}));
 
 axisDataItem.set("value", 50);
 bullet.get("sprite").on("rotation", () => {
@@ -94,8 +84,8 @@ bullet.get("sprite").on("rotation", () => {
 
   label.set("text", Math.round(value).toString());
 
-  clockHand.pin.animate({key:"fill", to: fill, duration:500, easing:am5.ease.out(am5.ease.cubic)})
-  clockHand.hand.animate({key:"fill", to: fill, duration:500, easing:am5.ease.out(am5.ease.cubic)})
+  clockHand.pin.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
+  clockHand.hand.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
 });
 
 setInterval(() => {
@@ -109,10 +99,9 @@ setInterval(() => {
 
 chart.bulletsContainer.set("mask", undefined);
 
-/**
- * Create axis ranges bands
- * https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Bands
- */
+
+// Create axis ranges bands
+// https://www.amcharts.com/docs/v5/charts/radar-chart/gauge-charts/#Bands
 const bandsData = [{
   title: "Unsustainable",
   color: "#ee1f25",
@@ -151,12 +140,11 @@ const bandsData = [{
 }];
 
 am5.array.each(bandsData, (data) => {
-  const axisRange = xAxis.createAxisRange(xAxis.makeDataItem({}));
-
-  axisRange.setAll({
+  const axisRange = xAxis.createAxisRange(xAxis.makeDataItem({
+    above: true,
     value: data.lowScore,
     endValue: data.highScore
-  });
+  }));
 
   axisRange.get("axisFill").setAll({
     visible: true,
@@ -172,3 +160,7 @@ am5.array.each(bandsData, (data) => {
     fill: root.interfaceColors.get("background")
   });
 });
+
+
+// Make stuff animate on load
+chart.appear(1000, 100);

package/examples/typescript/gauge-bands/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-gauge-bands",
   "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/hierarchy-force-directed/index.ts

@@ -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.ForceDirected.new(root, {
-    singleBranchOnly: false,
-    downDepth: 1,
-    initialDepth: 2,
-    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.ForceDirected.new(root, {
+  singleBranchOnly: false,
+  downDepth: 1,
+  initialDepth: 2,
+  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: any, name: string, level: number) {
 
   level++;
   return data;
-}
+}
+
+
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/typescript/hierarchy-force-directed/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-force-directed",
   "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",