@redsift/charts 8.0.1 → 8.0.2

package/src/components/BarChart/index.ts

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

package/src/components/BarChart/styles.ts

@@ -1,35 +0,0 @@
-import styled from 'styled-components';
-import { StyledBarChartProps } from './types';
-import { ChartContainer } from '../ChartContainer';
-
-/**
- * Component style.
- */
-export const StyledBarChart = styled(ChartContainer)<StyledBarChartProps>``;
-
-export const StyledBarChartEmptyText = styled.div<{
-  $maxWidth: number;
-  $textSize: number;
-}>`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-
-  > * {
-    max-width: ${({ $maxWidth }) => $maxWidth}px;
-  }
-
-  > span {
-    font-family: var(--redsift-typography-font-family-raleway);
-    color: var(--redsift-color-neutral-black);
-    font-size: ${({ $textSize }) => $textSize}px;
-    line-height: ${({ $textSize }) => $textSize}px;
-  }
-`;

package/src/components/BarChart/types.ts

@@ -1,58 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import {
-  ChartDimensions,
-  ChartSize,
-  ChartTheme,
-  BarDatum,
-  TooltipVariant,
-  CategoryData,
-} from '../../types';
-import { ChartContainerProps } from '../ChartContainer';
-import { BarProps } from '../Bar';
-
-interface LocaleText {
-  emptyChartText: string;
-}
-
-export type BarChartDimensions = ChartDimensions & {
-  fontSize: number;
-};
-
-/**
- * Component props.
- */
-export interface BarChartProps extends ChartContainerProps {
-  /** Whether the x axis labels are rotated or not. */
-  areXLabelsRotated?: boolean;
-  /** Native HTML props to forward to each bar. */
-  barProps?: Omit<
-    ComponentProps<'g'>,
-    'onClick' | 'orientation' | 'ref' | 'scale' | 'width'
-  >;
-  /** Number of categories to use, the rest being put into a new category called "Others". */
-  caping?: number;
-  /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
-  data?: CategoryData;
-  /** Component to use if the chart is empty (replacing the default one). */
-  emptyComponent?: ReactNode;
-  /** Method to determine whether a slice is selected or not. */
-  isBarSelected?: (datum: BarDatum) => void;
-  /** Method to override the data labels. */
-  labelDecorator?: (datum: BarDatum) => string;
-  /** Labels and texts. */
-  localeText?: LocaleText;
-  /** Method to be called on a click on a bar. */
-  onBarClick?: (datum: BarDatum) => void;
-  /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
-  others?: boolean | string;
-  /** BarChart size. */
-  size?: ChartSize | BarChartDimensions;
-  /** Bar role. Used to indicate that bars are to be considered buttons or links. If an onClick is provided, the bars will have the role `button` unless specifically set to `link` with this prop. */
-  barRole?: BarProps['role'];
-  /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
-  theme?: ChartTheme;
-  /** Tooltip variant. */
-  tooltipVariant?: TooltipVariant;
-}
-
-export type StyledBarChartProps = BarChartProps & {};

package/src/components/BarChart/utils.ts

@@ -1,20 +0,0 @@
-import { ChartSize } from '../../types';
-import { BarChartDimensions } from './types';
-
-export const sizeToDimension = (
-  size: ChartSize | BarChartDimensions
-): BarChartDimensions => {
-  if (typeof size !== 'string') {
-    return size;
-  }
-
-  switch (size) {
-    case ChartSize.small:
-      return { width: 300, height: 200, fontSize: 30 };
-    case ChartSize.large:
-      return { width: 500, height: 400, fontSize: 38 };
-    case ChartSize.medium:
-    default:
-      return { width: 400, height: 300, fontSize: 34 };
-  }
-};

package/src/components/ChartContainer/ChartContainer.stories.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-// @ts-ignore
-import type { StoryObj } from '@storybook/react';
-
-import { monochrome } from '../../scheme';
-
-import { ChartContainer, ChartContainerProps } from '.';
-import { Heading } from '@redsift/design-system';
-
-const meta = {
-  title: 'Charts/Core/Chart Container',
-  component: ChartContainer,
-};
-
-export default meta;
-type Story = StoryObj<ChartContainerProps>;
-
-const Svg = (
-  <svg width="100" height="100">
-    <circle cx={50} cy={50} r={40} fill={monochrome} />
-  </svg>
-);
-
-export const Empty: Story = {
-  args: {
-    'aria-label': 'Chart',
-    width: '500px',
-  },
-};
-
-export const Simple: Story = {
-  args: {
-    'aria-label': 'Chart',
-    children: Svg,
-    width: '500px',
-  },
-};
-
-export const WithTitle: Story = {
-  args: {
-    children: Svg,
-    title: 'Title',
-    width: '500px',
-  },
-};
-
-export const WithCustomTitle: Story = {
-  args: {
-    children: Svg,
-    title: <Heading as="h2">Title</Heading>,
-    width: '500px',
-  },
-};
-
-export const WithCaption: Story = {
-  args: {
-    children: Svg,
-    title: 'Title',
-    caption:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus accumsan massa. Morbi suscipit erat diam, sit amet euismod dolor lacinia et.',
-    width: '500px',
-  },
-};
-
-export const WithResetButton: Story = {
-  args: {
-    'aria-label': 'Chart',
-    children: Svg,
-    onReset: () => console.log('reset'),
-    width: '500px',
-  },
-};
-
-export const WithTitleAndResetButton: Story = {
-  args: {
-    children: Svg,
-    onReset: () => console.log('reset'),
-    title: 'Title',
-    width: '500px',
-  },
-};

package/src/components/ChartContainer/ChartContainer.test.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ChartContainer } from './ChartContainer';
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useId: () => '123',
-}));
-
-describe('ChartContainer', () => {
-  it('supports custom className', () => {
-    const tree = render(
-      <ChartContainer aria-label="Chart" className="test">
-        Chart content
-      </ChartContainer>
-    );
-    const component = tree.asFragment().firstChild;
-
-    expect(component).toHaveAttribute('class', expect.stringContaining('test'));
-  });
-
-  it('supports custom id', () => {
-    const tree = render(
-      <ChartContainer id="456" aria-label="Chart">
-        Chart content
-      </ChartContainer>
-    );
-    const component = tree.asFragment().firstChild;
-    expect(component).toHaveAttribute('id', '456');
-  });
-
-  it('supports custom data attributes', () => {
-    const tree = render(
-      <ChartContainer aria-label="Chart" data-testid="test">
-        Chart content
-      </ChartContainer>
-    );
-    const component = tree.asFragment().firstChild;
-    expect(component).toHaveAttribute('data-testid', 'test');
-  });
-
-  it('can be labelled using a title', () => {
-    const { getByLabelText } = render(
-      <ChartContainer title="Title">Chart content</ChartContainer>
-    );
-    const component = getByLabelText('Title');
-    expect(component).toHaveAttribute('aria-labelledby', 'id123__title');
-  });
-
-  it('can be labelled using an aria-label', () => {
-    const { getByLabelText } = render(
-      <ChartContainer aria-label="Label">Chart content</ChartContainer>
-    );
-    const component = getByLabelText('Label');
-    expect(component).toHaveAttribute('aria-label', 'Label');
-  });
-
-  it('can be labelled using an aria-labelledby', () => {
-    const { getByLabelText } = render(
-      <>
-        <h1 id="123">Label</h1>
-        <ChartContainer aria-labelledby="123">Chart content</ChartContainer>
-      </>
-    );
-    const component = getByLabelText('Label');
-    expect(component).toHaveAttribute('aria-labelledby', '123');
-  });
-
-  it('warns if there is no label for accessibility', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-    render(<ChartContainer>Chart content</ChartContainer>);
-    expect(spy).toHaveBeenCalled();
-  });
-});

package/src/components/ChartContainer/ChartContainer.tsx

@@ -1,116 +0,0 @@
-import React, { ComponentProps, forwardRef, RefObject, useId } from 'react';
-import classNames from 'classnames';
-
-import { useLocalizedStringFormatter } from 'react-aria';
-import intlMessages from './intl';
-
-import {
-  Button,
-  Comp,
-  Heading,
-  warnIfNoAccessibleLabelFound,
-} from '@redsift/design-system';
-
-import { ChartContainerProps } from './types';
-import {
-  StyledChartContainer,
-  StyledChartContainerCaption,
-  StyledChartContainerTitle,
-} from './styles';
-
-const COMPONENT_NAME = 'ChartContainer';
-const CLASSNAME = 'redsift-chart-container';
-const DEFAULT_PROPS: Partial<ChartContainerProps> = {};
-
-export const ChartContainer: Comp<ChartContainerProps, HTMLDivElement> =
-  forwardRef((props, ref) => {
-    const {
-      'aria-label': propsAriaLabel,
-      'aria-labelledby': propsAriaLabelledby,
-      caption,
-      chartProps,
-      chartRef,
-      children,
-      className,
-      id: propsId,
-      title,
-      onReset,
-      ...forwardedProps
-    } = props;
-    const id = propsId ?? useId();
-
-    warnIfNoAccessibleLabelFound(
-      props as ComponentProps<keyof JSX.IntrinsicElements>,
-      [title]
-    );
-
-    const stringFormatter = useLocalizedStringFormatter(intlMessages);
-
-    const ariaLabel = propsAriaLabel
-      ? propsAriaLabel
-      : propsAriaLabelledby || title
-      ? undefined
-      : undefined;
-    const ariaLabelledby = propsAriaLabelledby
-      ? propsAriaLabelledby
-      : title
-      ? `id${id}__title`
-      : undefined;
-
-    return (
-      <StyledChartContainer
-        {...forwardedProps}
-        ref={ref as RefObject<HTMLDivElement>}
-        className={classNames(ChartContainer.className, className)}
-        id={id}
-      >
-        {title || onReset ? (
-          <StyledChartContainerTitle
-            alignItems="center"
-            justifyContent="space-between"
-            className={`${ChartContainer.className}__title`}
-            id={`id${id}__title`}
-          >
-            {typeof title === 'string' ? (
-              <Heading as="h3">{title}</Heading>
-            ) : title ? (
-              title
-            ) : null}
-
-            {onReset ? (
-              <Button
-                className={`${ChartContainer.className}-title__reset-button`}
-                color="question"
-                variant="unstyled"
-                onClick={onReset}
-              >
-                {stringFormatter.format('reset')}
-              </Button>
-            ) : null}
-          </StyledChartContainerTitle>
-        ) : null}
-
-        {children ? (
-          <div
-            {...chartProps}
-            ref={chartRef}
-            className={`${ChartContainer.className}__content`}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
-          >
-            {children}
-          </div>
-        ) : null}
-        {caption ? (
-          <StyledChartContainerCaption
-            className={`${ChartContainer.className}__caption`}
-          >
-            {caption}
-          </StyledChartContainerCaption>
-        ) : null}
-      </StyledChartContainer>
-    );
-  });
-ChartContainer.className = CLASSNAME;
-ChartContainer.defaultProps = DEFAULT_PROPS;
-ChartContainer.displayName = COMPONENT_NAME;

package/src/components/ChartContainer/index.ts

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

package/src/components/ChartContainer/intl/en-US.json

@@ -1,3 +0,0 @@
-{
-  "reset": "Reset"
-}

package/src/components/ChartContainer/intl/fr-FR.json

@@ -1,3 +0,0 @@
-{
-  "reset": "Réinitialiser"
-}

package/src/components/ChartContainer/intl/index.ts

@@ -1,7 +0,0 @@
-import enUS from './en-US.json';
-import frFR from './fr-FR.json';
-
-export default {
-  'en-US': enUS,
-  'fr-FR': frFR,
-};

package/src/components/ChartContainer/styles.ts

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-import { Flexbox, baseStyling, focusRing } from '@redsift/design-system';
-import { StyledChartContainerProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledChartContainer = styled.div<StyledChartContainerProps>`
-  ${baseStyling}
-
-  margin: 8px;
-  padding: 8px;
-  color: var(--redsift-color-neutral-black);
-
-  .redsift-chart-container__content {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-family: var(--redsift-typography-font-family-source-code-pro);
-    font-size: 11px;
-    justify-content: center;
-    margin: 8px 0;
-    position: relative;
-
-    ${focusRing}
-  }
-
-  svg {
-    display: block;
-  }
-`;
-
-export const StyledChartContainerTitle = styled(
-  Flexbox
-)<StyledChartContainerProps>``;
-
-export const StyledChartContainerCaption = styled.p<StyledChartContainerProps>`
-  font-family: var(--redsift-typography-caption-font-family);
-  font-size: var(--redsift-typography-caption-font-size);
-  font-weight: var(--redsift-typography-caption-font-weight);
-  line-height: var(--redsift-typography-caption-line-height);
-`;

package/src/components/ChartContainer/types.ts

@@ -1,24 +0,0 @@
-import { StylingProps } from '@redsift/design-system';
-import { ComponentProps, ReactElement, RefObject } from 'react';
-
-/**
- * Component props.
- */
-export interface ChartContainerProps
-  extends Omit<ComponentProps<'div'>, 'title'>,
-    StylingProps {
-  /** Caption. */
-  caption?: string;
-  /** Native HTML props to pass to the chart. */
-  chartProps?: ComponentProps<'div'>;
-  /** Ref to the chart. */
-  chartRef?: RefObject<HTMLDivElement>;
-  /** Id. */
-  id?: string;
-  /** Method called when the Reset button is displayed (defines whether or not the button should be displayed). */
-  onReset?: () => void;
-  /** Title. */
-  title?: string | ReactElement;
-}
-
-export type StyledChartContainerProps = ChartContainerProps & {};

package/src/components/DataPoint/DataPoint.tsx

@@ -1,119 +0,0 @@
-import React, {
-  forwardRef,
-  KeyboardEventHandler,
-  RefObject,
-  useId,
-} from 'react';
-import classNames from 'classnames';
-
-import { Comp, Number, Text } from '@redsift/design-system';
-import { Tooltip } from '@redsift/popovers';
-
-import { DataPointProps } from './types';
-import { StyledDataPoint } from './styles';
-import { TooltipVariant } from '../../types';
-
-export const DataPoint: Comp<DataPointProps<any>, SVGGElement> = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      data,
-      id: propsId,
-      index,
-      isSelected: propsIsSelected,
-      labelDecorator,
-      onClick,
-      role,
-      tooltipVariant,
-      ...forwardedProps
-    } = props;
-    const id = propsId ?? useId();
-
-    const text = labelDecorator ? labelDecorator(data) : data.data.key;
-    const hasText = text && tooltipVariant !== TooltipVariant.none;
-    const tooltipValue =
-      tooltipVariant === TooltipVariant.value
-        ? data.data.value
-        : tooltipVariant === TooltipVariant.percent && data.data.percent
-        ? data.data.percent
-        : undefined;
-    const hasValue =
-      tooltipValue &&
-      [TooltipVariant.value, TooltipVariant.percent].includes(tooltipVariant!);
-    const showTooltip =
-      tooltipVariant !== TooltipVariant.none && (hasText || hasValue);
-
-    const isEmpty = data.data.value === 0;
-
-    const isSelectable = role === 'option';
-    const isSelected = isSelectable && propsIsSelected === true;
-    const isDeselected = isSelectable && propsIsSelected === false;
-
-    const onKeyDown: KeyboardEventHandler<SVGElement> = (event) => {
-      if (onClick) {
-        event.stopPropagation();
-
-        if (event.code === 'Enter' || event.code === 'Space') {
-          event.preventDefault();
-          onClick(data);
-        }
-      }
-    };
-
-    const DataPointComponent = (
-      <StyledDataPoint
-        tabIndex={onClick ? 0 : undefined}
-        {...forwardedProps}
-        className={classNames(className, `_${index}`, {
-          selected: isSelected,
-          deselected: isDeselected,
-        })}
-        ref={ref as RefObject<SVGGElement>}
-        aria-label={
-          showTooltip && !isEmpty ? `${text}: ${data.data.value}` : undefined
-        }
-        aria-labelledby={!showTooltip && !isEmpty ? `${id}-title` : undefined}
-        aria-selected={isSelected ? true : isDeselected ? false : undefined}
-        id={id}
-        onClick={onClick ? () => onClick(data) : undefined}
-        onKeyDown={onClick ? (e) => onKeyDown(e) : undefined}
-        role={role ? role : onClick ? 'button' : undefined}
-        $clickable={Boolean(onClick)}
-      >
-        {children}
-        {!showTooltip && !isEmpty ? (
-          <title id={`${id}-title`}>{`${text}: ${data.data.value}`}</title>
-        ) : null}
-      </StyledDataPoint>
-    );
-
-    if (showTooltip) {
-      return (
-        <Tooltip placement="right">
-          <Tooltip.Trigger>{DataPointComponent}</Tooltip.Trigger>
-          <Tooltip.Content>
-            <Text variant="caption">
-              {text}
-              {hasText && hasValue ? ' - ' : null}
-              {hasValue ? (
-                <Number
-                  value={tooltipValue!}
-                  type={
-                    tooltipVariant === TooltipVariant.percent
-                      ? 'percent'
-                      : 'decimal'
-                  }
-                  variant="caption"
-                  maximumFractionDigits={2}
-                />
-              ) : null}
-            </Text>
-          </Tooltip.Content>
-        </Tooltip>
-      );
-    }
-
-    return DataPointComponent;
-  }
-);

package/src/components/DataPoint/index.ts

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

package/src/components/DataPoint/styles.ts

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import { animated } from '@react-spring/web';
-import { StyledDataPointProps } from './types';
-
-/**
- * Component style.
- */
-export const StyledDataPoint = styled(animated.g)<StyledDataPointProps>``;

package/src/components/DataPoint/types.ts

@@ -1,33 +0,0 @@
-import { ComponentProps } from 'react';
-import { TooltipVariant } from '../../types';
-
-/**
- * Component props.
- */
-export interface DataPointProps<T>
-  extends Omit<ComponentProps<'g'>, 'onClick' | 'scale'> {
-  /** Color of the DataPoint. */
-  color?: string;
-  /** Data. Also state to which the component should end the animation, if any. */
-  data: T;
-  /** Id. Used for accessibility. */
-  id?: string;
-  /** Position in the list of siblings. Used for placement and selection. */
-  index?: number;
-  /** Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected. */
-  isSelected?: boolean;
-  /** Method modifying the label before displaying it. */
-  labelDecorator?: (data: T) => string;
-  /** Method called when a click or keydown occurs on the component. */
-  onClick?: (data: T) => void;
-  /** State from which the component should start the animation, if any. */
-  previousData?: T;
-  /** Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable. */
-  role?: 'button' | 'link' | 'option';
-  /** Tooltip variant. */
-  tooltipVariant?: TooltipVariant;
-}
-
-export type StyledDataPointProps = Omit<DataPointProps<any>, 'data'> & {
-  $clickable: boolean;
-};