Version 5.4.1

examples/shared/flow-chord-non-ribbon/index.ts

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

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@amcharts/amcharts5",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "author": "amCharts <contact@amcharts.com> (https://www.amcharts.com/)",
   "description": "amCharts 5",
   "homepage": "https://www.amcharts.com/",

packages/shared/CHANGELOG.md

@@ -5,6 +5,22 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/).
 Please note, that this project, while following numbering syntax, it DOES NOT
 adhere to [Semantic Versioning](http://semver.org/spec/v2.0.0.html) rules.
 
+## [5.4.ą] - 2023-07-18
+
+### Added
+- All Flow (Sankey, Chord and Arc) nodes can be toggled (on by default). [More info](https://www.amcharts.com/docs/v5/charts/flow-charts/#Node_toggling).
+- New `Flow` settings added: `hiddenSize` and `minHiddenValue`. [More info](https://www.amcharts.com/docs/v5/charts/flow-charts/#Node_toggling).
+- Deviation added to editable `BolingerBand` settings (`StockChart`).
+
+### Changed
+- `Chord`'s default value of `"sort"` changed from `"descending"` to `"none"`.  This change was necessary for the new feature of [toggling nodes](https://www.amcharts.com/docs/v5/charts/flow-charts/#Node_toggling).
+
+### Fixed
+- `Label` with wrapping/truncation, containing only symbols like question mark could make the whole chart break in a dead loop.
+- `exclude`/`include` settings on `MapSeries` was being ignored when new data was set for the series.
+- `LineSeries` was not being included in the caluclation of min/max of the vertical `ValueAxis` if it did not have any data points in current zoom scope of the horizontal `DateAxis`.
+
+
 ## [5.4.0] - 2023-07-04
 
 ### Added

src/.internal/charts/flow/Flow.ts

@@ -90,17 +90,44 @@ export interface IFlowSettings extends ISeriesSettings {
 	nodePadding?: number;
 
 	/**
-	 * Minimum size of the node/link.
+	 * Minimum size of the link.
 	 * 
 	 * It's a relative value to the sum of all values in the series. If set,
 	 * this relative value will be used for small value nodes when calculating
 	 * their size. For example, if it's set to `0.01`, small nodes will be
 	 * sized like their value is 1% of the total sum of all values in series.
-	 *
+	 * 
+	 * @default 0
 	 * @since 5.1.5
 	 */
 	minSize?: number;
 
+	/**
+	 * Relative size of hidden links.
+	 * 
+	 * Links are hidden when user clicks on nodes (if `toggleKey` on nodes is set
+	 * to `"disabled"`).
+	 * 
+	 * This allows hidden node to remain visible so that user could click on it
+	 * again to show it and its links.
+	 * 
+	 * @default 0.05
+	 * @see {@link https://www.amcharts.com/docs/v5/charts/flow-charts/#Node_toggling} for more info
+	 * @since 5.4.1
+	 */
+	hiddenSize?: number;
+
+	/**
+	 * Minimum value of hidden links.
+	 * 
+	 * Links are hidden when user clicks on nodes (if `toggleKey` on nodes is set
+	 * to `"disabled"`).
+	 * 
+	 * @default 0
+	 * @see {@link https://www.amcharts.com/docs/v5/charts/flow-charts/#Node_toggling} for more info
+	 * @since 5.4.1
+	 */
+	minHiddenValue?: number;
 }
 
 export interface IFlowPrivate extends ISeriesPrivate {
@@ -146,7 +173,7 @@ export abstract class Flow extends Series {
 	protected _nodesData: d3sankey.SankeyNodeMinimal<{}, {}>[] = [];
 	protected _linksData: { source: d3sankey.SankeyNodeMinimal<{}, {}>, target: d3sankey.SankeyNodeMinimal<{}, {}>, value: number }[] = [];
 	protected _index = 0;
-	protected _nodesDataSet:boolean = false;
+	protected _nodesDataSet: boolean = false;
 
 	protected _linksByIndex: { [index: string]: any } = {};
 	protected _afterNew() {
@@ -247,12 +274,12 @@ export abstract class Flow extends Series {
 	}
 
 	protected _onDataClear() {
-		if(!this.nodes._userDataSet){
+		if (!this.nodes._userDataSet) {
 			this.nodes.data.setAll([]);
 			this.nodes._userDataSet = false;
 		}
 
-	}		
+	}
 
 	public _prepareChildren() {
 		super._prepareChildren();
@@ -463,7 +490,12 @@ export abstract class Flow extends Series {
 
 		const easing = hiddenState.get(stateAnimationEasing, this.get(stateAnimationEasing));
 
-		promises.push(dataItem.animate({ key: "valueWorking" as any, to: 0, duration: duration, easing: easing }).waitForStop());
+		promises.push(dataItem.animate({
+			key: "valueWorking" as any,
+			to: Math.max(this.get("minHiddenValue", 0), this.get("hiddenSize", 0) * dataItem.get("value")),
+			duration: duration,
+			easing: easing
+		}).waitForStop());
 
 		const linkGraphics = dataItem.get("link");
 		linkGraphics.hide();

src/.internal/charts/flow/FlowDefaultTheme.ts

@@ -31,7 +31,10 @@ export class FlowDefaultTheme extends Theme {
 			paddingLeft: 10,
 			paddingRight: 10,
 			paddingTop: 10,
-			paddingBottom: 10
+			paddingBottom: 10,
+			hiddenSize: 0.05,
+			minSize: 0,
+			minHiddenValue: 0
 		});
 
 		r("FlowNodes").setAll({
@@ -40,15 +43,25 @@ export class FlowDefaultTheme extends Theme {
 			legendValueText: "{sumOutgoing.formatNumber('#.#')}"
 		});
 
+
 		r("FlowNode").setAll({
+			setStateOnChildren: true,
+			cursorOverStyle: "pointer",
+			toggleKey: "disabled"
+		})
 
-		});
+
+		r("FlowNode").states.create("disabled", {}); // do not remove
 
 		r("FlowNode", ["unknown"]).setAll({
 			draggable: false,
 			opacity: 0
 		});
 
+		r("Label", ["flow"]).states.create("disabled", {
+			fill: ic.get("disabled")
+		})
+
 		r("RadialLabel", ["flow", "node"]).setAll({
 			text: "{name}",
 			populateText: true
@@ -134,6 +147,10 @@ export class FlowDefaultTheme extends Theme {
 			cornerRadiusBR: 0
 		});
 
+		r("RoundedRectangle", ["shape"]).states.create("disabled", {
+			fill: ic.get("disabled")
+		})
+
 		r("SankeyLink").setAll({
 			controlPointDistance: 0.2
 		});
@@ -174,6 +191,7 @@ export class FlowDefaultTheme extends Theme {
 			paddingTop: 15
 		});
 
+
 		/**
 		 * ------------------------------------------------------------------------
 		 * charts/flow: Chord
@@ -185,7 +203,7 @@ export class FlowDefaultTheme extends Theme {
 			nodeWidth: 10,
 			padAngle: 1,
 			startAngle: 0,
-			sort: "descending"
+			sort:"none"
 		});
 
 		r("ChordDirected").setAll({
@@ -213,6 +231,10 @@ export class FlowDefaultTheme extends Theme {
 			cornerRadius: 0
 		})
 
+		r("Slice", ["shape"]).states.create("disabled", {
+			fill: ic.get("disabled")
+		})
+
 		r("RadialLabel", ["chord", "node"]).setAll({
 			radius: 5,
 			textType: "circular"
@@ -281,6 +303,10 @@ export class FlowDefaultTheme extends Theme {
 			tooltipText: "{name}: {sum}"
 		});
 
+		r("Circle", ["arcdiagram", "node", "shape"]).states.create("disabled", {
+			fill: ic.get("disabled")
+		})
+
 		{
 			const rule = r("ArcDiagramLink", ["link", "shape"]);
 
@@ -295,7 +321,7 @@ export class FlowDefaultTheme extends Theme {
 		}
 
 		r("ArcDiagramLink", ["link", "shape"]).states.create("hover", {
-			strokeOpacity: 1			
+			strokeOpacity: 1
 		});
 
 		r("Label", ["arcdiagram", "node"]).setAll({

src/.internal/charts/flow/FlowNodes.ts

@@ -157,7 +157,7 @@ export abstract class FlowNodes extends Series {
 	 */
 	public readonly labels: ListTemplate<Label> = new ListTemplate(
 		Template.new({}),
-		() => Label._new(this._root, {}, [this.labels.template])
+		() => Label._new(this._root, { themeTags: ["flow"] }, [this.labels.template])
 	);
 
 	/**
@@ -233,6 +233,21 @@ export abstract class FlowNodes extends Series {
 		node._setDataItem(dataItem);
 		node.series = this;
 
+		node.events.on("click", (e) => {
+			const node = e.target;
+			if (node.get("toggleKey") == "disabled") {
+				const dataItem = node.dataItem as DataItem<IFlowNodesDataItem>;
+				if (dataItem) {
+					if (dataItem.isHidden()) {
+						this.enableDataItem(dataItem);
+					}
+					else {
+						this.disableDataItem(dataItem);
+					}
+				}
+			}
+		})
+
 		dataItem.set("node", node);
 		return node;
 	}
@@ -288,6 +303,12 @@ export abstract class FlowNodes extends Series {
 	public async showDataItem(dataItem: DataItem<this["_dataItemSettings"]>, duration?: number): Promise<void> {
 		const promises = [super.showDataItem(dataItem, duration)];
 		const flow = this.flow;
+
+		const node = dataItem.get("node");
+		if (node) {
+			node.show();
+		}
+
 		if (flow) {
 
 			let label = dataItem.get("label");
@@ -325,6 +346,12 @@ export abstract class FlowNodes extends Series {
 		const promises = [super.hideDataItem(dataItem, duration)];
 
 		const flow = this.flow;
+
+		const node = dataItem.get("node");
+		if (node) {
+			node.hide();
+		}
+
 		if (flow) {
 
 			let label = dataItem.get("label");
@@ -344,12 +371,88 @@ export abstract class FlowNodes extends Series {
 			links = dataItem.get("incomingLinks");
 
 			if (links) {
+				$array.each(links, (link) => {
+					flow.hideDataItem(link, duration);
+				})
+			}
+		}
+		await promises;
+	}
+
+	/**
+	 * Shows node's data item.
+	 *
+	 * @param   dataItem  Data item
+	 * @param   duration  Animation duration in milliseconds
+	 * @return            Promise
+	 */
+	public async enableDataItem(dataItem: DataItem<this["_dataItemSettings"]>, duration?: number): Promise<void> {
+		const promises = [super.showDataItem(dataItem, duration)];
+		const flow = this.flow;
+
+		if (flow) {
+
+			let label = dataItem.get("label");
+
+			if (label) {
+				label.set("disabled", false);
+			}
+
+			let links = dataItem.get("outgoingLinks");
+			if (links) {
+				$array.each(links, (link) => {
+					flow.showDataItem(link, duration);
+				})
+			}
+
+			links = dataItem.get("incomingLinks");
+			if (links) {
+				$array.each(links, (link) => {
+					flow.showDataItem(link, duration);
+				})
+			}
+		}
+
+		await promises;
+	}
+
+	/**
+	 * Hides series's data item.
+	 *
+	 * @param   dataItem  Data item
+	 * @param   duration  Animation duration in milliseconds
+	 * @return            Promise
+	 */
+	public async disableDataItem(dataItem: DataItem<this["_dataItemSettings"]>, duration?: number): Promise<void> {
+		const promises = [super.hideDataItem(dataItem, duration)];
+
+		const flow = this.flow;
+
+		if (flow) {
+
+			let label = dataItem.get("label");
+
+			if (label) {
+				label.set("disabled", true);
+			}
+
+			let links = dataItem.get("outgoingLinks");
+
+			if (links) {
+				$array.each(links, (link) => {
+					flow.hideDataItem(link, duration);
+				})
+			}
+
+			links = dataItem.get("incomingLinks");
 
+			if (links) {
 				$array.each(links, (link) => {
 					flow.hideDataItem(link, duration);
 				})
 			}
 		}
 		await promises;
 	}
+
 }

src/.internal/charts/map/MapSeries.ts

@@ -402,5 +402,6 @@ export abstract class MapSeries extends Series {
 	protected _onDataClear() {
 		super._onDataClear();
 		this._geoJSONparsed = false;
-	}
+		this._markDirtyKey("exclude");
+	}	
 }