marketing-parser/frontend-chart-rendering.md

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)

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.