{"id":3570,"date":"2026-04-15T09:54:30","date_gmt":"2026-04-15T09:54:30","guid":{"rendered":"https:\/\/kobraentertainment.com\/?page_id=3570"},"modified":"2026-04-15T10:09:17","modified_gmt":"2026-04-15T10:09:17","slug":"dash","status":"publish","type":"page","link":"https:\/\/kobraentertainment.com\/fi\/dash\/","title":{"rendered":"Dash"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n\n\nSocial Media Dashboard<\/title>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/4.4.1\/chart.umd.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\n<style>\n\/* ============================================================\n WHITE-LABEL CONFIG \u2014 Edit these variables per client\n ============================================================ *\/\n:root {\n \/* Client brand *\/\n --brand-name: \"Your Company\";\n --accent: #9B8560; \/* Warm bronze \u2014 change per client *\/\n --accent-light: #C4B48A;\n --accent-bg: #F5F1EA;\n\n \/* Core palette \u2014 LIGHT *\/\n --bg: #FAFAFA;\n --surface: #FFFFFF;\n --surface-alt: #F3F4F6;\n --text: #111111;\n --text-secondary: #6B7280;\n --text-muted: #9CA3AF;\n --border: #E5E7EB;\n --positive: #16A34A;\n --negative: #DC2626;\n --grid: rgba(0,0,0,0.06);\n\n \/* Platform colors *\/\n --ig: #E1306C;\n --tt: #000000;\n --yt: #FF0000;\n --li: #0A66C2;\n --fb: #1877F2;\n --tt-label: #111111;\n\n --radius: 12px;\n --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);\n --shadow-lg: 0 4px 12px rgba(0,0,0,0.06);\n}\n\n\/* Dark theme \u2014 applied via [data-theme=\"dark\"] on <html> *\/\n[data-theme=\"dark\"] {\n --bg: #0B0B0D;\n --surface: #17171A;\n --surface-alt: #222228;\n --text: #F5F5F7;\n --text-secondary: #A1A1AA;\n --text-muted: #71717A;\n --border: #2A2A30;\n --positive: #22C55E;\n --negative: #EF4444;\n --grid: rgba(255,255,255,0.08);\n --accent-bg: #2A2318;\n --tt: #FFFFFF;\n --tt-label: #FFFFFF;\n --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);\n --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);\n}\n\n\/* Auto-follow parent page \/ system preference when no explicit theme is set *\/\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --bg: #0B0B0D;\n --surface: #17171A;\n --surface-alt: #222228;\n --text: #F5F5F7;\n --text-secondary: #A1A1AA;\n --text-muted: #71717A;\n --border: #2A2A30;\n --positive: #22C55E;\n --negative: #EF4444;\n --grid: rgba(255,255,255,0.08);\n --accent-bg: #2A2318;\n --tt: #FFFFFF;\n --tt-label: #FFFFFF;\n --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);\n --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);\n }\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n background: var(--bg);\n color: var(--text);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* === LAYOUT === *\/\n.dashboard {\n max-width: 1280px;\n margin: 0 auto;\n padding: 2rem 1.5rem;\n}\n\n\/* === HEADER === *\/\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n gap: 1rem;\n}\n.header-left { display: flex; align-items: center; gap: 0.75rem; }\n.logo-placeholder {\n width: 36px; height: 36px;\n background: var(--accent);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n color: white; font-weight: 700; font-size: 14px;\n}\n.header h1 {\n font-size: 1.25rem;\n font-weight: 600;\n letter-spacing: -0.01em;\n}\n.header-meta {\n font-size: 0.8rem;\n color: var(--text-muted);\n}\n.status-dot {\n display: inline-block;\n width: 6px; height: 6px;\n border-radius: 50%;\n background: var(--positive);\n margin-right: 4px;\n vertical-align: middle;\n}\n\n\/* === PERIOD SELECTOR === *\/\n.period-selector {\n display: flex;\n gap: 0.25rem;\n background: var(--surface-alt);\n padding: 3px;\n border-radius: 8px;\n}\n.period-btn {\n padding: 0.35rem 0.75rem;\n border: none;\n background: transparent;\n border-radius: 6px;\n font-size: 0.8rem;\n color: var(--text-secondary);\n cursor: pointer;\n font-weight: 500;\n transition: all 0.15s;\n}\n.period-btn.active {\n background: var(--surface);\n color: var(--text);\n box-shadow: var(--shadow);\n}\n\n\/* === THEME TOGGLE === *\/\n.header-controls {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.theme-toggle {\n width: 34px; height: 34px;\n border: 1px solid var(--border);\n background: var(--surface);\n border-radius: 8px;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n color: var(--text-secondary);\n transition: all 0.15s;\n padding: 0;\n}\n.theme-toggle:hover { color: var(--text); border-color: var(--accent); }\n.theme-toggle svg { width: 16px; height: 16px; }\n\n\/* === KPI STRIP === *\/\n.kpi-strip {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n}\n.kpi-card {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 1.25rem;\n box-shadow: var(--shadow);\n transition: box-shadow 0.2s;\n}\n.kpi-card:hover { box-shadow: var(--shadow-lg); }\n.kpi-label {\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-muted);\n font-weight: 600;\n margin-bottom: 0.35rem;\n}\n.kpi-value {\n font-size: 1.75rem;\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--text);\n}\n.kpi-change {\n font-size: 0.75rem;\n font-weight: 600;\n margin-top: 0.25rem;\n}\n.kpi-change.positive { color: var(--positive); }\n.kpi-change.negative { color: var(--negative); }\n\n\/* === CHART PANELS === *\/\n.chart-row {\n display: grid;\n gap: 1rem;\n margin-bottom: 1rem;\n}\n.chart-row.two { grid-template-columns: 1fr 1fr; }\n.chart-row.three { grid-template-columns: 2fr 1fr; }\n.chart-row.full { grid-template-columns: 1fr; }\n\n.panel {\n background: var(--surface);\n border-radius: var(--radius);\n padding: 1.25rem;\n box-shadow: var(--shadow);\n}\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n}\n.panel-title {\n font-size: 0.85rem;\n font-weight: 600;\n color: var(--text);\n}\n.panel-subtitle {\n font-size: 0.72rem;\n color: var(--text-muted);\n}\n\n\/* === PLATFORM PILLS === *\/\n.platform-pills {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n margin-bottom: 1.25rem;\n}\n.platform-pill {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n padding: 0.4rem 0.9rem;\n line-height: 1;\n border-radius: 999px;\n font-size: 0.75rem;\n font-weight: 600;\n font-family: inherit;\n color: var(--text);\n border: 1px solid var(--border);\n background: var(--surface);\n cursor: pointer;\n transition: all 0.15s;\n white-space: nowrap;\n}\n.platform-pill:hover { border-color: var(--accent); }\n.platform-pill.active {\n border-color: transparent;\n color: white;\n}\n.platform-pill .dot {\n width: 8px; height: 8px;\n border-radius: 50%;\n}\n.pill-ig.active { background: var(--ig); color: #fff; }\n.pill-tt.active { background: var(--tt); color: #fff; }\n[data-theme=\"dark\"] .pill-tt.active { color: #000; }\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) .pill-tt.active { color: #000; }\n}\n.pill-yt.active { background: var(--yt); color: #fff; }\n.pill-li.active { background: var(--li); color: #fff; }\n.pill-fb.active { background: var(--fb); color: #fff; }\n.pill-ig .dot { background: var(--ig); }\n.pill-tt .dot { background: var(--tt); }\n.pill-yt .dot { background: var(--yt); }\n.pill-li .dot { background: var(--li); }\n.pill-fb .dot { background: var(--fb); }\n\n\/* === PLATFORM BREAKDOWN TABLE === *\/\n.breakdown-table {\n width: 100%;\n border-collapse: collapse;\n}\n.breakdown-table th {\n text-align: left;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--text-muted);\n font-weight: 600;\n padding: 0.5rem 0.75rem;\n border-bottom: 1px solid var(--border);\n}\n.breakdown-table td {\n padding: 0.65rem 0.75rem;\n font-size: 0.82rem;\n border-bottom: 1px solid var(--border);\n}\n.breakdown-table tr:last-child td { border-bottom: none; }\n.breakdown-table .platform-name {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-weight: 600;\n}\n.breakdown-table .platform-dot {\n width: 10px; height: 10px;\n border-radius: 50%;\n flex-shrink: 0;\n}\n.breakdown-table .num { font-variant-numeric: tabular-nums; }\n\n\/* === CHART CANVAS === *\/\n.chart-wrap {\n position: relative;\n width: 100%;\n height: 260px;\n}\n.chart-wrap.tall { height: 320px; }\n\n\/* === FOOTER === *\/\n.footer {\n text-align: center;\n padding: 2rem 0 1rem;\n font-size: 0.72rem;\n color: var(--text-muted);\n}\n\n\/* === LOADING STATE === *\/\n.loading {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--text-muted);\n font-size: 0.85rem;\n}\n.spinner {\n width: 20px; height: 20px;\n border: 2px solid var(--border);\n border-top-color: var(--accent);\n border-radius: 50%;\n animation: spin 0.6s linear infinite;\n margin-right: 0.5rem;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n\/* === RESPONSIVE === *\/\n@media (max-width: 768px) {\n .dashboard { padding: 1.25rem 1rem; }\n .chart-row.two, .chart-row.three { grid-template-columns: 1fr; }\n .kpi-strip { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }\n .kpi-card { padding: 1rem; }\n .kpi-value { font-size: 1.4rem; }\n .kpi-label { font-size: 0.65rem; }\n .header {\n flex-direction: column;\n align-items: stretch;\n gap: 0.75rem;\n }\n .header-left { justify-content: flex-start; }\n .header-controls {\n justify-content: space-between;\n width: 100%;\n }\n .header h1 { font-size: 1.1rem; }\n \/* Scrollable pill strip so labels never truncate or wrap *\/\n .platform-pills {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n margin-left: -1rem;\n margin-right: -1rem;\n padding: 0 1rem 0.25rem;\n }\n .platform-pills::-webkit-scrollbar { display: none; }\n .platform-pill { flex-shrink: 0; }\n .panel { padding: 1rem; }\n .chart-wrap { height: 220px; }\n .chart-wrap.tall { height: 260px; }\n .breakdown-table th,\n .breakdown-table td { padding: 0.5rem 0.5rem; font-size: 0.75rem; }\n}\n@media (max-width: 480px) {\n .dashboard { padding: 1rem 0.75rem; }\n .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n .kpi-value { font-size: 1.2rem; }\n .period-btn { padding: 0.3rem 0.6rem; font-size: 0.75rem; }\n \/* Hide less critical breakdown columns on very small screens *\/\n .breakdown-table th:nth-child(4),\n .breakdown-table td:nth-child(4) { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"dashboard\">\n\n <!-- HEADER -->\n <div class=\"header\">\n <div class=\"header-left\">\n <div class=\"logo-placeholder\" id=\"clientLogo\">C<\/div>\n <div>\n <h1 id=\"dashboardTitle\">Social Media Dashboard<\/h1>\n <div class=\"header-meta\">\n <span class=\"status-dot\"><\/span>\n Last updated: <span id=\"lastUpdated\">\u2014<\/span>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"header-controls\">\n <div class=\"period-selector\">\n <button class=\"period-btn\" data-period=\"7\">7d<\/button>\n <button class=\"period-btn active\" data-period=\"30\">30d<\/button>\n <button class=\"period-btn\" data-period=\"90\">90d<\/button>\n <\/div>\n <button class=\"theme-toggle\" id=\"themeToggle\" aria-label=\"Toggle theme\" title=\"Toggle theme\">\n <svg class=\"icon-sun\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"\/><\/svg>\n <svg class=\"icon-moon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:none\"><path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- KPI STRIP -->\n <div class=\"kpi-strip\" id=\"kpiStrip\">\n <div class=\"kpi-card\">\n <div class=\"kpi-label\">Total Followers<\/div>\n <div class=\"kpi-value\" id=\"kpiFollowers\">\u2014<\/div>\n <div class=\"kpi-change\" id=\"kpiFollowersChange\"><\/div>\n <\/div>\n <div class=\"kpi-card\">\n <div class=\"kpi-label\">Total Reach<\/div>\n <div class=\"kpi-value\" id=\"kpiReach\">\u2014<\/div>\n <div class=\"kpi-change\" id=\"kpiReachChange\"><\/div>\n <\/div>\n <div class=\"kpi-card\">\n <div class=\"kpi-label\">Impressions<\/div>\n <div class=\"kpi-value\" id=\"kpiImpressions\">\u2014<\/div>\n <div class=\"kpi-change\" id=\"kpiImpressionsChange\"><\/div>\n <\/div>\n <div class=\"kpi-card\">\n <div class=\"kpi-label\">Engagement Rate<\/div>\n <div class=\"kpi-value\" id=\"kpiEngagement\">\u2014<\/div>\n <div class=\"kpi-change\" id=\"kpiEngagementChange\"><\/div>\n <\/div>\n <div class=\"kpi-card\">\n <div class=\"kpi-label\">Total Interactions<\/div>\n <div class=\"kpi-value\" id=\"kpiInteractions\">\u2014<\/div>\n <div class=\"kpi-change\" id=\"kpiInteractionsChange\"><\/div>\n <\/div>\n <\/div>\n\n <!-- PLATFORM FILTER -->\n <div class=\"platform-pills\">\n <button class=\"platform-pill pill-ig active\" data-platform=\"instagram\"><span class=\"dot\"><\/span>Instagram<\/button>\n <button class=\"platform-pill pill-tt active\" data-platform=\"tiktok\"><span class=\"dot\"><\/span>TikTok<\/button>\n <button class=\"platform-pill pill-yt active\" data-platform=\"youtube\"><span class=\"dot\"><\/span>YouTube<\/button>\n <button class=\"platform-pill pill-li active\" data-platform=\"linkedin\"><span class=\"dot\"><\/span>LinkedIn<\/button>\n <button class=\"platform-pill pill-fb active\" data-platform=\"facebook\"><span class=\"dot\"><\/span>Facebook<\/button>\n <\/div>\n\n <!-- ROW 1: Follower Growth + Engagement Rate -->\n <div class=\"chart-row two\">\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Follower Growth<\/div>\n <div class=\"panel-subtitle\">Cumulative by platform<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"chartFollowers\"><\/canvas><\/div>\n <\/div>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Engagement Rate<\/div>\n <div class=\"panel-subtitle\">Weekly average %<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"chartEngagement\"><\/canvas><\/div>\n <\/div>\n <\/div>\n\n <!-- ROW 2: Reach & Impressions (area) + Interactions breakdown (bar) -->\n <div class=\"chart-row two\">\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Reach & Impressions<\/div>\n <div class=\"panel-subtitle\">Daily totals across platforms<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"chartReach\"><\/canvas><\/div>\n <\/div>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Interactions by Type<\/div>\n <div class=\"panel-subtitle\">Likes, comments, shares<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"chartInteractions\"><\/canvas><\/div>\n <\/div>\n <\/div>\n\n <!-- ROW 3: Platform breakdown table + Engagement by platform doughnut -->\n <div class=\"chart-row three\">\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Platform Breakdown<\/div>\n <div class=\"panel-subtitle\">Current period summary<\/div>\n <\/div>\n <table class=\"breakdown-table\" id=\"breakdownTable\">\n <thead>\n <tr>\n <th>Platform<\/th>\n <th>Followers<\/th>\n <th>Reach<\/th>\n <th>Eng. Rate<\/th>\n <th>Interactions<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"breakdownBody\"><\/tbody>\n <\/table>\n <\/div>\n <div class=\"panel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">Share of Engagement<\/div>\n <div class=\"panel-subtitle\">By platform<\/div>\n <\/div>\n <div class=\"chart-wrap\"><canvas id=\"chartDoughnut\"><\/canvas><\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n Powered by <span id=\"footerBrand\">Kobra Entertainment<\/span> \u00b7 Data refreshed from Google Sheets\n <\/div>\n\n<\/div>\n\n<script>\n\/\/ ============================================================\n\/\/ WHITE-LABEL CONFIG\n\/\/ ============================================================\nconst CONFIG = {\n brandName: 'Kobra Entertainment',\n clientName: 'Client Dashboard',\n logoLetter: 'K',\n \/\/ Published Google Sheet CSV URL \u2014 set this or let user paste in the UI\n sheetUrl: '',\n \/\/ Auto-refresh interval in minutes (0 = disabled)\n refreshInterval: 30,\n};\n\n\/\/ ============================================================\n\/\/ PLATFORM DEFINITIONS\n\/\/ ============================================================\nconst PLATFORMS = {\n instagram: { label: 'Instagram', color: '#E1306C', colorLight: 'rgba(227,48,108,0.08)' },\n tiktok: { label: 'TikTok', color: '#000000', colorLight: 'rgba(0,0,0,0.06)' },\n youtube: { label: 'YouTube', color: '#FF0000', colorLight: 'rgba(255,0,0,0.06)' },\n linkedin: { label: 'LinkedIn', color: '#0A66C2', colorLight: 'rgba(10,102,194,0.06)' },\n facebook: { label: 'Facebook', color: '#1877F2', colorLight: 'rgba(24,119,242,0.06)' },\n};\n\n\/\/ ============================================================\n\/\/ STATE\n\/\/ ============================================================\nlet rawData = [];\nlet activePlatforms = new Set(Object.keys(PLATFORMS));\nlet activePeriod = 30;\nlet charts = {};\n\n\/\/ ============================================================\n\/\/ CHART.JS GLOBAL DEFAULTS\n\/\/ ============================================================\nChart.defaults.font.family = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif\";\nChart.defaults.font.size = 11;\nChart.defaults.plugins.legend.display = false;\nChart.defaults.plugins.tooltip.cornerRadius = 6;\nChart.defaults.plugins.tooltip.padding = 8;\nChart.defaults.plugins.tooltip.titleFont = { weight: '600', size: 12 };\nChart.defaults.elements.point.radius = 0;\nChart.defaults.elements.point.hoverRadius = 4;\nChart.defaults.elements.line.tension = 0.35;\nChart.defaults.elements.line.borderWidth = 2;\n\nfunction cssVar(name) {\n return getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n}\nfunction applyChartTheme() {\n Chart.defaults.color = cssVar('--text-muted') || '#9CA3AF';\n const isDark = document.documentElement.getAttribute('data-theme') === 'dark'\n || (document.documentElement.getAttribute('data-theme') !== 'light'\n && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);\n Chart.defaults.plugins.tooltip.backgroundColor = isDark ? '#F5F5F7' : '#111';\n Chart.defaults.plugins.tooltip.titleColor = isDark ? '#111' : '#fff';\n Chart.defaults.plugins.tooltip.bodyColor = isDark ? '#111' : '#fff';\n}\napplyChartTheme();\n\nconst AXIS_OPTS = {\n grid: { color: '#F3F4F6', drawBorder: false },\n ticks: { padding: 8, maxTicksLimit: 7 },\n};\nfunction refreshAxisOpts() {\n AXIS_OPTS.grid.color = cssVar('--grid') || '#F3F4F6';\n}\nrefreshAxisOpts();\n\n\/\/ ============================================================\n\/\/ DATA LOADING\n\/\/ ============================================================\n\n\/*\n EXPECTED GOOGLE SHEET COLUMNS:\n date | platform | followers | reach | impressions | likes | comments | shares | engagement_rate\n\n - date: YYYY-MM-DD\n - platform: instagram, tiktok, youtube, linkedin, facebook\n - followers: cumulative follower count\n - reach: daily reach\n - impressions: daily impressions\n - likes: daily likes\n - comments: daily comments\n - shares: daily shares\n - engagement_rate: decimal (e.g. 3.5 for 3.5%)\n*\/\n\nfunction fetchData(url) {\n Papa.parse(url, {\n download: true,\n header: true,\n dynamicTyping: true,\n skipEmptyLines: true,\n complete: function(results) {\n rawData = results.data.filter(r => r.date && r.platform);\n document.getElementById('lastUpdated').textContent = new Date().toLocaleString();\n render();\n },\n error: function() {\n loadSampleData();\n }\n });\n}\n\nfunction loadSampleData() {\n \/\/ Generate 90 days of sample data for demo purposes\n const platforms = Object.keys(PLATFORMS);\n const today = new Date();\n rawData = [];\n\n const baseFollowers = { instagram: 12400, tiktok: 8200, youtube: 4100, linkedin: 6800, facebook: 9500 };\n const baseReach = { instagram: 3200, tiktok: 5400, youtube: 1800, linkedin: 1200, facebook: 2100 };\n\n for (let d = 89; d >= 0; d--) {\n const date = new Date(today);\n date.setDate(date.getDate() - d);\n const dateStr = date.toISOString().split('T')[0];\n\n platforms.forEach(p => {\n const growth = Math.floor(Math.random() * 80 + 20);\n baseFollowers[p] += growth;\n const reach = Math.floor(baseReach[p] * (0.7 + Math.random() * 0.6));\n const impressions = Math.floor(reach * (1.3 + Math.random() * 0.7));\n const likes = Math.floor(reach * (0.03 + Math.random() * 0.04));\n const comments = Math.floor(likes * (0.05 + Math.random() * 0.1));\n const shares = Math.floor(likes * (0.02 + Math.random() * 0.06));\n const engRate = parseFloat(((likes + comments + shares) \/ reach * 100).toFixed(2));\n\n rawData.push({\n date: dateStr, platform: p,\n followers: baseFollowers[p], reach, impressions,\n likes, comments, shares, engagement_rate: engRate\n });\n });\n }\n\n document.getElementById('lastUpdated').textContent = 'Sample data';\n render();\n}\n\n\/\/ ============================================================\n\/\/ FILTERING\n\/\/ ============================================================\nfunction getFilteredData() {\n const cutoff = new Date();\n cutoff.setDate(cutoff.getDate() - activePeriod);\n const cutoffStr = cutoff.toISOString().split('T')[0];\n\n return rawData.filter(r =>\n activePlatforms.has(r.platform) && r.date >= cutoffStr\n );\n}\n\n\/\/ ============================================================\n\/\/ RENDERING\n\/\/ ============================================================\nfunction render() {\n const data = getFilteredData();\n if (!data.length) return;\n\n renderKPIs(data);\n renderFollowerChart(data);\n renderEngagementChart(data);\n renderReachChart(data);\n renderInteractionsChart(data);\n renderDoughnut(data);\n renderBreakdown(data);\n}\n\n\/\/ --- KPI CARDS ---\nfunction renderKPIs(data) {\n const platforms = [...activePlatforms];\n const dates = [...new Set(data.map(r => r.date))].sort();\n const midIdx = Math.floor(dates.length \/ 2);\n const firstHalf = new Set(dates.slice(0, midIdx));\n\n let totalFollowers = 0, totalReach = 0, totalImpressions = 0, totalInteractions = 0;\n let prevFollowers = 0, prevReach = 0, prevImpressions = 0, prevInteractions = 0;\n let engSum = 0, engCount = 0, prevEngSum = 0, prevEngCount = 0;\n\n data.forEach(r => {\n if (firstHalf.has(r.date)) {\n prevReach += r.reach || 0;\n prevImpressions += r.impressions || 0;\n prevInteractions += (r.likes || 0) + (r.comments || 0) + (r.shares || 0);\n prevEngSum += r.engagement_rate || 0;\n prevEngCount++;\n if (r.date === dates[0]) prevFollowers += r.followers || 0;\n } else {\n totalReach += r.reach || 0;\n totalImpressions += r.impressions || 0;\n totalInteractions += (r.likes || 0) + (r.comments || 0) + (r.shares || 0);\n engSum += r.engagement_rate || 0;\n engCount++;\n if (r.date === dates[dates.length - 1]) totalFollowers += r.followers || 0;\n }\n });\n\n const avgEng = engCount ? engSum \/ engCount : 0;\n const prevAvgEng = prevEngCount ? prevEngSum \/ prevEngCount : 0;\n\n setKPI('kpiFollowers', formatNum(totalFollowers), 'kpiFollowersChange', pctChange(totalFollowers, prevFollowers));\n setKPI('kpiReach', formatNum(totalReach), 'kpiReachChange', pctChange(totalReach, prevReach));\n setKPI('kpiImpressions', formatNum(totalImpressions), 'kpiImpressionsChange', pctChange(totalImpressions, prevImpressions));\n setKPI('kpiEngagement', avgEng.toFixed(2) + '%', 'kpiEngagementChange', pctChange(avgEng, prevAvgEng));\n setKPI('kpiInteractions', formatNum(totalInteractions), 'kpiInteractionsChange', pctChange(totalInteractions, prevInteractions));\n}\n\nfunction setKPI(valueId, value, changeId, change) {\n document.getElementById(valueId).textContent = value;\n const el = document.getElementById(changeId);\n el.textContent = change.text;\n el.className = 'kpi-change ' + change.cls;\n}\n\nfunction pctChange(current, previous) {\n if (!previous) return { text: '', cls: '' };\n const pct = ((current - previous) \/ previous * 100).toFixed(1);\n const sign = pct >= 0 ? '+' : '';\n return {\n text: sign + pct + '% vs prev period',\n cls: pct >= 0 ? 'positive' : 'negative'\n };\n}\n\n\/\/ --- FOLLOWER GROWTH CHART ---\nfunction renderFollowerChart(data) {\n const grouped = groupByDateAndPlatform(data, 'followers', 'last');\n const { labels, datasets } = buildLineDatasets(grouped);\n\n if (charts.followers) charts.followers.destroy();\n charts.followers = new Chart(document.getElementById('chartFollowers'), {\n type: 'line',\n data: { labels, datasets },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: { x: AXIS_OPTS, y: { ...AXIS_OPTS, ticks: { ...AXIS_OPTS.ticks, callback: v => formatNum(v) } } },\n interaction: { mode: 'index', intersect: false },\n plugins: { tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + formatNum(ctx.parsed.y) } } }\n }\n });\n}\n\n\/\/ --- ENGAGEMENT RATE CHART ---\nfunction renderEngagementChart(data) {\n const grouped = groupByWeekAndPlatform(data, 'engagement_rate', 'avg');\n const { labels, datasets } = buildLineDatasets(grouped);\n\n if (charts.engagement) charts.engagement.destroy();\n charts.engagement = new Chart(document.getElementById('chartEngagement'), {\n type: 'line',\n data: { labels, datasets },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: { x: AXIS_OPTS, y: { ...AXIS_OPTS, ticks: { ...AXIS_OPTS.ticks, callback: v => v.toFixed(1) + '%' } } },\n interaction: { mode: 'index', intersect: false },\n plugins: { tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + ctx.parsed.y.toFixed(2) + '%' } } }\n }\n });\n}\n\n\/\/ --- REACH & IMPRESSIONS CHART ---\nfunction renderReachChart(data) {\n const dates = [...new Set(data.map(r => r.date))].sort();\n const reachByDate = {}, impByDate = {};\n dates.forEach(d => { reachByDate[d] = 0; impByDate[d] = 0; });\n data.forEach(r => { reachByDate[r.date] += r.reach || 0; impByDate[r.date] += r.impressions || 0; });\n\n const labels = dates.map(d => formatDate(d));\n const accent = cssVar('--accent');\n const muted = cssVar('--text-muted') || '#D1D5DB';\n\n if (charts.reach) charts.reach.destroy();\n charts.reach = new Chart(document.getElementById('chartReach'), {\n type: 'line',\n data: {\n labels,\n datasets: [\n { label: 'Impressions', data: dates.map(d => impByDate[d]), borderColor: muted, backgroundColor: 'rgba(156,163,175,0.1)', fill: true },\n { label: 'Reach', data: dates.map(d => reachByDate[d]), borderColor: accent, backgroundColor: 'rgba(155,133,96,0.12)', fill: true },\n ]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: { x: AXIS_OPTS, y: { ...AXIS_OPTS, ticks: { ...AXIS_OPTS.ticks, callback: v => formatNum(v) } } },\n interaction: { mode: 'index', intersect: false },\n plugins: {\n legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: 'circle', padding: 12, font: { size: 11 } } },\n tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + formatNum(ctx.parsed.y) } }\n }\n }\n });\n}\n\n\/\/ --- INTERACTIONS BAR CHART ---\nfunction renderInteractionsChart(data) {\n const dates = [...new Set(data.map(r => r.date))].sort();\n \/\/ Aggregate into weekly buckets\n const weeks = {};\n data.forEach(r => {\n const wk = getWeek(r.date);\n if (!weeks[wk]) weeks[wk] = { likes: 0, comments: 0, shares: 0 };\n weeks[wk].likes += r.likes || 0;\n weeks[wk].comments += r.comments || 0;\n weeks[wk].shares += r.shares || 0;\n });\n\n const wkKeys = Object.keys(weeks).sort();\n const labels = wkKeys.map(w => 'W' + w.split('-W')[1]);\n\n if (charts.interactions) charts.interactions.destroy();\n charts.interactions = new Chart(document.getElementById('chartInteractions'), {\n type: 'bar',\n data: {\n labels,\n datasets: [\n { label: 'Likes', data: wkKeys.map(w => weeks[w].likes), backgroundColor: 'rgba(155,133,96,0.7)', borderRadius: 3 },\n { label: 'Comments', data: wkKeys.map(w => weeks[w].comments), backgroundColor: 'rgba(155,133,96,0.35)', borderRadius: 3 },\n { label: 'Shares', data: wkKeys.map(w => weeks[w].shares), backgroundColor: 'rgba(155,133,96,0.15)', borderRadius: 3 },\n ]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: {\n x: { ...AXIS_OPTS, stacked: true },\n y: { ...AXIS_OPTS, stacked: true, ticks: { ...AXIS_OPTS.ticks, callback: v => formatNum(v) } }\n },\n plugins: {\n legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: 'circle', padding: 12, font: { size: 11 } } },\n tooltip: { callbacks: { label: ctx => ctx.dataset.label + ': ' + formatNum(ctx.parsed.y) } }\n }\n }\n });\n}\n\n\/\/ --- DOUGHNUT ---\nfunction renderDoughnut(data) {\n const platformTotals = {};\n [...activePlatforms].forEach(p => platformTotals[p] = 0);\n data.forEach(r => {\n platformTotals[r.platform] = (platformTotals[r.platform] || 0) + (r.likes || 0) + (r.comments || 0) + (r.shares || 0);\n });\n\n const pKeys = Object.keys(platformTotals).filter(k => platformTotals[k] > 0);\n\n if (charts.doughnut) charts.doughnut.destroy();\n charts.doughnut = new Chart(document.getElementById('chartDoughnut'), {\n type: 'doughnut',\n data: {\n labels: pKeys.map(p => PLATFORMS[p].label),\n datasets: [{\n data: pKeys.map(p => platformTotals[p]),\n backgroundColor: pKeys.map(p => PLATFORMS[p].color),\n borderWidth: 0,\n hoverOffset: 6,\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n cutout: '68%',\n plugins: {\n legend: { display: true, position: 'bottom', labels: { boxWidth: 10, boxHeight: 10, usePointStyle: true, pointStyle: 'circle', padding: 12, font: { size: 11 } } },\n tooltip: { callbacks: { label: ctx => ctx.label + ': ' + formatNum(ctx.parsed) + ' (' + ((ctx.parsed \/ ctx.dataset.data.reduce((a,b) => a+b, 0)) * 100).toFixed(1) + '%)' } }\n }\n }\n });\n}\n\n\/\/ --- BREAKDOWN TABLE ---\nfunction renderBreakdown(data) {\n const body = document.getElementById('breakdownBody');\n const platforms = [...activePlatforms];\n const latest = {};\n\n platforms.forEach(p => {\n latest[p] = { followers: 0, reach: 0, interactions: 0, engRate: 0, engCount: 0 };\n });\n\n data.forEach(r => {\n const l = latest[r.platform];\n if (!l) return;\n l.followers = Math.max(l.followers, r.followers || 0);\n l.reach += r.reach || 0;\n l.interactions += (r.likes || 0) + (r.comments || 0) + (r.shares || 0);\n l.engRate += r.engagement_rate || 0;\n l.engCount++;\n });\n\n body.innerHTML = platforms.map(p => {\n const l = latest[p];\n const avgEng = l.engCount ? (l.engRate \/ l.engCount).toFixed(2) : '0.00';\n return `<tr>\n <td><span class=\"platform-name\"><span class=\"platform-dot\" style=\"background:${PLATFORMS[p].color}\"><\/span>${PLATFORMS[p].label}<\/span><\/td>\n <td class=\"num\">${formatNum(l.followers)}<\/td>\n <td class=\"num\">${formatNum(l.reach)}<\/td>\n <td class=\"num\">${avgEng}%<\/td>\n <td class=\"num\">${formatNum(l.interactions)}<\/td>\n <\/tr>`;\n }).join('');\n}\n\n\/\/ ============================================================\n\/\/ HELPERS\n\/\/ ============================================================\nfunction groupByDateAndPlatform(data, field, mode) {\n const result = {};\n data.forEach(r => {\n const p = r.platform;\n if (!result[p]) result[p] = {};\n if (mode === 'last') result[p][r.date] = r[field] || 0;\n else if (mode === 'sum') result[p][r.date] = (result[p][r.date] || 0) + (r[field] || 0);\n });\n return result;\n}\n\nfunction groupByWeekAndPlatform(data, field, mode) {\n const result = {};\n const counts = {};\n data.forEach(r => {\n const p = r.platform;\n const wk = getWeek(r.date);\n if (!result[p]) { result[p] = {}; counts[p] = {}; }\n result[p][wk] = (result[p][wk] || 0) + (r[field] || 0);\n counts[p][wk] = (counts[p][wk] || 0) + 1;\n });\n if (mode === 'avg') {\n Object.keys(result).forEach(p => {\n Object.keys(result[p]).forEach(wk => {\n result[p][wk] = parseFloat((result[p][wk] \/ counts[p][wk]).toFixed(2));\n });\n });\n }\n return result;\n}\n\nfunction buildLineDatasets(grouped) {\n const allKeys = new Set();\n Object.values(grouped).forEach(obj => Object.keys(obj).forEach(k => allKeys.add(k)));\n const labels = [...allKeys].sort();\n const displayLabels = labels.map(l => l.includes('W') ? 'W' + l.split('-W')[1] : formatDate(l));\n\n const datasets = Object.keys(grouped)\n .filter(p => activePlatforms.has(p))\n .map(p => ({\n label: PLATFORMS[p].label,\n data: labels.map(l => grouped[p][l] || null),\n borderColor: PLATFORMS[p].color,\n backgroundColor: PLATFORMS[p].colorLight,\n fill: false,\n spanGaps: true,\n }));\n\n return { labels: displayLabels, datasets };\n}\n\nfunction getWeek(dateStr) {\n const d = new Date(dateStr);\n const oneJan = new Date(d.getFullYear(), 0, 1);\n const wk = Math.ceil(((d - oneJan) \/ 86400000 + oneJan.getDay() + 1) \/ 7);\n return d.getFullYear() + '-W' + String(wk).padStart(2, '0');\n}\n\nfunction formatDate(dateStr) {\n const d = new Date(dateStr + 'T00:00:00');\n return d.toLocaleDateString('en', { month: 'short', day: 'numeric' });\n}\n\nfunction formatNum(n) {\n if (n >= 1000000) return (n \/ 1000000).toFixed(1) + 'M';\n if (n >= 1000) return (n \/ 1000).toFixed(1) + 'K';\n return String(Math.round(n));\n}\n\n\/\/ ============================================================\n\/\/ EVENT HANDLERS\n\/\/ ============================================================\n\n\/\/ Period buttons\ndocument.querySelectorAll('.period-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n document.querySelectorAll('.period-btn').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n activePeriod = parseInt(btn.dataset.period);\n render();\n });\n});\n\n\/\/ Platform pills\ndocument.querySelectorAll('.platform-pill').forEach(pill => {\n pill.addEventListener('click', () => {\n const p = pill.dataset.platform;\n pill.classList.toggle('active');\n if (pill.classList.contains('active')) activePlatforms.add(p);\n else activePlatforms.delete(p);\n render();\n });\n});\n\n\/\/ ============================================================\n\/\/ INIT\n\/\/ ============================================================\n\/\/ ============================================================\n\/\/ THEME\n\/\/ ============================================================\nfunction getEffectiveTheme() {\n const explicit = document.documentElement.getAttribute('data-theme');\n if (explicit === 'dark' || explicit === 'light') return explicit;\n return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';\n}\nfunction updateThemeIcon() {\n const theme = getEffectiveTheme();\n const sun = document.querySelector('.theme-toggle .icon-sun');\n const moon = document.querySelector('.theme-toggle .icon-moon');\n if (!sun || !moon) return;\n \/\/ Show the icon representing what you'll switch TO\n sun.style.display = theme === 'dark' ? 'block' : 'none';\n moon.style.display = theme === 'dark' ? 'none' : 'block';\n}\nfunction applyTheme() {\n applyChartTheme();\n refreshAxisOpts();\n updateThemeIcon();\n if (rawData && rawData.length) render();\n}\nfunction toggleTheme() {\n const current = getEffectiveTheme();\n const next = current === 'dark' ? 'light' : 'dark';\n document.documentElement.setAttribute('data-theme', next);\n try { localStorage.setItem('smdash-theme', next); } catch(e) {}\n applyTheme();\n}\n\/\/ Restore saved theme preference\ntry {\n const saved = localStorage.getItem('smdash-theme');\n if (saved === 'dark' || saved === 'light') {\n document.documentElement.setAttribute('data-theme', saved);\n }\n} catch(e) {}\n\/\/ React to system theme changes when no explicit theme set\nif (window.matchMedia) {\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n if (!document.documentElement.getAttribute('data-theme')) applyTheme();\n });\n}\n\n(function init() {\n \/\/ Set branding\n document.getElementById('dashboardTitle').textContent = CONFIG.clientName;\n document.getElementById('clientLogo').textContent = CONFIG.logoLetter;\n document.getElementById('footerBrand').textContent = CONFIG.brandName;\n\n \/\/ Theme toggle\n const toggle = document.getElementById('themeToggle');\n if (toggle) toggle.addEventListener('click', toggleTheme);\n updateThemeIcon();\n applyChartTheme();\n refreshAxisOpts();\n\n \/\/ Load from URL param or sample data\n const params = new URLSearchParams(window.location.search);\n const sheetParam = params.get('sheet');\n if (sheetParam) {\n fetchData(sheetParam);\n } else if (CONFIG.sheetUrl) {\n fetchData(CONFIG.sheetUrl);\n } else {\n loadSampleData();\n }\n\n \/\/ Auto-refresh\n if (CONFIG.refreshInterval > 0 && CONFIG.sheetUrl) {\n setInterval(() => fetchData(CONFIG.sheetUrl), CONFIG.refreshInterval * 60 * 1000);\n }\n})();\n<\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Social Media Dashboard C Social Media Dashboard Last updated: \u2014 7d 30d 90d Total Followers \u2014 Total Reach \u2014 Impressions \u2014 Engagement Rate \u2014 Total Interactions \u2014 Instagram TikTok YouTube LinkedIn Facebook Follower Growth Cumulative by platform Engagement Rate Weekly average % Reach & Impressions Daily totals across platforms Interactions by Type Likes, comments, shares […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dash - Kobra Entertainment<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kobraentertainment.com\/fi\/dash\/\" \/>\n<meta property=\"og:locale\" content=\"fi_FI\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dash - Kobra Entertainment\" \/>\n<meta property=\"og:description\" content=\"Social Media Dashboard C Social Media Dashboard Last updated: \u2014 7d 30d 90d Total Followers \u2014 Total Reach \u2014 Impressions \u2014 Engagement Rate \u2014 Total Interactions \u2014 Instagram TikTok YouTube LinkedIn Facebook Follower Growth Cumulative by platform Engagement Rate Weekly average % Reach & Impressions Daily totals across platforms Interactions by Type Likes, comments, shares […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kobraentertainment.com\/fi\/dash\/\" \/>\n<meta property=\"og:site_name\" content=\"Kobra Entertainment\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kobraentertainment\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-15T10:09:17+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Arvioitu lukuaika\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuutti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kobraentertainment.com\/dash\/\",\"url\":\"https:\/\/kobraentertainment.com\/dash\/\",\"name\":\"Dash - Kobra Entertainment\",\"isPartOf\":{\"@id\":\"https:\/\/kobraentertainment.com\/#website\"},\"datePublished\":\"2026-04-15T09:54:30+00:00\",\"dateModified\":\"2026-04-15T10:09:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kobraentertainment.com\/dash\/#breadcrumb\"},\"inLanguage\":\"fi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kobraentertainment.com\/dash\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kobraentertainment.com\/dash\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kobraentertainment.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dash\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kobraentertainment.com\/#website\",\"url\":\"https:\/\/kobraentertainment.com\/\",\"name\":\"Kobra Entertainment\",\"description\":\"Kobra Entertainment is a music marketing and management company.\",\"publisher\":{\"@id\":\"https:\/\/kobraentertainment.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kobraentertainment.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fi\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kobraentertainment.com\/#organization\",\"name\":\"Kobra Entertainment\",\"url\":\"https:\/\/kobraentertainment.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fi\",\"@id\":\"https:\/\/kobraentertainment.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/kobraentertainment.com\/wp-content\/uploads\/2021\/01\/cropped-kobra.pyorea.valkoinen.2.png\",\"contentUrl\":\"http:\/\/kobraentertainment.com\/wp-content\/uploads\/2021\/01\/cropped-kobra.pyorea.valkoinen.2.png\",\"width\":1753,\"height\":1240,\"caption\":\"Kobra Entertainment\"},\"image\":{\"@id\":\"https:\/\/kobraentertainment.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kobraentertainment\",\"https:\/\/www.linkedin.com\/company\/15860212\",\"https:\/\/www.instagram.com\/kobraentertainment\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dash - Kobra Entertainment","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kobraentertainment.com\/fi\/dash\/","og_locale":"fi_FI","og_type":"article","og_title":"Dash - Kobra Entertainment","og_description":"Social Media Dashboard C Social Media Dashboard Last updated: \u2014 7d 30d 90d Total Followers \u2014 Total Reach \u2014 Impressions \u2014 Engagement Rate \u2014 Total Interactions \u2014 Instagram TikTok YouTube LinkedIn Facebook Follower Growth Cumulative by platform Engagement Rate Weekly average % Reach & Impressions Daily totals across platforms Interactions by Type Likes, comments, shares […]","og_url":"https:\/\/kobraentertainment.com\/fi\/dash\/","og_site_name":"Kobra Entertainment","article_publisher":"https:\/\/www.facebook.com\/kobraentertainment","article_modified_time":"2026-04-15T10:09:17+00:00","twitter_card":"summary_large_image","twitter_misc":{"Arvioitu lukuaika":"1 minuutti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kobraentertainment.com\/dash\/","url":"https:\/\/kobraentertainment.com\/dash\/","name":"Dash - Kobra Entertainment","isPartOf":{"@id":"https:\/\/kobraentertainment.com\/#website"},"datePublished":"2026-04-15T09:54:30+00:00","dateModified":"2026-04-15T10:09:17+00:00","breadcrumb":{"@id":"https:\/\/kobraentertainment.com\/dash\/#breadcrumb"},"inLanguage":"fi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kobraentertainment.com\/dash\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kobraentertainment.com\/dash\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kobraentertainment.com\/"},{"@type":"ListItem","position":2,"name":"Dash"}]},{"@type":"WebSite","@id":"https:\/\/kobraentertainment.com\/#website","url":"https:\/\/kobraentertainment.com\/","name":"Kobra Entertainment","description":"Kobra Entertainment is a music marketing and management company.","publisher":{"@id":"https:\/\/kobraentertainment.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kobraentertainment.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fi"},{"@type":"Organization","@id":"https:\/\/kobraentertainment.com\/#organization","name":"Kobra Entertainment","url":"https:\/\/kobraentertainment.com\/","logo":{"@type":"ImageObject","inLanguage":"fi","@id":"https:\/\/kobraentertainment.com\/#\/schema\/logo\/image\/","url":"http:\/\/kobraentertainment.com\/wp-content\/uploads\/2021\/01\/cropped-kobra.pyorea.valkoinen.2.png","contentUrl":"http:\/\/kobraentertainment.com\/wp-content\/uploads\/2021\/01\/cropped-kobra.pyorea.valkoinen.2.png","width":1753,"height":1240,"caption":"Kobra Entertainment"},"image":{"@id":"https:\/\/kobraentertainment.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kobraentertainment","https:\/\/www.linkedin.com\/company\/15860212","https:\/\/www.instagram.com\/kobraentertainment"]}]}},"_links":{"self":[{"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/pages\/3570"}],"collection":[{"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/comments?post=3570"}],"version-history":[{"count":22,"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/pages\/3570\/revisions"}],"predecessor-version":[{"id":3593,"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/pages\/3570\/revisions\/3593"}],"wp:attachment":[{"href":"https:\/\/kobraentertainment.com\/fi\/wp-json\/wp\/v2\/media?parent=3570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}