Add nullMode to GradientColorConfig & Up @gravity-ui/uikit 6.37.0 -> 6.39.0

package.json

@@ -122,7 +122,7 @@
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/ui-logger": "^1.1.0",
-    "@gravity-ui/uikit": "^6.37.0",
+    "@gravity-ui/uikit": "^6.39.0",
     "@jest/types": "^29.6.3",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@playwright/test": "^1.48.2",

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": "Do not paint",
   "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/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;
 

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/background-settings.ts

@@ -7,7 +7,8 @@ type GradientFields =
     | 'rightThreshold'
     | 'gradientPalette'
     | 'gradientMode'
-    | 'reversed';
+    | 'reversed'
+    | 'nullMode';
 
 export interface TableFieldBackgroundSettings {
     enabled: boolean;

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/dialog.ts

@@ -279,6 +279,7 @@ export function openDialogColors({item, onApply, colorSectionFields}: OpenDialog
                         }
                     },
                     colorsConfig,
+                    canSetNullMode: true,
                 }),
             );
         }

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[];
+    canSetNullMode?: boolean;
 };
 
 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

@@ -11,10 +11,15 @@ import {bindActionCreators} from 'redux';
 import type {ColorsConfig, Field} from 'shared';
 import {ColorMode, isMeasureValue} from 'shared';
 import type {DatalensGlobalState} from 'ui';
+import {ALLOWED_FOR_NULL_MODE_VISUALIZATIONS} from 'ui/units/wizard/constants/dialogColor';
 import {setDialogColorPaletteState} from 'units/wizard/actions/dialogColor';
 import {selectDataset, selectParameters} from 'units/wizard/selectors/dataset';
 import {selectUpdates} from 'units/wizard/selectors/preview';
-import {selectDashboardParameters, selectFilters} from 'units/wizard/selectors/visualization';
+import {
+    selectDashboardParameters,
+    selectFilters,
+    selectVisualization,
+} from 'units/wizard/selectors/visualization';
 
 import {
     isGradientDialog,
@@ -46,6 +51,7 @@ interface OwnProps {
     colorsConfig: ColorsConfig;
     extra?: ExtraSettings;
     isColorModeChangeAvailable: boolean;
+    canSetNullMode?: boolean;
 }
 
 type StateProps = ReturnType<typeof mapStateToProps>;
@@ -87,15 +93,26 @@ class DialogColorComponent extends React.Component<Props, State> {
     }
 
     render() {
-        const {item, items, dataset, isColorModeChangeAvailable, colorSectionFields} = this.props;
+        const {
+            item,
+            items,
+            dataset,
+            isColorModeChangeAvailable,
+            colorSectionFields,
+            visualization,
+        } = this.props;
         const {mountedColors = {}} = this.props.paletteState;
         const {validationStatus} = this.props.gradientState;
         const {colorMode} = this.state;
 
-        if (!item || !dataset) {
+        if (!item || !dataset || !visualization) {
             return null;
         }
 
+        const canSetNullMode =
+            this.props.canSetNullMode &&
+            (ALLOWED_FOR_NULL_MODE_VISUALIZATIONS as string[]).includes(visualization.id);
+
         return (
             <Dialog open={true} onClose={this.onClose} disableFocusTrap={true}>
                 <div className={b({[`${colorMode}-mode`]: true})}>
@@ -117,6 +134,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                             colorMode={this.state.colorMode}
                             isColorModeChangeAvailable={isColorModeChangeAvailable}
                             onColorModeChange={this.onColorModeChange}
+                            canSetNullMode={canSetNullMode}
                         />
                     </Dialog.Body>
                     <Dialog.Footer
@@ -183,6 +201,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                 leftThreshold,
                 middleThreshold,
                 rightThreshold,
+                nullMode,
             } = this.props.gradientState;
 
             config = {
@@ -195,6 +214,7 @@ class DialogColorComponent extends React.Component<Props, State> {
                 middleThreshold,
                 rightThreshold,
                 colorMode,
+                nullMode,
             };
 
             return config;
@@ -228,6 +248,7 @@ const mapStateToProps = (state: DatalensGlobalState) => {
         dataset: selectDataset(state),
         gradientState: selectDialogColorGradientState(state),
         paletteState: selectDialogColorPaletteState(state),
+        visualization: selectVisualization(state),
     };
 };