Version 5.0.0-beta.44

package.json

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

packages/shared/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.44] - 2021-11-02 (release candidate)
+
+### Added
+- `Triangle` class added.
+- `labelText` setting added to `Tooltip`. If set the text will automatically be applied to tooltip's label.
+
+
 ## [5.0.0-beta.43] - 2021-11-02
 
 ### Fixed

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

@@ -44,63 +44,6 @@ export class XYChartDefaultTheme extends Theme {
 			arrangeTooltips: true
 		});
 
-		/**
-		 * ------------------------------------------------------------------------
-		 * charts/xy: ZoomOutButton
-		 * ------------------------------------------------------------------------
-		 */
-
-		r("Button", ["zoom"]).setAll({
-			paddingTop: 18,
-			paddingBottom: 18,
-			paddingLeft: 12,
-			paddingRight: 12,
-			centerX: 46,
-			centerY: -10,
-			y: 0,
-			x: p100,
-			role: "button",
-			ariaLabel: language.translate("Zoom Out"),
-			layer: 40
-		});
-
-		{
-			const rule = r("RoundedRectangle", ["background", "button", "zoom"]);
-
-			rule.setAll({
-				cornerRadiusBL: 40,
-				cornerRadiusBR: 40,
-				cornerRadiusTL: 40,
-				cornerRadiusTR: 40
-			});
-
-			setColor(rule, "fill", ic, "primaryButton");
-		}
-
-		{
-			const rule = r("RoundedRectangle", ["background", "button", "zoom"]).states.create("hover", {});
-			setColor(rule, "fill", ic, "primaryButtonHover");
-		}
-
-		{
-			const rule = r("RoundedRectangle", ["background", "button", "zoom"]).states.create("down", { stateAnimationDuration: 0 });
-			setColor(rule, "fill", ic, "primaryButtonDown");
-		}
-
-		{
-			const rule = r("Graphics", ["icon", "button", "zoom"]);
-
-			rule.setAll({
-				strokeOpacity: 0.7,
-				draw: (display: any) => {
-					display.moveTo(0, 0);
-					display.lineTo(12, 0);
-				}
-			});
-
-			setColor(rule, "stroke", ic, "primaryButtonText");
-		}
-
 
 		/**
 		 * ------------------------------------------------------------------------
@@ -174,9 +117,9 @@ export class XYChartDefaultTheme extends Theme {
 		});
 
 		r("AxisLabel", ["category"]).setAll({
-			text:"{category}",
-			populateText:true
-		});		
+			text: "{category}",
+			populateText: true
+		});
 
 		r("AxisLabel", ["x"]).setAll({
 			centerY: 0
@@ -581,11 +524,11 @@ export class XYChartDefaultTheme extends Theme {
 			valueXGrouped: "close",
 			valueYGrouped: "close",
 
-			seriesTooltipTarget:"series"
+			seriesTooltipTarget: "series"
 		});
 
 		r("BaseColumnSeries").setAll({
-			adjustBulletPosition:true
+			adjustBulletPosition: true
 		});
 
 		r("ColumnSeries").setAll({

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

@@ -655,7 +655,9 @@ export abstract class Axis<R extends AxisRenderer> extends Component {
 			if (tooltip) {
 				const rendererTags = renderer.get("themeTags");
 				tooltip.addTag("axis");
+				tooltip.addTag(this.getPrivate("name", ""));
 				tooltip._applyThemes();
+
 				if (rendererTags) {
 					tooltip.set("themeTags", $utils.mergeTags(tooltip.get("themeTags"), rendererTags));
 					tooltip.label._applyThemes();
@@ -897,7 +899,7 @@ export abstract class Axis<R extends AxisRenderer> extends Component {
 					position = this.roundAxisPosition(position, this.get("tooltipLocation", 0.5));
 				}
 				if (!$type.isNaN(position)) {
-					tooltip.label.set("text", this.getTooltipText(position));
+					this._updateTooltipText(tooltip, position);
 					renderer.positionTooltip(tooltip, position);
 
 					if (position < this.get("start") || position > this.get("end")) {
@@ -914,6 +916,10 @@ export abstract class Axis<R extends AxisRenderer> extends Component {
 		}
 	}
 
+	protected _updateTooltipText(tooltip: Tooltip, position: number) {
+		tooltip.label.set("text", this.getTooltipText(position));
+	}
+
 	/**
 	 * Returns text to be used in an axis tooltip for specific relative position.
 	 *

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

@@ -6,8 +6,8 @@ import * as $array from "../../../core/util/Array";
 import * as $type from "../../../core/util/Type";
 import * as $math from "../../../core/util/Math";
 import * as $utils from "../../../core/util/Utils";
-
-
+import { populateString } from "../../../core/util/PopulateString";
+import type { Tooltip } from "../../../core/render/Tooltip";
 
 export interface ICategoryAxisSettings<R extends AxisRenderer> extends IAxisSettings<R> {
 
@@ -505,12 +505,20 @@ export class CategoryAxis<R extends AxisRenderer> extends Axis<R> {
 	 */
 	public getTooltipText(position: number): string | undefined {
 		//@todo number formatter + tag
-		let dataItem = this.dataItems[this.axisPositionToIndex(position)];
+		const dataItem = this.dataItems[this.axisPositionToIndex(position)];
 		if (dataItem) {
-			return dataItem.get("category");
+			const label = dataItem.get("label")
+			if(label){
+				return populateString(label, this.get("tooltipText", ""));
+			}
 		}
 	}
 
+	protected _updateTooltipText(tooltip: Tooltip, position: number) {
+		tooltip._setDataItem(this.dataItems[this.axisPositionToIndex(position)]);
+		tooltip.label.text.markDirtyText();
+	}	
+
 	/**
 	 * Returns a data item from series that is closest to the `position`.
 	 *

src/.internal/core/Classes.ts

@@ -95,6 +95,7 @@ import type { RadialGradient } from "./render/gradients/RadialGradient";
 import type { RadialLabel } from "./render/RadialLabel";
 import type { RadialText } from "./render/RadialText";
 import type { Rectangle } from "./render/Rectangle";
+import type { Triangle } from "./render/Triangle";
 import type { RectanglePattern } from "./render/patterns/RectanglePattern";
 import type { RoundedRectangle } from "./render/RoundedRectangle";
 import type { Sankey } from "./../charts/flow/Sankey";
@@ -222,6 +223,7 @@ export interface IClasses {
 	"RadialLabel": RadialLabel;
 	"RadialText": RadialText;
 	"Rectangle": Rectangle;
+	"Triangle": Triangle;
 	"RectanglePattern": RectanglePattern;
 	"RoundedRectangle": RoundedRectangle;
 	"Sankey": Sankey;

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

@@ -18,6 +18,11 @@ import { Color } from "../util/Color";
 
 export interface ITooltipSettings extends IContainerSettings {
 
+	/**
+	 * @todo review
+	 */
+	labelText?: string
+
 	/**
 	 * A direction of the tooltip pointer.
 	 *
@@ -163,6 +168,14 @@ export class Tooltip extends Container {
 		$array.remove(this._root._tooltips, this);
 	}
 
+	public _updateChildren() {
+		super._updateChildren();
+		const labelText = this.get("labelText");
+		if (labelText != null) {
+			this.label.set("text", this.get("labelText"));
+		}
+	}
+
 	public _changed() {
 		super._changed();
 

src/.internal/core/render/Triangle.ts

@@ -0,0 +1,54 @@
+import { Graphics, IGraphicsSettings, IGraphicsPrivate } from "./Graphics";
+
+export interface ITriangleSettings extends IGraphicsSettings {
+}
+
+export interface ITrianglePrivate extends IGraphicsPrivate {
+}
+
+/**
+ * Draws a triangle.
+ *
+ * @see {@link https://www.amcharts.com/docs/v5/concepts/common-elements/graphics/} for more info
+ * @important
+ */
+export class Triangle extends Graphics {
+
+	declare public _settings: ITriangleSettings;
+	declare public _privateSettings: ITrianglePrivate;
+
+	public static className: string = "Triangle";
+	public static classNames: Array<string> = Graphics.classNames.concat([Triangle.className]);
+
+	public _beforeChanged() {
+		super._beforeChanged();
+
+		if (this.isDirty("width") || this.isDirty("height") || this.isPrivateDirty("width") || this.isPrivateDirty("height")) {
+			this._clear = true;
+		}
+	}
+
+	public _changed() {
+		super._changed();
+
+		if (this._clear && !this.get("draw")) {
+			this._draw();
+		}
+	}
+
+	protected _draw() {
+		const w = this.width();
+		const h = this.height();
+		const display = this._display;
+		display.moveTo(-w / 2, h / 2);
+		display.lineTo(0, -h / 2);
+		display.lineTo(w / 2, h / 2);
+		display.lineTo(-w / 2, h / 2);
+
+	}
+
+	public _updateSize() {
+		this.markDirty()
+		this._clear = true;
+	}
+}

src/.internal/themes/DefaultTheme.ts

@@ -546,6 +546,63 @@ export class DefaultTheme extends Theme {
 			setColor(rule, "fill", ic, "primaryButtonText");
 		}
 
+		/**
+		 * ------------------------------------------------------------------------
+		 * charts/xy: ZoomOutButton
+		 * ------------------------------------------------------------------------
+		 */
+
+		r("Button", ["zoom"]).setAll({
+			paddingTop: 18,
+			paddingBottom: 18,
+			paddingLeft: 12,
+			paddingRight: 12,
+			centerX: 46,
+			centerY: -10,
+			y: 0,
+			x: p100,
+			role: "button",
+			ariaLabel: language.translate("Zoom Out"),
+			layer: 40
+		});
+
+		{
+			const rule = r("RoundedRectangle", ["background", "button", "zoom"]);
+
+			rule.setAll({
+				cornerRadiusBL: 40,
+				cornerRadiusBR: 40,
+				cornerRadiusTL: 40,
+				cornerRadiusTR: 40
+			});
+
+			setColor(rule, "fill", ic, "primaryButton");
+		}
+
+		{
+			const rule = r("RoundedRectangle", ["background", "button", "zoom"]).states.create("hover", {});
+			setColor(rule, "fill", ic, "primaryButtonHover");
+		}
+
+		{
+			const rule = r("RoundedRectangle", ["background", "button", "zoom"]).states.create("down", { stateAnimationDuration: 0 });
+			setColor(rule, "fill", ic, "primaryButtonDown");
+		}
+
+		{
+			const rule = r("Graphics", ["icon", "button", "zoom"]);
+
+			rule.setAll({
+				strokeOpacity: 0.7,
+				draw: (display: any) => {
+					display.moveTo(0, 0);
+					display.lineTo(12, 0);
+				}
+			});
+
+			setColor(rule, "stroke", ic, "primaryButtonText");
+		}
+
 
 		/**
 		 * ------------------------------------------------------------------------
@@ -859,6 +916,10 @@ export class DefaultTheme extends Theme {
 			textAlign: "center"
 		});
 
+		r("Tooltip", ["axis", "category"]).setAll({
+			labelText: "{category}"
+		})	
+
 		/**
 		 * ------------------------------------------------------------------------
 		 * Shapes

src/index.ts

@@ -21,6 +21,7 @@ export { PointedRectangle } from "./.internal/core/render/PointedRectangle";
 export { RadialLabel } from "./.internal/core/render/RadialLabel";
 export { RadialText } from "./.internal/core/render/RadialText";
 export { Rectangle } from "./.internal/core/render/Rectangle";
+export { Triangle } from "./.internal/core/render/Triangle";
 export { RoundedRectangle } from "./.internal/core/render/RoundedRectangle";
 export { Scrollbar } from "./.internal/core/render/Scrollbar";
 export { Slider } from "./.internal/core/render/Slider";