Skip to content

Commit

Permalink
Added date to help identify the week
Browse files Browse the repository at this point in the history
  • Loading branch information
@ale-cx
ale-cx committed Aug 21, 2024
1 parent c760549 commit 2309f74
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 123 deletions.
248 changes: 136 additions & 112 deletions chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,14 +434,16 @@ function labelMetricDatax(metrics, key, index) {


function formChartData(apiResponse) {

// Iterate through each bucket in the API response
apiResponse.forEach(bucket => {

let formFactor = bucket.record.key.formFactor ?? "SUM"
// Determine the form factor for the current bucket, defaulting to "SUM" if not specified
let formFactor = bucket.record.key.formFactor ?? "SUM";
// Initialize the data structure for the current bucket
let dataStructure = {
"site": bucket.record.key.origin,
"formFactor": formFactor,
"chart": [
// Define the metrics to be charted
{
"metric": "first_contentful_paint",
"data": []
Expand All @@ -468,134 +470,156 @@ function formChartData(apiResponse) {
}]
}

// Iterate through each metric to be charted
for (let chart of dataStructure.chart) {
let teemo = [];
let teemo = []; // Initialize an array to hold the data for the current metric
// Iterate through each week (0 to 24) to collect data
for (let i = 0; i < 25; i++) {
// Extract the density values for each category (good, need improvement, bad) for the current week
let metricObj = {
"week": i,
"good": bucket.record.metrics[chart.metric].histogramTimeseries[0].densities[i] * 100,
"Need Improvement": bucket.record.metrics[chart.metric].histogramTimeseries[1].densities[i] * 100,
"bad": bucket.record.metrics[chart.metric].histogramTimeseries[2].densities[i] * 100
"bad": bucket.record.metrics[chart.metric].histogramTimeseries[2].densities[i] * 100,
"firstDate": bucket.record.collectionPeriods[i].firstDate,
"lastDate": bucket.record.collectionPeriods[i].lastDate
};
teemo.push(metricObj)
teemo.push(metricObj); // Add the metric data for the current week to the teemo array
}

chart.data.push(teemo);
chart.data.push(teemo); // Add the teemo array to the data structure for the current metric
}

console.log(dataStructure)
sortCartData(dataStructure)

})
console.log(dataStructure); // Log the data structure for debugging purposes
sortCartData(dataStructure); // Call the function to sort and display the chart data
});
}


// Function to sort and display the chart data
async function sortCartData(chartData) {
try {
// debugger
let domainName = chartData.site.replace(/^https?:\/\//, '').split('.')[1]
const chartDiv = document.querySelector(`#${domainName}Chart #chartdiv #${domainName}${chartData.formFactor}Chart`);
const charts = [];

for (const metricData of chartData.chart) {
// Extract the domain name from the site URL
let domainName = chartData.site.replace(/^https?:\/\//, '').split('.')[1];
// Select the chart div for the current domain and form factor
const chartDiv = document.querySelector(`#${domainName}Chart #chartdiv #${domainName}${chartData.formFactor}Chart`);
const charts = []; // Initialize an array to hold the charts

// Iterate through each metric in the chart data
for (const metricData of chartData.chart) {
// Create the HTML template for the chart
let charttemplate = `
<div class="col s12 m6 l4 chart">
<p>${metricData.metric.replace(/_/g, ' ')}</p>
<div id="${metricData.metric}-${chartData.formFactor}" style="width: 100%; height: 500px"></div>
</div>
`;
// Insert the chart template into the chart div
chartDiv.insertAdjacentHTML("afterbegin", charttemplate);

// Initialize the root for the chart
const root = am5.Root.new(`${metricData.metric}-${chartData.formFactor}`);

// Set up the chart
root.fps = 10;
const chart = root.container.children.push(
am5xy.XYChart.new(root, {
layout: root.verticalLayout,
pinchZoomX: false,
})
);

// Set up the cursor
const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "none" }));
cursor.lineY.set("visible", false);

// Set up the data
const data = metricData.data[0].map(item => ({
...item,
firstDateString: `${new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(item.firstDate.year, item.firstDate.month - 1, item.firstDate.day))} ${item.firstDate.day}, ${item.firstDate.year}`,
lastDateString: `${new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(item.lastDate.year, item.lastDate.month - 1, item.lastDate.day))} ${item.lastDate.day}, ${item.lastDate.year}`,
}));

const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "week",
startLocation: 0.5,
endLocation: 0.5,
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {
labelText: "{firstDateString} to {lastDateString}",
}),
})
);
xAxis.data.setAll(data);

const yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
max: 100,
calculateTotals: true,
numberFormat: "#'%'",
renderer: am5xy.AxisRendererY.new(root, {}),
})
);

// Function to create a series for the chart
function createSeries(name, field, color) {
const series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
fill: am5.color(color),
stacked: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
categoryXField: "week",
valueYShow: "valueYTotalPercent",
legendValueText: "{valueY}",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "[bold]{name}[/]\nWeek {categoryX}: {valueYTotalPercent.formatNumber('#.0')}% ({valueY})",
}),
})
);

series.fills.template.setAll({
fillOpacity: 0.5,
visible: true,
});

// Set the data for the series
series.data.setAll(data);
series.appear(1000);
}

let charttemplate = `
<div class="col s12 m6 l4 chart">
<p>${metricData.metric}-${chartData.formFactor}</p>
<div id="${metricData.metric}-${chartData.formFactor}" style="width: 100%; height: 500px"></div>
</div>
`
chartDiv.insertAdjacentHTML("afterbegin", charttemplate);

const root = am5.Root.new(`${metricData.metric}-${chartData.formFactor}`);
// Define colors for the series
let green = 0x10c180;
let yellow = 0xfddc77;
let red = 0xff0000;

root.fps = 10;

const chart = root.container.children.push(
am5xy.XYChart.new(root, {
layout: root.verticalLayout,
pinchZoomX: false,
})
);

const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "none" }));
cursor.lineY.set("visible", false);

const data = metricData.data[0];

const xAxis = chart.xAxes.push(
am5xy.CategoryAxis.new(root, {
categoryField: "week",
startLocation: 0.5,
endLocation: 0.5,
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {}),
})
);
xAxis.data.setAll(data);

const yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
min: 0,
max: 100,
calculateTotals: true,
numberFormat: "#'%'",
renderer: am5xy.AxisRendererY.new(root, {}),
})
);

function createSeries(name, field, color) {
const series = chart.series.push(
am5xy.LineSeries.new(root, {
name: name,
fill: am5.color(color),
stacked: true,
xAxis: xAxis,
yAxis: yAxis,
valueYField: field,
categoryXField: "week",
valueYShow: "valueYTotalPercent",
legendValueText: "{valueY}",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "horizontal",
labelText: "[bold]{name}[/]\nWeek {categoryX}: {valueYTotalPercent.formatNumber('#.0')}% ({valueY})",
}),
})
);

series.fills.template.setAll({
fillOpacity: 0.5,
visible: true,
});

series.data.setAll(data);
series.appear(1000);
}
let green = 0x10c180;
let yellow = 0xfddc77;
let red = 0xff0000;
// Create series for each category
createSeries("Good", "good", green);
createSeries("Need improvements", "Need Improvement", yellow);
createSeries("Bad", "bad", red);

createSeries("Good", "good", green);
createSeries("Need improvements", "Need Improvement", yellow);
createSeries("Bad", "bad", red);
// Add a scrollbar to the chart
chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));

chart.set("scrollbarX", am5.Scrollbar.new(root, { orientation: "horizontal" }));

const legend = chart.children.push(am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
legend.data.setAll(chart.series.values);

charts.push(chart);
}
// Add a legend to the chart
const legend = chart.children.push(am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
legend.data.setAll(chart.series.values);

charts.forEach((chart) => {
chart.paddingRight = 20;
});

// root.dispose();
return charts;
charts.push(chart); // Add the chart to the charts array
}

// Adjust the padding for each chart
charts.forEach((chart) => {
chart.paddingRight = 20;
});

// Return the charts array
return charts;
} catch (error) {
console.error(error);
console.error(error);
}
}

}
13 changes: 6 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,14 +80,13 @@ <h1>CrUX by Origin</h1>
<h6>Visualize field data collected over the last 28 days</h6>
<div class="container">
<form class="row">
<div class="input-field col s12 m10">
<input aria-label="Search origin" role="search" placeholder="www.example.com" id="search" type="search"
required>
<i class="material-icons">close</i>
<div class="input-field col s12 m7 l9">
<input aria-label="Search origin" role="search" placeholder="www.example.com" id="search" type="search" required>
<label for="search">Search origin</label>
<i id="clear" class="material-icons prefix">close</i>
</div>
<div class="col s12 m2">
<button class="waves-effect waves-light btn-large grey lighten-5" type="submit"
name="action">Fetch</button>
<div class="col s12 m5 l3">
<button class="waves-effect waves-light btn-large grey lighten-5" type="submit" name="action">Get CrUX Metrics</button>
</div>
</form>
</div>
Expand Down
19 changes: 15 additions & 4 deletions init.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
border: transparent;
}

.chart p {
text-transform: capitalize;
}
/* fallback */
@font-face {
font-family: 'Material Icons';
Expand Down Expand Up @@ -61,6 +64,12 @@ input:-internal-autofill-selected {
color: -internal-light-dark-color(black, white) !important;
}

.dark .card-reveal {
background-color: #1e2123;
}
.dark .grey-text.text-darken-4 {
color: white!important;
}
.info {
background-color: #dceae9;
border-bottom: 1px solid #e2e2e2;
Expand Down Expand Up @@ -136,10 +145,9 @@ button.btn-large {

#search {
height: 50px;
background: white;
border-radius: 30px;
background: transparent;
border-radius: 0;
padding-left: 10px;
border: 1px solid #fbfbfb
}

#search:focus {
Expand Down Expand Up @@ -197,7 +205,10 @@ h2 {
margin-right: 30px;
}
*/

.grey.lighten-5 {
background-color: rgb(48 61 68) !important;
color: white;
}
span {
text-transform: capitalize;
}
Expand Down

0 comments on commit 2309f74

Please sign in to comment.