🚀 CYBERPUNK PORTFOLIO DASHBOARD

Dark Neon • Futuristic • Interactive

body { margin: 0; padding: 0; background-color: #08080d; color: #e1e1ff; font-family: "Orbitron", sans-serif; } .header { text-align: center; padding: 30px 0; background: linear-gradient(180deg, #0d0d15 0%, #08080d 100%); border-bottom: 1px solid #1a1a2e; } .header h1 { color: #00eaff; text-shadow: 0 0 10px #00eaff; } .header p { margin-top: -5px; color: #ff00c8; text-shadow: 0 0 5px #ff00c8; } .container { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; padding: 30px; } .box { background-color: #0d0d15; border: 1px solid #1f1f2e; border-radius: 12px; padding: 15px; width: 32%; min-width: 350px; box-shadow: 0 0 20px rgba(0, 238, 255, 0.1); } // Data portofolio let saham = ['BBCA','BBRI','BMRI','TLKM','ASII','ICBP','UNVR','ADRO','MDKA','ANTM','AMRT','CMRY','KLBF','ERAA','BNI']; let modal = [1710000, 796000, 968000, 724000, 1305000, 1770000, 187500, 180500, 247000, 301000, 147000, 125000, 165000, 152000, 439000]; let sektor = ['Blue-chip','Blue-chip','Blue-chip','Blue-chip','Blue-chip','Blue-chip', 'Pertumbuhan','Pertumbuhan','Pertumbuhan','Pertumbuhan', 'Minor','Minor','Minor','Minor','Bank']; // Warna neon Cyberpunk let colorsMap = { 'Blue-chip': '#00eaff', 'Pertumbuhan': '#ff009d', 'Minor': '#7d00ff', 'Bank': '#003cff' }; let colors = sektor.map(s => colorsMap[s]); // Hitung total per sektor let sectorTotals = {}; sektor.forEach((s, i) => { sectorTotals[s] = (sectorTotals[s] || 0) + modal[i]; }); // ==================== BAR CHART ==================== let barTrace = { x: modal, y: saham, type: "bar", orientation: "h", marker: { color: colors, line: { color: "white", width: 1.5 } } }; Plotly.newPlot("barChart", [barTrace], { title: "NEON BAR — Portfolio Loading", paper_bgcolor: "#0d0d15", plot_bgcolor: "#0d0d15", font: {color: "#e1e1ff"} }); // ==================== PIE: SAHAM ==================== let pieTrace = { labels: saham, values: modal, type: "pie", hole: 0.5, marker: { colors: colors } }; Plotly.newPlot("pieChart", [pieTrace], { title: "NEON DONUT — Saham Distribution", paper_bgcolor: "#0d0d15", plot_bgcolor: "#0d0d15", font: {color: "#e1e1ff"} }); // ==================== PIE: SEKTOR ==================== let sectorTrace = { labels: Object.keys(sectorTotals), values: Object.values(sectorTotals), type: "pie", hole: 0.5, marker: { colors: Object.keys(sectorTotals).map(s => colorsMap[s]) } }; Plotly.newPlot("sectorChart", [sectorTrace], { title: "SECTOR DONUT", paper_bgcolor: "#0d0d15", plot_bgcolor: "#0d0d15", font: {color: "#e1e1ff"} }); >