[WIP] text color for table cells with background

package.json

@@ -73,6 +73,7 @@
     "@gravity-ui/i18n": "^1.7.0",
     "@gravity-ui/nodekit": "^2.4.1",
     "@node-rs/crc32": "^1.7.2",
+    "@types/chroma-js": "^3.1.1",
     "ajv": "^8.12.0",
     "axios": "^1.7.7",
     "axios-retry": "^3.9.1",

src/i18n-keysets/wizard/en.json

@@ -271,6 +271,7 @@
   "label_string": "String",
   "label_sub-totals-switcher": "Sub-totals",
   "label_sum": "Sum",
+  "label_text-color-mode": "Text color",
   "label_thresholds": "Set threshold values",
   "label_time-interval": "Time interval",
   "label_title": "Name",

src/i18n-keysets/wizard/ru.json

@@ -271,6 +271,7 @@
   "label_string": "Строка",
   "label_sub-totals-switcher": "Подытоги",
   "label_sum": "Сумма",
+  "label_text-color-mode": "Цвет текста",
   "label_thresholds": "Задать пороговые значения",
   "label_time-interval": "Временной интервал",
   "label_title": "Название",

src/server/modes/charts/plugins/datalens/preparers/flat-table/helpers/background-settings/get-flat-table-background-styles.ts

@@ -1,5 +1,6 @@
 import type {MarkupItem} from '../../../../../../../../../shared';
 import {getDistinctValue, markupToRawString} from '../../../../../../../../../shared';
+import {getColorBrightness} from '../../../../../../../../../shared/utils/color';
 import {selectServerPalette} from '../../../../../../../../constants';
 import {getColor} from '../../../../utils/constants';
 import {findIndexInOrder} from '../../../../utils/misc-helpers';
@@ -68,7 +69,6 @@ const getDiscreteBackgroundColorStyle = (args: GetDiscreteBackgroundColorStyle)
     // eslint-disable-next-line consistent-return
     return {
         backgroundColor: colorValue,
-        color: '#FFF',
     };
 };
 
@@ -106,29 +106,52 @@ export const getFlatTableBackgroundStyles = (
     const backgroundSettings = column.backgroundSettings;
 
     if (!backgroundSettings) {
-        return;
+        return undefined;
     }
 
     const {settings} = backgroundSettings;
 
+    let backgroundCss: {backgroundColor?: string | number; color?: string} | undefined;
+
     if (settings.isContinuous) {
-        // eslint-disable-next-line consistent-return
-        return getContinuousBackgroundColorStyle({
+        backgroundCss = getContinuousBackgroundColorStyle({
             backgroundColorsByMeasure,
             currentRowIndex,
             backgroundSettings,
         });
+    } else {
+        backgroundCss = getDiscreteBackgroundColorStyle({
+            column,
+            values,
+            backgroundSettings,
+            order,
+            idToTitle,
+            idToDataType,
+            loadedColorPalettes,
+            availablePalettes,
+        });
     }
 
-    // eslint-disable-next-line consistent-return
-    return getDiscreteBackgroundColorStyle({
-        column,
-        values,
-        backgroundSettings,
-        order,
-        idToTitle,
-        idToDataType,
-        loadedColorPalettes,
-        availablePalettes,
-    });
+    const textColorSettings = backgroundSettings.textColor;
+    if (typeof backgroundCss?.backgroundColor === 'string') {
+        switch (textColorSettings?.mode) {
+            case 'manual': {
+                backgroundCss.color = textColorSettings.color;
+                break;
+            }
+            case 'auto':
+            default: {
+                const brightness = getColorBrightness(backgroundCss.backgroundColor);
+                const textColor =
+                    brightness > 0.5
+                        ? 'var(--g-color-text-dark-primary)'
+                        : 'var(--g-color-text-light-primary)';
+
+                backgroundCss.color = textColor;
+                break;
+            }
+        }
+    }
+
+    return backgroundCss;
 };

src/shared/types/wizard/background-settings.ts

@@ -19,4 +19,9 @@ export interface TableFieldBackgroundSettings {
         gradientState: Pick<ColorsConfig, GradientFields>;
         isContinuous: boolean;
     };
+    textColor?: {
+        mode?: string;
+        color?: string;
+        palette?: string;
+    };
 }

src/shared/utils/color.ts

@@ -0,0 +1,5 @@
+import chroma from 'chroma-js';
+
+export function getColorBrightness(hex: string) {
+    return chroma(hex).luminance();
+}

src/ui/units/wizard/components/Dialogs/DialogField/components/BackgroundSettings/BackgroundSettings.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {SegmentedRadioGroup as RadioButton, Switch} from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
 import {i18n} from 'i18n';
+import {useSelector} from 'react-redux';
 import type {
     ClientChartsConfig,
     Field,
@@ -11,10 +12,12 @@ import type {
     TableFieldBackgroundSettings,
     WizardVisualizationId,
 } from 'shared';
-import {DialogFieldBackgroundSettingsQa} from 'shared';
+import {DEFAULT_PALETTE, DialogFieldBackgroundSettingsQa} from 'shared';
+import {selectColorPalettes} from 'ui/store/selectors/colorPaletteEditor';
 import {NULLS_OPTIONS} from 'ui/units/wizard/constants/dialogColor';
 
 import {DialogRadioButtons} from '../../../components/DialogRadioButtons/DialogRadioButtons';
+import {PaletteColorControl} from '../BarsSettings/components/PaletteColorControl/PaletteColorControl';
 import {ButtonColorDialog} from '../ButtonColorDialog/ButtonColorDialog';
 import {DialogFieldRow} from '../DialogFieldRow/DialogFieldRow';
 import {DialogFieldSelect} from '../DialogFieldSelect/DialogFieldSelect';
@@ -43,6 +46,7 @@ type Props = {
 
 export const BackgroundSettings: React.FC<Props> = (props) => {
     const {state, onUpdate, visualization, currentField, placeholderId} = props;
+    const colorPalettes = useSelector(selectColorPalettes);
 
     const {field, datasetFieldsMap, chartFields, extraDistincts} = useBackgroundSettings({
         visualization,
@@ -81,6 +85,20 @@ export const BackgroundSettings: React.FC<Props> = (props) => {
         state,
     });
 
+    const textColorMode = state.textColor?.mode ?? 'auto';
+    const handleTextColorModeUpdate = React.useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>) => {
+            onUpdate({
+                ...state,
+                textColor: {
+                    ...state?.textColor,
+                    mode: event.target.value,
+                },
+            });
+        },
+        [onUpdate, state],
+    );
+
     return (
         <div className={b()}>
             <DialogFieldRow
@@ -149,6 +167,53 @@ export const BackgroundSettings: React.FC<Props> = (props) => {
                     }
                 />
             )}
+            <DialogFieldRow
+                title={i18n('wizard', 'label_text-color-mode')}
+                setting={
+                    <RadioButton
+                        size="m"
+                        value={textColorMode}
+                        onChange={handleTextColorModeUpdate}
+                    >
+                        <RadioButton.Option value="auto">
+                            {i18n('wizard', 'label_auto')}
+                        </RadioButton.Option>
+                        <RadioButton.Option value="manual">
+                            {i18n('wizard', 'label_manual')}
+                        </RadioButton.Option>
+                    </RadioButton>
+                }
+            />
+            {textColorMode === 'manual' && (
+                <DialogFieldRow
+                    title={''}
+                    setting={
+                        <PaletteColorControl
+                            palette={state.textColor?.palette ?? DEFAULT_PALETTE.id}
+                            currentColor={state.textColor?.color ?? '#FFF'}
+                            onPaletteItemChange={(color) => {
+                                onUpdate({
+                                    ...state,
+                                    textColor: {
+                                        ...state?.textColor,
+                                        color,
+                                    },
+                                });
+                            }}
+                            onPaletteUpdate={(palette) => {
+                                onUpdate({
+                                    ...state,
+                                    textColor: {
+                                        ...state?.textColor,
+                                        palette,
+                                    },
+                                });
+                            }}
+                            colorPalettes={colorPalettes}
+                        />
+                    }
+                />
+            )}
         </div>
     );
 };

src/ui/units/wizard/components/Dialogs/DialogField/components/BarsSettings/components/PaletteColorControl/PaletteColorControl.scss

@@ -12,8 +12,16 @@
         margin-right: var(--g-spacing-1);
         margin-block: 2px;
 
-        &.palette-item:hover::before {
-            content: none;
+        &::before,
+        &.palette-item_selectable:hover::before {
+            width: 28px;
+            height: 28px;
+            content: '';
+            position: absolute;
+            border-radius: 6px;
+            top: -2px;
+            left: -2px;
+            border: 1px solid var(--g-color-base-generic-medium);
         }
     }
 
@@ -30,13 +38,13 @@
     }
 
     &__palette {
-        z-index: 2;
-        border-radius: 8px;
-        box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);
-        position: absolute;
-        top: 0;
-        left: 28px;
-        background-color: var(--g-color-base-background);
+        // z-index: 2;
+        // border-radius: 8px;
+        // box-shadow: 0 8px 20px 0 var(--g-color-sfx-shadow);
+        // position: absolute;
+        // top: 0;
+        // left: 28px;
+        // background-color: var(--g-color-base-background);
         padding: var(--g-spacing-4);
     }
 }