jigsaw_engine 0.4.0

data/app/javascript/seeds/blocks/dashboard-ui/charts-18/render.jsx

@@ -0,0 +1,139 @@
+"use client";
+
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardAction,
+} from "@/components/ui/card";
+import {
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenu,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { FolderUp } from "lucide-react";
+
+const chartData = [
+  { month: "January", received: 100, send: 180, withdraw: 290 },
+  { month: "February", received: 305, send: 200, withdraw: 150 },
+  { month: "March", received: 237, send: 120, withdraw: 180 },
+  { month: "April", received: 73, send: 230, withdraw: 120 },
+  { month: "May", received: 209, send: 130, withdraw: 125 },
+  { month: "June", received: 214, send: 140, withdraw: 270 },
+  { month: "July", received: 144, send: 170, withdraw: 240 },
+];
+
+const chartConfig = {
+  received: {
+    label: "Total Received",
+    color: "var(--chart-1)",
+  },
+  send: {
+    label: "Total Send",
+    color: "var(--chart-2)",
+  },
+  withdraw: {
+    label: "Total Withdraw",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig;
+
+export default function LineChartComponent() {
+  return (
+    <Card className="mx-auto max-w-4xl shadow-none">
+      <CardHeader>
+        <CardTitle>Balance Summary</CardTitle>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <FolderUp /> <span className="hidden lg:inline">Export</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Excel</DropdownMenuItem>
+              <DropdownMenuItem>PDF</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-8 grid gap-4 text-sm md:grid-cols-2 lg:max-w-(--breakpoint-sm) lg:grid-cols-3">
+          <div className="bg-muted space-y-1 rounded-md border p-4">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--chart-1)]"></span>
+              <span className="text-muted-foreground">{chartConfig.received.label}</span>
+            </div>
+            <div className="text-xl font-semibold">2.010550 BTC</div>
+          </div>
+          <div className="bg-muted space-y-1 rounded-md border p-4">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--chart-2)]"></span>
+              <span className="text-muted-foreground">{chartConfig.send.label}</span>
+            </div>
+            <div className="text-xl font-semibold">1.201055 BTC</div>
+          </div>
+          <div className="bg-muted space-y-1 rounded-md border p-4">
+            <div className="flex items-center gap-2">
+              <span className="size-2 rounded-full bg-[var(--chart-3)]"></span>
+              <span className="text-muted-foreground">{chartConfig.withdraw.label}</span>
+            </div>
+            <div className="text-xl font-semibold">5.41055 BTC</div>
+          </div>
+        </div>
+        <ChartContainer className="w-full aspect-4/3" config={chartConfig}>
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value.slice(0, 3)}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="received"
+              type="monotone"
+              stroke="var(--color-received)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="send"
+              type="monotone"
+              stroke="var(--color-send)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="withdraw"
+              type="monotone"
+              stroke="var(--color-withdraw)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-19/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/charts-19/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/charts-19/render.jsx

@@ -0,0 +1,146 @@
+"use client";
+
+import React from "react";
+import { Label, Pie, PieChart } from "recharts";
+import { ChevronRightIcon } from "lucide-react";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig;
+
+const summaryData = [
+  { name: "Food & Drink", value: 48, color: "var(--chart-1)" },
+  { name: "Grocery", value: 32, color: "var(--chart-2)" },
+  { name: "Shopping", value: 13, color: "var(--chart-3)" },
+  { name: "Transport", value: 7, color: "var(--chart-4)" },
+];
+
+export default function PieChartComponent() {
+  const totalVisitors = React.useMemo(() => {
+    return chartData.reduce((acc, curr) => acc + curr.visitors, 0);
+  }, []);
+
+  return (
+    <Card className="mx-auto max-w-lg shadow-none">
+      <CardHeader>
+        <CardTitle>Summary</CardTitle>
+        <CardDescription>Data from 1-12 Apr, 2024</CardDescription>
+        <CardAction>
+          <Button size="icon" variant="outline">
+            <ChevronRightIcon />
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="mb-6 flex flex-1 items-center justify-center">
+          <ChartContainer
+            config={chartConfig}
+            className="mx-auto aspect-square max-h-[250px] max-w-[300px] w-full"
+          >
+            <PieChart>
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent hideLabel />}
+              />
+              <Pie
+                data={chartData}
+                dataKey="visitors"
+                nameKey="browser"
+                innerRadius={60}
+                strokeWidth={5}
+              >
+                <Label
+                  content={({ viewBox }) => {
+                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                      return (
+                        <text
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                        >
+                          <tspan
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            className="fill-foreground text-3xl font-bold"
+                          >
+                            ${totalVisitors.toLocaleString()}
+                          </tspan>
+                        </text>
+                      );
+                    }
+                  }}
+                />
+              </Pie>
+            </PieChart>
+          </ChartContainer>
+        </div>
+        <div className="grid gap-2 md:grid-cols-2">
+          {summaryData.map((item, index) => (
+            <div
+              key={index}
+              className="bg-muted flex items-center justify-between rounded-md p-4"
+            >
+              <div className="flex items-center space-x-2">
+                <div
+                  className="size-3 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                ></div>
+                <span className="text-muted-foreground text-sm">
+                  {item.name}
+                </span>
+              </div>
+              <span className="text-sm font-medium">{item.value}%</span>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-2/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/charts-2/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/charts-2/render.jsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { Line, LineChart, Tooltip } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import { Button } from "@/components/ui/button";
+import { FolderUp } from "lucide-react";
+
+const chartData = [
+  {
+    average: 400,
+    today: 240,
+  },
+  {
+    average: 300,
+    today: 139,
+  },
+  {
+    average: 200,
+    today: 400,
+  },
+  {
+    average: 278,
+    today: 390,
+  },
+  {
+    average: 189,
+    today: 480,
+  },
+  {
+    average: 239,
+    today: 380,
+  },
+  {
+    average: 349,
+    today: 400,
+  },
+];
+
+const chartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig;
+
+export default function LineChartComponent() {
+  return (
+    <Card className="mx-auto max-w-xl shadow-none">
+      <CardHeader className="flex items-start justify-between">
+        <div className="space-y-1.5">
+          <CardTitle>Exercise Minutes</CardTitle>
+          <CardDescription>
+            Your exercise minutes are ahead of where you normally are.
+          </CardDescription>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">
+              <FolderUp /> <span className="hidden lg:inline">Export</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>Excel</DropdownMenuItem>
+            <DropdownMenuItem>PDF</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          className="h-32 w-full lg:h-[250px]"
+          config={chartConfig}
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              top: 5,
+              right: 10,
+              left: 10,
+            }}
+          >
+            <Tooltip
+              content={({ active, payload }) => {
+                if (active && payload && payload.length) {
+                  return (
+                    <div className="bg-background rounded-lg border p-2 shadow-xs">
+                      <div className="grid grid-cols-2 gap-2">
+                        <div className="flex flex-col">
+                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                            Average
+                          </span>
+                          <span className="text-muted-foreground font-bold">
+                            {payload[0].value}
+                          </span>
+                        </div>
+                        <div className="flex flex-col">
+                          <span className="text-muted-foreground text-[0.70rem] uppercase">
+                            Today
+                          </span>
+                          <span className="font-bold">{payload[1].value}</span>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                }
+                return null;
+              }}
+            />
+            <Line
+              type="monotone"
+              strokeWidth={2}
+              dataKey="average"
+              activeDot={{
+                r: 6,
+                style: { fill: "var(--theme-primary)", opacity: 0.25 },
+              }}
+              style={
+                {
+                  stroke: "var(--theme-primary)",
+                  opacity: 0.35,
+                  "--theme-primary": `var(--primary)`,
+                } as React.CSSProperties
+              }
+            />
+            <Line
+              type="monotone"
+              dataKey="today"
+              strokeWidth={2}
+              activeDot={{
+                r: 8,
+                style: { fill: "var(--theme-primary)" },
+              }}
+              style={
+                {
+                  stroke: "var(--theme-primary)",
+                  "--theme-primary": `var(--primary)`,
+                } as React.CSSProperties
+              }
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-20/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/charts-20/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/charts-20/render.jsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartData = [
+  { department: "cardiology", visitors: 275, fill: "var(--color-cardiology)" },
+  { department: "neurology", visitors: 200, fill: "var(--color-neurology)" },
+  { department: "oncology", visitors: 187, fill: "var(--color-oncology)" },
+  { department: "pediatrics", visitors: 173, fill: "var(--color-pediatrics)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  cardiology: {
+    label: "Cardiology",
+    color: "var(--chart-1)",
+  },
+  neurology: {
+    label: "Neurology",
+    color: "var(--chart-2)",
+  },
+  oncology: {
+    label: "Oncology",
+    color: "var(--chart-3)",
+  },
+  pediatrics: {
+    label: "Pediatrics",
+    color: "var(--chart-4)",
+  },
+} satisfies ChartConfig;
+
+export default function PieChartComponent() {
+  return (
+    <Card className="mx-auto max-w-lg shadow-none">
+      <CardHeader>
+        <CardTitle>Patients by Department</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={chartConfig}
+          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[400px] pb-0"
+        >
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={chartData}
+              dataKey="visitors"
+              label
+              nameKey="department"
+            />
+            <ChartLegend
+              content={<ChartLegendContent nameKey="department" />}
+              className="-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-3/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/charts-3/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }

data/app/javascript/seeds/blocks/dashboard-ui/charts-3/render.jsx

@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { FolderUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { Badge } from "@/components/ui/badge";
+
+export default function LineChartComponent() {
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "var(--chart-1)",
+    },
+    mobile: {
+      label: "Mobile",
+      color: "var(--chart-2)",
+    },
+  } satisfies ChartConfig;
+
+  const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 473, mobile: 190 },
+    { month: "May", desktop: 409, mobile: 130 },
+    { month: "June", desktop: 514, mobile: 140 },
+    { month: "July", desktop: 237, mobile: 120 },
+    { month: "August", desktop: 473, mobile: 190 },
+    { month: "September", desktop: 409, mobile: 130 },
+    { month: "October", desktop: 514, mobile: 300 },
+    { month: "November", desktop: 390, mobile: 240 },
+    { month: "December", desktop: 700, mobile: 460 },
+  ];
+
+  return (
+    <Card className="mx-auto max-w-xl shadow-none">
+      <CardHeader>
+        <CardDescription>Returning Rate</CardDescription>
+        <CardAction>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
+                <FolderUp /> <span className="hidden lg:inline">Export</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Excel</DropdownMenuItem>
+              <DropdownMenuItem>PDF</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardAction>
+        <div className="flex items-center gap-2">
+          <div className="font-display font-medium text-2xl">$42,379</div>
+          <Badge className="text-green-600" variant="outline">
+            +2.5%
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          className="mt-0 !aspect-21/9 w-full md:mt-6"
+          config={chartConfig}
+        >
+          <LineChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={(value) => value}
+            />
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Line
+              dataKey="desktop"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="mobile"
+              stroke="var(--color-mobile)"
+              style={
+                {
+                  opacity: 0.35,
+                } as React.CSSProperties
+              }
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

data/app/javascript/seeds/blocks/dashboard-ui/charts-4/config.json

@@ -0,0 +1 @@
+{}

data/app/javascript/seeds/blocks/dashboard-ui/charts-4/data.js

@@ -0,0 +1 @@
+export default function(shared, config) { return config }