Version 5.0.0-beta.24

package.json

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

packages/shared/CHANGELOG.md

@@ -5,6 +5,19 @@ 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.0.0-beta.24] - 2021-09-23
+
+### Added
+- `autoRotate` and `autoRotateAngle` settings added to `Bullet`. Works on `Flow` and `MapPointSeries` (when `MapPoint` is attached to a `MapLine`).
+
+### Changed
+- `Sankey` bullets will now check `positionY` if series is vertical, and `positionX` of its a horizontal series. It was using `positionY` for all orientations previously.
+
+### Fixed
+- In some cases labels with `oversizedBehavior: "fit"` were not being resized when available space was changed.
+- `autoRotate`
+
+
 ## [5.0.0-beta.23] - 2021-09-23
 
 ### Fixed

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

@@ -134,8 +134,7 @@ export abstract class Flow extends Series {
 	protected _linksData: { source: d3sankey.SankeyNodeMinimal<{}, {}>, target: d3sankey.SankeyNodeMinimal<{}, {}>, value: number }[] = [];
 	protected _index = 0;
 
-	protected _linksByIndex: { [index: string]: any } = {}
-
+	protected _linksByIndex: { [index: string]: any } = {};
 	protected _afterNew() {
 		this.fields.push("disabled", "sourceId", "targetId");
 
@@ -461,6 +460,7 @@ export abstract class Flow extends Series {
 
 	public _positionBullet(bullet: Bullet) {
 		const sprite = bullet.get("sprite");
+
 		if (sprite) {
 			const dataItem = sprite.dataItem as DataItem<this["_dataItemSettings"]>;
 			if (dataItem) {
@@ -469,10 +469,17 @@ export abstract class Flow extends Series {
 
 				if (sprite) {
 					const point = link.getPoint(bullet.get("locationY", 0));
-					sprite.setAll({ x: point.x, y: point.y, rotation: point.angle + 90 });
+					sprite.setAll({ x: point.x, y: point.y });
+
+					if (bullet.get("autoRotate")) {
+						sprite.set("rotation", point.angle + bullet.get("autoRotateAngle", 0));
+					}
 				}
 			}
 		}
 	}
 
+	protected _getBulletLocation(bullet: Bullet): number {
+		return bullet.get("locationY", 0);
+	}
 }

src/.internal/charts/flow/Sankey.ts

@@ -15,6 +15,8 @@ import * as $type from "../../core/util/Type";
 import * as $utils from "../../core/util/Utils";
 import * as d3sankey from "d3-sankey";
 
+import type { Bullet } from "../../core/render/Bullet";
+
 export interface ISankeyDataItem extends IFlowDataItem {
 
 	/**
@@ -220,6 +222,15 @@ export class Sankey extends Flow {
 
 	}
 
+	protected _getBulletLocation(bullet: Bullet): number {
+		if (this.get("orientation") == "vertical") {
+			return bullet.get("locationY", 0);
+		}
+		else {
+			return bullet.get("locationX", 0);
+		}
+	}
+
 	public _prepareChildren() {
 		super._prepareChildren();
 		let vertical = false;

src/.internal/charts/flow/SankeyLink.ts

@@ -324,6 +324,7 @@ export class SankeyLink extends FlowLink {
 					let middleSegment = [[xm0, ym0], [kxm0, kym0], [kxm1, kym1], [xm1, ym1]];
 
 					const path = this.series!._strokeGenerator(middleSegment as [number, number][]);
+
 					if (path) {
 						this._svgPath.setAttribute("d", path);
 						this._totalLength = this._svgPath.getTotalLength();
@@ -341,8 +342,7 @@ export class SankeyLink extends FlowLink {
 			if (this._svgPath.getAttribute("d")) {
 				let p0 = this._svgPath.getPointAtLength(location * this._totalLength - 0.1);
 				let p1 = this._svgPath.getPointAtLength(location * this._totalLength + 0.1);
-
-				let p = this._svgPath.getPointAtLength(location * this._totalLength);
+				let p = this.toGlobal(this._svgPath.getPointAtLength(location * this._totalLength));
 				return { x: p.x, y: p.y, angle: $math.getAngle(p0, p1) };
 			}
 		}

src/.internal/charts/hierarchy/Sunburst.ts

@@ -205,8 +205,8 @@ export class Sunburst extends Partition {
 
 			if (ir < 0) {
 				ir = r + ir;
-			}			
-			
+			}
+
 			s = r - ir;
 
 			this.setPrivateRaw("innerRadius", ir);
@@ -216,7 +216,7 @@ export class Sunburst extends Partition {
 
 			this.nodesContainer.setAll({
 				dy: -r * (bounds.bottom + bounds.top) / 2, dx: -r * (bounds.right + bounds.left) / 2
-			})			
+			})
 
 			const nodePadding = this.get("nodePadding");
 
@@ -354,8 +354,15 @@ export class Sunburst extends Partition {
 			label.set("baseRadius", innerRadius);
 			label.set("radius", (radius - innerRadius) / 2)
 
-			label.set("maxHeight", Math.PI * 2 * radius * arc / 360);
-			label.set("maxWidth", radius - innerRadius);
+
+			let maxWidth = radius - innerRadius;
+			let maxHeight = Math.PI * 2 * radius * arc / 360;
+			if (arc >= 360) {
+				maxWidth *= 2;
+				maxHeight = maxWidth;
+			}
+			label.set("maxHeight", maxHeight);
+			label.set("maxWidth", maxWidth);
 		}
 	}
 

src/.internal/charts/map/MapPointSeries.ts

@@ -3,7 +3,6 @@ import type { IMapPolygonSeriesDataItem, MapPolygonSeries } from "./MapPolygonSe
 import type { Root } from "../../core/Root";
 import type { Bullet } from "../../core/render/Bullet";
 import type { DataItem } from "../../core/render/Component";
-import type { Sprite } from "../../core/render/Sprite";
 import type { Template } from "../../core/util/Template";
 import type { MapLine } from "./MapLine";
 import type { MapPolygon } from "./MapPolygon";
@@ -257,6 +256,8 @@ export class MapPointSeries extends MapSeries {
 			const positionOnLine = dataItem.get("positionOnLine");
 			let coordinates: [number, number] | undefined;
 
+			let angle: number | undefined;
+
 			if (polygon) {
 				let geoPoint = polygon.visualCentroid();
 				coordinates = [geoPoint.longitude, geoPoint.latitude];
@@ -265,14 +266,15 @@ export class MapPointSeries extends MapSeries {
 				let geoPoint = line.positionToGeoPoint(positionOnLine);
 				coordinates = [geoPoint.longitude, geoPoint.latitude];
 
-				if (dataItem.get("autoRotate") && chart) {
+				if (dataItem.get("autoRotate", bullet.get("autoRotate")) && chart) {
 					const geoPoint0 = line.positionToGeoPoint(positionOnLine - 0.002);
 					const geoPoint1 = line.positionToGeoPoint(positionOnLine + 0.002);
 
 					const point0 = chart.convert(geoPoint0);
 					const point1 = chart.convert(geoPoint1);
 
-					dataItem.set("autoRotateAngle", $math.getAngle(point0, point1));
+					//dataItem.set("autoRotateAngle", $math.getAngle(point0, point1));
+					angle = $math.getAngle(point0, point1);
 				}
 			}
 			else if ($type.isNumber(longitude) && $type.isNumber(latitude)) {
@@ -282,7 +284,7 @@ export class MapPointSeries extends MapSeries {
 				const geometry = dataItem.get("geometry")!;
 				if (geometry) {
 					if (geometry.type == "Point") {
-						this._positionBulletReal(sprite, geometry, geometry.coordinates as [number, number]);
+						this._positionBulletReal(bullet, geometry, geometry.coordinates as [number, number], angle);
 					}
 					else if (geometry.type == "MultiPoint") {
 						let index = bullet._index || 0;
@@ -292,12 +294,13 @@ export class MapPointSeries extends MapSeries {
 			}
 
 			if (coordinates) {
-				this._positionBulletReal(sprite, { type: "Point", coordinates: coordinates }, coordinates);
+				this._positionBulletReal(bullet, { type: "Point", coordinates: coordinates }, coordinates, angle);
 			}
 		}
 	}
 
-	protected _positionBulletReal(sprite: Sprite, geometry: GeoJSON.Geometry, coordinates: [number, number]) {
+	protected _positionBulletReal(bullet: Bullet, geometry: GeoJSON.Geometry, coordinates: [number, number], angle?: number) {
+		const sprite = bullet.get("sprite");
 		const chart = this.chart;
 		if (chart) {
 			const projection = chart.get("projection")!;
@@ -325,8 +328,8 @@ export class MapPointSeries extends MapSeries {
 			}
 			sprite.setPrivate("visible", visible);
 
-			if (dataItem && dataItem.get("autoRotate")) {
-				sprite.set("rotation", dataItem.get("autoRotateAngle", 0));
+			if (dataItem && angle != null && dataItem.get("autoRotate", bullet.get("autoRotate"))) {
+				sprite.set("rotation", angle + dataItem.get("autoRotateAngle", bullet.get("autoRotateAngle", 0)));
 			}
 		}
 	}

src/.internal/charts/percent/PercentSeries.ts

@@ -72,9 +72,8 @@ export interface IPercentSeriesSettings extends ISeriesSettings {
 	 */
 	alignLabels?: boolean;
 
-
 	/**
-	 * @todo review
+	 * A field that holds color for slice fill.
 	 */
 	fillField?: string;
 

src/.internal/core/render/Bullet.ts

@@ -31,7 +31,24 @@ export interface IBulletSettings extends IEntitySettings {
 	 *
 	 * @default false
 	 */
-	dynamic?:boolean;
+	dynamic?: boolean;
+
+	/**
+	 * If set to `true`, the bullet will be automatically rotated to face
+	 * direction of line it is attached to.
+	 *
+	 * NOTE: Works only in  [[Flow]] and [[MapPointSeries]] (when [[MapPoint]] is
+	 * attached to a [[MapLine]]).
+	 * 
+	 * @default false
+	 */
+	autoRotate?: boolean;
+
+	/**
+	 * If `autoRotate` is set to `true`, value of `autoRotateAngle` will be added
+	 * to the automatically-calculated angle.
+	 */
+	autoRotateAngle?: number;
 
 }
 

src/.internal/core/render/backend/CanvasRenderer.ts

@@ -1801,9 +1801,9 @@ export class CanvasText extends CanvasContainer implements IText {
 					else {
 						if (!this._originalScale || this._originalScale == 1) {
 							this._originalScale = this.scale;
-							this.scale = ratio;
-							this._textVisible = true;
 						}
+						this.scale = ratio;
+						this._textVisible = true;
 					}
 				}
 				else if (oversizedBehavior == "hide") {
@@ -2819,7 +2819,6 @@ export class CanvasRenderer extends Disposer implements IRenderer, IDisposer {
 	paintId(obj: CanvasDisplayObject): string {
 		const id = distributeId(++this._colorId);
 		const color = Color.fromHex(id).toCSS();
-		//console.log("ASSIGNING", color);
 		this._colorMap[color] = obj;
 		return color;
 	}
@@ -2920,7 +2919,6 @@ export class CanvasRenderer extends Disposer implements IRenderer, IDisposer {
 
 		this._withEvents(key, (events) => {
 			$array.each(events.callbacks, (callback) => {
-				//console.log(key, callback.object === target)
 				if (!callback.disposed && callback.object === target) {
 					callback.callback.call(callback.context, event);
 					dispatched = true;