fix(editor): Insights design review 3 (no-changelog) (#14520)

packages/frontend/editor-ui/src/features/insights/chartjs.utils.ts

@@ -29,6 +29,7 @@ export const generateLineChartOptions = (
 		{
 			responsive: true,
 			maintainAspectRatio: false,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
@@ -115,6 +116,7 @@ export const generateBarChartOptions = (
 		{
 			responsive: true,
 			maintainAspectRatio: false,
+			animation: false,
 			plugins: {
 				legend: {
 					display: true,
@@ -126,6 +128,7 @@ export const generateBarChartOptions = (
 						boxHeight: 8,
 						borderRadius: 2,
 						useBorderRadius: true,
+						color: colorTextLight.value,
 					},
 				},
 				tooltip: {

packages/frontend/editor-ui/src/features/insights/components/InsightsDashboard.vue

@@ -91,6 +91,7 @@ watch(
 
 <template>
 	<div :class="$style.insightsView">
+		<div :class="$style.insightsContainer">
 			<N8nHeading bold tag="h2" size="xlarge">
 				{{ i18n.baseText('insights.dashboard.title') }}
 			</N8nHeading>
@@ -123,24 +124,31 @@ watch(
 				<InsightsPaywall v-else data-test-id="insights-dashboard-unlicensed" />
 			</div>
 		</div>
+	</div>
 </template>
 
 <style lang="scss" module>
 .insightsView {
-	padding: var(--spacing-l) var(--spacing-2xl);
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	gap: 30px;
 	overflow: auto;
+}
+
+.insightsContainer {
+	width: 100%;
 	max-width: var(--content-container-width);
+	padding: var(--spacing-l) var(--spacing-2xl);
+	margin: 0 auto;
 }
 
 .insightsBanner {
 	padding-bottom: 0;
 
 	ul {
-		border-radius: 0;
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
 	}
 }
 

packages/frontend/editor-ui/src/features/insights/components/InsightsSummary.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 import { VIEWS } from '@/constants';
 import {
 	INSIGHT_IMPACT_TYPES,
@@ -10,7 +11,6 @@ import type { InsightsSummary } from '@n8n/api-types';
 import { smartDecimal } from '@n8n/utils/number/smartDecimal';
 import { computed, ref, useCssModule } from 'vue';
 import { useRoute } from 'vue-router';
-import { useTelemetry } from '@/composables/useTelemetry';
 
 const props = defineProps<{
 	summary: InsightsSummaryDisplay;
@@ -62,8 +62,9 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 
 <template>
 	<div :class="$style.insights">
+		<ul data-test-id="insights-summary-tabs">
 			<N8nLoading v-if="loading" :class="$style.loading" :cols="5" />
-		<ul v-else data-test-id="insights-summary-tabs">
+			<template v-else>
 				<li
 					v-for="{ id, value, deviation, deviationUnit, unit, to } in summaryWithRouteLocations"
 					:key="id"
@@ -105,7 +106,9 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 							<small v-if="deviation !== null" :class="getImpactStyle(id, deviation)">
 								<N8nIcon
 									:class="[$style.icon, getImpactStyle(id, deviation)]"
-								:icon="deviation === 0 ? 'caret-right' : deviation > 0 ? 'caret-up' : 'caret-down'"
+									:icon="
+										deviation === 0 ? 'caret-right' : deviation > 0 ? 'caret-up' : 'caret-down'
+									"
 								/>
 								<N8nTooltip placement="bottom" :disabled="id !== 'failureRate'">
 									<template #content>
@@ -117,6 +120,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 						</span>
 					</router-link>
 				</li>
+			</template>
 		</ul>
 	</div>
 </template>
@@ -222,7 +226,6 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 				gap: var(--spacing-5xs);
 
 				i {
-					color: var(--color-text-light);
 					font-size: 22px;
 					font-style: normal;
 				}
@@ -268,13 +271,13 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
 
 .loading {
 	display: flex;
-	min-height: 91px;
 	align-self: stretch;
 	align-items: stretch;
 
 	> div {
 		margin: 0;
 		height: auto;
+		border-radius: inherit;
 	}
 }
 </style>

packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
+import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
+import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
+import { smartDecimal } from '@n8n/utils/number/smartDecimal';
+import { useCssVar } from '@vueuse/core';
+import type { ChartData } from 'chart.js';
+import dateformat from 'dateformat';
 import { computed } from 'vue';
 import { Bar } from 'vue-chartjs';
-import type { ChartData } from 'chart.js';
-import { useCssVar } from '@vueuse/core';
-import dateformat from 'dateformat';
-import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
-import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
-import { useI18n } from '@/composables/useI18n';
-import { smartDecimal } from '@n8n/utils/number/smartDecimal';
-import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
 
 const props = defineProps<{
 	data: InsightsByTime[];
@@ -46,7 +46,7 @@ const chartData = computed<ChartData<'bar'>>(() => {
 		labels,
 		datasets: [
 			{
-				label: i18n.baseText('insights.banner.title.failed'),
+				label: i18n.baseText('insights.chart.failed'),
 				data,
 				backgroundColor: colorPrimary.value,
 			},

packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
+import { useI18n } from '@/composables/useI18n';
+import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
+import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
+import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
+import { useCssVar } from '@vueuse/core';
+import type { ChartData } from 'chart.js';
+import dateformat from 'dateformat';
 import { computed } from 'vue';
 import { Bar } from 'vue-chartjs';
-import type { ChartData } from 'chart.js';
-import { useCssVar } from '@vueuse/core';
-import dateformat from 'dateformat';
-import type { InsightsByTime, InsightsSummaryType } from '@n8n/api-types';
-import { generateBarChartOptions } from '@/features/insights/chartjs.utils';
-import { useI18n } from '@/composables/useI18n';
-import { DATE_FORMAT_MASK } from '@/features/insights/insights.constants';
 
 const props = defineProps<{
 	data: InsightsByTime[];
@@ -21,8 +21,7 @@ const chartOptions = computed(() =>
 	generateBarChartOptions({
 		plugins: {
 			tooltip: {
-				itemSort: (a) =>
+				itemSort: (a) => (a.dataset.label === i18n.baseText('insights.chart.succeeded') ? -1 : 1),
-					a.dataset.label === i18n.baseText('insights.banner.title.succeeded') ? -1 : 1,
 			},
 		},
 	}),
@@ -43,12 +42,12 @@ const chartData = computed<ChartData<'bar'>>(() => {
 		labels,
 		datasets: [
 			{
-				label: i18n.baseText('insights.banner.title.failed'),
+				label: i18n.baseText('insights.chart.failed'),
 				data: failedData,
 				backgroundColor: colorPrimary.value,
 			},
 			{
-				label: i18n.baseText('insights.banner.title.succeeded'),
+				label: i18n.baseText('insights.chart.succeeded'),
 				data: succeededData,
 				backgroundColor: '#3E999F',
 			},

packages/frontend/editor-ui/src/plugins/i18n/locales/en.json

@@ -3083,12 +3083,13 @@
 	"insights.banner.timeSaved.tooltip.link.text": "add time estimates",
 	"insights.banner.title.total": "Prod. executions",
 	"insights.banner.title.failed": "Failed prod. executions",
-	"insights.banner.title.succeeded": "Successful prod. executions",
 	"insights.banner.title.failureRate": "Failure rate",
 	"insights.banner.title.timeSaved": "Time saved",
 	"insights.banner.title.timeSavedDailyAverage": "Time saved daily avg.",
 	"insights.banner.title.averageRunTime": "Run time (avg.)",
 	"insights.dashboard.title": "Insights",
 	"insights.banner.title.timeSaved.tooltip": "Total time saved calculated from your estimated time savings per execution across all workflows",
-	"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period"
+	"insights.banner.failureRate.deviation.tooltip": "Percentage point change from previous period",
+	"insights.chart.failed": "Failed",
+	"insights.chart.succeeded": "Successful"
 }