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

package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/index.ts

@@ -0,0 +1,168 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5xy from "@amcharts/amcharts5/xy";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+var 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/xy-chart/
+var chart = root.container.children.push(
+  am5xy.XYChart.new(root, {
+    panX: true,
+    panY: true,
+    wheelX: "panX",
+    wheelY: "zoomX"
+  })
+);
+
+chart.get("colors").set("step", 3);
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
+cursor.lineY.set("visible", false);
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+var xAxis = chart.xAxes.push(
+  am5xy.DateAxis.new(root, {
+    maxDeviation: 0.3,
+    baseInterval: {
+      timeUnit: "day",
+      count: 1
+    },
+    renderer: am5xy.AxisRendererX.new(root, {}),
+    tooltip: am5.Tooltip.new(root, {
+      themeTags: ["axis"],
+      animationDuration: 200
+    })
+  })
+);
+
+var yAxis = chart.yAxes.push(
+  am5xy.ValueAxis.new(root, {
+    maxDeviation: 0.3,
+    renderer: am5xy.AxisRendererY.new(root, {})
+  })
+);
+
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+var series = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "Series 1",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  valueXField: "date"
+}));
+series.strokes.template.setAll({
+  strokeWidth: 2,
+  strokeDasharray: [3, 3]
+});
+
+// Create animating bullet by adding two circles in a bullet container and
+// animating radius and opacity of one of them.
+series.bullets.push(function() {
+  let container = am5.Container.new(root, {
+    templateField: "bulletSettings"
+  });
+  let circle0 = container.children.push(am5.Circle.new(root, {
+    radius: 5,
+    fill: am5.color(0xff0000)
+  }));
+  let circle1 = container.children.push(am5.Circle.new(root, {
+    radius: 5,
+    fill: am5.color(0xff0000)
+  }));
+
+  circle1.animate({
+    key: "radius",
+    to: 20,
+    duration: 1000,
+    easing: am5.ease.out(am5.ease.cubic),
+    loops: Infinity
+  });
+  circle1.animate({
+    key: "opacity",
+    to: 0,
+    from: 1,
+    duration: 1000,
+    easing: am5.ease.out(am5.ease.cubic),
+    loops: Infinity
+  });
+
+  return am5.Bullet.new(root, {
+    sprite: container
+  })
+})
+
+var tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
+tooltip.label.set("text", "{valueY}");
+
+
+// Set data
+var data = [{
+  date: new Date(2021, 5, 12).getTime(),
+  value: 50,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 13).getTime(),
+  value: 53,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 14).getTime(),
+  value: 56,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 15).getTime(),
+  value: 52,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 16).getTime(),
+  value: 48,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 17).getTime(),
+  value: 47,
+  bulletSettings: {
+    visible: false
+  }
+}, {
+  date: new Date(2021, 5, 18).getTime(),
+  value: 59,
+  bulletSettings: {
+    visible: true
+  }
+}]
+
+series.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+series.appear(1000);
+chart.appear(1000, 100);

package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-xy-animated-bullet-at-the-end-of-the-series",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.0.0-beta.30",
+    "source-map-loader": "^3.0.0",
+    "ts-loader": "^9.2.2",
+    "typescript": "^4.3.4",
+    "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/typescript/xy-animated-bullet-at-the-end-of-the-series/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es5",
+    "lib": ["es6"]
+  }
+}

package/examples/typescript/xy-animated-bullet-at-the-end-of-the-series/webpack.config.js

@@ -0,0 +1,45 @@
+var $path = require("path");
+
+module.exports = {
+  mode: "production",
+
+  devtool: "source-map",
+
+  stats: "errors-warnings",
+
+  target: ["web", "es5"],
+
+  entry: {
+    index: "./index.ts",
+  },
+
+  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"
+  },
+
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"]
+  },
+
+  module: {
+    rules: [{
+      test: /.tsx?$/,
+      loader: "ts-loader"
+    }, {
+      test: /.js$/,
+      use: ["source-map-loader"],
+      enforce: "pre"
+    }]
+  }
+};

package/examples/typescript/xy-bubble/index.ts

@@ -2,45 +2,37 @@ import * as am5 from "@amcharts/amcharts5";
 import * as am5xy from "@amcharts/amcharts5/xy";
 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/xy-chart/
- */
-const chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    panX: true,
-    panY: true,
-    wheelY: "zoomXY"
-  })
-);
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererX.new(root, {}),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 300
-    })
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: true,
+  wheelY: "zoomXY"
+}));
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 300
   })
-);
+}));
 
 xAxis.children.moveValue(am5.Label.new(root, {
   text: "GDP per Capita, USD",
@@ -48,17 +40,15 @@ xAxis.children.moveValue(am5.Label.new(root, {
   centerX: am5.p50
 }), xAxis.children.length - 1);
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererY.new(root, {
-      inversed: false
-    }),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 300
-    })
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {
+    inversed: false
+  }),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 300
   })
-);
+}));
 
 yAxis.children.moveValue(am5.Label.new(root, {
   rotation: -90,
@@ -68,33 +58,54 @@ yAxis.children.moveValue(am5.Label.new(root, {
 }), 0);
 
 
-const series = chart.series.push(am5xy.LineSeries.new(root, { calculateAggregates: true, xAxis: xAxis, yAxis: yAxis, valueYField: "y", valueXField: "x", valueField: "value" }));
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series = chart.series.push(am5xy.LineSeries.new(root, {
+  calculateAggregates: true,
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "y",
+  valueXField: "x",
+  valueField: "value"
+}));
+
 series.strokes.template.set("visible", false);
 
-const circleTemplate: am5.Template<am5.Circle> = am5.Template.new({})
+
+// Add bullet
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
+const circleTemplate: am5.Template<am5.Circle> = am5.Template.new({});
 circleTemplate.adapters.add("fill", (fill, target: any) => {
   let dataItem = target.dataItem;
   if (dataItem) {
     return am5.Color.fromString(dataItem.dataContext.color);
   }
   return fill
-})
-
+});
 series.bullets.push(() => {
-  const bulletCircle = am5.Circle.new(root, { radius: 5, fill: series.get("fill"), fillOpacity: 0.8 }, circleTemplate);
-  return am5.Bullet.new(root, { sprite: bulletCircle })
-})
+  const bulletCircle = am5.Circle.new(root, {
+    radius: 5,
+    fill: series.get("fill"),
+    fillOpacity: 0.8
+  }, circleTemplate);
+  return am5.Bullet.new(root, {
+    sprite: bulletCircle
+  });
+});
 
-series.set("heatRules", [
-  {
-    target: circleTemplate,
-    min: 3,
-    max: 60,
-    dataField: "value",
-    key: "radius"
-  }
-])
 
+// Add heat rule
+// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
+series.set("heatRules", [{
+  target: circleTemplate,
+  min: 3,
+  max: 60,
+  dataField: "value",
+  key: "radius"
+}]);
+
+// Set data
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Setting_data
 series.data.setAll([
   {
     "title": "Afghanistan",
@@ -1610,8 +1621,15 @@ series.data.setAll([
   }
 ]);
 
-var tooltip = am5.Tooltip.new(root, { pointerOrientation: "horizontal" });
+
+// Add series tooltip
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Tooltips
+var tooltip = am5.Tooltip.new(root, {
+  pointerOrientation: "horizontal"
+});
+
 tooltip.label.set("text", "[bold]{title}[/]\nLife expectancy: {valueY.formatNumber('#.0')}\nGDP: {valueX.formatNumber('#,###.')}\nPopulation: {value.formatNumber('#,###.')}");
+
 const background = tooltip.get("background");
 background.set("stroke", root.interfaceColors.get("alternativeBackground"));
 background.adapters.add("fill", (fill, target) => {
@@ -1623,12 +1641,18 @@ background.adapters.add("fill", (fill, target) => {
 })
 series.set("tooltip", tooltip);
 
-chart.set("cursor", am5xy.XYCursor.new(root, { xAxis: xAxis, yAxis: yAxis, snapToSeries: [series] }));
 
-/**
- * Add scrollbars
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+chart.set("cursor", am5xy.XYCursor.new(root, {
+  xAxis: xAxis,
+  yAxis: yAxis,
+  snapToSeries: [series]
+}));
+
+
+// Add scrollbars
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, {
   orientation: "horizontal"
 }));
@@ -1637,5 +1661,8 @@ chart.set("scrollbarY", am5.Scrollbar.new(root, {
   orientation: "vertical"
 }));
 
-series.appear(1500);
-chart.appear(1500);
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+series.appear(1000);
+chart.appear(1000, 100);

package/examples/typescript/xy-bubble/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-bubble",
   "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",