2. Week 2
Op maandag zijn we begonnen met data aanroepen die op de GA API staat. Momenteel is dit de route (dummy route), later ga ik deze route aanpassen zodat ik de data oproep die ik nodig heb.
app.get('/', async function (request, response) {
const [apiResponse] = await analyticsDataClient.runReport({
property: `properties/${propertyId}`,
dateRanges: [
{
startDate: '2024-06-08',
endDate: 'today',
},
],
dimensions: [
{
name: 'city',
},
],
metrics: [
{
name: 'activeUsers',
},
],
});
response.render('index', {apiResponse: apiResponse})
})
Om layout-shifts te verkomen heb ik via sizes toegevoegd, daarnaast heb ik ook 2 andere formats toegevoegd, dit heb ik gedaan omdat het de performance verbeterd.
<picture class="orb-1">
<source srcset="https://cdn.prod.website-files.com/618ce432112db910368c7f42/656ef5e00be1d5284aa75b76_fresk_Orb_grain_01?format=avif 500w" type="images/avif" sizes="(max-width: 1439px) 56vw, 40vw">
<source srcset="https://cdn.prod.website-files.com/618ce432112db910368c7f42/656ef5e00be1d5284aa75b76_fresk_Orb_grain_01?format=webp 500w" type="images/webp" sizes="(max-width: 1439px) 56vw, 40vw">
<img src="https://cdn.prod.website-files.com/618ce432112db910368c7f42/656ef5e00be1d5284aa75b76_fresk_Orb_grain_01.png"
width="250" height="250" alt="" loading="lazy">
</picture>
Daarna ben ik gestart met het design realiseren. Ik ben gestart met mobile first, op dinsdag was ik verder gegaan met responsive design. Omdat ik nog routes moet maken heb ik op dit moment de grid-layout, later als ik routes ga maken komt wel data in de blokken (LinkedIn, google, hotjar). Dan wordt de data getoond als een soort predashboard en dan kan je door klikken als je naar de dashboard wilt met de officiële data.
Daarna had ik een html validator test gedaan, ik had iets van 10 errors, ik heb die errors opgelost en nu heb ik nog 1 warning.
Op dinsdag ben ik verder gegaan met responsive design op de preface page. Doordat ik gebruik maak van afbeeldingen in de achtergrond heb ik meerdere mediaqueries gebruikt.
Ik heb in de server.js file nieuwe routes toegevoegd. In het index file wordt geen data aan mee gegeven, bij de dashboard wel, hier ga ik nader nog aanpassingen aanmaken zodat ik op de dashboardpage dynamische data kan tonen.
app.get('/', function (request, response) {
response.render('index');
});
// Route for the dashboard page
app.get('/dashboard', function (request, response) {
response.render('dashboard');
});
De 2e pagina die ik heb gemaakt is de login pagina, dit is een pagina zonder data dus hiervoor hoefde ik in de server alleen een route aan te maken. Voor deze pagina had ik inspiratie gedaan op verschillende sites, vanuit daar heb ik mijn design gebaseerd. Ik had al als idee om een gradient als background te doen, om het verder te matchen met de preface page heb ik hier ook het glass-effect toegevoegd.
Daarna heb ik het met een mediaquery responsive gemaakt.
Op woensdag was ik begonnen met het maken van een ontwerp voor de officiële data page. Op deze pagina komen grafieken te staan die de data weergeeft, ik laat dit in het ontwerp nog een beetje open zodat ik verschillende mogelijkheden kan uittesten tijdens het bouwen.
Omdat de opdrachtgever een data overzicht wilt heb ik besloten om van grafieken gebruik te maken. In de onderstaande grafiek laat ik de 'firstSessionDate' en 'continent' zien, beide hebben als metric de 'ActiveUser', door deze grafieken kunnen ze de toename van sessies zien. Om dit te realiseren maak ik gebruik van Chart.js als plugin. Ik heb hierbij rekeningen gehouden met de hierachy of user needs, door vooral de functionaliteit en reliable (1e twee lagen Pe) als code strategie toe te passen.
Om deze data aan te roepen in heb ik een route gemaakt in de server. Ik maak gebruik van dimensions en metrics, door het combineren van deze 2 core reporting queries kan je grafieken maken.
app.get('/dashboard', async function (request, response) {
const [apiProgress] = await analyticsDataClient.runReport({
property: `properties/${propertyId}`,
dateRanges: [
{
startDate: '2023-06-01',
endDate: 'today',
},
],
dimensions: [
{
name: 'firstSessionDate',
},
],
metrics: [
{
name: 'activeUsers',
},
],
});
response.render('dashboard', {data: apiProgress})
})
Na het aanroepen van de data in de server heb ik in een ejs file een canvas gebruikt, daaronder staan de scripts. Ik heb een aantal comments in de code nog staan zodat ik later nog aanpassingen kan maken, de comments hebben vooral te maken op het styling gebied van de grafiek.
<div>
<canvas id="progressChart" width="200" height="400" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('progressChart').getContext('2d');
// Sort data rows by metric value in ascending order
const sortedData = <%- JSON.stringify(data.rows.sort((a, b) => a.metricValues[0].value - b.metricValues[0].value)) %>;
new Chart(ctx, {
type: 'line',
data: {
labels: sortedData.map(row => row.dimensionValues[0].value),
datasets: [{
label: 'dimension firstSessionDate',
data: sortedData.map(row => row.metricValues[0].value),
borderWidth: 2, // Adjust border width
fill: false, // Ensure the line is not filled
borderColor: '#B9FFB7', // Customize the line color
backgroundColor: 'black', // Customize the fill color
tension: 0.5 // Customize the line tension (curviness)
}]
},
options: {
responsive: true,
maintainAspectRatio: false, // Allow the chart to resize according to the canvas size
scales: {
x: {
grid: {
display: false // Remove grid lines on the x-axis
}
},
y: {
beginAtZero: true,
grid: {
display: false // Remove grid lines on the y-axis
}
}
},
plugins: {
legend: {
labels: {
font: {
size: 14 // Change the font size of the legend
}
}
}
},
elements: {
point: {
radius: 5, // Customize the point size
backgroundColor: '#B9FFB7' // Customize the point color
}
}
}
});
</script>
Daarna heb ik een van de landen en steden data ingeladen, dit wordt geen grafiek, momenteel gebruik ik daar een 'p' voor als element maar aangezien het een lijst is ga ik het nader aanpassen.
<article>
<% country.rows.slice(0, 30).forEach(function(row) { %>
<p><%= row.dimensionValues[0].value %>: <%= row.metricValues[0].value %></p>
<% }) %>
</article>
<article>
<% city.rows.slice(0, 30).forEach(function(row) { %>
<p><%= row.dimensionValues[0].value %>: <%= row.metricValues[0].value %></p>
<% }) %>
</article>
Op donderdag was ik de dag begonnen met het aanvullen van een aantal bewijslasten in portflow.
Ik ben begonnen met het testen van de inlog-page omdat die grotendeels af is. Om te beginnen had ik een lighthouse test gedaan om de accessibility te checken, uit de test kwam een score van 100.
Bij de performancetest kwam ervoor de mobile als score 83, en voor de desktop kwam er als score 97. Ik ben de errors doorgelopen om de performance te verbeteren. 1 van de melding was elimineer bronnen die weergave blokkeren Ik heb dit artikel doorgenomen om de performance score op te hogen. Ook had ik een artikel van smashing magazine gelezen waar het over lighthouse testen gaat. Verder heb ik online een artikel gevonden om je image responsive te maken als je gebruik maakt van background-images in css. Ik heb de stappen van Optimize CSS background images with media queries gevolgd, het resultaat was dat de score met nul omhoog is gegaan. Ik ga later terugkomen op om de performance op te hogen.
Ook heb ik een HTML validator gedaan om mijn html te controleren op errors, ik kreeg 1 error in een svg, die ik heb ik aangepast en daarna kwamen er 0 errors naar voren in de test.
Daarna heb ik de Preface-page getest op accessibility, de score voor deze pagina is 100.
Bij de performance had heeft de page voor mobile performance een 83 gescoord en 99 voor desktop.
Bij de HTML validator was er 1 error bijgekomen sinds de laatste keer, ik heb die error opgelost en is er alleen nog maar een warning.
Om de code en design review voor te bereiden van morgen heb ik besloten om mijn code te refactoren, hierdoor zorg ik voor een overzichtelijke code en kom ik misschien zelf errors tegen, ook is het handig voor diegene die code/design review over mijn code geeft.
- Van inlog-page -> preface page -> dashboard page
- Grafieken testen (zijn ze duidelijk)
- Preface page (is de functie duidelijk)
- Juan is nieuw bij Fresk.Digital en gaat de data insight voor het eerst bekijken. Hij begint op de inlogpagina en vanaf daar moet hij naar de dashboard pagina zien te komen;
- Rodion moet een rapportje schrijven over de toename van ActiveUsers per continent. Vanaf de dashboard pagina gaat die opzoek naar de data insights van GA;
- Karel is onderweg en wil de meest recente ontwikkeling van de data insights checken van GA, LinkedIn analystics & Hotjar analytics, zonder een hele pagina dashboard pagina te openen waar allemaal data opstaat;
De inlogpage is duidelijk, alleen moet je bij password een 'required' toevoegen. De preface-page functie is ook een handige functie ik zou deze pagina laten en niet verwijderen. De grafieken op je dashboard zijn ook duidelijk, momenteel heb je ze mobile-first gemaakt, voor desktop zijn ze nu niet breed genoeg.
Is de weg van inlog naar preface naar de dashboard een logische route?
Ja
Zou het handig zijn om een optie te maken om de preface over te slaan? Is de preface een handige functie
Het zou kunnen, misschien kan je de preface uitgebreider kunnen maken. De preface is een handige functie want dan hoef je niet de hele dashboard te openen, om die reden zou ik hem houden.
Dus met meer data?
Ja, en dan zou ik die tekst om naar de volgende pagina op een andere plek te zetten. Ik zou die tekst ook een andere styling geven zodat het duidelijker is dat het een link naar een andere pagina is.
Wat heb jij als suggestie daarvoor?
Misschien de arrow animeren, of het stylen als een button. Ik zou de tekst ook onderaan de pagina te zetten, zodat de focus meer ligt op de preface data.
Wat zou je veranderen aan de grafieken om het nog duidelijker te maken?
Ik zou de grafieken even breed als het scherm maken voor mobile, voor desktop zou ik ze iets breder maken zodat de datapoint meer tussenruimte heeft en daardoor makkelijker is om te gebruiken. Misschien kan je ook kijken naar de tekst in de grafieken, maar aangezien het niet klaar is, moet je daar zelf nog naar kijken.
Bij de inlogpagina is het duidelijk wat je moet invullen.
Wat vind je duidelijk aan de inlogpagina?
Dat je een gebruikersnaam en password moet invullen, als je je gegevens niet weet kan je naar 'forget your password' ik ga ervan uit dat je het daar dan kan aanpassen. Als je op 'sign in' in druk, doet het wat je verwacht, dan log je in.
Daarna kom ik op de preface-page, ik zie allemaal cijfers dit komt waarschijnlijk omdat het niet af is. Ik ga nu op 'let's get started' drukken.
Wat denk je dat 'let's get started' doet?
Ik denk dat je meer data kan zien hierdoor. Nadat ik hier op drukte kwam ik inderdaad op een pagina waar meer data op zichtbaar moet zien, alleen is die niet af, dus nu is het nog niet helemaal zichtbaar. De grafieken zijn niet helemaal duidelijk.
Waarom zijn ze niet helemaal duidelijk?
Bij de grafieken kan ik niet precies zien wat het is.
Hoe zou jij ze duidelijker maken?
Door meer informatie erbij te zetten, een duidelijkere legenda te maken. Wat zijn die cijfers aan de zijkant en onderkant, dat weet ik niet. De kleuren zijn wel mooi.
Ik ben van plan om een header erbij te zetten is dat duidelijk genoeg of is een paragraaf ook nog nodig om het duidelijker te maken?
Nee een titel en een duidelijke legenda zou genoeg zijn waarschijnlijk.