Enable editable playgrounds for chart examples

Author: iexitdev

apps/site/src/lib/remark-strip-duplicate-title.mjs

@@ -98,10 +98,30 @@ const escapeAttribute = (value) =>
     .replace(/"/g, """)
     .replace(/</g, "&lt;");
 
-const editablePreviewIds = new Set(["line-basic"]);
-
 const encodeCodeAttribute = (value) => encodeURIComponent(String(value));
 
+const playgroundDocs = new Set([
+  "getting-started/installation.md",
+  "recipes/README.md",
+  "charts/area.md",
+  "charts/bar.md",
+  "charts/contribution-heatmap.md",
+  "charts/donut.md",
+  "charts/line.md",
+  "charts/pie.md",
+  "charts/progress.md"
+]);
+
+const chartComponentPattern =
+  /<\s*(AreaChart|BarChart|ContributionGraph|DonutChart|LineChart|PieChart|ProgressChart|ProgressRing|StackedBarChart)\b/;
+
+const slugify = (value) =>
+  String(value)
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "");
+
 const getPreviewHtml = (id, title) => {
   const titleAttribute =
     typeof title === "string" && title.length > 0
@@ -113,11 +133,68 @@ const getPreviewHtml = (id, title) => {
   )}"${titleAttribute}><div class="chart-kit-preview-fallback">Loading chart preview</div></chart-kit-preview>`;
 };
 
-const transformPreviewDirectives = (tree) => {
+const getPlaygroundHtml = (id, code, title) => {
+  const titleAttribute =
+    typeof title === "string" && title.length > 0
+      ? ` data-preview-title="${escapeAttribute(title)}"`
+      : "";
+
+  return `<chart-kit-playground data-preview-id="${escapeAttribute(
+    id
+  )}" data-code="${escapeAttribute(
+    encodeCodeAttribute(code)
+  )}"${titleAttribute}><div class="chart-kit-preview-fallback">Loading chart playground</div></chart-kit-playground>`;
+};
+
+const isRenderableChartExample = (node, docsPath) =>
+  playgroundDocs.has(docsPath) &&
+  node?.type === "code" &&
+  ["jsx", "tsx"].includes(node.lang) &&
+  chartComponentPattern.test(node.value ?? "");
+
+const getGeneratedPreviewId = (docsPath, title, index) => {
+  const pathSlug = slugify(
+    docsPath.replace(/\/README\.md$/, "").replace(/\.mdx?$/, "")
+  );
+  const titleSlug = slugify(title || "example");
+
+  return `${pathSlug}-${titleSlug || "example"}-${index}`;
+};
+
+const transformPreviewDirectives = (tree, file) => {
+  const docsPath = getDocsEntryPath(file);
+
   if (Array.isArray(tree.children)) {
+    let currentHeading = file.data?.astro?.frontmatter?.title ?? "";
+    let generatedPreviewIndex = 0;
+
     for (let index = 0; index < tree.children.length; index += 1) {
       const node = tree.children[index];
 
+      if (node.type === "heading" && node.depth >= 2) {
+        currentHeading = textFromNode(node).trim();
+        continue;
+      }
+
+      if (
+        isRenderableChartExample(node, docsPath) &&
+        tree.children[index + 1]?.type !== "leafDirective"
+      ) {
+        generatedPreviewIndex += 1;
+        node.type = "html";
+        node.value = getPlaygroundHtml(
+          getGeneratedPreviewId(
+            docsPath,
+            currentHeading,
+            generatedPreviewIndex
+          ),
+          node.value,
+          currentHeading
+        );
+        node.children = [];
+        continue;
+      }
+
       if (node.type !== "leafDirective" || node.name !== "chart-preview") {
         continue;
       }
@@ -135,22 +212,13 @@ const transformPreviewDirectives = (tree) => {
       const previousNode = tree.children[index - 1];
 
       if (
-        editablePreviewIds.has(id) &&
         previousNode?.type === "code" &&
         ["jsx", "tsx"].includes(previousNode.lang)
       ) {
         const title = node.attributes?.title;
-        const titleAttribute =
-          typeof title === "string" && title.length > 0
-            ? ` data-preview-title="${escapeAttribute(title)}"`
-            : "";
 
         previousNode.type = "html";
-        previousNode.value = `<chart-kit-playground data-preview-id="${escapeAttribute(
-          id
-        )}" data-code="${escapeAttribute(
-          encodeCodeAttribute(previousNode.value)
-        )}"${titleAttribute}><div class="chart-kit-preview-fallback">Loading chart playground</div></chart-kit-playground>`;
+        previousNode.value = getPlaygroundHtml(id, previousNode.value, title);
         previousNode.children = [];
         tree.children.splice(index, 1);
         index -= 1;
@@ -223,6 +291,6 @@ export default function stripDuplicateTitle() {
     });
 
     rewriteMarkdownLinks(tree, file);
-    transformPreviewDirectives(tree);
+    transformPreviewDirectives(tree, file);
   };
 }

apps/site/src/previews/ChartPlayground.tsx

@@ -20,12 +20,16 @@ import {
   BarChart,
   ChartKitProvider,
   ContributionGraph,
+  createChartPreset,
   DonutChart,
   LineChart,
   PieChart,
   ProgressChart,
+  ProgressRing,
+  StackedBarChart,
   type ChartKitThemeMode
 } from "react-native-chart-kit/v2";
+import { G, Line as SvgLine, Rect, Text as SvgText } from "react-native-svg";
 
 import {
   acquisitionShare,
@@ -62,6 +66,34 @@ const getComponentName = (code: string) => {
   return declaration?.[1];
 };
 
+const getStatementStyleLiveCode = (code: string) => {
+  const lines = code.split("\n");
+  const firstJsxLineIndex = lines.findIndex((line) =>
+    /^\s*<[A-Z][\w.]*/.test(line)
+  );
+
+  if (firstJsxLineIndex === -1) {
+    return undefined;
+  }
+
+  const setupCode = lines.slice(0, firstJsxLineIndex).join("\n").trim();
+  const jsxCode = lines
+    .slice(firstJsxLineIndex)
+    .join("\n")
+    .trim()
+    .replace(/(\/>|<\/[A-Z][\w.]*>);/g, "$1");
+
+  return `function ChartKitLiveExample() {
+${setupCode ? `${setupCode}\n\n` : ""}return (
+  <>
+${jsxCode}
+  </>
+);
+}
+
+render(<ChartKitLiveExample />);`;
+};
+
 const prepareLiveCode = (code: string) => {
   const componentName = getComponentName(code);
   const runnableCode = code
@@ -80,6 +112,12 @@ const prepareLiveCode = (code: string) => {
     return `(() => {\n${runnableCode}\n\nrender(<${componentName} />);\n})();`;
   }
 
+  const statementStyleLiveCode = getStatementStyleLiveCode(runnableCode);
+
+  if (statementStyleLiveCode) {
+    return `(() => {\n${statementStyleLiveCode}\n})();`;
+  }
+
   return `(() => {\nrender(${runnableCode});\n})();`;
 };
 
@@ -98,6 +136,93 @@ const MAX_EDITOR_SIZE = 70;
 const clamp = (value: number, min: number, max: number) =>
   Math.min(max, Math.max(min, value));
 
+const barPlaygroundData = signups.map((row) => ({
+  ...row,
+  newCustomers: row.signups,
+  organic: row.signups,
+  paid: row.expansion,
+  spend: row.signups,
+  week: row.month
+}));
+
+const linePlaygroundData = monthRevenue.map((row, index) => {
+  const barRow = barPlaygroundData[index % barPlaygroundData.length];
+
+  return {
+    ...row,
+    actual: row.revenue,
+    attainment: row.retention,
+    benchmark: row.forecast,
+    date: row.month,
+    expansion: barRow.expansion,
+    newCustomers: barRow.newCustomers,
+    organic: barRow.organic,
+    paid: barRow.paid,
+    portfolio: row.revenue,
+    price: row.revenue,
+    signups: barRow.signups,
+    spend: barRow.spend,
+    timestamp: index + 1,
+    week: barRow.week
+  };
+});
+
+const revenueMixPlaygroundData = revenueMix.map((row) => ({
+  ...row,
+  plan: row.label,
+  revenue: row.value
+}));
+
+const acquisitionSharePlaygroundData = acquisitionShare.map((row) => ({
+  ...row,
+  share: row.value
+}));
+
+const weeklySpend = Array.from({ length: 14 }, (_, index) => ({
+  spend: 24 + Math.round(Math.sin(index / 2) * 8 + index * 2.4),
+  week: `W${index + 1}`
+}));
+
+const weeklyAcquisition = weeklySpend.map((row, index) => ({
+  ...row,
+  organic: 32 + index * 4,
+  paid: 18 + Math.round(Math.cos(index / 2) * 6 + index * 2)
+}));
+
+const portfolioHistory = Array.from({ length: 120 }, (_, index) => {
+  const portfolio = 84000 + index * 620 + Math.sin(index / 5) * 4200;
+  const benchmark = 81000 + index * 520 + Math.cos(index / 7) * 3200;
+
+  return {
+    benchmark,
+    date: `Day ${index + 1}`,
+    month: `Day ${index + 1}`,
+    portfolio,
+    price: portfolio,
+    timestamp: index + 1
+  };
+});
+
+const largeData = portfolioHistory.map((row, index) => ({
+  ...row,
+  price: 120 + index * 1.8 + Math.sin(index / 4) * 16
+}));
+
+const retentionSegments = [
+  { accounts: 124, color: "#00163f", status: "Active" },
+  { accounts: 46, color: "#2f5f9f", status: "At risk" },
+  { accounts: 18, color: "#6f88aa", status: "Paused" }
+];
+
+const previewDataById: Record<string, unknown[]> = {
+  "bar-grouped": barPlaygroundData,
+  "line-multi-series": linePlaygroundData,
+  "line-selection": linePlaygroundData
+};
+
+const getPreviewData = (id: string) =>
+  previewDataById[id] ?? linePlaygroundData;
+
 const writeClipboard = async (value: string) => {
   if (navigator.clipboard?.writeText) {
     await navigator.clipboard.writeText(value);
@@ -262,30 +387,53 @@ export const ChartPlayground = ({ code, id }: { code: string; id: string }) => {
       AreaChart,
       BarChart,
       ContributionGraph,
+      ChartKitProvider,
       DonutChart,
+      G,
       LineChart,
       PieChart,
       ProgressChart,
+      ProgressRing,
       React,
+      Rect,
+      StackedBarChart,
+      SvgText,
       Text,
       View,
-      acquisitionShare,
+      acquisitionShare: acquisitionSharePlaygroundData,
       clampChartWidth,
       contributionValues,
-      data: monthRevenue,
+      createChartPreset,
+      data: getPreviewData(id),
+      largeData,
       money,
       monthRevenue,
       percent,
+      plans: revenueMixPlaygroundData,
       platformShare,
+      portfolioHistory,
       previewWidth: clampChartWidth(width),
       profit,
       progressRings,
-      revenueMix,
+      revenueMix: revenueMixPlaygroundData,
+      retentionSegments,
       signedMoney,
       signups,
-      supportVolume
+      setHeaderValue: () => undefined,
+      setSelectedChannel: () => undefined,
+      setSelectedDay: () => undefined,
+      setViewport: () => undefined,
+      supportVolume,
+      SvgLine,
+      Line: SvgLine,
+      usageDays: contributionValues,
+      useState: React.useState,
+      values: contributionValues,
+      viewport: { endIndex: 90, startIndex: 40 },
+      weeklyAcquisition,
+      weeklySpend
     }),
-    [width]
+    [id, width]
   );
 
   const playgroundStyle = useMemo(

docs/charts/progress.md

@@ -7,8 +7,10 @@ description: Show circular progress values with configurable labels and accessib
 
 The v2 progress surface supports concentric rings and single-ring completion states. It accepts object rows for the modern API and the legacy Chart Kit progress data shape.
 
+## Concentric Rings
+
 ```tsx
-import { ProgressChart, ProgressRing } from "react-native-chart-kit/v2";
+import { ProgressChart } from "react-native-chart-kit/v2";
 
 const data = [
   { metric: "Move", progress: 0.72, color: "#f43f5e" },
@@ -26,6 +28,14 @@ const data = [
   preset="health"
   centerLabel={({ average }) => `${Math.round(average * 100)}%`}
 />;
+```
+
+::chart-preview{id="progress-rings"}
+
+## Single Ring
+
+```tsx
+import { ProgressRing } from "react-native-chart-kit/v2";
 
 <ProgressRing
   value={0.64}
@@ -36,8 +46,6 @@ const data = [
 />;
 ```
 
-::chart-preview{id="progress-rings"}
-
 ## Compatibility Shape
 
 The legacy data object still works: