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

package/examples/javascript/xy-ohlc/index.js

@@ -2,20 +2,20 @@ 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)
 ]);
 
+
+// Generate random data
 function generateChartData() {
   var chartData = [];
   var firstDate = new Date();
@@ -44,51 +44,70 @@ function generateChartData() {
 
 const data = generateChartData();
 
-/**
- * Create chart
- * https://www.amcharts.com/docs/v5/charts/xy-chart/
- */
-const chart = root.container.children.push(
-  am5xy.XYChart.new(root, {
-    focusable: true,
-    panX: true,
-    panY: true,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.DateAxis.new(root, {
-    groupData: true,
-    baseInterval: { timeUnit: "day", count: 1 },
-    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, {
+  focusable: true,
+  panX: true,
+  panY: true,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  groupData: true,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 300
   })
-);
+}));
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererY.new(root, {})
-  })
-);
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
 
 const color = root.interfaceColors.get("background");
 
-const series = chart.series.push(am5xy.OHLCSeries.new(root, { fill: color, calculateAggregates: true, stroke: color, name: "MDXI", xAxis: xAxis, yAxis: yAxis, valueYField: "value", openValueYField: "open", lowValueYField: "low", highValueYField: "high", valueXField: "date", lowValueYGrouped: "low", highValueYGrouped: "high", openValueYGrouped: "open", valueYGrouped: "close" }));
-series.set("legendValueText", "open:{openValueY} low:{lowValueY} high:{highValueY} close:{valueY}");
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series = chart.series.push(am5xy.OHLCSeries.new(root, {
+  fill: color,
+  calculateAggregates: true,
+  stroke: color,
+  name: "MDXI",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  openValueYField: "open",
+  lowValueYField: "low",
+  highValueYField: "high",
+  valueXField: "date",
+  lowValueYGrouped: "low",
+  highValueYGrouped: "high",
+  openValueYGrouped: "open",
+  valueYGrouped: "close"
+}));
+series.set("legendValueText", "open: {openValueY} low: {lowValueY} high: {highValueY} close: {valueY}");
 series.set("legendRangeValueText", "{valueYClose}");
 series.data.setAll(data);
 
-const tooltip = am5.Tooltip.new(root, { pointerOrientation: "vertical" });
-tooltip.label.setAll({ fill: root.interfaceColors.get("text"), text: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}" });
+const tooltip = am5.Tooltip.new(root, {
+  pointerOrientation: "vertical"
+});
+tooltip.label.setAll({
+  fill: root.interfaceColors.get("text"),
+  text: "open: {openValueY}\nlow: {lowValueY}\nhigh: {highValueY}\nclose: {valueY}"
+});
 
 const tooltipBg = tooltip.get("background");
 tooltipBg.set("strokeWidth", 2);
@@ -101,35 +120,80 @@ tooltipBg.adapters.add("stroke", (stroke, target) => {
     }
   }
   return stroke;
-})
+});
 series.set("tooltip", tooltip);
 
-const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { xAxis: xAxis }));
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+  xAxis: xAxis
+}));
 cursor.lineY.set("visible", false);
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 const scrollbar = am5xy.XYChartScrollbar.new(root, {
   orientation: "horizontal",
   height: 50
 });
 chart.set("scrollbarX", scrollbar);
 
-chart.leftAxesContainer.set("layout", root.verticalLayout);
 
-const sbxAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, { groupData: true, groupIntervals: [{ timeUnit: "week", count: 1 }], baseInterval: { timeUnit: "day", count: 1 }, renderer: am5xy.AxisRendererX.new(root, { opposite: false, strokeOpacity: 0 }) }));
-const sbyAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererY.new(root, {}) }));
+// Stack axes vertically
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/#Stacked_axes
+chart.leftAxesContainer.set("layout", root.verticalLayout);
 
-const sbseries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, { xAxis: sbxAxis, yAxis: sbyAxis, valueYField: "value", valueXField: "date" }));
+const sbxAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
+  groupData: true,
+  groupIntervals: [{
+    timeUnit: "week",
+    count: 1
+  }],
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {
+    opposite: false,
+    strokeOpacity: 0
+  })
+}));
+const sbyAxis = scrollbar.chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+const sbseries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
+  xAxis: sbxAxis,
+  yAxis: sbyAxis,
+  valueYField: "value",
+  valueXField: "date"
+}));
 sbseries.data.setAll(data);
 
-const legend = yAxis.axisHeader.children.push(am5.Legend.new(root, {}))
+
+// Add legend
+// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
+const legend = yAxis.axisHeader.children.push(
+  am5.Legend.new(root, {})
+);
+
 legend.data.push(series);
-legend.markers.template.setAll({ width: 10 });
 
-root.defaultTheme.rule("LegendMarkerBackground").setAll({ cornerRadiusTR: 0, cornerRadiusBR: 0, cornerRadiusTL: 0, cornerRadiusBL: 0 })
+legend.markers.template.setAll({
+  width: 10
+});
+
+legend.markerRectangles.template.setAll({
+  cornerRadiusTR: 0,
+  cornerRadiusBR: 0,
+  cornerRadiusTL: 0,
+  cornerRadiusBL: 0
+});
+
 
-series.appear();
-chart.appear();
+// 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/javascript/xy-ohlc/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-ohlc",
   "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/xy-real-time-data-sorting/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/xy-real-time-data-sorting/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/xy-real-time-data-sorting/index.html

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

package/examples/javascript/xy-real-time-data-sorting/index.js

@@ -0,0 +1,220 @@
+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: "none",
+  wheelY: "none"
+}));
+
+// We don't want zoom-out button to appear while animating, so we hide it
+chart.zoomOutButton.set("forceHidden", true);
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+var xRenderer = am5xy.AxisRendererX.new(root, {
+  minGridDistance: 30
+});
+xRenderer.labels.template.setAll({
+  rotation: -90,
+  centerY: am5.p50,
+  centerX: 0,
+  paddingRight: 15
+});
+xRenderer.grid.template.set("visible", false);
+
+var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  maxDeviation: 0.3,
+  categoryField: "country",
+  renderer: xRenderer
+}));
+
+var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  maxDeviation: 0.3,
+  min: 0,
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+var series = chart.series.push(am5xy.ColumnSeries.new(root, {
+  name: "Series 1",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  categoryXField: "country"
+}));
+
+// Rounded corners for columns
+series.columns.template.setAll({
+  cornerRadiusTL: 5,
+  cornerRadiusTR: 5
+});
+
+// Make each column to be of a different color
+series.columns.template.adapters.add("fill", (fill, target) => {
+  return chart.get("colors").getIndex(series.columns.indexOf(target ));
+});
+
+series.columns.template.adapters.add("stroke", (stroke, target) => {
+  return chart.get("colors").getIndex(series.columns.indexOf(target ));
+});
+
+// Add Label bullet
+series.bullets.push(() => {
+  return am5.Bullet.new(root, {
+    locationY: 1,
+    sprite: am5.Label.new(root, {
+      text: "{valueYWorking.formatNumber('#.')}",
+      fill: root.interfaceColors.get("alternativeText"),
+      centerY: 0,
+      centerX: am5.p50,
+      populateText: true
+    })
+  });
+});
+
+
+// Set data
+var data = [{
+  "country": "USA",
+  "value": 2025
+}, {
+  "country": "China",
+  "value": 1882
+}, {
+  "country": "Japan",
+  "value": 1809
+}, {
+  "country": "Germany",
+  "value": 1322
+}, {
+  "country": "UK",
+  "value": 1122
+}, {
+  "country": "France",
+  "value": 1114
+}, {
+  "country": "India",
+  "value": 984
+}, {
+  "country": "Spain",
+  "value": 711
+}, {
+  "country": "Netherlands",
+  "value": 665
+}, {
+  "country": "Russia",
+  "value": 580
+}, {
+  "country": "South Korea",
+  "value": 443
+}, {
+  "country": "Canada",
+  "value": 441
+}];
+
+xAxis.data.setAll(data);
+series.data.setAll(data);
+
+// update data with random values each 1.5 sec
+setInterval(() => {
+  updateData();
+}, 1500)
+
+function updateData() {
+  am5.array.each(series.dataItems, (dataItem) => {
+    let value = dataItem.get("valueY") + Math.round(Math.random() * 300 - 150);
+    if (value < 0) {
+      value = 10;
+    }
+    // both valueY and workingValueY should be changed, we only animate workingValueY
+    dataItem.set("valueY", value);
+    dataItem.animate({
+      key: "valueYWorking",
+      to: value,
+      duration: 600,
+      easing: am5.ease.out(am5.ease.cubic)
+    });
+  })
+
+  sortCategoryAxis();
+}
+
+
+// Get series item by category
+function getSeriesItem(category) {
+  for (let i = 0; i < series.dataItems.length; i++) {
+    let dataItem = series.dataItems[i];
+    if (dataItem.get("categoryX") == category) {
+      return dataItem;
+    }
+  }
+}
+
+
+// Axis sorting
+function sortCategoryAxis() {
+
+  // Sort by value
+  series.dataItems.sort((x, y) => {
+    return y.get("valueY") - x.get("valueY"); // descending
+    //return y.get("valueY") - x.get("valueY"); // ascending
+  })
+
+  // Go through each axis item
+  am5.array.each(xAxis.dataItems, (dataItem) => {
+    // get corresponding series item
+    let seriesDataItem = getSeriesItem(dataItem.get("category"));
+
+    if (seriesDataItem) {
+      // get index of series data item
+      let index = series.dataItems.indexOf(seriesDataItem);
+      // calculate delta position
+      let deltaPosition = (index - dataItem.get("index", 0)) / series.dataItems.length;
+      // set index to be the same as series data item index
+      dataItem.set("index", index);
+      // set deltaPosition instanlty
+      dataItem.set("deltaPosition", -deltaPosition);
+      // animate delta position to 0
+      dataItem.animate({
+        key: "deltaPosition",
+        to: 0,
+        duration: 1000,
+        easing: am5.ease.out(am5.ease.cubic)
+      })
+    }
+  });
+
+  // Sort axis items by index.
+  // This changes the order instantly, but as deltaPosition is set,
+  // they keep in the same places and then animate to true positions.
+  xAxis.dataItems.sort((x, y) => {
+    return x.get("index") - y.get("index");
+  });
+}
+
+
+// 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/javascript/xy-real-time-data-sorting/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "amcharts5-example-xy-real-time-data-sorting",
+  "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/xy-real-time-data-sorting/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"
+    }]
+  }
+};