Version 5.0.0-beta.42

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@amcharts/amcharts5",
-  "version": "5.0.0-beta.41",
+  "version": "5.0.0-beta.42",
   "author": "amCharts <[email protected]> (https://www.amcharts.com/)",
   "description": "amCharts 5",
   "homepage": "https://www.amcharts.com/",
@@ -45,7 +45,7 @@
     "d3-sankey": "^0.12.3",
     "d3-selection": "^1.0.2",
     "d3-transition": "^1.0.1",
-    "markerjs2": "^2.15.0",
+    "markerjs2": "^2.16.2",
     "pdfmake": "0.2.2",
     "polylabel": "^1.1.0",
     "svg-arc-to-cubic-bezier": "^3.2.0",

packages/shared/CHANGELOG.md

@@ -5,6 +5,23 @@ 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.42] - 2021-11-01
+
+### Added
+- If a `Bullet` has `dynamic: true` set, its sprite size will be marked as dirty each time the bullet updates its position.
+- Axis name added to `AxisLabel` when created so it could be targeted by axis type in theme rules.
+
+### Changed
+- Upgraded to `marker.js` 2.16.2.
+- `Annotator` new setting: `markerState`. You can use it to pre-set annotations, or grab annotation data at any time.
+- Default text of an `AxisLabel` for `CategoryAxis` set to `"{category}"`.
+
+### Fixed
+- `Picture` was not working properly in containers in a non-default layer.
+- `locationX` or `locationY` was being ignored on `RadarLineSeries` in some specific cases.
+- `Tooltip` as not coloring its text properly with "Dark" theme enabled.
+
+
 ## [5.0.0-beta.41] - 2021-10-31
 
 ### Added

src/.internal/charts/radar/RadarDefaultTheme.ts

@@ -10,54 +10,57 @@ export class RadarDefaultTheme extends Theme {
 	protected setupDefaultRules() {
 		super.setupDefaultRules();
 
+		const r = this.rule.bind(this);
+
 		const ic = this._root.interfaceColors;
 
+
 		/**
 		 * ========================================================================
 		 * charts/radar
 		 * ========================================================================
 		 */
 
-		this.rule("RadarChart").setAll({
+		r("RadarChart").setAll({
 			radius: percent(80),
 			innerRadius: 0,
 			startAngle: -90,
 			endAngle: 270
 		});
 
-		this.rule("RadarColumnSeries").setAll({
+		r("RadarColumnSeries").setAll({
 			clustered: true
 		});
 
-		this.rule("Slice", ["radar", "column", "series"]).setAll({
+		r("Slice", ["radar", "column", "series"]).setAll({
 			width: percent(80),
 			height: percent(80)
 		});
 
-		this.rule("RadarLineSeries").setAll({
+		r("RadarLineSeries").setAll({
 			connectEnds: true
 		});
 
-		this.rule("SmoothedRadarLineSeries").setAll({
+		r("SmoothedRadarLineSeries").setAll({
 			tension: 0.5
 		});
 
-		this.rule("AxisRendererRadial").setAll({
+		r("AxisRendererRadial").setAll({
 			minGridDistance: 40,
 			axisAngle: -90,
 			inversed: false,
 			cellStartLocation: 0,
 			cellEndLocation: 1
 		});
 
-		this.rule("AxisRendererCircular").setAll({
+		r("AxisRendererCircular").setAll({
 			minGridDistance: 100,
 			inversed: false,
 			cellStartLocation: 0,
 			cellEndLocation: 1
 		});
 
-		this.rule("RadialLabel", ["circular"]).setAll({
+		r("RadialLabel", ["circular"]).setAll({
 			textType: "circular",
 			paddingTop: 1,
 			paddingRight: 0,
@@ -68,27 +71,33 @@ export class RadarDefaultTheme extends Theme {
 			radius: 8
 		});
 
-		this.rule("RadialLabel", ["radial"]).setAll({
+
+		r("AxisLabelRadial", ["category"]).setAll({
+			text:"{category}",
+			populateText:true
+		});			
+
+		r("RadialLabel", ["radial"]).setAll({
 			textType: "regular",
 			centerX: 0,
 			textAlign: "right"
 		});
 
-		this.rule("RadarChart", ["gauge"]).setAll({
+		r("RadarChart", ["gauge"]).setAll({
 			startAngle: 180,
 			endAngle: 360,
 			innerRadius: percent(90)
 		});
 
-		this.rule("ClockHand").setAll({
+		r("ClockHand").setAll({
 			topWidth: 1,
 			bottomWidth: 10,
 			radius: percent(90),
 			pinRadius: 10
 		});
 
 		{
-			const rule = this.rule("Graphics", ["clock", "hand"]);
+			const rule = r("Graphics", ["clock", "hand"]);
 
 			rule.setAll({
 				fillOpacity: 1
@@ -98,7 +107,7 @@ export class RadarDefaultTheme extends Theme {
 		}
 
 		{
-			const rule = this.rule("Graphics", ["clock", "pin"]);
+			const rule = r("Graphics", ["clock", "pin"]);
 
 			rule.setAll({
 				fillOpacity: 1

src/.internal/charts/radar/RadarLineSeries.ts

@@ -110,14 +110,14 @@ export class RadarLineSeries extends LineSeries {
 
 			let xAxis = this.get("xAxis");
 			let yAxis = this.get("yAxis");
-			let baseAxis = this.get("baseAxis");
-
-			if(xAxis == baseAxis){
-				locationY = 1;
-			}
-			else if(yAxis == baseAxis){
-				locationX = 1;
-			}
+			//let baseAxis = this.get("baseAxis");
+
+			//if(xAxis == baseAxis){
+			//locationY = 1;
+			//}
+			//else if(yAxis == baseAxis){
+			//locationX = 1;
+			//}
 
 			const positionX = xAxis.getDataItemPositionX(dataItem, this._xField, locationX, this.get("vcx", 1));
 			const positionY = yAxis.getDataItemPositionY(dataItem, this._yField, locationY, this.get("vcy", 1))

src/.internal/charts/xy/XYChartDefaultTheme.ts

@@ -173,6 +173,11 @@ export class XYChartDefaultTheme extends Theme {
 			fontSize: "0.8em"
 		});
 
+		r("AxisLabel", ["category"]).setAll({
+			text:"{category}",
+			populateText:true
+		});		
+
 		r("AxisLabel", ["x"]).setAll({
 			centerY: 0
 		});

src/.internal/charts/xy/axes/AxisRenderer.ts

@@ -173,6 +173,13 @@ export abstract class AxisRenderer extends Graphics {
 		if (this.get("inside" as any)) {
 			themeTags.push("inside");
 		}
+
+		const axisName = this.axis.getPrivate("name");
+
+		if(axisName){
+			themeTags.push(axisName);
+		}		
+
 		label.set("themeTags", $utils.mergeTags(label.get("themeTags"), themeTags));
 		this.axis.labelsContainer.children.moveValue(label, 0);
 

src/.internal/charts/xy/axes/CategoryAxis.ts

@@ -270,11 +270,6 @@ export class CategoryAxis<R extends AxisRenderer> extends Axis<R> {
 				dataItem.show();
 			}
 
-			const label = dataItem.get("label");
-			if (label) {
-				label.set("text", dataItem.get("category"));
-			}
-
 			this._prepareDataItem(dataItem, f, frequency);
 			f++;
 		}

src/.internal/core/render/Picture.ts

@@ -168,7 +168,7 @@ export class Picture extends Sprite {
 				this._display.height = h;
 			}
 			this.markDirtyBounds();
-			//this.markDirty();
+			this.markDirty();
 		}
 	}
 }

src/.internal/core/render/Series.ts

@@ -599,10 +599,12 @@ export abstract class Series extends Component {
 
 					if(sprite){						
 						sprite._markDirtyKey("fill" as any);
+						sprite.markDirtySize();
 					}
 					if(sprite instanceof Container){
 						sprite.walkChildren((child)=>{						
 							child._markDirtyKey("fill" as any);
+							child.markDirtySize();
 						})
 					}
 				}	

src/.internal/core/render/Slice.ts

@@ -38,12 +38,14 @@ export interface ISliceSettings extends IGraphicsSettings {
 	shiftRadius?: number;
 
 	/**
-	 * @todo review
+	 * Number of pixels to add to whatever slice's `radius` value is. Negative
+	 * numbers can also be used.
 	 */
 	dRadius?: number;
 
 	/**
-	 * @todo review
+	 * Number of pixels to add to whatever slice's `innerRadius` value is.
+	 * Negative numbers can also be used.
 	 */
 	dInnerRadius?: number;
 

src/.internal/core/render/Sprite.ts

@@ -1402,6 +1402,14 @@ export abstract class Sprite extends Entity {
 		}
 	}
 
+	/**
+	 * @ignore
+	 */
+	public markDirtySize(): void {
+		this._sizeDirty = true;
+		this.markDirty();
+	}
+
 	/**
 	 * @ignore
 	 */

src/.internal/core/render/Tooltip.ts

@@ -266,12 +266,7 @@ export class Tooltip extends Container {
 			}
 
 			if (fill instanceof Color) {
-				if ($utils.isLight(fill)) {
-					this.label.set("fill", this._root.interfaceColors.get("text"));
-				}
-				else {
-					this.label.set("fill", this._root.interfaceColors.get("alternativeText"));
-				}
+				this.label.set("fill", Color.alternative(fill, this._root.interfaceColors.get("alternativeText"), this._root.interfaceColors.get("text")));
 			}
 		}
 	}

src/.internal/core/util/Utils.ts

@@ -979,7 +979,13 @@ export function saturate(rgb: $type.Optional<iRGB>, saturation: number): $type.O
 }
 
 export function alternativeColor(color: iRGB, lightAlternative: iRGB = { r: 255, g: 255, b: 255 }, darkAlternative: iRGB = { r: 255, g: 255, b: 255 }): iRGB {
-	return isLight(color) ? darkAlternative : lightAlternative;
+	let light = lightAlternative;
+	let dark = darkAlternative;
+	if (isLight(darkAlternative)) {
+		light = darkAlternative;
+		dark = lightAlternative;
+	}
+	return isLight(color) ? dark : light;
 }
 
 /**

src/.internal/plugins/exporting/Annotator.ts

@@ -13,6 +13,11 @@ export interface IAnnotatorSettings extends IEntitySettings {
 	 */
 	layer?: number;
 
+	/**
+	 * Raw annotation info saved by MarkerJS.
+	 */
+	markerState?: any;
+
 }
 
 export interface IAnnotatorPrivate extends IEntityPrivate {
@@ -40,18 +45,19 @@ export class Annotator extends Entity {
 	private _picture?: Picture;
 	private _markerArea?: any;
 
-	/**
-	 * Raw annotation info saved by MarkerJS.
-	 */
-	public markerState?: any;
-
 	//public extraImages: Array<Root | IAnnotatorImageSource> = [];
 	//public dataSources: any[] = [];
 
 	protected _afterNew() {
 		super._afterNew();
 		this._setRawDefault("layer", 1000);
 		this._root.addDisposer(this);
+
+		if (this.get("markerState")) {
+			// Preload image
+			this.open();
+			this.close();
+		}
 	}
 
 	public _beforeChanged() {
@@ -72,8 +78,8 @@ export class Annotator extends Entity {
 		const markerArea = await this.getMarkerArea();
 		markerArea.show();
 		this._picture!.hide(0);
-		if (this.markerState) {
-			markerArea.restoreState(this.markerState);
+		if (this.get("markerState")) {
+			markerArea.restoreState(this.get("markerState"));
 		}
 	}
 
@@ -102,7 +108,7 @@ export class Annotator extends Entity {
 	 * All annotations are removed.
 	 */
 	public clear() {
-		this.markerState = undefined;
+		this.set("markerState", undefined);
 		if (this._picture) {
 			this._picture.set("src", "");
 		}
@@ -156,7 +162,7 @@ export class Annotator extends Entity {
 				const picture = this._picture!;
 				picture.set("src", img);
 				picture.show(0);
-				this.markerState = state;
+				this.set("markerState", state);
 			});
 
 			this._markerArea = markerArea;

src/.internal/themes/DefaultTheme.ts

@@ -859,7 +859,6 @@ export class DefaultTheme extends Theme {
 			textAlign: "center"
 		});
 
-
 		/**
 		 * ------------------------------------------------------------------------
 		 * Shapes

yarn.lock

@@ -2829,10 +2829,10 @@ marked@^0.8.0:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.2.tgz#4faad28d26ede351a7a1aaa5fec67915c869e355"
   integrity sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==
 
-markerjs2@^2.15.0:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/markerjs2/-/markerjs2-2.15.0.tgz#01517e1ba32eb4fe9168eea55262e3abfac99752"
-  integrity sha512-6ueErJGxJvgPfHnnTEnJykyObph27yUZoI6zB/IxHOCVf5yRKNKZ7oyMr+ZnzFteRL64d77rm+lJNzbrKxTlKg==
+markerjs2@^2.16.2:
+  version "2.16.2"
+  resolved "https://registry.yarnpkg.com/markerjs2/-/markerjs2-2.16.2.tgz#6a689ffaae6bfcfea22b84b2982be323786b54b4"
+  integrity sha512-NSk2sdKZLmwiqFd6ybmQopQZFv0KTxPotxTJgQIZ3PTDBx39nCLNh/+ijO+I0CLC6Xe8/uGQQnkKvx92x8w85g==
 
 md5.js@^1.3.4:
   version "1.3.5"