/* Clear Mint — Analytics Command Center charts & icons
Depends on cm-charts (CMIcon) + cm-components. Exposes window.AN* helpers.
Pure presentation — no app data/APIs touched. */
(function () {
/* ---------- palette ---------- */
const A = {
G:'#10915F', forest:'#1B5E4A', gold:'#D4A95D', teal:'#0E9F8E', blue:'#3E7CC4',
plum:'#8A6E9E', pink:'#D8688F', slate:'#9AA7B2', red:'#C35B5B', amber:'#D4A95D',
line:'#EAE5DA', ink:'#1E2A24', mut:'#98A39B',
};
window.ANC = A;
/* ---------- local icons (24 grid, stroke) ---------- */
const si = (paths, fill=false) => ({ size=18, ...p }) => (
);
const ANI = {
brain : si(<>),
spark : si(<>),
gauge : si(<>),
scale : si(<>),
trend : si(<>),
trendDn: si(<>),
flow : si(<>),
pie : si(<>),
flame : si(),
trophy: si(<>),
alert : si(<>),
bulb : si(<>),
rocket: si(<>),
target: si(<>),
flag : si(<>),
cal : si(<>),
download: si(<>),
share : si(<>),
filter: si(),
refresh: si(<>),
chev : si(),
chevR : si(),
arrUp : si(),
arrDn : si(),
wallet: si(<>),
bank : si(<>),
home : si(<>),
car : si(<>),
card : si(<>),
shield: si(<>),
grad : si(<>),
plane : si(),
check : si(),
clock : si(<>),
info : si(<>),
dollar: si(<>),
percent: si(<>),
layers: si(<>),
star : ({ size=14, ...p }) => (
),
};
window.ANI = ANI;
/* ================= ScoreGauge (0–100 semicircle) ================= */
function ScoreGauge({ score=87, max=100, label='Excellent', size=300 }) {
const W=size, H=size*0.62, cx=W/2, cy=H-12, r=W*0.42, stroke=W*0.072;
const arc = `M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}`;
const f = Math.max(0,Math.min(1,score/max)), ang=Math.PI*(1-f);
const mx=cx+r*Math.cos(ang), my=cy-r*Math.sin(ang);
return (
);
}
window.AnScoreGauge = ScoreGauge;
/* ================= HalfGauge (compact, value%) ================= */
function HalfGauge({ pct=78, big, sub, color='#10915F', track='var(--mint-100)', size=190 }) {
const W=size, H=size*0.6, cx=W/2, cy=H-6, r=W*0.42, stroke=W*0.085;
const arc = `M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}`;
const len=Math.PI*r, frac=Math.max(0,Math.min(1,pct/100));
return (
);
}
window.AnHalfGauge = HalfGauge;
/* ================= MiniSpark ================= */
function MiniSpark({ data, color='#10915F', w=160, h=38, fill=true, light=false }) {
const min=Math.min(...data), max=Math.max(...data), span=(max-min)||1;
const X=i=>(i/(data.length-1))*w, Y=v=>h-4-((v-min)/span)*(h-8);
const line=data.map((v,i)=>`${i?'L':'M'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
const area=`${line} L${w},${h} L0,${h} Z`;
const id='sp'+Math.round(Math.random()*1e6);
const c = light ? 'rgba(255,255,255,.85)' : color;
return (
);
}
window.AnMiniSpark = MiniSpark;
/* ================= NetWorthChart (assets/liab/net + forecast) ================= */
function NetWorthChart({ points, height=300 }) {
// points: [{x, assets, liab, net, fc?}] fc=true marks forecast region
const W=900, H=height, P={l:52,r:58,t:18,b:30};
const all=points.flatMap(p=>[p.assets,p.liab,p.net]);
const lo=0, hi=Math.max(...all)*1.12;
const X=i=>P.l+(i/(points.length-1))*(W-P.l-P.r);
const Y=v=>P.t+(1-(v-lo)/(hi-lo))*(H-P.t-P.b);
const fcStart=points.findIndex(p=>p.fc);
const seg=(key,solid)=>{
const pts=points.map((p,i)=>({i,v:p[key],fc:p.fc}));
const filt=pts.filter(p=> solid ? (!p.fc || (fcStart>=0 && p.i===fcStart-1)) : (p.fc || (fcStart>=0 && p.i===fcStart-1)));
if(filt.length<2) return '';
return filt.map((p,k)=>`${k?'L':'M'}${X(p.i).toFixed(1)},${Y(p.v).toFixed(1)}`).join(' ');
};
const netSolid=seg('net',true), netDash=seg('net',false);
const netArea=(()=>{ const sp=points.filter((p,i)=> !p.fc || (fcStart>=0&&i===fcStart-1));
if(sp.length<2) return ''; const l=sp.map((p)=>{const i=points.indexOf(p);return `${X(i).toFixed(1)},${Y(p.net).toFixed(1)}`;});
return `M${l[0]} ${l.slice(1).map(s=>'L'+s).join(' ')} L${X(fcStart>=0?fcStart-1:points.length-1).toFixed(1)},${H-P.b} L${X(0).toFixed(1)},${H-P.b} Z`; })();
const yTicks=5;
const fmt=v=> v>=1e6?('$'+(v/1e6).toFixed(2)+'M') : v>=1e3?('$'+Math.round(v/1e3)+'K') : '$'+v;
const last=points[points.length-1];
return (
);
}
window.AnNetWorth = NetWorthChart;
/* ================= CashFlowChart (income/expense bars + net line) ================= */
function CashFlowChart({ data, height=280 }) {
// data: [{m, income, expense, net}]
const W=820, H=height, P={l:50,r:16,t:18,b:30};
const maxBar=Math.max(...data.map(d=>Math.max(d.income,d.expense)))*1.15;
const X=i=>P.l+(i+0.5)/data.length*(W-P.l-P.r);
const bw=Math.min(20,(W-P.l-P.r)/data.length/3.2);
const Y=v=>P.t+(1-v/maxBar)*(H-P.t-P.b);
const netLine=data.map((d,i)=>`${i?'L':'M'}${X(i).toFixed(1)},${Y(d.net).toFixed(1)}`).join(' ');
const yTicks=5;
const fmt=v=> v>=1e3?('$'+Math.round(v/1e3)+'K'):'$'+Math.round(v);
return (
);
}
window.AnCashFlow = CashFlowChart;
/* ================= LineChart (single series, generic) ================= */
function LineChart({ data, color='#10915F', height=200, yfmt=v=>v, xLabels=[], fill=true, dots=true, baseZero=false }) {
const W=560, H=height, P={l:44,r:14,t:16,b:26};
const min=baseZero?0:Math.min(...data), max=Math.max(...data);
const lo=baseZero?0:min-(max-min)*0.18, hi=max+(max-min)*0.14||max*1.1;
const X=i=>P.l+(i/(data.length-1))*(W-P.l-P.r);
const Y=v=>P.t+(1-(v-lo)/((hi-lo)||1))*(H-P.t-P.b);
const line=data.map((v,i)=>`${i?'L':'M'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
const area=`${line} L${X(data.length-1)},${H-P.b} L${X(0)},${H-P.b} Z`;
const id='ln'+Math.round(Math.random()*1e6); const rows=4;
return (
);
}
window.AnLine = LineChart;
/* ================= BenchmarkChart (portfolio vs index) ================= */
function BenchmarkChart({ series, height=230 }) {
// series: [{name,color,data}]
const W=600, H=height, P={l:44,r:14,t:16,b:26};
const all=series.flatMap(s=>s.data); const min=Math.min(...all), max=Math.max(...all);
const lo=min-(max-min)*0.12, hi=max+(max-min)*0.12;
const n=series[0].data.length;
const X=i=>P.l+(i/(n-1))*(W-P.l-P.r);
const Y=v=>P.t+(1-(v-lo)/((hi-lo)||1))*(H-P.t-P.b);
return (
);
}
window.AnBenchmark = BenchmarkChart;
/* ================= RadarChart (health components) ================= */
function RadarChart({ axes, size=300 }) {
// axes: [{label, value(0-100)}]
const pad=42;
const W=size, H=size, cx=W/2, cy=H/2, R=W*0.32, n=axes.length;
const ang=i=>(-Math.PI/2)+(i/n)*2*Math.PI;
const pt=(i,r)=>[cx+Math.cos(ang(i))*r, cy+Math.sin(ang(i))*r];
const rings=[0.25,0.5,0.75,1];
const poly=axes.map((a,i)=>pt(i,R*a.value/100).join(',')).join(' ');
return (
);
}
window.AnRadar = RadarChart;
/* ================= Heatmap (spending calendar) ================= */
function Heatmap({ weeks, color='#1B5E4A' }) {
// weeks: array of arrays(7) values 0..1
const days=['S','M','T','W','T','F','S'];
return (
{weeks.map((wk,wi)=>(
))}
);
}
window.AnHeatmap = Heatmap;
/* ================= ProjectionChart (interactive lab) ================= */
function ProjectionChart({ series, years, height=300 }) {
// series: {nw:[..], invest:[..], debt:[..]} length = years+1
const W=820, H=height, P={l:54,r:60,t:18,b:30};
const n=series.nw.length;
const all=[...series.nw,...series.invest];
const lo=0, hi=Math.max(...all)*1.1||1;
const X=i=>P.l+(i/(n-1))*(W-P.l-P.r);
const Y=v=>P.t+(1-(v-lo)/(hi-lo))*(H-P.t-P.b);
const mkPath=arr=>arr.map((v,i)=>`${i?'L':'M'}${X(i).toFixed(1)},${Y(v).toFixed(1)}`).join(' ');
const nwArea=`${mkPath(series.nw)} L${X(n-1)},${H-P.b} L${X(0)},${H-P.b} Z`;
const fmt=v=> v>=1e6?('$'+(v/1e6).toFixed(2)+'M') : v>=1e3?('$'+Math.round(v/1e3)+'K') : '$'+Math.round(v);
const yTicks=5;
const lbl=(arr,col,txt)=>{ const v=arr[n-1], y=Y(v);
return
{txt}; };
return (
);
}
window.AnProjection = ProjectionChart;
})();