@amcharts/amcharts5 5.3.17 → 5.4.1

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

@@ -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

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "name": "amcharts5-example-flow-arc-vertical",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.4.1",
+    "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

@@ -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

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

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

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

package/examples/javascript/flow-chord-non-ribbon/index.js

@@ -53,12 +53,18 @@ series.nodes.labels.template.setAll({
   radius: -5
 });
 
-series.nodes.bullets.push((_root, _series, dataItem) => {
+series.nodes.labels.template.states.create("disabled", { fill: am5.color(0xffffff) });
+
+series.nodes.bullets.push(function(_root, _series, dataItem) {
+  const sprite = am5.Circle.new(root, {
+    radius: 20,
+    fill: dataItem.get("fill")
+  });
+
+  sprite.states.create("hidden", { fill: root.interfaceColors.get("disabled") })
+
   return am5.Bullet.new(root, {
-    sprite: am5.Circle.new(root, {
-      radius: 20,
-      fill: dataItem.get("fill")
-    })
+    sprite: sprite
   });
 });
 

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

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

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

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

package/examples/javascript/gauge/package.json

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/examples/javascript/hierarchy-voronoi-treemap/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/hierarchy-voronoi-treemap/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/hierarchy-voronoi-treemap/index.html

@@ -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>