From c86ff6bb64c5f69947b7eb3203fe98bcb16379f4 Mon Sep 17 00:00:00 2001 From: "Irina V. Kuzmina" Date: Thu, 10 Oct 2024 10:46:21 +0300 Subject: [PATCH] fix --- .eslintrc | 3 ++- .../renderer/hooks/useSeries/prepare-bar-y.ts | 2 -- .../d3/renderer/hooks/useShapes/HtmlLayer.tsx | 17 ++++++++++++++--- .../d3/renderer/hooks/useShapes/area/index.tsx | 10 +--------- .../d3/renderer/hooks/useShapes/bar-x/index.tsx | 11 ++--------- .../d3/renderer/hooks/useShapes/bar-y/index.tsx | 11 ++--------- .../d3/renderer/hooks/useShapes/line/index.tsx | 9 +-------- .../d3/renderer/hooks/useShapes/pie/index.tsx | 10 +--------- .../renderer/hooks/useShapes/scatter/index.tsx | 9 +-------- .../renderer/hooks/useShapes/treemap/index.tsx | 5 +---- .../hooks/useShapes/waterfall/index.tsx | 9 +-------- src/plugins/d3/renderer/types/index.ts | 4 ++++ 12 files changed, 30 insertions(+), 70 deletions(-) diff --git a/.eslintrc b/.eslintrc index 3067068c..34a0d261 100644 --- 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 index 6c4c1734..e0c70ac0 100644 --- 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 index 3f1cd486..3560eff8 100644 --- 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((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 index 4a457919..a820f758 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((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 ( - + ); }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-x/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-x/index.tsx index 05465181..9e232dd0 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((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 ( - + ); }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/bar-y/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/bar-y/index.tsx index 141cb185..1923f64b 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((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 ( - + ); }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx index ce5553bc..714a09a7 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((result, d) => { - result.push(...d.htmlElements); - return result; - }, []); - }, [preparedData]); React.useEffect(() => { if (!ref.current) { @@ -191,7 +184,7 @@ export const LineSeriesShapes = (args: Args) => { return ( - + ); }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx index de594f74..7ad65059 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((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 ( - + ); } diff --git a/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/scatter/index.tsx index 0e06e4d5..95dedb3e 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.reduce((result, d) => { - result.push(...d.htmlElements); - return result; - }, []); - }, [preparedData]); React.useEffect(() => { if (!ref.current) { @@ -111,7 +104,7 @@ export function ScatterSeriesShape(props: ScatterSeriesShapeProps) { return ( - + ); } diff --git a/src/plugins/d3/renderer/hooks/useShapes/treemap/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/treemap/index.tsx index 46d6c9dd..b3cc61fa 100644 --- 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(null); - const htmlItems = React.useMemo(() => { - return preparedData.htmlElements ?? []; - }, [preparedData]); React.useEffect(() => { if (!ref.current) { @@ -126,7 +123,7 @@ export const TreemapSeriesShape = (props: ShapeProps) => { return ( - + ); }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/waterfall/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/waterfall/index.tsx index 048a7d26..e8a071b1 100644 --- 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(null); const connectorSelector = `.${b('connector')}`; - const htmlItems = React.useMemo(() => { - return preparedData.reduce((result, d) => { - result.push(...d.htmlElements); - return result; - }, []); - }, [preparedData]); React.useEffect(() => { if (!ref.current) { @@ -165,7 +158,7 @@ export const WaterfallSeriesShapes = (args: Args) => { return ( - + ); }; diff --git a/src/plugins/d3/renderer/types/index.ts b/src/plugins/d3/renderer/types/index.ts index c11a6014..6fc5f49f 100644 --- 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[]; +};