Add nullMode to GradientColorConfig

src/i18n-keysets/wizard/en.json

@@ -226,6 +226,8 @@
   "label_overlap": "Labels overlap",
   "label_overriden-from-dashboard": "overriden from dashboard",
   "label_pagination": "Pagination",
+  "label_painting-as-0": "Paint as 0",
+  "label_painting-ignore": "No painting",
   "label_palette": "Palette",
   "label_part": "Date part",
   "label_percent": "Percentage",

src/i18n-keysets/wizard/ru.json

@@ -226,6 +226,8 @@
   "label_overlap": "Перекрытие подписей",
   "label_overriden-from-dashboard": "перезаписан с дашборда",
   "label_pagination": "Пагинация",
+  "label_painting-as-0": "Окрашивать как 0",
+  "label_painting-ignore": "Не окрашивать",
   "label_palette": "Палитра",
   "label_part": "Часть даты",
   "label_percent": "В процентах",

src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-background-colors-map-by-continuous-column.ts

@@ -1,10 +1,11 @@
 import isNil from 'lodash/isNil';
 import isNumber from 'lodash/isNumber';
 
-import type {
-    RGBColor,
-    ServerField,
-    TableFieldBackgroundSettings,
+import {
+    GradientNullModes,
+    type RGBColor,
+    type ServerField,
+    type TableFieldBackgroundSettings,
 } from '../../../../../../../../../shared';
 import type {ChartColorsConfig} from '../../../../types';
 import {
@@ -46,15 +47,13 @@ export function colorizeFlatTableColumn({
     index: number;
     colorsConfig: ChartColorsConfig;
 }) {
-    const colorValues = data.reduce(
-        (acc, row) => {
-            const rowValue = row[index];
-            const parsedRowValue = isNil(rowValue) ? null : parseFloat(rowValue);
-
-            return [...acc, parsedRowValue];
-        },
-        [] as (number | null)[],
-    );
+    const nilValue = colorsConfig.nullMode === GradientNullModes.AsZero ? 0 : null;
+    const colorValues = data.reduce<(number | null)[]>((acc, row) => {
+        const rowValue = row[index];
+        const parsedRowValue = isNil(rowValue) ? nilValue : parseFloat(rowValue);
+        acc.push(parsedRowValue);
+        return acc;
+    }, []);
 
     const {min, mid, max} = getThresholdValues(colorsConfig, colorValues.filter(isNumber));
     const currentGradient = getCurrentGradient(colorsConfig);

src/server/modes/charts/plugins/datalens/preparers/flat-table/index.ts

@@ -7,6 +7,7 @@ import type {
 } from '../../../../../../../shared';
 import {
     DATASET_FIELD_TYPES,
+    GradientNullModes,
     IS_NULL_FILTER_TEMPLATE,
     MINIMUM_FRACTION_DIGITS,
     isDateField,
@@ -277,7 +278,7 @@ function prepareFlatTable({
 
             if (colors.length) {
                 const valueColor = values[iColor];
-                if (valueColor !== null) {
+                if (valueColor !== null || colorsConfig.nullMode === GradientNullModes.AsZero) {
                     cell.color = Number(valueColor);
                 }
             }

src/shared/constants/gradients/index.ts

@@ -1,4 +1,5 @@
 import type {ColorPalette} from '../../types/color-palettes';
+import type {ValueOf} from '../../types/utility-types';
 
 import {
     THREE_POINT_DEFAULT_GRADIENT,
@@ -27,6 +28,13 @@ export interface Gradient {
     colors: string[];
 }
 
+export const GradientNullModes = {
+    Ignore: 'ignore',
+    AsZero: 'as-0',
+};
+
+export type GradientNullMode = ValueOf<typeof GradientNullModes>;
+
 export interface RGBColor {
     red: number;
     green: number;

src/shared/types/config/wizard/v12.ts

@@ -1,4 +1,4 @@
-import type {MarkupType, WidgetSizeType} from '../../..';
+import type {GradientNullMode, MarkupType, WidgetSizeType} from '../../..';
 import type {ColorMode} from '../../../constants';
 import type {DatasetFieldCalcMode, ParameterDefaultValue} from '../../dataset';
 import type {
@@ -294,6 +294,7 @@ export type V12ColorsConfig = {
     coloredByMeasure?: boolean;
     palette?: string;
     colorMode?: ColorMode;
+    nullMode?: GradientNullMode;
 };
 
 export type V12ShapesConfig = {

src/shared/types/wizard/index.ts

@@ -13,6 +13,7 @@ import type {
 } from '../';
 import type {
     ColorMode,
+    GradientNullMode,
     GradientType,
     NavigatorLinesMode,
     NavigatorPeriod,
@@ -75,6 +76,7 @@ export interface ColorsConfig {
     coloredByMeasure?: boolean;
     palette?: string;
     colorMode?: ColorMode;
+    nullMode?: GradientNullMode;
 }
 
 export enum LabelsPositions {

src/ui/units/wizard/actions/dialogColor.ts

@@ -1,6 +1,6 @@
 import {selectAvailableClientGradients} from 'constants/common';
 
-import type {ColorsConfig, Field, GradientType, PartialBy} from 'shared';
+import type {ColorsConfig, Field, GradientNullMode, GradientType, PartialBy} from 'shared';
 import {closeDialog, openDialog} from 'store/actions/dialog';
 import type {DatalensGlobalState} from 'ui';
 
@@ -42,6 +42,7 @@ export interface GradientState {
     rightThreshold?: string;
     gradientPalette: string;
     validationStatus?: ValidationStatus;
+    nullMode?: GradientNullMode;
 }
 
 export const RESET_DIALOG_COLOR_STATE = Symbol('wizard/dialogColor/RESET_DIALOG_COLOR_STATE');
@@ -141,6 +142,7 @@ export function prepareDialogColorState(props: {
             middleThreshold: colorsConfig?.middleThreshold || defaultGradientState.middleThreshold,
             rightThreshold: colorsConfig?.rightThreshold || defaultGradientState.rightThreshold,
             gradientPalette: colorsConfig?.gradientPalette || defaultGradientState.gradientPalette,
+            nullMode: colorsConfig?.nullMode || defaultGradientState.nullMode,
         };
 
         const gradients = selectAvailableClientGradients(getState(), gradientState.gradientMode);

src/ui/units/wizard/components/Dialogs/DialogColor/ColorSettingsContainer/ColorSettingsContainer.tsx

@@ -48,6 +48,7 @@ type OwnProps = {
     onColorModeChange: (value: ColorMode) => void;
     isColorModeChangeAvailable: boolean;
     colorSectionFields?: Field[];
+    visualizationId?: string;
 };
 
 type StateProps = ReturnType<typeof mapStateToProps>;

src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.scss

@@ -11,7 +11,7 @@
     }
 
     &_gradient-mode {
-        height: 370px;
+        height: 380px;
 
         .color-settings-container {
             &__row {

src/ui/units/wizard/components/Dialogs/DialogColor/DialogColor.tsx

@@ -20,6 +20,7 @@ import {
     isGradientDialog,
     selectDialogColorGradientState,
     selectDialogColorPaletteState,
+    selectDialogColorVisualizationId,
 } from '../../../selectors/dialogColor';
 
 import ColorSettingsContainer from './ColorSettingsContainer/ColorSettingsContainer';
@@ -117,6 +118,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                             colorMode={this.state.colorMode}
                             isColorModeChangeAvailable={isColorModeChangeAvailable}
                             onColorModeChange={this.onColorModeChange}
+                            visualizationId={this.props.visualizationId}
                         />
                     </Dialog.Body>
                     <Dialog.Footer
@@ -183,6 +185,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                 leftThreshold,
                 middleThreshold,
                 rightThreshold,
+                nullMode,
             } = this.props.gradientState;
 
             config = {
@@ -191,10 +194,11 @@ class DialogColorComponent extends React.Component<Props, State> {
                 polygonBorders,
                 reversed,
                 thresholdsMode,
-                leftThreshold,
-                middleThreshold,
-                rightThreshold,
+                leftThreshold: leftThreshold ? leftThreshold : undefined,
+                middleThreshold: middleThreshold ? middleThreshold : undefined,
+                rightThreshold: rightThreshold ? rightThreshold : undefined,
                 colorMode,
+                nullMode,
             };
 
             return config;
@@ -228,6 +232,7 @@ const mapStateToProps = (state: DatalensGlobalState) => {
         dataset: selectDataset(state),
         gradientState: selectDialogColorGradientState(state),
         paletteState: selectDialogColorPaletteState(state),
+        visualizationId: selectDialogColorVisualizationId(state),
     };
 };
 

src/ui/units/wizard/components/Dialogs/DialogColor/DialogColorGradient/DialogColorGradient.scss

@@ -2,44 +2,32 @@
 
 .dialog-color-gradient {
     &__row {
+        --gc-form-row-label-width: 220px;
         margin-bottom: 20px;
-        vertical-align: middle;
-        line-height: 20px;
-        display: flex;
-        align-items: center;
-    }
-
-    &__label {
-        display: inline-block;
-        margin-right: 20px;
     }
 
     &__palette-select {
-        width: 204px;
+        padding-inline-end: var(--g-spacing-2);
+        width: var(--gc-form-row-label-width);
         display: inline-block;
     }
 
     &__reverse-button {
-        margin-left: 6px;
+        margin-left: var(--g-spacing-2);
         line-height: 24px;
         vertical-align: middle;
     }
 
-    &__thresholds-checkbox {
-        margin-right: 10px;
-    }
-
     &__threshold-inputs-wrapper {
         display: flex;
         width: 395px;
-        padding-right: 36px;
-        height: 28px;
+        padding-right: 44px;
         justify-content: space-between;
     }
 
     &__threshold-input {
         display: inline-block;
-        width: 80px;
+        width: 100px;
     }
 
     &__error-label {
@@ -51,7 +39,6 @@
         height: 28px;
         background: #000000;
         vertical-align: middle;
-        margin-left: 12px;
     }
 
     &__select {
@@ -63,6 +50,6 @@
     }
 
     &__hint-icon {
-        margin-left: 5px;
+        margin-left: var(--g-spacing-1);
     }
 }