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

package/examples/typescript/radar-heat-map/index.ts

@@ -3,26 +3,22 @@ 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, {
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/radar-chart/
+const chart = root.container.children.push(  am5radar.RadarChart.new(root, {
     innerRadius: am5.percent(50),
     panX: false,
     panY: false,
@@ -30,13 +26,11 @@ const chart = root.container.children.push(
     wheelY: "zoomX",
     maxTooltipDistance: 0,
     layout: root.verticalLayout
-  })
-);
+  }));
+
 
-/**
- * Create axes and their renderers
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
- */
+// Create axes and their renderers
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
 const yRenderer = am5radar.AxisRendererRadial.new(root, {
   visible: false,
   axisAngle: 90,
@@ -52,13 +46,11 @@ yRenderer.labels.template.setAll({
 
 yRenderer.grid.template.set("visible", false);
 
-const yAxis = chart.yAxes.push(
-  am5xy.CategoryAxis.new(root, {
+const yAxis = chart.yAxes.push(  am5xy.CategoryAxis.new(root, {
     maxDeviation: 0,
     renderer: yRenderer,
     categoryField: "weekday"
-  })
-);
+  }));
 
 const xRenderer = am5radar.AxisRendererCircular.new(root, {
   visible: false,
@@ -72,19 +64,15 @@ xRenderer.labels.template.setAll({
 
 xRenderer.grid.template.set("visible", false);
 
-const xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
+const xAxis = chart.xAxes.push(  am5xy.CategoryAxis.new(root, {
     renderer: xRenderer,
     categoryField: "hour"
-  })
-);
+  }));
 
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
- */
-const series = chart.series.push(
-  am5radar.RadarColumnSeries.new(root, {
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+const series = chart.series.push(  am5radar.RadarColumnSeries.new(root, {
     calculateAggregates: true,
     stroke: am5.color(0xffffff),
     clustered: false,
@@ -93,8 +81,7 @@ const series = chart.series.push(
     categoryXField: "hour",
     categoryYField: "weekday",
     valueField: "value"
-  })
-);
+  }));
 
 series.columns.template.setAll({
   tooltipText: "{value}",
@@ -117,10 +104,8 @@ series.events.on("datavalidated", () => {
 });
 
 
-/**
- * Set up heat rules
- * https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
- */
+// Set up heat rules
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
 series.set("heatRules", [{
   target: series.columns.template,
   min: am5.color(0xfffb77),
@@ -129,22 +114,18 @@ series.set("heatRules", [{
   key: "fill"
 }]);
 
-/**
- * Add heat legend
- * https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/
- */
-const heatLegend = chart.children.push(
-  am5.HeatLegend.new(root, {
+
+// Add heat legend
+// https://www.amcharts.com/docs/v5/concepts/legend/heat-legend/
+const heatLegend = chart.children.push(  am5.HeatLegend.new(root, {
     orientation: "horizontal",
     endColor: am5.color(0xfffb77),
     startColor: am5.color(0xfe131a)
-  })
-);
+  }));
+
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
- */
+// Set data
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
 const data = [{
   hour: "12pm",
   weekday: "Sunday",
@@ -859,8 +840,6 @@ xAxis.data.setAll([
   { hour: "11pm" }
 ]);
 
-/**
- * Animate series in
- * https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
- */
-series.appear();
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/typescript/radar-heat-map/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-heat-map",
   "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/radar-line/index.ts

@@ -3,83 +3,68 @@ 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,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-/**
- * Add cursor
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
- */
+// 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,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
 const cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
   behavior: "zoomX"
 }));
 
 cursor.lineY.set("visible", false);
 
-/**
- * Create axes and their renderers
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
- */
+
+// Create axes and their renderers
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
 const xRenderer = am5radar.AxisRendererCircular.new(root, {});
 xRenderer.labels.template.setAll({
   radius: 10
 });
 
-const xAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    maxDeviation: 0,
-    categoryField: "category",
-    renderer: xRenderer,
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 200
-    })
+const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  maxDeviation: 0,
+  categoryField: "category",
+  renderer: xRenderer,
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 200
   })
-);
+}));
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5radar.AxisRendererRadial.new(root, {})
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
- */
-const series = chart.series.push(
-  am5radar.RadarLineSeries.new(root, {
-    name: "Series",
-    xAxis: xAxis,
-    yAxis: yAxis,
-    valueYField: "value",
-    categoryXField: "category"
-  })
-);
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5radar.AxisRendererRadial.new(root, {})
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+const series = chart.series.push(am5radar.RadarLineSeries.new(root, {
+  name: "Series",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  categoryXField: "category"
+}));
 
 series.bullets.push(() => {
   return am5.Bullet.new(root, {
@@ -93,13 +78,14 @@ series.bullets.push(() => {
 const tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip.label.set("text", "{valueY}");
 
+
+// Add scrollbars
 chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
 chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
 
-/**
- * Generate and set data
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
- */
+
+// Generate and set data
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
 let i = -1;
 let value = 10;
 
@@ -123,9 +109,8 @@ let data = generateDatas(12);
 series.data.setAll(data);
 xAxis.data.setAll(data);
 
-/**
- * Animate chart and series in
- * https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
- */
-series.appear();
-chart.appear();
+
+// Animate chart and series in
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+series.appear(1000);
+chart.appear(1000, 100);

package/examples/typescript/radar-line/package.json

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

@@ -3,16 +3,14 @@ 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)
 ]);
@@ -134,9 +132,7 @@ var temperatures = {
   ]
 }
 
-/**
- * Modify defaults
- */
+// Modify defaults
 root.defaultTheme.rule("Label").set("fontSize", 10);
 root.defaultTheme.rule("Grid").set("strokeOpacity", 0.06);
 root.numberFormatter.set("numberFormat", "+#.0°C|#.0°C|0.0°C");
@@ -149,27 +145,23 @@ var div = document.getElementById("chartdiv");
 
 var colorSet = am5.ColorSet.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,
-    wheelX: "panX",
-    wheelY: "zoomX",
-    innerRadius: am5.percent(40),
-    radius: am5.percent(65),
-    startAngle: 270 - 170,
-    endAngle: 270 + 170
-  })
-);
 
-/**
- * Add cursor
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
- */
+// 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,
+  wheelX: "panX",
+  wheelY: "zoomX",
+  innerRadius: am5.percent(40),
+  radius: am5.percent(65),
+  startAngle: 270 - 170,
+  endAngle: 270 + 170
+}));
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
 const cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
   behavior: "zoomX",
   radius: am5.percent(40),
@@ -177,10 +169,9 @@ const cursor = chart.set("cursor", am5radar.RadarCursor.new(root, {
 }));
 cursor.lineY.set("visible", false);
 
-/**
- * Create axes and their renderers
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
- */
+
+// Create axes and their renderers
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
 const xRenderer = am5radar.AxisRendererCircular.new(root, {
   minGridDistance: 10
 });
@@ -199,47 +190,39 @@ yRenderer.labels.template.setAll({
   centerX: am5.p50
 });
 
-const categoryAxis = chart.xAxes.push(
-  am5xy.CategoryAxis.new(root, {
-    maxDeviation: 0,
-    categoryField: "country",
-    renderer: xRenderer
-  })
-);
-
-const valueAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    min: -3,
-    max: 6,
-    extraMax: 0.1,
-    renderer: yRenderer
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
- */
-const series = chart.series.push(
-  am5radar.RadarColumnSeries.new(root, {
-    calculateAggregates: true,
-    name: "Series",
-    xAxis: categoryAxis,
-    yAxis: valueAxis,
-    valueYField: "value" + currentYear,
-    categoryXField: "country"
-  })
-);
+const categoryAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  maxDeviation: 0,
+  categoryField: "country",
+  renderer: xRenderer
+}));
+
+const valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  min: -3,
+  max: 6,
+  extraMax: 0.1,
+  renderer: yRenderer
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+const series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
+  calculateAggregates: true,
+  name: "Series",
+  xAxis: categoryAxis,
+  yAxis: valueAxis,
+  valueYField: "value" + currentYear,
+  categoryXField: "country"
+}));
 
 series.columns.template.set("strokeOpacity", 0);
 
 const tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip.label.set("text", "{categoryX}:{valueY}");
 
-/**
- * Set up heat rules
- * https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
- */
+
+// Set up heat rules
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
 series.set("heatRules", [{
   target: series.columns.template,
   key: "fill",
@@ -248,36 +231,29 @@ series.set("heatRules", [{
   dataField: "valueY"
 }]);
 
-/**
- * Add scrollbars
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+// Add scrollbars
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
 chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
 
-/**
- * Add year label
- */
-const yearLabel = chart.radarContainer.children.push(
-  am5.Label.new(root, {
-    fontSize: "2em",
-    text: currentYear.toString(),
-    centerX: am5.p50,
-    centerY: am5.p50,
-    fill: am5.color(0x673AB7)
-  })
-);
+// Add year label
+const yearLabel = chart.radarContainer.children.push(am5.Label.new(root, {
+  fontSize: "2em",
+  text: currentYear.toString(),
+  centerX: am5.p50,
+  centerY: am5.p50,
+  fill: am5.color(0x673AB7)
+}));
 
-/**
- * Generate and set data
- * https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
- */
+
+// Generate and set data
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
 var data = generateRadarData();
 series.data.setAll(data);
 categoryAxis.data.setAll(data);
 
-series.appear();
-chart.appear();
+series.appear(1000);
+chart.appear(1000, 100);
 
 function generateRadarData() {
   var data = [];
@@ -341,18 +317,14 @@ function createRange(name, continentData, index) {
 }
 
 
-/**
- * Create controls
- */
-const container = chart.children.push(
-  am5.Container.new(root, {
-    y: am5.percent(95),
-    centerX: am5.p50,
-    x: am5.p50,
-    width: am5.percent(80),
-    layout: root.horizontalLayout
-  })
-);
+// Create controls
+const container = chart.children.push(am5.Container.new(root, {
+  y: am5.percent(95),
+  centerX: am5.p50,
+  x: am5.p50,
+  width: am5.percent(80),
+  layout: root.horizontalLayout
+}));
 
 const playButton = container.children.push(am5.Button.new(root, {
   themeTags: ["play"],
@@ -376,13 +348,11 @@ playButton.events.on("click", () => {
   }
 })
 
-const slider = container.children.push(
-  am5.Slider.new(root, {
-    orientation: "horizontal",
-    start: 0.5,
-    centerY: am5.p50
-  })
-);
+const slider = container.children.push(am5.Slider.new(root, {
+  orientation: "horizontal",
+  start: 0.5,
+  centerY: am5.p50
+}));
 
 slider.on("start", (start) => {
   if (start === 1) {

package/examples/typescript/radar-time-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-time-line",
   "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",