CardsMetric() — ui Function Reference

Architecture documentation for the CardsMetric() function in metric.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CardsMetric() — ui Function Reference

Dependency Diagram

graph TD
  4c4c84a8_656c_b608_5725_9a8274edfe6b["CardsMetric()"]
  7588835f_2002_a7d5_ca65_7cb2856acc23["metric.tsx"]
  4c4c84a8_656c_b608_5725_9a8274edfe6b -->|defined in| 7588835f_2002_a7d5_ca65_7cb2856acc23
  style 4c4c84a8_656c_b608_5725_9a8274edfe6b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/components/cards/metric.tsx lines 61–108

export function CardsMetric() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Exercise Minutes</CardTitle>
        <CardDescription>
          Your exercise minutes are ahead of where you normally are.
        </CardDescription>
      </CardHeader>
      <CardContent className="pb-4">
        <ChartContainer config={chartConfig} className="w-full md:h-[200px]">
          <LineChart
            data={data}
            margin={{
              top: 5,
              right: 10,
              left: 10,
              bottom: 0,
            }}
          >
            <Line
              type="monotone"
              strokeWidth={2}
              dataKey="average"
              stroke="var(--color-average)"
              strokeOpacity={0.5}
              activeDot={{
                r: 6,
                fill: "var(--color-average)",
              }}
            />
            <Line
              type="monotone"
              dataKey="today"
              strokeWidth={2}
              stroke="var(--color-today)"
              activeDot={{
                r: 8,
                style: { fill: "var(--color-today)" },
              }}
            />
            <ChartTooltip content={<ChartTooltipContent />} />
          </LineChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}