Chart card

<ChartCard title="Daily yuno latency p90">
  <ChartCardControls onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <AreaChart data={data}>{/* … */}</AreaChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily total sales volume"
  info="Total sales value across all payment methods for the selected period."
  value="$90.52B"
  suffix="USD"
  subtitle="Maximum ticket: USD 65,121"
  viewPaymentsFilter={{}}
>
  <ChartContainer config={config} className="h-64 w-full">
    <BarChart data={data}>{/* … */}</BarChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily approved payments"
  info="Sum of processed volume per day."
  value="1,544,011"
  viewPaymentsFilter={{}}
>
  <ChartCardControls variantSwitcher defaultVariant="bar" onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <BarChart data={data}>{/* … */}</BarChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily total payments and conversion rate"
  info="Payments per day paired with conversion rate."
  viewPaymentsFilter={{}}
>
  {/* Dual legend row (Payments primary + Conversion rate) */}
  <ChartCardControls onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <ComposedChart data={data}>
      <Bar yAxisId="left" dataKey="payments" />
      <Line yAxisId="right" dataKey="conversion" />
    </ComposedChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily approval rate by provider"
  viewPaymentsFilter={{}}
>
  {/* Legend chips (Stripe / Adyen / Braintree / dLocal) */}
  <ChartCardControls onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <LineChart data={data}>
      {/* one <Line/> per provider */}
    </LineChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Approval rate by provider"
  viewPaymentsFilter={{}}
>
  <ProviderLegendRow items={providers} />
  <ChartContainer config={config} className="h-64 w-full">
    <LineChart data={data}>{/* one <Line/> per provider */}</LineChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily total payments"
  info="Stacked breakdown by payment status."
  viewPaymentsFilter={{}}
>
  <StackedPaymentsLegend
    succeeded={{ count: 1_291_000, pct: 56.53 }}
    declined={{  count: 954_000,   pct: 41.78 }}
    fraud={{     count: 38_428,    pct: 1.68  }}
  />
  <ChartCardControls onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <BarChart data={data}>
      <Bar dataKey="succeeded" stackId="a" />
      <Bar dataKey="declined"  stackId="a" />
      <Bar dataKey="fraud"     stackId="a" />
    </BarChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Volume status distribution"
  info="Processed volume split by payment status."
>
  {/* Legend chips (Succeeded / Declined / Refunded / Error / Pending / Created) */}
  <ChartCardControls onHide={() => {}} />
  <ChartContainer config={config} className="h-64 w-full">
    <LineChart data={data}>{/* one <Line/> per status */}</LineChart>
  </ChartContainer>
</ChartCard>

<ChartCard title="Daily APMs conversion rate">
  <EmptyChart />
</ChartCard>

<ChartCard title="Daily chargebacks rate" value="0" suffix="%">
  <BlankPctChart />
</ChartCard>

<ChartCard
  title="Daily yuno error / rejection rate"
  value="43.71"
  suffix="%"
  actions={
    <button aria-label="Mute alerts" onClick={toggleMute}>
      {muted ? <BellSlash weight="light" /> : <Bell weight="light" />}
    </button>
  }
  viewPaymentsFilter={{}}
>
  <ChartContainer config={config} className="h-64 w-full">
    <AreaChart data={data}>{/* … */}</AreaChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Daily cards approval rate by provider"
  viewPaymentsFilter={{}}
  actions={
    <AttemptsSelector value={value} onChange={setValue} />
  }
>
  <ChartContainer config={config} className="h-64 w-full">
    <LineChart data={data}>{/* one <Line/> per provider */}</LineChart>
  </ChartContainer>
</ChartCard>

<ChartCard
  title="Top issuers"
  info="Top issuing banks by volume."
  actions={
    <Button variant="link" size="sm" className="px-3">
      View more
    </Button>
  }
>
  {/* donut + legend list */}
</ChartCard>

import { ChartCard, ChartCardControls, useChartCardContext } from "@/components/patterns/chart-card";