.

frontend-chart-rendering.md

@@ -0,0 +1,60 @@
+**Role:** Senior Vue.js Frontend Developer.
+
+**Task:** Refactor `MarketingAnalysis.vue` and `MarketingService.js` to support the new backend response structure and rendering logic.
+
+**Context:**
+The backend logic has changed.
+
+1.  **Endpoint:** The endpoint to fetch analysis results is now `GET api/marketing/analysis/{id}`.
+2.  **Data Structure:** The `report` object in the response now contains a field `fullAnalysis`. This field is a huge Markdown string.
+3.  **Embedded Charts:** Inside this Markdown string, there are code blocks containing JSON data for charts/tables. They look like this:
+
+    ````markdown
+    ... text ...
+
+    ```json:seasonality
+    { ...data... }
+    ```
+    ````
+
+    ... text ...
+
+    ```
+
+    ```
+
+**Requirements:**
+
+1.  **Update Service:** Ensure `MarketingService.getAnalysisResult(id)` calls the correct endpoint (`api/marketing/analysis/{id}`).
+
+2.  **Refactor Rendering Logic (`MarketingAnalysis.vue`):**
+
+    -   Instead of hardcoded sections for "Summary", "Charts", "SWOT", etc., we need a **Dynamic Markdown Renderer**.
+    -   Create a computed property or a helper function that parses `report.fullAnalysis`.
+    -   It should split the markdown string into an array of segments based on the regex for code blocks: \`\`\`\`json:(\\w+)\\n([\\s\\S]\*?)\\n\`\`\` \`.
+    -   **Iterate through these segments in the template:**
+        -   If the segment is **Text**: Render it using `marked` (v-html).
+        -   If the segment is a **Code Block**, parse the JSON and render the appropriate component based on the identifier (e.g., `seasonality`, `competitors`, `funnel`, `swot`, `channelsPotential`, `audienceSegmentation`).
+
+3.  **Component Mapping:**
+    Reuse the existing UI logic (PrimeVue Charts and Cards) but apply them dynamically inside the loop:
+
+    -   `json:seasonality` -\> Render `Chart type="line"` (reuse existing logic for options/data).
+    -   `json:funnel` -\> Render `Chart type="bar"` (reuse existing logic).
+    -   `json:channelsPotential` -\> Render `Chart type="bar"` + list of justifications.
+    -   `json:audienceSegmentation` -\> Render Pie Charts.
+    -   `json:competitors` -\> Render the grid of competitor cards (reuse existing UI code).
+    -   `json:swot` -\> Render the 4-block SWOT grid (reuse existing UI code).
+
+4.  **Cleanup:**
+
+    -   Remove the old static blocks (Cards for "Краткое резюме", "Графики", "SWOT", "Стратегия"), as they are now all included in the `fullAnalysis` stream.
+    -   Keep the "Header" (Download PDF button) and "Recommendations" (if it's still a separate array in JSON, keep it, otherwise remove).
+    -   Keep the Form for starting the analysis.
+
+**Goal:** The user should see a seamless document flow where text explains the data, and charts/tables appear immediately after the relevant text, exactly as they are placed in the Markdown string.
+
+**Technical Hint:**
+You can create a reactive variable `parsedContent` which is an array of objects: `{ type: 'markdown' | 'chart', content: string | object, chartType?: string }`.
+
+Begin implementation.