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

package/examples/typescript/xy-live-data/index.ts

@@ -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
 let value = 100;
 
 function generateChartData() {
@@ -40,63 +40,80 @@ 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 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"
+}));
 
 let easing = am5.ease.linear;
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.DateAxis.new(root, {
-    maxDeviation: 0.5,
-    groupData: false,
-    baseInterval: { timeUnit: "day", count: 1 },
-    renderer: am5xy.AxisRendererX.new(root, {
-      minGridDistance: 50
-    }),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 300
-    })
-  })
-);
 
-const yAxis = chart.yAxes.push(
-  am5xy.ValueAxis.new(root, {
-    renderer: am5xy.AxisRendererY.new(root, {})
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+const xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  maxDeviation: 0.5,
+  groupData: false,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {
+    minGridDistance: 50
+  }),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 300
   })
-);
-
-
-const series = chart.series.push(am5xy.LineSeries.new(root, { minBulletDistance: 10, name: "Series 1", xAxis: xAxis, yAxis: yAxis, "valueYField": "value", "valueXField": "date" }));
+}));
+
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series = chart.series.push(am5xy.LineSeries.new(root, {
+  minBulletDistance: 10,
+  name: "Series 1",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  "valueYField": "value",
+  "valueXField": "date"
+}));
 series.data.setAll(data);
 
-var tooltip = am5.Tooltip.new(root, { pointerOrientation: "horizontal" });
+var tooltip = am5.Tooltip.new(root, {
+  pointerOrientation: "horizontal"
+});
 tooltip.label.set("text", "{valueY}");
 series.set("tooltip", tooltip);
 
+series.bullets.push(() => {
+  return am5.Bullet.new(root, {
+    sprite: am5.Circle.new(root, {
+      radius: 4,
+      fill: series.get("fill")
+    })
+  })
+});
 
-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);
 
-series.bullets.push(() => {
-  return am5.Bullet.new(root, { sprite: am5.Circle.new(root, { radius: 4, fill: series.get("fill") }) })
-})
 
+// Update data every second
 setInterval(() => {
   addData();
 }, 1000)
@@ -109,12 +126,26 @@ function addData() {
   const lastDate = new Date(lastDataItem.get("valueX")!);
   let time = am5.time.add(new Date(lastDate), "day", 1).getTime();
   series.data.removeIndex(0);
-  series.data.push({ date: time, value: newValue })
+  series.data.push({
+    date: time,
+    value: newValue
+  })
 
   let newDataItem = series.dataItems[series.dataItems.length - 1];
-  newDataItem.animate({ key: "valueYWorking", to: newValue, from: lastValue, duration: 600, easing: easing });
-
-  let animation = newDataItem.animate({ key: "locationX", to: 0.5, from: -0.5, duration: 600 });
+  newDataItem.animate({
+    key: "valueYWorking",
+    to: newValue,
+    from: lastValue,
+    duration: 600,
+    easing: easing
+  });
+
+  let animation = newDataItem.animate({
+    key: "locationX",
+    to: 0.5,
+    from: -0.5,
+    duration: 600
+  });
   if (animation) {
     let tooltip = xAxis.get("tooltip");
     if (tooltip && !tooltip.isHidden()) {
@@ -124,3 +155,8 @@ function addData() {
     }
   }
 }
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);

package/examples/typescript/xy-live-data/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-live-data",
   "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/xy-multiple-synced-value-axes/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/typescript/xy-multiple-synced-value-axes/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/typescript/xy-multiple-synced-value-axes/index.html

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

package/examples/typescript/xy-multiple-synced-value-axes/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";
+
+/**
+ * ---------------------------------------
+ * This demo was created using amCharts 5.
+ *
+ * For more information visit:
+ * https://www.amcharts.com/
+ *
+ * Documentation is available at:
+ * https://www.amcharts.com/docs/v5/
+ * ---------------------------------------
+ */
+
+
+// Create root element
+// https://www.amcharts.com/docs/v5/getting-started/#Root_element
+let root = am5.Root.new("chartdiv");
+
+
+// Set themes
+// https://www.amcharts.com/docs/v5/concepts/themes/
+root.setThemes([am5themes_Animated.new(root)]);
+
+
+// Set global date format
+// https://www.amcharts.com/docs/v5/concepts/formatters/formatting-dates/#Global_date_format
+root.dateFormatter.setAll({
+  dateFormat: "yyyy",
+  dateFields: ["valueX"]
+});
+
+
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+let chart = root.container.children.push(am5xy.XYChart.new(root, {
+  focusable: true,
+  panX: false,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+let easing = am5.ease.linear;
+chart.get("colors").set("step", 3);
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+let xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  maxDeviation: 0.1,
+  groupData: false,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 300
+  })
+}));
+
+function createAxisAndSeries(startValue, opposite) {
+  let yRenderer = am5xy.AxisRendererY.new(root, {
+    opposite: opposite
+  });
+  let yAxis = chart.yAxes.push(
+    am5xy.ValueAxis.new(root, {
+      maxDeviation: 1,
+      renderer: yRenderer
+    })
+  );
+
+  // sync each axis with the first one
+  if (chart.yAxes.indexOf(yAxis) > 0) {
+    yAxis.set("syncWithAxis", chart.yAxes.getIndex(0));
+  }
+
+  // Add series
+  // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+  let series = chart.series.push(am5xy.LineSeries.new(root, {
+    xAxis: xAxis,
+    yAxis: yAxis,
+    valueYField: "value",
+    valueXField: "date"
+  }));
+
+  //series.fills.template.setAll({ fillOpacity: 0.2, visible: true });
+  series.strokes.template.setAll({ strokeWidth: 1 });
+
+  yRenderer.grid.template.set("strokeOpacity", 0.05);
+  yRenderer.labels.template.set("fill", series.get("fill"));
+  yRenderer.setAll({
+    stroke: series.get("fill"),
+    strokeOpacity: 1,
+    opacity: 1
+  });
+
+  // Set up data processor to parse string dates
+  // https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data
+  series.data.processor = am5.DataProcessor.new(root, {
+    dateFormat: "yyyy-MM-dd",
+    dateFields: ["date"]
+  });
+
+  series.data.setAll(generateChartData(startValue));
+
+  let tooltip = am5.Tooltip.new(root, {
+    pointerOrientation: "horizontal"
+  });
+  tooltip.label.set("text", "{valueY}");
+  series.set("tooltip", tooltip);
+}
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+let cursor = chart.set(
+  "cursor",
+  am5xy.XYCursor.new(root, {
+    xAxis: xAxis,
+    behavior: "zoomX"
+  })
+);
+cursor.lineY.set("visible", false);
+
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+chart.set("scrollbarX", am5.Scrollbar.new(root, {
+  orientation: "horizontal"
+}));
+
+createAxisAndSeries(100, false);
+createAxisAndSeries(1000, true);
+createAxisAndSeries(8000, true);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+chart.appear(1000, 100);
+
+
+// Generate some random data, quite different range
+function generateChartData(value) {
+  let data = [];
+  let firstDate = new Date();
+  firstDate.setDate(firstDate.getDate() - 100);
+  firstDate.setHours(0, 0, 0, 0);
+
+  for (let i = 0; i < 100; i++) {
+    let newDate = new Date(firstDate);
+    newDate.setDate(newDate.getDate() + i);
+
+    value += Math.round(
+      ((Math.random() < 0.5 ? 1 : -1) * Math.random() * value) / 20
+    );
+
+    data.push({
+      date: newDate,
+      value: value
+    });
+  }
+  return data;
+}

package/examples/typescript/xy-multiple-synced-value-axes/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-xy-multiple-synced-value-axes",
+  "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-multiple-synced-value-axes/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-multiple-synced-value-axes/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"
+    }]
+  }
+};