.

2025-12-10 19:05:55 +05:00
parent 5a4cd9748d
commit 8d749cf53c
3 changed files with 112 additions and 0 deletions
@@ -0,0 +1,42 @@
+## Frontend notes: rendering chart JSON blocks
+
+- Markdown now emits chart data as fenced code blocks with language tags like `json:seasonality`, `json:competitors`, `json:audienceSegmentation`, `json:channelsPotential`, and `json:funnel`.
+- Each block is pretty-printed JSON; parse the string inside the fence to feed the relevant chart component.
+- Headings stay the same; only tables were replaced by these code fences.
+
+### Expected shapes
+
+- `seasonality` – object map: `{ "Январь": 70, "Февраль": 60, ... }`.
+- `competitors` – array of objects: `{ name, reach, activity, reviews, strengths, weaknesses }`.
+- `audienceSegmentation` – object with optional arrays: `ageGroups[]`, `genders[]`, `segments[]`, each item `{ label, value }`.
+- `channelsPotential` – array of objects: `{ name, potential, justification }`.
+- `funnel` – array of objects: `{ stage, value, conversion }`.
+
+### Rendering hook (React + react-markdown)
+
+```javascript
+components={{
+  code({ node, inline, className, children, ...props }) {
+    const match = /language-(\w+):([\w-]+)/.exec(className || "");
+    if (!inline && match && match[1] === "json") {
+      const chartType = match[2];
+      const data = JSON.parse(String(children).replace(/\n$/, ""));
+      switch (chartType) {
+        case "seasonality": return <SeasonalityChart data={data} />;
+        case "competitors": return <CompetitorsChart data={data} />;
+        case "audienceSegmentation": return <AudienceSegmentationChart data={data} />;
+        case "channelsPotential": return <ChannelsPotentialChart data={data} />;
+        case "funnel": return <FunnelChart data={data} />;
+        default: return <pre>{children}</pre>;
+      }
+    }
+    return <code className={className} {...props}>{children}</code>;
+  }
+}}
+```
+
+### Tips
+
+- Trim trailing newline before `JSON.parse` to avoid parse errors.
+- Keep a safe fallback (`<pre>`) for unknown chart types.
+- If using another markdown renderer, ensure it preserves the code fence language string in a similar `json:<chart>` format.