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

package/examples/typescript/xy-comparing-series-google-analytics-style/index.ts

@@ -0,0 +1,142 @@
+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
+let 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/
+let 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/
+let 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/
+let 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
+  })
+}));
+
+let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  maxDeviation: 0.3,
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+let series = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "Series 1",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value1",
+  valueXField: "date"
+}));
+series.strokes.template.setAll({
+  strokeWidth: 2
+});
+
+let tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
+tooltip.get("background").set("fillOpacity", 0.5);
+tooltip.label.set("text", "{valueX}: {valueY}\n{previousDate}: {value2}");
+
+let series2 = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "Series 2",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value2",
+  valueXField: "date"
+}));
+series2.strokes.template.setAll({
+  strokeDasharray: [2, 2],
+  strokeWidth: 2
+});
+
+
+
+// Set date fields
+// https://www.amcharts.com/docs/v5/concepts/data/#Parsing_dates
+root.dateFormatter.setAll({
+  dateFormat: "yyyy-MM-dd",
+  dateFields: ["valueX"]
+});
+
+
+// Set data
+let data = [{
+  date: new Date(2019, 5, 12).getTime(),
+  value1: 50,
+  value2: 48,
+  previousDate: new Date(2019, 5, 5)
+}, {
+  date: new Date(2019, 5, 13).getTime(),
+  value1: 53,
+  value2: 51,
+  previousDate: "2019-05-06"
+}, {
+  date: new Date(2019, 5, 14).getTime(),
+  value1: 56,
+  value2: 58,
+  previousDate: "2019-05-07"
+}, {
+  date: new Date(2019, 5, 15).getTime(),
+  value1: 52,
+  value2: 53,
+  previousDate: "2019-05-08"
+}, {
+  date: new Date(2019, 5, 16).getTime(),
+  value1: 48,
+  value2: 44,
+  previousDate: "2019-05-09"
+}, {
+  date: new Date(2019, 5, 17).getTime(),
+  value1: 47,
+  value2: 42,
+  previousDate: "2019-05-10"
+}, {
+  date: new Date(2019, 5, 18).getTime(),
+  value1: 59,
+  value2: 55,
+  previousDate: "2019-05-11"
+}]
+
+series.data.setAll(data);
+series2.data.setAll(data);
+
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
+series.appear(1000);
+series2.appear(1000);
+chart.appear(1000, 100);

package/examples/typescript/xy-comparing-series-google-analytics-style/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-xy-comparing-series-google-analytics-style",
+  "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-comparing-series-google-analytics-style/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-comparing-series-google-analytics-style/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-data-grouping/index.ts

@@ -2,36 +2,38 @@ 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: false,
-    panY: false,
-    wheelX: "panX",
-    wheelY: "zoomX"
-  })
-);
 
-const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
+// Create chart
+// https://www.amcharts.com/docs/v5/charts/xy-chart/
+const chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,
+  panY: false,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
+  behavior: "zoomX"
+}));
 cursor.lineY.set("visible", false);
 
+
+// Generate random data
 let date = new Date();
 date.setHours(0, 0, 0, 0);
 let value = 100;
@@ -39,7 +41,10 @@ let value = 100;
 function generateData() {
   value = Math.round((Math.random() * 10 - 5) + value);
   am5.time.add(date, "day", 1);
-  return { date: date.getTime(), value: value };
+  return {
+    date: date.getTime(),
+    value: value
+  };
 }
 
 function generateDatas(count: number) {
@@ -50,39 +55,44 @@ function generateDatas(count: number) {
   return data;
 }
 
-/**
- * Create axes
- * https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
- */
-const xAxis = chart.xAxes.push(
-  am5xy.DateAxis.new(root, {
-    groupData:true,
-    maxDeviation: 0,
-    baseInterval: { timeUnit: "day", count: 1 },
-    renderer: am5xy.AxisRendererX.new(root, {}),
-    tooltip: am5.Tooltip.new(root, {
-      themeTags: ["axis"],
-      animationDuration: 200
-    })
-  })
-);
 
-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, {
+  groupData: true,
+  maxDeviation: 0,
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {}),
+  tooltip: am5.Tooltip.new(root, {
+    themeTags: ["axis"],
+    animationDuration: 200
   })
-);
+}));
 
+const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
 
-const series = chart.series.push(am5xy.LineSeries.new(root, { name: "Series", xAxis: xAxis, yAxis: yAxis, valueYField: "value", valueXField: "date" }));
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+const series = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "Series",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  valueXField: "date"
+}));
 
 const tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
 tooltip.label.set("text", "{valueY}");
 
-/**
- * Add scrollbar
- * https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
- */
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
 chart.set("scrollbarX", am5.Scrollbar.new(root, {
   orientation: "horizontal"
 }));
@@ -90,5 +100,8 @@ chart.set("scrollbarX", am5.Scrollbar.new(root, {
 let data = generateDatas(50000);
 series.data.setAll(data);
 
-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/typescript/xy-data-grouping/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-xy-data-grouping",
   "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-draggable-range/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-draggable-range/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-draggable-range/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>amCharts 5 Example - xy-draggable-range</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-draggable-range/index.ts

@@ -0,0 +1,176 @@
+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
+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/xy-chart/
+var chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: true,
+  panY: true,
+  wheelX: "panX",
+  wheelY: "zoomX"
+}));
+
+
+// Add cursor
+// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
+const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
+cursor.lineY.set("visible", false);
+
+// Generate random data
+var date = new Date();
+date.setHours(0, 0, 0, 0);
+var value = 100;
+
+function generateData() {
+  value = Math.round((Math.random() * 10 - 5) + value);
+  am5.time.add(date, "day", 1);
+  return {
+    date: date.getTime(),
+    value: value
+  };
+}
+
+function generateDatas(count) {
+  var data = [];
+  for (var i = 0; i < count; ++i) {
+    data.push(generateData());
+  }
+  return data;
+}
+
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
+  baseInterval: {
+    timeUnit: "day",
+    count: 1
+  },
+  renderer: am5xy.AxisRendererX.new(root, {})
+}));
+
+var 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/
+var series = chart.series.push(am5xy.LineSeries.new(root, {
+  name: "Series",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "value",
+  valueXField: "date"
+}));
+series.fills.template.setAll({
+  fillOpacity: 0.2,
+  visible: true
+});
+
+var tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
+tooltip.label.set("text", "{valueY}");
+
+// Add scrollbar
+// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
+chart.set("scrollbarX", am5.Scrollbar.new(root, {
+  orientation: "horizontal"
+}));
+
+
+// Set data
+var data = generateDatas(1200);
+series.data.setAll(data);
+
+
+let rangeDate = new Date();
+am5.time.add(rangeDate, "day", Math.round(series.dataItems.length / 2));
+let rangeTime = rangeDate.getTime();
+
+// add series range
+const seriesRangeDataItem = xAxis.makeDataItem({});
+const seriesRange = series.createAxisRange(seriesRangeDataItem);
+seriesRange.fills.template.setAll({
+  visible: true,
+  opacity: 0.3
+});
+
+seriesRange.fills.template.set("fillPattern", am5.LinePattern.new(root, {
+  color: am5.color(0xff0000),
+  rotation: 45,
+  strokeWidth: 2,
+  width: 2000,
+  height: 2000
+}));
+
+seriesRange.strokes.template.set("stroke", am5.color(0xff0000));
+
+xAxis.onPrivate("max", (value) => {
+  seriesRangeDataItem.set("endValue", value);
+  seriesRangeDataItem.set("value", rangeTime);
+});
+
+// add axis range
+const range = xAxis.createAxisRange(xAxis.makeDataItem({}));
+const color = root.interfaceColors.get("primaryButton");
+
+range.set("value", rangeDate.getTime());
+range.get("grid").setAll({
+  strokeOpacity: 1,
+  stroke: color
+});
+
+const resizeButton = am5.Button.new(root, {
+  themeTags: ["resize", "horizontal"],
+  icon: am5.Graphics.new(root, {
+    themeTags: ["icon"]
+  })
+});
+
+// restrict from being dragged vertically
+resizeButton.adapters.add("y", () => {
+  return 0;
+});
+
+// restrict from being dragged outside of plot
+resizeButton.adapters.add("x", (x) => {
+  return Math.max(0, Math.min(chart.plotContainer.width(), x));
+});
+
+// change range when x changes
+resizeButton.events.on("dragged", () => {
+  let x = resizeButton.x();
+  let position = xAxis.toAxisPosition(x / chart.plotContainer.width());
+
+  let value = xAxis.positionToValue(position);
+
+  range.set("value", value);
+
+  seriesRangeDataItem.set("value", value);
+  seriesRangeDataItem.set("endValue", xAxis.getPrivate("max"));
+});
+
+// set bullet for the range
+range.set("bullet", am5xy.AxisBullet.new(root, {
+  sprite: resizeButton
+}));
+
+
+// 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-draggable-range/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-xy-draggable-range",
+  "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-draggable-range/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-draggable-range/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-drawing-series-with-mouse-or-touch/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-drawing-series-with-mouse-or-touch/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;
+}