npm - @amcharts/amcharts5 - Versions diffs - 5.3.16 → 5.4.0 - Mend

@amcharts/amcharts5 5.3.16 → 5.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

package/examples/javascript/flow-arc-horizontal/index.html ADDED Viewed

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

package/examples/javascript/flow-arc-horizontal/index.js ADDED Viewed

@@ -0,0 +1,116 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5flow from "@amcharts/amcharts5/flow";
+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 series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
+var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+  sourceIdField: "from",
+  targetIdField: "to",
+  valueField: "value",
+  orientation: "horizontal"
+}));
+// Configure labels
+// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/#Labels
+series.nodes.labels.template.setAll({
+  fontSize: "0.85em",
+  paddingLeft: 20,
+  paddingRight: 20
+});
+// Selectively position/rotate labels if they fit within node circle
+series.nodes.labels.template.adapters.add("x", (x, target) => {
+  var dataItem = target.dataItem;
+  if (dataItem) {
+    if (dataItem.get("circle").get("radius") > 30) {
+      target.set("centerX", am5.p50);
+      target.set("rotation", 0);
+    }
+    else {
+      target.set("centerX", 0);
+      target.set("rotation", 90);
+    }
+  }
+  return x;
+});
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
+series.data.setAll([
+  { "from": "Monica", "to": "Rachel", "value": 4 },
+  { "from": "Monica", "to": "Chandler", "value": 63 },
+  { "from": "Monica", "to": "Ross", "value": 16 },
+  { "from": "Monica", "to": "Joey", "value": 9 },
+  { "from": "Monica", "to": "Phoebe", "value": 3 },
+  { "from": "Monica", "to": "Paul the wine guy", "value": 1 },
+  { "from": "Monica", "to": "Mr Geller", "value": 6 },
+  { "from": "Monica", "to": "Mrs Geller", "value": 5 },
+  { "from": "Monica", "to": "Pete", "value": 10 },
+  { "from": "Monica", "to": "Chip", "value": 1 },
+  { "from": "Monica", "to": "Timothy (Burke)", "value": 1 },
+  { "from": "Monica", "to": "Emily", "value": 1 },
+  { "from": "Monica", "to": "Dr. Roger", "value": 3 },
+  { "from": "Rachel", "to": "Chandler", "value": 7 },
+  { "from": "Rachel", "to": "Ross", "value": 80 },
+  { "from": "Rachel", "to": "Joey", "value": 30 },
+  { "from": "Rachel", "to": "Phoebe", "value": 6 },
+  { "from": "Rachel", "to": "Tag", "value": 4 },
+  { "from": "Rachel", "to": "Melissa", "value": 1 },
+  { "from": "Rachel", "to": "Gavin", "value": 2 },
+  { "from": "Chandler", "to": "Joey", "value": 1 },
+  { "from": "Chandler", "to": "Phoebe", "value": 7 },
+  { "from": "Chandler", "to": "Janice", "value": 11 },
+  { "from": "Chandler", "to": "Joanna", "value": 5 },
+  { "from": "Chandler", "to": "Kathy", "value": 7 },
+  { "from": "Chandler", "to": "Mr Bing", "value": 1 },
+  { "from": "Ross", "to": "Joey", "value": 3 },
+  { "from": "Ross", "to": "Phoebe", "value": 18 },
+  { "from": "Ross", "to": "Carol", "value": 10 },
+  { "from": "Ross", "to": "Mrs Geller", "value": 8 },
+  { "from": "Ross", "to": "Ben", "value": 6 },
+  { "from": "Ross", "to": "Emily", "value": 12 },
+  { "from": "Ross", "to": "Jill", "value": 1 },
+  { "from": "Ross", "to": "Elizabeth", "value": 8 },
+  { "from": "Ross", "to": "Aunt Millie", "value": 2 },
+  { "from": "Ross", "to": "Mona", "value": 11 },
+  { "from": "Ross", "to": "Emma", "value": 7 },
+  { "from": "Ross", "to": "Charlie", "value": 10 },
+  { "from": "Joey", "to": "Phoebe", "value": 6 },
+  { "from": "Joey", "to": "Janine", "value": 9 },
+  { "from": "Joey", "to": "Erin", "value": 1 },
+  { "from": "Joey", "to": "Cecilia", "value": 3 },
+  { "from": "Joey", "to": "Charlie", "value": 3 },
+  { "from": "Phoebe", "to": "David", "value": 14 },
+  { "from": "Phoebe", "to": "Roger", "value": 1 },
+  { "from": "Phoebe", "to": "Duncan", "value": 1 },
+  { "from": "Phoebe", "to": "Rob Dohnen", "value": 2 },
+  { "from": "Phoebe", "to": "Sergei", "value": 1 },
+  { "from": "Phoebe", "to": "Vince", "value": 2 },
+  { "from": "Phoebe", "to": "Mike", "value": 18 },
+  { "from": "Carol", "to": "Ben", "value": 1 },
+  { "from": "Carol", "to": "Susan", "value": 1 },
+  { "from": "Mr Geller", "to": "Mrs Geller", "value": 3 },
+  { "from": "Frank", "to": "Alice", "value": 5 }
+]);
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/javascript/flow-arc-horizontal/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "amcharts5-example-flow-arc-horizontal",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.4.0",
+    "source-map-loader": "^4.0.1",
+    "webpack": "^5.1.3",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack serve --mode development"
+  }
+}

package/examples/javascript/flow-arc-horizontal/webpack.config.js ADDED Viewed

@@ -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"
+    }]
+  }
+};

package/examples/javascript/flow-arc-vertical/README.md ADDED Viewed

@@ -0,0 +1,6 @@
+Steps to use
+============
+1. Run `yarn`
+2. Run `yarn start` for development, or `yarn build` for production

package/examples/javascript/flow-arc-vertical/index.css ADDED Viewed

@@ -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/flow-arc-vertical/index.html ADDED Viewed

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

package/examples/javascript/flow-arc-vertical/index.js ADDED Viewed

@@ -0,0 +1,91 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5flow from "@amcharts/amcharts5/flow";
+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 series
+// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/
+var series = root.container.children.push(am5flow.ArcDiagram.new(root, {
+  sourceIdField: "from",
+  targetIdField: "to",
+  valueField: "value",
+  orientation: "vertical"
+}));
+// Configure labels
+// https://www.amcharts.com/docs/v5/charts/flow-charts/arc-diagram/#Labels
+series.nodes.labels.template.setAll({
+  fontSize: "0.85em",
+  paddingLeft: 20,
+  paddingRight: 20,
+  width: 160
+});
+// Animated bullets
+series.bullets.push(function(_root, _series, dataItem) {
+  var bullet = am5.Bullet.new(root, {
+    locationY: Math.random(),
+    sprite: am5.Circle.new(root, {
+      radius: 2,
+      fill: dataItem.get("source").get("fill")
+    })
+  });
+  bullet.animate({
+    key: "locationY",
+    to: 1,
+    from: 0,
+    duration: Math.random() * 1000 + 2000,
+    loops: Infinity
+  });
+  return bullet;
+});
+// Set data
+// https://www.amcharts.com/docs/v5/charts/flow-charts/#Setting_data
+series.data.setAll([
+  { "from": "Monica", "to": "Rachel", "value": 4 },
+  { "from": "Monica", "to": "Chandler", "value": 63 },
+  { "from": "Monica", "to": "Ross", "value": 16 },
+  { "from": "Monica", "to": "Joey", "value": 9 },
+  { "from": "Rachel", "to": "Chandler", "value": 7 },
+  { "from": "Rachel", "to": "Ross", "value": 80 },
+  { "from": "Rachel", "to": "Joey", "value": 30 },
+  { "from": "Rachel", "to": "Phoebe", "value": 6 },
+  { "from": "Chandler", "to": "Phoebe", "value": 7 },
+  { "from": "Chandler", "to": "Janice", "value": 11 },
+  { "from": "Chandler", "to": "Joanna", "value": 5 },
+  { "from": "Chandler", "to": "Kathy", "value": 7 },
+  { "from": "Monica", "to": "Pete", "value": 10 },
+  { "from": "Ross", "to": "Joey", "value": 3 },
+  { "from": "Ross", "to": "Phoebe", "value": 18 },
+  { "from": "Ross", "to": "Carol", "value": 10 },
+  { "from": "Ross", "to": "Mrs Geller", "value": 8 },
+  { "from": "Ross", "to": "Emily", "value": 12 },
+  { "from": "Ross", "to": "Elizabeth", "value": 8 },
+  { "from": "Ross", "to": "Mona", "value": 11 },
+  { "from": "Joey", "to": "Phoebe", "value": 6 },
+  { "from": "Phoebe", "to": "David", "value": 14 },
+  { "from": "Phoebe", "to": "Mike", "value": 18 }
+]);
+// Make stuff animate on load
+series.appear(1000, 100);

package/examples/javascript/flow-arc-vertical/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "amcharts5-example-flow-arc-vertical",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.4.0",
+    "source-map-loader": "^4.0.1",
+    "webpack": "^5.1.3",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0"
+  },
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack serve --mode development"
+  }
+}

package/examples/javascript/flow-arc-vertical/webpack.config.js ADDED Viewed

@@ -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"
+    }]
+  }
+};

package/examples/javascript/flow-chord/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/flow-chord-directed/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord-directed",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/flow-chord-non-ribbon/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-chord-non-ribbon",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/flow-sankey/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-flow-sankey",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/gauge/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-gauge",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/gauge-bands/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-gauge-bands",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-force-directed/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-force-directed",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-pack/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-pack",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-partition/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-partition",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-sunburst/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-sunburst",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-tree/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-tree",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-treemap/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-hierarchy-treemap",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.3.16",
+    "@amcharts/amcharts5": "^5.4.0",
     "source-map-loader": "^4.0.1",
     "webpack": "^5.1.3",
     "webpack-cli": "^5.1.1",

package/examples/javascript/hierarchy-voronoi-treemap/README.md ADDED Viewed

@@ -0,0 +1,6 @@
+Steps to use
+============
+1. Run `yarn`
+2. Run `yarn start` for development, or `yarn build` for production

package/examples/javascript/hierarchy-voronoi-treemap/index.css ADDED Viewed

@@ -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/hierarchy-voronoi-treemap/index.html ADDED Viewed

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