Feat/ Enhance TableHeatMap with Gradient Middle Feature

CHANGELOG.md

@@ -2,10 +2,23 @@
 
 ### New features
 * Added "Invert Color Scale" toggle to reverse the color gradient direction
+* Diverging (three-stop) gradient: new "Add gradient middle" toggle and "Gradient middle" colour picker in the Format pane → General → Gradient Colors group. When enabled, the colour scale interpolates smoothly through the chosen midpoint colour (default: `#767676`). The midpoint uses this default until the user explicitly changes it in the Format pane.
+
+### Bug fixes
+* Fixed "Invert Color Scale" and gradient middle colour not being neutralized in high-contrast mode; both features are now automatically disabled when the Power BI high-contrast theme is active to preserve accessibility contrast requirements.
+* Fixed bucket count upper bound not being restored when switching from a Colorbrewer palette back to the custom gradient mode; the maximum was previously stuck at the palette's supported range rather than resetting to 18.
+* Fixed gradient middle anchor being skewed left-of-centre for even bucket counts; the three-stop domain now uses a fractional midpoint so both odd and even counts produce a symmetric diverging scale.
+
+### Code quality
+* Renamed internal constant `AdditionalSpaceForColorbrewerCells` → `GridHeightAdjustmentFactor` to reflect that the padding applies in all rendering modes.
+* `GeneralSettings.stroke` converted from a `static` mutable field to an instance field on `GeneralSettings`; high-contrast and non-high-contrast paths now reset it on every render, eliminating cross-render state leakage.
+* `SettingsModel.cards` type widened from `FormattingSettingsSimpleCard[]` to `FormattingSettingsCard[]` (`SimpleCard | CompositeCard`) to correctly reflect that `GeneralSettings` extends `CompositeCard`.
+* Replaced tautological `expect(querySelectorAll(…)).toBeTruthy()` assertions in unit tests with `expect(…length).toBeGreaterThan(0)`.
 
 ### Other
 * Upgraded powerbi-visuals-tools from ^6.1.1 to ^7.0.3
 * Added unit tests for invertColorScale and getOpacity utility
+* Format pane General card restructured into three named groups: **Colorbrewer**, **Gradient Colors**, and **Additional settings**.
 
 ## 4.0.0.0
 

capabilities.json

@@ -227,6 +227,20 @@
                         }
                     }
                 },
+                "activateGradientMiddle": {
+                    "type": {
+                        "bool": true
+                    }
+                },
+                "gradientMiddle": {
+                    "type": {
+                        "fill": {
+                            "solid": {
+                                "color": true
+                            }
+                        }
+                    }
+                },
                 "gradientEnd": {
                     "type": {
                         "fill": {

src/heatmapUtils.ts

@@ -23,6 +23,18 @@
  *  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  *  THE SOFTWARE.
  */
+import powerbi from "powerbi-visuals-api";
+
+import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
+
+import { pixelConverter as PixelConverter } from "powerbi-visuals-utils-typeutils";
+import { ColorHelper } from "powerbi-visuals-utils-colorutils";
+
+import maxBy from "lodash.maxby";
+
+import { IColorArray, TableHeatMapChartData } from "./dataInterfaces";
+import { BaseLabelCardSettings, colorbrewer, SettingsModel, YAxisLabelsSettings } from "./settings";
+
 export const DimmedOpacity: number = 0.4;
 export const DefaultOpacity: number = 1.0;
 export const DimmedColor: string = "black";
@@ -38,4 +50,135 @@ export function getOpacity(
     }
 
     return DefaultOpacity;
+}
+
+export const YAxisAdditionalMargin: number = 5;
+export const GridHeightAdjustmentFactor: number = 2;
+export const ConstGridMinHeight: number = 5;
+export const ConstGridMinWidth: number = 1;
+export const CellMaxHeightLimit: number = 300;
+export const CellMaxWidthFactorLimit: number = 15;
+
+export function isDataViewValid(dataView: powerbi.DataView): boolean {
+    return !!(dataView.categorical?.categories && dataView.categorical?.values);
+}
+
+export function textLimit(text: string, limit: number): string {
+    if (text.length > limit) {
+        return ((text || "").substring(0, limit).trim()) + "\u2026";
+    }
+
+    return text;
+}
+
+export function getYAxisWidth(chartData: TableHeatMapChartData, settings: YAxisLabelsSettings): number {
+    let maxLengthText: powerbi.PrimitiveValue = maxBy(chartData.categoryY, (d) => String(d).length) || "";
+
+    maxLengthText = textLimit(maxLengthText.toString(), settings.maxTextSymbol.value);
+
+    return settings.show.value ? textMeasurementService.measureSvgTextWidth({
+        fontSize: PixelConverter.toString(settings.fontSize.value),
+        text: maxLengthText.trim(),
+        fontFamily: settings.fontFamily.value.toString()
+    }) + YAxisAdditionalMargin : 0;
+}
+
+export function getXAxisHeight(chartData: TableHeatMapChartData, settings: BaseLabelCardSettings): number {
+    const categoryX: string[] = chartData.categoryX.map(x => x?.toString() ?? "");
+    const maxLengthText: powerbi.PrimitiveValue = maxBy(categoryX, "length") || "";
+
+    return settings.show.value ? textMeasurementService.measureSvgTextHeight({
+        fontSize: PixelConverter.toString(settings.fontSize.value),
+        text: maxLengthText.toString().trim(),
+        fontFamily: settings.fontFamily.value.toString()
+    }) : 0;
+}
+
+export function getYAxisHeight(chartData: TableHeatMapChartData, settings: YAxisLabelsSettings): number {
+    const maxLengthText: powerbi.PrimitiveValue = maxBy(chartData.categoryY, (d) => String(d).length) || "";
+
+    return textMeasurementService.measureSvgTextHeight({
+        fontSize: PixelConverter.toString(settings.fontSize.value),
+        text: maxLengthText.toString().trim(),
+        fontFamily: settings.fontFamily.value.toString()
+    });
+}
+
+export function calculateGridSizeHeight(
+    viewportHeight: number,
+    xAxisHeight: number,
+    categoryYLength: number,
+    marginTop: number,
+    marginBottom: number
+): number {
+    const gridSizeHeight: number = Math.floor(
+        (viewportHeight - marginTop - xAxisHeight - marginBottom - YAxisAdditionalMargin) /
+        (categoryYLength + GridHeightAdjustmentFactor)
+    );
+
+    return Math.max(ConstGridMinHeight, Math.min(gridSizeHeight, CellMaxHeightLimit));
+}
+
+export function calculateGridSizeWidth(
+    viewportWidth: number,
+    yAxisWidth: number,
+    categoryXLength: number,
+    gridSizeHeight: number
+): number {
+    if (categoryXLength <= 0) {
+        return ConstGridMinWidth;
+    }
+    const gridSizeWidth: number = Math.floor((viewportWidth - yAxisWidth) / categoryXLength);
+
+    return Math.max(ConstGridMinWidth, Math.min(gridSizeWidth, gridSizeHeight * CellMaxWidthFactorLimit));
+}
+
+/**
+ * Returns the start and end colours for the active colour source (colorbrewer palette or
+ * user-defined gradient). Called by `initColors` to resolve the two anchor colours before
+ * building a two- or three-stop scale.
+ */
+export function resolveStartEndColors(
+    colorbrewerEnable: boolean,
+    colorbrewerScale: string,
+    numBuckets: number,
+    gradientStart: string,
+    gradientEnd: string
+): { startColor: string; endColor: string } {
+    if (colorbrewerEnable) {
+        const palette: IColorArray = colorbrewer[colorbrewerScale] || colorbrewer.Reds;
+        const colors: string[] | undefined = palette[numBuckets] ?? colorbrewer.Reds[numBuckets];
+        if (!colors || colors.length === 0) {
+            // numBuckets is outside the supported range for all palettes;
+            // fall back to the user gradient endpoints so we never dereference undefined.
+            return { startColor: gradientStart, endColor: gradientEnd };
+        }
+        return { startColor: colors[0], endColor: colors[colors.length - 1] };
+    }
+    return { startColor: gradientStart, endColor: gradientEnd };
+}
+
+export function parseSettings(colorHelper: ColorHelper, settingsModel: SettingsModel): SettingsModel {
+    if (colorHelper.isHighContrast) {
+        const foregroundColor: string = colorHelper.getThemeColor("foreground");
+        const backgroundColor: string = colorHelper.getThemeColor("background");
+
+        settingsModel.labels.show.value = true;
+        settingsModel.labels.fill.value.value = foregroundColor;
+
+        settingsModel.xAxisLabels.fill.value.value = foregroundColor;
+        settingsModel.yAxisLabels.fill.value.value = foregroundColor;
+
+        settingsModel.general.enableColorbrewer.value = false;
+        settingsModel.general.activateGradientMiddle.value = false;
+        settingsModel.general.gradientStart.value.value = backgroundColor;
+        settingsModel.general.gradientEnd.value.value = backgroundColor;
+        settingsModel.general.stroke = foregroundColor;
+        settingsModel.general.textColor = foregroundColor;
+    } else {
+        settingsModel.general.stroke = "#E6E6E6";
+        settingsModel.general.textColor = "#AAAAAA";
+    }
+
+    return settingsModel;
 }