fix

gravity-ui · Oct 10, 2024 · c86ff6b · c86ff6b
1 parent 3a28b47
commit c86ff6b
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 70 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -6,7 +6,8 @@
         "@gravity-ui/eslint-config/import-order"
     ],
     "rules": {
-        "valid-jsdoc": 0
+        "valid-jsdoc": 0,
+        "no-console": ["error", {"allow": ["warn", "error"]}]
     },
     "root": true,
     "overrides": [{

diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-bar-y.ts
@@ -27,8 +27,6 @@ function prepareDataLabels(series: BarYSeries) {
     });
     const inside = series.stacking === 'percent' ? true : get(series, 'dataLabels.inside', false);
 
-    console.log('prepareDataLabels', {maxWidth});
-
     return {
         enabled,
         inside,

diff --git a/src/plugins/d3/renderer/hooks/useShapes/HtmlLayer.tsx b/src/plugins/d3/renderer/hooks/useShapes/HtmlLayer.tsx
@@ -2,15 +2,26 @@ import React from 'react';
 
 import {Portal} from '@gravity-ui/uikit';
 
-import {HtmlItem} from '../../types';
+import {HtmlItem, ShapeDataWithHtmlItems} from '../../types';
 
 type Props = {
     htmlLayout: HTMLElement | null;
-    items: HtmlItem[];
+    preparedData: ShapeDataWithHtmlItems | ShapeDataWithHtmlItems[];
 };
 
 export const HtmlLayer = (props: Props) => {
-    const {items, htmlLayout} = props;
+    const {htmlLayout, preparedData} = props;
+
+    const items = React.useMemo(() => {
+        if (Array.isArray(preparedData)) {
+            return preparedData.reduce<HtmlItem[]>((result, d) => {
+                result.push(...d.htmlElements);
+                return result;
+            }, []);
+        } else {
+            return preparedData.htmlElements;
+        }
+    }, [preparedData]);
 
     if (!htmlLayout) {
         return null;

diff --git a/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx
@@ -7,7 +7,6 @@ import get from 'lodash/get';
 import type {TooltipDataChunkArea} from '../../../../../../types';
 import {block} from '../../../../../../utils/cn';
 import type {LabelData} from '../../../types';
-import {HtmlItem} from '../../../types';
 import {filterOverlappingLabels} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
@@ -37,13 +36,6 @@ export const AreaSeriesShapes = (args: Args) => {
 
     const ref = React.useRef<SVGGElement | null>(null);
 
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
-
     React.useEffect(() => {
         if (!ref.current) {
             return () => {};
@@ -205,7 +197,7 @@ export const AreaSeriesShapes = (args: Args) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-x/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-x/index.tsx
@@ -5,7 +5,7 @@ import type {Dispatch} from 'd3';
 import get from 'lodash/get';
 
 import {block} from '../../../../../../utils/cn';
-import {HtmlItem, LabelData} from '../../../types';
+import {LabelData} from '../../../types';
 import {filterOverlappingLabels} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
@@ -29,13 +29,6 @@ export const BarXSeriesShapes = (args: Args) => {
 
     const ref = React.useRef<SVGGElement>(null);
 
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
-
     React.useEffect(() => {
         if (!ref.current) {
             return () => {};
@@ -132,7 +125,7 @@ export const BarXSeriesShapes = (args: Args) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-y/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-y/index.tsx
@@ -5,7 +5,7 @@ import type {Dispatch} from 'd3';
 import get from 'lodash/get';
 
 import {block} from '../../../../../../utils/cn';
-import {HtmlItem, LabelData} from '../../../types';
+import {LabelData} from '../../../types';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
 
@@ -25,13 +25,6 @@ export const BarYSeriesShapes = (args: Args) => {
     const {dispatcher, preparedData, seriesOptions, htmlLayout} = args;
     const ref = React.useRef<SVGGElement>(null);
 
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
-
     React.useEffect(() => {
         if (!ref.current) {
             return () => {};
@@ -117,7 +110,7 @@ export const BarYSeriesShapes = (args: Args) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx
@@ -7,7 +7,6 @@ import get from 'lodash/get';
 import type {TooltipDataChunkLine} from '../../../../../../types';
 import {block} from '../../../../../../utils/cn';
 import type {LabelData} from '../../../types';
-import {HtmlItem} from '../../../types';
 import {filterOverlappingLabels} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
@@ -36,12 +35,6 @@ export const LineSeriesShapes = (args: Args) => {
     const {dispatcher, preparedData, seriesOptions, htmlLayout} = args;
 
     const ref = React.useRef<SVGGElement>(null);
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
 
     React.useEffect(() => {
         if (!ref.current) {
@@ -191,7 +184,7 @@ export const LineSeriesShapes = (args: Args) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx
@@ -6,7 +6,6 @@ import get from 'lodash/get';
 
 import {TooltipDataChunkPie} from '../../../../../../types';
 import {block} from '../../../../../../utils/cn';
-import {HtmlItem} from '../../../types';
 import {setEllipsisForOverflowTexts} from '../../../utils';
 import {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
@@ -33,13 +32,6 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) {
     const {dispatcher, preparedData, seriesOptions, htmlLayout} = args;
     const ref = React.useRef<SVGGElement | null>(null);
 
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
-
     React.useEffect(() => {
         if (!ref.current) {
             return () => {};
@@ -229,7 +221,7 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} style={{zIndex: 9}} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 }
diff --git a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx
@@ -6,7 +6,6 @@ import get from 'lodash/get';
 
 import {TooltipDataChunkScatter} from '../../../../../../types';
 import {block} from '../../../../../../utils/cn';
-import {HtmlItem} from '../../../types';
 import {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
 import {
@@ -33,12 +32,6 @@ const b = block('d3-scatter');
 export function ScatterSeriesShape(props: ScatterSeriesShapeProps) {
     const {dispatcher, preparedData, seriesOptions, htmlLayout} = props;
     const ref = React.useRef<SVGGElement>(null);
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
 
     React.useEffect(() => {
         if (!ref.current) {
@@ -111,7 +104,7 @@ export function ScatterSeriesShape(props: ScatterSeriesShapeProps) {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 }
diff --git a/src/plugins/d3/renderer/hooks/useShapes/treemap/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/treemap/index.tsx
@@ -24,9 +24,6 @@ type ShapeProps = {
 export const TreemapSeriesShape = (props: ShapeProps) => {
     const {dispatcher, preparedData, seriesOptions, htmlLayout} = props;
     const ref = React.useRef<SVGGElement>(null);
-    const htmlItems = React.useMemo(() => {
-        return preparedData.htmlElements ?? [];
-    }, [preparedData]);
 
     React.useEffect(() => {
         if (!ref.current) {
@@ -126,7 +123,7 @@ export const TreemapSeriesShape = (props: ShapeProps) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/hooks/useShapes/waterfall/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/waterfall/index.tsx
@@ -7,7 +7,6 @@ import get from 'lodash/get';
 import {DashStyle} from '../../../../../../constants';
 import {block} from '../../../../../../utils/cn';
 import type {LabelData} from '../../../types';
-import {HtmlItem} from '../../../types';
 import {filterOverlappingLabels, getWaterfallPointColor} from '../../../utils';
 import type {PreparedSeriesOptions} from '../../useSeries/types';
 import {HtmlLayer} from '../HtmlLayer';
@@ -32,12 +31,6 @@ export const WaterfallSeriesShapes = (args: Args) => {
 
     const ref = React.useRef<SVGGElement | null>(null);
     const connectorSelector = `.${b('connector')}`;
-    const htmlItems = React.useMemo(() => {
-        return preparedData.reduce<HtmlItem[]>((result, d) => {
-            result.push(...d.htmlElements);
-            return result;
-        }, []);
-    }, [preparedData]);
 
     React.useEffect(() => {
         if (!ref.current) {
@@ -165,7 +158,7 @@ export const WaterfallSeriesShapes = (args: Args) => {
     return (
         <React.Fragment>
             <g ref={ref} className={b()} />
-            <HtmlLayer items={htmlItems} htmlLayout={htmlLayout} />
+            <HtmlLayer preparedData={preparedData} htmlLayout={htmlLayout} />
         </React.Fragment>
     );
 };
diff --git a/src/plugins/d3/renderer/types/index.ts b/src/plugins/d3/renderer/types/index.ts
@@ -16,3 +16,7 @@ export type HtmlItem = {
     y: number;
     content: string;
 };
+
+export type ShapeDataWithHtmlItems = {
+    htmlElements: HtmlItem[];
+};