@redsift/charts 11.5.0 → 11.6.0-alpha.0

package/_internal/Arc.js

@@ -0,0 +1,2 @@
+export { A as Arc, S as StyledArc } from './Arc2.js';
+//# sourceMappingURL=Arc.js.map

package/_internal/Arc.js.map

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

package/_internal/Arc2.js

@@ -0,0 +1,117 @@
+import { _ as _objectWithoutProperties, b as _objectSpread2, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { J, i as it } from '../index2.js';
+import { interpolate } from 'd3';
+import { Theme, useTheme } from '@redsift/design-system';
+import styled, { css } from 'styled-components';
+import { D as DataPoint } from './DataPoint2.js';
+import { m as monochrome } from './scheme.js';
+import { c as config } from './config.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;
+            }
+          }
+        ` : '';
+}}}
+`;
+
+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 as A, StyledArc as S };
+//# sourceMappingURL=Arc2.js.map

package/_internal/Arc2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arc2.js","sources":["../../src/components/Arc/styles.ts","../../src/components/Arc/Arc.tsx"],"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","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":["StyledArc","styled","DataPoint","_ref","$hasStroke","$theme","css","Theme","light","_ref2","$clickable","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","_extends","classNames","Boolean","tooltipProps","placement","offset","animated","path","d","immediate","fill","displayName"],"mappings":"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"}

package/_internal/Arcs.js

@@ -0,0 +1,2 @@
+export { A as Arcs, S as StyledArcs } from './Arcs2.js';
+//# sourceMappingURL=Arcs.js.map

package/_internal/Arcs.js.map

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

package/_internal/Arcs2.js

@@ -0,0 +1,94 @@
+import { _ as _objectWithoutProperties, b as _objectSpread2, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { J, i as it } from '../index2.js';
+import { interpolate } from 'd3';
+import { useId } from '@redsift/design-system';
+import styled from 'styled-components';
+import { c as config } from './config.js';
+import { A as Arc } from './Arc2.js';
+
+/**
+ * Component style.
+ */
+const StyledArcs = styled.g``;
+
+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 as A, StyledArcs as S };
+//# sourceMappingURL=Arcs2.js.map

package/_internal/Arcs2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arcs2.js","sources":["../../src/components/Arcs/styles.ts","../../src/components/Arcs/Arcs.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledArcsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledArcs = styled.g<StyledArcsProps>``;\n","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":["StyledArcs","styled","g","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","_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/_internal/Axis.js

@@ -0,0 +1,2 @@
+export { A as Axis, b as AxisPosition, a as AxisVariant, S as StyledAxis, g as getAxisType } from './Axis2.js';
+//# sourceMappingURL=Axis.js.map

package/_internal/Axis.js.map

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

package/_internal/Axis2.js

@@ -0,0 +1,388 @@
+import { b as _objectSpread2, _ as _objectWithoutProperties, a as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef } from 'react';
+import classNames from 'classnames';
+import { Theme, useTheme } from '@redsift/design-system';
+import styled, { css } from 'styled-components';
+import { i as it, J, G as Gt } from '../index2.js';
+import { c as config } from './config.js';
+
+/**
+ * Component variant.
+ */
+const AxisVariant = {
+  none: 'none',
+  line: 'line',
+  lineTick: 'lineTick',
+  tick: 'tick',
+  tickValue: 'tickValue',
+  default: 'default'
+};
+const AxisPosition = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left'
+};
+
+/**
+ * Component props.
+ */
+
+/**
+ * Component style.
+ */
+const StyledAxis = styled(it.g)`
+  .redsift-axis__line,
+  .redsift-axis-tick__line {
+    fill: none;
+    ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+      stroke: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    `;
+}}
+    shape-rendering: crispEdges;
+  }
+
+  text {
+    font-family: var(--redsift-typography-font-family-poppins);
+    ${_ref2 => {
+  let {
+    $theme
+  } = _ref2;
+  return css`
+      fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    `;
+}}
+    font-size: 10px;
+    user-select: none;
+  }
+
+  text.colored {
+    ${_ref3 => {
+  let {
+    $theme,
+    $color
+  } = _ref3;
+  return css`
+      fill: ${$color === 'green' ? '#029B57' : $color === 'red' ? '#CB0E0E' : `var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};
+    `;
+}}
+  }
+`;
+
+const getScaleTicks = (scale, spec) => {
+  // specific values
+  if (Array.isArray(spec)) {
+    return spec;
+  }
+
+  // continuous scales
+  if ('ticks' in scale) {
+    // default behaviour
+    if (spec === undefined) {
+      return scale.ticks();
+    }
+
+    // specific tick count
+    if (typeof spec === 'number' && isFinite(spec) && Math.floor(spec) === spec) {
+      return scale.ticks(spec);
+    }
+    if (typeof spec === 'function') {
+      return scale.ticks();
+    }
+  }
+
+  // non linear scale default
+  return scale.domain();
+};
+const centerScale = scale => {
+  const bandwidth = scale.bandwidth();
+  if (bandwidth === 0) return scale;
+  let offset = bandwidth / 2;
+  if (scale.round()) {
+    offset = Math.round(offset);
+  }
+  return d => {
+    var _scale;
+    return ((_scale = scale(d)) !== null && _scale !== void 0 ? _scale : 0) + offset;
+  };
+};
+const computeTicks = _ref => {
+  let {
+    axis,
+    scale,
+    ticksPosition,
+    tickValues,
+    tickSize,
+    tickPadding,
+    tickRotation,
+    tickRemodelling
+  } = _ref;
+  const values = tickRemodelling ? tickRemodelling(getScaleTicks(scale, tickValues)) : getScaleTicks(scale, tickValues);
+  const position = 'bandwidth' in scale ? centerScale(scale) : scale;
+  const line = {
+    lineX: 0,
+    lineY: 0
+  };
+  const text = {
+    textX: 0,
+    textY: 0
+  };
+  const isRTL = typeof document === 'object' ? document.dir === 'rtl' : false;
+  let translate;
+  let textAlign = 'middle';
+  let textBaseline = 'central';
+  if (axis === 'x') {
+    translate = d => {
+      var _position;
+      return {
+        x: (_position = position(d)) !== null && _position !== void 0 ? _position : 0,
+        y: 0
+      };
+    };
+    line.lineY = tickSize * (ticksPosition === 'after' ? 1 : -1);
+    text.textY = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
+    if (ticksPosition === 'after') {
+      textBaseline = 'text-before-edge';
+    } else {
+      textBaseline = 'alphabetic';
+    }
+    if (tickRotation === 0) {
+      textAlign = 'middle';
+    } else if (ticksPosition === 'after' && tickRotation < 0 || ticksPosition === 'before' && tickRotation > 0) {
+      textAlign = isRTL ? 'start' : 'end';
+      textBaseline = 'middle';
+    } else if (ticksPosition === 'after' && tickRotation > 0 || ticksPosition === 'before' && tickRotation < 0) {
+      textAlign = isRTL ? 'end' : 'start';
+      textBaseline = 'middle';
+    }
+  } else {
+    translate = d => {
+      var _position2;
+      return {
+        x: 0,
+        y: (_position2 = position(d)) !== null && _position2 !== void 0 ? _position2 : 0
+      };
+    };
+    line.lineX = tickSize * (ticksPosition === 'after' ? 1 : -1);
+    text.textX = (tickSize + tickPadding) * (ticksPosition === 'after' ? 1 : -1);
+    if (ticksPosition === 'after') {
+      textAlign = 'start';
+    } else {
+      textAlign = 'end';
+    }
+  }
+  const ticks = values.map(value => _objectSpread2(_objectSpread2(_objectSpread2({
+    key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
+    value
+  }, translate(value)), line), text));
+  return {
+    ticks,
+    textAlign,
+    textBaseline
+  };
+};
+
+const _excluded = ["className", "disableAnimations", "grid", "length", "legend", "legendOffset", "legendPosition", "legendX", "legendY", "legendRotation", "legendStyle", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "tickRemodelling", "variant", "x", "y", "chartWidth", "chartHeight", "sectionHeight", "textColor", "tickToColor"],
+  _excluded2 = ["length"];
+const COMPONENT_NAME = 'Axis';
+const CLASSNAME = 'redsift-axis';
+const getAxisType = position => [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
+const Axis = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      className,
+      disableAnimations,
+      grid,
+      length,
+      legend,
+      legendOffset = -32,
+      legendPosition = 'end',
+      legendX: propsLegendX,
+      legendY: propsLegendY,
+      legendRotation: propsLegendRotation,
+      legendStyle,
+      position = AxisPosition.bottom,
+      scale,
+      tickPadding = 5,
+      tickRotation = 0,
+      tickSize = 5,
+      tickValues,
+      tickFormat,
+      tickRemodelling,
+      variant = AxisVariant.default,
+      x = 0,
+      y = 0,
+      chartWidth,
+      chartHeight,
+      sectionHeight,
+      textColor,
+      tickToColor = () => true
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  const axis = getAxisType(position);
+  const _ref = typeof grid === 'object' ? _objectSpread2({
+      length: axis === 'x' ? sectionHeight !== null && sectionHeight !== void 0 ? sectionHeight : chartHeight : chartWidth
+    }, grid) : grid === true ? {
+      length: axis === 'x' ? sectionHeight !== null && sectionHeight !== void 0 ? sectionHeight : chartHeight : chartWidth
+    } : {
+      length: 0
+    },
+    {
+      length: gridLength
+    } = _ref,
+    gridStyle = _objectWithoutProperties(_ref, _excluded2);
+  const axisRef = ref || useRef();
+  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+    to: async next => {
+      await next({
+        lineX2: axis === 'x' ? length : 0,
+        lineY2: axis === 'x' ? 0 : length
+      });
+    },
+    from: {
+      lineX2: 0,
+      lineY2: 0
+    },
+    reset: false
+  }));
+  let legendNode = null;
+  if (legend !== undefined) {
+    let legendX = 0;
+    let legendY = 0;
+    let legendRotation = 0;
+    let textAnchor;
+    if (axis === 'y') {
+      legendRotation = propsLegendRotation !== null && propsLegendRotation !== void 0 ? propsLegendRotation : 90;
+      legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+        legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : length;
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+        legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : legendY;
+      }
+    } else {
+      legendY = propsLegendY !== null && propsLegendY !== void 0 ? propsLegendY : legendOffset;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+        legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : legendX;
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : length / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+        legendX = propsLegendX !== null && propsLegendX !== void 0 ? propsLegendX : length;
+      }
+    }
+    legendNode = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("text", {
+      transform: `translate(${legendX}, ${legendY}) rotate(${legendRotation})`,
+      textAnchor: textAnchor,
+      style: _objectSpread2({
+        dominantBaseline: 'central'
+      }, legendStyle)
+    }, legend));
+  }
+  const {
+    ticks,
+    textAlign,
+    textBaseline
+  } = computeTicks({
+    axis,
+    scale: scale,
+    ticksPosition: [AxisPosition.top, AxisPosition.left].includes(position) ? 'before' : 'after',
+    tickValues,
+    tickSize: tickSize,
+    tickPadding: tickPadding,
+    tickRotation: tickRotation,
+    tickRemodelling
+  });
+  const transition = Gt(ticks, _objectSpread2(_objectSpread2({}, config), {}, {
+    keys: tick => tick.key,
+    initial: tick => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
+    }),
+    from: tick => ({
+      opacity: 0,
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
+    }),
+    enter: tick => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
+    }),
+    update: tick => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${axis === 'x' ? tick.y : (y || 0) - tick.y}),rotate(${axis === 'x' ? 0 : 180})`,
+      textTransform: `translate(${tick.textX},${tick.textY}),rotate(${tickRotation})`
+    }),
+    leave: {
+      opacity: 0
+    }
+  }));
+  return /*#__PURE__*/React__default.createElement(StyledAxis, _extends({
+    "aria-hidden": "true",
+    className: classNames(Axis.className, className),
+    $theme: theme
+  }, forwardedProps, {
+    transform: `translate(${x},${y})${axis === 'x' ? '' : ',rotate(180)'}`,
+    ref: axisRef,
+    $color: textColor
+  }), gridLength ? /*#__PURE__*/React__default.createElement("g", {
+    className: `${Axis.className}__grid`
+  }, ticks.map((tick, i) => /*#__PURE__*/React__default.createElement("line", {
+    key: `grid-${tick.key}-${i}`,
+    className: `${Axis.className}-grid__line`,
+    x1: axis === 'x' ? tick.x : 0,
+    x2: axis === 'x' ? tick.x : gridLength * -1,
+    y1: axis === 'x' ? 0 : tick.y,
+    y2: axis === 'x' ? gridLength * -1 : tick.y,
+    style: _objectSpread2(_objectSpread2({
+      strokeDasharray: '4,4',
+      opacity: 0.2,
+      strokeWidth: 0.5
+    }, gridStyle), {}, {
+      stroke: 'currentColor'
+    })
+  }))) : null, variant === AxisVariant.default || variant === AxisVariant.tick || variant === AxisVariant.lineTick || variant === AxisVariant.tickValue ? transition((transitionProps, tick, _state, tickIndex) => {
+    return /*#__PURE__*/React__default.createElement(it.g, {
+      className: `${Axis.className}__tick`,
+      key: tickIndex,
+      transform: transitionProps.transform,
+      style: {
+        opacity: transitionProps.opacity
+      }
+    }, /*#__PURE__*/React__default.createElement("line", {
+      className: `${Axis.className}-tick__line`,
+      x1: 0,
+      x2: tick.lineX,
+      y1: 0,
+      y2: tick.lineY
+    }), variant === AxisVariant.default || variant === AxisVariant.tickValue ? /*#__PURE__*/React__default.createElement(it.text, {
+      dominantBaseline: textBaseline,
+      textAnchor: textAlign,
+      transform: transitionProps.textTransform,
+      className: !textColor ? '' : tickToColor(tick, tickIndex) ? 'colored' : ''
+    }, `${tickFormat ? tickFormat(tick.value) : tick.value}`) : null);
+  }) : null, variant === AxisVariant.default || variant === AxisVariant.line || variant === AxisVariant.lineTick ? /*#__PURE__*/React__default.createElement(it.line, {
+    className: `${Axis.className}__line`,
+    x1: 0,
+    x2: config.immediate || disableAnimations ? axis === 'x' ? length : 0 : animatedProps.lineX2,
+    y1: 0,
+    y2: config.immediate || disableAnimations ? axis === 'x' ? 0 : length : animatedProps.lineY2
+  }) : null, legendNode);
+});
+Axis.className = CLASSNAME;
+Axis.displayName = COMPONENT_NAME;
+
+export { Axis as A, StyledAxis as S, AxisVariant as a, AxisPosition as b, getAxisType as g };
+//# sourceMappingURL=Axis2.js.map