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

@wix/design-system

import * as React from 'react';

export interface StatisticsWidgetProps {
  /** Applied as data-hook HTML attribute that can be used to create driver in testing */
  dataHook?: string;
  /** Displayed value size (default: large) */
  size?: 'large' | 'tiny';
  /** Alignment of inner items (default: center) */
  alignItems?: 'center' | 'start' | 'end';
  /**
   * Array of statistic items
   *  * `value` - Value of the statistic. Displayed as big text in the first row.
   *  * `valueInShort` - Short version of value. Will be applied when there is no space for long value. If not specified, part of the value will be hidden with ellipsis
   *  * `description` - Description of the statistic. Displayed in the second row.
   *  * `descriptionInfo` - More info about the description. Displayed as an info icon with this text inside a tooltip
   *  * `percentage` - Change in percents. Positive number - arrow up, negative - arrow down.
   *  * `invertedPercentage` - When set to true renders positive percentage in red and negative in green.
   *  * `onClick` - Callback to be executed on click (also on Enter/Space key press)
   *  * `isLoading` - Shows a loader instead of value.
   *  * `children` - Node to render on bottom of section.
   */
  items?: StatisticsWidgetItem[];
  /** Show loader instead of values for all statistic items (default: undefined) */
  isLoading?: boolean;
}

export default class StatisticsWidget extends React.PureComponent<StatisticsWidgetProps> {}

export type StatisticsWidgetItem = {
  value: string;
  valueInShort?: string;
  description?: string;
  descriptionInfo?: string;
  percentage?: number;
  invertedPercentage?: boolean;
  onClick?: (
    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
  ) => void;
  children?: React.ReactNode;
  /** Show loader instead of values for all statistic items (default: undefined) */
  isLoading?: boolean;
};