Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | import { ActiveDevicesGraph } from "./graphs/activeDevicesGraph/";
import territoriesMetrics from "./graphs/territories";
import type { TerritoriesMetricsData } from "../../../types/shared";
type Series = {
name: string;
values: Array<number>;
};
type ActiveDeviceMetric = {
metrics: {
buckets: Array<string>;
series: Array<Series>;
};
selector: string;
type: string;
};
function renderActiveDevicesMetrics(metrics: ActiveDeviceMetric) {
const activeDevices: {
series: Array<Series>;
buckets: Array<string>;
} = {
series: [],
buckets: metrics.metrics.buckets,
};
metrics.metrics.series.forEach((series) => {
const fullSeries = series.values.map((value) => {
return value === null ? 0 : value;
});
activeDevices.series.push({
name: series.name,
values: fullSeries,
});
});
const graph = new ActiveDevicesGraph(metrics.selector, activeDevices, {
stacked: true,
area: true,
graphType: metrics.type,
})
.render()
// @ts-ignore
.enableTooltip()
.show();
// Add hovers for category annotations
const categories = document.querySelector(`[data-js="annotations-hover"]`);
if (categories) {
categories.addEventListener("mouseover", (e) => {
const target = e.target as HTMLElement;
const annotationHover = target.closest(
`[data-js="annotation-hover"]`,
) as HTMLElement;
if (annotationHover) {
const category = annotationHover.dataset.id;
graph.g.selectAll(`#${category}`).style("visibility", "visible");
}
});
categories.addEventListener("mouseout", (e) => {
const target = e.target as HTMLElement;
const annotationHover = target.closest(
`[data-js="annotation-hover"]`,
) as HTMLElement;
if (annotationHover) {
const category = annotationHover.dataset.id;
graph.g.selectAll(`#${category}`).style("visibility", "hidden");
}
});
}
}
function renderTerritoriesMetrics(metrics: {
metrics: TerritoriesMetricsData;
selector: string;
}) {
territoriesMetrics(metrics.selector, metrics.metrics);
}
/**
* Render publisher page metrics
* @param {Object} options An object with rendering options.
*/
function renderPublisherMetrics(options: {
snaps: {
series: Array<Series>;
buckets: Array<string>;
};
}) {
const _graph = new ActiveDevicesGraph(
".snap-installs-container",
{},
{
stacked: false,
area: false,
},
);
_graph.updateData(options.snaps).render().show();
_graph.enableTooltip();
}
export {
renderActiveDevicesMetrics,
renderPublisherMetrics,
renderTerritoriesMetrics,
};
|