@redsift/charts 9.2.3-patch → 9.2.3

package/src/components/Axis/Axis.stories.tsx

@@ -0,0 +1,297 @@
+import React, { RefObject, useRef } from 'react';
+// @ts-ignore
+import type { StoryObj } from '@storybook/react';
+import { scaleLinear as d3scaleLinear, scalePoint as d3scalePoint } from 'd3';
+
+import { Axis, AxisPosition, AxisProps, AxisVariant } from '.';
+import { Flexbox } from '@redsift/design-system';
+import { useZoom } from '../../hooks';
+import { AnyScale } from '../../types';
+
+const meta = {
+  title: 'Charts/Core/Axis',
+  component: Axis,
+};
+
+export default meta;
+type Story = StoryObj<AxisProps>;
+
+const scaleLinearX = d3scaleLinear().domain([0, 80]).range([0, 280]);
+const scaleLinearY = d3scaleLinear().domain([0, 35]).range([160, 0]);
+
+export const Linear: Story = {
+  render: () => (
+    <Flexbox gap="16px">
+      {[0, -45].map((tickRotation) => (
+        <svg
+          height={260}
+          style={{ border: '1px dashed black' }}
+          width={380}
+          key={`${tickRotation}`}
+        >
+          <g transform="translate(50,50)">
+            <Axis
+              scale={scaleLinearX as AnyScale}
+              position={AxisPosition.top}
+              x={0}
+              y={0}
+              length={280}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scaleLinearY as AnyScale}
+              position={AxisPosition.right}
+              x={280}
+              y={0}
+              length={160}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scaleLinearX as AnyScale}
+              position={AxisPosition.bottom}
+              x={0}
+              y={160}
+              length={280}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scaleLinearY as AnyScale}
+              position={AxisPosition.left}
+              x={0}
+              y={0}
+              length={160}
+              tickRotation={tickRotation}
+            />
+          </g>
+        </svg>
+      ))}
+    </Flexbox>
+  ),
+};
+
+export const WithLegend: Story = {
+  render: () => (
+    <Flexbox gap="16px">
+      <svg height={260} style={{ border: '1px dashed black' }} width={380}>
+        <g transform="translate(50,50)">
+          <Axis
+            scale={scaleLinearX as AnyScale}
+            position={AxisPosition.top}
+            x={0}
+            y={32}
+            length={280}
+            legend="start"
+            legendPosition="start"
+          />
+          <Axis
+            scale={scaleLinearX as AnyScale}
+            position={AxisPosition.top}
+            x={0}
+            y={96}
+            length={280}
+            legend="middle"
+            legendPosition="middle"
+          />
+          <Axis
+            scale={scaleLinearX as AnyScale}
+            position={AxisPosition.top}
+            x={0}
+            y={160}
+            length={280}
+            legend="end"
+            legendPosition="end"
+          />
+        </g>
+      </svg>
+      <svg height={260} style={{ border: '1px dashed black' }} width={380}>
+        <g transform="translate(50,50)">
+          <Axis
+            scale={scaleLinearY as AnyScale}
+            position={AxisPosition.left}
+            x={32}
+            y={0}
+            length={160}
+            legend="start"
+            legendPosition="start"
+          />
+          <Axis
+            scale={scaleLinearY as AnyScale}
+            position={AxisPosition.left}
+            x={156}
+            y={0}
+            length={160}
+            legend="middle"
+            legendPosition="middle"
+          />
+          <Axis
+            scale={scaleLinearY as AnyScale}
+            position={AxisPosition.left}
+            x={280}
+            y={0}
+            length={160}
+            legend="end"
+            legendPosition="end"
+          />
+        </g>
+      </svg>
+    </Flexbox>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <Flexbox gap="16px">
+      {Object.keys(AxisVariant).map((variant) => (
+        <svg
+          height={260}
+          style={{ border: '1px dashed black' }}
+          width={380}
+          key={`${variant}`}
+        >
+          <g transform="translate(50,50)">
+            <Axis
+              scale={scaleLinearX as AnyScale}
+              position={AxisPosition.top}
+              x={0}
+              y={0}
+              length={280}
+              variant={variant as AxisVariant}
+            />
+            <Axis
+              scale={scaleLinearY as AnyScale}
+              position={AxisPosition.right}
+              x={280}
+              y={0}
+              length={160}
+              variant={variant as AxisVariant}
+            />
+            <Axis
+              scale={scaleLinearX as AnyScale}
+              position={AxisPosition.bottom}
+              x={0}
+              y={160}
+              length={280}
+              variant={variant as AxisVariant}
+            />
+            <Axis
+              scale={scaleLinearY as AnyScale}
+              position={AxisPosition.left}
+              x={0}
+              y={0}
+              length={160}
+              variant={variant as AxisVariant}
+            />
+          </g>
+        </svg>
+      ))}
+    </Flexbox>
+  ),
+};
+
+export const Zoomable: Story = {
+  render: () => {
+    const svgRef = useRef<SVGSVGElement>();
+    const { scaleX, scaleY } = useZoom({
+      svgRef,
+      scaleX: scaleLinearX,
+      scaleY: scaleLinearY,
+    });
+
+    return (
+      <Flexbox gap="16px">
+        <svg
+          ref={svgRef as RefObject<SVGSVGElement>}
+          height={260}
+          style={{ border: '1px dashed black' }}
+          width={380}
+        >
+          <g transform="translate(50,50)">
+            <Axis
+              scale={scaleX as AnyScale}
+              position={AxisPosition.top}
+              x={0}
+              y={0}
+              length={280}
+            />
+            <Axis
+              scale={scaleY as AnyScale}
+              position={AxisPosition.right}
+              x={280}
+              y={0}
+              length={160}
+            />
+            <Axis
+              scale={scaleX as AnyScale}
+              position={AxisPosition.bottom}
+              x={0}
+              y={160}
+              length={280}
+            />
+            <Axis
+              scale={scaleY as AnyScale}
+              position={AxisPosition.left}
+              x={0}
+              y={0}
+              length={160}
+            />
+          </g>
+        </svg>
+      </Flexbox>
+    );
+  },
+};
+
+const scalePointX = d3scalePoint()
+  .domain(['A', 'list', 'of', 'words', 'as', 'domain'])
+  .range([0, 280]);
+const scalePointY = d3scalePoint().domain(['A', 'B', 'C']).range([160, 0]);
+
+export const Point: Story = {
+  render: () => (
+    <Flexbox gap="16px">
+      {[0, -45].map((tickRotation) => (
+        <svg
+          height={260}
+          style={{ border: '1px dashed black' }}
+          width={380}
+          key={`${tickRotation}`}
+        >
+          <g transform="translate(50,50)">
+            <Axis
+              scale={scalePointX as AnyScale}
+              position={AxisPosition.top}
+              x={0}
+              y={0}
+              length={280}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scalePointY as AnyScale}
+              position={AxisPosition.right}
+              x={280}
+              y={0}
+              length={160}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scalePointX as AnyScale}
+              position={AxisPosition.bottom}
+              x={0}
+              y={160}
+              length={280}
+              tickRotation={tickRotation}
+            />
+            <Axis
+              scale={scalePointY as AnyScale}
+              position={AxisPosition.left}
+              x={0}
+              y={0}
+              length={160}
+              tickRotation={tickRotation}
+            />
+          </g>
+        </svg>
+      ))}
+    </Flexbox>
+  ),
+};

package/src/components/Axis/Axis.tsx

@@ -0,0 +1,223 @@
+import React, { forwardRef, RefObject, useRef } from 'react';
+import classNames from 'classnames';
+
+import { Comp } from '@redsift/design-system';
+
+import { AxisProps, AxisPosition, AxisVariant } from './types';
+import { StyledAxis } from './styles';
+import { animated, useSpring, useTransition } from '@react-spring/web';
+import { computeTicks } from './computeTicks';
+import { config } from '../../config';
+
+const COMPONENT_NAME = 'Axis';
+const CLASSNAME = 'redsift-axis';
+const DEFAULT_PROPS: Partial<AxisProps> = {
+  position: AxisPosition.bottom,
+  legendOffset: -32,
+  legendPosition: 'end',
+  tickPadding: 5,
+  tickRotation: 0,
+  tickSize: 5,
+  variant: AxisVariant.default,
+  x: 0,
+  y: 0,
+};
+
+const getAxisType = (position: AxisPosition) =>
+  [AxisPosition.top, AxisPosition.bottom].includes(position) ? 'x' : 'y';
+
+export const Axis: Comp<AxisProps, SVGGElement> = forwardRef((props, ref) => {
+  const {
+    className,
+    length,
+    legend,
+    legendOffset,
+    legendPosition,
+    position,
+    scale,
+    tickPadding,
+    tickRotation,
+    tickSize,
+    tickValues,
+    variant,
+    x,
+    y,
+    ...forwardedProps
+  } = props;
+  const axis = getAxisType(position!);
+
+  const axisRef = (ref || useRef<SVGGElement>()) as RefObject<SVGGElement>;
+
+  const animatedProps = useSpring({
+    ...config,
+    to: async (next: (props?: object) => Promise<void>) => {
+      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 = -90;
+      legendX = legendOffset!;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+        legendY = length!;
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendY = length! / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+      }
+    } else {
+      legendY = legendOffset!;
+      if (legendPosition === 'start') {
+        textAnchor = 'start';
+      } else if (legendPosition === 'middle') {
+        textAnchor = 'middle';
+        legendX = length! / 2;
+      } else if (legendPosition === 'end') {
+        textAnchor = 'end';
+        legendX = length!;
+      }
+    }
+
+    legendNode = (
+      <>
+        <text
+          transform={`translate(${legendX}, ${legendY}) rotate(${legendRotation})`}
+          textAnchor={textAnchor}
+          style={{
+            dominantBaseline: 'central',
+          }}
+        >
+          {legend}
+        </text>
+      </>
+    );
+  }
+
+  const { ticks, textAlign, textBaseline } = computeTicks({
+    axis,
+    scale,
+    ticksPosition: [AxisPosition.top, AxisPosition.left].includes(position!)
+      ? 'before'
+      : 'after',
+    tickValues,
+    tickSize: tickSize!,
+    tickPadding: tickPadding!,
+    tickRotation: tickRotation!,
+  });
+
+  const transition = useTransition<
+    typeof ticks[0],
+    { opacity: number; transform: string; textTransform: string }
+  >(ticks, {
+    ...config,
+    keys: (tick) => tick.key,
+    initial: (tick) => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${tick.y})`,
+      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`,
+    }),
+    from: (tick) => ({
+      opacity: 0,
+      transform: `translate(${tick.x},${tick.y})`,
+      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`,
+    }),
+    enter: (tick) => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${tick.y})`,
+      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`,
+    }),
+    update: (tick) => ({
+      opacity: 1,
+      transform: `translate(${tick.x},${tick.y})`,
+      textTransform: `translate(${tick.textX},${tick.textY}) rotate(${tickRotation})`,
+    }),
+    leave: {
+      opacity: 0,
+    },
+  });
+
+  return (
+    <StyledAxis
+      className={classNames(Axis.className, className)}
+      {...forwardedProps}
+      transform={`translate(${x},${y})`}
+      ref={axisRef}
+    >
+      {variant === AxisVariant.default ||
+      variant === AxisVariant.tick ||
+      variant === AxisVariant.lineTick ||
+      variant === AxisVariant.tickValue
+        ? transition((transitionProps, tick, _state, tickIndex) => {
+            return (
+              <animated.g
+                className={`${Axis.className}__tick`}
+                key={tickIndex}
+                transform={transitionProps.transform}
+                style={{ opacity: transitionProps.opacity }}
+              >
+                <line
+                  className={`${Axis.className}-tick__line`}
+                  x1={0}
+                  x2={tick.lineX}
+                  y1={0}
+                  y2={tick.lineY}
+                />
+                {variant === AxisVariant.default ||
+                variant === AxisVariant.tickValue ? (
+                  <animated.text
+                    dominantBaseline={textBaseline}
+                    textAnchor={textAlign}
+                    transform={transitionProps.textTransform}
+                  >
+                    {`${tick.value}`}
+                  </animated.text>
+                ) : null}
+              </animated.g>
+            );
+          })
+        : null}
+
+      {variant === AxisVariant.default ||
+      variant === AxisVariant.line ||
+      variant === AxisVariant.lineTick ? (
+        <animated.line
+          className={`${Axis.className}__line`}
+          x1={0}
+          x2={
+            config.immediate
+              ? axis === 'x'
+                ? length
+                : 0
+              : animatedProps.lineX2
+          }
+          y1={0}
+          y2={
+            config.immediate
+              ? axis === 'x'
+                ? 0
+                : length
+              : animatedProps.lineY2
+          }
+        />
+      ) : null}
+      {legendNode}
+    </StyledAxis>
+  );
+});
+Axis.className = CLASSNAME;
+Axis.defaultProps = DEFAULT_PROPS;
+Axis.displayName = COMPONENT_NAME;

package/src/components/Axis/computeTicks.ts

@@ -0,0 +1,132 @@
+import {
+  AnyScale,
+  Coordinates,
+  ScaleValue,
+  ScaleWithBandwidth,
+  TicksSpec,
+} from '../../types';
+
+const getScaleTicks = (scale: AnyScale, spec?: TicksSpec) => {
+  // 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);
+    }
+  }
+
+  // non linear scale default
+  return scale.domain();
+};
+
+const centerScale = (scale: ScaleWithBandwidth) => {
+  const bandwidth = scale.bandwidth();
+
+  if (bandwidth === 0) return scale;
+
+  let offset = bandwidth / 2;
+  if (scale.round()) {
+    offset = Math.round(offset);
+  }
+
+  return <T extends ScaleValue>(d: T) => (scale(d) ?? 0) + offset;
+};
+
+export const computeTicks = ({
+  axis,
+  scale,
+  ticksPosition,
+  tickValues,
+  tickSize,
+  tickPadding,
+  tickRotation,
+}: {
+  axis: 'x' | 'y';
+  scale: AnyScale;
+  ticksPosition?: 'after' | 'before';
+  tickValues?: TicksSpec;
+  tickSize: number;
+  tickPadding: number;
+  tickRotation: number;
+}) => {
+  const values = 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: (value: ScaleValue) => Coordinates;
+  let textAlign = 'middle';
+  let textBaseline = 'central';
+
+  if (axis === 'x') {
+    translate = (d) => ({ x: position(d) ?? 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) => ({ x: 0, y: position(d) ?? 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: ScaleValue) => ({
+    key: value instanceof Date ? `${value.valueOf()}` : `${value}`,
+    value,
+    ...translate(value),
+    ...line,
+    ...text,
+  }));
+
+  return {
+    ticks,
+    textAlign,
+    textBaseline,
+  };
+};

package/src/components/Axis/index.ts

@@ -0,0 +1,3 @@
+export * from './Axis';
+export * from './types';
+export * from './styles';

package/src/components/Axis/styles.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { StyledAxisProps } from './types';
+import { animated } from '@react-spring/web';
+
+/**
+ * Component style.
+ */
+export const StyledAxis = styled(animated.g)<StyledAxisProps>`
+  .redsift-axis__line,
+  .redsift-axis-tick__line {
+    fill: none;
+    stroke: var(--redsift-color-neutral-black);
+    shape-rendering: crispEdges;
+  }
+
+  text {
+    font-family: var(--redsift-typography-font-family-poppins);
+    font-size: 10px;
+    user-select: none;
+  }
+`;