<script setup lang="ts">
import {
Chart,
BarElement,
BarController,
LinearScale,
TimeSeriesScale,
Tooltip,
LineController,
LineElement,
PointElement,
} from "chart.js";
import "@/utils/DayjsAdapter";
import type { Element as ChartElement, Point, ChartItem } from "chart.js";
import { onMounted, ref, watch, computed } from "vue";
import type { WorkflowStatistic } from "@/client/workflow";
import dayjs from "dayjs";
const canvas = ref<ChartItem | undefined>(undefined);
let chart: Chart | undefined;
const props = defineProps<{
stats: WorkflowStatistic[];
}>();
const disableZoomReset = ref<boolean>(true);
// register all relevant elements to enable tree shaking
Chart.register(
BarElement,
BarController,
LinearScale,
Tooltip,
TimeSeriesScale,
LineController,
LineElement,
PointElement,
);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Tooltip.positioners.top = (elements: ChartElement[], eventPosition: Point) => {
return {
x: eventPosition.x,
y: 0,
};
};
function updateData(chart: Chart, newStats: WorkflowStatistic[]) {
// override old labels in the chart
chart.data.labels = newStats.map((stat) => stat.day);
// override old count per day in the chart
chart.data.datasets[0].data = newStats.map((stat) => stat.count);
// override old cumulative sum in the chart
chart.data.datasets[1].data = newStats.map(
(
(sum) => (value) =>
(sum += value.count)
)(0),
);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
chart.options.scales.x.time.unit =
newStats.length > 0
? xAxisLabelUnit(newStats[0].day, dayjs().toISOString())
: "week";
// render new chart
chart.update();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
chart.options.animation = true; // enable animations for zoom
}
function resetZoom() {
if (chart) {
chart.resetZoom();
}
}
function xAxisLabelUnit(max: number | string, min: number | string): string {
return dayjs(min).diff(dayjs(max), "week") < 12 ? "week" : "month";
}
// pad or trim stats to one year
const paddedStats = computed<WorkflowStatistic[]>(() => {
// select first day in statistics: last year, first day of statistics or last month
let statsIndex = 0;
let firstDay = dayjs().subtract(1, "month");
if (props.stats.length > 0) {
const firstStatDay = dayjs(props.stats[0].day);
if (firstStatDay.isSameOrBefore(firstDay, "day")) {
firstDay = firstStatDay;
}
const lastYear = dayjs().subtract(1, "year");
if (firstDay.isSameOrBefore(lastYear, "day")) {
firstDay = lastYear;
// Find index in stats list where the stat is from a day after the same day last year
statsIndex = props.stats.findIndex((stat) =>
lastYear.isSameOrBefore(dayjs(stat.day), "day"),
);
}
} else {
statsIndex = 1;
}
const timespan = dayjs().diff(firstDay, "day") + 1;
// Pad or trim workflow statistics
return Array.from({ length: timespan }, (e, i) => {
let count = 0;
const day = dayjs()
.subtract(timespan - i, "day")
.format("YYYY-MM-DD");
if (
statsIndex < props.stats.length &&
props.stats[statsIndex].day === day
) {
count = props.stats[statsIndex].count;
statsIndex++;
}
return {
day: day,
count: count,
};
});
});
watch(paddedStats, (newStats) => {
if (chart) {
updateData(chart, newStats);
}
});
onMounted(() => {
if (canvas.value) {
chart = new Chart(canvas.value, {
type: "bar",
data: {
labels: [], // Days as lables
datasets: [
{
// Workflow count per day
label: "Workflow Count",
data: [],
type: "bar",
yAxisID: "y1",
},
{
// Cumulative Workflow count over the year
label: "Cumulative Workflow Usage",
data: [],
type: "line",
yAxisID: "y2",
cubicInterpolationMode: "monotone",
tension: 0.4,
pointStyle: false,
},
],
},
options: {
animation: false, // disable animations
maintainAspectRatio: false, // fill all given space
responsive: true, // fill all given space
scales: {
// left scale for count per day
y1: {
position: "left",
grid: {
display: false, // disable grid
},
ticks: {
precision: 0, // round ticks to zero decimal places
},
// title options
title: {
color: "gray",
display: true,
text: "per Day",
},
},
y2: {
// right scale for cumulative count
position: "right",
grid: {
display: false, // disable grid
},
ticks: {
precision: 0, // round ticks to zero decimal places
},
// title options
title: {
color: "gray",
display: true,
text: "Cumulative",
},
},
x: {
// x scale as time-series
type: "timeseries",
time: {
// options for timescale
unit: "month", // display unit
parser: "YYYY-MM-DD", // format of the data to parse from
tooltipFormat: "MMM DD, YYYY", // format of date in tooltip
},
ticks: {
align: "start", // align ticks labels
},
grid: {
display: false, // disable grid
},
},
},
plugins: {
zoom: {
pan: {
enabled: true, // enable panning
modifierKey: "ctrl", // press ctrl key to enable panning
mode: "x", // pan only in x direction
},
zoom: {
drag: {
enabled: true, // enable zoom
},
mode: "x", // zoom only in x direction
onZoomComplete: (tempChart: { chart: Chart }) => {
// update x axis label scale depending on zoom level
if (tempChart.chart.options.scales?.x) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
tempChart.chart.options.scales.x.time.unit = xAxisLabelUnit(
tempChart.chart.scales.x.min,
tempChart.chart.scales.x.max,
);
tempChart.chart.update();
disableZoomReset.value = !tempChart.chart.isZoomedOrPanned();
}
},
},
limits: {
// limit for zooming in x direction
x: {
minRange: 2419200000, // minimum range one month in milliseconds 1000*60*60*24*7*4
min: "original", // min x value from original scale
max: "original", // max x value from original scale
},
y2: {
min: "original", // min y value from original scale
max: "original", // max y value from original scale
},
},
},
tooltip: {
enabled: true, // enable tooltips
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
position: "top", // position tooltip on top of canvas
mode: "index",
intersect: false,
backgroundColor: "rgba(108, 117, 125, 0.9)", // greyish background color
yAlign: "bottom", // Position of the tooltip caret in the Y direction
},
},
},
});
if (paddedStats.value.length > 0) {
updateData(chart, paddedStats.value);
}
}
});
</script>
<template>
<div class="w-100 row">
<h5 class="mx-auto w-fit">Workflow Usage Statistics</h5>
</div>
<div class="d-flex align-items-center mb-4">
<div
class="d-flex flex-column justify-content-evenly align-items-center me-2 pb-2"
style="height: 150px"
>
<div>
{{ dayjs(paddedStats[0].day).format("MMM YYYY") }} -
{{ dayjs().format("MMM YYYY") }}
</div>
<button
type="button"
class="btn btn-outline-secondary me-2"
@click="resetZoom"
:disabled="disableZoomReset"
>
Reset Zoom
</button>
</div>
<div style="max-height: 200px" class="flex-fill">
<canvas ref="canvas"></canvas>
</div>
</div>
</template>
<style scoped></style>