E-Commerce Analytics Charts

import { LineChart, FunnelChart, DonutChart } from "@chartts/react"

export function StoreDashboard({ store }) {
  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-8 rounded-xl card p-6">
        <LineChart
          data={store.revenue}
          x="date"
          y={["revenue", "orders"]}
          className="h-64"
        />
      </div>
      <div className="col-span-4 rounded-xl card p-6">
        <FunnelChart
          data={store.funnel}
          label="stage"
          value="count"
          className="h-64"
          showPercentages
        />
      </div>
      <div className="col-span-12 rounded-xl card p-6">
        <DonutChart
          data={store.categories}
          label="category"
          value="revenue"
          centerLabel={store.totalRevenue}
        />
      </div>
    </div>
  )
}