marketing/frontend-chart-rendering.md

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:

   ... 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.