@redsift/charts 11.5.0-muiv5 → 11.6.0-muiv5-alpha.0

package/components/ChartContainer/styles.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+import { baseStyling, baseContainer, focusRing, Theme, Flexbox } from '@redsift/design-system';
+
+/**
+ * Component style.
+ */
+const StyledChartContainer = styled.div`
+  ${baseStyling}
+
+  .redsift-chart-container__content {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 11px;
+    justify-content: center;
+    position: relative;
+
+    ${baseContainer}
+
+    ${focusRing}
+  }
+
+  svg {
+    display: block;
+    user-select: none;
+  }
+
+  text {
+    ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+      fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    `;
+}}
+  }
+
+  table {
+    border-collapse: collapse;
+    border: 1px solid #ebebeb;
+    margin: 10px auto;
+    text-align: center;
+    width: 100%;
+    max-width: 500px;
+
+    td, th, caption {
+        padding: 0.5em;
+    }
+
+    caption {
+      padding: 1em 0;
+      font-size: 1.2em;
+      color: #555;
+    }
+
+    thead tr, tr:nth-child(even) {
+      background: #f8f8f8;
+    }
+
+    th {
+      font-weight: 600; 
+    }
+`;
+const StyledChartContainerTitle = styled(Flexbox)``;
+const StyledChartContainerCaption = styled.p`
+  font-family: var(--redsift-typography-caption-font-family);
+  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 0;
+`;
+
+export { StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle };
+//# sourceMappingURL=styles.js.map

package/components/ChartContainer/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/ChartContainer/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { Flexbox, Theme, baseContainer, baseStyling, focusRing } from '@redsift/design-system';\nimport { StyledChartContainerProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledChartContainer = styled.div<StyledChartContainerProps>`\n  ${baseStyling}\n\n  .redsift-chart-container__content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    font-family: var(--redsift-typography-font-family-poppins);\n    font-size: 11px;\n    justify-content: center;\n    position: relative;\n\n    ${baseContainer}\n\n    ${focusRing}\n  }\n\n  svg {\n    display: block;\n    user-select: none;\n  }\n\n  text {\n    ${({ $theme }) => css`\n      fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    `}\n  }\n\n  table {\n    border-collapse: collapse;\n    border: 1px solid #ebebeb;\n    margin: 10px auto;\n    text-align: center;\n    width: 100%;\n    max-width: 500px;\n\n    td, th, caption {\n        padding: 0.5em;\n    }\n\n    caption {\n      padding: 1em 0;\n      font-size: 1.2em;\n      color: #555;\n    }\n\n    thead tr, tr:nth-child(even) {\n      background: #f8f8f8;\n    }\n\n    th {\n      font-weight: 600; \n    }\n`;\n\nexport const StyledChartContainerTitle = styled(Flexbox)<StyledChartContainerProps>``;\n\nexport const StyledChartContainerCaption = styled.p<Omit<StyledChartContainerProps, 'onReset'>>`\n  font-family: var(--redsift-typography-caption-font-family);\n  font-size: var(--redsift-typography-caption-font-size);\n  font-weight: var(--redsift-typography-caption-font-weight);\n  line-height: var(--redsift-typography-caption-line-height);\n  margin: 8px 0;\n`;\n"],"names":["StyledChartContainer","styled","div","baseStyling","baseContainer","focusRing","_ref","$theme","css","Theme","dark","StyledChartContainerTitle","Flexbox","StyledChartContainerCaption","p"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,oBAAoB,GAAGC,MAAM,CAACC,GAA+B,CAAA;AAC1E,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,aAAc,CAAA;AACpB;AACA,IAAA,EAAMC,SAAU,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,wCAA0CD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC1F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;MAEYC,yBAAyB,GAAGV,MAAM,CAACW,OAAO,CAA6B,CAAC,EAAA;AAExEC,MAAAA,2BAA2B,GAAGZ,MAAM,CAACa,CAA8C,CAAA;AAChG;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/ChartContainer/types.d.ts

@@ -0,0 +1,48 @@
+import { ContainerProps, Theme } from '@redsift/design-system';
+import { ComponentProps, RefObject, ReactElement } from 'react';
+
+/**
+ * Component props.
+ */
+interface ChartContainerProps extends Omit<ComponentProps<'div'>, 'title'>, ContainerProps {
+    /** Native HTML props to pass to the chart. */
+    chartProps?: ComponentProps<'div'>;
+    /** Ref to the chart. */
+    chartRef?: RefObject<HTMLDivElement>;
+    /** Description. */
+    description?: string | ReactElement;
+    /** Whether the description should be placed below the title or below the chart. */
+    descriptionPosition?: 'belowTitle' | 'belowChart';
+    /** Disable animations. */
+    disableAnimations?: boolean;
+    /** Id. */
+    id?: string;
+    /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
+    onReset?: () => void;
+    /** Title. */
+    title?: string | ReactElement;
+    /** Theme. */
+    theme?: Theme;
+    /** Description that won't be visually displayed but will be used for assistive technology. If you want to display the description, use `description` instead. */
+    descriptionForAssistiveTechnology?: string;
+    /** Whether the chart is static or interactive. */
+    mode?: string;
+    /** Small text explaining which kind of chart is presenting and what's its basic composition. */
+    definition?: string;
+    /** Small text explaining the basic composition of the x-axis, if any. */
+    xAxisDefinition?: string;
+    /** Small text explaining the basic composition of the y-axis, if any. */
+    yAxisDefinition?: string;
+    /** Small text explaining how the chart is interactive, if any. */
+    interactionExplanation?: string;
+    /** Table representation of the chart. */
+    dataTableRepresentation?: {
+        header: ReactElement;
+        body: ReactElement;
+    };
+}
+type StyledChartContainerProps = Omit<ChartContainerProps, 'theme'> & {
+    $theme: Theme;
+};
+
+export { ChartContainerProps, StyledChartContainerProps };

package/components/DataPoint/DataPoint.d.ts

@@ -0,0 +1,6 @@
+import { Comp } from '@redsift/design-system';
+import { DataPointProps } from './types.js';
+
+declare const DataPoint: Comp<DataPointProps<any>, SVGGElement>;
+
+export { DataPoint };

package/components/DataPoint/DataPoint.js

@@ -0,0 +1,104 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useId, useTheme, Text, Number } from '@redsift/design-system';
+import { Tooltip } from '@redsift/popovers';
+import { StyledDataPoint } from './styles.js';
+import { TooltipVariant } from '../../types/legend.js';
+
+const _excluded = ["as", "href"],
+  _excluded2 = ["anchorProps", "children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme", "tooltipProps", "dataset", "groupedData"];
+const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      anchorProps: {
+        as,
+        href
+      } = {},
+      children,
+      className,
+      data,
+      id: propsId,
+      index,
+      isSelected: propsIsSelected,
+      labelDecorator,
+      onClick,
+      role,
+      tooltipDecorator,
+      tooltipVariant,
+      theme: propsTheme,
+      tooltipProps,
+      dataset,
+      groupedData
+    } = props,
+    anchorProps = _objectWithoutProperties(props.anchorProps, _excluded),
+    forwardedProps = _objectWithoutProperties(props, _excluded2);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const theme = useTheme(propsTheme);
+  const isTooltipCustom = tooltipVariant === TooltipVariant.custom && tooltipDecorator;
+  const text = labelDecorator ? labelDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color: props.color
+  }) : 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;
+  const hasValue = tooltipValue && [TooltipVariant.value, TooltipVariant.percent].includes(tooltipVariant);
+  const showTooltip = tooltipVariant !== TooltipVariant.none && (hasText || hasValue);
+  const isEmpty = data.data.value === 0;
+  const isSelectable = role === 'option';
+  const isSelected = isSelectable && propsIsSelected === true;
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const onKeyDown = event => {
+    if (onClick) {
+      event.stopPropagation();
+      if (event.code === 'Enter' || event.code === 'Space') {
+        event.preventDefault();
+        onClick(data, dataset);
+      }
+    }
+  };
+  const DataPointComponent = /*#__PURE__*/React__default.createElement(StyledDataPoint, _extends({
+    tabIndex: onClick ? 0 : undefined,
+    "aria-label": showTooltip && !isEmpty ? labelDecorator ? text : `${data.data.key}, ${data.data.value}` : undefined,
+    "aria-labelledby": !showTooltip && !isEmpty ? `${id}-title` : undefined,
+    "aria-selected": isSelected ? true : isDeselected ? false : undefined,
+    onClick: onClick ? () => onClick(data, dataset) : undefined,
+    onKeyDown: onClick ? e => onKeyDown(e) : undefined,
+    role: role ? role : onClick ? 'button' : href ? undefined : 'img'
+  }, forwardedProps, {
+    className: classNames(className, `_${index}`, {
+      selected: isSelected,
+      deselected: isDeselected
+    }),
+    ref: ref,
+    id: id,
+    $clickable: Boolean(onClick)
+  }), children, !showTooltip && !isEmpty ? /*#__PURE__*/React__default.createElement("title", {
+    id: `${id}-title`
+  }, `${text}: ${data.data.value}`) : null);
+  if (showTooltip) {
+    return /*#__PURE__*/React__default.createElement(Tooltip, _extends({
+      placement: "right",
+      theme: theme,
+      delay: 50
+    }, tooltipProps), /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement(as || 'a', _objectSpread2({
+      href
+    }, anchorProps), DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
+      index,
+      isSelected: propsIsSelected,
+      color: props.color
+    }, dataset, groupedData) : /*#__PURE__*/React__default.createElement(Text, {
+      variant: "caption"
+    }, text, hasText && hasValue ? ' - ' : null, hasValue ? /*#__PURE__*/React__default.createElement(Number, {
+      value: tooltipValue,
+      type: tooltipVariant === TooltipVariant.percent ? 'percent' : 'decimal',
+      variant: "caption",
+      maximumFractionDigits: 2
+    }) : null)));
+  }
+  return DataPointComponent;
+});
+
+export { DataPoint };
+//# sourceMappingURL=DataPoint.js.map

package/components/DataPoint/DataPoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataPoint.js","sources":["../../../src/components/DataPoint/DataPoint.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, Number, Text, useId, useTheme } from '@redsift/design-system';\nimport { Tooltip } from '@redsift/popovers';\n\nimport { DataPointProps } from './types';\nimport { StyledDataPoint } from './styles';\nimport { TooltipVariant } from '../../types';\n\nexport const DataPoint: Comp<DataPointProps<any>, SVGGElement> = forwardRef((props, ref) => {\n  const {\n    anchorProps: { as, href, ...anchorProps } = {},\n    children,\n    className,\n    data,\n    id: propsId,\n    index,\n    isSelected: propsIsSelected,\n    labelDecorator,\n    onClick,\n    role,\n    tooltipDecorator,\n    tooltipVariant,\n    theme: propsTheme,\n    tooltipProps,\n    dataset,\n    groupedData,\n    ...forwardedProps\n  } = props;\n\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const theme = useTheme(propsTheme);\n\n  const isTooltipCustom = tooltipVariant === TooltipVariant.custom && tooltipDecorator;\n  const text = labelDecorator\n    ? labelDecorator(data, { index, isSelected: propsIsSelected, color: props.color })\n    : data.data.key;\n  const hasText = text && tooltipVariant !== TooltipVariant.none;\n  const tooltipValue =\n    tooltipVariant === TooltipVariant.value\n      ? data.data.value\n      : tooltipVariant === TooltipVariant.percent && data.data.percent\n      ? data.data.percent\n      : undefined;\n  const hasValue = tooltipValue && [TooltipVariant.value, TooltipVariant.percent].includes(tooltipVariant!);\n  const showTooltip = tooltipVariant !== TooltipVariant.none && (hasText || hasValue);\n\n  const isEmpty = data.data.value === 0;\n\n  const isSelectable = role === 'option';\n  const isSelected = isSelectable && propsIsSelected === true;\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const onKeyDown: KeyboardEventHandler<SVGElement> = (event) => {\n    if (onClick) {\n      event.stopPropagation();\n\n      if (event.code === 'Enter' || event.code === 'Space') {\n        event.preventDefault();\n        onClick(data, dataset);\n      }\n    }\n  };\n\n  const DataPointComponent = (\n    <StyledDataPoint\n      tabIndex={onClick ? 0 : undefined}\n      aria-label={\n        showTooltip && !isEmpty ? (labelDecorator ? text : `${data.data.key}, ${data.data.value}`) : undefined\n      }\n      aria-labelledby={!showTooltip && !isEmpty ? `${id}-title` : undefined}\n      aria-selected={isSelected ? true : isDeselected ? false : undefined}\n      onClick={onClick ? () => onClick(data, dataset) : undefined}\n      onKeyDown={onClick ? (e) => onKeyDown(e) : undefined}\n      role={role ? role : onClick ? 'button' : href ? undefined : 'img'}\n      {...forwardedProps}\n      className={classNames(className, `_${index}`, {\n        selected: isSelected,\n        deselected: isDeselected,\n      })}\n      ref={ref as RefObject<SVGGElement>}\n      id={id}\n      $clickable={Boolean(onClick)}\n    >\n      {children}\n      {!showTooltip && !isEmpty ? <title id={`${id}-title`}>{`${text}: ${data.data.value}`}</title> : null}\n    </StyledDataPoint>\n  );\n\n  if (showTooltip) {\n    return (\n      <Tooltip placement=\"right\" theme={theme} delay={50} {...tooltipProps}>\n        <Tooltip.Trigger>\n          {href !== undefined\n            ? React.createElement(as || 'a', { href, ...anchorProps }, DataPointComponent)\n            : DataPointComponent}\n        </Tooltip.Trigger>\n        <Tooltip.Content>\n          {isTooltipCustom ? (\n            tooltipDecorator(data, { index, isSelected: propsIsSelected, color: props.color }, dataset, groupedData)\n          ) : (\n            <Text variant=\"caption\">\n              {text}\n              {hasText && hasValue ? ' - ' : null}\n              {hasValue ? (\n                <Number\n                  value={tooltipValue!}\n                  type={tooltipVariant === TooltipVariant.percent ? 'percent' : 'decimal'}\n                  variant=\"caption\"\n                  maximumFractionDigits={2}\n                />\n              ) : null}\n            </Text>\n          )}\n        </Tooltip.Content>\n      </Tooltip>\n    );\n  }\n\n  return DataPointComponent;\n});\n"],"names":["DataPoint","forwardRef","props","ref","anchorProps","as","href","children","className","data","id","propsId","index","isSelected","propsIsSelected","labelDecorator","onClick","role","tooltipDecorator","tooltipVariant","theme","propsTheme","tooltipProps","dataset","groupedData","_objectWithoutProperties","_excluded","forwardedProps","_excluded2","_id","useId","useTheme","isTooltipCustom","TooltipVariant","custom","text","color","key","hasText","none","tooltipValue","value","percent","undefined","hasValue","includes","showTooltip","isEmpty","isSelectable","isDeselected","onKeyDown","event","stopPropagation","code","preventDefault","DataPointComponent","React","createElement","StyledDataPoint","_extends","tabIndex","e","classNames","selected","deselected","$clickable","Boolean","Tooltip","placement","delay","Trigger","_objectSpread","Content","Text","variant","Number","type","maximumFractionDigits"],"mappings":"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"}

package/components/DataPoint/styles.d.ts

@@ -0,0 +1,12 @@
+import * as styled_components from 'styled-components';
+import { DataPointProps } from './types.js';
+import * as _react_spring_web from '@react-spring/web';
+
+/**
+ * Component style.
+ */
+declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
+    $clickable: boolean;
+}, never>;
+
+export { StyledDataPoint };

package/components/DataPoint/styles.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
+
+/**
+ * Component style.
+ */
+const StyledDataPoint = styled(it.g)``;
+
+export { StyledDataPoint };
+//# sourceMappingURL=styles.js.map

package/components/DataPoint/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/DataPoint/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { animated } from '@react-spring/web';\nimport { StyledDataPointProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDataPoint = styled(animated.g)<StyledDataPointProps>``;\n"],"names":["StyledDataPoint","styled","animated","g"],"mappings":";;;AAIA;AACA;AACA;AACO,MAAMA,eAAe,GAAGC,MAAM,CAACC,EAAQ,CAACC,CAAC,CAAwB,CAAC;;;;"}

package/components/DataPoint/types.d.ts

@@ -0,0 +1,60 @@
+import { ComponentProps, ReactElement } from 'react';
+import { Theme } from '@redsift/design-system';
+import { TooltipProps } from '@redsift/popovers';
+import { TooltipVariant } from '../../types/legend.js';
+
+type AnchorProps = ComponentProps<'a'> & {
+    as?: any;
+};
+/**
+ * Component props.
+ */
+interface DataPointProps<T> extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
+    /** Anchor props to use when the component is a navigation link. */
+    anchorProps?: AnchorProps;
+    /** Color of the DataPoint. */
+    color?: string;
+    /** Data. Also state to which the component should end the animation, if any. */
+    data: T;
+    /** Entire dataset in which the data point is a part of. */
+    dataset: any[];
+    /** Disable animations. */
+    disableAnimations?: boolean;
+    /** Group of data in which the data point is a part of. */
+    groupedData?: any[];
+    /** Id. Used for accessibility. */
+    id?: string;
+    /** Position in the list of siblings. Used for placement and selection. */
+    index?: number;
+    /** Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. */
+    isSelected?: boolean;
+    /** Method modifying the label before displaying it. */
+    labelDecorator?: (data: T, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }) => string | ReactElement;
+    /** Method called when a click or keydown occurs on the component. */
+    onClick?: (data: T, dataset: any[]) => void;
+    /** State from which the component should start the animation, if any. */
+    previousData?: T;
+    /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
+    role?: 'img' | 'button' | 'link' | 'option';
+    /** Theme. */
+    theme?: Theme;
+    /** Tooltip variant. */
+    tooltipVariant?: TooltipVariant;
+    /** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom".  */
+    tooltipDecorator?: (data: T, props?: {
+        index?: number;
+        isSelected?: boolean;
+        color?: string;
+    }, dataset?: any[], groupedData?: any[]) => string | ReactElement;
+    /** Default placement of the tooltip. */
+    tooltipProps?: Partial<Omit<TooltipProps, 'ref'>>;
+}
+type StyledDataPointProps = Omit<DataPointProps<any>, 'data' | 'dataset'> & {
+    $clickable: boolean;
+};
+
+export { AnchorProps, DataPointProps, StyledDataPointProps };

package/components/Dot/Dot.d.ts

@@ -0,0 +1,6 @@
+import { Comp } from '@redsift/design-system';
+import { DotProps } from './types.js';
+
+declare const Dot: Comp<DotProps, SVGGElement>;
+
+export { Dot };

package/components/Dot/Dot.js

@@ -0,0 +1,55 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useTheme, Theme } from '@redsift/design-system';
+import { DotVariant } from './types.js';
+import { StyledDot } from './styles.js';
+import { monochrome } from '../../scheme.js';
+
+const _excluded = ["className", "labelDecorator", "scaleX", "scaleY", "variant", "children"];
+const COMPONENT_NAME = 'Dot';
+const CLASSNAME = 'redsift-dot';
+const Dot = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    color = monochrome,
+    data,
+    isSelected: propsIsSelected,
+    onClick,
+    role
+  } = props;
+  const {
+      className,
+      labelDecorator = datum => {
+        return datum.data.key[2] !== undefined && datum.data.key[2] !== null ? datum.data.key[2] : `${datum.data.key[0]},${datum.data.key[1]}`;
+      },
+      scaleX,
+      scaleY,
+      variant = DotVariant.plain,
+      children
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  const isSelectable = role === 'option';
+  const isDeselected = isSelectable && propsIsSelected === false;
+  return /*#__PURE__*/React__default.createElement(StyledDot, _extends({
+    labelDecorator: labelDecorator
+  }, forwardedProps, {
+    ref: ref,
+    className: classNames(Dot.className, className),
+    $clickable: Boolean(onClick),
+    $variant: variant,
+    $theme: theme
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: scaleX(data.x),
+    cy: scaleY(data.y),
+    r: data.r,
+    fill: variant === DotVariant.hollow ? `var(--redsift-color-neutral-${theme === Theme.light ? 'white' : 'x-dark-grey'})` : isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    stroke: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    strokeWidth: variant === DotVariant.hollow ? '2' : '0'
+  }), children);
+});
+Dot.className = CLASSNAME;
+Dot.displayName = COMPONENT_NAME;
+
+export { Dot };
+//# sourceMappingURL=Dot.js.map

package/components/Dot/Dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.js","sources":["../../../src/components/Dot/Dot.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, Theme, useTheme } from '@redsift/design-system';\n\nimport { DotProps, DotVariant } from './types';\nimport { StyledDot } from './styles';\nimport { monochrome } from '../../scheme';\nimport { DotDatum } from '../../types';\n\nconst COMPONENT_NAME = 'Dot';\nconst CLASSNAME = 'redsift-dot';\n\nexport const Dot: Comp<DotProps, SVGGElement> = forwardRef((props, ref) => {\n  const { color = monochrome, data, isSelected: propsIsSelected, onClick, role } = props;\n\n  const {\n    className,\n    labelDecorator = (datum: DotDatum) => {\n      return datum.data.key[2] !== undefined && datum.data.key[2] !== null\n        ? datum.data.key[2]\n        : `${datum.data.key[0]},${datum.data.key[1]}`;\n    },\n    scaleX,\n    scaleY,\n    variant = DotVariant.plain,\n    children,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme();\n\n  const isSelectable = role === 'option';\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  return (\n    <StyledDot\n      labelDecorator={labelDecorator}\n      {...forwardedProps}\n      ref={ref}\n      className={classNames(Dot.className, className)}\n      $clickable={Boolean(onClick)}\n      $variant={variant}\n      $theme={theme}\n    >\n      <circle\n        cx={scaleX(data.x as any)}\n        cy={scaleY(data.y as any)}\n        r={data.r}\n        fill={\n          variant === DotVariant.hollow\n            ? `var(--redsift-color-neutral-${theme === Theme.light ? 'white' : 'x-dark-grey'})`\n            : isDeselected\n            ? 'var(--redsift-color-neutral-light-grey)'\n            : color\n        }\n        stroke={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n        strokeWidth={variant === DotVariant.hollow ? '2' : '0'}\n      />\n      {children}\n    </StyledDot>\n  );\n});\nDot.className = CLASSNAME;\nDot.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Dot","forwardRef","props","ref","color","monochrome","data","isSelected","propsIsSelected","onClick","role","className","labelDecorator","datum","key","undefined","scaleX","scaleY","variant","DotVariant","plain","children","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","isSelectable","isDeselected","React","createElement","StyledDot","_extends","classNames","$clickable","Boolean","$variant","$theme","cx","x","cy","y","r","fill","hollow","Theme","light","stroke","strokeWidth","displayName"],"mappings":";;;;;;;;;AAUA,MAAMA,cAAc,GAAG,KAAK,CAAA;AAC5B,MAAMC,SAAS,GAAG,aAAa,CAAA;AAExB,MAAMC,GAAgC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzE,MAAM;AAAEC,IAAAA,KAAK,GAAGC,UAAU;IAAEC,IAAI;AAAEC,IAAAA,UAAU,EAAEC,eAAe;IAAEC,OAAO;AAAEC,IAAAA,IAAAA;AAAK,GAAC,GAAGR,KAAK,CAAA;EAEtF,MAAM;MACJS,SAAS;MACTC,cAAc,GAAIC,KAAe,IAAK;QACpC,OAAOA,KAAK,CAACP,IAAI,CAACQ,GAAG,CAAC,CAAC,CAAC,KAAKC,SAAS,IAAIF,KAAK,CAACP,IAAI,CAACQ,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,GAChED,KAAK,CAACP,IAAI,CAACQ,GAAG,CAAC,CAAC,CAAC,GAChB,CAAED,EAAAA,KAAK,CAACP,IAAI,CAACQ,GAAG,CAAC,CAAC,CAAE,CAAGD,CAAAA,EAAAA,KAAK,CAACP,IAAI,CAACQ,GAAG,CAAC,CAAC,CAAE,CAAC,CAAA,CAAA;OAChD;MACDE,MAAM;MACNC,MAAM;MACNC,OAAO,GAAGC,UAAU,CAACC,KAAK;AAC1BC,MAAAA,QAAAA;AAEF,KAAC,GAAGnB,KAAK;AADJoB,IAAAA,cAAc,GAAAC,wBAAA,CACfrB,KAAK,EAAAsB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMC,KAAK,GAAGC,QAAQ,EAAE,CAAA;AAExB,EAAA,MAAMC,YAAY,GAAGjB,IAAI,KAAK,QAAQ,CAAA;AACtC,EAAA,MAAMkB,YAAY,GAAGD,YAAY,IAAInB,eAAe,KAAK,KAAK,CAAA;AAE9D,EAAA,oBACEqB,cAAA,CAAAC,aAAA,CAACC,SAAS,EAAAC,QAAA,CAAA;AACRpB,IAAAA,cAAc,EAAEA,cAAAA;AAAe,GAAA,EAC3BU,cAAc,EAAA;AAClBnB,IAAAA,GAAG,EAAEA,GAAI;IACTQ,SAAS,EAAEsB,UAAU,CAACjC,GAAG,CAACW,SAAS,EAAEA,SAAS,CAAE;AAChDuB,IAAAA,UAAU,EAAEC,OAAO,CAAC1B,OAAO,CAAE;AAC7B2B,IAAAA,QAAQ,EAAElB,OAAQ;AAClBmB,IAAAA,MAAM,EAAEZ,KAAAA;GAERI,CAAAA,eAAAA,cAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEQ,IAAAA,EAAE,EAAEtB,MAAM,CAACV,IAAI,CAACiC,CAAQ,CAAE;AAC1BC,IAAAA,EAAE,EAAEvB,MAAM,CAACX,IAAI,CAACmC,CAAQ,CAAE;IAC1BC,CAAC,EAAEpC,IAAI,CAACoC,CAAE;IACVC,IAAI,EACFzB,OAAO,KAAKC,UAAU,CAACyB,MAAM,GACxB,CAA8BnB,4BAAAA,EAAAA,KAAK,KAAKoB,KAAK,CAACC,KAAK,GAAG,OAAO,GAAG,aAAc,CAAA,CAAA,CAAE,GACjFlB,YAAY,GACZ,yCAAyC,GACzCxB,KACL;AACD2C,IAAAA,MAAM,EAAEnB,YAAY,GAAG,yCAAyC,GAAGxB,KAAM;IACzE4C,WAAW,EAAE9B,OAAO,KAAKC,UAAU,CAACyB,MAAM,GAAG,GAAG,GAAG,GAAA;GACpD,CAAC,EACDvB,QACQ,CAAC,CAAA;AAEhB,CAAC,EAAC;AACFrB,GAAG,CAACW,SAAS,GAAGZ,SAAS,CAAA;AACzBC,GAAG,CAACiD,WAAW,GAAGnD,cAAc;;;;"}

package/components/Dot/styles.d.ts

@@ -0,0 +1,16 @@
+import * as styled_components from 'styled-components';
+import { DotProps, DotVariant } from './types.js';
+import * as _redsift_design_system from '@redsift/design-system';
+import { DataPointProps } from '../DataPoint/types.js';
+
+/**
+ * Component style.
+ */
+declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
+    $clickable: boolean;
+} & Omit<DotProps, "scaleX" | "scaleY"> & {
+    $variant: DotVariant | undefined;
+    $theme: _redsift_design_system.Theme;
+}, never>;
+
+export { StyledDot };

package/components/Dot/styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+import { DotVariant } from './types.js';
+import { DataPoint } from '../DataPoint/DataPoint.js';
+
+/**
+ * Component style.
+ */
+const StyledDot = styled(DataPoint)`
+  text {
+    user-select: none;
+  }
+
+  ${_ref => {
+  let {
+    $variant
+  } = _ref;
+  return css`
+    circle {
+      fill-opacity: ${$variant === DotVariant.hollow ? 1 : 0.7};
+    }
+  `;
+}}
+
+  ${_ref2 => {
+  let {
+    $clickable
+  } = _ref2;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus {
+            opacity: 0.5;
+            outline: none;
+          }
+
+          &:focus-visible {
+            circle {
+              stroke: var(--redsift-color-primary-n);
+              stroke-width: 4px;
+              paint-order: stroke;
+            }
+          }
+        ` : '';
+}}}
+`;
+
+export { StyledDot };
+//# sourceMappingURL=styles.js.map

package/components/Dot/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Dot/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { DotVariant, StyledDotProps } from './types';\nimport { DataPoint } from '../DataPoint';\n\n/**\n * Component style.\n */\nexport const StyledDot = styled(DataPoint)<StyledDotProps>`\n  text {\n    user-select: none;\n  }\n\n  ${({ $variant }) => css`\n    circle {\n      fill-opacity: ${$variant === DotVariant.hollow ? 1 : 0.7};\n    }\n  `}\n\n  ${({ $clickable }) =>\n    $clickable\n      ? css`\n          cursor: pointer;\n\n          &:hover,\n          &:focus {\n            opacity: 0.5;\n            outline: none;\n          }\n\n          &:focus-visible {\n            circle {\n              stroke: var(--redsift-color-primary-n);\n              stroke-width: 4px;\n              paint-order: stroke;\n            }\n          }\n        `\n      : ''}}\n`;\n"],"names":["StyledDot","styled","DataPoint","_ref","$variant","css","DotVariant","hollow","_ref2","$clickable"],"mappings":";;;;AAIA;AACA;AACA;MACaA,SAAS,GAAGC,MAAM,CAACC,SAAS,CAAkB,CAAA;AAC3D;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B;AACA,oBAAsBD,EAAAA,QAAQ,KAAKE,UAAU,CAACC,MAAM,GAAG,CAAC,GAAG,GAAI,CAAA;AAC/D;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNJ,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/Dot/types.d.ts

@@ -0,0 +1,30 @@
+import { ScaleLinear, ScaleTime, ScalePoint } from 'd3';
+import { ValueOf, Theme } from '@redsift/design-system';
+import { DotDatum } from '../../types/data.js';
+import { DataPointProps, StyledDataPointProps } from '../DataPoint/types.js';
+
+/**
+ * Component's variant.
+ */
+declare const DotVariant: {
+    readonly plain: "plain";
+    readonly hollow: "hollow";
+};
+type DotVariant = ValueOf<typeof DotVariant>;
+/**
+ * Component props.
+ */
+interface DotProps extends DataPointProps<DotDatum> {
+    /** A scale defined over a numeric/time/ordinal domain used to determine the x position based on the coordinates. */
+    scaleX: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
+    /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */
+    scaleY: ScaleLinear<number, number, never>;
+    /** Variant. */
+    variant?: DotVariant;
+}
+type StyledDotProps = StyledDataPointProps & Omit<DotProps, 'scaleX' | 'scaleY'> & {
+    $variant: DotProps['variant'];
+    $theme: Theme;
+};
+
+export { DotProps, DotVariant, StyledDotProps };

package/components/Dot/types.js

@@ -0,0 +1,14 @@
+/**
+ * Component's variant.
+ */
+const DotVariant = {
+  plain: 'plain',
+  hollow: 'hollow'
+};
+
+/**
+ * Component props.
+ */
+
+export { DotVariant };
+//# sourceMappingURL=types.js.map

package/components/Dot/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/Dot/types.ts"],"sourcesContent":["import { ScaleLinear as d3ScaleLinear, ScaleTime as d3ScaleTime, ScalePoint as d3ScalePoint } from 'd3';\nimport { DotDatum } from '../../types';\nimport { DataPointProps, StyledDataPointProps } from '../DataPoint';\nimport { Theme, ValueOf } from '@redsift/design-system';\n\n/**\n * Component's variant.\n */\nexport const DotVariant = {\n  plain: 'plain',\n  hollow: 'hollow',\n} as const;\nexport type DotVariant = ValueOf<typeof DotVariant>;\n\n/**\n * Component props.\n */\nexport interface DotProps extends DataPointProps<DotDatum> {\n  /** A scale defined over a numeric/time/ordinal domain used to determine the x position based on the coordinates. */\n  scaleX: d3ScaleLinear<number, number, never> | d3ScaleTime<number, number, never> | d3ScalePoint<string>;\n  /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */\n  scaleY: d3ScaleLinear<number, number, never>;\n  /** Variant. */\n  variant?: DotVariant;\n}\n\nexport type StyledDotProps = StyledDataPointProps &\n  Omit<DotProps, 'scaleX' | 'scaleY'> & {\n    $variant: DotProps['variant'];\n    $theme: Theme;\n  };\n"],"names":["DotVariant","plain","hollow"],"mappings":"AAKA;AACA;AACA;AACO,MAAMA,UAAU,GAAG;AACxBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAA;AACV,EAAU;;AAGV;AACA;AACA;;;;"}

package/components/Legend/Legend.d.ts

@@ -0,0 +1,6 @@
+import { Comp } from '@redsift/design-system';
+import { LegendProps } from './types.js';
+
+declare const Legend: Comp<LegendProps, HTMLUListElement>;
+
+export { Legend };

package/components/Legend/Legend.js

@@ -0,0 +1,73 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { sum } from 'd3';
+import { StyledLegend } from './styles.js';
+import { LegendItem } from '../LegendItem/LegendItem.js';
+import { LegendVariant } from '../../types/legend.js';
+
+const _excluded = ["children", "className", "data", "isLegendItemSelected", "labelDecorator", "legendDecorator", "legendItemRole", "onLegendItemClick", "variant", "width"],
+  _excluded2 = ["color"];
+const COMPONENT_NAME = 'Legend';
+const CLASSNAME = 'redsift-chart-legend';
+const Legend = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      data,
+      isLegendItemSelected = () => true,
+      labelDecorator,
+      legendDecorator,
+      legendItemRole,
+      onLegendItemClick,
+      variant = LegendVariant.label,
+      width
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  if (!data || data.length === 0) {
+    return null;
+  }
+  const total = sum(data, d => d.value);
+  if (children) {
+    const renderedChildren = typeof children === 'function' ? children(data, total) : children;
+    return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
+      className: classNames(Legend.className, className),
+      ref: ref
+    }), renderedChildren);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledLegend, _extends({}, forwardedProps, {
+    className: classNames(Legend.className, className),
+    ref: ref,
+    $width: width
+  }), data.map((_ref, index) => {
+    var _datum$percent;
+    let {
+        color
+      } = _ref,
+      datum = _objectWithoutProperties(_ref, _excluded2);
+    return /*#__PURE__*/React__default.createElement(LegendItem, {
+      data: {
+        data: _objectSpread2(_objectSpread2({}, datum), {}, {
+          percent: (_datum$percent = datum.percent) !== null && _datum$percent !== void 0 ? _datum$percent : datum.value / total
+        })
+      },
+      dataset: data,
+      color: color,
+      variant: variant,
+      index: index,
+      isSelected: Boolean(isLegendItemSelected({
+        data: datum
+      })),
+      key: `legend-item _${index}`,
+      labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
+      onClick: onLegendItemClick,
+      role: legendItemRole
+    });
+  }));
+});
+Legend.className = CLASSNAME;
+Legend.displayName = COMPONENT_NAME;
+
+export { Legend };
+//# sourceMappingURL=Legend.js.map