@xenide-io/the-old-ui-theme 0.3.0 → 0.3.2

package/src/components/charts/ph-insight-charts.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import "@/lib/chart/register-chartjs";
-import { Bar, Doughnut, PolarArea } from "react-chartjs-2";
-
-import {
-  buildDoughnutDemo,
-  buildHorizontalBarDemo,
-  buildPolarAreaDemo,
-  buildStackedBarDemo,
-  buildVerticalBarDemo,
-} from "@/lib/chart/ph-chart-options";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { buildHogChartTheme } from "@/lib/hog-charts-lite/build-theme";
-import { CanvasTrendLineChart } from "@/lib/hog-charts-lite/CanvasTrendLineChart";
-
-const DEMO_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
-
-function useClientMounted(): boolean {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => setMounted(true), []);
-
-  return mounted;
-}
-
-interface ChartSkeletonProps {
-  className?: string;
-}
-
-function ChartSkeleton({ className = "h-[280px]" }: ChartSkeletonProps) {
-  return (
-    <div
-      className={`w-full animate-pulse rounded-lemon bg-ph-muted ${className}`}
-      aria-hidden
-    />
-  );
-}
-
-export function HogTrendLineChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const theme = useMemo(() => buildHogChartTheme(tokens), [tokens]);
-
-  const series = useMemo(
-    () => [
-      {
-        key: "pageview",
-        label: "$pageview",
-        data: [4200, 5100, 4800, 6200, 5900, 3100, 2800],
-        color: tokens.series[0],
-        fill: { opacity: 0.35 },
-      },
-      {
-        key: "signup",
-        label: "signup_completed",
-        data: [920, 990, 940, 1040, 1012, 540, 510],
-        color: tokens.series[1],
-        stroke: { pattern: [5, 5] as number[] },
-      },
-    ],
-    [tokens.series],
-  );
-
-  if (!mounted) {
-    return <ChartSkeleton />;
-  }
-
-  return (
-    <div className="relative h-[280px] w-full min-h-[220px]">
-      <CanvasTrendLineChart
-        labels={DEMO_LABELS}
-        series={series}
-        theme={theme}
-        showGrid
-        showCrosshair
-        className="h-full min-h-[220px]"
-      />
-    </div>
-  );
-}
-
-export function InsightVerticalBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo(() => buildVerticalBarDemo(tokens), [tokens]);
-
-  if (!mounted) {
-    return <ChartSkeleton />;
-  }
-
-  return (
-    <div className="relative h-[280px] w-full min-h-[220px]">
-      <Bar data={config.data} options={config.options} redraw={false} />
-    </div>
-  );
-}
-
-export function InsightHorizontalBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo(() => buildHorizontalBarDemo(tokens), [tokens]);
-
-  if (!mounted) {
-    return <ChartSkeleton className="h-[320px]" />;
-  }
-
-  return (
-    <div className="relative h-[320px] w-full min-h-[260px]">
-      <Bar data={config.data} options={config.options} redraw={false} />
-    </div>
-  );
-}
-
-export function InsightStackedBarChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo(() => buildStackedBarDemo(tokens), [tokens]);
-
-  if (!mounted) {
-    return <ChartSkeleton className="h-[300px]" />;
-  }
-
-  return (
-    <div className="relative h-[300px] w-full min-h-[240px]">
-      <Bar data={config.data} options={config.options} redraw={false} />
-    </div>
-  );
-}
-
-export function InsightDoughnutChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo(() => buildDoughnutDemo(tokens), [tokens]);
-
-  if (!mounted) {
-    return <ChartSkeleton className="h-[260px]" />;
-  }
-
-  return (
-    <div className="relative mx-auto h-[260px] w-full max-w-[280px] min-h-[220px]">
-      <Doughnut data={config.data} options={config.options} redraw={false} />
-    </div>
-  );
-}
-
-export function InsightPolarAreaChart() {
-  const mounted = useClientMounted();
-  const tokens = useChartTokens();
-  const config = useMemo(() => buildPolarAreaDemo(tokens), [tokens]);
-
-  if (!mounted) {
-    return <ChartSkeleton className="h-[280px]" />;
-  }
-
-  return (
-    <div className="relative mx-auto h-[280px] w-full max-w-[320px] min-h-[240px]">
-      <PolarArea data={config.data} options={config.options} redraw={false} />
-    </div>
-  );
-}

package/src/components/dashboard/DashboardFiltersBar.tsx

@@ -1,19 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/cn";
-
-/**
- * Raised strip reminiscent of dashboard date-range / cohort / breakdown controls.
- * Pass pills or selects as children.
- */
-export function DashboardFiltersBar({ className, ...props }: ComponentPropsWithoutRef<"div">) {
-  return (
-    <div
-      className={cn(
-        "flex flex-wrap items-center gap-2 rounded-[var(--ph-radius-app)] border border-solid bg-ph-surface px-3 py-2 text-sm text-ph-subtle [border-color:var(--ph-border-control)]",
-        "[box-shadow:var(--ph-chrome-inset-face-top),var(--ph-chrome-inset-face-bottom),var(--ph-shadow-elevation-3000)]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/components/dashboard/DashboardGrid.tsx

@@ -1,23 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/cn";
-
-export interface DashboardGridProps extends ComponentPropsWithoutRef<"div"> {
-  /**
-   * Preset breakpoints: 1 col → md:2 cols → xl:3 (matches common insight grids).
-   * Override with your own `className` if you need 4-up or single column.
-   */
-  preset?: "insights" | "dense";
-}
-
-const presetClass: Record<NonNullable<DashboardGridProps["preset"]>, string> = {
-  insights: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
-  dense: "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-};
-
-export function DashboardGrid({
-  preset = "insights",
-  className,
-  ...props
-}: DashboardGridProps) {
-  return <div className={cn(presetClass[preset], className)} {...props} />;
-}

package/src/components/dashboard/DashboardInsightPlaceholder.tsx

@@ -1,37 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/cn";
-
-export interface DashboardInsightPlaceholderProps extends ComponentPropsWithoutRef<"button"> {
-  /** Accessible name when `children` does not include visible text. */
-  label?: string;
-}
-
-/**
- * Mimics PostHog’s empty dashboard slot (“add insight”).
- * Renders `<button>` so you can wire `onClick` → palette / modal.
- *
- * **`onClick` and other event props:** use this inside a Client Component (or a wrapper
- * marked `'use client'`). Server Components cannot serialise function props.
- */
-export function DashboardInsightPlaceholder({
-  label = "Add insight",
-  className,
-  children,
-  type = "button",
-  ...props
-}: DashboardInsightPlaceholderProps) {
-  return (
-    <button
-      type={type}
-      aria-label={label}
-      className={cn(
-        "ph-dashboard-placeholder group text-left outline-none transition",
-        "focus-visible:ring-2 focus-visible:ring-ph-brand focus-visible:ring-offset-2",
-        className,
-      )}
-      {...props}
-    >
-      {children != null ? children : <span className="font-medium text-ph-subtle group-hover:text-ph-ink">{label}</span>}
-    </button>
-  );
-}

package/src/components/dashboard/DashboardKpiCard.tsx

@@ -1,25 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface DashboardKpiCardProps extends ComponentPropsWithoutRef<"article"> {
-  /** Upper label (tabular small caps styling via `.ph-stat-label`). */
-  label: ReactNode;
-  /** Main KPI value. */
-  value: ReactNode;
-  /** Supporting line beneath the value (Δ %, qualifier, etc.). */
-  footer?: ReactNode;
-  /** Optional decorative icon aligned with headline stats across the PostHog app. */
-  icon?: ReactNode;
-}
-
-export function DashboardKpiCard({ label, value, footer, icon, className, children, ...props }: DashboardKpiCardProps) {
-  return (
-    <article className={cn("ph-stat", className)} {...props}>
-      {icon != null ? <div className="mb-2 [&>svg]:h-7 [&>svg]:w-7">{icon}</div> : null}
-      <div className="ph-stat-label">{label}</div>
-      <div className="ph-stat-val">{value}</div>
-      {footer != null ? <p className="mt-1 text-xs text-ph-subtle">{footer}</p> : null}
-      {children}
-    </article>
-  );
-}

package/src/components/dashboard/DashboardToolbar.tsx

@@ -1,23 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface DashboardToolbarProps {
-  /** Dashboard / tab title (matches PostHog H3 weight on canvases). */
-  title: string;
-  description?: string;
-  /** Right-aligned actions slot (buttons, dropdown triggers, etc.). */
-  actions?: ReactNode;
-  className?: string;
-}
-
-export function DashboardToolbar({ title, description, actions, className }: DashboardToolbarProps) {
-  return (
-    <div className={cn("flex flex-wrap items-baseline justify-between gap-4", className)}>
-      <div className="min-w-0">
-        <h3 className="text-lg font-bold text-ph-ink">{title}</h3>
-        {description ? <p className="mt-0.5 text-sm text-ph-mutedtext">{description}</p> : null}
-      </div>
-      {actions != null ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
-    </div>
-  );
-}

package/src/components/dashboard/DashboardWell.tsx

@@ -1,10 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import { cn } from "@/lib/cn";
-
-export interface DashboardWellProps extends ComponentPropsWithoutRef<"div"> {
-  /** Passed through to inner div; merges with `.ph-dashboard-well` */
-}
-
-export function DashboardWell({ className, ...props }: DashboardWellProps) {
-  return <div className={cn("ph-dashboard-well", className)} {...props} />;
-}

package/src/components/dashboard/InsightMiniCard.tsx

@@ -1,26 +0,0 @@
-import type { InsightShellProps } from "./InsightShell";
-import { InsightShell } from "./InsightShell";
-import { InsightShellHeader } from "./InsightShellHeader";
-import { MiniTrendBars } from "./MiniTrendBars";
-
-export interface InsightMiniCardProps extends Omit<InsightShellProps, "children"> {
-  title: string;
-  subtitle?: string;
-  heights: readonly number[];
-}
-
-/** Opinionated insight tile: coloured ribbon + headline + subtitle + mini Hog-style bar sparkline. */
-export function InsightMiniCard({
-  title,
-  subtitle,
-  heights,
-  ribbonColour,
-  ...shellProps
-}: InsightMiniCardProps) {
-  return (
-    <InsightShell ribbonColour={ribbonColour} {...shellProps}>
-      <InsightShellHeader title={title} subtitle={subtitle} />
-      <MiniTrendBars heights={heights} />
-    </InsightShell>
-  );
-}

package/src/components/dashboard/InsightShell.tsx

@@ -1,37 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import type { RibbonColour } from "./types";
-import { cn } from "@/lib/cn";
-
-export interface InsightShellProps extends ComponentPropsWithoutRef<"article"> {
-  /**
-   * Left ribbon fill; omit or pass empty string for a flat card (no ribbon column).
-   * Prefer `var(--ph-product-*)` or `var(--ph-data-*)` tokens from `globals.css`.
-   */
-  ribbonColour?: RibbonColour | null;
-  /** Extra classes on the padded body column (e.g. `gap-4`). */
-  bodyClassName?: string;
-}
-
-export function InsightShell({
-  ribbonColour,
-  bodyClassName,
-  className,
-  children,
-  ...props
-}: InsightShellProps) {
-  const ribbon =
-    ribbonColour != null && String(ribbonColour).trim() !== "" ? String(ribbonColour).trim() : null;
-
-  return (
-    <article className={cn("ph-insight-shell flex-row", className)} {...props}>
-      {ribbon != null ? (
-        <div
-          className="ph-insight-shell__ribbon min-h-[7rem] shrink-0 self-stretch"
-          style={{ background: ribbon }}
-          aria-hidden
-        />
-      ) : null}
-      <div className={cn("flex min-w-0 flex-1 flex-col gap-3 p-4", bodyClassName)}>{children}</div>
-    </article>
-  );
-}

package/src/components/dashboard/InsightShellHeader.tsx

@@ -1,22 +0,0 @@
-import type { ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface InsightShellHeaderProps {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  /** Trailing widgets (menus, fullscreen, cohort badge). */
-  actions?: ReactNode;
-  className?: string;
-}
-
-export function InsightShellHeader({ title, subtitle, actions, className }: InsightShellHeaderProps) {
-  return (
-    <header className={cn("flex gap-3", actions != null ? "items-start justify-between" : "", className)}>
-      <div className="min-w-0 flex-1">
-        <h4 className="font-semibold leading-snug text-ph-ink">{title}</h4>
-        {subtitle != null ? <p className="mt-0.5 text-xs text-ph-mutedtext">{subtitle}</p> : null}
-      </div>
-      {actions != null ? <div className="flex shrink-0 items-center gap-1">{actions}</div> : null}
-    </header>
-  );
-}

package/src/components/dashboard/MiniTrendBars.tsx

@@ -1,51 +0,0 @@
-import type { CSSProperties } from "react";
-import { cn } from "@/lib/cn";
-
-const DEFAULT_SERIES_CYCLE = [1, 2, 3, 4, 5, 6, 7] as const;
-
-export interface MiniTrendBarsProps {
-  /** Normalised heights 0–100 for each bar (% of chart row). */
-  heights: readonly number[];
-  /** Tailwind height of the bars row (flex align-end). Default matches gallery `h-28`. */
-  rowClassName?: string;
-  /**
-   * Map bar index → CSS `--ph-data-*` token index (1–7).
-   * Default cycles through PostHog’s default trend palette.
-   */
-  seriesResolver?: (index: number, height: number) => number;
-  className?: string;
-}
-
-function clampPct(n: number): number {
-  if (!Number.isFinite(n)) {
-    return 0;
-  }
-  return Math.max(0, Math.min(100, n));
-}
-
-export function MiniTrendBars({
-  heights,
-  rowClassName = "h-28",
-  seriesResolver,
-  className,
-}: MiniTrendBarsProps) {
-  const resolveSeries =
-    seriesResolver ??
-    ((i: number) => DEFAULT_SERIES_CYCLE[i % DEFAULT_SERIES_CYCLE.length] ?? 1);
-
-  return (
-    <div className={cn("flex items-end gap-0.5", rowClassName, className)}>
-      {heights.map((raw, i) => {
-        const pct = clampPct(raw);
-        const series = resolveSeries(i, pct);
-        const style = {
-          height: `${pct}%`,
-          background: `var(--ph-data-${String(series)})`,
-          minHeight: pct > 0 ? 4 : 0,
-        } satisfies CSSProperties;
-
-        return <div key={`bar-${String(i)}`} className="min-h-0 flex-1 rounded-t-[3px]" style={style} />;
-      })}
-    </div>
-  );
-}

package/src/components/dashboard/index.ts

@@ -1,31 +0,0 @@
-export { cn } from "@/lib/cn";
-export type { RibbonColour, Slot } from "./types";
-
-export { DashboardWell } from "./DashboardWell";
-export type { DashboardWellProps } from "./DashboardWell";
-
-export { DashboardToolbar } from "./DashboardToolbar";
-export type { DashboardToolbarProps } from "./DashboardToolbar";
-
-export { DashboardGrid } from "./DashboardGrid";
-export type { DashboardGridProps } from "./DashboardGrid";
-
-export { DashboardFiltersBar } from "./DashboardFiltersBar";
-
-export { DashboardKpiCard } from "./DashboardKpiCard";
-export type { DashboardKpiCardProps } from "./DashboardKpiCard";
-
-export { DashboardInsightPlaceholder } from "./DashboardInsightPlaceholder";
-export type { DashboardInsightPlaceholderProps } from "./DashboardInsightPlaceholder";
-
-export { InsightShell } from "./InsightShell";
-export type { InsightShellProps } from "./InsightShell";
-
-export { InsightShellHeader } from "./InsightShellHeader";
-export type { InsightShellHeaderProps } from "./InsightShellHeader";
-
-export { MiniTrendBars } from "./MiniTrendBars";
-export type { MiniTrendBarsProps } from "./MiniTrendBars";
-
-export { InsightMiniCard } from "./InsightMiniCard";
-export type { InsightMiniCardProps } from "./InsightMiniCard";

package/src/components/dashboard/types.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from "react";
-
-/**
- * Any CSS `<color>` usable in `background`, e.g. `var(--ph-product-session-replay)` or `#1d4aff`.
- */
-export type RibbonColour = string;
-
-/** Children slot pattern used across dashboard primitives */
-export type Slot = ReactNode;

package/src/components/sections/ChartShowcase.tsx

@@ -1,190 +0,0 @@
-import {
-  HogTrendLineChart,
-  InsightDoughnutChart,
-  InsightHorizontalBarChart,
-  InsightPolarAreaChart,
-  InsightStackedBarChart,
-  InsightVerticalBarChart,
-} from "@/components/charts";
-import { DashboardWell, InsightShell, InsightShellHeader } from "@/components/dashboard";
-import { ShowcaseWrapper } from "@/components/ui";
-
-export default function ChartShowcase() {
-  const code = `import { HogTrendLineChart, InsightDoughnutChart, InsightHorizontalBarChart, InsightPolarAreaChart, InsightStackedBarChart, InsightVerticalBarChart } from "the-old-ui";
-import { DashboardWell, InsightShell, InsightShellHeader } from "the-old-ui";
-
-<DashboardWell>
-  <div className="grid gap-6 lg:grid-cols-2">
-    <InsightShell className="min-h-0">
-      <InsightShellHeader
-        title="Trends (hog-charts model · canvas + d3-scale)"
-        subtitle={
-          <>
-            Same <code className="ph-kbd">Series</code> shape as PostHog (<code className="ph-kbd">stroke.pattern</code>,
-            <code className="ph-kbd">fill.opacity</code>), 2&nbsp;px round-capped strokes, horizontal grid, dashed
-            crosshair, multi-series hover ring.
-          </>
-        }
-      />
-      <HogTrendLineChart />
-    </InsightShell>
-
-    <InsightShell className="min-h-0">
-      <InsightShellHeader
-        title="Vertical bars (Chart.js)"
-        subtitle={
-          <>
-            Bar charts in PostHog&apos;s UI are also built on <code className="ph-kbd">TimeSeriesBarChart</code> /
-            <code className="ph-kbd">BarChart</code> in hog-charts; this tile uses Chart.js with the same semantic
-            <code className="ph-kbd">--ph-data-*</code> colours.
-          </>
-        }
-      />
-      <InsightVerticalBarChart />
-    </InsightShell>
-
-    <InsightShell className="min-h-0 lg:col-span-2">
-      <InsightShellHeader
-        title="Horizontal bar (Chart.js)"
-        subtitle={
-          <>
-            <code className="ph-kbd">indexAxis: &quot;y&quot;</code> mirrors long-label breakdowns (URLs, flags, cohorts).
-          </>
-        }
-      />
-      <InsightHorizontalBarChart />
-    </InsightShell>
-
-    <InsightShell className="min-h-0 lg:col-span-2">
-      <InsightShellHeader
-        title="Stacked breakdown (Chart.js)"
-        subtitle={
-          <>
-            Multiple datasets with <code className="ph-kbd">stacked: true</code> — analogous to multi-series bar
-            layouts in insights.
-          </>
-        }
-      />
-      <InsightStackedBarChart />
-    </InsightShell>
-
-    <InsightShell className="min-h-0">
-      <InsightShellHeader
-        title="Doughnut (Chart.js)"
-        subtitle={
-          <>
-            <code className="ph-kbd">ArcElement</code> + <code className="ph-kbd">cutout</code> for donut slices;
-            legend and tooltip use the same CSS-variable palette.
-          </>
-        }
-      />
-      <InsightDoughnutChart />
-    </InsightShell>
-
-    <InsightShell className="min-h-0">
-      <InsightShellHeader
-        title="Polar area (Chart.js)"
-        subtitle={
-          <>
-            <code className="ph-kbd">RadialLinearScale</code> for spoke grid lines; useful for compact multi-metric
-            comparisons.
-          </>
-        }
-      />
-      <InsightPolarAreaChart />
-    </InsightShell>
-  </div>
-</DashboardWell>`;
-
-  return (
-    <ShowcaseWrapper
-      title="Charts (PostHog-style)"
-      description="In the open-source PostHog app, most product-analytics trend lines and areas are drawn with hog-charts — Canvas 2D plus D3 scales. Chart.js remains for some chart types."
-      code={code}
-      filename="ChartExample.tsx"
-    >
-      <DashboardWell>
-        <div className="grid gap-6 lg:grid-cols-2">
-          <InsightShell className="min-h-0">
-            <InsightShellHeader
-              title="Trends (hog-charts model · canvas + d3-scale)"
-              subtitle={
-                <>
-                  Same <code className="ph-kbd">Series</code> shape as PostHog (<code className="ph-kbd">stroke.pattern</code>,
-                  <code className="ph-kbd">fill.opacity</code>), 2&nbsp;px round-capped strokes, horizontal grid, dashed
-                  crosshair, multi-series hover ring.
-                </>
-              }
-            />
-            <HogTrendLineChart />
-          </InsightShell>
-
-          <InsightShell className="min-h-0">
-            <InsightShellHeader
-              title="Vertical bars (Chart.js)"
-              subtitle={
-                <>
-                  Bar charts in PostHog&apos;s UI are also built on <code className="ph-kbd">TimeSeriesBarChart</code> /
-                  <code className="ph-kbd">BarChart</code> in hog-charts; this tile uses Chart.js with the same semantic
-                  <code className="ph-kbd">--ph-data-*</code> colours.
-                </>
-              }
-            />
-            <InsightVerticalBarChart />
-          </InsightShell>
-
-          <InsightShell className="min-h-0 lg:col-span-2">
-            <InsightShellHeader
-              title="Horizontal bar (Chart.js)"
-              subtitle={
-                <>
-                  <code className="ph-kbd">indexAxis: &quot;y&quot;</code> mirrors long-label breakdowns (URLs, flags, cohorts).
-                </>
-              }
-            />
-            <InsightHorizontalBarChart />
-          </InsightShell>
-
-          <InsightShell className="min-h-0 lg:col-span-2">
-            <InsightShellHeader
-              title="Stacked breakdown (Chart.js)"
-              subtitle={
-                <>
-                  Multiple datasets with <code className="ph-kbd">stacked: true</code> — analogous to multi-series bar
-                  layouts in insights.
-                </>
-              }
-            />
-            <InsightStackedBarChart />
-          </InsightShell>
-
-          <InsightShell className="min-h-0">
-            <InsightShellHeader
-              title="Doughnut (Chart.js)"
-              subtitle={
-                <>
-                  <code className="ph-kbd">ArcElement</code> + <code className="ph-kbd">cutout</code> for donut slices;
-                  legend and tooltip use the same CSS-variable palette.
-                </>
-              }
-            />
-            <InsightDoughnutChart />
-          </InsightShell>
-
-          <InsightShell className="min-h-0">
-            <InsightShellHeader
-              title="Polar area (Chart.js)"
-              subtitle={
-                <>
-                  <code className="ph-kbd">RadialLinearScale</code> for spoke grid lines; useful for compact multi-metric
-                  comparisons.
-                </>
-              }
-            />
-            <InsightPolarAreaChart />
-          </InsightShell>
-        </div>
-      </DashboardWell>
-    </ShowcaseWrapper>
-  );
-}