@n8n/frontend-module-insights 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/LICENSE.md +88 -0
  2. package/README.md +64 -0
  3. package/biome.jsonc +4 -0
  4. package/eslint.config.mjs +33 -0
  5. package/package.json +72 -0
  6. package/src/__tests__/setup.ts +4 -0
  7. package/src/chartjs.utils.ts +208 -0
  8. package/src/components/InsightsDashboard.test.ts +891 -0
  9. package/src/components/InsightsDashboard.vue +426 -0
  10. package/src/components/InsightsDataRangePicker.vue +195 -0
  11. package/src/components/InsightsDateRangeAlert.test.ts +134 -0
  12. package/src/components/InsightsDateRangeAlert.vue +89 -0
  13. package/src/components/InsightsPaywall.vue +42 -0
  14. package/src/components/InsightsSummary.test.ts +206 -0
  15. package/src/components/InsightsSummary.vue +357 -0
  16. package/src/components/InsightsUpgradeModal.vue +74 -0
  17. package/src/components/__snapshots__/InsightsSummary.test.ts.snap +446 -0
  18. package/src/components/charts/InsightsChartAverageRuntime.vue +67 -0
  19. package/src/components/charts/InsightsChartFailed.vue +57 -0
  20. package/src/components/charts/InsightsChartFailureRate.vue +58 -0
  21. package/src/components/charts/InsightsChartTimeSaved.vue +74 -0
  22. package/src/components/charts/InsightsChartTotal.vue +58 -0
  23. package/src/components/charts/insightChartProps.ts +9 -0
  24. package/src/components/tables/InsightsTableWorkflows.test.ts +509 -0
  25. package/src/components/tables/InsightsTableWorkflows.vue +279 -0
  26. package/src/index.ts +4 -0
  27. package/src/insights.api.test.ts +435 -0
  28. package/src/insights.api.ts +71 -0
  29. package/src/insights.constants.ts +69 -0
  30. package/src/insights.module.test.ts +59 -0
  31. package/src/insights.module.ts +45 -0
  32. package/src/insights.store.test.ts +118 -0
  33. package/src/insights.store.ts +88 -0
  34. package/src/insights.types.ts +16 -0
  35. package/src/insights.utils.test.ts +339 -0
  36. package/src/insights.utils.ts +172 -0
  37. package/stylelint.config.mjs +9 -0
  38. package/vite.config.ts +29 -0
@@ -0,0 +1,446 @@
1
+ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
+
3
+ exports[`InsightsSummary > should render the summary correctly 1`] = `
4
+ "<div class="insightsWrapper">
5
+ <div class="insights">
6
+ <ul data-test-id="insights-summary-tabs"></ul>
7
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
8
+ </div>"
9
+ `;
10
+
11
+ exports[`InsightsSummary > should render the summary correctly 2`] = `
12
+ "<div class="insightsWrapper">
13
+ <div class="insights">
14
+ <ul data-test-id="insights-summary-tabs">
15
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
16
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
17
+ <!--v-if--></small></span></a></span>
18
+ <!--v-if-->
19
+ </li>
20
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
21
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
22
+ <!--v-if--></small></span></a></span>
23
+ <!--v-if-->
24
+ </li>
25
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
26
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
27
+ <!--v-if--></small></span></a></span>
28
+ <!--v-if-->
29
+ </li>
30
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
31
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
32
+ <!--v-if--></small></span></a></span>
33
+ <!--v-if-->
34
+ </li>
35
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
36
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
37
+ <!--v-if--></small></span></a></span>
38
+ <!--v-if-->
39
+ </li>
40
+ </ul>
41
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
42
+ </div>"
43
+ `;
44
+
45
+ exports[`InsightsSummary > should render the summary correctly 3`] = `
46
+ "<div class="insightsWrapper">
47
+ <div class="insights">
48
+ <ul data-test-id="insights-summary-tabs">
49
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
50
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
51
+ <!--v-if--></small></span></a></span>
52
+ <!--v-if-->
53
+ </li>
54
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
55
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
56
+ <!--v-if--></small></span></a></span>
57
+ <!--v-if-->
58
+ </li>
59
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
60
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
61
+ <!--v-if--></small></span></a></span>
62
+ <!--v-if-->
63
+ </li>
64
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
65
+ <!--v-if--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-stub icon="info" size="medium" spin="false" class="icon"></n8n-icon-stub></span>
66
+ <!--v-if--></small></span></a></span>
67
+ <!--v-if-->
68
+ </li>
69
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
70
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
71
+ <!--v-if--></small></span></a></span>
72
+ <!--v-if-->
73
+ </li>
74
+ </ul>
75
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
76
+ </div>"
77
+ `;
78
+
79
+ exports[`InsightsSummary > should render the summary correctly 4`] = `
80
+ "<div class="insightsWrapper">
81
+ <div class="insights">
82
+ <ul data-test-id="insights-summary-tabs">
83
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
84
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 2%</span>
85
+ <!--v-if--></small></span></a></span>
86
+ <!--v-if-->
87
+ </li>
88
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
89
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
90
+ <!--v-if--></small></span></a></span>
91
+ <!--v-if-->
92
+ </li>
93
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
94
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
95
+ <!--v-if--></small></span></a></span>
96
+ <!--v-if-->
97
+ </li>
98
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
99
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0h</span>
100
+ <!--v-if--></small></span></a></span>
101
+ <!--v-if-->
102
+ </li>
103
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
104
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-up" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
105
+ <!--v-if--></small></span></a></span>
106
+ <!--v-if-->
107
+ </li>
108
+ </ul>
109
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
110
+ </div>"
111
+ `;
112
+
113
+ exports[`InsightsSummary > should render the summary correctly 5`] = `
114
+ "<div class="insightsWrapper">
115
+ <div class="insights">
116
+ <ul data-test-id="insights-summary-tabs">
117
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
118
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><!--v-if--></span></a></span>
119
+ <!--v-if-->
120
+ </li>
121
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
122
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><!--v-if--></span></a></span>
123
+ <!--v-if-->
124
+ </li>
125
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
126
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><!--v-if--></span></a></span>
127
+ <!--v-if-->
128
+ </li>
129
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
130
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>55.56 <i>h</i></em><!--v-if--></span></a></span>
131
+ <!--v-if-->
132
+ </li>
133
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
134
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><!--v-if--></span></a></span>
135
+ <!--v-if-->
136
+ </li>
137
+ </ul>
138
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
139
+ </div>"
140
+ `;
141
+
142
+ exports[`InsightsSummary > should render the summary correctly 6`] = `
143
+ "<div class="insightsWrapper">
144
+ <div class="insights">
145
+ <ul data-test-id="insights-summary-tabs">
146
+ <li data-test-id="insights-summary-tab-total"><span class="" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
147
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>0 <i></i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0%</span>
148
+ <!--v-if--></small></span></a></span>
149
+ <!--v-if-->
150
+ </li>
151
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
152
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>0 <i></i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0%</span>
153
+ <!--v-if--></small></span></a></span>
154
+ <!--v-if-->
155
+ </li>
156
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
157
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>0 <i>%</i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0pp</span>
158
+ <!--v-if--></small></span></a></span>
159
+ <!--v-if-->
160
+ </li>
161
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
162
+ <!--v-if--></strong><small class="days">Last 7 days</small><span class="empty"><em>--</em><small><span class="" data-state="closed" data-grace-area-trigger=""><n8n-icon-stub icon="info" size="medium" spin="false" class="icon"></n8n-icon-stub></span>
163
+ <!--v-if--></small></span></a></span>
164
+ <!--v-if-->
165
+ </li>
166
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
167
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>0 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-right" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0s</span>
168
+ <!--v-if--></small></span></a></span>
169
+ <!--v-if-->
170
+ </li>
171
+ </ul>
172
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
173
+ </div>"
174
+ `;
175
+
176
+ exports[`InsightsSummary > with different date ranges > should render with 'custom range' 1`] = `
177
+ "<div class="insightsWrapper">
178
+ <div class="insights">
179
+ <ul data-test-id="insights-summary-tabs">
180
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
181
+ <!--v-if--></strong><small class="days">6 Sep - 13 Sep, 2025</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
182
+ <!--v-if--></small></span></a></span>
183
+ <!--v-if-->
184
+ </li>
185
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
186
+ <!--v-if--></strong><small class="days">6 Sep - 13 Sep, 2025</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
187
+ <!--v-if--></small></span></a></span>
188
+ <!--v-if-->
189
+ </li>
190
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
191
+ <!--v-if--></strong><small class="days">6 Sep - 13 Sep, 2025</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
192
+ <!--v-if--></small></span></a></span>
193
+ <!--v-if-->
194
+ </li>
195
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
196
+ <!--v-if--></strong><small class="days">6 Sep - 13 Sep, 2025</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
197
+ <!--v-if--></small></span></a></span>
198
+ <!--v-if-->
199
+ </li>
200
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
201
+ <!--v-if--></strong><small class="days">6 Sep - 13 Sep, 2025</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
202
+ <!--v-if--></small></span></a></span>
203
+ <!--v-if-->
204
+ </li>
205
+ </ul>
206
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
207
+ </div>"
208
+ `;
209
+
210
+ exports[`InsightsSummary > with different date ranges > should render with 'last 7 days (week preset)' 1`] = `
211
+ "<div class="insightsWrapper">
212
+ <div class="insights">
213
+ <ul data-test-id="insights-summary-tabs">
214
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
215
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
216
+ <!--v-if--></small></span></a></span>
217
+ <!--v-if-->
218
+ </li>
219
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
220
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
221
+ <!--v-if--></small></span></a></span>
222
+ <!--v-if-->
223
+ </li>
224
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
225
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
226
+ <!--v-if--></small></span></a></span>
227
+ <!--v-if-->
228
+ </li>
229
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
230
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
231
+ <!--v-if--></small></span></a></span>
232
+ <!--v-if-->
233
+ </li>
234
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
235
+ <!--v-if--></strong><small class="days">Last 7 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
236
+ <!--v-if--></small></span></a></span>
237
+ <!--v-if-->
238
+ </li>
239
+ </ul>
240
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
241
+ </div>"
242
+ `;
243
+
244
+ exports[`InsightsSummary > with different date ranges > should render with 'last 14 days (2weeks preset)' 1`] = `
245
+ "<div class="insightsWrapper">
246
+ <div class="insights">
247
+ <ul data-test-id="insights-summary-tabs">
248
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
249
+ <!--v-if--></strong><small class="days">Last 14 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
250
+ <!--v-if--></small></span></a></span>
251
+ <!--v-if-->
252
+ </li>
253
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
254
+ <!--v-if--></strong><small class="days">Last 14 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
255
+ <!--v-if--></small></span></a></span>
256
+ <!--v-if-->
257
+ </li>
258
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
259
+ <!--v-if--></strong><small class="days">Last 14 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
260
+ <!--v-if--></small></span></a></span>
261
+ <!--v-if-->
262
+ </li>
263
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
264
+ <!--v-if--></strong><small class="days">Last 14 days</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
265
+ <!--v-if--></small></span></a></span>
266
+ <!--v-if-->
267
+ </li>
268
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
269
+ <!--v-if--></strong><small class="days">Last 14 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
270
+ <!--v-if--></small></span></a></span>
271
+ <!--v-if-->
272
+ </li>
273
+ </ul>
274
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
275
+ </div>"
276
+ `;
277
+
278
+ exports[`InsightsSummary > with different date ranges > should render with 'last 24 hours (day preset)' 1`] = `
279
+ "<div class="insightsWrapper">
280
+ <div class="insights">
281
+ <ul data-test-id="insights-summary-tabs">
282
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
283
+ <!--v-if--></strong><small class="days">Last 24 hours</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
284
+ <!--v-if--></small></span></a></span>
285
+ <!--v-if-->
286
+ </li>
287
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
288
+ <!--v-if--></strong><small class="days">Last 24 hours</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
289
+ <!--v-if--></small></span></a></span>
290
+ <!--v-if-->
291
+ </li>
292
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
293
+ <!--v-if--></strong><small class="days">Last 24 hours</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
294
+ <!--v-if--></small></span></a></span>
295
+ <!--v-if-->
296
+ </li>
297
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
298
+ <!--v-if--></strong><small class="days">Last 24 hours</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
299
+ <!--v-if--></small></span></a></span>
300
+ <!--v-if-->
301
+ </li>
302
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
303
+ <!--v-if--></strong><small class="days">Last 24 hours</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
304
+ <!--v-if--></small></span></a></span>
305
+ <!--v-if-->
306
+ </li>
307
+ </ul>
308
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
309
+ </div>"
310
+ `;
311
+
312
+ exports[`InsightsSummary > with different date ranges > should render with 'last 30 days (month preset)' 1`] = `
313
+ "<div class="insightsWrapper">
314
+ <div class="insights">
315
+ <ul data-test-id="insights-summary-tabs">
316
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
317
+ <!--v-if--></strong><small class="days">Last 30 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
318
+ <!--v-if--></small></span></a></span>
319
+ <!--v-if-->
320
+ </li>
321
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
322
+ <!--v-if--></strong><small class="days">Last 30 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
323
+ <!--v-if--></small></span></a></span>
324
+ <!--v-if-->
325
+ </li>
326
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
327
+ <!--v-if--></strong><small class="days">Last 30 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
328
+ <!--v-if--></small></span></a></span>
329
+ <!--v-if-->
330
+ </li>
331
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
332
+ <!--v-if--></strong><small class="days">Last 30 days</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
333
+ <!--v-if--></small></span></a></span>
334
+ <!--v-if-->
335
+ </li>
336
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
337
+ <!--v-if--></strong><small class="days">Last 30 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
338
+ <!--v-if--></small></span></a></span>
339
+ <!--v-if-->
340
+ </li>
341
+ </ul>
342
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
343
+ </div>"
344
+ `;
345
+
346
+ exports[`InsightsSummary > with different date ranges > should render with 'last 90 days (quarter preset)' 1`] = `
347
+ "<div class="insightsWrapper">
348
+ <div class="insights">
349
+ <ul data-test-id="insights-summary-tabs">
350
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
351
+ <!--v-if--></strong><small class="days">Last 90 days</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
352
+ <!--v-if--></small></span></a></span>
353
+ <!--v-if-->
354
+ </li>
355
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
356
+ <!--v-if--></strong><small class="days">Last 90 days</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
357
+ <!--v-if--></small></span></a></span>
358
+ <!--v-if-->
359
+ </li>
360
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
361
+ <!--v-if--></strong><small class="days">Last 90 days</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
362
+ <!--v-if--></small></span></a></span>
363
+ <!--v-if-->
364
+ </li>
365
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
366
+ <!--v-if--></strong><small class="days">Last 90 days</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
367
+ <!--v-if--></small></span></a></span>
368
+ <!--v-if-->
369
+ </li>
370
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
371
+ <!--v-if--></strong><small class="days">Last 90 days</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
372
+ <!--v-if--></small></span></a></span>
373
+ <!--v-if-->
374
+ </li>
375
+ </ul>
376
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
377
+ </div>"
378
+ `;
379
+
380
+ exports[`InsightsSummary > with different date ranges > should render with 'last 180 days (6months preset)' 1`] = `
381
+ "<div class="insightsWrapper">
382
+ <div class="insights">
383
+ <ul data-test-id="insights-summary-tabs">
384
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
385
+ <!--v-if--></strong><small class="days">6 months</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
386
+ <!--v-if--></small></span></a></span>
387
+ <!--v-if-->
388
+ </li>
389
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
390
+ <!--v-if--></strong><small class="days">6 months</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
391
+ <!--v-if--></small></span></a></span>
392
+ <!--v-if-->
393
+ </li>
394
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
395
+ <!--v-if--></strong><small class="days">6 months</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
396
+ <!--v-if--></small></span></a></span>
397
+ <!--v-if-->
398
+ </li>
399
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
400
+ <!--v-if--></strong><small class="days">6 months</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
401
+ <!--v-if--></small></span></a></span>
402
+ <!--v-if-->
403
+ </li>
404
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
405
+ <!--v-if--></strong><small class="days">6 months</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
406
+ <!--v-if--></small></span></a></span>
407
+ <!--v-if-->
408
+ </li>
409
+ </ul>
410
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
411
+ </div>"
412
+ `;
413
+
414
+ exports[`InsightsSummary > with different date ranges > should render with 'last 365 days (year preset)' 1`] = `
415
+ "<div class="insightsWrapper">
416
+ <div class="insights">
417
+ <ul data-test-id="insights-summary-tabs">
418
+ <li data-test-id="insights-summary-tab-total"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Prod. executions</span>
419
+ <!--v-if--></strong><small class="days">One year</small><span><em>525 <i></i></em><small class="positive"><n8n-icon-stub icon="chevron-up" spin="false" class="icon positive"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 85%</span>
420
+ <!--v-if--></small></span></a></span>
421
+ <!--v-if-->
422
+ </li>
423
+ <li data-test-id="insights-summary-tab-failed"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failed prod. executions</span>
424
+ <!--v-if--></strong><small class="days">One year</small><span><em>14 <i></i></em><small class="negative"><n8n-icon-stub icon="chevron-up" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 3%</span>
425
+ <!--v-if--></small></span></a></span>
426
+ <!--v-if-->
427
+ </li>
428
+ <li data-test-id="insights-summary-tab-failureRate"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Failure rate</span>
429
+ <!--v-if--></strong><small class="days">One year</small><span><em>1.9 <i>%</i></em><small class="positive"><n8n-icon-stub icon="chevron-down" spin="false" class="icon positive"></n8n-icon-stub><span class="" data-state="closed" data-grace-area-trigger=""> 0.8pp</span>
430
+ <!--v-if--></small></span></a></span>
431
+ <!--v-if-->
432
+ </li>
433
+ <li data-test-id="insights-summary-tab-timeSaved"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="" data-state="closed" data-grace-area-trigger=""> Time saved</span>
434
+ <!--v-if--></strong><small class="days">One year</small><span><em>55.55 <i>h</i></em><small class="negative"><n8n-icon-stub icon="chevron-down" spin="false" class="icon negative"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 5.16h</span>
435
+ <!--v-if--></small></span></a></span>
436
+ <!--v-if-->
437
+ </li>
438
+ <li data-test-id="insights-summary-tab-averageRunTime"><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""><a to="[object Object]" exact-active-class="activeTab"><strong><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> Run time (avg.)</span>
439
+ <!--v-if--></strong><small class="days">One year</small><span><em>2.5 <i>s</i></em><small class="neutral"><n8n-icon-stub icon="chevron-down" spin="false" class="icon neutral"></n8n-icon-stub><span class="disabledTrigger" data-state="closed" data-grace-area-trigger=""> 0.5s</span>
440
+ <!--v-if--></small></span></a></span>
441
+ <!--v-if-->
442
+ </li>
443
+ </ul>
444
+ </div><!-- TODO: This should be removed after some time when the number issue is behind us -->
445
+ </div>"
446
+ `;
@@ -0,0 +1,67 @@
1
+ <script lang="ts" setup>
2
+ import { useI18n } from '@n8n/i18n';
3
+ import { smartDecimal } from '@n8n/utils/number/smart-decimal';
4
+ import { type ChartData, Filler, type ScriptableContext } from 'chart.js';
5
+ import { computed } from 'vue';
6
+ import { Line } from 'vue-chartjs';
7
+
8
+ import type { ChartProps } from './insightChartProps';
9
+ import { generateLinearGradient, generateLineChartOptions } from '../../chartjs.utils';
10
+ import { GRANULARITY_DATE_FORMAT_MASK, INSIGHTS_UNIT_MAPPING } from '../../insights.constants';
11
+ import { transformInsightsAverageRunTime } from '../../insights.utils';
12
+
13
+ const props = defineProps<ChartProps>();
14
+ const i18n = useI18n();
15
+
16
+ const chartOptions = computed(() =>
17
+ generateLineChartOptions({
18
+ plugins: {
19
+ tooltip: {
20
+ callbacks: {
21
+ label: (context) => {
22
+ const label = context.dataset.label ?? '';
23
+ return `${label} ${smartDecimal(context.parsed.y)}${INSIGHTS_UNIT_MAPPING[props.type](context.parsed.y)}`;
24
+ },
25
+ },
26
+ },
27
+ },
28
+ }),
29
+ );
30
+
31
+ const chartData = computed<ChartData<'line'>>(() => {
32
+ const labels: string[] = [];
33
+ const data: number[] = [];
34
+
35
+ for (const entry of props.data) {
36
+ labels.push(GRANULARITY_DATE_FORMAT_MASK[props.granularity](entry.date));
37
+
38
+ const value = transformInsightsAverageRunTime(entry.values.averageRunTime);
39
+
40
+ data.push(value);
41
+ }
42
+
43
+ return {
44
+ labels,
45
+ datasets: [
46
+ {
47
+ label: i18n.baseText('insights.banner.title.averageRunTime'),
48
+ data,
49
+ cubicInterpolationMode: 'monotone' as const,
50
+ fill: 'origin',
51
+ backgroundColor: (ctx: ScriptableContext<'line'>) =>
52
+ generateLinearGradient(ctx.chart.ctx, 292),
53
+ borderColor: 'rgba(255, 64, 39, 1)',
54
+ },
55
+ ],
56
+ };
57
+ });
58
+ </script>
59
+
60
+ <template>
61
+ <Line
62
+ data-test-id="insights-chart-average-runtime"
63
+ :data="chartData"
64
+ :options="chartOptions"
65
+ :plugins="[Filler]"
66
+ />
67
+ </template>