## Feature Examples

### Data
- description: Pass the steps with `data` prop, an array of at least 2 items in funnel order. Each item has: - `value` is the raw number. Bar heights are relative to the first item, and each badge shows the next value as a percentage of the current one. - `label` is the short text under the value.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FunnelChart
    data={[
      { value: 1220, label: 'Visits' },
      { value: 800, label: 'Product views' },
      { value: 630, label: 'Cart' },
      { value: 410, label: 'Checkout' },
      { value: 200, label: 'Orders' },
    ]}
  />
</StorybookComponents.Stack>;
```

### Display value
- description: Replace the raw number under a bar with formatted text using `displayValue` of a data item, for example a compact number or a currency amount. The `value` is still used to size the bars and calculate the badges.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FunnelChart
    data={[
      { value: 12400, label: 'Visits', displayValue: '12.4K' },
      { value: 8100, label: 'Product views', displayValue: '8.1K' },
      { value: 3200, label: 'Cart', displayValue: '3.2K' },
      { value: 1900, label: 'Orders', displayValue: '1.9K' },
    ]}
  />
</StorybookComponents.Stack>;
```

### Badge tooltip
- description: Explain the change between two steps with a tooltip on the difference badge. Both props are callbacks that receive `currentIndex`, the formatted `difference` and the raw `differenceValue`: - `differenceBadgeTooltipContent` returns the tooltip content. The badge has no tooltip when it returns nothing. - `differenceBadgeTooltipProps` returns the tooltip props, for example `size` or `maxWidth`. Track when users open a tooltip with `onDifferenceBadgeTooltipShow` callback.
- example:
```jsx
() => {
  const data = [
    { value: 1220, label: 'Visits' },
    { value: 800, label: 'Product views' },
    { value: 630, label: 'Cart' },
    { value: 410, label: 'Checkout' },
    { value: 200, label: 'Orders' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <FunnelChart
        data={data}
        differenceBadgeTooltipContent={({ currentIndex, difference }) =>
          `${difference} moved from ${data[currentIndex].label.toLowerCase()} to ${data[
            currentIndex + 1
          ].label.toLowerCase()}`
        }
        differenceBadgeTooltipProps={() => ({ size: 'medium', maxWidth: 220 })}
      />
    </StorybookComponents.Stack>
  );
};
```

### Badge and step
- description: Draw attention to a specific step, for example the best conversion, with two callbacks. Both receive `currentIndex`, the formatted `difference` and the raw `differenceValue`, the ratio of the next value to the current one: - `differenceBadgeProps` returns the badge props: `skin` (`standard` by default, `general`, `success` or `dark`) and an optional `prefixIcon`. - `differenceStepSkin` returns the skin of the area between two bars, `standard` (default) or `success`.
- example:
```jsx
() => {
  const data = [
    { value: 1220, label: 'Visits' },
    { value: 800, label: 'Product views' },
    { value: 630, label: 'Cart' },
    { value: 410, label: 'Checkout' },
    { value: 200, label: 'Orders' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <FunnelChart
        data={data}
        differenceBadgeProps={({ differenceValue }) =>
          differenceValue >= 0.75
            ? { skin: 'success', prefixIcon: <Icons.ThumbsUpSmall /> }
            : { skin: 'general' }
        }
        differenceStepSkin={({ differenceValue }) =>
          differenceValue >= 0.75 ? 'success' : 'standard'
        }
      />
    </StorybookComponents.Stack>
  );
};
```

### Hidden badges
- description: Remove the percentage badges with `hideDifferenceBadge` prop, for example when the values alone are enough or the chart is too narrow for badges.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <FunnelChart
    data={[
      { value: 1220, label: 'Visits' },
      { value: 800, label: 'Product views' },
      { value: 630, label: 'Cart' },
      { value: 410, label: 'Checkout' },
      { value: 200, label: 'Orders' },
    ]}
    hideDifferenceBadge
  />
</StorybookComponents.Stack>;
```

### Full height
- description: By default the bars area is 150px tall. Add `fullHeight` prop to let it grow and fill the height of its container, for example a card that shares a row with taller widgets.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" height="320px">
  <FunnelChart
    data={[
      { value: 1220, label: 'Visits' },
      { value: 800, label: 'Product views' },
      { value: 630, label: 'Cart' },
      { value: 410, label: 'Checkout' },
      { value: 200, label: 'Orders' },
    ]}
    fullHeight
  />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Sales funnel
- description: Show the conversion of a purchase flow in a card. Highlight the best step with a success badge and explain each change in a tooltip.
- example:
```jsx
() => {
  const data = [
    { value: 1220, label: 'Visits' },
    { value: 800, label: 'Product views' },
    { value: 630, label: 'Cart' },
    { value: 410, label: 'Checkout' },
    { value: 200, label: 'Orders' },
  ];
  const isBestStep = ({ differenceValue }) => differenceValue >= 0.75;

  return (
    <Card>
      <Card.Header
        title="Sales funnel"
        subtitle="Last 30 days"
        suffix={
          <Button size="small" priority="secondary">
            View report
          </Button>
        }
      />
      <Card.Divider />
      <Card.Content>
        <FunnelChart
          data={data}
          differenceBadgeProps={(step) =>
            isBestStep(step)
              ? { skin: 'success', prefixIcon: <Icons.ThumbsUpSmall /> }
              : { skin: 'general' }
          }
          differenceStepSkin={(step) =>
            isBestStep(step) ? 'success' : 'standard'
          }
          differenceBadgeTooltipContent={({ currentIndex, difference }) =>
            `${difference} moved from ${data[currentIndex].label.toLowerCase()} to ${data[
              currentIndex + 1
            ].label.toLowerCase()}`
          }
        />
      </Card.Content>
    </Card>
  );
};
```