Fix table head background (#1836)

datalens-tech · Nov 22, 2024 · 907dcc8 · 907dcc8
1 parent 605cb2f
commit 907dcc8
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 43 deletions.
diff --git a/src/ui/components/Widgets/Chart/ChartWidget.tsx b/src/ui/components/Widgets/Chart/ChartWidget.tsx
@@ -580,6 +580,7 @@ export const ChartWidget = (props: ChartWidgetProps) => {
                 enableActionParams={enableActionParams}
                 widgetDashState={widgetDashState}
                 rootNodeRef={rootNodeRef}
+                backgroundColor={style?.backgroundColor}
             />
             {Boolean(description || loadedData?.publicAuthor) && (
                 <WidgetFooter

diff --git a/src/ui/components/Widgets/Chart/components/Content.tsx b/src/ui/components/Widgets/Chart/components/Content.tsx
@@ -66,6 +66,7 @@ export const Content = (props: ChartContentProps) => {
         paneSplitOrientation,
         widgetDashState,
         rootNodeRef,
+        backgroundColor,
     } = props;
 
     const [isExportLoading, setIsExportLoading] = React.useState(false);
@@ -175,6 +176,7 @@ export const Content = (props: ChartContentProps) => {
                     paneSplitOrientation={paneSplitOrientation}
                     widgetDashState={widgetDashState}
                     rootNodeRef={rootNodeRef}
+                    backgroundColor={backgroundColor}
                 />
                 {showChartOverlay && (
                     <div

diff --git a/src/ui/components/Widgets/Chart/types.ts b/src/ui/components/Widgets/Chart/types.ts
@@ -285,6 +285,7 @@ export type ChartContentProps = Pick<
         initialParams: StringParams;
         enableActionParams?: boolean;
         rootNodeRef: React.RefObject<HTMLDivElement | null>;
+        backgroundColor?: string;
     };
 
 export type WidgetDataRef = React.MutableRefObject<

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/ChartKitAdapter.tsx b/src/ui/libs/DatalensChartkit/ChartKit/ChartKitAdapter.tsx
@@ -33,6 +33,7 @@ const ChartkitWidget = React.forwardRef<ChartKit, ChartkitWidgetProps>((props, r
         renderPluginLoader,
         paneSplitOrientation,
         widgetDashState,
+        backgroundColor,
     } = props;
 
     const chartkitType = React.useMemo(() => {
@@ -72,6 +73,7 @@ const ChartkitWidget = React.forwardRef<ChartKit, ChartkitWidgetProps>((props, r
             renderPluginLoader,
             paneSplitOrientation,
             widgetDashState,
+            backgroundColor,
             ...additionalProps,
         } as ChartKitProps<typeof chartkitType>;
     }, [
@@ -121,6 +123,7 @@ const ChartkitWidget = React.forwardRef<ChartKit, ChartkitWidgetProps>((props, r
             onChange={onChange}
             paneSplitOrientation={paneSplitOrientation}
             widgetDashState={widgetDashState}
+            backgroundColor={backgroundColor}
         />
     );
 });

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.scss b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.scss
@@ -8,4 +8,8 @@
     &__number-column {
         text-align: right;
     }
+
+    .chartkit-table-paginator {
+        background-color: initial;
+    }
 }
diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/TableWidget.tsx
@@ -25,6 +25,7 @@ const TableWidget = React.forwardRef<ChartKitWidgetRef | undefined, TableWidgetP
             onChange,
             onLoad,
             data: {data: originalData, config},
+            backgroundColor,
         } = props;
 
         const generatedId = React.useMemo(
@@ -95,6 +96,7 @@ const TableWidget = React.forwardRef<ChartKitWidgetRef | undefined, TableWidgetP
                         dimensions={dimensions}
                         onChangeParams={handleChangeParams}
                         onReady={handleTableReady}
+                        backgroundColor={backgroundColor}
                     />
                 ) : (
                     <Loader />

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.scss b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.scss
@@ -55,7 +55,6 @@
     border-collapse: collapse;
     min-width: 100%;
     width: max-content;
-    background: var(--dl-table-body-bg-color);
 
     &__table-wrapper {
         width: 100%;
@@ -138,10 +137,6 @@
     }
 
     &__header {
-        background: var(--dl-table-header-bg-color);
-        position: sticky;
-        top: 0;
-        z-index: 1;
         border-left: 1px solid var(--dl-table-border-color);
 
         /* stylelint-disable */
@@ -151,6 +146,11 @@
         /* stylelint-enable */
 
         &_sticky {
+            top: 0;
+            z-index: 1;
+            position: sticky;
+            background: var(--dl-table-header-bg-color);
+
             th {
                 @include stickyCellBg();
             }
@@ -235,7 +235,6 @@
     &__body &__td_pinned,
     &__footer &__td_pinned {
         left: 0;
-        background: var(--dl-table-body-bg-color);
         position: sticky;
         z-index: 1;
 

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.tsx b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/Table.tsx
@@ -44,10 +44,17 @@ type Props = {
     dimensions: WidgetDimensions;
     onChangeParams?: (params: StringParams) => void;
     onReady?: () => void;
+    backgroundColor?: string;
 };
 
 export const Table = React.memo<Props>((props: Props) => {
-    const {dimensions: widgetDimensions, widgetData, onChangeParams, onReady} = props;
+    const {
+        dimensions: widgetDimensions,
+        widgetData,
+        onChangeParams,
+        onReady,
+        backgroundColor,
+    } = props;
     const {config, data: originalData, unresolvedParams, params: currentParams} = widgetData;
     const title = getTableTitle(config);
     const isPaginationEnabled = Boolean(config?.paginator?.enabled);
@@ -143,6 +150,7 @@ export const Table = React.memo<Props>((props: Props) => {
         getCellAdditionStyles,
         cellMinSizes,
         sortingState: initialSortingState,
+        backgroundColor,
     });
 
     React.useEffect(() => {

diff --git a/...DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/usePreparedTableData.ts b/...DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/usePreparedTableData.ts
@@ -35,6 +35,7 @@ import {
     getCellCustomStyle,
     getColumnId,
     getElementBackgroundColor,
+    toSolidColor,
 } from './utils';
 
 function getNoDataRow(colSpan = 1): BodyRowViewData {
@@ -56,7 +57,13 @@ function getNoDataRow(colSpan = 1): BodyRowViewData {
     };
 }
 
-function getFooterRows(table: Table<TData>, leftPositions: (number | undefined)[]) {
+function getFooterRows(args: {
+    table: Table<TData>;
+    leftPositions: (number | undefined)[];
+    bgColor?: string;
+}) {
+    const {table, leftPositions, bgColor} = args;
+
     return table.getFooterGroups().reduce<FooterRowViewData[]>((acc, f) => {
         const cells = f.headers.map<FooterCellViewData>((cell) => {
             const columnDef = cell.column.columnDef;
@@ -67,13 +74,11 @@ function getFooterRows(table: Table<TData>, leftPositions: (number | undefined)[
                 ? null
                 : flexRender(columnDef.footer, cell.getContext());
 
-            let left: number | undefined;
+            const cellStyle: React.CSSProperties = {};
             if (pinned) {
-                left = leftPositions[originalHeadData?.index ?? -1];
+                cellStyle.left = leftPositions[originalHeadData?.index ?? -1];
+                cellStyle.backgroundColor = bgColor;
             }
-            const cellStyle: React.CSSProperties = {
-                left,
-            };
 
             return {
                 id: cell.id,
@@ -134,6 +139,7 @@ export const usePreparedTableData = (props: {
     getCellAdditionStyles?: (cell: TableCell, row: TData) => React.CSSProperties;
     cellMinSizes: number[] | null;
     sortingState?: SortingState;
+    backgroundColor?: string;
 }): TableViewData => {
     const {
         dimensions,
@@ -144,6 +150,7 @@ export const usePreparedTableData = (props: {
         getCellAdditionStyles,
         cellMinSizes,
         sortingState,
+        backgroundColor,
     } = props;
 
     const columns = React.useMemo(() => {
@@ -285,6 +292,10 @@ export const usePreparedTableData = (props: {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [colSizes, data.head]);
 
+    const tableBgColor = backgroundColor
+        ? toSolidColor(backgroundColor)
+        : getElementBackgroundColor(tableContainerRef.current);
+
     const headerRows = React.useMemo(() => {
         return headers
             .map((headerGroup) => {
@@ -305,16 +316,18 @@ export const usePreparedTableData = (props: {
                         const colSpan = header.colSpan > 1 ? header.colSpan : undefined;
                         const sortable = header.column.getCanSort();
                         const pinned = Boolean(originalCellData?.pinned);
+                        const cellStyle: React.CSSProperties = getCellCustomStyle(
+                            originalCellData,
+                            tableBgColor,
+                        );
 
-                        let left: number | undefined;
                         if (pinned) {
-                            left = leftPositions[originalCellData?.index ?? -1];
-                        }
+                            cellStyle.left = leftPositions[originalCellData?.index ?? -1];
 
-                        const cellStyle: React.CSSProperties = {
-                            ...getCellCustomStyle(originalCellData),
-                            left,
-                        };
+                            if (!cellStyle.backgroundColor) {
+                                cellStyle.backgroundColor = tableBgColor;
+                            }
+                        }
 
                         if (typeof originalCellData?.width !== 'undefined') {
                             cellStyle.whiteSpace = cellStyle.whiteSpace ?? 'normal';
@@ -346,22 +359,18 @@ export const usePreparedTableData = (props: {
             })
             .filter(Boolean) as HeadRowViewData[];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [columns, leftPositions, sorting]);
+    }, [columns, leftPositions, sorting, tableBgColor]);
 
     const colgroup = colSizes.map((size) => ({width: `${size}px`}));
     const gridTemplateColumns = colgroup.map((h) => h.width).join(' ');
     const header = {
         rows: headerRows,
         style: {
             gridTemplateColumns,
+            backgroundColor: tableBgColor,
         },
     };
 
-    const tableBgColor = React.useMemo(
-        () => getElementBackgroundColor(tableContainerRef?.current ?? null),
-        [],
-    );
-
     const rows = React.useMemo(() => {
         if (!virtualItems.length) {
             const colSpan = headers[headers.length - 1]?.headers?.length;
@@ -402,16 +411,20 @@ export const usePreparedTableData = (props: {
                 const additionalStyles = getCellAdditionStyles
                     ? getCellAdditionStyles(originalCellData as TableCell, row.original)
                     : {};
-                let left: number | undefined;
-                if (pinned) {
-                    left = leftPositions[originalHeadData?.index ?? -1];
-                }
+
                 const cellStyle: React.CSSProperties = {
                     ...getCellCustomStyle(originalCellData, tableBgColor),
                     ...additionalStyles,
-                    left,
                 };
 
+                if (pinned) {
+                    cellStyle.left = leftPositions[originalHeadData?.index ?? -1];
+
+                    if (!cellStyle.backgroundColor) {
+                        cellStyle.backgroundColor = tableBgColor;
+                    }
+                }
+
                 if (typeof originalHeadData?.width !== 'undefined') {
                     cellStyle.whiteSpace = 'normal';
                     cellStyle.wordBreak = 'break-word';
@@ -466,7 +479,7 @@ export const usePreparedTableData = (props: {
     const isEndOfPage = rows[rows.length - 1]?.index === tableRows.length - 1;
     const hasFooter = isEndOfPage && columns.some((column) => column.footer);
     const footer: TableViewData['footer'] = {
-        rows: hasFooter ? getFooterRows(table, leftPositions) : [],
+        rows: hasFooter ? getFooterRows({table, leftPositions, bgColor: tableBgColor}) : [],
         style: {gridTemplateColumns, transform},
     };
 

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/renderer/components/Table/utils.ts
@@ -224,7 +224,10 @@ export function getTableSizes(table: HTMLTableElement) {
     }, []);
 }
 
-function toSolidColor(color: RGBColor, bg: RGBColor) {
+export function toSolidColor(current: string | RGBColor, background?: RGBColor) {
+    const bg = background ?? rgb(getPageBgColor());
+    const color = typeof current === 'string' ? rgb(varToColor(current)) : current;
+
     return color
         .copy({
             r: (1 - color.opacity) * bg.r + color.opacity * color.r,
@@ -244,25 +247,32 @@ function varToColor(value: string) {
     return value;
 }
 
-export function getElementBackgroundColor(el?: HTMLElement | null): RGBColor {
+function getPageBgColor() {
+    return window.getComputedStyle(document.body).getPropertyValue('background-color');
+}
+
+export function getElementBackgroundColor(el?: HTMLElement | null): string {
     if (!el) {
-        const baseColor = window
-            .getComputedStyle(document.body)
-            .getPropertyValue('background-color');
-        return rgb(baseColor);
+        return getPageBgColor();
     }
 
     const color = window.getComputedStyle(el).getPropertyValue('background-color');
     const rgbColor = rgb(color);
 
-    if (rgbColor.opacity < 1 && el.tagName !== 'BODY') {
-        return getElementBackgroundColor(el.parentElement);
+    if (el.tagName !== 'BODY') {
+        if (!rgbColor.opacity) {
+            return getElementBackgroundColor(el.parentElement);
+        }
+
+        if (rgbColor.opacity < 1) {
+            return toSolidColor(rgbColor, rgb(getPageBgColor()));
+        }
     }
 
-    return rgbColor;
+    return rgbColor.toString();
 }
 
-export function getCellCustomStyle(cellData: unknown, tableBgColor?: RGBColor) {
+export function getCellCustomStyle(cellData: unknown, tableBgColor?: string) {
     const css = {...camelCaseCss(get(cellData, 'css', {}))};
 
     // Since the table is created with flex/grid instead of standard table layout,
@@ -286,7 +296,7 @@ export function getCellCustomStyle(cellData: unknown, tableBgColor?: RGBColor) {
         if (rgbColor.opacity < 1) {
             // Due to special cases like sticky row/column,
             // we cannot use cell background with alpha chanel - the content begins to "shine through"
-            css.backgroundColor = toSolidColor(rgbColor, tableBgColor);
+            css.backgroundColor = toSolidColor(rgbColor, rgb(tableBgColor));
         }
     }
 

diff --git a/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/types.ts b/src/ui/libs/DatalensChartkit/ChartKit/plugins/Table/types.ts
@@ -13,4 +13,5 @@ export type TableWidgetProps = {
     ) => void;
     onLoad?: (data?: ChartKitOnLoadData<'table'>) => void;
     widgetDashState?: WidgetDashState;
+    backgroundColor?: string;
 };
diff --git a/src/ui/libs/DatalensChartkit/ChartKit/types.ts b/src/ui/libs/DatalensChartkit/ChartKit/types.ts
@@ -39,6 +39,7 @@ export type ChartKitAdapterProps = {
     noControls?: boolean;
     onRetry?: () => void;
     rootNodeRef: React.RefObject<HTMLDivElement | null>;
+    backgroundColor?: string;
 } & Pick<ChartKitProps<ChartKitType>, 'onRender' | 'onChartLoad' | 'renderPluginLoader'>;
 
 declare module '@gravity-ui/chartkit' {

diff --git a/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Chart/Chart.tsx b/src/ui/libs/DatalensChartkit/components/ChartKitBase/components/Chart/Chart.tsx
@@ -27,6 +27,7 @@ type ChartProps = Pick<
     Pick<State, 'loadedData' | 'error'> &
     Pick<ChartKitProps<ChartKitType>, 'onRender' | 'onChartLoad' | 'renderPluginLoader'> & {
         rootNodeRef: React.RefObject<HTMLDivElement | null>;
+        backgroundColor?: string;
     };
 
 export const Chart = (props: ChartProps) => {
@@ -67,6 +68,7 @@ export const Chart = (props: ChartProps) => {
                 paneSplitOrientation={props.paneSplitOrientation}
                 widgetDashState={props.widgetDashState}
                 rootNodeRef={props.rootNodeRef}
+                backgroundColor={props.backgroundColor}
             />
         );
     }