Version 5.7.0

package.json

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

packages/geodata/CHANGELOG.md

@@ -7,8 +7,12 @@ adhere to [Semantic Versioning](http://semver.org/spec/v2.0.0.html) rules.
 
 ## [UNRELEASED] - ????-??-??
 
+
+## [5.1.2] - 2023-12-07
+
 ### Added
 - New map of Kazakhstan: `kazahkstan2023*`.
+- New USA county maps to reflect changes in Alaska: `region/usa/ak2023*` and `region/usa/usaCounties2023*`.
 
 ### Changed
 - Updated Hormozgan province name in the maps of Iran.

packages/geodata/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amcharts/amcharts5-geodata",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "author": "amCharts <[email protected]> (https://www.amcharts.com/)",
   "description": "amCharts 5 Geo Data",
   "homepage": "https://www.amcharts.com/",

packages/shared/CHANGELOG.md

@@ -5,6 +5,33 @@ 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.7.0] - 2023-12-17
+
+### Added
+- New `Serializer` setting: `fullSettings`. Will ignore depth settings for keys listed in `fullSettings`.
+- New `StockAxis` toolbar control: `DataSaveControl`. Allows to automatically or manually save all drawings and indicators to browser's local storage, as well as restore them across sessions. [More info](https://www.amcharts.com/docs/v5/charts/stock/toolbar/data-save-control/).
+- Added additional item in `SettingsControl`: Auto-save drawings and indicators.
+- New setting in `SettingsControl`: `autoSave`. Enables user to toggle auto-saving of indicators/drawings via Settings dropdown.
+- New setting in `DropdownList` and `DropdownListControl`: `exclude`. Can be set to an array of item IDs that should not appear in the list. Can be used to disable default list items.
+- New property in `StockChart`: `spriteResizer`. Holdes an instance of `SpriteResizer` which is used among drawing tools.
+- `zoomable` setting added to Axis. If set to false, calling axis.zoom() won't do anything, meaning that the axis won't be zoomed with scrollbars, wheel, cursor etc.
+
+## Changed
+- `StockChart` will only sync zoom between X axes that are of the same type as the main axis.
+- All drawing tools that allow selecting and resizing them (Label, Callout, Icons) will now use shared instance of `SpriteResizer`.
+- `IndictorControl` is now searchable by default (`searchable: true`).
+
+### Fixed
+- `PeriodSelector`'s buttons were not being reset when chart was zoomed manually.
+- Dropdowns in `StockChart`'s control were not being positioned correctly in all cases on a page with RTL direction enabled.
+- Drawings loaded from serialized data were not being deleted with eraser or clear tools.
+- Elinated multiple calls to preparing data of `StockChart` indicators.
+- On `StockChart`, indicator's panel X-axis was out of sync with the main panel's X-axis if the latter's scale was longer to some other series on the main panel.
+- Italic toggle was being ignored in `StockChart` label drawing tools.
+- `GaplessDateAxis` was not always including the first date when using `axis.zoomToDates(startDate, endDate)` method.
+- When swiching to percent scale `StovkChart's main panel was showing wrong Y-axis numbers until first zoom.
+
+
 ## [5.6.2] - 2023-11-30
 
 ### Added

src/.internal/charts/stock/StockChart.ts

@@ -9,8 +9,10 @@ import type { XYSeries, IXYSeriesDataItem, IXYSeriesSettings } from "../xy/serie
 import type { DataItem } from "../../core/render/Component";
 import type { Indicator } from "./indicators/Indicator";
 import type { DrawingSeries } from "./drawing/DrawingSeries";
+import type { StockControl } from "./toolbar/StockControl";
 import { MultiDisposer } from "../../core/util/Disposer";
 
+import { SpriteResizer } from "../../core/render/SpriteResizer";
 import { PanelControls } from "./PanelControls";
 import { StockChartDefaultTheme } from "./StockChartDefaultTheme";
 import { XYChartDefaultTheme } from "../xy/XYChartDefaultTheme";
@@ -25,6 +27,7 @@ import { registry } from "../../core/Registry";
 import * as $array from "../../core/util/Array";
 import * as $utils from "../../core/util/Utils";
 import * as $object from "../../core/util/Object";
+import type { GaplessDateAxis } from "../xy/axes/GaplessDateAxis";
 
 export interface IStockChartSettings extends IContainerSettings {
 
@@ -203,6 +206,20 @@ export class StockChart extends Container {
 	 */
 	public readonly panelsContainer: Container = this.children.push(Container.new(this._root, { width: p100, height: p100, layout: this._root.verticalLayout, themeTags: ["chartscontainer"] }));
 
+	/**
+	 * An array of all Stock Controls that are created for this chart.
+	 *
+	 * @since 5.7.0
+	 */
+	public readonly controls: StockControl[] = [];
+
+	/**
+	 * An instance of [[SpriteResizer]] used for various drawing tools.
+	 * 
+	 * @since 5.7.0
+	 */
+	public spriteResizer = this.children.push(SpriteResizer.new(this._root, {}));
+
 
 	protected _afterNew() {
 		this._settings.themeTags = $utils.mergeTags(this._settings.themeTags, ["stock"]);
@@ -417,8 +434,9 @@ export class StockChart extends Container {
 
 		if (this.isDirty("stockNegativeColor") || this.isDirty("stockPositiveColor") || this.isDirty("stockSeries")) {
 			if (stockSeries && stockSeries.isType<BaseColumnSeries>("BaseColumnSeries")) {
-				const stockNegativeColor = this.get("stockNegativeColor", this._root.interfaceColors.get("negative"));
-				const stockPositiveColor = this.get("stockPositiveColor", this._root.interfaceColors.get("positive"));
+				const ic = this._root.interfaceColors;
+				const stockNegativeColor = this.get("stockNegativeColor", ic.get("negative"));
+				const stockPositiveColor = this.get("stockPositiveColor", ic.get("positive"));
 				let previous = stockSeries.dataItems[0];
 
 				if (stockPositiveColor && stockPositiveColor) {
@@ -520,7 +538,6 @@ export class StockChart extends Container {
 			const yAxis = stockSeries.get("yAxis") as ValueAxis<AxisRenderer>;
 			yAxis.set("logarithmic", false);
 
-
 			this._maybePrepAxisDefaults();
 			if (mainChart) {
 				const seriesList: XYSeries[] = [];
@@ -563,6 +580,10 @@ export class StockChart extends Container {
 				}
 			}
 		}
+
+		this.indicators.each((indicator)=>{
+			indicator.markDataDirty();
+		})
 	}
 
 	/**
@@ -698,7 +719,10 @@ export class StockChart extends Container {
 
 		this.markDirtyIndicators();
 
+		//indicator.markDataDirty(); // not good, shows zoomed out value axis
 		indicator.prepareData();
+
+		this._syncExtremes();
 	}
 
 	protected _removeIndicator(indicator: Indicator) {
@@ -716,24 +740,25 @@ export class StockChart extends Container {
 			const panelControls = panel.panelControls;
 			const index = this.panelsContainer.children.indexOf(panel);
 			const len = this.panels.length;
+			const visible = "visible"
 
-			panelControls.upButton.setPrivate("visible", false);
-			panelControls.downButton.setPrivate("visible", false);
-			panelControls.expandButton.setPrivate("visible", false);
-			panelControls.closeButton.setPrivate("visible", false);
+			panelControls.upButton.setPrivate(visible, false);
+			panelControls.downButton.setPrivate(visible, false);
+			panelControls.expandButton.setPrivate(visible, false);
+			panelControls.closeButton.setPrivate(visible, false);
 
 			if (len > 1) {
-				panelControls.expandButton.setPrivate("visible", true);
+				panelControls.expandButton.setPrivate(visible, true);
 
 				if (index != 0) {
-					panelControls.upButton.setPrivate("visible", true);
+					panelControls.upButton.setPrivate(visible, true);
 				}
 				if (index != len - 1) {
-					panelControls.downButton.setPrivate("visible", true);
+					panelControls.downButton.setPrivate(visible, true);
 				}
 
 				if (!stockSeries || stockSeries.chart != panel) {
-					panelControls.closeButton.setPrivate("visible", true);
+					panelControls.closeButton.setPrivate(visible, true);
 				}
 			}
 
@@ -743,7 +768,6 @@ export class StockChart extends Container {
 				});
 			}
 		})
-
 	}
 
 	protected _processPanel(panel: StockPanel) {
@@ -885,7 +909,7 @@ export class StockChart extends Container {
 
 			this.panels.each((panel) => {
 				panel.xAxes.each((xAxis) => {
-					if (xAxis != mainAxis) {
+					if (xAxis != mainAxis && xAxis.isType("DateAxis")) {
 						let axisMin = xAxis.getPrivate("min" as any);
 						let axisMax = xAxis.getPrivate("max" as any);
 
@@ -895,6 +919,10 @@ export class StockChart extends Container {
 						if (axisMax != max) {
 							xAxis.set("max" as any, max);
 						}
+						const type = "GaplessDateAxis";
+						if (xAxis.isType<GaplessDateAxis<AxisRenderer>>(type) && mainAxis.isType<GaplessDateAxis<AxisRenderer>>(type)) {
+							xAxis._customDates = mainAxis._dates;
+						}
 					}
 				})
 			})
@@ -903,7 +931,7 @@ export class StockChart extends Container {
 
 	protected _syncXAxes(axis: Axis<AxisRenderer>) {
 		$array.each(this._xAxes, (xAxis) => {
-			if (xAxis != axis) {
+			if (xAxis != axis && xAxis.isType("DateAxis")) {
 				xAxis._skipSync = true;
 				xAxis.set("start", axis.get("start"));
 				xAxis.set("end", axis.get("end"));
@@ -967,4 +995,23 @@ export class StockChart extends Container {
 		return positiveColor;
 	}
 
+	/**
+	 * Returns a first [[StockControl]] of specific type.
+	 *
+	 * @since 5.7.0
+	 * @param   type  Control name
+	 * @return        Control
+	 */
+	public getControl(type: string): StockControl | undefined {
+		let found: StockControl | undefined;
+		$array.eachContinue(this.controls, (control: StockControl) => {
+			if (control.className == type) {
+				found = control;
+				return false;
+			}
+			return true;
+		});
+		return found;
+	}
+
 }

src/.internal/charts/stock/StockChartDefaultTheme.ts

@@ -1,7 +1,7 @@
 import { Theme } from "../../core/Theme";
 import { p100, p50, p0, percent } from "../../core/util/Percent";
 import { setColor } from "../../themes/DefaultTheme";
-import { color } from "../../core/util/Color";
+import { Color, color } from "../../core/util/Color";
 import { ColorSet } from "../../core/util/ColorSet";
 import { StockIcons } from "./toolbar/StockIcons";
 
@@ -851,6 +851,10 @@ export class StockChartDefaultTheme extends Theme {
 			legendValueText: "[{volumeColor}; bold]{valueY.formatNumber('#.000a')}[/]",
 		})
 
+		r("ColumnSeries", ["volumeprofile"]).setAll({
+			legendLabelText: "Volume Profile",
+			legendValueText: "[{downColor}; bold]{down.formatNumber('#.000a')}[/] [{upColor}; bold]{up.formatNumber('#.000a')}[/]  [bold]{total.formatNumber('#.000a')}[/]"
+		})
 
 		r("LineSeries", ["vwap"]).setAll({
 			legendValueText: "[{seriesColor} bold]{valueY.formatNumber('#.00')}[/]",
@@ -871,6 +875,15 @@ export class StockChartDefaultTheme extends Theme {
 
 		// end of legend labels
 
+		r("RoundedRectangle", ["series", "column", "volumeprofile"]).setAll({
+			fillOpacity: .3,
+			strokeWidth: 2,
+			strokeOpacity: 0
+		})
+
+		r("RoundedRectangle", ["series", "column", "volumeprofile"]).states.create("hover", {
+			strokeOpacity: 1
+		})
 
 		r("RoundedRectangle", ["macd", "difference"]).setAll({
 			fillOpacity: 0.5,
@@ -1160,6 +1173,18 @@ export class StockChartDefaultTheme extends Theme {
 			decreasingColor: ic.get("negative")
 		});
 
+		r("VolumeProfile").setAll({
+			name: "Volume Profile",
+			shortName: "VP",
+			upColor: Color.fromHex(0xE3B30C),
+			downColor: Color.fromHex(0x2E78E3),
+			countType: "rows",
+			count: 24,
+			axisWidth: 40,
+			valueArea: 70,
+			valueAreaOpacity: 0.7
+		});
+
 		r("MACD").setAll({
 			name: "MACD",
 			field: "close",
@@ -1190,7 +1215,8 @@ export class StockChartDefaultTheme extends Theme {
 			name: l.translateAny("Indicators"),
 			scrollable: true,
 			fixedLabel: true,
-			indicators: ["Accumulation Distribution", "Accumulative Swing Index", "Aroon", "Awesome Oscillator", "Bollinger Bands", "Chaikin Money Flow", "Chaikin Oscillator", "Commodity Channel Index", "Disparity Index", "MACD", "Median Price", "Momentum", "Moving Average", "Moving Average Deviation", "Moving Average Envelope", "On Balance Volume", "Relative Strength Index", "Standard Deviation", "Stochastic Momentum Index", "Stochastic Oscillator", "Trix", "Typical Price", "Volume", "VWAP", "Williams R", "ZigZag"]
+			searchable: true,
+			indicators: ["Accumulation Distribution", "Accumulative Swing Index", "Aroon", "Awesome Oscillator", "Bollinger Bands", "Chaikin Money Flow", "Chaikin Oscillator", "Commodity Channel Index", "Disparity Index", "MACD", "Median Price", "Momentum", "Moving Average", "Moving Average Deviation", "Moving Average Envelope", "On Balance Volume", "Relative Strength Index", "Standard Deviation", "Stochastic Momentum Index", "Stochastic Oscillator", "Trix", "Typical Price", "Volume", "Volume Profile", "VWAP", "Williams R", "ZigZag"]
 		});
 
 		r("ComparisonControl").setAll({
@@ -1446,6 +1472,10 @@ export class StockChartDefaultTheme extends Theme {
 			fixedLabel: true,
 			//align: "right",
 			items: [{
+				id: "fills",
+				label: l.translateAny("X-axis fills"),
+				className: "am5stock-list-info am5stock-list-heading"
+			}, {
 				form: "checkbox",
 				id: "fills",
 				label: l.translateAny("Fills")
@@ -1468,6 +1498,41 @@ export class StockChartDefaultTheme extends Theme {
 				form: "radio",
 				value: "logarithmic",
 				label: l.translateAny("Logarithmic")
+			}, {
+				id: "autosave",
+				label: l.translateAny("Drawings & Indicators"),
+				className: "am5stock-list-info am5stock-list-heading"
+			}, {
+				id: "autosave",
+				form: "checkbox",
+				label: l.translateAny("Auto-save")
+			},]
+		});
+
+		r("DataSaveControl").setAll({
+			description: l.translateAny("Save drawings and indicators"),
+			togglable: true,
+			fixedLabel: true,
+			autoSave: false,
+			items: [{
+				id: "autosave",
+				form: "checkbox",
+				label: l.translateAny("Auto-save drawings and indicators")
+			}, {
+				id: "autosave",
+				label: ""
+			}, {
+				id: "save",
+				label: l.translateAny("Save drawings & indicators"),
+				subLabel: l.translateAny("Saves drawings/indicators to browser local storage")
+			}, {
+				id: "restore",
+				label: l.translateAny("Restore saved data"),
+				subLabel: l.translateAny("Restores saved data from browser local storage")
+			}, {
+				id: "clear",
+				label: l.translateAny("Clear"),
+				subLabel: l.translateAny("Clears saved data from browser local storage")
 			}]
 		});