@redsift/charts 11.5.0 → 11.6.0-alpha.0

package/_internal/ScatterPlot2.js

@@ -0,0 +1,744 @@
+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