2408d50cb0
Redesign navigation, home overview, user portrait, and valuation pages with improved functionality and responsive design. Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import type { RFMAnalysisResult, UserRFMData } from "@/types/data-analysis"
|
|
|
|
interface RFMAnalysisProps {
|
|
data: UserRFMData[]
|
|
analysisResult: RFMAnalysisResult
|
|
}
|
|
|
|
export function RFMAnalysis({ data, analysisResult }: RFMAnalysisProps) {
|
|
// 获取用户分群的颜色
|
|
const getSegmentColor = (segment: string) => {
|
|
if (segment.includes("高价值")) return "rgb(16, 185, 129)"
|
|
if (segment.includes("中价值")) return "rgb(59, 130, 246)"
|
|
if (segment.includes("低价值")) return "rgb(156, 163, 175)"
|
|
return "rgb(139, 92, 246)" // 新用户
|
|
}
|
|
|
|
// 准备饼图数据
|
|
const pieChartData = {
|
|
labels: analysisResult.segmentDistribution.map(item => item.segment),
|
|
datasets: [
|
|
{
|
|
data: analysisResult.segmentDistribution.map(item => item.count),
|
|
backgroundColor: analysisResult.segmentDistribution.map(item => getSegmentColor(item.segment)),
|
|
},
|
|
],
|
|
}
|
|
|
|
// 准备RFM分布柱状图数据
|
|
const rfmDistributionData = {
|
|
labels: ["R1", "R2", "R3", "R4", "R5", "F1", "F2", "F3", "F4", "F5", "M1", "M2", "M3", "M4", "M5"],
|
|
datasets: [
|
|
{
|
|
label: "用户数量",
|
|
data: [
|
|
// R分布
|
|
data.filter(user => user.rfmScore.recency === 1).length,
|
|
data.filter(user => user.rfmScore.recency === 2).length,
|
|
data.filter(user => user.rfmScore.recency === 3).length,
|
|
data.filter(user => user.rfmScore.recency === 4).length,
|
|
data.filter(user => user.rfmScore.recency === 5).length,
|
|
// F分布
|
|
data.filter(user => user.rfmScore.frequency === 1).length,
|
|
data.filter(user => user.rfmScore.frequency === 2).length,
|
|
data.filter(user => user.rfmScore.frequency === 3).length,
|
|
data.filter(user => user.rfmScore.frequency === 4).length,
|
|
data.filter(user => user.rfmScore.frequency === 5).length,
|
|
// M分布
|
|
data.filter(user => user.rfmScore.monetary === 1).length,
|
|
data.filter(user => user.rfmScore.monetary === 2).length,
|
|
data.filter(user => user.rfmScore.monetary === 3).length,
|
|
data.filter(user => user.rfmScore.monetary === 4).length,
|
|
data.filter(user => user.rfmScore.monetary === 5).length,
|
|
],
|
|
backgroundColor: [
|
|
// R颜色
|
|
"rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)",
|
|
// F颜色
|
|
"rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)",
|
|
// M颜色
|
|
"rgba(59, 130, 246, 0.7)", "rgba(59, 130, 246, 0.7)", "rgba(59, 130\
|