@redsift/charts 8.1.0 → 9.0.0-alpha.1

package/index.d.ts

@@ -583,6 +583,8 @@ interface PieChartProps extends ChartContainerProps {
     labelDecorator?: (datum: ArcDatum) => string;
     /** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. */
     labelVariant?: PieChartLabelVariant;
+    /** Props to forward to the Legend block. Can be used to make the legend selectable. */
+    legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'>;
     /** Labels and texts. */
     localeText?: LocaleText$1;
     /** Method to be called on a click on a slice. */

package/index.js

@@ -1,7 +1,7 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, arc, pie, min, extent, descending, scaleSqrt, max } from 'd3';
-import { RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDark, RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorGreyDefault, RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker, RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer, RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight, RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter, RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer, Text, Number as Number$1, baseStyling, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button, Icon } from '@redsift/design-system';
+import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, useId, Text, Number as Number$1, baseStyling, focusRing, Flexbox, warnIfNoAccessibleLabelFound, Heading, Button } from '@redsift/design-system';
 import * as React from 'react';
-import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext, useId } from 'react';
+import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext } from 'react';
 import classNames from 'classnames';
 import { unstable_batchedUpdates } from 'react-dom';
 import styled, { css } from 'styled-components';
@@ -51,24 +51,24 @@ const useBrush = _ref => {
   });
 };
 
-const monochrome = RedsiftDataVizColorBlueDefault;
-const empty = RedsiftDataVizColorGreyDark;
+const monochrome = RedsiftColorPresentationBlueDefault;
+const empty = RedsiftColorPresentationGreyDark;
 const scheme = {
-  default: [RedsiftDataVizColorGreenDefault, RedsiftDataVizColorPinkDefault, RedsiftDataVizColorAquaDefault, RedsiftDataVizColorBrownDefault, RedsiftDataVizColorRedDefault, RedsiftDataVizColorYellowDefault, RedsiftDataVizColorPurpleDefault, RedsiftDataVizColorOrangeDefault, RedsiftDataVizColorBlueDefault, RedsiftDataVizColorGreyDefault],
-  dark: [RedsiftDataVizColorGreenDark, RedsiftDataVizColorPinkDark, RedsiftDataVizColorAquaDark, RedsiftDataVizColorBrownDark, RedsiftDataVizColorRedDark, RedsiftDataVizColorYellowDark, RedsiftDataVizColorPurpleDark, RedsiftDataVizColorOrangeDark, RedsiftDataVizColorBlueDark, RedsiftDataVizColorGreyDark],
-  darker: [RedsiftDataVizColorGreenDarker, RedsiftDataVizColorPinkDarker, RedsiftDataVizColorAquaDarker, RedsiftDataVizColorBrownDarker, RedsiftDataVizColorRedDarker, RedsiftDataVizColorYellowDarker, RedsiftDataVizColorPurpleDarker, RedsiftDataVizColorOrangeDarker, RedsiftDataVizColorBlueDarker, RedsiftDataVizColorGreyDarker],
-  darkerer: [RedsiftDataVizColorGreenDarkerer, RedsiftDataVizColorPinkDarkerer, RedsiftDataVizColorAquaDarkerer, RedsiftDataVizColorBrownDarkerer, RedsiftDataVizColorRedDarkerer, RedsiftDataVizColorYellowDarkerer, RedsiftDataVizColorPurpleDarkerer, RedsiftDataVizColorOrangeDarkerer, RedsiftDataVizColorBlueDarkerer, RedsiftDataVizColorGreyDarkerer],
-  light: [RedsiftDataVizColorGreenLight, RedsiftDataVizColorPinkLight, RedsiftDataVizColorAquaLight, RedsiftDataVizColorBrownLight, RedsiftDataVizColorRedLight, RedsiftDataVizColorYellowLight, RedsiftDataVizColorPurpleLight, RedsiftDataVizColorOrangeLight, RedsiftDataVizColorBlueLight, RedsiftDataVizColorGreyLight],
-  lighter: [RedsiftDataVizColorGreenLighter, RedsiftDataVizColorPinkLighter, RedsiftDataVizColorAquaLighter, RedsiftDataVizColorBrownLighter, RedsiftDataVizColorRedLighter, RedsiftDataVizColorYellowLighter, RedsiftDataVizColorPurpleLighter, RedsiftDataVizColorOrangeLighter, RedsiftDataVizColorBlueLighter, RedsiftDataVizColorGreyLighter],
-  lighterer: [RedsiftDataVizColorGreenLighterer, RedsiftDataVizColorPinkLighterer, RedsiftDataVizColorAquaLighterer, RedsiftDataVizColorBrownLighterer, RedsiftDataVizColorRedLighterer, RedsiftDataVizColorYellowLighterer, RedsiftDataVizColorPurpleLighterer, RedsiftDataVizColorOrangeLighterer, RedsiftDataVizColorBlueLighterer, RedsiftDataVizColorGreyLighterer],
+  default: [RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDefault],
+  dark: [RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreyDark],
+  darker: [RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker],
+  darkerer: [RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer],
+  light: [RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight],
+  lighter: [RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter],
+  lighterer: [RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer],
   monochrome: [monochrome],
   empty: [empty]
 };
 const successDangerScheme = {
-  success: RedsiftDataVizColorGreenDefault,
-  warning: RedsiftDataVizColorOrangeDefault,
-  danger: RedsiftDataVizColorRedDefault,
-  neutral: RedsiftDataVizColorGreyDefault
+  success: RedsiftColorPresentationGreenDefault,
+  warning: RedsiftColorPresentationOrangeDefault,
+  danger: RedsiftColorPresentationRedDefault,
+  neutral: RedsiftColorPresentationGreyDefault
 };
 const getColorScale = (theme, domain, isEmpty) => {
   let d3colors = scaleOrdinal(scheme.default);
@@ -330,7 +330,8 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$k);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const text = labelDecorator ? labelDecorator(data) : data.data.key;
   const hasText = text && tooltipVariant !== TooltipVariant.none;
   const tooltipValue = tooltipVariant === TooltipVariant.value ? data.data.value : tooltipVariant === TooltipVariant.percent && data.data.percent ? data.data.percent : undefined;
@@ -518,7 +519,8 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$i);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
     to: async next => {
       await next({
@@ -609,7 +611,7 @@ const StyledAxis = styled(it.g)`
   }
 
   text {
-    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-family: var(--redsift-typography-font-family-poppins);
     font-size: 10px;
     user-select: none;
   }
@@ -1055,7 +1057,7 @@ const StyledChartContainer = styled.div`
     display: flex;
     align-items: center;
     gap: 16px;
-    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-family: var(--redsift-typography-font-family-poppins);
     font-size: 11px;
     justify-content: center;
     margin: 8px 0;
@@ -1095,7 +1097,8 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       onReset
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   warnIfNoAccessibleLabelFound(props, [title]);
   const stringFormatter = useLocalizedStringFormatter(intlMessages);
   const ariaLabel = propsAriaLabel ? propsAriaLabel : propsAriaLabelledby || title ? undefined : undefined;
@@ -1157,7 +1160,7 @@ const StyledBarChartEmptyText = styled.div`
   }
 
   > span {
-    font-family: var(--redsift-typography-font-family-raleway);
+    font-family: var(--redsift-typography-font-family-poppins);
     color: var(--redsift-color-neutral-black);
     font-size: ${_ref2 => {
   let {
@@ -1301,7 +1304,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const chartHeight = height - margins.top - margins.bottom;
   const chartWidth = width - margins.left - margins.right;
-  const numberOfRows = data.length;
+  const numberOfRows = data.filter(datum => datum.value).length;
   const gap = 5;
   const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
     let {
@@ -1390,7 +1393,8 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$b);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
       id: id
@@ -1589,7 +1593,8 @@ const LegendItem = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$9);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const text = labelDecorator ? labelDecorator(data) : data.data.key;
   const isEmpty = data.data.value === 0;
   const isSelectable = role === 'option';
@@ -1748,7 +1753,7 @@ const StyledPieChartCenterText = styled.div`
   }
 
   > b {
-    font-family: var(--redsift-typography-font-family-source-code-pro);
+    font-family: var(--redsift-typography-font-family-poppins);
     color: var(--redsift-color-neutral-black);
     font-weight: var(--redsift-typography-font-weight-medium);
     font-size: ${_ref2 => {
@@ -1767,7 +1772,7 @@ const StyledPieChartCenterText = styled.div`
     &:nth-child(2) {
       font-weight: normal;
       margin-top: 8px;
-      font-family: var(--redsift-typography-font-family-raleway);
+      font-family: var(--redsift-typography-font-family-poppins);
       font-size: ${_ref4 => {
   let {
     $smallTextSize
@@ -1814,7 +1819,7 @@ const StyledPieChartCenterText = styled.div`
   }
   > b + span {
     font-size: var(--redsift-typography-body-font-size);
-    font-family: var(--redsift-typography-font-family-raleway);
+    font-family: var(--redsift-typography-font-family-poppins);
     line-height: var(--redsift-typography-badge-line-height);
     color: rgba(0, 0, 0, 0.6);
     text-align: center;
@@ -1842,7 +1847,7 @@ const StyledPieChartEmptyText = styled.div`
   }
 
   > span {
-    font-family: var(--redsift-typography-font-family-raleway);
+    font-family: var(--redsift-typography-font-family-poppins);
     color: ${_ref11 => {
   let {
     $isDonut
@@ -1969,7 +1974,7 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$5 = ["caping", "className", "data", "id", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
@@ -1979,6 +1984,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       isSliceSelected,
       labelDecorator,
       labelVariant,
+      legendProps,
       middleText: propsMiddleText,
       onSliceClick,
       others,
@@ -2019,6 +2025,10 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const pieData = createPie(data);
   const previousPieData = cache.current ? createPie(cache.current) : undefined;
   const total = sum(data, d => d.value);
+  const legendWidth = useRef();
+  if (data && !legendWidth.current) {
+    legendWidth.current = `${Math.max(...data.map(d => d.key.length + String(d.value).length)) * 8 + 32}px`;
+  }
   const text = typeof propsText === 'function' ? propsText(pieData.map(datum => {
     const percent = datum.data.value / total;
     return _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -2094,12 +2104,13 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     sliceProps: sliceProps,
     tooltipVariant: tooltipVariant,
     transform: `translate(${width / 2} ${height / 2})`
-  }))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, {
+  }))), labelVariant !== PieChartLabelVariant.none && labelVariant !== PieChartLabelVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: data.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
-    variant: labelVariant === PieChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === PieChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label
-  }) : null);
+    variant: labelVariant === PieChartLabelVariant.externalLabelValue ? LabelVariant.value : labelVariant === PieChartLabelVariant.externalLabelPercent ? LabelVariant.percent : LabelVariant.label,
+    width: legendWidth.current
+  }, legendProps)) : null);
 });
 
 const _excluded$4 = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isSliceSelected", "labelDecorator", "labelVariant", "localeText", "middleText", "onSliceClick", "others", "size", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
@@ -2141,7 +2152,8 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$4);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingPieChart, _extends({
       id: id
@@ -2235,7 +2247,7 @@ const StyledScatterPlotEmptyText = styled.div`
   }
 
   > span {
-    font-family: var(--redsift-typography-font-family-raleway);
+    font-family: var(--redsift-typography-font-family-poppins);
     color: var(--redsift-color-neutral-black);
     font-size: ${_ref2 => {
   let {
@@ -2514,14 +2526,14 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     onOpen: setIsKeyPanelOpen
   }, /*#__PURE__*/React__default.createElement(Popover.Trigger, null, /*#__PURE__*/React__default.createElement(Button, {
     variant: "secondary",
+    leftIcon: mdiMouse,
     rightIcon: isKeyPanelOpen ? mdiChevronDown : mdiChevronRight,
     color: "question",
     style: {
-      border: '1px solid var(--redsift-color-neutral-midgrey)'
+      border: '1px solid var(--redsift-color-neutral-midgrey)',
+      gap: '4px'
     }
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    icon: mdiMouse
-  }))), /*#__PURE__*/React__default.createElement(Popover.Content, {
+  })), /*#__PURE__*/React__default.createElement(Popover.Content, {
     flexDirection: "column",
     alignItems: "flex-start"
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -2654,7 +2666,8 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       variant
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded);
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   if (propsData === undefined || propsData === null) {
     return /*#__PURE__*/React__default.createElement(LoadingScatterPlot, _extends({
       id: id