|
| 1 | +/* global Highcharts */ |
| 2 | + |
| 3 | +// Hardcoded distribution data — will be replaced by API fetch when the endpoint is finalized |
| 4 | +import distributionData from './cwvDistributionData.json'; |
| 5 | + |
| 6 | +const METRIC_CONFIG = { |
| 7 | + LCP: { bucketField: 'loading_bucket', originsField: 'lcp_origins', unit: 'ms', label: 'LCP (ms)' }, |
| 8 | + FCP: { bucketField: 'loading_bucket', originsField: 'fcp_origins', unit: 'ms', label: 'FCP (ms)' }, |
| 9 | + TTFB: { bucketField: 'loading_bucket', originsField: 'ttfb_origins', unit: 'ms', label: 'TTFB (ms)' }, |
| 10 | + INP: { bucketField: 'inp_bucket', originsField: 'inp_origins', unit: 'ms', label: 'INP (ms)' }, |
| 11 | + CLS: { bucketField: 'cls_bucket', originsField: 'cls_origins', unit: '', label: 'CLS' }, |
| 12 | +}; |
| 13 | + |
| 14 | +const THRESHOLDS = { |
| 15 | + LCP: [{ value: 2500, label: 'Good' }, { value: 4000, label: 'Needs improvement' }], |
| 16 | + FCP: [{ value: 1800, label: 'Good' }, { value: 3000, label: 'Needs improvement' }], |
| 17 | + TTFB: [{ value: 800, label: 'Good' }, { value: 1800, label: 'Needs improvement' }], |
| 18 | + INP: [{ value: 200, label: 'Good' }, { value: 500, label: 'Needs improvement' }], |
| 19 | + CLS: [{ value: 0.1, label: 'Good' }, { value: 0.25, label: 'Needs improvement' }], |
| 20 | +}; |
| 21 | + |
| 22 | +// Bright, saturated CWV zone colors for both themes |
| 23 | +const ZONE_COLORS = { |
| 24 | + light: { good: '#0CCE6B', needsImprovement: '#FFA400', poor: '#FF4E42', text: '#444', gridLine: '#e6e6e6' }, |
| 25 | + dark: { good: '#0CCE6B', needsImprovement: '#FBBC04', poor: '#FF6659', text: '#ccc', gridLine: '#444' }, |
| 26 | +}; |
| 27 | + |
| 28 | +class CwvDistribution { |
| 29 | + // pageConfig, config, filters, data are accepted to satisfy the Section component contract |
| 30 | + constructor(id, pageConfig, config, filters, data) { |
| 31 | + this.id = id; |
| 32 | + this.pageFilters = filters; |
| 33 | + this.data = data; |
| 34 | + this.selectedMetric = 'LCP'; |
| 35 | + this.chart = null; |
| 36 | + this.root = document.querySelector(`[data-id="${this.id}"]`); |
| 37 | + |
| 38 | + this.bindEventListeners(); |
| 39 | + } |
| 40 | + |
| 41 | + bindEventListeners() { |
| 42 | + if (!this.root) return; |
| 43 | + const root = this.root; |
| 44 | + |
| 45 | + // Metric selector |
| 46 | + root.querySelectorAll('.cwv-distribution-metric-selector').forEach(dropdown => { |
| 47 | + dropdown.addEventListener('change', event => { |
| 48 | + this.selectedMetric = event.target.value; |
| 49 | + this.renderChart(); |
| 50 | + }); |
| 51 | + }); |
| 52 | + |
| 53 | + // Lazy render on <details> toggle |
| 54 | + const details = root.closest('details'); |
| 55 | + if (details) { |
| 56 | + details.addEventListener('toggle', () => { |
| 57 | + if (details.open && !this.chart) { |
| 58 | + this.renderChart(); |
| 59 | + } else if (details.open && this.chart) { |
| 60 | + this.chart.reflow(); |
| 61 | + } |
| 62 | + }); |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + updateContent() { |
| 67 | + if (this.chart) this.renderChart(); |
| 68 | + } |
| 69 | + |
| 70 | + trimWithOverflow(rows, originsField, percentile) { |
| 71 | + const total = rows.reduce((sum, row) => sum + row[originsField], 0); |
| 72 | + if (total === 0) return { visible: rows, overflowCount: 0 }; |
| 73 | + |
| 74 | + const cutoff = total * percentile; |
| 75 | + let cumulative = 0; |
| 76 | + let cutIndex = rows.length; |
| 77 | + for (let i = 0; i < rows.length; i++) { |
| 78 | + cumulative += rows[i][originsField]; |
| 79 | + if (cumulative >= cutoff) { |
| 80 | + cutIndex = Math.min(i + 2, rows.length); |
| 81 | + break; |
| 82 | + } |
| 83 | + } |
| 84 | + |
| 85 | + const visible = rows.slice(0, cutIndex); |
| 86 | + const overflowCount = rows.slice(cutIndex).reduce((sum, row) => sum + row[originsField], 0); |
| 87 | + return { visible, overflowCount }; |
| 88 | + } |
| 89 | + |
| 90 | + renderChart() { |
| 91 | + if (!distributionData || distributionData.length === 0) return; |
| 92 | + if (!this.root) return; |
| 93 | + |
| 94 | + const client = this.root.dataset.client || 'mobile'; |
| 95 | + const metricCfg = METRIC_CONFIG[this.selectedMetric]; |
| 96 | + const thresholds = THRESHOLDS[this.selectedMetric] || []; |
| 97 | + |
| 98 | + // Filter by client and sort by bucket |
| 99 | + const clientRows = distributionData |
| 100 | + .filter(row => row.client === client) |
| 101 | + .sort((a, b) => a[metricCfg.bucketField] - b[metricCfg.bucketField]); |
| 102 | + |
| 103 | + // Trim to 99.5th percentile and aggregate the tail into an overflow bucket |
| 104 | + const { visible, overflowCount } = this.trimWithOverflow( |
| 105 | + clientRows, metricCfg.originsField, 0.995 |
| 106 | + ); |
| 107 | + |
| 108 | + const formatBucket = (val) => { |
| 109 | + if (metricCfg.unit === 'ms') { |
| 110 | + return val >= 1000 ? `${(val / 1000).toFixed(1)}s` : `${val}ms`; |
| 111 | + } |
| 112 | + return String(val); |
| 113 | + }; |
| 114 | + |
| 115 | + const categories = visible.map(row => formatBucket(row[metricCfg.bucketField])); |
| 116 | + const seriesData = visible.map(row => row[metricCfg.originsField]); |
| 117 | + |
| 118 | + // Add overflow bucket if there are hidden origins |
| 119 | + if (overflowCount > 0) { |
| 120 | + const lastBucket = visible[visible.length - 1][metricCfg.bucketField]; |
| 121 | + categories.push(`${formatBucket(lastBucket)}+`); |
| 122 | + seriesData.push(overflowCount); |
| 123 | + } |
| 124 | + |
| 125 | + // Color each bar based on threshold zones, with theme support |
| 126 | + const theme = document.querySelector('html').dataset.theme; |
| 127 | + const zoneColors = theme === 'dark' ? ZONE_COLORS.dark : ZONE_COLORS.light; |
| 128 | + |
| 129 | + const getColor = (val) => { |
| 130 | + if (thresholds.length >= 2) { |
| 131 | + if (val < thresholds[0].value) return zoneColors.good; |
| 132 | + if (val < thresholds[1].value) return zoneColors.needsImprovement; |
| 133 | + return zoneColors.poor; |
| 134 | + } |
| 135 | + return zoneColors.good; |
| 136 | + }; |
| 137 | + |
| 138 | + const colors = visible.map(row => getColor(row[metricCfg.bucketField])); |
| 139 | + if (overflowCount > 0) { |
| 140 | + colors.push(zoneColors.poor); |
| 141 | + } |
| 142 | + |
| 143 | + // Destroy previous chart |
| 144 | + if (this.chart) { |
| 145 | + this.chart.destroy(); |
| 146 | + this.chart = null; |
| 147 | + } |
| 148 | + |
| 149 | + const chartContainerId = `${this.id}-chart`; |
| 150 | + const container = document.getElementById(chartContainerId); |
| 151 | + if (!container) return; |
| 152 | + |
| 153 | + const textColor = zoneColors.text; |
| 154 | + const gridLineColor = zoneColors.gridLine; |
| 155 | + |
| 156 | + // Build plotLines for thresholds |
| 157 | + const plotLineColors = [zoneColors.good, zoneColors.needsImprovement]; |
| 158 | + const plotLines = thresholds.map((t, i) => { |
| 159 | + const idx = visible.findIndex(row => row[metricCfg.bucketField] >= t.value); |
| 160 | + if (idx === -1) return null; |
| 161 | + return { |
| 162 | + value: idx, |
| 163 | + color: plotLineColors[i], |
| 164 | + width: 2, |
| 165 | + dashStyle: 'Dash', |
| 166 | + label: { |
| 167 | + text: `${t.label} (${metricCfg.unit ? t.value + metricCfg.unit : t.value})`, |
| 168 | + style: { fontSize: '11px', color: textColor }, |
| 169 | + }, |
| 170 | + zIndex: 5, |
| 171 | + }; |
| 172 | + }).filter(Boolean); |
| 173 | + |
| 174 | + this.chart = Highcharts.chart(chartContainerId, { |
| 175 | + chart: { type: 'column', backgroundColor: 'transparent' }, |
| 176 | + title: { text: null }, |
| 177 | + xAxis: { |
| 178 | + categories, |
| 179 | + title: { text: metricCfg.label, style: { color: textColor } }, |
| 180 | + labels: { |
| 181 | + step: Math.ceil(categories.length / 20), |
| 182 | + rotation: -45, |
| 183 | + style: { color: textColor }, |
| 184 | + }, |
| 185 | + lineColor: gridLineColor, |
| 186 | + plotLines, |
| 187 | + }, |
| 188 | + yAxis: { |
| 189 | + title: { text: 'Number of origins', style: { color: textColor } }, |
| 190 | + labels: { style: { color: textColor } }, |
| 191 | + gridLineColor, |
| 192 | + min: 0, |
| 193 | + }, |
| 194 | + legend: { enabled: false }, |
| 195 | + tooltip: { |
| 196 | + formatter: function () { |
| 197 | + return `<b>${this.x}</b><br/>Origins: <b>${this.y.toLocaleString()}</b>`; |
| 198 | + }, |
| 199 | + }, |
| 200 | + plotOptions: { |
| 201 | + column: { |
| 202 | + pointPadding: 0, |
| 203 | + groupPadding: 0, |
| 204 | + borderWidth: 0, |
| 205 | + }, |
| 206 | + }, |
| 207 | + series: [{ |
| 208 | + name: 'Origins', |
| 209 | + data: seriesData.map((value, i) => ({ y: value, color: colors[i] })), |
| 210 | + }], |
| 211 | + credits: { enabled: false }, |
| 212 | + }); |
| 213 | + |
| 214 | + } |
| 215 | +} |
| 216 | + |
| 217 | +window.CwvDistribution = CwvDistribution; |
0 commit comments