@redsift/charts 9.2.3 → 9.2.4

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-poppins);
-    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,71 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import { ChartContainer } from './ChartContainer';
-
-jest.mock('@redsift/design-system', () => ({
-  ...jest.requireActual('@redsift/design-system'),
-  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,92 +0,0 @@
-import React, { ComponentProps, forwardRef, RefObject } from 'react';
-import classNames from 'classnames';
-
-import { useLocalizedStringFormatter } from '@react-aria/i18n';
-import intlMessages from './intl';
-
-import { Button, Comp, Flexbox, Heading, useId, 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,
-    description,
-    chartProps,
-    chartRef,
-    children,
-    className,
-    id: propsId,
-    title,
-    onReset,
-    ...forwardedProps
-  } = props;
-  const [_id] = useId();
-  const id = propsId ?? _id;
-
-  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}
-
-      <Flexbox flexDirection="column">
-        {children ? (
-          <div
-            {...chartProps}
-            ref={chartRef}
-            className={`${ChartContainer.className}__content`}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
-          >
-            {children}
-          </div>
-        ) : null}
-        {description ? (
-          <StyledChartContainerCaption className={`${ChartContainer.className}__description`}>
-            {description}
-          </StyledChartContainerCaption>
-        ) : null}
-      </Flexbox>
-    </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,41 +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-poppins);
-    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);
-  margin: 8px;
-`;

package/src/components/ChartContainer/types.ts

@@ -1,26 +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>;
-  /** Description. */
-  description?: string;
-  /** 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,102 +0,0 @@
-import React, { forwardRef, KeyboardEventHandler, RefObject } from 'react';
-import classNames from 'classnames';
-
-import { Comp, Number, Text, useId } 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] = useId();
-  const id = propsId ?? _id;
-
-  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;
-};