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

package/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,93 @@
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+export { _defineProperty as defineProperty, _extends as extends, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
+//# sourceMappingURL=_rollupPluginBabelHelpers.js.map

package/_virtual/_rollupPluginBabelHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_rollupPluginBabelHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/components/Arc/Arc.d.ts

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

package/components/Arc/Arc.js

@@ -0,0 +1,74 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
+import { interpolate } from 'd3';
+import { useTheme } from '@redsift/design-system';
+import { StyledArc } from './styles.js';
+import { monochrome } from '../../scheme.js';
+import { config } from '../../config.js';
+import { useSpring as J } from '../../node_modules/@react-spring/core/dist/esm/index.js';
+
+const _excluded = ["className", "createArc", "disableAnimations", "hasStroke", "previousData"];
+const COMPONENT_NAME = 'Arc';
+const CLASSNAME = 'redsift-arc';
+const Arc = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    color = monochrome,
+    data,
+    isSelected: propsIsSelected,
+    onClick,
+    role
+  } = props;
+  const {
+      className,
+      createArc,
+      disableAnimations,
+      hasStroke,
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        },
+        startAngle: 0,
+        endAngle: 0,
+        padAngle: 0,
+        value: 0,
+        index: 0
+      }
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  const interpolator = interpolate(previousData, data);
+  const isSelectable = role === 'option';
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+    to: async next => {
+      await next({
+        t: 1
+      });
+    },
+    from: {
+      t: 0
+    }
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledArc, _extends({}, forwardedProps, {
+    ref: ref,
+    className: classNames(Arc.className, className),
+    $clickable: Boolean(onClick),
+    $hasStroke: Boolean(hasStroke),
+    $theme: theme,
+    tooltipProps: {
+      placement: 'client-point',
+      offset: 12
+    }
+  }), /*#__PURE__*/React__default.createElement(it.path, {
+    d: config.immediate || disableAnimations ? createArc(data) : animatedProps.t.to(t => createArc(interpolator(t))),
+    fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color
+  }));
+});
+Arc.className = CLASSNAME;
+Arc.displayName = COMPONENT_NAME;
+
+export { Arc };
+//# sourceMappingURL=Arc.js.map

package/components/Arc/Arc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.js","sources":["../../../src/components/Arc/Arc.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp, useTheme } from '@redsift/design-system';\n\nimport { ArcProps } from './types';\nimport { StyledArc } from './styles';\nimport { monochrome } from '../../scheme';\nimport { config } from '../../config';\n\nconst COMPONENT_NAME = 'Arc';\nconst CLASSNAME = 'redsift-arc';\n\nexport const Arc: Comp<ArcProps, SVGGElement> = forwardRef((props, ref) => {\n  const { color = monochrome, data, isSelected: propsIsSelected, onClick, role } = props;\n\n  const {\n    className,\n    createArc,\n    disableAnimations,\n    hasStroke,\n    previousData = {\n      data: {\n        key: '',\n        value: 0,\n      },\n      startAngle: 0,\n      endAngle: 0,\n      padAngle: 0,\n      value: 0,\n      index: 0,\n    },\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme();\n\n  const interpolator = d3interpolate(previousData, data);\n\n  const isSelectable = role === 'option';\n  const isDeselected = isSelectable && propsIsSelected === false;\n\n  const animatedProps = useSpring({\n    ...config,\n    to: async (next: (props?: object) => Promise<void>) => {\n      await next({ t: 1 });\n    },\n    from: { t: 0 },\n  });\n\n  return (\n    <StyledArc\n      {...forwardedProps}\n      ref={ref}\n      className={classNames(Arc.className, className)}\n      $clickable={Boolean(onClick)}\n      $hasStroke={Boolean(hasStroke)}\n      $theme={theme}\n      tooltipProps={{ placement: 'client-point', offset: 12 }}\n    >\n      <animated.path\n        d={\n          config.immediate || disableAnimations\n            ? (createArc(data) as unknown as string)\n            : (animatedProps.t.to((t) => createArc(interpolator(t))) as unknown as string)\n        }\n        fill={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n      />\n    </StyledArc>\n  );\n});\nArc.className = CLASSNAME;\nArc.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Arc","forwardRef","props","ref","color","monochrome","data","isSelected","propsIsSelected","onClick","role","className","createArc","disableAnimations","hasStroke","previousData","key","value","startAngle","endAngle","padAngle","index","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","interpolator","d3interpolate","isSelectable","isDeselected","animatedProps","useSpring","_objectSpread","config","to","next","t","from","React","createElement","StyledArc","_extends","classNames","$clickable","Boolean","$hasStroke","$theme","tooltipProps","placement","offset","animated","path","d","immediate","fill","displayName"],"mappings":";;;;;;;;;;;;AAYA,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,SAAS;MACTC,iBAAiB;MACjBC,SAAS;AACTC,MAAAA,YAAY,GAAG;AACbT,QAAAA,IAAI,EAAE;AACJU,UAAAA,GAAG,EAAE,EAAE;AACPC,UAAAA,KAAK,EAAE,CAAA;SACR;AACDC,QAAAA,UAAU,EAAE,CAAC;AACbC,QAAAA,QAAQ,EAAE,CAAC;AACXC,QAAAA,QAAQ,EAAE,CAAC;AACXH,QAAAA,KAAK,EAAE,CAAC;AACRI,QAAAA,KAAK,EAAE,CAAA;AACT,OAAA;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,GAAGC,WAAa,CAACb,YAAY,EAAET,IAAI,CAAC,CAAA;AAEtD,EAAA,MAAMuB,YAAY,GAAGnB,IAAI,KAAK,QAAQ,CAAA;AACtC,EAAA,MAAMoB,YAAY,GAAGD,YAAY,IAAIrB,eAAe,KAAK,KAAK,CAAA;EAE9D,MAAMuB,aAAa,GAAGC,CAAS,CAAAC,cAAA,CAAAA,cAAA,KAC1BC,MAAM,CAAA,EAAA,EAAA,EAAA;IACTC,EAAE,EAAE,MAAOC,IAAuC,IAAK;AACrD,MAAA,MAAMA,IAAI,CAAC;AAAEC,QAAAA,CAAC,EAAE,CAAA;AAAE,OAAC,CAAC,CAAA;KACrB;AACDC,IAAAA,IAAI,EAAE;AAAED,MAAAA,CAAC,EAAE,CAAA;AAAE,KAAA;AAAC,GAAA,CACf,CAAC,CAAA;EAEF,oBACEE,cAAA,CAAAC,aAAA,CAACC,SAAS,EAAAC,QAAA,KACJpB,cAAc,EAAA;AAClBnB,IAAAA,GAAG,EAAEA,GAAI;IACTQ,SAAS,EAAEgC,UAAU,CAAC3C,GAAG,CAACW,SAAS,EAAEA,SAAS,CAAE;AAChDiC,IAAAA,UAAU,EAAEC,OAAO,CAACpC,OAAO,CAAE;AAC7BqC,IAAAA,UAAU,EAAED,OAAO,CAAC/B,SAAS,CAAE;AAC/BiC,IAAAA,MAAM,EAAEtB,KAAM;AACduB,IAAAA,YAAY,EAAE;AAAEC,MAAAA,SAAS,EAAE,cAAc;AAAEC,MAAAA,MAAM,EAAE,EAAA;AAAG,KAAA;AAAE,GAAA,CAAA,eAExDX,cAAA,CAAAC,aAAA,CAACW,EAAQ,CAACC,IAAI,EAAA;IACZC,CAAC,EACCnB,MAAM,CAACoB,SAAS,IAAIzC,iBAAiB,GAChCD,SAAS,CAACN,IAAI,CAAC,GACfyB,aAAa,CAACM,CAAC,CAACF,EAAE,CAAEE,CAAC,IAAKzB,SAAS,CAACe,YAAY,CAACU,CAAC,CAAC,CAAC,CAC1D;AACDkB,IAAAA,IAAI,EAAEzB,YAAY,GAAG,yCAAyC,GAAG1B,KAAAA;AAAM,GACxE,CACQ,CAAC,CAAA;AAEhB,CAAC,EAAC;AACFJ,GAAG,CAACW,SAAS,GAAGZ,SAAS,CAAA;AACzBC,GAAG,CAACwD,WAAW,GAAG1D,cAAc;;;;"}

package/components/Arc/styles.d.ts

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

package/components/Arc/styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components';
+import { Theme } from '@redsift/design-system';
+import { DataPoint } from '../DataPoint/DataPoint.js';
+
+/**
+ * Component style.
+ */
+const StyledArc = styled(DataPoint)`
+  ${_ref => {
+  let {
+    $hasStroke,
+    $theme
+  } = _ref;
+  return $hasStroke ? css`
+          path {
+            stroke-width: 2px;
+            stroke: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});
+          }
+        ` : '';
+}}
+
+  ${_ref2 => {
+  let {
+    $clickable
+  } = _ref2;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus,
+          &.focused {
+            opacity: 0.8;
+            outline: none;
+          }
+
+          &:focus-visible,
+          &.focused {
+            path {
+              stroke: var(--redsift-color-primary-n);
+              stroke-width: 4px;
+              paint-order: stroke;
+            }
+          }
+        ` : '';
+}}}
+`;
+
+export { StyledArc };
+//# sourceMappingURL=styles.js.map

package/components/Arc/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Arc/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledArcProps } from './types';\nimport { DataPoint } from '../DataPoint';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledArc = styled(DataPoint)<StyledArcProps>`\n  ${({ $hasStroke, $theme }) =>\n    $hasStroke\n      ? css`\n          path {\n            stroke-width: 2px;\n            stroke: var(--redsift-color-neutral-${$theme === Theme.light ? 'white' : 'x-dark-grey'});\n          }\n        `\n      : ''}\n\n  ${({ $clickable }) =>\n    $clickable\n      ? css`\n          cursor: pointer;\n\n          &:hover,\n          &:focus,\n          &.focused {\n            opacity: 0.8;\n            outline: none;\n          }\n\n          &:focus-visible,\n          &.focused {\n            path {\n              stroke: var(--redsift-color-primary-n);\n              stroke-width: 4px;\n              paint-order: stroke;\n            }\n          }\n        `\n      : ''}}\n`;\n"],"names":["StyledArc","styled","DataPoint","_ref","$hasStroke","$theme","css","Theme","light","_ref2","$clickable"],"mappings":";;;;AAKA;AACA;AACA;MACaA,SAAS,GAAGC,MAAM,CAACC,SAAS,CAAkB,CAAA;AAC3D,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAF,IAAA,CAAA;EAAA,OACvBC,UAAU,GACNE,GAAI,CAAA;AACZ;AACA;AACA,gDAAkDD,EAAAA,MAAM,KAAKE,KAAK,CAACC,KAAK,GAAG,OAAO,GAAG,aAAc,CAAA;AACnG;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;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;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/Arc/types.d.ts

@@ -0,0 +1,20 @@
+import { Arc } from 'd3';
+import { Theme } from '@redsift/design-system';
+import { DataPointProps, StyledDataPointProps } from '../DataPoint/types.js';
+import { ArcDatum } from '../../types/data.js';
+
+/**
+ * Component props.
+ */
+interface ArcProps extends DataPointProps<ArcDatum> {
+    /** Arc generator used to determine the width of the arc. */
+    createArc: Arc<any, ArcDatum>;
+    /** Whether the arc has a stroke or not. Used to create a gap between two siblings. */
+    hasStroke?: boolean;
+}
+type StyledArcProps = StyledDataPointProps & Omit<ArcProps, 'createArc'> & {
+    $hasStroke: ArcProps['hasStroke'];
+    $theme: Theme;
+};
+
+export { ArcProps, StyledArcProps };

package/components/Arcs/Arcs.d.ts

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

package/components/Arcs/Arcs.js

@@ -0,0 +1,90 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
+import { interpolate } from 'd3';
+import { useId } from '@redsift/design-system';
+import { StyledArcs } from './styles.js';
+import { config } from '../../config.js';
+import { Arc } from '../Arc/Arc.js';
+import { useSpring as J } from '../../node_modules/@react-spring/core/dist/esm/index.js';
+
+const _excluded = ["arcs", "className", "color", "disableAnimations", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
+const COMPONENT_NAME = 'Arcs';
+const CLASSNAME = 'redsift-arcs';
+const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      arcs,
+      className,
+      color,
+      disableAnimations,
+      hasLabels,
+      hasStroke,
+      id: propsId,
+      labelDecorator,
+      onClick,
+      role,
+      sliceProps,
+      tooltipVariant
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+    to: async next => {
+      await next({
+        t: 1
+      });
+    },
+    from: {
+      t: 0
+    }
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledArcs, _extends({}, forwardedProps, {
+    className: classNames(Arcs.className, className),
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("g", {
+    className: "arc-group"
+  }, arcs.map((arc, index) => {
+    var _arc$index, _arc$id;
+    const arcIndex = (_arc$index = arc.index) !== null && _arc$index !== void 0 ? _arc$index : index;
+    const arcId = (_arc$id = arc.id) !== null && _arc$id !== void 0 ? _arc$id : `id${id}__arc-${arcIndex}`;
+    return /*#__PURE__*/React__default.createElement(Arc, _extends({}, sliceProps, {
+      color: color,
+      disableAnimations: disableAnimations,
+      hasStroke: hasStroke,
+      labelDecorator: labelDecorator,
+      onClick: onClick,
+      role: role,
+      tooltipVariant: tooltipVariant
+    }, arc, {
+      key: arcId,
+      id: arcId,
+      index: arcIndex
+    }));
+  })), hasLabels ? /*#__PURE__*/React__default.createElement("g", {
+    className: "arc-label-group"
+  }, arcs.filter(arc => {
+    const value = arc.data.data.value;
+    const percent = arc.data.data.percent;
+    return percent ? value > 0 && percent >= 0.1 : value > 0;
+  }).map((arc, index) => {
+    var _arc$index2, _arc$id2, _arc$labelDecorator;
+    const arcIndex = (_arc$index2 = arc.index) !== null && _arc$index2 !== void 0 ? _arc$index2 : index;
+    const arcId = (_arc$id2 = arc.id) !== null && _arc$id2 !== void 0 ? _arc$id2 : `id${id}__arc-${arcIndex}`;
+    const arcLabelDecorator = (_arc$labelDecorator = arc.labelDecorator) !== null && _arc$labelDecorator !== void 0 ? _arc$labelDecorator : labelDecorator;
+    const interpolator = interpolate(arc.from, arc.data);
+    return /*#__PURE__*/React__default.createElement(it.text, {
+      alignmentBaseline: "middle",
+      className: `arc-label _${index}`,
+      key: `${arcId}-label`,
+      textAnchor: "middle",
+      transform: config.immediate || disableAnimations ? `translate(${arc.createArc.centroid(arc.data).map(n => n.toFixed(4))})` : animatedProps.t.to(t => `translate(${arc.createArc.centroid(interpolator(t)).map(n => n.toFixed(4))})`)
+    }, arcLabelDecorator ? arcLabelDecorator(arc.data) : arc.data.data.key);
+  })) : null);
+});
+Arcs.className = CLASSNAME;
+Arcs.displayName = COMPONENT_NAME;
+
+export { Arcs };
+//# sourceMappingURL=Arcs.js.map

package/components/Arcs/Arcs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arcs.js","sources":["../../../src/components/Arcs/Arcs.tsx"],"sourcesContent":["import React, { RefObject, forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp, useId } from '@redsift/design-system';\n\nimport { ArcsProps } from './types';\nimport { StyledArcs } from './styles';\nimport { Arc } from '../Arc';\nimport { config } from '../../config';\n\nconst COMPONENT_NAME = 'Arcs';\nconst CLASSNAME = 'redsift-arcs';\n\nexport const Arcs: Comp<ArcsProps, SVGGElement> = forwardRef((props, ref) => {\n  const {\n    arcs,\n    className,\n    color,\n    disableAnimations,\n    hasLabels,\n    hasStroke,\n    id: propsId,\n    labelDecorator,\n    onClick,\n    role,\n    sliceProps,\n    tooltipVariant,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const animatedProps = useSpring({\n    ...config,\n    to: async (next: (props?: object) => Promise<void>) => {\n      await next({ t: 1 });\n    },\n    from: { t: 0 },\n  });\n\n  return (\n    <StyledArcs\n      {...forwardedProps}\n      className={classNames(Arcs.className, className)}\n      ref={ref as RefObject<SVGGElement>}\n    >\n      <g className=\"arc-group\">\n        {arcs.map((arc, index) => {\n          const arcIndex = arc.index ?? index;\n          const arcId = arc.id ?? `id${id}__arc-${arcIndex}`;\n\n          return (\n            <Arc\n              {...sliceProps}\n              color={color}\n              disableAnimations={disableAnimations}\n              hasStroke={hasStroke}\n              labelDecorator={labelDecorator}\n              onClick={onClick}\n              role={role}\n              tooltipVariant={tooltipVariant}\n              {...arc}\n              key={arcId}\n              id={arcId}\n              index={arcIndex}\n            />\n          );\n        })}\n      </g>\n      {hasLabels ? (\n        <g className=\"arc-label-group\">\n          {arcs\n            .filter((arc) => {\n              const value = arc.data.data.value;\n              const percent = arc.data.data.percent;\n              return percent ? value > 0 && percent >= 0.1 : value > 0;\n            })\n            .map((arc, index) => {\n              const arcIndex = arc.index ?? index;\n              const arcId = arc.id ?? `id${id}__arc-${arcIndex}`;\n              const arcLabelDecorator = arc.labelDecorator ?? labelDecorator;\n              const interpolator = d3interpolate(arc.from, arc.data);\n\n              return (\n                <animated.text\n                  alignmentBaseline=\"middle\"\n                  className={`arc-label _${index}`}\n                  key={`${arcId}-label`}\n                  textAnchor=\"middle\"\n                  transform={\n                    config.immediate || disableAnimations\n                      ? `translate(${arc.createArc.centroid(arc.data).map((n) => n.toFixed(4))})`\n                      : animatedProps.t.to(\n                          (t) => `translate(${arc.createArc.centroid(interpolator(t)).map((n) => n.toFixed(4))})`\n                        )\n                  }\n                >\n                  {arcLabelDecorator ? arcLabelDecorator(arc.data) : arc.data.data.key}\n                </animated.text>\n              );\n            })}\n        </g>\n      ) : null}\n    </StyledArcs>\n  );\n});\nArcs.className = CLASSNAME;\nArcs.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Arcs","forwardRef","props","ref","arcs","className","color","disableAnimations","hasLabels","hasStroke","id","propsId","labelDecorator","onClick","role","sliceProps","tooltipVariant","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","animatedProps","useSpring","_objectSpread","config","to","next","t","from","React","createElement","StyledArcs","_extends","classNames","map","arc","index","_arc$index","_arc$id","arcIndex","arcId","Arc","key","filter","value","data","percent","_arc$index2","_arc$id2","_arc$labelDecorator","arcLabelDecorator","interpolator","d3interpolate","animated","text","alignmentBaseline","textAnchor","transform","immediate","createArc","centroid","n","toFixed","displayName"],"mappings":"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"}

package/components/Arcs/styles.d.ts

@@ -0,0 +1,9 @@
+import * as styled_components from 'styled-components';
+import { ArcsProps } from './types.js';
+
+/**
+ * Component style.
+ */
+declare const StyledArcs: styled_components.StyledComponent<"g", any, Omit<ArcsProps, "arcs">, never>;
+
+export { StyledArcs };

package/components/Arcs/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+/**
+ * Component style.
+ */
+const StyledArcs = styled.g``;
+
+export { StyledArcs };
+//# sourceMappingURL=styles.js.map

package/components/Arcs/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Arcs/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledArcsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledArcs = styled.g<StyledArcsProps>``;\n"],"names":["StyledArcs","styled","g"],"mappings":";;AAGA;AACA;AACA;MACaA,UAAU,GAAGC,MAAM,CAACC,CAAmB,CAAC;;;;"}

package/components/Arcs/types.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from 'react';
+import { ArcProps } from '../Arc/types.js';
+
+/**
+ * Component props.
+ */
+interface ArcsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<ArcProps, 'id' | 'disableAnimations' | 'labelDecorator' | 'onClick' | 'role' | 'hasStroke' | 'tooltipDecorator' | 'tooltipVariant'> {
+    /** Arc props. */
+    arcs: Omit<ArcProps, 'ref'>[];
+    /** Whether arcs have internal labels or not. */
+    hasLabels?: boolean;
+    /** Native HTML props to forward to each slice. */
+    sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
+}
+type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};
+
+export { ArcsProps, StyledArcsProps };

package/components/Axis/Axis.d.ts

@@ -0,0 +1,7 @@
+import { Comp } from '@redsift/design-system';
+import { AxisPosition, AxisProps } from './types.js';
+
+declare const getAxisType: (position: AxisPosition) => "x" | "y";
+declare const Axis: Comp<AxisProps, SVGGElement>;
+
+export { Axis, getAxisType };