@redsift/charts 8.0.1 → 8.0.2

package/{dist/index.d.ts → index.d.ts}

@@ -402,6 +402,8 @@ interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, Styl
     chartProps?: ComponentProps<'div'>;
     /** Ref to the chart. */
     chartRef?: RefObject<HTMLDivElement>;
+    /** Description. */
+    description?: string;
     /** Id. */
     id?: string;
     /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
@@ -659,6 +661,8 @@ interface ScatterPlotProps extends ChartContainerProps {
     dotRole?: DotProps['role'];
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
+    /** Whether the Control Keys panel is displayed or not. */
+    hideControlKeyPanel?: boolean;
     /** Whether the scatter plot dots are selectable using brush or not. */
     isBrushable?: boolean;
     /** Method to determine whether a dot is selected or not. */
@@ -689,8 +693,12 @@ interface ScatterPlotProps extends ChartContainerProps {
     variant?: ScatterPlotVariant;
     /** X axis variant. */
     xAxisVariant?: AxisVariant;
+    /** X axis placement. */
+    xAxisPlacement?: 'bottom' | 'top' | 'both';
     /** Y axis variant. */
     yAxisVariant?: AxisVariant;
+    /** Y axis placement. */
+    yAxisPlacement?: 'right' | 'left' | 'both';
 }
 type StyledScatterPlotProps = ScatterPlotProps & {};
 

package/{dist/index.js → index.js}

@@ -1,11 +1,11 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate as interpolate$1, 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 } from '@redsift/design-system';
+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 * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext, useId } from 'react';
 import classNames from 'classnames';
 import { unstable_batchedUpdates } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { Tooltip } from '@redsift/popovers';
+import { Tooltip, Popover } from '@redsift/popovers';
 import { useLocalizedStringFormatter } from 'react-aria';
 
 const getRoundedIntermediaryPoint = (selection, scaleX, scaleY) => {
@@ -4794,9 +4794,10 @@ const StyledChartContainerCaption = styled.p`
   font-size: var(--redsift-typography-caption-font-size);
   font-weight: var(--redsift-typography-caption-font-weight);
   line-height: var(--redsift-typography-caption-line-height);
+  margin: 8px;
 `;
 
-const _excluded$f = ["aria-label", "aria-labelledby", "caption", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
+const _excluded$f = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset"];
 const COMPONENT_NAME$6 = 'ChartContainer';
 const CLASSNAME$6 = 'redsift-chart-container';
 const DEFAULT_PROPS$6 = {};
@@ -4804,7 +4805,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       'aria-label': propsAriaLabel,
       'aria-labelledby': propsAriaLabelledby,
-      caption,
+      description,
       chartProps,
       chartRef,
       children,
@@ -4835,14 +4836,16 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
     color: "question",
     variant: "unstyled",
     onClick: onReset
-  }, stringFormatter.format('reset')) : null) : null, children ? /*#__PURE__*/React__default.createElement("div", _extends({}, chartProps, {
+  }, stringFormatter.format('reset')) : null) : null, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column"
+  }, children ? /*#__PURE__*/React__default.createElement("div", _extends({}, chartProps, {
     ref: chartRef,
     className: `${ChartContainer.className}__content`,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby
-  }), children) : null, caption ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
-    className: `${ChartContainer.className}__caption`
-  }, caption) : null);
+  }), children) : null, description ? /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
+    className: `${ChartContainer.className}__description`
+  }, description) : null));
 });
 ChartContainer.className = CLASSNAME$6;
 ChartContainer.defaultProps = DEFAULT_PROPS$6;
@@ -6068,13 +6071,20 @@ const EmptyScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "yAxisVariant"];
+// Material Design Icons v7.2.96
+var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
+var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
+var 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", "caption", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
+      caption,
       className,
       data: propsData,
       dotRole,
+      hideControlKeyPanel,
       id,
       isDotSelected,
       labelDecorator,
@@ -6088,7 +6098,9 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant,
       variant,
       xAxisVariant,
-      yAxisVariant
+      xAxisPlacement,
+      yAxisVariant,
+      yAxisPlacement
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1);
   const cache = useRef();
@@ -6100,10 +6112,10 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const width = chartDimensions.width;
   const height = chartDimensions.height;
   const margins = {
-    top: 16,
-    left: 48,
-    right: 16,
-    bottom: 48
+    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
   };
   const chartHeight = height - margins.top - margins.bottom;
   const chartWidth = width - margins.left - margins.right;
@@ -6174,11 +6186,50 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   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);
   return /*#__PURE__*/React__default.createElement(StyledScatterPlot, _extends({}, forwardedProps, {
     id: id,
     className: className,
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("svg", {
+  }), /*#__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",
+    rightIcon: isKeyPanelOpen ? mdiChevronDown : mdiChevronRight,
+    color: "question",
+    style: {
+      border: '1px solid var(--redsift-color-neutral-midgrey)'
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMouse
+  }))), /*#__PURE__*/React__default.createElement(Popover.Content, {
+    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
@@ -6219,23 +6270,41 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     });
   }))), /*#__PURE__*/React__default.createElement("g", {
     transform: `translate(${margins.left},${margins.top})`
-  }, /*#__PURE__*/React__default.createElement(Axis, {
-    position: "left",
-    length: chartHeight,
-    scale: scaleY,
+  }, ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleX,
     x: 0,
-    y: 0,
+    y: chartHeight,
     tickValues: 8,
     variant: xAxisVariant
-  }), /*#__PURE__*/React__default.createElement(Axis, {
-    position: "bottom",
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "top",
     length: chartWidth,
     scale: scaleX,
     x: 0,
-    y: chartHeight,
+    y: 0,
+    tickValues: 8,
+    variant: xAxisVariant
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "left",
+    length: chartHeight,
+    scale: scaleY,
+    x: 0,
+    y: 0,
+    tickValues: 8,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "right",
+    length: chartHeight,
+    scale: scaleY,
+    x: chartWidth,
+    y: 0,
     tickValues: 8,
     variant: yAxisVariant
-  }))), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
+  }) : null)), /*#__PURE__*/React__default.createElement(StyledChartContainerCaption, {
+    width: chartWidth - 48
+  }, caption)), hasCategory && labelVariant !== ScatterPlotLabelVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
     data: countsByCategory.map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
@@ -6248,6 +6317,7 @@ const _excluded = ["className", "data", "dotRole", "emptyComponent", "id", "isDo
 const COMPONENT_NAME = 'ScatterPlot';
 const CLASSNAME = 'redsift-scatterplot';
 const DEFAULT_PROPS = {
+  hideControlKeyPanel: false,
   labelVariant: ScatterPlotLabelVariant.externalLabel,
   localeText: {
     emptyChartText: 'No Data'
@@ -6257,7 +6327,9 @@ const DEFAULT_PROPS = {
   tooltipVariant: TooltipVariant.none,
   variant: ScatterPlotVariant.default,
   xAxisVariant: AxisVariant.default,
-  yAxisVariant: AxisVariant.default
+  xAxisPlacement: 'bottom',
+  yAxisVariant: AxisVariant.default,
+  yAxisPlacement: 'left'
 };
 const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {