@redsift/charts 8.0.1 → 8.0.3

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

@@ -1,297 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

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

package/src/components/Axis/styles.ts

@@ -1,21 +0,0 @@
-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-source-code-pro);
-    font-size: 10px;
-    user-select: none;
-  }
-`;