Chart

 1import { ChartBar } from "@/components/wensity/chart";
 2
 3const data = [
 4  { channel: "Jan", desktop: 186, mobile: 120 },
 5  { channel: "Feb", desktop: 205, mobile: 138 },
 6  { channel: "Mar", desktop: 174, mobile: 151 },
 7];
 8
 9const config = {
10  desktop: { label: "Desktop" },
11  mobile: { label: "Mobile" },
12};
13
14export default function Example() {
15  return <ChartBar data={data} config={config} xKey="channel" />;
16}

 1import { ChartArea } from "@/components/wensity/chart";
 2
 3const data = [
 4  { month: "Jan", revenue: 4200, expenses: 2800 },
 5  { month: "Feb", revenue: 5100, expenses: 3100 },
 6];
 7
 8const config = {
 9  revenue: { label: "Revenue" },
10  expenses: { label: "Expenses" },
11};
12
13export default function Example() {
14  return <ChartArea data={data} config={config} xKey="month" stacked />;
15}

 1import { ChartPie } from "@/components/wensity/chart";
 2
 3const data = [
 4  { name: "Chrome", value: 612 },
 5  { name: "Safari", value: 218 },
 6  { name: "Firefox", value: 96 },
 7  { name: "Edge", value: 74 },
 8];
 9
10const config = {
11  Chrome: { label: "Chrome" },
12  Safari: { label: "Safari" },
13  Firefox: { label: "Firefox" },
14  Edge: { label: "Edge" },
15};
16
17export default function Example() {
18  return <ChartPie data={data} config={config} height={260} />;
19}

 1import { ChartRadar } from "@/components/wensity/chart";
 2
 3const data = [
 4  { metric: "Speed", team: 120, org: 98 },
 5  { metric: "Quality", team: 98, org: 90 },
 6  { metric: "Reliability", team: 110, org: 95 },
 7];
 8
 9const config = {
10  team: { label: "This team" },
11  org: { label: "Org average" },
12};
13
14export default function Example() {
15  return <ChartRadar data={data} config={config} xKey="metric" height={280} />;
16}

 1import { ChartBarInteractive } from "@/components/wensity/chart";
 2
 3const data = [
 4  { date: "2024-04-01", desktop: 222, mobile: 150 },
 5  { date: "2024-04-02", desktop: 97, mobile: 180 },
 6  { date: "2024-04-03", desktop: 167, mobile: 120 },
 7  // ...30 days total (April 1 - April 30, 2024)
 8];
 9
10const config = {
11  desktop: { label: "Desktop", color: "#3987e5" },
12  mobile: { label: "Mobile", color: "#199e70" },
13};
14
15export default function Example() {
16  return (
17    <ChartBarInteractive
18      data={data}
19      config={config}
20      xKey="date"
21      title="Bar Chart - Interactive"
22      description="Showing total visitors for the last 3 months"
23      unitLabel="Page Views"
24      dateFormat
25    />
26  );
27}