@n8n/frontend-module-insights 0.1.0

package/src/components/charts/InsightsChartFailed.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { useI18n } from '@n8n/i18n';
+import { smartDecimal } from '@n8n/utils/number/smart-decimal';
+import { useCssVar } from '@vueuse/core';
+import type { ChartData } from 'chart.js';
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+
+import type { ChartProps } from './insightChartProps';
+import { generateBarChartOptions } from '../../chartjs.utils';
+import { GRANULARITY_DATE_FORMAT_MASK } from '../../insights.constants';
+
+const props = defineProps<ChartProps>();
+
+const i18n = useI18n();
+
+const colorPrimary = useCssVar('--color--primary', document.body);
+const chartOptions = computed(() =>
+	generateBarChartOptions({
+		plugins: {
+			tooltip: {
+				callbacks: {
+					label: (context) => {
+						const label = context.dataset.label ?? '';
+						return `${label} ${smartDecimal(context.parsed.y)}`;
+					},
+				},
+			},
+		},
+	}),
+);
+
+const chartData = computed<ChartData<'bar'>>(() => {
+	const labels: string[] = [];
+	const data: number[] = [];
+
+	for (const entry of props.data) {
+		labels.push(GRANULARITY_DATE_FORMAT_MASK[props.granularity](entry.date));
+		data.push(entry.values.failed);
+	}
+
+	return {
+		labels,
+		datasets: [
+			{
+				label: i18n.baseText('insights.chart.failed'),
+				data,
+				backgroundColor: colorPrimary.value,
+			},
+		],
+	};
+});
+</script>
+
+<template>
+	<Bar data-test-id="insights-chart-failed" :data="chartData" :options="chartOptions" />
+</template>

package/src/components/charts/InsightsChartFailureRate.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useI18n } from '@n8n/i18n';
+import { smartDecimal } from '@n8n/utils/number/smart-decimal';
+import { useCssVar } from '@vueuse/core';
+import type { ChartData } from 'chart.js';
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+
+import type { ChartProps } from './insightChartProps';
+import { generateBarChartOptions } from '../../chartjs.utils';
+import { GRANULARITY_DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '../../insights.constants';
+import { transformInsightsFailureRate } from '../../insights.utils';
+
+const props = defineProps<ChartProps>();
+
+const i18n = useI18n();
+
+const colorPrimary = useCssVar('--color--primary', document.body);
+const chartOptions = computed(() =>
+	generateBarChartOptions({
+		plugins: {
+			tooltip: {
+				callbacks: {
+					label: (context) => {
+						const label = context.dataset.label ?? '';
+						return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type](context.parsed.y)}`;
+					},
+				},
+			},
+		},
+	}),
+);
+
+const chartData = computed<ChartData<'bar'>>(() => {
+	const labels: string[] = [];
+	const data: number[] = [];
+
+	for (const entry of props.data) {
+		labels.push(GRANULARITY_DATE_FORMAT_MASK[props.granularity](entry.date));
+		data.push(transformInsightsFailureRate(entry.values.failureRate));
+	}
+
+	return {
+		labels,
+		datasets: [
+			{
+				label: i18n.baseText('insights.banner.title.failureRate'),
+				data,
+				backgroundColor: colorPrimary.value,
+			},
+		],
+	};
+});
+</script>
+
+<template>
+	<Bar data-test-id="insights-chart-failure-rate" :data="chartData" :options="chartOptions" />
+</template>

package/src/components/charts/InsightsChartTimeSaved.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { useI18n } from '@n8n/i18n';
+import { type ChartData, Filler, type ScriptableContext } from 'chart.js';
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+
+import type { ChartProps } from './insightChartProps';
+import { generateLinearGradient, generateLineChartOptions } from '../../chartjs.utils';
+import { GRANULARITY_DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '../../insights.constants';
+import { transformInsightsTimeSaved } from '../../insights.utils';
+
+const props = defineProps<ChartProps>();
+const i18n = useI18n();
+
+const chartOptions = computed(() =>
+	generateLineChartOptions({
+		plugins: {
+			tooltip: {
+				callbacks: {
+					label: (context) => {
+						const label = context.dataset.label ?? '';
+						const value = Number(context.parsed.y);
+						return `${label} ${transformInsightsTimeSaved(value).toLocaleString('en-US')}${INSIGHTS_UNIT_MAPPING[props.type](value)}`;
+					},
+				},
+			},
+		},
+		scales: {
+			y: {
+				ticks: {
+					// eslint-disable-next-line id-denylist
+					callback(tickValue) {
+						return transformInsightsTimeSaved(Number(tickValue));
+					},
+				},
+			},
+		},
+	}),
+);
+
+const chartData = computed<ChartData<'line'>>(() => {
+	const labels: string[] = [];
+	const data: number[] = [];
+
+	for (const entry of props.data) {
+		labels.push(GRANULARITY_DATE_FORMAT_MASK[props.granularity](entry.date));
+		data.push(entry.values.timeSaved);
+	}
+
+	return {
+		labels,
+		datasets: [
+			{
+				label: i18n.baseText('insights.banner.title.timeSaved'),
+				data,
+				fill: 'origin',
+				cubicInterpolationMode: 'monotone' as const,
+				backgroundColor: (ctx: ScriptableContext<'line'>) =>
+					generateLinearGradient(ctx.chart.ctx, 292),
+				borderColor: 'rgba(255, 64, 39, 1)',
+			},
+		],
+	};
+});
+</script>
+
+<template>
+	<Line
+		data-test-id="insights-chart-time-saved"
+		:data="chartData"
+		:options="chartOptions"
+		:plugins="[Filler]"
+	/>
+</template>

package/src/components/charts/InsightsChartTotal.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { useI18n } from '@n8n/i18n';
+import { useCssVar } from '@vueuse/core';
+import type { ChartData } from 'chart.js';
+import { computed } from 'vue';
+import { Bar } from 'vue-chartjs';
+
+import type { ChartProps } from './insightChartProps';
+import { generateBarChartOptions } from '../../chartjs.utils';
+import { GRANULARITY_DATE_FORMAT_MASK } from '../../insights.constants';
+
+const props = defineProps<ChartProps>();
+
+const i18n = useI18n();
+
+const colorPrimary = useCssVar('--color--primary', document.body);
+const chartOptions = computed(() =>
+	generateBarChartOptions({
+		plugins: {
+			tooltip: {
+				itemSort: (a) => (a.dataset.label === i18n.baseText('insights.chart.succeeded') ? -1 : 1),
+			},
+		},
+	}),
+);
+
+const chartData = computed<ChartData<'bar'>>(() => {
+	const labels: string[] = [];
+	const succeededData: number[] = [];
+	const failedData: number[] = [];
+
+	for (const entry of props.data) {
+		labels.push(GRANULARITY_DATE_FORMAT_MASK[props.granularity](entry.date));
+		succeededData.push(entry.values.succeeded);
+		failedData.push(entry.values.failed);
+	}
+
+	return {
+		labels,
+		datasets: [
+			{
+				label: i18n.baseText('insights.chart.failed'),
+				data: failedData,
+				backgroundColor: colorPrimary.value,
+			},
+			{
+				label: i18n.baseText('insights.chart.succeeded'),
+				data: succeededData,
+				backgroundColor: '#3E999F',
+			},
+		],
+	};
+});
+</script>
+
+<template>
+	<Bar data-test-id="insights-chart-total" :data="chartData" :options="chartOptions" />
+</template>

package/src/components/charts/insightChartProps.ts

@@ -0,0 +1,9 @@
+import type { InsightsByTime, InsightsSummaryType, InsightsDateRange } from '@n8n/api-types';
+
+export type ChartProps = {
+	data: InsightsByTime[];
+	type: InsightsSummaryType;
+	granularity: InsightsDateRange['granularity'];
+	startDate: string;
+	endDate: string;
+};