Version 5.8.0

examples/shared/stock-chart-comparing-stocks/index.ts

@@ -335,7 +335,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

examples/shared/stock-chart-data-granularity/index.ts

@@ -225,7 +225,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

examples/shared/stock-chart-data-grouping/index.ts

@@ -267,7 +267,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

examples/shared/stock-chart-intraday/index.ts

@@ -208,7 +208,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

examples/shared/stock-chart-live/index.ts

@@ -200,6 +200,7 @@ function getNewSettings(series) {
       "xAxis",
       "yAxis",
       "legendValueText",
+      "legendRangeValueText", 
       "stroke",
       "fill"
     ],

examples/shared/stock-chart-volume-separate-panel/index.ts

@@ -252,7 +252,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

examples/shared/stock-chart/index.ts

@@ -210,7 +210,7 @@ seriesSwitcher.events.on("selected", function(ev) {
 
 function getNewSettings(series: am5xy.XYSeries) {
   let newSettings: any = [];
-  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "stroke", "fill"], function(setting: any) {
+  am5.array.each(["name", "valueYField", "highValueYField", "lowValueYField", "openValueYField", "calculateAggregates", "valueXField", "xAxis", "yAxis", "legendValueText", "legendRangeValueText", "stroke", "fill"], function(setting: any) {
     newSettings[setting] = series.get(setting);
   });
   return newSettings;

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@amcharts/amcharts5",
-  "version": "5.7.7",
+  "version": "5.8.0",
   "author": "amCharts <[email protected]> (https://www.amcharts.com/)",
   "description": "amCharts 5",
   "homepage": "https://www.amcharts.com/",

packages/shared/CHANGELOG.md

@@ -5,6 +5,34 @@ 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.8.0] - 2024-02-01
+
+### Added
+- New container type `ZoomableContainer` added, which allows adding zoom capabilities to virtually any chart. [More info](https://www.amcharts.com/docs/v5/concepts/common-elements/containers/#Zoomable_container).
+- New class `ZoomTools` added. Can be used to quickly add zoom support for elements compatible with `IZoomable` interface, e.g. `ZoomableContainer`.
+- New read-only property of `DrawingControl`: `drawingSeries`. Contains an object where key is a drawing tool name and values are array with references to actual drawing series.
+
+### Changed
+- Default value for `strokeOpacity` for the grid line of a `StockChart` changed from `0` to `0.4` so that it would differ from regular grid lines.
+
+### Fixed
+- Resizing stock chart's panels after moving them up/down was not working properly.
+- `Hierarchy.addChildData` was duplicating node's children which were added before.
+- If `topDepth` was set to `1` on `Partition`, initially the chart was showing not all levels of nodes.
+- When clicking on particular partitions of a `Partion` chart, zoom animation was not playing.
+- `DateRangeSelector` was showing extra day in automatically-calculated end date.
+- `DateRangeSelector` was zooming to the start of the selected day, instead of end.
+- Tooltip background color passed to `HeatLegend.showValue(value, text, color)` was being ignored.
+- `ClusteredPointSeries` was not showing charts if they were added to clustered bullets.
+- Fixed issue with `DrawingControl` which was unnecessarily duplicating drawing series with each tool selection / API call.
+- Using "1M" button in `PeriodSelector` was not always selecting full month.
+- Restoring drawings with `DrawingControl.unserializeDrawings()` will now correctly update indexes of the restored drawings based on current drawing counter.
+- In some cases `StockChart` was taking a data item which was just outside of zoom range when calculating aggregate values for its series, affecting percent change values and some other aggregates.
+- Legend value was not being updated when series axis' range changed. This caused `legendRangeLabelText` to not being updated (if set) when chart was being zoomed-in/out.
+- If a type of `StockChart` series was changed with data grouping enabled, some duplicate candlesticks or ohlc sticks were displayed until first zoom.
+- In some rare cases chart would show incorrect last segment of a `LineSeries` when in percent mode.
+
+
 ## [5.7.7] - 2024-01-18
 
 ### Added

src/.internal/charts/hierarchy/Hierarchy.ts

@@ -544,18 +544,29 @@ export abstract class Hierarchy extends Series {
 		let depth = dataItem.get("depth");
 
 		$array.each(childData, (child) => {
-			const childDataItem = new DataItem(this, child, this._makeDataItem(child));
+			let found = false;
+			$array.eachContinue(children, (dataItem) => {
+				if (dataItem.dataContext == child) {
+					found = true;
+					return false;
+				}
+				return true;
+			})
 
-			children.push(childDataItem);
+			if (!found) {
+				const childDataItem = new DataItem(this, child, this._makeDataItem(child));
 
-			childDataItem.setRaw("parent", dataItem);
-			childDataItem.setRaw("depth", depth + 1);
+				children.push(childDataItem);
 
-			if (childDataItem.get("fill") == null) {
-				childDataItem.setRaw("fill", dataItem.get("fill"));
-			}
+				childDataItem.setRaw("parent", dataItem);
+				childDataItem.setRaw("depth", depth + 1);
+
+				if (childDataItem.get("fill") == null) {
+					childDataItem.setRaw("fill", dataItem.get("fill"));
+				}
 
-			this.processDataItem(childDataItem);
+				this.processDataItem(childDataItem);
+			}
 		})
 	}
 
@@ -890,9 +901,9 @@ export abstract class Hierarchy extends Series {
 				this.enableDataItem(this.dataItems[0], downDepth, 0);
 			}
 
-			this._root.events.once("frameended", ()=>{
+			this._root.events.once("frameended", () => {
 				this._zoom(dataItem);
-			})			
+			})
 		}
 	}
 

src/.internal/charts/hierarchy/Partition.ts

@@ -61,6 +61,10 @@ export interface IPartitionSettings extends IHierarchySettings {
 	 */
 	orientation?: "horizontal" | "vertical";
 
+	/**
+	 * @ignore
+	 */
+	_d?:number;
 }
 
 export interface IPartitionPrivate extends IHierarchyPrivate {
@@ -73,8 +77,7 @@ export interface IPartitionPrivate extends IHierarchyPrivate {
 	/**
 	 * Current vertical scale.
 	 */
-	scaleY?: number;
-
+	scaleY?: number;	
 }
 
 /**
@@ -286,7 +289,7 @@ export class Partition extends Hierarchy {
 		const maxDepth = this.getPrivate("maxDepth", 1);
 		const levelHeight = height / (maxDepth + 1);
 		const levelWidth = width / (maxDepth + 1);
-		const initialDepth = Math.min(this.get("initialDepth", 1), maxDepth - topDepth);
+		const initialDepth = Math.min(this.get("initialDepth", 1), maxDepth)// - topDepth);
 
 		let downDepth = this._currentDownDepth;
 		if (downDepth == null) {
@@ -344,8 +347,9 @@ export class Partition extends Hierarchy {
 		}
 
 		this.animatePrivate({ key: "scaleX", to: scaleX, duration: duration, easing: easing });
-		this.animatePrivate({ key: "scaleY", to: scaleY, duration: duration, easing: easing });
+		this.animatePrivate({ key: "scaleY", to: scaleY, duration: duration, easing: easing });		
 
+		this.animate({key:"_d", from:0, to:1, duration: duration, easing: easing })
 		this.nodesContainer.animate({ key: "x", to: -x0 * scaleX, duration: duration, easing: easing });
 		this.nodesContainer.animate({ key: "y", to: -y0 * scaleY, duration: duration, easing: easing });
 	}

src/.internal/charts/map/ClusteredPointSeries.ts

@@ -139,65 +139,70 @@ export class ClusteredPointSeries extends MapPointSeries {
 
 	protected _spiral: Array<{ x: number, y: number }> = [];
 
+	protected _clusterDone:boolean = false;
+
 	protected _afterNew() {
 		this.fields.push("groupId");
 		this._setRawDefault("groupIdField", "groupId");
 
 		super._afterNew();
 	}
 
-	public _updateChildren() {
-		super._updateChildren();
+	public _prepareChildren() {
+		super._prepareChildren();
 
-		if (this.isDirty("scatterRadius")) {
-			this._spiral = $math.spiralPoints(0, 0, 300, 300, 0, 3, 3, 0, 0)
-		}
+		if(!this._clusterDone){
+			if (this.isDirty("scatterRadius")) {
+				this._spiral = $math.spiralPoints(0, 0, 300, 300, 0, 3, 3, 0, 0)
+			}
 
-		const groups: { [index: string]: Array<DataItem<IClusteredPointSeriesDataItem>> } = {};
-		// distribute to groups
-		$array.each(this.dataItems, (dataItem) => {
-			const groupId = dataItem.get("groupId", "_default");
+			const groups: { [index: string]: Array<DataItem<IClusteredPointSeriesDataItem>> } = {};
+			// distribute to groups
+			$array.each(this.dataItems, (dataItem) => {
+				const groupId = dataItem.get("groupId", "_default");
 
-			if (!groups[groupId]) {
-				groups[groupId] = [];
-			}
-			groups[groupId].push(dataItem);
-		})
+				if (!groups[groupId]) {
+					groups[groupId] = [];
+				}
+				groups[groupId].push(dataItem);
+			})
 
-		this._scatterIndex = -1;
-		this._scatters = [];
-		this._clusterIndex = -1;
-		this._clusters = [];
+			this._scatterIndex = -1;
+			this._scatters = [];
+			this._clusterIndex = -1;
+			this._clusters = [];
 
-		$array.each(this.clusteredDataItems, (dataItem) => {
-			dataItem.setRaw("children", undefined);
-		})
+			$array.each(this.clusteredDataItems, (dataItem) => {
+				dataItem.setRaw("children", undefined);
+			})
 
-		$array.each(this.dataItems, (dataItem) => {
-			dataItem.setRaw("cluster", undefined);
-		})
+			$array.each(this.dataItems, (dataItem) => {
+				dataItem.setRaw("cluster", undefined);
+			})
 
-		$object.each(groups, (_key, group) => {
-			this._scatterGroup(group);
-		})
+			$object.each(groups, (_key, group) => {
+				this._scatterGroup(group);
+			})
 
-		$object.each(groups, (_key, group) => {
-			this._clusterGroup(group);
-		})
+			$object.each(groups, (_key, group) => {
+				this._clusterGroup(group);
+			})
 
-		$array.each(this.dataItems, (dataItem) => {
-			if (!dataItem.get("cluster")) {
-				const bullets = dataItem.bullets;
-				if (bullets) {
-					$array.each(bullets, (bullet) => {
-						const sprite = bullet.get("sprite");
-						if (sprite) {
-							sprite.set("forceHidden", false);
-						}
-					})
+			$array.each(this.dataItems, (dataItem) => {
+				if (!dataItem.get("cluster")) {
+					const bullets = dataItem.bullets;
+					if (bullets) {
+						$array.each(bullets, (bullet) => {
+							const sprite = bullet.get("sprite");
+							if (sprite) {
+								sprite.set("forceHidden", false);
+							}
+						})
+					}
 				}
-			}
-		})
+			})
+			this._clusterDone = true;
+		}
 	}
 
 	/**
@@ -328,7 +333,7 @@ export class ClusteredPointSeries extends MapPointSeries {
 			}
 		})
 	}
-
+	
 	protected _onDataClear() {
 		super._onDataClear();
 
@@ -365,6 +370,11 @@ export class ClusteredPointSeries extends MapPointSeries {
 		}
 	}
 
+	public _clearDirty(): void {
+		super._clearDirty();
+		this._clusterDone = false;	
+	}
+
 	protected _scatterGroup(dataItems: Array<DataItem<IClusteredPointSeriesDataItem>>) {
 		const chart = this.chart;
 		if (chart && chart.get("zoomLevel", 1) >= chart.get("maxZoomLevel", 100) * this.get("stopClusterZoom", 0.95)) {

src/.internal/charts/map/MapChartDefaultTheme.ts

@@ -1,5 +1,4 @@
 import { Theme } from "../../core/Theme";
-import { p50, p100 } from "../../core/util/Percent";
 import { setColor } from "../../themes/DefaultTheme";
 
 import { geoMercator } from "d3-geo";
@@ -96,44 +95,11 @@ export class MapChartDefaultTheme extends Theme {
 			setColor(rule, "stroke", ic, "background");
 		}
 
-		r("Button", ["zoomcontrol"]).setAll({
-			marginTop: 1,
-			marginBottom: 2
-		})
-
-		r("Graphics", ["map", "button", "plus", "icon"]).setAll({
-			x: p50,
-			y: p50,
-			draw: (display) => {
-				display.moveTo(-4, 0);
-				display.lineTo(4, 0);
-				display.moveTo(0, -4);
-				display.lineTo(0, 4);
-			}
-		});
 
-		r("Graphics", ["map", "button", "minus", "icon"]).setAll({
-			x: p50,
-			y: p50,
-			draw: (display) => {
-				display.moveTo(-4, 0);
-				display.lineTo(4, 0);
-			}
-		});
-
-
-		r("Button", ["zoomcontrol", "home"]).setAll({
+		r("Button", ["zoomtools", "home"]).setAll({
 			visible: false
 		});
 
-
-		r("Graphics", ["map", "button", "home", "icon"]).setAll({
-			x: p50,
-			y: p50,
-			svgPath: "M 8 -1 L 6 -1 L 6 7 L 2 7 L 2 1 L -2 1 L -2 7 L -6 7 L -6 -1 L -8 -1 L 0 -9 L 8 -1 Z M 8 -1"
-		});
-
-
 		/**
 		 * ------------------------------------------------------------------------
 		 * charts/map: Series
@@ -143,15 +109,5 @@ export class MapChartDefaultTheme extends Theme {
 		r("GraticuleSeries").setAll({
 			step: 10
 		});
-
-
-		r("ZoomControl").setAll({
-			x: p100,
-			centerX: p100,
-			y: p100,
-			centerY: p100,
-			paddingRight: 10,
-			paddingBottom: 10
-		})
 	}
 }