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

package/examples/javascript/pie-donut-chart/index.js

@@ -2,42 +2,34 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5percent from "@amcharts/amcharts5/percent";
 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/percent-charts/pie-chart/
- */
-const chart = root.container.children.push(
-  am5percent.PieChart.new(root, {
-    layout: root.verticalLayout,
-    innerRadius: am5.percent(50)
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
- */
-const series = chart.series.push(
-  am5percent.PieSeries.new(root, {
-    valueField: "value",
-    categoryField: "category",
-    alignLabels: false
-  })
-);
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+const chart = root.container.children.push(am5percent.PieChart.new(root, {
+  layout: root.verticalLayout,
+  innerRadius: am5.percent(50)
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
+const series = chart.series.push(am5percent.PieSeries.new(root, {
+  valueField: "value",
+  categoryField: "category",
+  alignLabels: false
+}));
 
 series.labels.template.setAll({
   textType: "circular",
@@ -45,10 +37,13 @@ series.labels.template.setAll({
   centerY: 0
 });
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
- */
+series.ticks.template.setAll({
+  forceHidden: true
+});
+
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
 series.data.setAll([
   { value: 10, category: "One" },
   { value: 9, category: "Two" },
@@ -59,17 +54,19 @@ series.data.setAll([
   { value: 1, category: "Seven" },
 ]);
 
-/**
- * Create legend
- * https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
- */
-const legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.percent(50),
-    x: am5.percent(50),
-    marginTop: 15,
-    marginBottom: 15,
-  })
-);
+
+// Create legend
+// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
+const legend = chart.children.push(am5.Legend.new(root, {
+  centerX: am5.percent(50),
+  x: am5.percent(50),
+  marginTop: 15,
+  marginBottom: 15,
+}));
 
 legend.data.setAll(series.dataItems);
+
+
+// Play initial series animation
+// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+series.appear(1000, 100);

package/examples/javascript/pie-donut-chart/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-pie-donut-chart",
   "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/pie-variable-radius/index.js

@@ -2,51 +2,45 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5percent from "@amcharts/amcharts5/percent";
 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/percent-charts/pie-chart/
- */
-const chart = root.container.children.push(
-  am5percent.PieChart.new(root, {
-    layout: root.verticalLayout
-  })
-);
-
-/**
- * Create series
- * https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
- */
-const series = chart.series.push(
-  am5percent.PieSeries.new(root, {
-    alignLabels: true,
-    calculateAggregates: true,
-    valueField: "value",
-    categoryField: "category"
-  })
-);
-
-series.slices.template.setAll({ strokeWidth: 3, stroke: am5.color(0xffffff) });
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
+const chart = root.container.children.push(am5percent.PieChart.new(root, {
+  layout: root.verticalLayout
+}));
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
+const series = chart.series.push(am5percent.PieSeries.new(root, {
+  alignLabels: true,
+  calculateAggregates: true,
+  valueField: "value",
+  categoryField: "category"
+}));
+
+series.slices.template.setAll({
+  strokeWidth: 3,
+  stroke: am5.color(0xffffff)
+});
 
 series.labelsContainer.set("paddingTop", 30)
 
-/**
- * Set up adapters for variable slice radius
- * https://www.amcharts.com/docs/v5/concepts/settings/adapters/
- */
+
+// Set up adapters for variable slice radius
+// https://www.amcharts.com/docs/v5/concepts/settings/adapters/
 series.slices.template.adapters.add("radius", (radius, target) => {
   const dataItem = target.dataItem;
   const high = series.getPrivate("valueHigh");
@@ -58,36 +52,42 @@ series.slices.template.adapters.add("radius", (radius, target) => {
   return radius;
 });
 
-/**
- * Set data
- * https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
- */
-series.data.setAll([
-  { value: 10, category: "One" },
-  { value: 9, category: "Two" },
-  { value: 6, category: "Three" },
-  { value: 5, category: "Four" },
-  { value: 4, category: "Five" },
-  { value: 3, category: "Six" }
-]);
 
-/**
- * Play initial series animation
- * https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
- */
-series.appear();
-
-/**
- * Create legend
- * https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
- */
-const legend = chart.children.push(
-  am5.Legend.new(root, {
-    centerX: am5.p50,
-    x: am5.p50,
-    marginTop: 15,
-    marginBottom: 15
-  })
-);
-
-legend.data.setAll(series.dataItems);
+// Set data
+// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
+series.data.setAll([{
+  value: 10,
+  category: "One"
+}, {
+  value: 9,
+  category: "Two"
+}, {
+  value: 6,
+  category: "Three"
+}, {
+  value: 5,
+  category: "Four"
+}, {
+  value: 4,
+  category: "Five"
+}, {
+  value: 3,
+  category: "Six"
+}]);
+
+
+// Create legend
+// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
+const legend = chart.children.push(am5.Legend.new(root, {
+  centerX: am5.p50,
+  x: am5.p50,
+  marginTop: 15,
+  marginBottom: 15
+}));
+
+legend.data.setAll(series.dataItems);
+
+
+// Play initial series animation
+// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
+series.appear(1000, 100);

package/examples/javascript/pie-variable-radius/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-pie-variable-radius",
   "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/radar-column-iwatch-style/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/radar-column-iwatch-style/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/radar-column-iwatch-style/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>amCharts 5 Example - radar-column-iwatch-style</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="chartdiv"></div>
+    <script src="dist/index.js"></script>
+  </body>
+</html>

package/examples/javascript/radar-column-iwatch-style/index.js

@@ -0,0 +1,152 @@
+import * as am5 from "@amcharts/amcharts5";
+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
+const root = am5.Root.new("chartdiv");
+
+
+// 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",
+  innerRadius: am5.percent(40)
+}));
+
+chart.get("colors").set("step", 2);
+
+
+// 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
+const yRenderer = am5radar.AxisRendererRadial.new(root, { minGridDistance: 20 });
+
+const yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
+  maxDeviation: 0,
+  categoryField: "category",
+  renderer: yRenderer
+}));
+
+const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  min: new Date("2021-01-01 00:00:00").getTime(),
+  max: new Date("2022-01-01 00:00:00").getTime(),
+  baseInterval: { timeUnit: "day", count: 1 },
+  renderer: am5radar.AxisRendererCircular.new(root, {})
+}));
+
+
+const data = [
+  {
+    category: "One",
+    startDate1: new Date("2021-01-01").getTime(),
+    endDate1: new Date("2021-03-01").getTime(),
+  },
+  {
+    category: "One",
+    startDate1: new Date("2021-04-01").getTime(),
+    endDate1: new Date("2021-08-15").getTime()
+  },
+  {
+    category: "Two",
+    startDate2: new Date("2021-03-01").getTime(),
+    endDate2: new Date("2021-06-01").getTime()
+  },
+  {
+    category: "Two",
+    startDate2: new Date("2021-08-01").getTime(),
+    endDate2: new Date("2021-10-01").getTime()
+  },
+  {
+    category: "Three",
+    startDate3: new Date("2021-02-01").getTime(),
+    endDate3: new Date("2021-07-01").getTime()
+  },
+  {
+    category: "Four",
+    startDate4: new Date("2021-06-09").getTime(),
+    endDate4: new Date("2021-09-01").getTime()
+  },
+  {
+    category: "Four",
+    startDate4: new Date("2021-10-01").getTime(),
+    endDate4: new Date("2021-12-15").getTime()
+  },
+  {
+    category: "Five",
+    startDate5: new Date("2021-02-01").getTime(),
+    endDate5: new Date("2021-04-15").getTime()
+  },
+  {
+    category: "Five",
+    startDate5: new Date("2021-10-01").getTime(),
+    endDate5: new Date("2021-12-31").getTime()
+  }
+];
+
+
+// Set date fields
+// https://www.amcharts.com/docs/v5/concepts/data/#Parsing_dates
+root.dateFormatter.setAll({
+  dateFormat: "yyyy-MM-dd",
+  dateFields: ["valueX", "openValueX"]
+});
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
+for (let i = 1; i < 6; i++) {
+  const series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
+    clustered: false,
+    name: "Series",
+    xAxis: xAxis,
+    yAxis: yAxis,
+    categoryYField: "category",
+    valueXField: "endDate" + i,
+    openValueXField: "startDate" + i
+  }));
+
+  series.columns.template.set("cornerRadius", 25);
+  series.columns.template.set("tooltipText", "{category}: {openValueX} - {valueX}");
+
+  series.data.setAll(data);
+  series.appear(2000, 100);
+  series.data.setAll(data);
+}
+
+yAxis.data.setAll([
+  { category: "One" },
+  { category: "Two" },
+  { category: "Three" },
+  { category: "Four" },
+  { category: "Five" }
+]);
+
+chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));
+chart.set("scrollbarY", am5.Scrollbar.new(root, { orientation: "vertical" }));
+
+xAxis.data.setAll(data);
+
+
+// Animate chart and series in
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(2000, 100);

package/examples/javascript/radar-column-iwatch-style/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "amcharts5-example-radar-column-iwatch-style",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
+    "source-map-loader": "^3.0.0",
+    "webpack": "^5.1.3",
+    "webpack-cli": "^4.1.0",
+    "webpack-dev-server": "^3.11.0"
+  },
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack serve --mode development"
+  }
+}

package/examples/javascript/radar-column-iwatch-style/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"
+    }]
+  }
+};