digiops/marketing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
root
2025-12-20 21:24:40 +05:00
parent ca0bbfc852
commit aecb27564f
1 changed files with 72 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/pages/marketing/MarketingAnalysis.vue
+72 -36
View File
@@ -200,18 +200,22 @@
<div class="space-y-6">
<div v-for="(segment, index) in displayContent" :key="index">
<!-- Two-column pair: paragraph text + adjacent json-chart/table -->
<div v-if="segment.type === 'paired'" class="report-pair" :class="{ 'report-pair--mobile-chart-first': segment.mobileOrder === 'chart-first' }">
<div class="report-pair__text">
<div class="markdown-content" v-html="segment.text.html"></div>
</div>
<div
v-if="segment.type === 'paired'"
class="report-pair"
:class="{
'report-pair--mobile-chart-first': segment.mobileOrder === 'chart-first',
'report-pair--mobile-text-first': segment.mobileOrder === 'text-first'
}"
>
<!-- IMPORTANT: media first so text can wrap around float -->
<div class="report-pair__media">
<div v-if="segment.media.type === 'chart'">
<div class="mb-2" v-if="segment.media.title">
<h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">{{ segment.media.title }}</h3>
</div>
<div class="report-pair__mediaChart">
<div class="chart-container report-pair__chart-container" :style="pairedChartContainerStyle">
<div class="chart-container report-pair__chart-container">
<Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
</div>
</div>
@@ -231,7 +235,7 @@
<h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-chart-pie mr-2"></i>{{ segment.media.title }}</h3>
</div>
<div class="report-pair__mediaChart">
<div class="chart-container report-pair__chart-container" :style="pairedChartContainerStyle">
<div class="chart-container report-pair__chart-container">
<Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
</div>
</div>
@@ -269,6 +273,10 @@
</div>
</div>
</div>
<div class="report-pair__text">
<div class="markdown-content" v-html="segment.text.html"></div>
</div>
</div>
<div v-else-if="segment.type === 'markdown'">
@@ -2895,13 +2903,6 @@ const displayContent = computed(() => {
return out;
});
// Compact chart display settings for "side-by-side" (paired) layout
const PAIRED_CHART_MAX_HEIGHT_PX = 280;
const pairedChartContainerStyle = {
height: `${PAIRED_CHART_MAX_HEIGHT_PX}px`,
maxHeight: `${PAIRED_CHART_MAX_HEIGHT_PX}px`
};
const toCompactChartOptions = (options) => {
const base = options && typeof options === 'object' ? options : {};
@@ -2914,7 +2915,10 @@ const toCompactChartOptions = (options) => {
const compact = {
...base,
maintainAspectRatio: false,
responsive: true,
// For this request: keep aspect ratio behavior, but make it visually compact via aspectRatio + CSS max-height
maintainAspectRatio: true,
aspectRatio: typeof base.aspectRatio === 'number' ? base.aspectRatio : 3,
layout: {
...(base.layout && typeof base.layout === 'object' ? base.layout : {}),
padding: 0
@@ -3267,49 +3271,64 @@ onBeforeUnmount(() => {
}
.report-pair {
display: flex;
/* Don't stretch the media column to the full height of long text */
align-items: flex-start;
gap: 1.5rem;
/* Use text wrapping around the chart to avoid empty whitespace under the chart */
display: block;
}
.report-pair__text,
.report-pair__media {
flex: 1 1 0;
min-width: 0;
}
.report-pair__text {
flex: 1.5 1 0;
}
/* .report-pair__text: text wraps around floated media (no extra styling needed) */
.report-pair__media {
flex: 1 1 0;
float: right;
width: 40%;
max-width: 40%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
min-width: 0;
margin-left: 1.5rem; /* gap between text and chart */
margin-bottom: 0.75rem; /* let text wrap under after chart ends */
}
.report-pair__mediaChart {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.report-pair__chart-container {
width: 100%;
display: flex;
align-items: stretch;
justify-content: stretch;
/* Keep charts compact without forcing wrapper height */
max-height: 250px;
height: auto;
overflow: hidden;
}
/* clearfix for floated media */
.report-pair::after {
content: '';
display: block;
clear: both;
}
/* Remove top/bottom margins inside paired markdown so text starts flush with chart title/area */
.report-pair__text .markdown-content :deep(> *:first-child) {
margin-top: 0 !important;
}
.report-pair__text .markdown-content :deep(> *:last-child) {
margin-bottom: 0 !important;
}
/* Ensure Chart.js canvas doesn't add extra whitespace and respects container width */
.report-pair__chart-container :deep(canvas) {
width: 100% !important;
height: auto !important;
max-height: 250px;
display: block;
}
@media (max-width: 768px) {
.report-pair {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Preserve original order when the report had chart before text */
@@ -3321,8 +3340,25 @@ onBeforeUnmount(() => {
}
.report-pair__media {
max-width: none;
float: none;
width: 100%;
max-width: none;
margin-left: 0;
margin-bottom: 0.75rem;
}
/* Preserve original order on mobile */
.report-pair--mobile-text-first .report-pair__text {
order: 1;
}
.report-pair--mobile-text-first .report-pair__media {
order: 2;
}
.report-pair--mobile-chart-first .report-pair__media {
order: 1;
}
.report-pair--mobile-chart-first .report-pair__text {
order: 2;
}
}