125 lines
4.9 KiB
Markdown
125 lines
4.9 KiB
Markdown
## Документация для фронтенда: как отображать графики из маркетингового анализа
|
|
|
|
Сервис возвращает данные для графиков в двух местах:
|
|
|
|
- **`report.chartsData`** (объект-словарь ключ → данные графика/таблицы)
|
|
- **`report.fullAnalysis`** (markdown-текст), где данные вставлены **инлайн** как fenced-блоки:
|
|
- формат: ```json:<key> … ```
|
|
|
|
Фронтенд может рендерить графики либо **по `chartsData` (проще)**, либо **инлайн** — парся `fullAnalysis` и заменяя ` ```json:<key>` на React-компоненты.
|
|
|
|
---
|
|
|
|
### Ключи `json:<key>`, которые нужно поддержать
|
|
|
|
#### Chart.js config (рендерить через Chart.js / react-chartjs-2)
|
|
- **`seasonality`**: сезонность (Chart.js config)
|
|
- **`audienceAge`**: возрастное распределение (Chart.js config)
|
|
- **`audienceGender`**: гендерное распределение (Chart.js config)
|
|
- **`marketShareChart`**: доли рынка (Chart.js config)
|
|
- **`channelsPotential`**: потенциал каналов (Chart.js config)
|
|
- **`funnel`**: воронка (Chart.js config)
|
|
Примечание: в `chartsData` ключ может быть `conversionFunnel`, но в тексте `fullAnalysis` блок идёт как `json:funnel`.
|
|
|
|
#### Таблица (рендерить табличным компонентом)
|
|
- **`comparisonTable`**: сравнительная таблица конкурентов (обычно `Array<Object>`)
|
|
|
|
---
|
|
|
|
### Формат данных для графиков (Chart.js config)
|
|
|
|
Ваш пример — это **валидный Chart.js config** (минимально нужные поля: `labels`, `datasets[]`):
|
|
|
|
```json
|
|
{
|
|
"datasets": [
|
|
{
|
|
"data": [25, 30, 20, 25],
|
|
"label": "Возрастные группы"
|
|
}
|
|
],
|
|
"labels": ["18-24", "25-34", "35-44", "45+"]
|
|
}
|
|
```
|
|
|
|
Рендеринг (пример для Bar):
|
|
```ts
|
|
<Bar data={chartJson} />
|
|
```
|
|
|
|
---
|
|
|
|
### Инлайн-рендеринг из `fullAnalysis` (React + react-markdown)
|
|
|
|
Идея: перехватить `code`-блоки, найти `json:<key>`, распарсить JSON и заменить на компонент.
|
|
|
|
```tsx
|
|
import React from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
|
|
function parseInfoString(className?: string) {
|
|
// react-markdown обычно кладёт info string как className вида:
|
|
// "language-json:audienceAge" или "language-json:marketShareChart"
|
|
const m = /language-([^ ]+)/.exec(className || "");
|
|
if (!m) return null;
|
|
const raw = m[1]; // "json:audienceAge"
|
|
const idx = raw.indexOf(":");
|
|
if (idx === -1) return { lang: raw, key: null };
|
|
return { lang: raw.slice(0, idx), key: raw.slice(idx + 1) };
|
|
}
|
|
|
|
export function ReportMarkdown({ markdown }: { markdown: string }) {
|
|
return (
|
|
<ReactMarkdown
|
|
components={{
|
|
code({ inline, className, children, ...props }) {
|
|
if (inline) return <code className={className} {...props}>{children}</code>;
|
|
|
|
const info = parseInfoString(className);
|
|
if (!info || info.lang !== "json" || !info.key) {
|
|
return <pre><code className={className} {...props}>{children}</code></pre>;
|
|
}
|
|
|
|
const raw = String(children).replace(/\n$/, "");
|
|
let data: any;
|
|
try {
|
|
data = JSON.parse(raw);
|
|
} catch {
|
|
return <pre><code className={className} {...props}>{children}</code></pre>;
|
|
}
|
|
|
|
switch (info.key) {
|
|
case "seasonality":
|
|
return <SeasonalityChart data={data} />;
|
|
case "audienceAge":
|
|
return <AudienceAgeChart data={data} />;
|
|
case "audienceGender":
|
|
return <AudienceGenderChart data={data} />;
|
|
case "marketShareChart":
|
|
return <MarketShareChart data={data} />;
|
|
case "channelsPotential":
|
|
return <ChannelsPotentialChart data={data} />;
|
|
case "funnel":
|
|
return <FunnelChart data={data} />;
|
|
case "comparisonTable":
|
|
return <ComparisonTable data={data} />;
|
|
default:
|
|
return <pre><code className={className} {...props}>{children}</code></pre>;
|
|
}
|
|
},
|
|
}}
|
|
>
|
|
{markdown}
|
|
</ReactMarkdown>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### Рекомендации по устойчивости
|
|
|
|
- **JSON.parse**: всегда `trim`/убирайте trailing newline (`replace(/\n$/, "")`).
|
|
- **Fallback**: для неизвестных ключей оставляйте `<pre>` (чтобы ничего не “ломалось”).
|
|
- **Таблицы**: `comparisonTable` лучше рендерить как таблицу, а не Chart.js.
|