MetricCard

import { MetricCard } from "@grassroot/charts-react";
 
export default function MetricCardDemo() {
  return (
    <div>
      <MetricCard
        animation={{ durationMs: 560 }}
        label="Checkout conversion"
        value={4.82}
        unit="%"
        goodDirection="up"
        color="var(--vs-success)"
        paused />
    </div>
  );
}

<script setup lang="ts">
import { MetricCard } from "@grassroot/charts-vue";
</script>
 
<template>
  <div>
    <MetricCard
      :animation="{ durationMs: 560 }"
      label="Checkout conversion"
      :value="4.82"
      unit="%"
      goodDirection="up"
      color="var(--vs-success)"
      paused />
  </div>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootMetricCard } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-metric-card-chart-demo",
  standalone: true,
  imports: [GrassrootMetricCard],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { style: "display:block" },
  template: `<div>
    <grassroot-metric-card
    style="display:contents"
    [animation]="{ durationMs: 560 }"
    label="Checkout conversion"
    [value]="4.82"
    unit="%"
    goodDirection="up"
    color="var(--vs-success)"
    [paused]="true"
  />
  </div>`,
})
export class MetricCardDemoComponent {
}
 
export default MetricCardDemoComponent;

<script lang="ts">
  import { MetricCard } from "@grassroot/charts-svelte";
</script>
 
<div>
  <MetricCard
    animation={{ durationMs: 560 }}
    label="Checkout conversion"
    value={4.82}
    unit="%"
    goodDirection="up"
    color="var(--vs-success)"
    paused />
</div>

/** @jsxImportSource solid-js */
import { MetricCard } from "@grassroot/charts-solid";
 
export default function MetricCardDemo() {
  return (
    <div>
      <MetricCard
        animation={{ durationMs: 560 }}
        label="Checkout conversion"
        value={4.82}
        unit="%"
        goodDirection="up"
        color="var(--vs-success)"
        paused />
    </div>
  );
}