@amcharts/amcharts5 5.0.0-beta.32 → 5.0.0-beta.36

package/examples/typescript/radar-column-iwatch-style/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-column-iwatch-style",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/radar-heat-map/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-heat-map",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/radar-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-line",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/radar-time-line/index.ts

@@ -9,10 +9,16 @@ import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
 const root = am5.Root.new("chartdiv");
 
 
+// Create custom theme
+const myTheme = am5.Theme.new(root);
+myTheme.rule("Label").set("fontSize", 10);
+myTheme.rule("Grid").set("strokeOpacity", 0.06);
+
 // Set themes
 // https://www.amcharts.com/docs/v5/concepts/themes/
 root.setThemes([
-  am5themes_Animated.new(root)
+  am5themes_Animated.new(root),
+  myTheme
 ]);
 
 var temperatures = {
@@ -133,8 +139,6 @@ var temperatures = {
 }
 
 // Modify defaults
-root.defaultTheme.rule("Label").set("fontSize", 10);
-root.defaultTheme.rule("Grid").set("strokeOpacity", 0.06);
 root.numberFormatter.set("numberFormat", "+#.0°C|#.0°C|0.0°C");
 
 var startYear = 1973;
@@ -218,7 +222,7 @@ const series = chart.series.push(am5radar.RadarColumnSeries.new(root, {
 series.columns.template.set("strokeOpacity", 0);
 
 const tooltip = series.set("tooltip", am5.Tooltip.new(root, {}));
-tooltip.label.set("text", "{categoryX}:{valueY}");
+tooltip.label.set("text", "{categoryX}: {valueY}");
 
 
 // Set up heat rules

package/examples/typescript/radar-time-line/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-radar-time-line",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/sliced-funnel/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-sliced-funnel",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/sliced-pictorial-stacked/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-sliced-pictorial-stacked",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/sliced-pyramid/package.json

@@ -3,7 +3,7 @@
   "name": "amcharts5-example-sliced-pyramid",
   "version": "0.1.0",
   "devDependencies": {
-    "@amcharts/amcharts5": "^5.0.0-beta.32",
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
     "source-map-loader": "^3.0.0",
     "ts-loader": "^9.2.2",
     "typescript": "^4.3.4",

package/examples/typescript/venn-diagram/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/venn-diagram/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/venn-diagram/index.html

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

package/examples/typescript/venn-diagram/index.ts

@@ -0,0 +1,59 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5venn from "@amcharts/amcharts5/venn";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+
+// Create root
+let root = am5.Root.new("chartdiv");
+
+// Set themes
+root.setThemes([
+  am5themes_Animated.new(root)
+]);
+
+// Create wrapper container
+let container = root.container.children.push(am5.Container.new(root, {
+  width: am5.p100,
+  height: am5.p100,
+  layout: root.verticalLayout
+}));
+
+// Create venn series
+let chart = container.children.push(am5venn.Venn.new(root, {
+  categoryField: "name",
+  valueField: "value",
+  intersectionsField: "sets",
+  paddingTop: 40,
+  paddingBottom: 40,
+  paddingLeft: 40,
+  paddingRight: 40
+}));
+
+// Set data
+chart.data.setAll([
+  { name: "A", value: 10 },
+  { name: "B", value: 10 },
+  { name: "C", value: 5 },
+  { name: "X", value: 4, sets: ["A", "B"] },
+  { name: "Y", value: 2, sets: ["A", "C"] },
+  { name: "Z", value: 2, sets: ["B", "C"] },
+  { name: "Q", value: 1, sets: ["A", "B", "C"]
+}]);
+
+// Set tooltip content
+chart.slices.template.set("tooltipText", "{category}: {value}");
+
+// Set up hover appearance
+chart.hoverGraphics.setAll({
+  strokeDasharray: [3, 3],
+  stroke: am5.color(0xffffff),
+  strokeWidth: 2
+});
+
+// Add legend
+let legend = container.children.push(
+  am5.Legend.new(root, {
+    centerX: am5.p50,
+    x: am5.p50
+  })
+);
+legend.data.setAll(chart.dataItems);

package/examples/typescript/venn-diagram/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-venn-diagram",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
+    "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/venn-diagram/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/venn-diagram/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/wordcloud-with-data/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/wordcloud-with-data/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/wordcloud-with-data/index.html

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

package/examples/typescript/wordcloud-with-data/index.ts

@@ -0,0 +1,115 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5wc from "@amcharts/amcharts5/wc";
+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)
+]);
+
+
+// Add wrapper container
+let container = root.container.children.push(am5.Container.new(root, {
+  width: am5.percent(100),
+  height: am5.percent(100),
+  layout: root.verticalLayout
+}));
+
+
+// Add chart title
+let title = container.children.push(am5.Label.new(root, {
+  text: "Most popular languages on StackOverflow",
+  fontSize: 20,
+  x: am5.percent(50),
+  centerX: am5.percent(50)
+}));
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/word-cloud/
+var series = container.children.push(am5wc.WordCloud.new(root, {
+  categoryField: "tag",
+  valueField: "weight",
+  calculateAggregates: true // this is needed for heat rules to work
+}));
+
+
+// Set up heat rules
+// https://www.amcharts.com/docs/v5/charts/word-cloud/#Via_heat_rules
+series.set("heatRules", [{
+  target: series.labels.template,
+  dataField: "value",
+  min: am5.color(0xFFD4C2),
+  max: am5.color(0xFF621F),
+  key: "fill"
+}]);
+
+
+// Configure labels
+series.labels.template.setAll({
+  paddingTop: 5,
+  paddingBottom: 5,
+  paddingLeft: 5,
+  paddingRight: 5,
+  fontFamily: "Courier New",
+  cursorOverStyle: "pointer"
+});
+
+
+// Add click event on words
+// https://www.amcharts.com/docs/v5/charts/word-cloud/#Events
+series.labels.template.events.on("click", (ev: any) => {
+  const category = ev.target.dataItem.get("category");
+  window.open("https://stackoverflow.com/questions/tagged/" + encodeURIComponent(category));
+});
+
+
+// Data from:
+// https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-programming-scripting-and-markup-languages
+series.data.setAll([
+  { tag: "JavaScript", weight: 64.96 },
+  { tag: "HTML/CSS", weight: 56.07 },
+  { tag: "Python", weight: 48.24 },
+  { tag: "SQL", weight: 47.08 },
+  { tag: "Java", weight: 35.35 },
+  { tag: "Node.js", weight: 33.91 },
+  { tag: "TypeScript", weight: 30.19 },
+  { tag: "C#", weight: 27.86 },
+  { tag: "Bash/Shell", weight: 27.13 },
+  { tag: "C++", weight: 24.31 },
+  { tag: "PHP", weight: 21.98 },
+  { tag: "C", weight: 21.01 },
+  { tag: "PowerShell", weight: 10.75 },
+  { tag: "Go", weight: 9.55 },
+  { tag: "Kotlin", weight: 8.32 },
+  { tag: "Rust", weight: 7.03 },
+  { tag: "Ruby", weight: 6.75 },
+  { tag: "Dart", weight: 6.02 },
+  { tag: "Assembly", weight: 5.61 },
+  { tag: "Swift", weight: 5.1 },
+  { tag: "R", weight: 5.07 },
+  { tag: "VBA", weight: 4.66 },
+  { tag: "Matlab", weight: 4.66 },
+  { tag: "Groovy", weight: 3.01 },
+  { tag: "Objective-C", weight: 2.8 },
+  { tag: "Scala", weight: 2.6 },
+  { tag: "Perl", weight: 2.46 },
+  { tag: "Haskell", weight: 2.12 },
+  { tag: "Delphi", weight: 2.1 },
+  { tag: "Clojure", weight: 1.88 },
+  { tag: "Elixir", weight: 1.74 },
+  { tag: "LISP", weight: 1.33 },
+  { tag: "Julia", weight: 1.29 },
+  { tag: "F#", weight: 0.97 },
+  { tag: "Erlang", weight: 0.79 },
+  { tag: "APL", weight: 0.65 },
+  { tag: "Crystal", weight: 0.56 },
+  { tag: "COBOL", weight: 0.53 },
+]);

package/examples/typescript/wordcloud-with-data/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-wordcloud-with-data",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
+    "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/wordcloud-with-data/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/wordcloud-with-data/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/wordcloud-with-text/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/wordcloud-with-text/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/wordcloud-with-text/index.html

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

package/examples/typescript/wordcloud-with-text/index.ts

@@ -0,0 +1,35 @@
+import * as am5 from "@amcharts/amcharts5";
+import * as am5wc from "@amcharts/amcharts5/wc";
+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)
+]);
+
+
+// Add series
+// https://www.amcharts.com/docs/v5/charts/word-cloud/
+var series = root.container.children.push(am5wc.WordCloud.new(root, {
+  maxCount: 150,
+  maxFontSize: am5.percent(25),
+  minWordLength: 2,
+  text: "Though yet of Hamlet our dear brother's death The memory be green, and that it us befitted To bear our hearts in grief and our whole kingdom To be contracted in one brow of woe, Yet so far hath discretion fought with nature That we with wisest sorrow think on him, Together with remembrance of ourselves. Therefore our sometime sister, now our queen, The imperial jointress to this warlike state, Have we, as 'twere with a defeated joy,-- With an auspicious and a dropping eye, With mirth in funeral and with dirge in marriage, In equal scale weighing delight and dole,-- Taken to wife: nor have we herein barr'd Your better wisdoms, which have freely gone With this affair along. For all, our thanks. Now follows, that you know, young Fortinbras, Holding a weak supposal of our worth, Or thinking by our late dear brother's death Our state to be disjoint and out of frame, Colleagued with the dream of his advantage, He hath not fail'd to pester us with message, Importing the surrender of those lands Lost by his father, with all bonds of law, To our most valiant brother. So much for him. Now for ourself and for this time of meeting: Thus much the business is: we have here writ To Norway, uncle of young Fortinbras,-- Who, impotent and bed-rid, scarcely hears Of this his nephew's purpose,--to suppress His further gait herein; in that the levies, The lists and full proportions, are all made Out of his subject: and we here dispatch You, good Cornelius, and you, Voltimand, For bearers of this greeting to old Norway; Giving to you no further personal power To business with the king, more than the scope Of these delated articles allow. Farewell, and let your haste commend your duty. Tis sweet and commendable in your nature, Hamlet,To give these mourning duties to your father: But, you must know, your father lost a father; That father lost, lost his, and the survivor bound In filial obligation for some term To do obsequious sorrow: but to persever In obstinate condolement is a course Of impious stubbornness; 'tis unmanly grief; It shows a will most incorrect to heaven, A heart unfortified, a mind impatient, An understanding simple and unschool'd: For what we know must be and is as common As any the most vulgar thing to sense, Why should we in our peevish opposition Take it to heart? Fie! 'tis a fault to heaven, A fault against the dead, a fault to nature, To reason most absurd: whose common theme Is death of fathers, and who still hath cried, From the first corse till he that died to-day, 'This must be so.' We pray you, throw to earth This unprevailing woe, and think of us As of a father: for let the world take note, You are the most immediate to our throne; And with no less nobility of love Than that which dearest father bears his son, Do I impart toward you. For your intent In going back to school in Wittenberg, It is most retrograde to our desire: And we beseech you, bend you to remain Here, in the cheer and comfort of our eye, Our chiefest courtier, cousin, and our son.",
+}));
+
+
+// Configure labels
+series.labels.template.setAll({
+  paddingTop: 5,
+  paddingBottom: 5,
+  paddingLeft: 5,
+  paddingRight: 5,
+  fontFamily: "Courier New"
+});

package/examples/typescript/wordcloud-with-text/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "amcharts5-example-wordcloud-with-text",
+  "version": "0.1.0",
+  "devDependencies": {
+    "@amcharts/amcharts5": "^5.0.0-beta.36",
+    "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/wordcloud-with-text/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/wordcloud-with-text/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-100-percent-stacked-column/index.ts

@@ -100,7 +100,7 @@ function makeSeries(name: string, fieldName: string) {
   }));
 
   series.columns.template.setAll({
-    tooltipText: "{name}, {categoryX}:{valueYTotalPercent.formatNumber('#.#')}%",
+    tooltipText: "{name}, {categoryX}: {valueYTotalPercent.formatNumber('#.#')}%",
     tooltipY: am5.percent(10)
   });
   series.data.setAll(data);