Chart

// In your Payload CMS blocks config
export const ChartBlock = {
  slug: "chart",
  fields: [
    { name: "title", type: "text", localized: true },
    {
      name: "type",
      type: "select",
      options: [
        { label: "Bar", value: "bar" },
        { label: "Line", value: "line" },
        { label: "Area", value: "area" },
      ],
    },
    {
      name: "data",
      type: "array",
      fields: [
        { name: "label", type: "text", required: true },
        { name: "value", type: "number", required: true },
      ],
    },
    {
      name: "config",
      type: "group",
      fields: [
        { name: "showGrid", type: "checkbox", defaultValue: true },
        { name: "showLegend", type: "checkbox", defaultValue: false },
      ],
    },
  ],
}

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@mordecai-design-system/ui"
import { Bar, BarChart, XAxis, YAxis } from "recharts"

export function DataChart({ title, data, config }) {
  const chartConfig = {
    value: {
      label: "Value",
      color: "hsl(var(--primary))",
    },
  }

  return (
    <div>
      <h3>{title}</h3>
      <ChartContainer config={chartConfig}>
        <BarChart data={data}>
          <XAxis dataKey="label" />
          <YAxis />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar dataKey="value" fill="var(--color-value)" />
        </BarChart>
      </ChartContainer>
    </div>
  )
}

pnpm add @corew500/ui

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
} from "@mordecai-design-system/ui"

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(var(--chart-1))",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(var(--chart-2))",
  },
}

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
    <Bar dataKey="mobile" fill="var(--color-mobile)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>

<ChartContainer config={chartConfig}>
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Line dataKey="value" stroke="var(--color-value)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </LineChart>
</ChartContainer>

<ChartContainer config={chartConfig}>
  <AreaChart data={data}>
    <Area
      dataKey="value"
      fill="var(--color-value)"
      stroke="var(--color-value)"
    />
    <ChartTooltip content={<ChartTooltipContent />} />
  </AreaChart>
</ChartContainer>

<ChartContainer config={chartConfig}>
  <BarChart data={data}>
    <Bar dataKey="desktop" fill="var(--color-desktop)" />
    <Bar dataKey="mobile" fill="var(--color-mobile)" />
    <ChartLegend content={<ChartLegendContent />} />
  </BarChart>
</ChartContainer>

type ChartConfig = {
  [key: string]: {
    label?: ReactNode
    icon?: ComponentType
    color?: string
    theme?: Record<"light" | "dark", string>
  }
}