MetricCard

import { MetricCard } from "@grassroot/charts-react"; <MetricCard animation={{ durationMs: 560 }} label="Requests / s" value={1240} color="var(--vs-success)" paused />

<script setup lang="ts">
import { MetricCard } from "@grassroot/charts-vue";
</script>
 
<template>
  <MetricCard :animation='{ durationMs: 560 }' label="Requests / s" :value='1240' color="var(--vs-success)" paused />
</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,
  template: `<grassroot-metric-card [animation]='{ durationMs: 560 }' label="Requests / s" [value]='1240' color="var(--vs-success)" paused />`,
})
export class MetricCardDemoComponent {
 
}
 
export default MetricCardDemoComponent;

<script lang="ts">
  import { MetricCard } from "@grassroot/charts-svelte";
</script>
 
<MetricCard animation={{ durationMs: 560 }} label="Requests / s" value={1240} color="var(--vs-success)" paused />

/** @jsxImportSource solid-js */
import { MetricCard } from "@grassroot/charts-solid";
 
export default function MetricCardDemo() {
  return <MetricCard animation={{ durationMs: 560 }} label="Requests / s" value={1240} color="var(--vs-success)" paused />;
}