61 lines
3.0 KiB
Markdown
61 lines
3.0 KiB
Markdown
**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.
|