@centreon/ui 25.3.4 → 25.4.0-MON-191119-npm-develop.0

package/src/Graph/BarChart/BarGroup.tsx

@@ -1,12 +1,13 @@
 import { scaleBand, scaleOrdinal } from '@visx/scale';
 import { BarGroupHorizontal, BarGroup as VisxBarGroup } from '@visx/shape';
 import { ScaleLinear } from 'd3-scale';
-import { difference, equals, keys, omit, pick, pluck, uniq } from 'ramda';
+import { difference, equals, keys, omit, pick } from 'ramda';
 import { memo, useMemo } from 'react';
 
 import { useDeepMemo } from '../../utils';
 import {
   getSortedStackedLines,
+  getStackedLinesTimeSeriesPerStackAndUnit,
   getTime,
   getTimeSeriesForLines,
   getUnits
@@ -54,41 +55,18 @@ const BarGroup = ({
   );
 
   const stackedLines = getSortedStackedLines(lines);
-  const stackedUnits = uniq(pluck('unit', stackedLines));
   const notStackedLines = difference(lines, stackedLines);
-
-  const stackedKeys = stackedUnits.reduce(
-    (acc, unit) => ({
-      ...acc,
-      [`stacked-${unit}`]: null
-    }),
-    {}
-  );
-  const stackedLinesTimeSeriesPerUnit = stackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = stackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
-
   const notStackedTimeSeries = getTimeSeriesForLines({
     lines: notStackedLines,
     timeSeries
   });
 
+  const { stackedLinesTimeSeriesPerStackKeyAndUnit, stackedKeys } = useMemo(
+    () =>
+      getStackedLinesTimeSeriesPerStackAndUnit({ stackedLines, timeSeries }),
+    [stackedLines, timeSeries]
+  );
+
   const normalizedTimeSeries = notStackedTimeSeries.map((timeSerie) => ({
     ...timeSerie,
     ...stackedKeys
@@ -98,6 +76,16 @@ const BarGroup = ({
     deps: [normalizedTimeSeries],
     variable: keys(omit(['timeTick'], normalizedTimeSeries[0]))
   });
+  const sortedLineKeys = lineKeys.sort((lineKeyA: string, lineKeyB: string) => {
+    if (lineKeyA.startsWith('stacked-') && !lineKeyB.startsWith('stacked-')) {
+      return true;
+    }
+
+    const lineKeysA = lineKeyA.split('-');
+    const lineKeysB = lineKeyB.split('-');
+
+    return lineKeysA[2] === '' && lineKeysB[2] !== '';
+  });
   const colors = useDeepMemo({
     deps: [lineKeys, lines],
     variable: lineKeys.map((key) => {
@@ -154,7 +142,7 @@ const BarGroup = ({
       color={colorScale}
       data={normalizedTimeSeries}
       height={size}
-      keys={lineKeys}
+      keys={sortedLineKeys}
       {...barComponentBaseProps}
     >
       {(barGroups) =>
@@ -164,7 +152,9 @@ const BarGroup = ({
               key={`bar-group-${barGroup.index}-${barGroup.x0}`}
               barGroup={barGroup}
               barStyle={barStyle}
-              stackedLinesTimeSeriesPerUnit={stackedLinesTimeSeriesPerUnit}
+              stackedLinesTimeSeriesPerStackKeyAndUnit={
+                stackedLinesTimeSeriesPerStackKeyAndUnit
+              }
               notStackedTimeSeries={notStackedTimeSeries}
               notStackedLines={notStackedLines}
               isTooltipHidden={isTooltipHidden}

package/src/Graph/BarChart/MemoizedGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
   isTooltipHidden: boolean;
   barStyle: BarStyle;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
-  stackedLinesTimeSeriesPerUnit: Record<
+  stackedLinesTimeSeriesPerStackKeyAndUnit: Record<
     string,
     { lines: Array<Line>; timeSeries: Array<TimeValue> }
   >;
@@ -25,7 +25,7 @@ interface Props {
 
 const MemoizedGroup = ({
   barGroup,
-  stackedLinesTimeSeriesPerUnit,
+  stackedLinesTimeSeriesPerStackKeyAndUnit,
   notStackedLines,
   notStackedTimeSeries,
   isHorizontal,
@@ -38,9 +38,7 @@ const MemoizedGroup = ({
   const hasEmptyValues = barGroup.bars.every(({ key, value }) => {
     if (key.startsWith('stacked-')) {
       const timeValueBar =
-        stackedLinesTimeSeriesPerUnit[key.replace('stacked-', '')].timeSeries[
-          barIndex
-        ];
+        stackedLinesTimeSeriesPerStackKeyAndUnit[key].timeSeries[barIndex];
 
       return Object.values(omit(['timeTick'], timeValueBar)).every(
         (value) => !value
@@ -59,13 +57,12 @@ const MemoizedGroup = ({
       {barGroup.bars.map((bar) => {
         const isStackedBar = bar.key.startsWith('stacked-');
         const linesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')].lines
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].lines
           : (notStackedLines.find(({ metric_id }) =>
               equals(metric_id, Number(bar.key))
             ) as Line);
         const timeSeriesBar = isStackedBar
-          ? stackedLinesTimeSeriesPerUnit[bar.key.replace('stacked-', '')]
-              .timeSeries
+          ? stackedLinesTimeSeriesPerStackKeyAndUnit[bar.key].timeSeries
           : notStackedTimeSeries.map((timeSerie) => ({
               timeTick: timeSerie.timeTick,
               [bar.key]: timeSerie[Number(bar.key)]
@@ -82,7 +79,7 @@ const MemoizedGroup = ({
             isTooltipHidden={isTooltipHidden}
             lines={linesBar as Array<Line>}
             timeSeries={timeSeriesBar}
-            yScale={yScalesPerUnit[bar.key.replace('stacked-', '')]}
+            yScale={yScalesPerUnit[bar.key.split('-')[1] || undefined]}
             neutralValue={neutralValue}
           />
         ) : (
@@ -110,8 +107,8 @@ export default memo(
   (prevProps, nextProps) =>
     equals(prevProps.barGroup, nextProps.barGroup) &&
     equals(
-      prevProps.stackedLinesTimeSeriesPerUnit,
-      nextProps.stackedLinesTimeSeriesPerUnit
+      prevProps.stackedLinesTimeSeriesPerStackKeyAndUnit,
+      nextProps.stackedLinesTimeSeriesPerStackKeyAndUnit
     ) &&
     equals(prevProps.notStackedLines, nextProps.notStackedLines) &&
     equals(prevProps.notStackedTimeSeries, nextProps.notStackedTimeSeries) &&

package/src/Graph/BarChart/ResponsiveBarChart.tsx

@@ -1,12 +1,21 @@
-import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  MutableRefObject,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { equals, flatten, gte, has, isNil, pluck } from 'ramda';
 
 import { Skeleton } from '@mui/material';
 
 import { Tooltip } from '../../components';
 import { useDeepCompare } from '../../utils';
+import InteractionWithGraph from '../Chart/InteractiveComponents';
+import { applyingZoomAtomAtom } from '../Chart/InteractiveComponents/ZoomPreview/zoomPreviewAtoms';
 import { margin } from '../Chart/common';
 import { Data, LineChartProps } from '../Chart/models';
 import { useIntersection } from '../Chart/useChartIntersection';
@@ -18,18 +27,29 @@ import Thresholds from '../common/Thresholds/Thresholds';
 import { Thresholds as ThresholdsModel } from '../common/models';
 import {
   getUnits,
+  getXScale,
   getXScaleBand,
   getYScalePerUnit
 } from '../common/timeSeries';
 import { Line } from '../common/timeSeries/models';
 import { useTooltipStyles } from '../common/useTooltipStyles';
+import { computPixelsToShiftMouse } from '../common/utils';
 import BarGroup from './BarGroup';
 import BarChartTooltip from './Tooltip/BarChartTooltip';
 import { tooltipDataAtom } from './atoms';
 import { BarStyle } from './models';
 
 interface Props
-  extends Pick<LineChartProps, 'tooltip' | 'legend' | 'axis' | 'header'> {
+  extends Pick<
+    LineChartProps,
+    | 'tooltip'
+    | 'legend'
+    | 'axis'
+    | 'header'
+    | 'zoomPreview'
+    | 'timeShiftZones'
+    | 'annotationEvent'
+  > {
   barStyle: BarStyle;
   graphData: Data;
   graphRef: MutableRefObject<HTMLDivElement | null>;
@@ -40,6 +60,11 @@ interface Props
   thresholds?: ThresholdsModel;
   width: number;
   skipIntersectionObserver?: boolean;
+  min?: number;
+  max?: number;
+  boundariesUnit?: string;
+  start: string;
+  end: string;
 }
 
 const ResponsiveBarChart = ({
@@ -56,8 +81,16 @@ const ResponsiveBarChart = ({
   orientation,
   tooltip,
   barStyle,
-  skipIntersectionObserver
-}: Props): JSX.Element => {
+  skipIntersectionObserver,
+  min,
+  max,
+  boundariesUnit,
+  start,
+  end,
+  timeShiftZones,
+  zoomPreview,
+  annotationEvent
+}: Props): ReactElement => {
   const { title, timeSeries, baseAxis, lines } = graphData || {};
 
   const { classes, cx } = useTooltipStyles();
@@ -66,6 +99,7 @@ const ResponsiveBarChart = ({
   const graphSvgRef = useRef<SVGSVGElement | null>(null);
 
   const [tooltipData, setTooltipData] = useAtom(tooltipDataAtom);
+  const isApplyingZoom = useAtomValue(applyingZoomAtomAtom);
 
   const { isInViewport } = useIntersection({ element: graphRef?.current });
 
@@ -119,6 +153,15 @@ const ResponsiveBarChart = ({
     [timeSeries, graphWidth, isHorizontal, graphHeight]
   );
 
+  const xScaleLinear = useMemo(
+    () =>
+      getXScale({
+        dataTime: timeSeries,
+        valueWidth: isHorizontal ? graphWidth : graphHeight - 30
+      }),
+    [timeSeries, graphWidth, isHorizontal, graphHeight]
+  );
+
   const yScalesPerUnit = useMemo(
     () =>
       getYScalePerUnit({
@@ -131,7 +174,11 @@ const ResponsiveBarChart = ({
         thresholdUnit,
         thresholds: (thresholds?.enabled && thresholdValues) || [],
         valueGraphHeight:
-          (isHorizontal ? graphHeight : graphWidth) - margin.bottom
+          (isHorizontal ? graphHeight : graphWidth) - margin.bottom,
+        min,
+        max,
+        isBarChart: true,
+        boundariesUnit
       }),
     [
       displayedLines,
@@ -148,6 +195,7 @@ const ResponsiveBarChart = ({
 
   const leftScale = yScalesPerUnit[firstUnit];
   const rightScale = yScalesPerUnit[secondUnit];
+  const pixelsToShift = computPixelsToShiftMouse(xScaleLinear);
 
   useEffect(
     () => {
@@ -186,7 +234,8 @@ const ResponsiveBarChart = ({
         displayLegend,
         mode: legend?.mode,
         placement: legend?.placement,
-        renderExtraComponent: legend?.renderExtraComponent
+        renderExtraComponent: legend?.renderExtraComponent,
+        secondaryClick: legend?.secondaryClick
       }}
       legendRef={legendRef}
       limitLegend={limitLegend}
@@ -233,33 +282,97 @@ const ResponsiveBarChart = ({
             hasSecondUnit={Boolean(secondUnit)}
           >
             <>
-              <BarGroup
-                barStyle={barStyle}
-                isTooltipHidden={isTooltipHidden}
-                lines={displayedLines}
-                orientation={isHorizontal ? 'horizontal' : 'vertical'}
-                size={isHorizontal ? graphHeight - margin.top - 5 : graphWidth}
-                timeSeries={timeSeries}
-                xScale={xScale}
-                yScalesPerUnit={yScalesPerUnit}
-                scaleType={axis?.scale}
-              />
-              {thresholds?.enabled && (
-                <Thresholds
-                  displayedLines={displayedLines}
-                  hideTooltip={() => setTooltipData(null)}
-                  isHorizontal={isHorizontal}
-                  showTooltip={({ tooltipData: thresholdLabel }) =>
-                    setTooltipData({
-                      thresholdLabel
-                    })
-                  }
-                  thresholdUnit={thresholdUnit}
-                  thresholds={thresholds as ThresholdsModel}
-                  width={isHorizontal ? graphWidth : graphHeight - margin.top}
-                  yScalesPerUnit={yScalesPerUnit}
+              {isApplyingZoom && (
+                <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={displayedLines}
+                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                    size={
+                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                    }
+                    timeSeries={timeSeries}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    scaleType={axis?.scale}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
+                      displayedLines={displayedLines}
+                      hideTooltip={() => setTooltipData(null)}
+                      isHorizontal={isHorizontal}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setTooltipData({
+                          thresholdLabel
+                        })
+                      }
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
+                      width={
+                        isHorizontal ? graphWidth : graphHeight - margin.top
+                      }
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                </>
+              )}
+              {isHorizontal && (
+                <InteractionWithGraph
+                  additionalZoomMargin={pixelsToShift}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
+                  commonData={{
+                    graphHeight,
+                    graphSvgRef,
+                    graphWidth,
+                    lines,
+                    xScale: xScaleLinear,
+                    timeSeries,
+                    yScalesPerUnit
+                  }}
+                  annotationData={{ ...annotationEvent }}
+                  zoomData={{ ...zoomPreview }}
+                  timeShiftZonesData={{
+                    ...timeShiftZones,
+                    graphInterval: { start, end }
+                  }}
                 />
               )}
+              {!isApplyingZoom && (
+                <>
+                  <BarGroup
+                    barStyle={barStyle}
+                    isTooltipHidden={isTooltipHidden}
+                    lines={displayedLines}
+                    orientation={isHorizontal ? 'horizontal' : 'vertical'}
+                    size={
+                      isHorizontal ? graphHeight - margin.top - 5 : graphWidth
+                    }
+                    timeSeries={timeSeries}
+                    xScale={xScale}
+                    yScalesPerUnit={yScalesPerUnit}
+                    scaleType={axis?.scale}
+                  />
+                  {thresholds?.enabled && (
+                    <Thresholds
+                      displayedLines={displayedLines}
+                      hideTooltip={() => setTooltipData(null)}
+                      isHorizontal={isHorizontal}
+                      showTooltip={({ tooltipData: thresholdLabel }) =>
+                        setTooltipData({
+                          thresholdLabel
+                        })
+                      }
+                      thresholdUnit={thresholdUnit}
+                      thresholds={thresholds as ThresholdsModel}
+                      width={
+                        isHorizontal ? graphWidth : graphHeight - margin.top
+                      }
+                      yScalesPerUnit={yScalesPerUnit}
+                    />
+                  )}
+                </>
+              )}
             </>
           </ChartSvgWrapper>
         </div>

package/src/Graph/BarChart/Tooltip/BarChartTooltip.tsx

@@ -36,7 +36,7 @@ const BarChartTooltip = ({
   sortOrder
 }: Props): JSX.Element | null => {
   const { classes } = useBarChartTooltipStyles();
-  const { toDate, toTime } = useLocaleDateTimeFormat();
+  const { format } = useLocaleDateTimeFormat();
   const tooltipData = useAtomValue(tooltipDataAtom);
 
   if (isNil(tooltipData)) {
@@ -48,7 +48,7 @@ const BarChartTooltip = ({
   }
 
   const date = timeSeries[tooltipData.index].timeTick;
-  const formattedDateTime = `${toDate(date)} / ${toTime(date)}`;
+  const formattedDateTime = format({ date, formatString: 'L LTS' });
 
   const isSingleMode = equals(mode, 'single');
 

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/index.tsx

@@ -43,6 +43,8 @@ interface Props {
   xScale: ScaleTime<number, number>;
   yScale: ScaleLinear<number, number>;
   lineStyle: LineStyle | Array<LineStyle>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const StackLines = ({
@@ -51,7 +53,9 @@ const StackLines = ({
   yScale,
   xScale,
   displayAnchor,
-  lineStyle
+  lineStyle,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element => {
   const curveType = getCurveFactory(
     (equals(type(lineStyle), 'Array')
@@ -101,6 +105,8 @@ const StackLines = ({
                   transparency={transparency}
                   xScale={xScale}
                   yScale={yScale}
+                  hasSecondUnit={hasSecondUnit}
+                  maxLeftAxisCharacters={maxLeftAxisCharacters}
                 />
               )}
               {style?.showPoints &&

package/src/Graph/Chart/BasicComponents/Lines/StackedLines/useStackedLines.ts

@@ -1,9 +1,7 @@
-import { equals, pluck, uniq } from 'ramda';
-
 import {
   getInvertedStackedLines,
   getNotInvertedStackedLines,
-  getTimeSeriesForLines
+  getStackedLinesTimeSeriesPerStackAndUnit
 } from '../../../../common/timeSeries';
 import { LinesData } from '../models';
 
@@ -14,53 +12,28 @@ interface StackedLinesState {
 
 const useStackedLines = ({ lines, timeSeries }): StackedLinesState => {
   const regularStackedLines = getNotInvertedStackedLines(lines);
-  const regularStackedUnits = uniq(pluck('unit', regularStackedLines));
-  const regularStackedLinesTimeSeriesPerUnit = regularStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = regularStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
-
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      regularStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: regularStackedLines,
+    timeSeries
+  });
 
   const invertedStackedLines = getInvertedStackedLines(lines);
-  const invertedStackedUnits = uniq(pluck('unit', invertedStackedLines));
-  const invertedStackedLinesTimeSeriesPerUnit = invertedStackedUnits.reduce(
-    (acc, stackedUnit) => {
-      const relatedLines = invertedStackedLines.filter(({ unit }) =>
-        equals(unit, stackedUnit)
-      );
 
-      return {
-        ...acc,
-        [stackedUnit]: {
-          lines: relatedLines,
-          timeSeries: getTimeSeriesForLines({
-            invert: true,
-            lines: relatedLines,
-            timeSeries
-          })
-        }
-      };
-    },
-    {}
-  );
+  const {
+    stackedLinesTimeSeriesPerStackKeyAndUnit:
+      invertedStackedLinesTimeSeriesPerStackKeyAndUnit
+  } = getStackedLinesTimeSeriesPerStackAndUnit({
+    stackedLines: invertedStackedLines,
+    timeSeries,
+    invert: true
+  });
 
   return {
-    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerUnit,
-    stackedLinesData: regularStackedLinesTimeSeriesPerUnit
+    invertedStackedLinesData: invertedStackedLinesTimeSeriesPerStackKeyAndUnit,
+    stackedLinesData: regularStackedLinesTimeSeriesPerStackKeyAndUnit
   };
 };
 

package/src/Graph/Chart/BasicComponents/Lines/index.tsx

@@ -40,6 +40,8 @@ interface Props extends GlobalAreaLines {
   xScale: ScaleLinear<number, number>;
   yScalesPerUnit: Record<string, ScaleLinear<number, number>>;
   lineStyle: LineStyle | Array<LineStyle>;
+  hasSecondUnit?: boolean;
+  maxLeftAxisCharacters: number;
 }
 
 const Lines = ({
@@ -56,7 +58,9 @@ const Lines = ({
   areaRegularLines,
   scale,
   scaleLogarithmicBase,
-  lineStyle
+  lineStyle,
+  hasSecondUnit,
+  maxLeftAxisCharacters
 }: Props): JSX.Element => {
   const { stackedLinesData, invertedStackedLinesData } = useStackedLines({
     lines: displayedLines,
@@ -78,7 +82,9 @@ const Lines = ({
     graphHeight: height,
     graphSvgRef,
     graphWidth: width,
-    xScale
+    xScale,
+    hasSecondUnit,
+    maxLeftAxisCharacters
   };
 
   return (
@@ -95,34 +101,40 @@ const Lines = ({
       {(areaStackedLines?.display ?? true) && (
         <>
           {Object.entries(stackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={yScalesPerUnit[unit]}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={yScalesPerUnit[unit || undefined]}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
           {Object.entries(invertedStackedLinesData).map(
-            ([unit, { lines, timeSeries: stackedTimeSeries }]) => (
-              <StackedLines
-                lineStyle={lineStyle}
-                key={`invert-stacked-${unit}`}
-                lines={lines}
-                timeSeries={stackedTimeSeries}
-                yScale={getYScale({
-                  invert: '1',
-                  scale,
-                  scaleLogarithmicBase,
-                  unit,
-                  yScalesPerUnit
-                })}
-                {...commonStackedLinesProps}
-              />
-            )
+            ([stackedKey, { lines, timeSeries: stackedTimeSeries }]) => {
+              const [, unit] = stackedKey.split('-');
+              return (
+                <StackedLines
+                  lineStyle={lineStyle}
+                  key={`invert-stacked-${unit}`}
+                  lines={lines}
+                  timeSeries={stackedTimeSeries}
+                  yScale={getYScale({
+                    invert: '1',
+                    scale,
+                    scaleLogarithmicBase,
+                    unit: unit || undefined,
+                    yScalesPerUnit
+                  })}
+                  {...commonStackedLinesProps}
+                />
+              );
+            }
           )}
         </>
       )}
@@ -192,6 +204,8 @@ const Lines = ({
                       transparency={transparency}
                       xScale={xScale}
                       yScale={yScale}
+                      maxLeftAxisCharacters={maxLeftAxisCharacters}
+                      hasSecondUnit={hasSecondUnit}
                     />
                   )}
                   {style?.showPoints &&