@redsift/charts 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/_internal/ScatterPlot2.js

@@ -1,740 +0,0 @@
-import { _ as _objectWithoutProperties, a as _extends, b as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useEffect, useState, forwardRef } from 'react';
-import classNames from 'classnames';
-import { useTheme, useMessageFormatter, Flexbox, Button, Text, useId } from '@redsift/design-system';
-import { L as LegendVariant, T as TooltipVariant } from './legend2.js';
-import { C as ChartSize, g as getSortingMethod, u as useColor, m as mergeLegends, a as ColorTheme } from './theme.js';
-import styled from 'styled-components';
-import { C as ChartContainer } from './ChartContainer2.js';
-import { brush, select, zoom, interpolateRound, scaleLinear, min, extent, descending, scaleSqrt, max } from 'd3';
-import { A as Axis, a as AxisVariant } from './Axis2.js';
-import { Popover } from '@redsift/popovers';
-import { D as Dot } from './Dot2.js';
-import { L as Legend } from './Legend3.js';
-
-const getRoundedIntermediaryPoint = (selection, scaleX, scaleY) => {
-  if (!selection) {
-    return null;
-  }
-  const xTicks = scaleX.ticks(20);
-  const xDelta = xTicks[1] - xTicks[0];
-  const yTicks = scaleY.ticks(20);
-  const yDelta = yTicks[1] - yTicks[0];
-  return [[scaleX(Math.round(scaleX.invert(selection[0][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[0][1]) / yDelta) * yDelta - yDelta / 2)], [scaleX(Math.round(scaleX.invert(selection[1][0]) / xDelta) * xDelta - xDelta / 2), scaleY(Math.round(scaleY.invert(selection[1][1]) / yDelta) * yDelta - yDelta / 2)]];
-};
-const useBrush = _ref => {
-  let {
-    brushRef: propsBrushRef,
-    svgRef,
-    extent,
-    scaleX,
-    scaleY,
-    isBrushable,
-    isGridded,
-    onBrush,
-    onBrushEnd
-  } = _ref;
-  const brushRef = propsBrushRef || useRef();
-  useEffect(() => {
-    if (svgRef.current && isBrushable) {
-      brushRef.current = brush().extent(extent).keyModifiers(false).filter(event => event.shiftKey).on('brush', event => {
-        if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
-        if (isGridded) {
-          const selection = getRoundedIntermediaryPoint(event.selection, scaleX, scaleY);
-          select(svgRef.current).call(brushRef.current.move, selection);
-          onBrush === null || onBrush === void 0 ? void 0 : onBrush(selection, scaleX, scaleY);
-        } else {
-          onBrush === null || onBrush === void 0 ? void 0 : onBrush(event.selection, scaleX, scaleY);
-        }
-      }).on('end', event => {
-        if (!event.sourceEvent || !brushRef.current || !svgRef.current) return;
-        onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd(event.selection, scaleX, scaleY);
-      });
-      select(svgRef.current).call(brushRef.current);
-    }
-  });
-};
-
-const useZoom = _ref => {
-  let {
-    svgRef,
-    scaleX,
-    scaleY,
-    defaultTransform = {
-      k: 1,
-      x: 0,
-      y: 0
-    },
-    size,
-    onZoom
-  } = _ref;
-  const zx = useRef(scaleX);
-  const zy = useRef(scaleY);
-  const [transform, setTransform] = useState(defaultTransform);
-  useEffect(() => {
-    if (svgRef.current) {
-      const zoom$1 = zoom().filter(event => !event.shiftKey).scaleExtent([1 / 2 ** 3, 2 ** 3]).on('zoom', event => {
-        onZoom === null || onZoom === void 0 ? void 0 : onZoom();
-        zx.current = event.transform.rescaleX(scaleX).interpolate(interpolateRound);
-        zy.current = event.transform.rescaleY(scaleY).interpolate(interpolateRound);
-        setTransform(event.transform);
-      });
-      select(svgRef.current).call(zoom$1);
-    }
-  }, [svgRef.current, size]);
-  return {
-    transform,
-    scaleX: zx.current,
-    scaleY: zy.current
-  };
-};
-
-/**
- * Component variant.
- */
-const ScatterPlotVariant = {
-  default: 'default',
-  gridded: 'gridded'
-};
-/**
- * Component's labels variant.
- */
-const ScatterPlotLegendVariant = {
-  none: 'none',
-  externalLabel: 'externalLabel',
-  externalLabelValue: 'externalLabelValue',
-  externalLabelPercent: 'externalLabelPercent',
-  custom: 'custom'
-};
-
-/**
- * Component props.
- */
-
-/**
- * Component style.
- */
-const StyledScatterPlot = styled(ChartContainer)``;
-const StyledScatterPlotEmptyText = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-
-  > * {
-    max-width: ${_ref => {
-  let {
-    $maxWidth
-  } = _ref;
-  return $maxWidth;
-}}px;
-  }
-
-  > span {
-    font-family: var(--redsift-typography-font-family-poppins);
-    color: ${_ref2 => {
-  let {
-    $theme
-  } = _ref2;
-  return `var(--redsift-color-${$theme}-components-text-primary)`;
-}};
-    font-size: ${_ref3 => {
-  let {
-    $textSize
-  } = _ref3;
-  return $textSize;
-}}px;
-    line-height: ${_ref4 => {
-  let {
-    $textSize
-  } = _ref4;
-  return $textSize;
-}}px;
-  }
-`;
-
-const _excluded$3 = ["className"];
-const LoadingScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$3);
-  return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
-    className: className,
-    ref: ref
-  }), "Loading...");
-});
-
-const sizeToDimension = size => {
-  if (typeof size !== 'string') {
-    return size;
-  }
-  switch (size) {
-    case ChartSize.small:
-      return {
-        width: 600,
-        height: 300,
-        fontSize: 30
-      };
-    case ChartSize.medium:
-    default:
-      return {
-        width: 750,
-        height: 375,
-        fontSize: 34
-      };
-    case ChartSize.large:
-      return {
-        width: 900,
-        height: 450,
-        fontSize: 38
-      };
-  }
-};
-const BASE_NUMBER_OF_TICKS = 20;
-const getClosestLineIndex = (value, scale) => {
-  const ticks = scale.ticks(BASE_NUMBER_OF_TICKS);
-  const delta = ticks[1] - ticks[0];
-  const index = Math.round(value / delta);
-  const roundValue = index * delta;
-  return [index, roundValue];
-};
-const group = (data, x, y) => {
-  const groupDict = {};
-  data.forEach(d => {
-    const [i, rx] = getClosestLineIndex(d.key[0], x);
-    const [j, ry] = getClosestLineIndex(d.key[1], y);
-    const key = `${i}_${j}_${d.key[2]}`;
-    if (!(key in groupDict)) {
-      groupDict[key] = {
-        category: d.key[2],
-        x: rx,
-        y: ry,
-        data: {
-          key: d.key,
-          value: 0
-        },
-        points: []
-      };
-    }
-    groupDict[key].points.push(d);
-    groupDict[key].data.value += 1;
-  });
-  return Object.values(groupDict);
-};
-const countBy = (arr, sortingMethod) => {
-  const counts = arr.reduce((prev, curr) => (prev[curr.key[2]] = ++prev[curr.key[2]] || 1, prev), {});
-  return Object.keys(counts).map(key => ({
-    key: key,
-    value: counts[key]
-  })).sort(getSortingMethod(sortingMethod));
-};
-
-const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size"];
-const EmptyScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      className,
-      data: propsData,
-      emptyComponent,
-      localeText,
-      size
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$2);
-  const theme = useTheme();
-  const cache = useRef();
-  const data = propsData;
-  useEffect(() => {
-    cache.current = data;
-  });
-  const chartDimensions = sizeToDimension(size);
-  const width = chartDimensions.width;
-  const height = chartDimensions.height;
-  const margins = {
-    top: 16,
-    left: 48,
-    right: 16,
-    bottom: 48
-  };
-  const chartWidth = width - margins.left - margins.right;
-  return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
-    className: className,
-    ref: ref
-  }), emptyComponent !== null && emptyComponent !== void 0 ? emptyComponent : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledScatterPlotEmptyText, {
-    $maxWidth: width,
-    $textSize: chartDimensions.fontSize / 2,
-    $theme: theme
-  }, /*#__PURE__*/React__default.createElement("span", null, localeText === null || localeText === void 0 ? void 0 : localeText.emptyChartText)), /*#__PURE__*/React__default.createElement("svg", {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement(Axis, {
-    position: "bottom",
-    length: width - 32,
-    scale: scaleLinear().domain([]).range([0, chartWidth]),
-    x: 0,
-    y: height,
-    tickValues: 4
-  })))));
-});
-
-var definition = "Linear Scatter Plot with {circleLength} circles.";
-var enUS = {
-	"interactive-chart": "Interactive Scatter Plot",
-	"static-chart": "Static Scatter Plot",
-	definition: definition,
-	"definition-with-categories": "Linear Scatter Plot with {categoryLength} categories and {circleLength} circles.",
-	"x-axis-definition": "The chart has {numAxis, plural, =0 {0 X axis} =1 {1 X axis} other {# X axes}} displaying numbers from {start, number} to {end, number}.",
-	"y-axis-definition": "The chart has {numAxis, plural, =0 {0 Y axis} =1 {1 Y axis} other {# Y axes}} displaying numbers from {start, number} to {end, number}."
-};
-
-var frFR = {
-	"interactive-chart": "Graphique en courbe interactif",
-	"static-chart": "Graphique en courbe statique",
-	"definition-linear": "Graphique en courbe contenant {circleLength} points répartis sur un axe linéraire.",
-	"definition-linear-with-categories": "Graphique en courbe contenant {categoryLength} courbes et {circleLength} points répartis sur un axe linéraire.",
-	"definition-ordinal": "Graphique en courbe contenant {circleLength} points.",
-	"x-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des nombres allant de {start, number} à {end, number}.",
-	"y-axis-numbers-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des nombres allant de {start, number} à {end, number}.",
-	"x-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
-	"y-axis-dates-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des dates allant de {start, date, ::yyyyMMdd} à {end, date, ::yyyyMMdd}.",
-	"x-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe X} =1 {1 axe X} other {# axes X}} affichant des categories.",
-	"y-axis-categories-definition": "Le graphique a {numAxis, plural, =0 {0 axe Y} =1 {1 axe Y} other {# axes Y}} affichant des categories.",
-	"series-legend": "{category}, courbe {categoryIndex} sur {categoryLength} contenant {circleLength} points"
-};
-
-var intlMessages = {
-  'en-US': enUS,
-  'fr-FR': frFR
-};
-
-const mdiChevronDown='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z';const mdiChevronRight='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z';const mdiMouse='M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z';
-
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "disableAnimations", "getDotAnchorProps", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "variant"],
-  _excluded2 = ["extraLegendItems"];
-const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      isBrushable,
-      className,
-      data: propsData,
-      dotRole,
-      disableAnimations,
-      getDotAnchorProps,
-      hideControlKeyPanel,
-      id,
-      isDotSelected,
-      labelDecorator,
-      legendDecorator,
-      legendVariant,
-      legendProps,
-      margins: propsMargins,
-      onBrush,
-      onBrushEnd,
-      onDotClick,
-      size,
-      sortingMethod,
-      colorTheme,
-      tooltipDecorator,
-      tooltipVariant,
-      xAxisVariant,
-      xAxisPlacement,
-      xAxisTickFormat,
-      xAxisTickPadding,
-      xAxisTickRotation,
-      xAxisTickSize,
-      xAxisTickValues,
-      yAxisVariant,
-      yAxisPlacement,
-      yAxisTickFormat,
-      yAxisTickPadding,
-      yAxisTickRotation,
-      yAxisTickSize,
-      yAxisTickValues,
-      variant
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$1);
-  const cache = useRef();
-  const theme = useTheme();
-  const format = useMessageFormatter(intlMessages);
-  const data = propsData.filter(datum => datum.value && typeof datum.key[0] === 'number' && !Number.isNaN(datum.key[0]) && typeof datum.key[1] === 'number' && !Number.isNaN(datum.key[1]));
-  useEffect(() => {
-    cache.current = data;
-  });
-  const chartDimensions = sizeToDimension(size);
-  const width = chartDimensions.width;
-  const height = chartDimensions.height;
-  const margins = _objectSpread2({
-    top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
-    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
-    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
-    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8
-  }, propsMargins);
-  const chartHeight = height - margins.top - margins.bottom;
-  const chartWidth = width - margins.left - margins.right;
-  const minSize = min([chartWidth, chartHeight]);
-  const extendedScaleX = (() => {
-    const domain = extent(data, d => d.key[0]);
-    const gap = domain[1] - domain[0];
-    domain[0] -= gap * 0.1;
-    domain[1] += gap * 0.1;
-    return scaleLinear().domain(domain).range([0, chartWidth]).nice();
-  })();
-  const extendedScaleY = (() => {
-    const domain = extent(data, d => d.key[1]);
-    const gap = domain[1] - domain[0];
-    domain[0] -= gap * 0.1;
-    domain[1] += gap * 0.1;
-    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
-  })();
-  const hasCategory = data[0] && data[0].key.length >= 3 && data[0].key[2] !== null && data[0].key[2] !== undefined;
-  const countsByCategory = hasCategory ? countBy(data, sortingMethod) : undefined;
-  const colorScale = useColor({
-    data: countsByCategory || data,
-    colorTheme: colorTheme,
-    category: 'key',
-    theme
-  });
-  const svgRef = useRef();
-  const brushRef = useRef();
-  const svgBrushRef = useRef();
-  const {
-    scaleX,
-    scaleY,
-    transform
-  } = useZoom({
-    svgRef,
-    scaleX: extendedScaleX,
-    scaleY: extendedScaleY,
-    size,
-    onZoom: () => {
-      if (brushRef.current && svgBrushRef.current) {
-        brushRef.current.clear(select(svgBrushRef.current));
-        onBrushEnd === null || onBrushEnd === void 0 ? void 0 : onBrushEnd(null);
-      }
-    }
-  });
-  useBrush({
-    brushRef,
-    svgRef: svgBrushRef,
-    extent: [[0, 0], [chartWidth, chartHeight]],
-    scaleX,
-    scaleY,
-    isBrushable,
-    isGridded: variant === ScatterPlotVariant.gridded,
-    onBrush,
-    onBrushEnd
-  });
-  const circles = variant === ScatterPlotVariant.gridded ? group(data, scaleX, scaleY).sort((a, b) => {
-    if (a.y !== b.y) {
-      return b.y - a.y;
-    }
-    if (a.x !== b.x) {
-      return a.x - b.x;
-    }
-    return descending(a.points.length, b.points.length);
-  }) : data.map(d => {
-    var _d$key$;
-    return {
-      category: (_d$key$ = d.key[2]) !== null && _d$key$ !== void 0 ? _d$key$ : 'default',
-      x: d.key[0],
-      y: d.key[1],
-      data: {
-        key: d.key,
-        value: 1
-      },
-      points: [d]
-    };
-  });
-  const globalSize = variant === ScatterPlotVariant.gridded ? scaleSqrt().domain([1, Math.max(max(circles, d => d.points.length), 1)]).range([3, minSize / BASE_NUMBER_OF_TICKS / 2]) : undefined;
-  const legendWidth = useRef();
-  if (countsByCategory && !legendWidth.current) {
-    legendWidth.current = `${Math.max(...countsByCategory.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
-  }
-  const [isKeyPanelOpen, setIsKeyPanelOpen] = useState(false);
-  const categories = [];
-  // const pivotedTable = circles.reduce((acc, item) => {
-  //   const { x, category, y } = item;
-  //   if (!categories.includes(category)) {
-  //     categories.push(category);
-  //   }
-  //   const formattedKey = xAxisTickFormat ? xAxisTickFormat(x as any) : x.toString();
-
-  //   let entry = acc.find((e) => e.key === formattedKey);
-  //   if (!entry) {
-  //     entry = { key: formattedKey };
-  //     acc.push(entry);
-  //   }
-
-  //   entry[category] = y;
-
-  //   return acc;
-  // }, [] as Array<Record<string, string | number | null | undefined> & { key: string }>);
-
-  const _ref = legendProps || {},
-    {
-      extraLegendItems
-    } = _ref,
-    forwardedLegendProps = _objectWithoutProperties(_ref, _excluded2);
-  return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({
-    mode: typeof onDotClick === 'function' || typeof getDotAnchorProps === 'function' ? 'interactive' : 'static',
-    definition: hasCategory ? format('definition-with-categories', {
-      categoryLength: categories.length,
-      circleLength: circles.length
-    }) : format('definition', {
-      circleLength: circles.length
-    }),
-    xAxisDefinition: format('x-axis-definition', {
-      numAxis: xAxisPlacement === 'both' ? 2 : 1,
-      start: scaleX.domain()[0],
-      end: scaleX.domain()[1]
-    }),
-    yAxisDefinition: format('y-axis-definition', {
-      numAxis: yAxisPlacement === 'both' ? 2 : 1,
-      start: scaleY.domain()[0],
-      end: scaleY.domain()[1]
-    })
-  }, forwardedProps, {
-    id: id,
-    className: className,
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "column",
-    alignItems: "center",
-    gap: "8"
-  }, !hideControlKeyPanel ? /*#__PURE__*/React__default.createElement(Flexbox, {
-    width: width,
-    position: "absolute"
-  }, /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "column",
-    alignItems: "flex-end",
-    position: "absolute",
-    top: `${margins.top + 16}px`,
-    right: `${margins.right + 16}px`
-  }, /*#__PURE__*/React__default.createElement(Popover, {
-    placement: "bottom-end",
-    isOpen: isKeyPanelOpen,
-    onOpen: setIsKeyPanelOpen
-  }, /*#__PURE__*/React__default.createElement(Popover.Trigger, null, /*#__PURE__*/React__default.createElement(Button, {
-    variant: "secondary",
-    leftIcon: mdiMouse,
-    rightIcon: isKeyPanelOpen ? mdiChevronDown : mdiChevronRight,
-    color: "grey",
-    style: {
-      border: '1px solid var(--redsift-color-neutral-mid-grey)',
-      gap: '4px'
-    }
-  })), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement(Flexbox, {
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React__default.createElement(Text, {
-    margin: "8px 16px 0",
-    fontSize: "13px"
-  }, "Zoom - Mouse wheel"), /*#__PURE__*/React__default.createElement(Text, {
-    margin: "0 16px",
-    fontSize: "13px"
-  }, "Pan - Left click and drag"), /*#__PURE__*/React__default.createElement(Text, {
-    margin: "0 16px 8px",
-    fontSize: "13px"
-  }, "Select - Hold shift, left click and drag")))))) : null, /*#__PURE__*/React__default.createElement("svg", {
-    ref: svgRef,
-    width: width,
-    height: height
-  }, /*#__PURE__*/React__default.createElement("g", {
-    ref: svgBrushRef,
-    transform: `translate(${margins.left},${margins.top})`
-  }), /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement("g", null, circles.map((circle, index) => {
-    var _countsByCategory$fin;
-    const scaleXDomain = scaleX.domain();
-    const scaleYDomain = scaleY.domain();
-    if (circle.x < scaleXDomain[0] || circle.x > scaleXDomain[1] || circle.y < scaleYDomain[0] || circle.y > scaleYDomain[1]) {
-      return null;
-    }
-    const to = _objectSpread2(_objectSpread2({}, circle), {}, {
-      data: _objectSpread2(_objectSpread2({}, circle.data), {}, {
-        percent: circle.category ? circle.data.value / (countsByCategory === null || countsByCategory === void 0 ? void 0 : (_countsByCategory$fin = countsByCategory.find(_ref2 => {
-          let {
-            key
-          } = _ref2;
-          return key === circle.category;
-        })) === null || _countsByCategory$fin === void 0 ? void 0 : _countsByCategory$fin.value) : undefined
-      }),
-      r: variant === ScatterPlotVariant.gridded ? globalSize(circle.points.length) / (transform.k < 1 ? transform.k : 1) : 4
-    });
-    return /*#__PURE__*/React__default.createElement(Dot, {
-      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(circle.category),
-      data: to,
-      dataset: circles,
-      isSelected: Boolean(isDotSelected === null || isDotSelected === void 0 ? void 0 : isDotSelected(to)),
-      key: `circle _${index}`,
-      labelDecorator: labelDecorator,
-      onClick: onDotClick,
-      role: dotRole,
-      scaleX: scaleX,
-      scaleY: scaleY,
-      tooltipDecorator: tooltipDecorator,
-      tooltipVariant: tooltipVariant
-    });
-  }))), /*#__PURE__*/React__default.createElement("g", {
-    transform: `translate(${margins.left},${margins.top})`
-  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
-    disableAnimations: disableAnimations,
-    position: "bottom",
-    length: chartWidth,
-    scale: scaleX,
-    x: 0,
-    y: chartHeight,
-    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
-    tickPadding: xAxisTickPadding,
-    tickRotation: xAxisTickRotation,
-    tickSize: xAxisTickSize,
-    tickFormat: xAxisTickFormat,
-    variant: xAxisVariant
-  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
-    disableAnimations: disableAnimations,
-    position: "top",
-    length: chartWidth,
-    scale: scaleX,
-    x: 0,
-    y: 0,
-    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
-    tickPadding: xAxisTickPadding,
-    tickRotation: xAxisTickRotation,
-    tickSize: xAxisTickSize,
-    tickFormat: xAxisTickFormat,
-    variant: xAxisVariant
-  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
-    disableAnimations: disableAnimations,
-    position: "left",
-    length: chartHeight,
-    scale: scaleY,
-    x: 0,
-    y: chartHeight,
-    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
-    tickPadding: yAxisTickPadding,
-    tickRotation: yAxisTickRotation,
-    tickSize: yAxisTickSize,
-    tickFormat: yAxisTickFormat,
-    variant: yAxisVariant
-  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
-    disableAnimations: disableAnimations,
-    position: "right",
-    length: chartHeight,
-    scale: scaleY,
-    x: chartWidth,
-    y: chartHeight,
-    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
-    tickPadding: yAxisTickPadding,
-    tickRotation: yAxisTickRotation,
-    tickSize: yAxisTickSize,
-    tickFormat: yAxisTickFormat,
-    variant: yAxisVariant
-  }) : null))), hasCategory && legendVariant !== ScatterPlotLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: (extraLegendItems ? mergeLegends(extraLegendItems, countsByCategory).sort(getSortingMethod(sortingMethod)) : countsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
-      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
-    })),
-    variant: legendVariant === ScatterPlotLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === ScatterPlotLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === ScatterPlotLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
-    width: legendWidth.current,
-    legendDecorator: legendDecorator ? (datum, props) => legendDecorator(datum, props) : undefined
-  }, forwardedLegendProps)) : null);
-});
-
-const _excluded = ["className", "colorTheme", "data", "dotRole", "emptyComponent", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "tooltipDecorator", "tooltipVariant", "variant", "xAxisPlacement", "xAxisVariant", "yAxisPlacement", "yAxisVariant"];
-const COMPONENT_NAME = 'ScatterPlot';
-const CLASSNAME = 'redsift-scatterplot';
-const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-      className,
-      colorTheme = ColorTheme.default,
-      data: propsData,
-      dotRole,
-      emptyComponent,
-      hideControlKeyPanel = false,
-      id: propsId,
-      isDotSelected,
-      labelDecorator,
-      legendDecorator,
-      legendVariant: propsLegendVariant,
-      localeText = {
-        emptyChartText: 'No Data'
-      },
-      onBrush,
-      onBrushEnd,
-      onDotClick,
-      size = ChartSize.medium,
-      sortingMethod = 'desc-value',
-      tooltipDecorator,
-      tooltipVariant = TooltipVariant.none,
-      variant = ScatterPlotVariant.default,
-      xAxisPlacement = 'bottom',
-      xAxisVariant = AxisVariant.default,
-      yAxisPlacement = 'left',
-      yAxisVariant = AxisVariant.default
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
-  const [_id] = useId();
-  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
-  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : ScatterPlotLegendVariant.externalLabel;
-  if (propsData === undefined || propsData === null) {
-    return /*#__PURE__*/React__default.createElement(LoadingScatterPlot, _extends({
-      id: id
-    }, forwardedProps, {
-      ref: ref
-    }));
-  }
-  if (propsData.length === 0) {
-    return /*#__PURE__*/React__default.createElement(EmptyScatterPlot, _extends({
-      data: propsData,
-      emptyComponent: emptyComponent,
-      hideControlKeyPanel: hideControlKeyPanel,
-      localeText: localeText,
-      size: size,
-      sortingMethod: sortingMethod,
-      xAxisPlacement: xAxisPlacement,
-      xAxisVariant: xAxisVariant,
-      yAxisPlacement: yAxisPlacement,
-      yAxisVariant: yAxisVariant
-    }, forwardedProps, {
-      ref: ref
-    }));
-  }
-  return /*#__PURE__*/React__default.createElement(RenderedScatterPlot, _extends({
-    className: classNames(ScatterPlot.className, className),
-    colorTheme: colorTheme,
-    data: propsData,
-    dotRole: dotRole,
-    hideControlKeyPanel: hideControlKeyPanel,
-    id: id,
-    isDotSelected: isDotSelected,
-    labelDecorator: labelDecorator,
-    legendDecorator: legendDecorator,
-    legendVariant: legendVariant,
-    localeText: localeText,
-    onBrush: onBrush,
-    onBrushEnd: onBrushEnd,
-    onDotClick: onDotClick,
-    size: size,
-    sortingMethod: sortingMethod,
-    tooltipDecorator: tooltipDecorator,
-    tooltipVariant: tooltipVariant,
-    variant: variant,
-    xAxisPlacement: xAxisPlacement,
-    xAxisVariant: xAxisVariant,
-    yAxisPlacement: yAxisPlacement,
-    yAxisVariant: yAxisVariant
-  }, forwardedProps, {
-    ref: ref
-  }));
-});
-ScatterPlot.className = CLASSNAME;
-ScatterPlot.displayName = COMPONENT_NAME;
-
-export { ScatterPlot as S, useZoom as a, ScatterPlotVariant as b, ScatterPlotLegendVariant as c, StyledScatterPlot as d, StyledScatterPlotEmptyText as e, useBrush as u };
-//# sourceMappingURL=ScatterPlot2.js.map