Fix pivot table background settings application for nulls

Author: DaryaLari

src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/backgroundColor.ts

@@ -7,6 +7,7 @@ import type {
 } from '../../../../../../../../shared';
 import {
     ApiV2Annotations,
+    GradientNullModes,
     PseudoFieldTitle,
     getFakeTitleOrTitle,
 } from '../../../../../../../../shared';
@@ -231,8 +232,19 @@ export const prepareBackgroundColorSettings = (args: PrepareBackgroundColorSetti
         const fieldColorValues = Array.from(colorValues);
 
         continuousColorsByField[guid] = {};
+        const nilValue =
+            backgroundSettings.settings.gradientState.nullMode === GradientNullModes.AsZero
+                ? 0
+                : null;
+
+        const colorValuesWithoutNull = fieldColorValues.reduce<number[]>((acc, cv) => {
+            const colorValue = cv === null ? nilValue : cv;
+            if (colorValue !== null) {
+                acc.push(Number(colorValue));
+            }
 
-        const colorValuesWithoutNull = fieldColorValues.filter((cv): cv is number => cv !== null);
+            return acc;
+        }, []);
 
         const min = Math.min(...colorValuesWithoutNull);
         const max = Math.max(...colorValuesWithoutNull);
@@ -250,12 +262,15 @@ export const prepareBackgroundColorSettings = (args: PrepareBackgroundColorSetti
 
         fieldColorValues.forEach((value) => {
             const colorValue = getContinuousColorValue(value);
-            if (colorValue === null) {
+            if (
+                colorValue === null &&
+                backgroundSettings.settings.gradientState.nullMode !== GradientNullModes.AsZero
+            ) {
                 return;
             }
 
             const color = colorizePivotTableCell(colorValue, chartColorsConfig, [min, max]);
-            continuousColorsByField[guid][String(value)] = color?.backgroundColor || null;
+            continuousColorsByField[guid][String(colorValue)] = color?.backgroundColor || null;
         });
     });
 
@@ -317,7 +332,10 @@ export const colorizePivotTableByFieldBackgroundSettings = (
             const {settings, colorFieldGuid} = backgroundColorSettings;
             const colorKey = cell.colorKey;
 
-            if (!colorKey) {
+            if (
+                !colorKey &&
+                backgroundColorSettings.settings.gradientState.nullMode !== GradientNullModes.AsZero
+            ) {
                 continue;
             }
 

src/server/modes/charts/plugins/datalens/preparers/backend-pivot-table/helpers/color.ts

@@ -1,5 +1,5 @@
 import type {ServerColor} from '../../../../../../../../shared';
-import {ApiV2Annotations, isMeasureName} from '../../../../../../../../shared';
+import {ApiV2Annotations, GradientNullModes, isMeasureName} from '../../../../../../../../shared';
 import type {ChartColorsConfig} from '../../../types';
 import {colorizePivotTableCell} from '../../../utils/color-helpers';
 import type {AnnotationsMap, PivotDataCellValue, PivotDataRows} from '../types';
@@ -110,11 +110,13 @@ export const colorizePivotTableByColorField = (args: ColorizeByColorFieldArgs) =
     }
 
     const {colorValues, min, max} = colorSettings;
+    const nilValue = colorsConfig.nullMode === GradientNullModes.AsZero ? 0 : null;
 
     rows.forEach((row, rowIndex) => {
         for (let i = rowHeaderLength; i < row.cells.length; i++) {
             const cell = row.cells[i];
-            const colorValue = colorValues[rowIndex][i - rowHeaderLength];
+            const rawColorValue = colorValues[rowIndex][i - rowHeaderLength];
+            const colorValue = rawColorValue === null ? nilValue : rawColorValue;
 
             const isInvalidColorValue = colorValue === null;