@webjsdev/ui 0.3.16 → 0.4.0

package/packages/registry/blocks/charts/chart-pie-donut-text.ts

@@ -0,0 +1,89 @@
+/**
+ * A donut chart with text, a chart block ported from shadcn/ui's chart-pie-donut-text.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-donut-text` at
+ * `components/charts/chart-pie-donut-text.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieDonutText()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+const totalVisitors = chartData.reduce((acc, curr) => acc + curr.visitors, 0);
+
+export default function ChartPieDonutText() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Donut with Text</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { cursor: false, hideLabel: true },
+          pies: [{
+            dataKey: 'visitors',
+            nameKey: 'browser',
+            innerRadius: 60,
+            strokeWidth: 5,
+            center: ({ cx, cy }) => svg`
+                <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+                  <tspan x=${cx} y=${cy} class="fill-foreground text-3xl font-bold">${totalVisitors.toLocaleString('en-US')}</tspan>
+                  <tspan x=${cx} y=${cy + 24} class="fill-muted-foreground">Visitors</tspan>
+                </text>`,
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-donut.ts

@@ -0,0 +1,77 @@
+/**
+ * A donut chart, a chart block ported from shadcn/ui's chart-pie-donut.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-donut` at
+ * `components/charts/chart-pie-donut.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieDonut()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, 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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieDonut() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Donut</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { cursor: false, hideLabel: true },
+          pies: [{ dataKey: 'visitors', nameKey: 'browser', innerRadius: 60 }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-interactive.ts

@@ -0,0 +1,120 @@
+/**
+ * An interactive pie chart, a chart block ported from shadcn/ui's chart-pie-interactive.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-interactive` at
+ * `components/charts/chart-pie-interactive.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieInteractive()}`.
+ *
+ * The month picker is a native `<select>` inside `<ui-select>`, and the chart
+ * for every month is served; the card shows the chosen one through `:has()`,
+ * so the picker works with JavaScript off. shadcn's re-renders one chart from
+ * React state instead, and draws a colour swatch beside each month, which a
+ * native option cannot hold.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { selectTriggerClass } from '../../components/select.ts';
+import { chartSector, chartStyle, pieChart, type ChartConfig } from '../../components/chart.ts';
+
+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;
+
+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 months = desktopData.map((item) => item.month);
+
+// Which month's chart shows, read from the picker's checked option. Written
+// out whole so Tailwind finds every class in the source.
+const SHOWN_WHEN: Record<string, string> = {
+  january: 'w-full group-has-[option[value=february]:checked]/chart:hidden group-has-[option[value=march]:checked]/chart:hidden group-has-[option[value=april]:checked]/chart:hidden group-has-[option[value=may]:checked]/chart:hidden',
+  february: 'hidden w-full group-has-[option[value=february]:checked]/chart:block',
+  march: 'hidden w-full group-has-[option[value=march]:checked]/chart:block',
+  april: 'hidden w-full group-has-[option[value=april]:checked]/chart:block',
+  may: 'hidden w-full group-has-[option[value=may]:checked]/chart:block',
+};
+
+// The donut with `activeIndex` pulled out and ringed, and its total in the middle.
+function chart(activeIndex: number) {
+  return pieChart({
+    config: chartConfig,
+    class: 'mx-auto aspect-square w-full max-w-[300px]',
+    width: 300,
+    data: desktopData,
+    title: `Desktop visitors by month, ${chartConfig[months[activeIndex] as keyof typeof chartConfig].label} highlighted`,
+    tooltip: { cursor: false, hideLabel: true },
+    pies: [{
+      dataKey: 'desktop',
+      nameKey: 'month',
+      innerRadius: 60,
+      strokeWidth: 5,
+      shape: ({ index, outerRadius, ...props }) => index === activeIndex
+        ? svg`<g>${chartSector({ ...props, outerRadius: outerRadius + 10 })}${chartSector({ ...props, outerRadius: outerRadius + 25, innerRadius: outerRadius + 12 })}</g>`
+        : chartSector({ ...props, outerRadius }),
+      center: ({ cx, cy }) => svg`
+        <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+          <tspan x=${cx} y=${cy} class="fill-foreground text-3xl font-bold">${desktopData[activeIndex].desktop.toLocaleString('en-US')}</tspan>
+          <tspan x=${cx} y=${cy + 24} class="fill-muted-foreground">Visitors</tspan>
+        </text>`,
+    }],
+  });
+}
+
+export default function ChartPieInteractive() {
+  // shadcn's ChartStyle on the card, so the month colours reach the header too.
+  return html`
+    <div data-slot="card" data-chart="pie-interactive" style=${chartStyle(chartConfig)} class=${cn(cardClass(), 'group/chart flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'flex-row items-start space-y-0 pb-0')}>
+        <div class="grid gap-1">
+          <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Interactive</div>
+          <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+        </div>
+        <ui-select class="ml-auto w-fit">
+          <select aria-label="Select a value" class=${cn(selectTriggerClass(), 'h-7 w-[130px] rounded-lg pl-2.5')}>
+            ${months.map((key, i) => html`<option value=${key} ?selected=${i === 0}>${chartConfig[key as keyof typeof chartConfig].label}</option>`)}
+          </select>
+        </ui-select>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-1 justify-center pb-0')}>
+        ${months.map((key, i) => html`<div class=${SHOWN_WHEN[key]}>${chart(i)}</div>`)}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-label-custom.ts

@@ -0,0 +1,82 @@
+/**
+ * A pie chart with a custom label, a chart block ported from shadcn/ui's chart-pie-label-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-label-custom` at
+ * `components/charts/chart-pie-label-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieLabelCustom()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, 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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieLabelCustom() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Custom Label</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px] px-0',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { nameKey: 'visitors', hideLabel: true },
+          pies: [{
+            dataKey: 'visitors',
+            labelLine: false,
+            label: ({ x, y, textAnchor, datum }) => svg`<text x=${x} y=${y} text-anchor=${textAnchor} fill="var(--foreground)">${datum.visitors}</text>`,
+            nameKey: 'browser',
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-label-list.ts

@@ -0,0 +1,86 @@
+/**
+ * A pie chart with a label list, a chart block ported from shadcn/ui's chart-pie-label-list.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-label-list` at
+ * `components/charts/chart-pie-label-list.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieLabelList()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, 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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieLabelList() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Label List</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px] [&_.ui-chart-text]:fill-background',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { nameKey: 'visitors', hideLabel: true },
+          pies: [{
+            dataKey: 'visitors',
+            labels: [{
+              dataKey: 'browser',
+              class: 'fill-background',
+              stroke: 'none',
+              fontSize: 12,
+              formatter: (value) => chartConfig[value as keyof typeof chartConfig]?.label,
+            }],
+          }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-label.ts

@@ -0,0 +1,77 @@
+/**
+ * A pie chart with a label, a chart block ported from shadcn/ui's chart-pie-label.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-label` at
+ * `components/charts/chart-pie-label.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieLabel()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, 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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieLabel() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Label</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px] pb-0 [&_.ui-chart-pie-label-text]:fill-foreground',
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: { hideLabel: true },
+          pies: [{ dataKey: 'visitors', label: true, nameKey: 'browser' }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-pie-legend.ts

@@ -0,0 +1,79 @@
+/**
+ * A pie chart with a legend, a chart block ported from shadcn/ui's chart-pie-legend.
+ *
+ * Installed by `npx @webjsdev/ui add chart-pie-legend` at
+ * `components/charts/chart-pie-legend.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartPieLegend()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { pieChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 90, 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;
+
+// lucide's trending-up, the icon in shadcn's footer.
+const TrendingUp = (cls = '') => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class=${'lucide lucide-trending-up ' + cls}><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg>`;
+
+export default function ChartPieLegend() {
+  return html`
+    <div data-slot="card" class=${cn(cardClass(), 'flex flex-col')}>
+      <div data-slot="card-header" class=${cn(cardHeaderClass(), 'items-center pb-0')}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Pie Chart - Legend</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex-1 pb-0')}>
+        ${pieChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[300px]',
+          width: 300,
+          data: chartData,
+          title: 'Visitors by browser',
+          tooltip: false,
+          legend: { nameKey: 'browser', class: '-translate-y-2 flex-wrap gap-2 *:basis-1/4 *:justify-center', height: 48 },
+          pies: [{ dataKey: 'visitors' }],
+        })}
+      </div>
+      <div data-slot="card-footer" class=${cn(cardFooterClass(), 'flex-col gap-2 text-sm')}>
+        <div class="flex items-center gap-2 leading-none font-medium">
+          Trending up by 5.2% this month ${TrendingUp('h-4 w-4')}
+        </div>
+        <div class="leading-none text-muted-foreground">Showing total visitors for the last 6 months</div>
+      </div>
+    </div>
+  `;
+}