## Feature Examples

### Footer
- description: Add additional information to a card with `footer`.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={169}
  onChartHover={() => console.log('on chart hover')}
  title="Sessions"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
  value="1,9K"
  footer={
    <div>
      <div>
        <Text>This is footer text </Text>
      </div>
      <div>
        <Button size="tiny">Click Here </Button>
      </div>
    </div>
  }
/>;
```

### Trend
- description: The `trend` indicates the change of the value in percentage. It has 2 modes: - **Positive** - colored green with arrow upwards - **Negative** - colored red with arrow downwards. If there's no change in value, trend won't be displayed.
- example:
```jsx
<div>
  <div>
    <AnalyticsSummaryCard
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      trend={12}
      isTrendVisible={true}
      title="Sessions"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
  <br />
  <br />
  <div>
    <AnalyticsSummaryCard
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      trend={-12}
      isTrendVisible={true}
      title="Sessions"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
</div>;
```

### Action Button
- description: Summary card can have action button inside to assist with any action needed, since it's a `node`.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={169}
  ctaButton={
    <IconButton size="tiny" priority="secondary">
      <Icons.Refresh />
    </IconButton>
  }
  onCTAClick={() => console.log('refresh click')}
  onChartHover={() => console.log('on chart hover')}
  title="Sessions"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
  value="1,9K"
/>;
```

### Clickable Card
- description: Control is a card is clickable with `onClick`.
- example:
```jsx
<div>
  <div>
    <AnalyticsSummaryCard
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      onClick={() => console.log('general click')}
      title="Clickable card"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
  <br />
  <br />
  <div>
    <AnalyticsSummaryCard
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      title="Not interactive card (default)"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
</div>;
```

### Loader
- description: Card supports loading state. `<Loader/>` will replace the action button when it's actively loading. If the card is clickable it won't be actionable as long as the loader is active.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={169}
  onChartHover={() => console.log('on chart hover')}
  title="Sessions"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
  isLoading={true}
  value="1,9K"
/>;
```

### Sparkline Width
- description: Control the sparkline width by pixels with `chartWidth` prop.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={69}
  title="Sessions"
  value="1,9K"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
/>;
```

### Border
- description: Control the appearance of the component using the `border` prop. Use this property to emphasize the separation between items.
- example:
```jsx
<div>
  <div>
    <AnalyticsSummaryCard
      border
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      trend={12}
      isTrendVisible={true}
      title="With border"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
  <br />
  <br />
  <div>
    <AnalyticsSummaryCard
      chartColorHex="#3899ec"
      chartData={[
        {
          label: new Date('2020-09-03T21:00:00.000Z'),
          value: 100,
        },
        {
          label: new Date('2020-09-04T21:00:00.000Z'),
          value: 17,
        },
        {
          label: new Date('2020-09-05T21:00:00.000Z'),
          value: 18,
        },
      ]}
      chartWidth={169}
      onChartHover={() => console.log('on chart hover')}
      trend={-12}
      isTrendVisible={true}
      title="Without border"
      getChartTooltipContent={(index) => (
        <span style={{ color: '#ffffff' }}>{index}</span>
      )}
      value="1,9K"
    />
  </div>
</div>;
```

### Horizontal padding
- description: Control the padding of the card with `horizontalPadding` prop. It supports three sizes: - `large` (default) - `medium` - `small`
- example:
```jsx
<StorybookComponents.Stack flexDirection="column" gap="40px">
  <AnalyticsSummaryCard
    horizontalPadding="large"
    chartColorHex="#3899ec"
    chartData={[
      {
        label: new Date('2020-09-03T21:00:00.000Z'),
        value: 100,
      },
      {
        label: new Date('2020-09-04T21:00:00.000Z'),
        value: 17,
      },
      {
        label: new Date('2020-09-05T21:00:00.000Z'),
        value: 18,
      },
    ]}
    chartWidth={169}
    ctaButton={
      <IconButton size="tiny" priority="secondary">
        <Icons.Refresh />
      </IconButton>
    }
    onCTAClick={() => console.log('refresh click')}
    onChartHover={() => console.log('on chart hover')}
    title="Horizontal padding"
    getChartTooltipContent={(index) => (
      <span style={{ color: '#ffffff' }}>{index}</span>
    )}
    value="Large size"
  />
  <AnalyticsSummaryCard
    horizontalPadding="medium"
    chartColorHex="#3899ec"
    chartData={[
      {
        label: new Date('2020-09-03T21:00:00.000Z'),
        value: 100,
      },
      {
        label: new Date('2020-09-04T21:00:00.000Z'),
        value: 17,
      },
      {
        label: new Date('2020-09-05T21:00:00.000Z'),
        value: 18,
      },
    ]}
    chartWidth={169}
    ctaButton={
      <IconButton size="tiny" priority="secondary">
        <Icons.Refresh />
      </IconButton>
    }
    onCTAClick={() => console.log('refresh click')}
    onChartHover={() => console.log('on chart hover')}
    title="Horizontal padding"
    getChartTooltipContent={(index) => (
      <span style={{ color: '#ffffff' }}>{index}</span>
    )}
    value="Medium size"
  />
  <AnalyticsSummaryCard
    horizontalPadding="small"
    chartColorHex="#3899ec"
    chartData={[
      {
        label: new Date('2020-09-03T21:00:00.000Z'),
        value: 100,
      },
      {
        label: new Date('2020-09-04T21:00:00.000Z'),
        value: 17,
      },
      {
        label: new Date('2020-09-05T21:00:00.000Z'),
        value: 18,
      },
    ]}
    chartWidth={169}
    ctaButton={
      <IconButton size="tiny" priority="secondary">
        <Icons.Refresh />
      </IconButton>
    }
    onCTAClick={() => console.log('refresh click')}
    onChartHover={() => console.log('on chart hover')}
    title="Horizontal padding"
    getChartTooltipContent={(index) => (
      <span style={{ color: '#ffffff' }}>{index}</span>
    )}
    value="Small size"
  />
</StorybookComponents.Stack>;
```

## Developer Examples

### Tooltip On Title
- description: If needed, the title can have `<Tooltip/>` to better explain the context.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={169}
  title="Sessions"
  value="1,9K"
  titleTooltip="Site Sessions in your site. A session is a set of interactions made by visitors"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
/>;
```

### Tooltip On Value
- description: When value appears as abbreviated number, `<Tooltip/>` will appear on hover.
- example:
```jsx
<AnalyticsSummaryCard
  chartColorHex="#3899ec"
  chartData={[
    {
      label: new Date('2020-09-03T21:00:00.000Z'),
      value: 100,
    },
    {
      label: new Date('2020-09-04T21:00:00.000Z'),
      value: 17,
    },
    {
      label: new Date('2020-09-05T21:00:00.000Z'),
      value: 18,
    },
  ]}
  chartWidth={169}
  title="Sessions"
  value="1,9K"
  valueTooltip="1,951"
  getChartTooltipContent={(index) => (
    <span style={{ color: '#ffffff' }}>{index}</span>
  )}
/>;
```