admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Raúl Gómez Morales
2025-04-11 09:40:38 +02:00
committed by GitHub
parent 5826ff2cec
commit e54f450a9d
6 changed files with 121 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: {

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

@@ -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;
}
}

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

@@ -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>

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

@@ -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,
},

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

@@ -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) =>
a.dataset.label === i18n.baseText('insights.banner.title.succeeded') ? -1 : 1,
itemSort: (a) => (a.dataset.label === i18n.baseText('insights.chart.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',
},

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

@@ -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"
}