43 lines
2.0 KiB
Markdown
43 lines
2.0 KiB
Markdown
## 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.
|