Statistic

Statistic component is used to display a statistic with a title, a trend, a graph, and a footer.

Default

Views 24 hours

1,234,123

Trend title

Vue

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
</script>
<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="Trend title"> 1,234,123 </HLStatistic>
</template>

With Tooltip

Views 24 hours

1,234,123

Trend title

Vue

<template>
  <HLStatistic
    title="Views 24 hours"
    id="statistic"
    trendTitle="Trend title"
    titleTooltipContent="This is a tooltip content"
    :titleTooltipConfig="{
      placement: 'top',
    }"
  >
    1,234,123
  </HLStatistic>
</template>

Graph Slot

Views 24 hours

1,234,123

100%

trend title

Vue

<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="trend title" showGraph>
    1,234,123
    <template #trend>
      <HLTag id="example-tag" size="lg" color="green" round>
        <template #icon>
          <TriangleIcon />
        </template>
        100%
      </HLTag>
    </template>
    <template #graph>
      <PositiveTrend />
    </template>
  </HLStatistic>
</template>

With Options

Views 24 hours

1,234,123

Trend Slot

Views 24 hours

1,234,123

100%

trend title

Vue

<script setup lang="ts">
  import { HLStatistic } from '@platform-ui/highrise'
  import { TriangleIcon, TrendUp01Icon } from '@gohighlevel/ghl-icons/24/outline'
  const options = [
    {
      label: 'Marina Bay Sands',
      key: 'Marina Bay Sands',
      disabled: true,
    },
    {
      label: "Brown's Hotel, London",
      key: "Brown's Hotel, London",
    },
    {
      label: 'Atlantis Bahamas, Nassau',
      key: 'Atlantis Bahamas, Nassau',
    },
    {
      label: 'The Beverly Hills Hotel, Los Angeles',
      key: 'The Beverly Hills Hotel, Los Angeles',
    },
  ]
</script>
<template>
  <HLStatistic title="Views 24 hours" id="statistic" trendTitle="trend title" showGraph> 1,234,123 </HLStatistic>
</template>

With Footer

Views 24 hours

1,234,123

Trend title

100%

Vue

<HLStatistic title="Views 24 hours" id="statistic" trendTitle="Trend title" type="success">
  1,234,123
  <template #icon>
    <TrendUp01Icon />
  </template>
  <template #trend>
    <HLTag id="example-tag" size="lg" color="green" round>
      <template #icon>
        <TriangleIcon />
      </template>
      100%
    </HLTag>
  </template>
  <template #footer>
    <HLSectionFooter :horizontalPadding="false" id="footer-5" :divider="true" :bottomPadding="false">
      <HLSectionFooterItem justify="end">
        <HLButton size="xs" id="btn-5" variant="text" color="blue" link>Learn more</HLButton>
      </HLSectionFooterItem>
    </HLSectionFooter>
  </template>
</HLStatistic>

Props

Name	Type	Default	Description
id *	string	-	The id of the statistic
title	string	''	The title of the statistic
type	'primary' | 'success' | 'warning' | 'error' | 'neutral'	primary	The type of the statistic
trendTitle	string	''	The title of the trend
showGraph	boolean	false	Whether to show the graph
options	array	-	The options of the statistic
icon	() => VNode	-	The icon of the statistic
titleTooltipContent	string	''	The content of the tooltip
titleTooltipConfig	tooltipProps	-	The config of the tooltip
iconStroke	string	-	The color of the icon, this will override the type color
iconBgColor	string	-	The background color of the icon, this will override the type color

Emits

Name	Params	Description
@select	(key: string, option: any) => void	The event emitted when the option is selected, from the dropdown component

Slots

Name	Params	Description
default	()	The default content slot
icon	()	The icon slot for button
trend	()	The trend slot
graph	()	The graph slot
footer	()	The footer slot
titleAddon	()	The title addon slot