jigsaw_engine 0.4.0

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

@@ -0,0 +1,98 @@
+"use client";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import { Bar, BarChart, XAxis } from "recharts";
+
+export default function BarChartComponent() {
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "var(--chart-1)",
+    },
+    mobile: {
+      label: "Mobile",
+      color: "var(--chart-2)",
+    },
+  } satisfies ChartConfig;
+
+  const chartData = [
+    { month: "January", desktop: 190, mobile: 180 },
+    { month: "February", desktop: 250, mobile: 200 },
+    { month: "March", desktop: 240, mobile: 120 },
+    { month: "April", desktop: 120, mobile: 190 },
+    { month: "May", desktop: 110, mobile: 130 },
+    { month: "June", desktop: 250, mobile: 140 },
+  ];
+
+  return (
+    <Card className="mx-auto max-w-xl shadow-none">
+      <CardHeader>
+        <CardTitle>Total Revenue</CardTitle>
+        <CardDescription>Income in the last 28 days</CardDescription>
+        <CardAction className="relative col-start-auto row-start-auto justify-self-start lg:col-start-2 lg:row-start-1 lg:justify-self-end">
+          <div className="end-0 top-0 mt-2 flex flex-col items-stretch space-y-0 p-0 sm:flex-row lg:absolute lg:mt-0">
+            <div className="flex gap-8 rounded-lg border p-4">
+              <button className="flex flex-1 flex-col justify-center gap-1 text-left">
+                <span className="text-muted-foreground text-xs tracking-wider uppercase">
+                  Desktop
+                </span>
+                <span className="font-display text-lg leading-none font-medium sm:text-2xl">
+                  24,828
+                </span>
+              </button>
+              <button className="flex flex-1 flex-col justify-center gap-1 text-left">
+                <span className="text-muted-foreground text-xs tracking-wider uppercase">
+                  Mobile
+                </span>
+                <span className="font-display text-lg leading-none font-medium sm:text-2xl">
+                  25,010
+                </span>
+              </button>
+            </div>
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <div className="lg:mt-10">
+          <ChartContainer className="!aspect-21/9 w-full" config={chartConfig}>
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{
+                left: -6,
+                right: -6,
+              }}
+            >
+              <XAxis
+                dataKey="month"
+                tickLine={false}
+                tickMargin={10}
+                axisLine={false}
+                tickFormatter={(value) => value}
+              />
+              <ChartTooltip
+                cursor={false}
+                content={<ChartTooltipContent indicator="dashed" />}
+              />
+              <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
+              <Bar dataKey="mobile" fill="var(--color-mobile)" radius={8} />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,181 @@
+"use client";
+
+import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ChartContainer } from "@/components/ui/chart";
+
+export default function AchievementByYearComponent() {
+  return (
+    <Card className="mx-auto max-w-md shadow-none">
+      <CardHeader>
+        <CardTitle>Achievement by Year</CardTitle>
+        <CardDescription>
+          You completed more projects per day on average this year than last
+          year.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            57
+            <span className="text-muted-foreground text-xs font-normal">
+              projects
+            </span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-1)",
+              },
+            }}
+            className="aspect-auto h-[32px] w-full"
+          >
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+              }}
+              data={[
+                {
+                  date: "2024",
+                  steps: 57,
+                },
+              ]}
+            >
+              <Bar
+                dataKey="steps"
+                fill="var(--color-steps)"
+                radius={4}
+                barSize={32}
+              >
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            29
+            <span className="text-muted-foreground text-xs font-normal">
+              projects
+            </span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-2)",
+              },
+            }}
+            className="aspect-auto h-[32px] w-full"
+          >
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+              }}
+              data={[
+                {
+                  date: "2023",
+                  steps: 48,
+                },
+              ]}
+            >
+              <Bar
+                dataKey="steps"
+                fill="var(--color-steps)"
+                radius={4}
+                barSize={32}
+              >
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+        <div className="grid auto-rows-min gap-2">
+          <div className="flex items-baseline gap-1 text-2xl leading-none font-semibold tabular-nums">
+            35
+            <span className="text-muted-foreground text-xs font-normal">
+              projects
+            </span>
+          </div>
+          <ChartContainer
+            config={{
+              steps: {
+                label: "Steps",
+                color: "var(--chart-3)",
+              },
+            }}
+            className="aspect-auto h-[32px] w-full"
+          >
+            <BarChart
+              accessibilityLayer
+              layout="vertical"
+              margin={{
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+              }}
+              data={[
+                {
+                  date: "2022",
+                  steps: 42,
+                },
+              ]}
+            >
+              <Bar
+                dataKey="steps"
+                fill="var(--color-steps)"
+                radius={4}
+                barSize={32}
+              >
+                <LabelList
+                  position="insideLeft"
+                  dataKey="date"
+                  offset={8}
+                  fontSize={12}
+                  fill="var(--primary-foreground)"
+                />
+              </Bar>
+              <YAxis dataKey="date" type="category" tickCount={1} hide />
+              <XAxis dataKey="steps" type="number" hide />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { Label, Pie, PieChart, Sector } from "recharts";
+import { PieSectorDataItem } from "recharts/types/polar/Pie";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const desktopData = [
+  { month: "january", desktop: 186, fill: "var(--color-january)" },
+  { month: "february", desktop: 305, fill: "var(--color-february)" },
+  { month: "march", desktop: 237, fill: "var(--color-march)" },
+  { month: "april", desktop: 173, fill: "var(--color-april)" },
+  { month: "may", desktop: 209, fill: "var(--color-may)" },
+];
+
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  desktop: {
+    label: "Desktop",
+  },
+  mobile: {
+    label: "Mobile",
+  },
+  january: {
+    label: "January",
+    color: "var(--chart-1)",
+  },
+  february: {
+    label: "February",
+    color: "var(--chart-2)",
+  },
+  march: {
+    label: "March",
+    color: "var(--chart-3)",
+  },
+  april: {
+    label: "April",
+    color: "var(--chart-4)",
+  },
+  may: {
+    label: "May",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig;
+
+export default function ChartProjectEfficiencyComponent() {
+  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month);
+
+  const activeIndex = React.useMemo(
+    () => desktopData.findIndex((item) => item.month === activeMonth),
+    [activeMonth],
+  );
+  const months = React.useMemo(() => desktopData.map((item) => item.month), []);
+
+  return (
+    <Card className="mx-auto max-w-md shadow-none">
+      <CardHeader>
+        <CardDescription>January - June 2026</CardDescription>
+        <CardTitle className="font-display text-xl">
+          Project Efficiency
+        </CardTitle>
+        <CardAction>
+          <Select value={activeMonth} onValueChange={setActiveMonth}>
+            <SelectTrigger className="ml-auto" aria-label="Select a value">
+              <SelectValue placeholder="Select month" />
+            </SelectTrigger>
+            <SelectContent align="end">
+              {months.map((key) => {
+                const config = chartConfig[key as keyof typeof chartConfig];
+
+                if (!config) {
+                  return null;
+                }
+
+                const color = "color" in config ? config.color : undefined;
+
+                return (
+                  <SelectItem key={key} value={key}>
+                    <div className="flex items-center gap-2 text-xs">
+                      <span
+                        className="flex h-3 w-3 shrink-0 rounded-sm"
+                        style={{
+                          backgroundColor: color,
+                        }}
+                      />
+                      {config?.label}
+                    </div>
+                  </SelectItem>
+                );
+              })}
+            </SelectContent>
+          </Select>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="flex flex-1 justify-center pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square w-full max-w-[230px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={desktopData}
+              dataKey="desktop"
+              nameKey="month"
+              innerRadius={45}
+              strokeWidth={5}
+              activeIndex={activeIndex}
+              activeShape={({
+                outerRadius = 0,
+                ...props
+              }: PieSectorDataItem) => (
+                <g>
+                  <Sector {...props} outerRadius={outerRadius + 5} />
+                  <Sector
+                    {...props}
+                    outerRadius={outerRadius + 20}
+                    innerRadius={outerRadius + 12}
+                  />
+                </g>
+              )}
+            >
+              <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"
+                        >
+                          {desktopData[activeIndex].desktop.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    );
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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

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

@@ -0,0 +1,180 @@
+"use client";
+
+import * as React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+const chartData = [
+  { date: "2026-01-02", desktop: 222, mobile: 150 },
+  { date: "2026-01-03", desktop: 97, mobile: 180 },
+  { date: "2026-01-04", desktop: 167, mobile: 120 },
+  { date: "2026-01-05", desktop: 242, mobile: 260 },
+  { date: "2026-01-06", desktop: 373, mobile: 290 },
+  { date: "2026-01-07", desktop: 301, mobile: 340 },
+  { date: "2026-01-08", desktop: 245, mobile: 180 },
+  { date: "2026-01-09", desktop: 409, mobile: 320 },
+  { date: "2026-01-10", desktop: 59, mobile: 110 },
+  { date: "2026-01-11", desktop: 261, mobile: 190 },
+  { date: "2026-01-12", desktop: 327, mobile: 350 },
+  { date: "2026-01-13", desktop: 292, mobile: 210 },
+  { date: "2026-01-14", desktop: 342, mobile: 380 },
+  { date: "2026-01-15", desktop: 137, mobile: 220 },
+  { date: "2026-01-16", desktop: 120, mobile: 170 },
+  { date: "2026-01-17", desktop: 138, mobile: 190 },
+  { date: "2026-01-18", desktop: 446, mobile: 360 },
+  { date: "2026-01-19", desktop: 364, mobile: 410 },
+  { date: "2026-01-20", desktop: 243, mobile: 180 },
+  { date: "2026-01-21", desktop: 89, mobile: 150 },
+  { date: "2026-01-22", desktop: 137, mobile: 200 },
+  { date: "2026-01-23", desktop: 224, mobile: 170 },
+  { date: "2026-01-24", desktop: 138, mobile: 230 },
+  { date: "2026-01-25", desktop: 387, mobile: 290 },
+  { date: "2026-01-26", desktop: 215, mobile: 250 },
+  { date: "2026-01-27", desktop: 75, mobile: 130 },
+  { date: "2026-01-28", desktop: 383, mobile: 420 },
+  { date: "2026-01-29", desktop: 122, mobile: 180 },
+  { date: "2026-01-30", desktop: 315, mobile: 240 },
+  { date: "2026-01-31", desktop: 454, mobile: 380 },
+  { date: "2026-02-01", desktop: 165, mobile: 220 },
+  { date: "2026-02-02", desktop: 293, mobile: 310 },
+  { date: "2026-02-03", desktop: 247, mobile: 190 },
+  { date: "2026-02-04", desktop: 385, mobile: 420 },
+  { date: "2026-02-05", desktop: 481, mobile: 390 },
+  { date: "2026-02-06", desktop: 498, mobile: 520 },
+  { date: "2026-02-07", desktop: 388, mobile: 300 },
+  { date: "2026-02-08", desktop: 149, mobile: 210 },
+  { date: "2026-02-09", desktop: 227, mobile: 180 },
+  { date: "2026-02-10", desktop: 293, mobile: 330 },
+  { date: "2026-02-11", desktop: 335, mobile: 270 },
+  { date: "2026-02-12", desktop: 197, mobile: 240 },
+  { date: "2026-02-13", desktop: 197, mobile: 160 },
+  { date: "2026-02-14", desktop: 448, mobile: 490 },
+  { date: "2026-02-15", desktop: 473, mobile: 380 },
+  { date: "2026-02-16", desktop: 338, mobile: 400 },
+  { date: "2026-02-17", desktop: 499, mobile: 420 },
+  { date: "2026-02-18", desktop: 315, mobile: 350 },
+  { date: "2026-02-19", desktop: 235, mobile: 180 },
+  { date: "2026-02-20", desktop: 177, mobile: 230 },
+  { date: "2026-02-21", desktop: 82, mobile: 140 },
+];
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig;
+
+export default function RevenueChartComponent() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop");
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    [],
+  );
+
+  return (
+    <Card className="mx-auto max-w-xl shadow-none relative">
+      <CardHeader>
+        <CardTitle>Revenue Chart</CardTitle>
+        <CardDescription>Last 28 days</CardDescription>
+        <CardAction className="col-start-auto row-start-auto justify-self-start md:col-start-2 md:row-start-1 md:justify-self-end">
+          <div className="end-0 top-0 flex divide-x rounded-md border-s border-e border-t border-b md:absolute md:rounded-none md:rounded-bl-md md:border-e-transparent md:border-t-transparent">
+            {["desktop", "mobile"].map((key) => {
+              const chart = key as keyof typeof chartConfig;
+              return (
+                <button
+                  key={chart}
+                  data-active={activeChart === chart}
+                  className="data-[active=true]:bg-muted relative flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left"
+                  onClick={() => setActiveChart(chart)}
+                >
+                  <span className="text-muted-foreground text-xs">
+                    {chartConfig[chart].label}
+                  </span>
+                  <span className="font-display text-lg font-medium leading-none sm:text-2xl">
+                    {total[key as keyof typeof total].toLocaleString()}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="h-[186px] w-full">
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 0,
+              right: 0,
+              bottom: 0,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value);
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                });
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    });
+                  }}
+                />
+              }
+            />
+            <Bar
+              dataKey={activeChart}
+              fill={`var(--color-${activeChart})`}
+              radius={5}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

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

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

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