The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Oct 29, 2021
23 forks
38 stars
region = "us-east-1"
logGroupName = "apache/access"
field = "status"
interval = d3.utcMinute
// The current time, rounded to the nearest minute
stop = interval.floor(new Date)
// Uses the width of our TimeChart to give each interval 1 pixel
start = interval.offset(stop, -width)
AWS = import("https://cdn.skypack.dev/@aws-sdk/client-cloudwatch-logs@3.39.0")
cwl = {
try {
return new AWS.CloudWatchLogsClient({
region,
credentials: {
accessKeyId: Secret("AWS_ACCESS_KEY_ID"),
secretAccessKey: Secret("AWS_SECRET_ACCESS_KEY")
}
});
} catch (error) {
console.error(error);
return false;
}
}
query = {
try {
// Bin the query by the number of seconds in the interval
const binSeconds = d3.utcSecond.count(
new Date(),
interval.offset(new Date(), 1)
);
return cwl.send(
new AWS.StartQueryCommand({
queryString: `stats count(*) by ${field}, bin(${binSeconds}s)`,
startTime: +start / 1000,
endTime: +stop / 1000,
logGroupName
})
);
} catch {
return false;
}
}
results = {
let res = [];
yield res;
// Not authenticated; do nothing
if (!query || !query.queryId) return;
// Get the initial response, usually "Running"
let response = await cwl.send(
new AWS.GetQueryResultsCommand({
queryId: query.queryId
})
);
// Poll the query every second until complete
while (response.status !== "Complete") {
response = await Promises.tick(
1000,
cwl.send(
new AWS.GetQueryResultsCommand({
queryId: query.queryId
})
)
);
}
yield response.results;
}
data = {
if (!cwl) {
// Not authenticated; use demo data
return FileAttachment("demo-403.csv").csv({ typed: true });
}
return results.map((d) => {
return {
status: +d[0].value,
date: new Date(d[1].value),
value: +d[2].value
};
});
}
import {TimeChart, TimeAxis} from "@observablehq/timechart"
timeOptions = {
if (!cwl) {
// Not authenticated; use demo data
const interval = d3.utcMinute.every(15);
const stop = new Date("2021-04-20T12:45");
return {
interval,
start: interval.offset(stop, -width),
stop,
width
};
}
return {
interval,
start,
stop,
width
};
}
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.
