@geotab/zenith 1.26.3 → 1.26.4-beta.0

package/README.md

@@ -40,6 +40,12 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 1.26.4
+
+ * Improve accessibility of `Chart`
+ * Delayed loading of `Table` actions on mobile
+ * Improve positioning of `Popup` in edge cases
+
 ### 1.26.3
 
  * Update the title of the dropdown trigger button

package/dist/chart/accessibleChart/accessibleChart.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IAccessibleChart } from "./interfaces";
+import "./accessibleChart.less";
+export declare const AccessibleChart: React.FC<IAccessibleChart>;

package/dist/chart/accessibleChart/accessibleChart.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessibleChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const userFormatProvider_1 = require("../../utils/userFormat/userFormatProvider");
+const accessibleChartNarrative_1 = require("./accessibleChartNarrative");
+const accessibleChartTable_1 = require("./accessibleChartTable");
+const AccessibleChart = (props) => (0, jsx_runtime_1.jsxs)(userFormatProvider_1.UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [props.type !== "pie" && (0, jsx_runtime_1.jsx)(accessibleChartNarrative_1.AccessibleChartNarrative, Object.assign({}, props)), (0, jsx_runtime_1.jsx)(accessibleChartTable_1.AccessibleChartTable, Object.assign({}, props))] });
+exports.AccessibleChart = AccessibleChart;

package/dist/chart/accessibleChart/accessibleChartNarrative.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AccessibleChartDataset, IAccessibleChart, IAccessiblePoint } from "./interfaces";
+import { IBarChartOptions } from "../barChart/interfaces";
+import { ILineChartOptions, ILineChartPoint } from "../lineChart/interfaces";
+export declare function collectAllPoints(dataset: AccessibleChartDataset, dateFormatter: (d: Date | string, format?: string) => string, miniChartLabels?: string[], options?: ILineChartOptions | IBarChartOptions): IAccessiblePoint[];
+export declare function simplifyData(data: ILineChartPoint[]): ILineChartPoint[];
+export declare const AccessibleChartNarrative: React.FC<IAccessibleChart>;

package/dist/chart/accessibleChart/accessibleChartNarrative.js

@@ -0,0 +1,605 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccessibleChartNarrative = exports.simplifyData = exports.collectAllPoints = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const react_1 = require("react");
+const userFormatContext_1 = require("../../utils/userFormat/userFormatContext");
+const formatDate_1 = require("../../utils/formatDate");
+const isDateString_1 = require("../utils/isDateString");
+const getFormattedLabel_1 = require("../utils/getFormattedLabel");
+const truncateDecimals_1 = require("../../utils/truncateDecimals");
+const calculateMinTruncationPrecision_1 = require("../utils/calculateMinTruncationPrecision");
+const removeTrendDataFromDatasets_1 = require("../utils/removeTrendDataFromDatasets");
+function collectAllPoints(dataset, dateFormatter, miniChartLabels, options) {
+    if (dataset.data.length === 0) {
+        return [];
+    }
+    // Minichart data processing
+    if (miniChartLabels) {
+        return dataset.data.map((value, index) => ({
+            x: index,
+            y: typeof value === "number" ? value : 0,
+            originX: index === 0 ? miniChartLabels[0] : (index === dataset.data.length - 1 ? miniChartLabels[miniChartLabels.length - 1] : index)
+        }));
+    }
+    // Standard chart data processing
+    const allPoints = [];
+    for (const [index, point] of dataset.data.entries()) {
+        if (typeof point !== "object" || point === null || !("y" in point)) {
+            continue;
+        }
+        let xNumeric;
+        let originX;
+        const rawXValue = point.x;
+        if (rawXValue instanceof Date || (typeof rawXValue === "string" && (0, isDateString_1.isDateString)(rawXValue))) {
+            xNumeric = new Date(rawXValue).getTime();
+            originX = (0, getFormattedLabel_1.getFormattedLabel)(rawXValue, dateFormatter, options);
+        }
+        else if (typeof rawXValue === "number") {
+            xNumeric = rawXValue;
+            originX = rawXValue;
+        }
+        else {
+            xNumeric = index;
+            originX = rawXValue;
+        }
+        allPoints.push({ x: xNumeric, y: point.y || 0, originX });
+    }
+    return allPoints;
+}
+exports.collectAllPoints = collectAllPoints;
+function simplifyData(data) {
+    // Need at least 3 points to find a peak or valley
+    if (data.length < 3) {
+        return data;
+    }
+    // Calculate Potential Peak/Valley Height and Dominance for Every Point
+    const scoredData = data.map((currentPoint, i) => {
+        if (currentPoint.y === null) {
+            return {
+                point: currentPoint,
+                peakHeight: 0,
+                valleyHeight: 0,
+                peakDominance: 0,
+                valleyDominance: 0
+            };
+        }
+        let peakHeight = 0;
+        let valleyHeight = 0;
+        let peakDominance = 0;
+        let valleyDominance = 0;
+        let localMinForPeak = currentPoint.y;
+        // Scan left
+        for (let j = i - 1; j >= 0; j--) {
+            const point = data[j];
+            if (point.y !== null && point.y < currentPoint.y) {
+                localMinForPeak = Math.min(localMinForPeak, point.y);
+                peakDominance++;
+            }
+            else {
+                break;
+            }
+        }
+        // Scan right
+        for (let j = i + 1; j < data.length; j++) {
+            const point = data[j];
+            if (point.y !== null && point.y < currentPoint.y) {
+                localMinForPeak = Math.min(localMinForPeak, point.y);
+                peakDominance++;
+            }
+            else {
+                break;
+            }
+        }
+        if (peakDominance > 0) {
+            peakHeight = currentPoint.y - localMinForPeak;
+        }
+        // Calculate Valley Height & Dominance
+        let localMaxForValley = currentPoint.y;
+        // Scan left
+        for (let j = i - 1; j >= 0; j--) {
+            const point = data[j];
+            if (point.y !== null && point.y > currentPoint.y) {
+                localMaxForValley = Math.max(localMaxForValley, point.y);
+                valleyDominance++;
+            }
+            else {
+                break;
+            }
+        }
+        // Scan right
+        for (let j = i + 1; j < data.length; j++) {
+            const point = data[j];
+            if (point.y !== null && point.y > currentPoint.y) {
+                localMaxForValley = Math.max(localMaxForValley, point.y);
+                valleyDominance++;
+            }
+            else {
+                break;
+            }
+        }
+        if (valleyDominance > 0) {
+            valleyHeight = localMaxForValley - currentPoint.y;
+        }
+        return { point: currentPoint, peakHeight, valleyHeight, peakDominance, valleyDominance };
+    });
+    // Filter points by trend change and relative height
+    const significantExtremums = [];
+    const strengthThreshold = 0.50;
+    const yValues = data.filter(p => p.y !== null).map(p => p.y);
+    const minY = yValues.reduce((min, current) => Math.min(min, current));
+    const maxY = yValues.reduce((max, current) => Math.max(max, current));
+    const datasetRange = maxY - minY;
+    // Proceed only if there is a range to avoid division by zero
+    if (datasetRange > 0) {
+        for (let i = 1; i < scoredData.length - 1; i++) {
+            const prev = scoredData[i - 1];
+            const current = scoredData[i];
+            const next = scoredData[i + 1];
+            // Check for a peak in the 'peakHeight' values
+            const isPeak = current.peakHeight > prev.peakHeight && current.peakHeight > next.peakHeight;
+            // Check for a peak in the 'valleyHeight' values
+            const isValley = current.valleyHeight > prev.valleyHeight && current.valleyHeight > next.valleyHeight;
+            if (isPeak) {
+                const relHeight = current.peakHeight / datasetRange;
+                if (relHeight >= strengthThreshold && current.peakDominance > 2) {
+                    significantExtremums.push(current.point);
+                }
+            }
+            else if (isValley) {
+                const relHeight = current.valleyHeight / datasetRange;
+                if (relHeight >= strengthThreshold && current.valleyDominance > 2) {
+                    significantExtremums.push(current.point);
+                }
+            }
+        }
+    }
+    const uniquePointsSet = new Set();
+    const finalResult = [];
+    const addPointIfUnique = (point) => {
+        // using a composite key for uniqueness
+        const key = `${point.x.toString()}-${point.y || ""}`;
+        if (!uniquePointsSet.has(key)) {
+            uniquePointsSet.add(key);
+            finalResult.push(point);
+        }
+    };
+    // Add key points to the array
+    addPointIfUnique(data[0]);
+    addPointIfUnique(data[data.length - 1]);
+    const globalMinPoint = data.find(p => p.y === minY);
+    if (globalMinPoint) {
+        addPointIfUnique(globalMinPoint);
+    }
+    const globalMaxPoint = data.find(p => p.y === maxY);
+    if (globalMaxPoint) {
+        addPointIfUnique(globalMaxPoint);
+    }
+    // Add other significant extremums
+    significantExtremums.forEach(addPointIfUnique);
+    // Sort the final result array chronologically
+    finalResult.sort((a, b) => new Date(a.x).getTime() - new Date(b.x).getTime());
+    // Filter out non-significant points based on area under the curve
+    const getSquare = (p1, p2) => {
+        const x1 = new Date(p1.x).getTime();
+        const x2 = new Date(p2.x).getTime();
+        const y1 = p1.y;
+        const y2 = p2.y;
+        return (x2 - x1) * (y1 + (y2 - y1) / 2);
+    };
+    const immutablePoints = [data[0], data[data.length - 1], globalMinPoint, globalMaxPoint].filter(Boolean);
+    for (let i = 1; i < finalResult.length - 1; i++) {
+        const current = finalResult[i];
+        // Skip removal if the current point is one of the designated immutable points
+        if (immutablePoints.some(p => p && p.x === current.x && p.y === current.y)) {
+            continue;
+        }
+        const prev = finalResult[i - 1];
+        const next = finalResult[i + 1];
+        const squareWithPoint = getSquare(prev, current) + getSquare(current, next);
+        const squareWithoutPoint = getSquare(prev, next);
+        const squares = [squareWithPoint, squareWithoutPoint].sort((a, b) => a - b);
+        const squareRatio = squares[0] / squares[1];
+        if (squareRatio > 0.9) {
+            // remove insignificant point
+            finalResult.splice(i, 1);
+            i--;
+        }
+    }
+    return finalResult;
+}
+exports.simplifyData = simplifyData;
+function getTrendDirectionBySlope(slope) {
+    const slopeThreshold = 1e-10;
+    if (slope > slopeThreshold) {
+        return "increases";
+    }
+    if (slope < -slopeThreshold) {
+        return "decreases";
+    }
+    return "flat";
+}
+function calculateLinearRegression(points) {
+    if (points.length < 2) {
+        return { slope: NaN, yIntercept: NaN };
+    }
+    const sumX = points.reduce((sum, p) => sum + p.x, 0);
+    const sumY = points.reduce((sum, p) => sum + p.y, 0);
+    const meanX = sumX / points.length;
+    const meanY = sumY / points.length;
+    let numerator = 0;
+    let denominator = 0;
+    for (const p of points) {
+        numerator += (p.x - meanX) * (p.y - meanY);
+        denominator += (p.x - meanX) * (p.x - meanX);
+    }
+    const slope = denominator === 0 ? 0 : numerator / denominator;
+    const yIntercept = meanY - slope * meanX;
+    return { slope, yIntercept };
+}
+function detectTwoStateChart(dataset, translate, dateFormatter, miniChartLabels, options) {
+    const allPoints = collectAllPoints(dataset, dateFormatter, miniChartLabels, options);
+    if (allPoints.length <= 2) {
+        return false;
+    }
+    const datasetName = dataset.label || translate("Data");
+    const uniqueYValues = new Set();
+    const tolerance = 1e-6;
+    for (const point of allPoints) {
+        uniqueYValues.add(point.y);
+        if (uniqueYValues.size > 2) {
+            return false;
+        }
+    }
+    const isTwoState = uniqueYValues.size === 2;
+    if (!isTwoState) {
+        return false;
+    }
+    // Count state transitions
+    let transitions = 0;
+    for (let i = 1; i < allPoints.length; i++) {
+        const prevValue = allPoints[i - 1].y;
+        const currentValue = allPoints[i].y;
+        if (Math.abs(prevValue - currentValue) > tolerance) {
+            transitions++;
+        }
+    }
+    const [val1, val2] = uniqueYValues;
+    const decimalLength = (0, calculateMinTruncationPrecision_1.calculateMinTruncationPrecision)([val1, val2]);
+    const summary = `${datasetName} ${translate("switched {TRANSITIONS} times between two states: {STATE1} and {STATE2}.")
+        .replace("{STATE1}", (0, truncateDecimals_1.truncateDecimals)(val1, decimalLength).toString())
+        .replace("{STATE2}", (0, truncateDecimals_1.truncateDecimals)(val2, decimalLength).toString())
+        .replace("{TRANSITIONS}", transitions.toString())}`;
+    return summary;
+}
+// Calculates the Median Absolute Deviation (MAD) for a given array of numbers.
+function calculateMAD(data, scaleFactor = 1.4826) {
+    if (data.length === 0) {
+        return 0;
+    }
+    // Sort the data to find the median
+    const sortedData = [...data].sort((a, b) => a - b);
+    const mid = Math.floor(sortedData.length / 2);
+    let median;
+    if (sortedData.length % 2 === 0) {
+        median = (sortedData[mid - 1] + sortedData[mid]) / 2;
+    }
+    else {
+        median = sortedData[mid];
+    }
+    // Calculate absolute deviations from the median
+    const deviations = sortedData.map(d => Math.abs(d - median));
+    let mad;
+    const madMid = Math.floor(deviations.length / 2);
+    if (deviations.length % 2 === 0) {
+        mad = (deviations[madMid - 1] + deviations[madMid]) / 2;
+    }
+    else {
+        mad = deviations[madMid];
+    }
+    return mad * scaleFactor;
+}
+function getInliersForSmallSet(allPoints) {
+    // Only proceed if there are enough points to perform exclusion
+    if (allPoints.length < 3) {
+        return allPoints;
+    }
+    const initialLr = calculateLinearRegression(allPoints);
+    const initialResiduals = allPoints.map((point) => ({
+        point,
+        residual: Math.abs(point.y - (initialLr.slope * point.x + initialLr.yIntercept))
+    }));
+    // Sort to put the worst-fitting point (largest residual) first
+    initialResiduals.sort((a, b) => b.residual - a.residual);
+    // Exclude the top residual (the potential outlier) and return the rest as inliers.
+    return initialResiduals.slice(1).map(r => r.point);
+}
+function getInliersForLargeSet(allPoints, initialLr) {
+    const initialResiduals = allPoints.map(point => {
+        const predictedY = initialLr.slope * point.x + initialLr.yIntercept;
+        return point.y - predictedY;
+    });
+    const madOfInitialResiduals = calculateMAD(initialResiduals);
+    const strictInlierFilter = 1.5;
+    const pointsForRobustLr = [];
+    if (madOfInitialResiduals > 1e-9) {
+        for (let i = 0; i < allPoints.length; i++) {
+            if (Math.abs(initialResiduals[i]) <= strictInlierFilter * madOfInitialResiduals) {
+                pointsForRobustLr.push(allPoints[i]);
+            }
+        }
+    }
+    else {
+        // If no spread, use all points.
+        pointsForRobustLr.push(...allPoints);
+    }
+    return pointsForRobustLr;
+}
+function detectSignificantDeviations(allPoints, translate, decimalLength, deviationThreshold = 2) {
+    if (allPoints.length < 3) {
+        return null;
+    }
+    let pointsForRobustLr = [];
+    let initialLr = null;
+    // If the dataset is tiny (where MAD-based filtering is most fragile)
+    if (allPoints.length <= 5) {
+        pointsForRobustLr = getInliersForSmallSet(allPoints);
+    }
+    else {
+        initialLr = calculateLinearRegression(allPoints);
+        pointsForRobustLr = getInliersForLargeSet(allPoints, initialLr);
+    }
+    let finalSlope;
+    let finalYIntercept;
+    // Use the determined pointsForRobustLr for the final regression
+    if (pointsForRobustLr.length < 2) {
+        console.warn("Not enough points for robust regression, falling back to all points.");
+        if (!initialLr) {
+            initialLr = calculateLinearRegression(allPoints);
+        }
+        finalSlope = initialLr.slope;
+        finalYIntercept = initialLr.yIntercept;
+    }
+    else {
+        const robustLr = calculateLinearRegression(pointsForRobustLr);
+        finalSlope = robustLr.slope;
+        finalYIntercept = robustLr.yIntercept;
+    }
+    // Calculate Final Residuals for ALL Original Points against the Robust Line
+    const pointsWithFinalResiduals = allPoints.map(point => {
+        const predictedYRobust = finalSlope * point.x + finalYIntercept;
+        const residual = point.y - predictedYRobust;
+        return Object.assign(Object.assign({}, point), { residual: residual, isSignificantlyHigh: false, isSignificantlyLow: false });
+    });
+    const finalResidualsForDetection = pointsWithFinalResiduals.map(p => p.residual);
+    const robustResidualSpread = calculateMAD(finalResidualsForDetection);
+    const SMALL_TOLERANCE = 1e-9;
+    let effectiveDeviationMeasure = robustResidualSpread;
+    const isSmallSet = allPoints.length <= 5;
+    // Calculate the Y-range of the final data set for absolute thresholding
+    const yValues = allPoints.map(p => p.y);
+    const yMin = yValues.reduce((min, current) => Math.min(min, current), Infinity);
+    const yMax = yValues.reduce((max, current) => Math.max(max, current), -Infinity);
+    const yRange = yMax - yMin;
+    // Set a very low absolute residual floor (e.g., 5% of the total range)
+    const ABS_RESIDUAL_FLOOR = yRange * 0.05; // 5% of range
+    if (effectiveDeviationMeasure < SMALL_TOLERANCE) {
+        const maxResidual = finalResidualsForDetection.reduce((max, current) => Math.max(max, Math.abs(current)), 0);
+        effectiveDeviationMeasure = maxResidual > SMALL_TOLERANCE ? maxResidual / (deviationThreshold + SMALL_TOLERANCE) : 0;
+    }
+    else if (isSmallSet) {
+        // Aggressively reduce the spread measure for small sets with non-zero MAD
+        effectiveDeviationMeasure = effectiveDeviationMeasure / 1.5;
+    }
+    const significantDeviations = [];
+    // Detect Significant Deviations using the robust spread
+    if (effectiveDeviationMeasure > SMALL_TOLERANCE) {
+        for (const pointWithRes of pointsWithFinalResiduals) {
+            const isSignificantByMAD = Math.abs(pointWithRes.residual) > deviationThreshold * effectiveDeviationMeasure;
+            const isSignificantByFloor = Math.abs(pointWithRes.residual) > ABS_RESIDUAL_FLOOR;
+            if (isSignificantByMAD || isSignificantByFloor) {
+                significantDeviations.push(Object.assign(Object.assign({}, pointWithRes), { isSignificantlyHigh: pointWithRes.residual > 0, isSignificantlyLow: pointWithRes.residual < 0 }));
+            }
+        }
+    }
+    // Check for Absolute Maximum Inclusion
+    const maxIsIncluded = significantDeviations.some(sd => sd.y === yMax);
+    if (!maxIsIncluded) {
+        const maxPoint = allPoints.find(p => p.y === yMax);
+        if (maxPoint) {
+            // Flag the absolute max as a significant deviation if it was missed
+            significantDeviations.push(Object.assign(Object.assign({}, maxPoint), { residual: maxPoint.y - (finalSlope * maxPoint.x + finalYIntercept), isSignificantlyHigh: true, isSignificantlyLow: false }));
+        }
+    }
+    // Check for Absolute Minimum Inclusion
+    const minIsIncluded = significantDeviations.some(sd => sd.y === yMin);
+    if (!minIsIncluded) {
+        const minPoint = allPoints.find(p => p.y === yMin);
+        if (minPoint) {
+            // Flag the absolute min as a significant deviation if it was missed
+            significantDeviations.push(Object.assign(Object.assign({}, minPoint), { residual: minPoint.y - (finalSlope * minPoint.x + finalYIntercept), isSignificantlyHigh: false, isSignificantlyLow: true // It's the lowest point
+             }));
+        }
+    }
+    if (significantDeviations.length === 0) {
+        return null;
+    }
+    let summary = "";
+    const highestPoints = significantDeviations.filter(sd => sd.isSignificantlyHigh);
+    const lowestPoints = significantDeviations.filter(sd => sd.isSignificantlyLow);
+    const MAX_POINTS_TO_REPORT = 5;
+    if (highestPoints.length > 0) {
+        const uniqueHighestY = [...new Set(highestPoints.map(hp => hp.y))];
+        uniqueHighestY.sort((a, b) => b - a);
+        const limitedHighestY = uniqueHighestY.slice(0, MAX_POINTS_TO_REPORT);
+        const formattedHighestY = limitedHighestY.map(y => (0, truncateDecimals_1.truncateDecimals)(y, decimalLength)).join(", ");
+        summary += `${translate("Highest point(s):")} ${formattedHighestY}. `;
+    }
+    if (lowestPoints.length > 0) {
+        const uniqueLowestY = [...new Set(lowestPoints.map(lp => lp.y))];
+        uniqueLowestY.sort((a, b) => a - b);
+        const limitedLowestY = uniqueLowestY.slice(0, MAX_POINTS_TO_REPORT);
+        const formattedLowestY = limitedLowestY.map(y => (0, truncateDecimals_1.truncateDecimals)(y, decimalLength)).join(", ");
+        summary += `${translate("Lowest point(s):")} ${formattedLowestY}. `;
+    }
+    return summary.trim();
+}
+function calculateNumberOfSegments(points) {
+    const minPointsForSegmentation = 50;
+    const maxSegments = 8;
+    const base = 5;
+    if (points.length <= minPointsForSegmentation) {
+        return 1;
+    }
+    const calculatedSegments = Math.floor(base * Math.log(points.length));
+    return Math.min(calculatedSegments, maxSegments);
+}
+function splitIntoSegments(points) {
+    const numSegments = calculateNumberOfSegments(points);
+    if (numSegments === 1) {
+        return [points];
+    }
+    const segments = [];
+    const segmentSize = Math.floor(points.length / numSegments);
+    const remainder = points.length % numSegments;
+    let startIndex = 0;
+    for (let i = 0; i < numSegments; i++) {
+        const currentSegmentSize = segmentSize + (i < remainder ? 1 : 0);
+        const endIndex = startIndex + currentSegmentSize;
+        segments.push(points.slice(startIndex, endIndex));
+        startIndex = endIndex;
+    }
+    return segments;
+}
+function detectComplexTrend(allPoints, datasetName, decimalLength, translate) {
+    const segments = splitIntoSegments(allPoints);
+    const segmentTrends = segments.map(segment => calculateLinearRegression(segment));
+    const trendDirections = segmentTrends.map(trend => getTrendDirectionBySlope(trend.slope));
+    const isComplex = new Set(trendDirections).size > 1;
+    if (isComplex) {
+        const summaryParts = trendDirections.map((direction, index) => {
+            const startPoint = segments[index][0];
+            const endPoint = segments[index][segments[index].length - 1];
+            return translate(`Segment {INDEX} {DIRECTION} from {FROM} at {X0} to {TO} at {X}.`)
+                .replace("{INDEX}", (index + 1).toString())
+                .replace("{DIRECTION}", direction)
+                .replace("{FROM}", (0, truncateDecimals_1.truncateDecimals)(startPoint.y, decimalLength).toString())
+                .replace("{TO}", (0, truncateDecimals_1.truncateDecimals)(endPoint.y, decimalLength).toString())
+                .replace("{X0}", startPoint.originX.toString())
+                .replace("{X}", endPoint.originX.toString());
+        });
+        const complexSummary = `${datasetName} ${translate("shows a complex trend with multiple segments:")} ${summaryParts.join(" ")}`;
+        return complexSummary;
+    }
+    return false;
+}
+function calculateAverageValue(points) {
+    const yValues = points.map(point => point.y);
+    const validNumbers = yValues.filter(n => typeof n === "number");
+    if (validNumbers.length === 0) {
+        return null;
+    }
+    const sum = validNumbers.reduce((total, current) => total + current, 0);
+    return sum / validNumbers.length;
+}
+function detectDatasetTrend(dataset, translate, dateFormatter, miniChartLabels, options) {
+    const datasetName = dataset.label || translate("Data");
+    const twoState = detectTwoStateChart(dataset, translate, dateFormatter, miniChartLabels, options);
+    if (twoState) {
+        return { trendDirection: "flat", summary: twoState };
+    }
+    const datasetObj = Object.assign({}, dataset);
+    if (!miniChartLabels) {
+        // simplify the data before trend detection
+        datasetObj.data = simplifyData(datasetObj.data);
+    }
+    const allPoints = collectAllPoints(datasetObj, dateFormatter, miniChartLabels, options);
+    if (allPoints.length === 0) {
+        return { trendDirection: "undefined", summary: translate("No data available") };
+    }
+    const allUniqueYValues = [...new Set(allPoints.map(p => p.y))];
+    const decimalLength = (0, calculateMinTruncationPrecision_1.calculateMinTruncationPrecision)(allUniqueYValues);
+    if (allPoints.length === 1) {
+        return { trendDirection: "flat", summary: translate("Only one data point: value is {VALUE}.").replace("{VALUE}", (0, truncateDecimals_1.truncateDecimals)(allPoints[0].y, decimalLength).toString()) };
+    }
+    const complexTrend = detectComplexTrend(allPoints, datasetName, decimalLength, translate);
+    if (complexTrend) {
+        return { trendDirection: "complex", summary: complexTrend };
+    }
+    const { slope } = calculateLinearRegression(allPoints);
+    let trendDirection = getTrendDirectionBySlope(slope);
+    const firstPoint = allPoints[0];
+    const lastPoint = allPoints[allPoints.length - 1];
+    const yValues = allPoints.map(p => p.y);
+    const yMin = yValues.reduce((min, current) => Math.min(min, current));
+    const yMax = yValues.reduce((max, current) => Math.max(max, current));
+    const yRange = yMax - yMin;
+    const netChange = lastPoint.y - firstPoint.y;
+    // A tolerance to decide if the net change is significant enough
+    // to overrule a weak linear regression. (e.g., a 5% change of the total range).
+    const NARRATIVE_TREND_THRESHOLD = 0.05;
+    // If the linear regression detected a non-flat trend, check if it's strong enough.
+    if (trendDirection !== "flat" && yRange > 1e-9) {
+        const netChangeRatio = Math.abs(netChange / yRange);
+        if (netChangeRatio < NARRATIVE_TREND_THRESHOLD) {
+            trendDirection = "flat";
+        }
+        else {
+            const netDirection = netChange > 1e-9 ? "increases" : "decreases";
+            if (trendDirection !== netDirection) {
+                trendDirection = netDirection;
+            }
+        }
+    }
+    let summary;
+    if (trendDirection === "flat") {
+        const averageValue = calculateAverageValue(allPoints);
+        const averageString = averageValue ? ` ${translate("Average value is:")} ${(0, truncateDecimals_1.truncateDecimals)(averageValue, decimalLength)}` : "";
+        const FLAT_TREND_TOLERANCE = 0.25;
+        if (yMax - yMin < FLAT_TREND_TOLERANCE) {
+            summary = `${datasetName} ${translate("shows a relatively flat or stable trend.")} ${averageString}`;
+        }
+        else {
+            const formattedYMin = (0, truncateDecimals_1.truncateDecimals)(yMin, decimalLength);
+            const formattedYMax = (0, truncateDecimals_1.truncateDecimals)(yMax, decimalLength);
+            summary = `${datasetName} ${translate("value changes in the range from {MIN} to {MAX}.")
+                .replace("{MIN}", formattedYMin.toString())
+                .replace("{MAX}", formattedYMax.toString())}
+                ${averageString}`;
+        }
+    }
+    else {
+        summary = `${datasetName} ${trendDirection} ${translate("from {FROM} at {X0} to {TO} at {X}.")
+            .replace("{FROM}", (0, truncateDecimals_1.truncateDecimals)(firstPoint.y, decimalLength).toString())
+            .replace("{TO}", (0, truncateDecimals_1.truncateDecimals)(lastPoint.y, decimalLength).toString())
+            .replace("{X0}", firstPoint.originX.toString())
+            .replace("{X}", lastPoint.originX.toString())}`;
+        const significantDeviations = detectSignificantDeviations(allPoints, translate, decimalLength);
+        if (significantDeviations && typeof significantDeviations === "string") {
+            summary += ` ${significantDeviations}`;
+        }
+    }
+    return { trendDirection, summary };
+}
+const AccessibleChartNarrative = ({ data, options }) => {
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    const miniChartLabels = (0, react_1.useMemo)(() => data.labels, [data]);
+    const { dateFormat, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+    const dateFormatter = (0, react_1.useCallback)((d, format = dateFormat) => (0, formatDate_1.formatDate)(toLocalDateTime(d), format, translate), [toLocalDateTime, dateFormat, translate]);
+    const filteredDatasets = (0, removeTrendDataFromDatasets_1.removeTrendDataFromDatasets)(data.datasets);
+    const datasetsWithAnalysis = (0, react_1.useMemo)(() => filteredDatasets.map(dataset => {
+        const datasetObj = Object.assign({}, dataset);
+        try {
+            const trend = detectDatasetTrend(datasetObj, translate, dateFormatter, miniChartLabels, options);
+            return trend.summary;
+        }
+        catch (error) {
+            const errMsg = `${translate("Error generating chart narrative for dataset")} ${dataset.label || ""}`;
+            console.error(errMsg, error);
+            return errMsg;
+        }
+    }), [filteredDatasets, translate, dateFormatter, miniChartLabels, options]);
+    return (0, jsx_runtime_1.jsx)("div", { className: "screen-reader-only", children: datasetsWithAnalysis.map((analysis, index) => (0, jsx_runtime_1.jsx)("div", { children: analysis }, index)) });
+};
+exports.AccessibleChartNarrative = AccessibleChartNarrative;

package/dist/chart/accessibleChart/accessibleChartTable.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IAccessibleChart } from "./interfaces";
+export declare const AccessibleChartTable: React.FC<IAccessibleChart>;