mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 02:23:47 +00:00
fix: make trial, campaign, and no-subscription node colors distinct
- campaignUser: #4dd9c0 (teal) → #fbbf24 (amber) — no longer blends with trial blue - regular: #6b7280 (gray) → #94a3b8 (slate) — visible on dark background - Campaign edges updated to amber tint - defaultNodeColor now references NODE_COLORS.regular instead of hardcoded value - Legend gradient uses actual campaign palette colors
This commit is contained in:
@@ -6,7 +6,13 @@ import { inferSettings } from 'graphology-layout-forceatlas2';
|
|||||||
import { useReferralNetworkStore } from '@/store/referralNetwork';
|
import { useReferralNetworkStore } from '@/store/referralNetwork';
|
||||||
import type { NetworkGraphData, NetworkFilters } from '@/types/referralNetwork';
|
import type { NetworkGraphData, NetworkFilters } from '@/types/referralNetwork';
|
||||||
import { createNodeBorderProgram } from '@sigma/node-border';
|
import { createNodeBorderProgram } from '@sigma/node-border';
|
||||||
import { getNodeFillColor, getNodeBorderColor, getUserNodeSize, getCampaignColor } from '../utils';
|
import {
|
||||||
|
getNodeFillColor,
|
||||||
|
getNodeBorderColor,
|
||||||
|
getUserNodeSize,
|
||||||
|
getCampaignColor,
|
||||||
|
NODE_COLORS,
|
||||||
|
} from '../utils';
|
||||||
import { setSigmaInstance } from '../sigmaGlobals';
|
import { setSigmaInstance } from '../sigmaGlobals';
|
||||||
|
|
||||||
interface NetworkGraphProps {
|
interface NetworkGraphProps {
|
||||||
@@ -198,7 +204,7 @@ function buildFullGraph(graphData: NetworkGraphData): Graph {
|
|||||||
edge.type === 'partner_campaign'
|
edge.type === 'partner_campaign'
|
||||||
? 'rgba(255, 138, 101, 0.5)'
|
? 'rgba(255, 138, 101, 0.5)'
|
||||||
: edge.type === 'campaign'
|
: edge.type === 'campaign'
|
||||||
? 'rgba(77, 217, 192, 0.06)'
|
? 'rgba(251, 191, 36, 0.06)'
|
||||||
: 'rgba(255,255,255,0.03)',
|
: 'rgba(255,255,255,0.03)',
|
||||||
size: edge.type === 'partner_campaign' ? 1.5 : 0.3,
|
size: edge.type === 'partner_campaign' ? 1.5 : 0.3,
|
||||||
edgeType: edge.type,
|
edgeType: edge.type,
|
||||||
@@ -334,7 +340,7 @@ export function NetworkGraph({ data, className }: NetworkGraphProps) {
|
|||||||
labelRenderedSizeThreshold: 14,
|
labelRenderedSizeThreshold: 14,
|
||||||
zIndex: true,
|
zIndex: true,
|
||||||
defaultEdgeColor: '#ffffff06',
|
defaultEdgeColor: '#ffffff06',
|
||||||
defaultNodeColor: '#6b7280',
|
defaultNodeColor: NODE_COLORS.regular,
|
||||||
nodeProgramClasses: { bordered: BorderedNodeProgram },
|
nodeProgramClasses: { bordered: BorderedNodeProgram },
|
||||||
defaultNodeType: 'bordered',
|
defaultNodeType: 'bordered',
|
||||||
labelColor: { color: '#111827' },
|
labelColor: { color: '#111827' },
|
||||||
|
|||||||
@@ -5,13 +5,7 @@ interface NetworkLegendProps {
|
|||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CAMPAIGN_GRADIENT_COLORS = [
|
const CAMPAIGN_GRADIENT_COLORS = ['#4dd9c0', '#f0c261', '#e85d9a', '#6b9fff', '#b97aff'];
|
||||||
NODE_COLORS.campaignUser,
|
|
||||||
NODE_COLORS.partner,
|
|
||||||
NODE_COLORS.topReferrer,
|
|
||||||
'#6b9fff',
|
|
||||||
'#b97aff',
|
|
||||||
];
|
|
||||||
|
|
||||||
const FILL_ITEMS = [
|
const FILL_ITEMS = [
|
||||||
{ color: NODE_COLORS.paidActive, labelKey: 'admin.referralNetwork.legend.paidActive' },
|
{ color: NODE_COLORS.paidActive, labelKey: 'admin.referralNetwork.legend.paidActive' },
|
||||||
|
|||||||
@@ -18,8 +18,8 @@ export const NODE_COLORS = {
|
|||||||
trialActive: '#38bdf8',
|
trialActive: '#38bdf8',
|
||||||
paidExpired: '#ef4444',
|
paidExpired: '#ef4444',
|
||||||
trialExpired: '#fb923c',
|
trialExpired: '#fb923c',
|
||||||
campaignUser: '#4dd9c0',
|
campaignUser: '#fbbf24',
|
||||||
regular: '#6b7280',
|
regular: '#94a3b8',
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user