<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';

   const favorite = "svg-path";
</script>

<Statistic>
   <Statistic.Icon slot="icon" data={favorite} />
   <Statistic.Title slot="title">Total Likes</Statistic.Title>
   <Statistic.Value slot="value">
      {formatNumber(25660000, {
         style: 'decimal',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
   <Statistic.Comparison slot="comparison">
      <Statistic.Comparison.Value slot="value">
         Last Year: {formatNumber(27660000, {
            style: 'decimal',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })}
      </Statistic.Comparison.Value>
      <Statistic.Comparison.Trend slot="trend" trend="down">
         {formatNumber(-2000000, {
            style: 'decimal',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })} ({formatNumber(-0.0723, {
            style: 'percent'
         })})
      </Statistic.Comparison.Trend>
   </Statistic.Comparison>
</Statistic>

<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';

   const chart_box = "svg-path";
   const home = "svg-path";
</script>

<Statistic>
   <Statistic.Icon slot="icon" data={chart_box} />
   <Statistic.Title slot="title">Page Views</Statistic.Title>
   <Statistic.Value slot="value">
      {formatNumber(2660000, {
         style: 'currency',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
   <Statistic.Comparison slot="comparison">
      <Statistic.Comparison.Value slot="value">
         Last Year: {formatNumber(2580000, {
            style: 'currency',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })}
      </Statistic.Comparison.Value>
      <Statistic.Comparison.Trend trend="up" slot="trend">
         <Statistic.Comparison.Trend.Icon slot="icon" data={home} />
         {formatNumber(80000, {
            style: 'currency',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })} ({formatNumber(0.031, {
            style: 'percent'
         })})
      </Statistic.Comparison.Trend>
   </Statistic.Comparison>
</Statistic>

<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';

   const chart_box = "svg-path";
</script>

<Statistic>
   <Statistic.Icon slot="icon" data={chart_box} />
   <Statistic.Title slot="title">New Users</Statistic.Title>
   <Statistic.Value slot="value">
      {formatNumber(82001, {
         style: 'decimal',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
   <Statistic.Goal progress={82.001} />
</Statistic>

<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';

   const favorite = "svg-path";
</script>

<Statistic>
   <Statistic.Icon class="text-primary" slot="icon" data={favorite} />
   <Statistic.Title slot="title">Total Likes</Statistic.Title>
   <Statistic.Value class="text-primary" slot="value">
      {formatNumber(25660000, {
         style: 'decimal',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
</Statistic>

<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';

   const chart_box = "svg-path";
</script>

<Statistic class="bg-gradient-to-r from-cyan-500 to-blue-500">
   <Statistic.Icon class="text-white" slot="icon" data={chart_box} />
   <Statistic.Title class="text-white" slot="title">Page Views</Statistic.Title>
   <Statistic.Value class="text-white" slot="value">
      {formatNumber(2660000, {
         style: 'currency',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
   <Statistic.Comparison slot="comparison">
      <Statistic.Comparison.Value class="text-white" slot="value">
         Last Year: {formatNumber(2580000, {
            style: 'currency',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })}
      </Statistic.Comparison.Value>
      <Statistic.Comparison.Trend class="bg-white text-white" showIcon={false} slot="trend">
         {formatNumber(80000, {
            style: 'currency',
            notation: 'compact',
            maximumFractionDigits: 1,
            minimumFractionDigits: 1
         })} ({formatNumber(0.031, {
            style: 'percent'
         })})
      </Statistic.Comparison.Trend>
   </Statistic.Comparison>
</Statistic>

<script lang="ts">
   import { Statistic } from 'stwui';
   import { formatNumber } from 'stwui/utils';
</script>

<Statistic>
   <Statistic.Title slot="title">New Users</Statistic.Title>
   <Statistic.Value slot="value">
      {formatNumber(82001, {
         style: 'decimal',
         notation: 'compact',
         maximumFractionDigits: 1,
         minimumFractionDigits: 1
      })}
   </Statistic.Value>
   <Statistic.Goal progress={82.001} />
</Statistic>