@wix/design-system/dist/types/FunnelChart/index.d.ts

@wix/design-system

import * as React from 'react';
import { TooltipCommonProps } from '../common';
import { FunnelBadgeCommonProps } from './FunnelBadge';

export interface FunnelChartItem {
  value?: number;
  label: string;
  displayValue?: string;
}

type percentageDifferenceCbData = {
  currentIndex: number;
  difference: string;
  differenceValue: number;
};

export interface FunnelChartProps {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */
  className?: string;
  /**
   * Array of Funnel Chart items
   * * `value` - Item's value.
   * * `label` - Short label under the value.
   * * `displayValue` - Item's value send by the user.
   */
  data: FunnelChartItem[];
  /** When provided, allows bars to take full height */
  fullHeight?: boolean;
  /** A flag that controls the appearance of the calculated percentage badge */
  hideDifferenceBadge?: boolean;
  /** When provided, changes badge skin.
   * @deprecated will be removed in the next major release.
   */
  differenceBadgeSkin?: 'standard' | 'dark';
  /** Returns the badge props by current index, badge's percentage and raw values
   * ##### Signature:
   * `({currentIndex: number, difference: string, differenceValue: number}) => FunnelBadgeCommonProps`
   */
  differenceBadgeProps?: ({
    currentIndex,
    difference,
    differenceValue,
  }: percentageDifferenceCbData) => FunnelBadgeCommonProps;
  /** Returns the step skin by current index, badge's percentage and raw values
   * ##### Signature:
   * `({currentIndex: number, difference: string, differenceValue: number}) => 'standard' | 'success'`
   */
  differenceStepSkin?: ({
    currentIndex,
    difference,
    differenceValue,
  }: percentageDifferenceCbData) => 'standard' | 'success';
  /** Returns the tooltip props by current index, badge's percentage and raw values
   * ##### Signature:
   * `({currentIndex: number, difference: string, differenceValue: number}) => React.ReactNode`
   */
  differenceBadgeTooltipContent?: ({
    currentIndex,
    difference,
    differenceValue,
  }: percentageDifferenceCbData) => React.ReactNode;
  /** Returns the tooltip props by current index, badge's percentage and raw values
   * ##### Signature:
   * `({currentIndex: number, difference: string, differenceValue: number}) => TooltipCommonProps`
   */
  differenceBadgeTooltipProps?: ({
    currentIndex,
    difference,
    differenceValue,
  }: percentageDifferenceCbData) => TooltipCommonProps;
  /** Callback on tooltip content show event by current index, badge's percentage and raw values
   * ##### Signature:
   * `({currentIndex: number, difference: string, differenceValue: number}) => void`
   */
  onDifferenceBadgeTooltipShow?: ({
    currentIndex,
    difference,
    differenceValue,
  }: percentageDifferenceCbData) => void;
}

export default class FunnelChart extends React.PureComponent<FunnelChartProps> {}