@oliasoft-open-source/charts-library 7.0.1 → 8.0.0-beta-2

package/README.md

@@ -19,6 +19,20 @@ You do not need to pass these objects: omitted options receive these values auto
 - The snapshots describe the initial empty configuration. Per-item defaults for supplied annotations and DS are
   applied separately by their normalizers and renderers.
 
+## Migrating LineChart tooltips to 8.0
+
+Tooltip coordinate roles no longer depend on axis placement. The default title shows X and the DS row shows Y.
+Set `options.tooltip.titleAxis` to `'y'` when the title should show Y and the DS row should show X.
+Charts that previously relied on a top-positioned X axis must set this explicitly to preserve their tooltip order.
+If your application swaps X/Y coordinates, update `titleAxis` to keep the intended quantity in the title.
+This setting does not move axes, reverse scales or transpose data.
+
+The default DS row reads units from the corresponding axis `unit` string or `unit.selectedUnit` when non-empty,
+then falls back to units in square brackets in that axis label. The title appends its axis label.
+Each hovered DS uses its own axis bindings, including numbered IDs such as `x10` and `y10`.
+Time and category values retain their formatted labels. Custom `title`, `label` and `afterLabel` callbacks
+continue to override their respective defaults independently.
+
 ## LineChart
 
 ```ts
@@ -95,6 +109,7 @@ const defaultChart = {
       hideSimulationName: false,
       scientificNotation: true,
       callbacks: undefined,
+      titleAxis: 'x',
     },
     graph: {
       lineTension: 0.01,

package/dist/index.d.ts

@@ -1106,13 +1106,14 @@ export declare interface ILineChartAxis<PositionType = TAxisPosition> {
     id?: string;
     /** Axis title, also appended to the default tooltip title when this is the selected title axis. */
     label?: string;
-    /** Axis placement. Placing the first X axis at the top also swaps the default tooltip coordinate roles. */
+    /** Visual axis placement; does not affect tooltip coordinate roles. */
     position?: PositionType;
     /** Canvas/CSS colour used by this element. */
     color?: string | string[];
     /**
      * Unit metadata or a consumer-owned unit selector. Does not convert DS coordinates.
-     * Default tooltip units are extracted from square brackets in the axis label, not from this field.
+     * The default DS tooltip row uses this string or `selectedUnit` when non-empty, otherwise it extracts
+     * units from square brackets in the value-axis label. The title uses the title-axis label instead.
      */
     unit?: IUnitOptions | string;
     /** Requested spacing between axis ticks, in scale units. */
@@ -1340,15 +1341,28 @@ export declare interface ILineChartStyling extends ICommonStyling {
 }
 
 /**
- * LineChart tooltip formatting and callback overrides.
- * When the first X axis is placed at the top, the default title uses Y and the DS row uses X.
- * Otherwise, the title uses X and the DS row uses Y. Callbacks can override this formatting.
+ * LineChart tooltip formatting and callback overrides, independent of axis placement.
+ * By default the title uses X and the DS row uses Y; `titleAxis` swaps these coordinate roles.
  */
 export declare interface ILineChartTooltip extends ICommonTooltip {
     /** Compatibility flag retained by LineChart; currently does not alter tooltip text. */
     hideSimulationName?: boolean;
     /** Allows scientific notation when formatting tooltip numbers. Defaults to true. */
     scientificNotation?: boolean;
+    /**
+     * Axis whose value and axis label appear in the default tooltip title.
+     * The other axis supplies the value beside the DS name. Does not move or reverse axes.
+     * Axis configuration is resolved from the hovered DS axis IDs (`x`, `x2`, `y`, `y2`, ...).
+     * Time and category values use formatted scale values rather than raw numeric coordinates.
+     * Custom title and label callbacks override their respective defaults independently.
+     * Update this option when swapping data coordinates if the same quantity should remain in the title.
+     * @defaultValue 'x'
+     * @example
+     * ```ts
+     * const tooltip: ILineChartTooltip = { titleAxis: 'y' };
+     * ```
+     */
+    titleAxis?: `${AxisType}`;
 }
 
 /** LineChart pointer, legend and animation lifecycle callbacks. */
@@ -2206,25 +2220,25 @@ export { }
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        lineMarkersPlugin?: {
-            enabled?: boolean;
-        } | TLineMarkersOptions;
+        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
     }
 }
 
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        annotationDraggerPlugin?: AnnotationDraggerPluginOptions;
+        calloutConnectorPlugin?: {
+            enableCalloutAnnotation?: boolean;
+        };
     }
 }
 
 
 declare module 'chart.js' {
     interface PluginOptionsByType<TType extends ChartType> {
-        calloutConnectorPlugin?: {
-            enableCalloutAnnotation?: boolean;
-        };
+        lineMarkersPlugin?: {
+            enabled?: boolean;
+        } | TLineMarkersOptions;
     }
 }
 

package/dist/index.js

@@ -20559,7 +20559,8 @@ var defaultTooltip$3 = (tooltip) => ({
 	showLabelsInTooltips: tooltip?.showLabelsInTooltips ?? false,
 	hideSimulationName: tooltip?.hideSimulationName ?? false,
 	scientificNotation: tooltip?.scientificNotation ?? true,
-	callbacks: tooltip?.callbacks
+	callbacks: tooltip?.callbacks,
+	titleAxis: tooltip?.titleAxis ?? AxisType.X
 });
 var defaultGraph$3 = (graph) => ({
 	lineTension: graph?.lineTension ?? .01,
@@ -21212,45 +21213,38 @@ var getLineChartToolTips = (options) => {
 			callbacks: {}
 		};
 	}
-	const { scientificNotation = true } = options?.tooltip ?? {};
-	const getTooltipLabels = ({ xAxisID = "", yAxisID = "" }) => {
-		const xIndex = xAxisID?.length > 1 ? Number(xAxisID?.[1]) - 1 : 0;
-		const yIndex = yAxisID?.length > 1 ? Number(yAxisID?.[1]) - 1 : 0;
-		const xAxis = options?.axes?.x?.[xIndex];
-		const yAxis = options?.axes?.y?.[yIndex];
-		if (options?.axes?.x?.[0]?.position === Position.Top) return {
-			titleAxisLabel: yAxis?.label || "",
-			valueAxisLabel: xAxis?.label || "",
-			titleLabel: TooltipLabel.Y,
-			valueLabel: TooltipLabel.X
-		};
-		else return {
-			titleAxisLabel: xAxis?.label || "",
-			valueAxisLabel: yAxis?.label || "",
-			titleLabel: TooltipLabel.X,
-			valueLabel: TooltipLabel.Y
-		};
-	};
-	const titleCallback = (tooltipItem) => {
-		if (!tooltipItem?.[0]) return "";
-		const { titleLabel = "", titleAxisLabel = "" } = getTooltipLabels(tooltipItem[0].dataset) ?? {};
-		const titleAxisId = titleLabel === TooltipLabel.Y ? tooltipItem[0].dataset?.yAxisID ?? "y" : tooltipItem[0].dataset?.xAxisID ?? "x";
-		const titleScaleType = options?.scales?.[titleAxisId]?.type;
-		const titleValue = isTimeScaleType(titleScaleType) || titleScaleType === "category" ? tooltipItem[0].label : void 0;
-		const formattedValue = titleLabel === TooltipLabel.Y ? tooltipItem?.[0]?.parsed?.y : tooltipItem?.[0]?.parsed?.x;
-		return `${titleValue ?? customFormatNumber$1(formattedValue, scientificNotation)} ${titleAxisLabel}`;
-	};
-	const labelCallback = (tooltipItem) => {
-		const { showLabelsInTooltips = false } = options?.tooltip ?? {};
-		let label = tooltipItem?.dataset?.label || "";
-		const { valueLabel = "", valueAxisLabel = "" } = getTooltipLabels(tooltipItem?.dataset) ?? {};
-		const getTooltipItemValue = () => {
-			const valueAxisId = valueLabel === TooltipLabel.X ? tooltipItem.dataset?.xAxisID ?? "x" : tooltipItem.dataset?.yAxisID ?? "y";
-			const valueScaleType = options?.scales?.[valueAxisId]?.type;
-			if ((isTimeScaleType(valueScaleType) || valueScaleType === "category") && tooltipItem.label) return tooltipItem.label;
-			return customFormatNumber$1(valueLabel === TooltipLabel.X ? tooltipItem?.parsed?.x : tooltipItem?.parsed?.y, scientificNotation);
-		};
-		return `${label}: ${getTooltipItemValue()} ${getUnitsFromLabel(valueAxisLabel)} ${getTooltipLabel(tooltipItem, showLabelsInTooltips)}`;
+	const { scientificNotation = true, showLabelsInTooltips = false, titleAxis = AxisType.X } = options?.tooltip ?? {};
+	const valueAxis = titleAxis === AxisType.X ? AxisType.Y : AxisType.X;
+	const getAxis = (item, axis) => {
+		const axisIdKey = `${axis}AxisID`;
+		const id = item.dataset[axisIdKey] || axis;
+		const index = id === axis ? 0 : toNum(id.slice(1)) - 1;
+		return {
+			id,
+			config: options.axes[axis][index]
+		};
+	};
+	const formatValue = (item, axis) => {
+		const { id } = getAxis(item, axis);
+		const scale = item.chart?.scales[id];
+		const scaleType = scale?.type ?? options.scales?.[id]?.type;
+		const value = item.parsed[axis];
+		if (value === null || value === void 0) return "";
+		if (scaleType === ScaleType.Time || scaleType === ScaleType.TimeSeries || scaleType === ScaleType.Category) return (axis === (item.chart?.getDatasetMeta(item.datasetIndex).iScale?.axis ?? AxisType.X) ? item.label : item.formattedValue) || scale?.getLabelForValue(value) || String(value);
+		return customFormatNumber$1(value, scientificNotation);
+	};
+	const titleCallback = (items) => {
+		const item = items?.[0];
+		if (!item) return "";
+		const { config } = getAxis(item, titleAxis);
+		return `${formatValue(item, titleAxis)} ${config?.label || ""}`;
+	};
+	const labelCallback = (item) => {
+		const { config } = getAxis(item, valueAxis);
+		const units = (typeof config?.unit === "string" ? config.unit : config?.unit?.selectedUnit) || getUnitsFromLabel(config?.label || "");
+		const label = item.dataset.label || "";
+		const pointLabel = getTooltipLabel(item, showLabelsInTooltips);
+		return `${label}: ${formatValue(item, valueAxis)} ${units} ${pointLabel}`;
 	};
 	const userCallbacks = options?.tooltip?.callbacks ?? null;
 	const callbacks = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "7.0.1",
+  "version": "8.0.0-beta-2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {