@webjsdev/ui 0.3.17 → 0.4.0

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

@@ -0,0 +1,85 @@
+/**
+ * A radial chart with a label, a chart block ported from shadcn/ui's chart-radial-label.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-label` at
+ * `components/charts/chart-radial-label.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialLabel()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, 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 ChartRadialLabel() {
+  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()}>Radial 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')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          startAngle: -90,
+          endAngle: 380,
+          innerRadius: 30,
+          outerRadius: 110,
+          tooltip: { cursor: false, hideLabel: true, nameKey: 'browser' },
+          bars: [{
+            dataKey: 'visitors',
+            background: true,
+            labels: [{ position: 'insideStart', dataKey: 'browser', class: 'fill-white capitalize mix-blend-luminosity', fontSize: 11 }],
+          }],
+        })}
+      </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-radial-shape.ts

@@ -0,0 +1,81 @@
+/**
+ * A radial chart with a custom shape, a chart block ported from shadcn/ui's chart-radial-shape.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-shape` at
+ * `components/charts/chart-radial-shape.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialShape()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'safari', visitors: 1260, fill: 'var(--color-safari)' },
+];
+
+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 ChartRadialShape() {
+  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()}>Radial Chart - Shape</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')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Safari visitors',
+          endAngle: 100,
+          innerRadius: 65,
+          outerRadius: 95,
+          grid: { gridType: 'circle', radialLines: false, stroke: 'none', class: 'first:fill-muted last:fill-background', polarRadius: [86, 74] },
+          center: ({ cx, cy }) => svg`
+              <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+                <tspan x=${cx} y=${cy} class="fill-foreground text-4xl font-bold">${chartData[0].visitors.toLocaleString('en-US')}</tspan>
+                <tspan x=${cx} y=${cy + 24} class="fill-muted-foreground">Visitors</tspan>
+              </text>`,
+          bars: [{ dataKey: 'visitors', background: true }],
+        })}
+      </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-radial-simple.ts

@@ -0,0 +1,79 @@
+/**
+ * A radial chart, a chart block ported from shadcn/ui's chart-radial-simple.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-simple` at
+ * `components/charts/chart-radial-simple.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialSimple()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, 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 ChartRadialSimple() {
+  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()}>Radial Chart</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')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Visitors by browser',
+          innerRadius: 30,
+          outerRadius: 110,
+          tooltip: { cursor: false, hideLabel: true, nameKey: 'browser' },
+          bars: [{ dataKey: 'visitors', background: true }],
+        })}
+      </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-radial-stacked.ts

@@ -0,0 +1,69 @@
+/**
+ * A radial chart with stacked sections, a chart block ported from shadcn/ui's chart-radial-stacked.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-stacked` at
+ * `components/charts/chart-radial-stacked.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialStacked()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [{ month: 'january', mobile: 570, desktop: 1260 }];
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: 'var(--chart-1)',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: 'var(--chart-2)',
+  },
+} 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[0].desktop + chartData[0].mobile;
+
+export default function ChartRadialStacked() {
+  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()}>Radial Chart - Stacked</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>January - June 2024</div>
+      </div>
+      <div data-slot="card-content" class=${cn(cardContentClass(), 'flex flex-1 items-center pb-0')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square w-full max-w-[250px]',
+          data: chartData,
+          title: 'Desktop and mobile visitors, January',
+          endAngle: 180,
+          innerRadius: 80,
+          outerRadius: 110,
+          tooltip: { cursor: false, hideLabel: true },
+          center: ({ cx, cy }) => svg`
+              <text x=${cx} y=${cy} text-anchor="middle">
+                <tspan x=${cx} y=${cy - 16} class="fill-foreground text-2xl font-bold">${totalVisitors.toLocaleString('en-US')}</tspan>
+                <tspan x=${cx} y=${cy + 4} class="fill-muted-foreground">Visitors</tspan>
+              </text>`,
+          bars: [
+            { dataKey: 'mobile', fill: 'var(--color-mobile)', stackId: 'a', cornerRadius: 5, class: 'stroke-transparent stroke-2' },
+            { dataKey: 'desktop', stackId: 'a', cornerRadius: 5, fill: 'var(--color-desktop)', class: 'stroke-transparent stroke-2' },
+          ],
+        })}
+      </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-radial-text.ts

@@ -0,0 +1,82 @@
+/**
+ * A radial chart with text, a chart block ported from shadcn/ui's chart-radial-text.
+ *
+ * Installed by `npx @webjsdev/ui add chart-radial-text` at
+ * `components/charts/chart-radial-text.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartRadialText()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardFooterClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { radialBarChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+];
+
+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 ChartRadialText() {
+  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()}>Radial Chart - 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')}>
+        ${radialBarChart({
+          config: chartConfig,
+          class: 'mx-auto aspect-square max-h-[250px]',
+          data: chartData,
+          title: 'Safari visitors',
+          startAngle: 0,
+          endAngle: 250,
+          outerRadius: 90,
+          innerRadius: 80,
+          grid: { gridType: 'circle', radialLines: false, stroke: 'none', class: 'first:fill-muted last:fill-background', polarRadius: [90, 80] },
+          center: ({ cx, cy }) => svg`
+              <text x=${cx} y=${cy} text-anchor="middle" dominant-baseline="middle">
+                <tspan x=${cx} y=${cy} class="fill-foreground text-4xl font-bold">${chartData[0].visitors.toLocaleString('en-US')}</tspan>
+                <tspan x=${cx} y=${cy + 24} class="fill-muted-foreground">Visitors</tspan>
+              </text>`,
+          bars: [{ dataKey: 'visitors', background: true, cornerRadius: 10 }],
+        })}
+      </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-tooltip-advanced.ts

@@ -0,0 +1,84 @@
+/**
+ * A stacked bar chart whose tooltip adds a total row, a chart block ported from shadcn/ui's chart-tooltip-advanced.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-advanced` at
+ * `components/charts/chart-tooltip-advanced.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipAdvanced()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipAdvanced() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Advanced</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with custom formatter and total.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: {
+            hideLabel: true,
+            class: 'w-[180px]',
+            // Each row with its colour, name and kcal, and a total under the last.
+            formatter: (value, name, item, index) => html`
+              <div class="h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)" style=${`--color-bg: var(--color-${name})`}></div>
+              ${chartConfig[name as keyof typeof chartConfig]?.label || name}
+              <div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
+                ${value}
+                <span class="font-normal text-muted-foreground">kcal</span>
+              </div>
+              ${index === 1
+                ? html`<div class="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
+                    Total
+                    <div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
+                      ${Number(item.payload.running) + Number(item.payload.swimming)}
+                      <span class="font-normal text-muted-foreground">kcal</span>
+                    </div>
+                  </div>`
+                : ''}`,
+            cursor: false,
+            defaultIndex: 1,
+          },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-default.ts

@@ -0,0 +1,62 @@
+/**
+ * A stacked bar chart with the default tooltip, a chart block ported from shadcn/ui's chart-tooltip-default.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-default` at
+ * `components/charts/chart-tooltip-default.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipDefault()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipDefault() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Default</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Default tooltip with ChartTooltipContent.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-formatter.ts

@@ -0,0 +1,75 @@
+/**
+ * A stacked bar chart whose tooltip formats each row, a chart block ported from shadcn/ui's chart-tooltip-formatter.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-formatter` at
+ * `components/charts/chart-tooltip-formatter.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipFormatter()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipFormatter() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Formatter</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with custom formatter .</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: {
+            hideLabel: true,
+            // Each row as the series name and its value in kcal.
+            formatter: (value, name) => html`
+              <div class="flex min-w-[130px] items-center text-xs text-muted-foreground">
+                ${chartConfig[name as keyof typeof chartConfig]?.label || name}
+                <div class="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
+                  ${value}
+                  <span class="font-normal text-muted-foreground">kcal</span>
+                </div>
+              </div>`,
+            cursor: false,
+            defaultIndex: 1,
+          },
+        })}
+      </div>
+    </div>
+  `;
+}