Unify the web UI on shared controls and let pipeline columns be managed on the board.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import type { HomeDashboardTrendPointDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
trend: HomeDashboardTrendPointDto[];
|
||||
@@ -20,33 +21,61 @@ const demoTrend: HomeDashboardTrendPointDto[] = [
|
||||
const trend = computed(() => (props.trend.length ? props.trend : demoTrend));
|
||||
const change = computed(() => props.changePercent ?? 14);
|
||||
|
||||
const points = computed(() => {
|
||||
const rows = trend.value;
|
||||
const max = Math.max(...rows.map((p) => p.amount), 1);
|
||||
const w = 360;
|
||||
const h = 150;
|
||||
const padX = 16;
|
||||
const padY = 36;
|
||||
return rows.map((p, i) => ({
|
||||
...p,
|
||||
x: padX + (i / Math.max(rows.length - 1, 1)) * (w - padX * 2),
|
||||
y: h - padY - (p.amount / max) * (h - padY * 2),
|
||||
}));
|
||||
});
|
||||
|
||||
const line = computed(() => points.value.map((p) => `${p.x},${p.y}`).join(' '));
|
||||
|
||||
const area = computed(() => {
|
||||
if (!points.value.length) return '';
|
||||
const first = points.value[0]!;
|
||||
const last = points.value[points.value.length - 1]!;
|
||||
return `${line.value} ${last.x},160 ${first.x},160`;
|
||||
});
|
||||
|
||||
const highlight = computed(() => {
|
||||
if (!points.value.length) return null;
|
||||
return points.value.reduce((best, cur) => (cur.amount >= best.amount ? cur : best));
|
||||
});
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
grid: { top: 28, right: 8, bottom: 28, left: 8, containLabel: true },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (params) => {
|
||||
const row = Array.isArray(params) ? params[0] : params;
|
||||
const point = trend.value[row.dataIndex ?? 0];
|
||||
if (!point) return '';
|
||||
return `${point.monthLabel}<br/>${props.formatAmount(point.amount)}`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: trend.value.map((p) => p.monthLabel),
|
||||
boundaryGap: false,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#94a3b8',
|
||||
fontFamily: 'IRANSans, Tahoma, sans-serif',
|
||||
fontSize: 11,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { color: '#eef2f7' } },
|
||||
axisLabel: { show: false },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
data: trend.value.map((p) => p.amount),
|
||||
smooth: 0.35,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: { color: '#14b8a6', borderColor: '#fff', borderWidth: 2 },
|
||||
lineStyle: { color: '#14b8a6', width: 3 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(20, 184, 166, 0.28)' },
|
||||
{ offset: 1, color: 'rgba(20, 184, 166, 0)' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -57,73 +86,17 @@ const highlight = computed(() => {
|
||||
{{ formatChange(change) }} نسبت به ماه قبل
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="chart-wrap">
|
||||
<svg viewBox="0 0 360 170" class="line-chart" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="homeTrendFill" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#14b8a6" stop-opacity="0.28" />
|
||||
<stop offset="100%" stop-color="#14b8a6" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<line
|
||||
v-for="y in [40, 75, 110, 145]"
|
||||
:key="y"
|
||||
x1="12"
|
||||
:y1="y"
|
||||
x2="348"
|
||||
:y2="y"
|
||||
stroke="#eef2f7"
|
||||
stroke-width="1"
|
||||
/>
|
||||
<polygon v-if="area" :points="area" fill="url(#homeTrendFill)" />
|
||||
<polyline
|
||||
v-if="line"
|
||||
:points="line"
|
||||
fill="none"
|
||||
stroke="#14b8a6"
|
||||
stroke-width="3.2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<g v-for="(p, i) in points" :key="i">
|
||||
<circle :cx="p.x" :cy="p.y" r="4.5" fill="#fff" stroke="#14b8a6" stroke-width="2.4" />
|
||||
</g>
|
||||
<g v-if="highlight">
|
||||
<rect
|
||||
:x="Math.min(Math.max(highlight.x - 52, 4), 256)"
|
||||
:y="highlight.y - 32"
|
||||
width="104"
|
||||
height="24"
|
||||
rx="8"
|
||||
fill="#0f766e"
|
||||
/>
|
||||
<text
|
||||
:x="Math.min(Math.max(highlight.x, 56), 308)"
|
||||
:y="highlight.y - 16"
|
||||
text-anchor="middle"
|
||||
fill="#fff"
|
||||
font-size="9.5"
|
||||
font-family="IRANSans, Tahoma, sans-serif"
|
||||
>
|
||||
{{ formatAmount(highlight.amount) }}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="chart-labels">
|
||||
<span v-for="p in trend" :key="p.monthKey">{{ p.monthLabel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<UiChart :option="option" height="210px" />
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 1rem 1.1rem 0.9rem;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
border: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -135,7 +108,7 @@ const highlight = computed(() => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@@ -149,7 +122,7 @@ h2 {
|
||||
font-weight: 700;
|
||||
color: #16a34a;
|
||||
background: #dcfce7;
|
||||
border-radius: 999px;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.18rem 0.5rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -158,24 +131,4 @@ h2 {
|
||||
color: #dc2626;
|
||||
background: #fee2e2;
|
||||
}
|
||||
|
||||
.chart-wrap {
|
||||
display: grid;
|
||||
gap: 0.15rem;
|
||||
margin-top: auto;
|
||||
padding-top: 2.25rem;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.chart-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #94a3b8;
|
||||
font-size: 0.72rem;
|
||||
padding: 0 0.35rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { computed } from 'vue';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import type { HomeDashboardSourceDto } from '@mento/shared';
|
||||
import UiChart, { type UiChartOption } from '@/components/ui/UiChart.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
sources: HomeDashboardSourceDto[];
|
||||
@@ -18,17 +19,31 @@ const demoSources: HomeDashboardSourceDto[] = [
|
||||
const colors = ['#2563eb', '#14b8a6', '#22c55e', '#fb923c', '#94a3b8'];
|
||||
|
||||
const rows = computed(() => (props.sources.length ? props.sources : demoSources));
|
||||
|
||||
const segments = computed(() => {
|
||||
let offset = 0;
|
||||
return rows.value.map((s, i) => {
|
||||
const seg = { ...s, color: colors[i % colors.length], offset };
|
||||
offset += s.percent;
|
||||
return seg;
|
||||
});
|
||||
});
|
||||
|
||||
const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
|
||||
const option = computed<UiChartOption>(() => ({
|
||||
animationDuration: 400,
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: { fontFamily: 'IRANSans, Tahoma, sans-serif' },
|
||||
formatter: (p) => {
|
||||
const item = Array.isArray(p) ? p[0] : p;
|
||||
return `${item.name}<br/>${toFaDigits(Number(item.value ?? 0))} — ${toFaDigits(item.percent ?? 0)}٪`;
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['58%', '82%'],
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: rows.value.map((s) => ({ name: s.label, value: s.count })),
|
||||
},
|
||||
],
|
||||
}));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,23 +54,7 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
|
||||
<div class="donut-wrap">
|
||||
<div class="donut-chart-box">
|
||||
<svg viewBox="0 0 140 140" class="donut-chart" aria-hidden="true">
|
||||
<circle cx="70" cy="70" r="48" fill="none" stroke="#eef2f7" stroke-width="16" />
|
||||
<circle
|
||||
v-for="seg in segments"
|
||||
:key="seg.label"
|
||||
cx="70"
|
||||
cy="70"
|
||||
r="48"
|
||||
fill="none"
|
||||
:stroke="seg.color"
|
||||
stroke-width="16"
|
||||
stroke-linecap="butt"
|
||||
:stroke-dasharray="`${seg.percent * 3.016} 301.6`"
|
||||
:stroke-dashoffset="`${-seg.offset * 3.016}`"
|
||||
transform="rotate(-90 70 70)"
|
||||
/>
|
||||
</svg>
|
||||
<UiChart :option="option" height="132px" />
|
||||
<div class="donut-center">
|
||||
<strong>{{ toFaDigits(total) }}</strong>
|
||||
<span>مشتری</span>
|
||||
@@ -63,10 +62,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
</div>
|
||||
|
||||
<ul class="donut-legend">
|
||||
<li v-for="seg in segments" :key="seg.label">
|
||||
<span class="dot" :style="{ background: seg.color }" />
|
||||
<span class="lbl">{{ seg.label }}</span>
|
||||
<em>{{ toFaDigits(seg.percent) }}٪</em>
|
||||
<li v-for="(row, i) in rows" :key="row.label">
|
||||
<span class="dot" :style="{ background: colors[i % colors.length] }" />
|
||||
<span class="lbl">{{ row.label }}</span>
|
||||
<em>{{ toFaDigits(row.percent) }}٪</em>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -76,10 +75,10 @@ const total = computed(() => rows.value.reduce((a, s) => a + s.count, 0));
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 1rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
padding: var(--pad-modal);
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
border: 1px solid #eef2f7;
|
||||
border: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@@ -106,11 +105,6 @@ h2 {
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.donut-chart {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
}
|
||||
|
||||
.donut-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
Reference in New Issue
Block a user