Published
Edited
Dec 27, 2020
authData = login({ email, password })
loadEvents = graph(`query ProjectEventsQuery($projectId: ID!, $skip: Int!) {
project(id: $projectId) {
id
name
events(skip: $skip) {
id
payload {
type
timestamp
user {
id
}
title
context
addons
}
repetitions {
id
payload {
context
addons
}
}
}
}
}`)
events = {
const events = [];
let skip = 0;
while (skip <= 100) {
const newEventsData = await loadEvents({
projectId: selectedProjectId,
skip
});
console.log(newEventsData);
const newEvents = newEventsData.project.events;
newEvents.forEach(val => {
const { repetitions, ...event } = val;
skip += 1;
events.push(event);
const mergedRepetitions = repetitions.map(rep => ({
...rep,
payload: deepMerge(event.payload, deepMerge.payload)
}));
events.push(...mergedRepetitions);
});
if (!newEvents || !newEvents.length) {
break;
}
}
return events;
}
parsedUserAgents = userAgents.map(agent => uaParser(agent))
osDistribution = Array.from(
d3.group(parsedUserAgents, agent => agent.os.name),
([name, value]) => ({ name, value: value.length })
)
osPieChart
browsersPieChart
browsersDistribution = Array.from(
d3.group(parsedUserAgents, agent => agent.browser.name),
([name, value]) => ({ name, value: value.length })
)
windowSizes = events.map(event => event.payload.addons?.window || 'undefined')
groupedWindowSizes = d3.group(
windowSizes,
d => `${d.innerWidth}×${d.innerHeight}`
)
agentsTreeChart
md`## Analize error types`
errorTypesDistibution = Array.from(
d3.group(events.map(event => event.payload.type), d => d),
([name, value]) => ({ name: String(name), value: value.length })
)
chart
import { chart as browsersPieChart } with {
browsersDistribution as data
} from '@d3/pie-chart'
import { chart as agentsTreeChart } with {
treeMapData as data
} from '@d3/treemap'
import { chart } with { errorTypesDistibution as data } from '@d3/bar-chart'
_ = require('lodash')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
