@n8n/frontend-module-insights 0.1.0

package/LICENSE.md

@@ -0,0 +1,88 @@
+# License
+
+Portions of this software are licensed as follows:
+
+- Content of branches other than the main branch (i.e. "master") are not licensed.
+- Source code files that contain ".ee." in their filename or ".ee" in their dirname are NOT licensed under
+  the Sustainable Use License.
+  To use source code files that contain ".ee." in their filename or ".ee" in their dirname you must hold a
+	valid n8n Enterprise License specifically allowing you access to such source code files and as defined
+	in "LICENSE_EE.md".
+- All third party components incorporated into the n8n Software are licensed under the original license
+  provided by the owner of the applicable component.
+- Content outside of the above mentioned files or restrictions is available under the "Sustainable Use
+  License" as defined below.
+
+## Sustainable Use License
+
+Version 1.0
+
+### Acceptance
+
+By using the software, you agree to all of the terms and conditions below.
+
+### Copyright License
+
+The licensor grants you a non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable license
+to use, copy, distribute, make available, and prepare derivative works of the software, in each case subject
+to the limitations below.
+
+### Limitations
+
+You may use or modify the software only for your own internal business purposes or for non-commercial or
+personal use. You may distribute the software or provide it to others only if you do so free of charge for
+non-commercial purposes. You may not alter, remove, or obscure any licensing, copyright, or other notices of
+the licensor in the software. Any use of the licensor’s trademarks is subject to applicable law.
+
+### Patents
+
+The licensor grants you a license, under any patent claims the licensor can license, or becomes able to
+license, to make, have made, use, sell, offer for sale, import and have imported the software, in each case
+subject to the limitations and conditions in this license. This license does not cover any patent claims that
+you cause to be infringed by modifications or additions to the software. If you or your company make any
+written claim that the software infringes or contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If your company makes such a claim, your patent
+license ends immediately for work on behalf of your company.
+
+### Notices
+
+You must ensure that anyone who gets a copy of any part of the software from you also gets a copy of these
+terms. If you modify the software, you must include in any modified copies of the software a prominent notice
+stating that you have modified the software.
+
+### No Other Rights
+
+These terms do not imply any licenses other than those expressly granted in these terms.
+
+### Termination
+
+If you use the software in violation of these terms, such use is not licensed, and your license will
+automatically terminate. If the licensor provides you with a notice of your violation, and you cease all
+violation of this license no later than 30 days after you receive that notice, your license will be reinstated
+retroactively. However, if you violate these terms after such reinstatement, any additional violation of these
+terms will cause your license to terminate automatically and permanently.
+
+### No Liability
+
+As far as the law allows, the software comes as is, without any warranty or condition, and the licensor will
+not be liable to you for any damages arising out of these terms or the use or nature of the software, under
+any kind of legal claim.
+
+### Definitions
+
+The “licensor” is the entity offering these terms.
+
+The “software” is the software the licensor makes available under these terms, including any portion of it.
+
+“You” refers to the individual or entity agreeing to these terms.
+
+“Your company” is any legal entity, sole proprietorship, or other kind of organization that you work for, plus
+all organizations that have control over, are under the control of, or are under common control with that
+organization. Control means ownership of substantially all the assets of an entity, or the power to direct its
+management and policies by vote, contract, or otherwise. Control can be direct or indirect.
+
+“Your license” is the license granted to you for the software under these terms.
+
+“Use” means anything you do with the software requiring your license.
+
+“Trademark” means trademarks, service marks, and similar rights.

package/README.md

@@ -0,0 +1,64 @@
+# @n8n/frontend-module-insights
+
+Frontend feature module. Consumed from source by the editor-ui shell; there is no
+build step and no `dist`.
+
+## Two entry points, on purpose
+
+- `@n8n/frontend-module-insights` — `useInsightsStore` and `InsightsSummary`, for
+  the shell views that show the summary widget. Every one of them reaches it
+  through a lazy `import()`.
+- `@n8n/frontend-module-insights/insights.module` — the descriptor, for
+  `src/app/modules.manifest.ts`.
+
+The split is measured, not stylistic. The manifest is imported eagerly at boot,
+and `InsightsSummary` is an SFC. With both behind one entry, the SFC becomes
+statically reachable from the boot chunk: `pnpm build` put `InsightsSummary`'s JS
+**and a render-blocking stylesheet** into `dist/index.html` (353 `modulepreload`
+entries against 346, and 99 stylesheet links against 98). Keep component code out
+of the descriptor's entry.
+
+```bash
+pnpm turbo typecheck --filter=@n8n/frontend-module-insights
+pnpm turbo lint --filter=@n8n/frontend-module-insights
+pnpm turbo test --filter=@n8n/frontend-module-insights
+```
+
+Go through turbo, not `pnpm --filter <pkg> typecheck`: this package is consumed
+from source, and on a cold tree its platform dependencies have not been built
+yet. Turbo builds them first; the bare pnpm form does not.
+
+## Import rules
+
+- Depend on foundation and platform packages only (`@n8n/design-system`,
+  `@n8n/stores`, `@n8n/composables`, `@n8n/i18n`, `@n8n/rest-api-client`,
+  `@n8n/api-types`, `@n8n/permissions`, `@n8n/frontend-constants`,
+  `@n8n/utils`, `@n8n/frontend-module-sdk`). Never import another
+  `@n8n/frontend-module-*`, and never import `@/…` from the shell.
+- `@n8n/stores` and `@n8n/composables` are **subpath-only** — import
+  `@n8n/stores/settings.store`, not `@n8n/stores`.
+- The no-cross-module rule is currently a convention: the shared tsconfig base
+  omits sibling modules from `paths`, which blocks an accidental import but not
+  a deliberate one (declaring the dependency makes it typecheck clean). The
+  ESLint rule that actually enforces it is CAT-3692.
+
+## Adding UI
+
+`@vitejs/plugin-vue`, `unplugin-icons` and `vite-svg-loader` are wired into
+`vite.config.ts`, so a `.vue` file that renders a design-system component
+compiles in tests without further setup. All three are needed: the design-system
+icon set imports `~icons/lucide/*` and `./custom/*.svg`, and without the icon
+plugins an icon resolves to a URL string and rendering throws. Route components
+must load lazily — see the note in `src/insights.module.ts`.
+
+## Test harness
+
+`src/__tests__/render.ts` is this package's own renderer (i18n, pinia,
+design-system, a telemetry stub). It is deliberately not the shell's
+`@/__tests__/render`, which also provides the workflow document store and the
+touch-events directive — editor-core concerns no insights component reads. The
+shared harness (`@n8n/vitest-config/setup/frontend`) cannot host a Vue renderer:
+it must not import vue, pinia or i18n, or the turbo graph gains a cycle.
+
+Store-level fixtures that several packages need live next to the store instead:
+`@n8n/stores/__tests__/defaultSettings` and `@n8n/stores/__tests__/mockedStore`.

package/biome.jsonc

@@ -0,0 +1,4 @@
+{
+	"$schema": "../../../../node_modules/@biomejs/biome/configuration_schema.json",
+	"extends": ["../../../../biome.jsonc"]
+}

package/eslint.config.mjs

@@ -0,0 +1,33 @@
+import { frontendConfig } from '@n8n/eslint-config/frontend';
+import { defineConfig } from 'eslint/config';
+
+export default defineConfig(frontendConfig, {
+	/**
+	 * Suppressions inherited with the code, not granted to it.
+	 *
+	 * These files came from `editor-ui/src/features/execution/insights`, where
+	 * `eslint.config.mjs` turns each of these rules off or down to `warn` for the
+	 * whole shell. The move is content-pristine on purpose — blame and `--follow`
+	 * survive — so the debt travels with it instead of being rewritten in the same
+	 * PR. `warn` here, never `off`: the count is visible and can only go down.
+	 *
+	 * Most of it is one root cause: `chart.js` / `vue-chartjs` option and dataset
+	 * types degrade to `any`, which propagates through the chart components. The
+	 * `naming-convention` hits are data keys (`2weeks`, `6months`, `update:options`)
+	 * that cannot be camelCase — those need a narrow inline disable, not a fix.
+	 *
+	 * Boundary rules are untouched and stay at error: nothing here relaxes what
+	 * this module may import.
+	 */
+	files: ['src/**/*.ts', 'src/**/*.vue'],
+	rules: {
+		'@typescript-eslint/naming-convention': 'warn',
+		'@typescript-eslint/no-unsafe-argument': 'warn',
+		'@typescript-eslint/no-unsafe-assignment': 'warn',
+		'@typescript-eslint/no-unsafe-call': 'warn',
+		'@typescript-eslint/no-unsafe-member-access': 'warn',
+		'@typescript-eslint/no-unsafe-return': 'warn',
+		'@typescript-eslint/await-thenable': 'warn',
+		'@typescript-eslint/require-await': 'warn',
+	},
+});

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@n8n/frontend-module-insights",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./insights.module": "./src/insights.module.ts"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.9.0",
+    "@n8n/api-types": "1.39.0",
+    "@n8n/composables": "1.29.0",
+    "@n8n/design-system": "2.38.0",
+    "@n8n/frontend-constants": "0.6.0",
+    "@n8n/frontend-module-sdk": "0.9.0",
+    "@n8n/i18n": "2.39.0",
+    "@n8n/permissions": "0.76.0",
+    "@n8n/rest-api-client": "2.39.0",
+    "@n8n/stores": "2.39.0",
+    "@n8n/utils": "1.47.0",
+    "@vueuse/core": "^14.3.0",
+    "chart.js": "^4.4.0",
+    "dateformat": "^3.0.3",
+    "element-plus": "2.4.3",
+    "lodash": "4.18.1",
+    "pinia": "^2.2.4",
+    "vue": "^3.5.13",
+    "vue-chartjs": "^5.2.0",
+    "vue-i18n": "^11.4.4",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.488",
+    "@n8n/eslint-config": "0.0.1",
+    "@n8n/frontend-test-utils": "0.1.0",
+    "@n8n/frontend-vite-config": "0.1.0",
+    "@n8n/playwright-janitor": "0.1.0",
+    "@n8n/stylelint-config": "0.0.1",
+    "@n8n/typescript-config": "1.11.0",
+    "@n8n/vitest-config": "1.21.0",
+    "@pinia/testing": "^0.1.6",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/vue": "^8.1.0",
+    "@types/dateformat": "^3.0.0",
+    "@types/lodash": "4.17.17",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "eslint": "9.29.0",
+    "stylelint": "^16.23.0",
+    "typescript": "6.0.2",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.0.2",
+    "vite-svg-loader": "5.1.0",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^2.2.8"
+  },
+  "license": "LicenseRef-n8n-sustainable-use",
+  "scripts": {
+    "clean": "rimraf .turbo",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:changed": "janitor test-scoped",
+    "test:dev": "vitest",
+    "lint": "eslint src --quiet",
+    "lint:fix": "eslint src --fix",
+    "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
+    "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
+    "format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore",
+    "format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore"
+  }
+}

package/src/__tests__/setup.ts

@@ -0,0 +1,4 @@
+// The shared frontend test harness: the jsdom environment, english messages, and a fresh pinia
+// per test. It lives in `@n8n/frontend-test-utils` rather than in `@n8n/vitest-config`, because
+// `@n8n/i18n` devDepends on the latter and importing i18n there closes a cycle in the turbo graph.
+import '@n8n/frontend-test-utils/setup';

package/src/chartjs.utils.ts

@@ -0,0 +1,208 @@
+import { smartDecimal } from '@n8n/utils/number/smart-decimal';
+import { useCssVar } from '@vueuse/core';
+import { type ChartOptions, type ScriptableContext } from 'chart.js';
+import merge from 'lodash/merge';
+
+/**
+ *
+ * Chart js configuration
+ */
+
+export const generateLinearGradient = (ctx: CanvasRenderingContext2D, height: number) => {
+	const gradient = ctx.createLinearGradient(0, 0, 0, height);
+	gradient.addColorStop(0, 'rgba(255, 111,92, 1)');
+	gradient.addColorStop(0.8, 'rgba(255, 111, 92, 0.25)');
+	gradient.addColorStop(1, 'rgba(255, 111, 92, 0)');
+	return gradient;
+};
+
+export const generateLineChartOptions = (
+	overrides: ChartOptions<'line'> = {},
+): ChartOptions<'line'> => {
+	const colorTextDark = useCssVar('--color--text--shade-1', document.body);
+	const colorBackgroundLight = useCssVar('--color--background--light-3', document.body);
+	const colorForeGroundBase = useCssVar('--color--foreground', document.body);
+
+	const colorTextLight = useCssVar('--color--text--tint-1', document.body);
+
+	return merge(
+		{
+			responsive: true,
+			maintainAspectRatio: false,
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					caretSize: 0,
+					xAlign: 'center',
+					yAlign: 'bottom',
+					padding: 16,
+					titleFont: {
+						size: 14,
+					},
+					bodyFont: {
+						size: 14,
+					},
+					backgroundColor: colorBackgroundLight.value,
+					titleColor: colorTextDark.value,
+					bodyColor: colorTextDark.value,
+					borderWidth: 1,
+					borderColor: colorForeGroundBase.value,
+					callbacks: {
+						label(context: ScriptableContext<'line'>) {
+							const label = context.dataset.label ?? '';
+							return `${label} ${smartDecimal(context.parsed.y).toLocaleString('en-US')}`;
+						},
+						labelColor(context: ScriptableContext<'line'>) {
+							return {
+								borderColor: 'rgba(0, 0, 0, 0)',
+								backgroundColor: context.dataset.backgroundColor as string,
+								borderWidth: 0,
+								borderRadius: 2,
+							};
+						},
+					},
+				},
+			},
+			interaction: {
+				mode: 'nearest',
+				axis: 'x',
+				intersect: false,
+			},
+			scales: {
+				x: {
+					grid: {
+						display: false,
+					},
+					stacked: true,
+					beginAtZero: true,
+					border: {
+						display: false,
+					},
+					ticks: {
+						color: colorTextLight.value,
+					},
+				},
+				y: {
+					grid: {
+						color: colorForeGroundBase.value,
+					},
+					stacked: true,
+					border: {
+						display: false,
+					},
+					ticks: {
+						maxTicksLimit: 3,
+						color: colorTextLight.value,
+					},
+				},
+			},
+		},
+		overrides,
+	);
+};
+
+export const generateBarChartOptions = (
+	overrides: ChartOptions<'bar'> = {},
+): ChartOptions<'bar'> => {
+	const colorTextLight = useCssVar('--color--text--tint-1', document.body);
+	const colorTextDark = useCssVar('--color--text--shade-1', document.body);
+	const colorBackgroundLight = useCssVar('--color--background--light-3', document.body);
+	const colorForeGroundBase = useCssVar('--color--foreground', document.body);
+
+	return merge(
+		{
+			responsive: true,
+			maintainAspectRatio: false,
+			animation: false,
+			plugins: {
+				legend: {
+					display: true,
+					align: 'end',
+					reverse: true,
+					position: 'top',
+					labels: {
+						boxWidth: 8,
+						boxHeight: 8,
+						borderRadius: 2,
+						useBorderRadius: true,
+						color: colorTextLight.value,
+					},
+				},
+				tooltip: {
+					caretSize: 0,
+					xAlign: 'center',
+					yAlign: 'bottom',
+					padding: 16,
+					titleFont: {
+						size: 14,
+					},
+					bodyFont: {
+						size: 14,
+					},
+					backgroundColor: colorBackgroundLight.value,
+					titleColor: colorTextDark.value,
+					bodyColor: colorTextDark.value,
+					borderWidth: 1,
+					borderColor: colorForeGroundBase.value,
+					callbacks: {
+						label(context: ScriptableContext<'bar'>) {
+							const label = context.dataset.label ?? '';
+							return `${label} ${context.parsed.y}`;
+						},
+						labelColor(context: ScriptableContext<'bar'>) {
+							return {
+								borderColor: 'rgba(0, 0, 0, 0)',
+								backgroundColor: context.dataset.backgroundColor as string,
+								borderWidth: 0,
+								borderRadius: 2,
+							};
+						},
+					},
+				},
+			},
+			interaction: {
+				mode: 'nearest',
+				axis: 'x',
+				intersect: false,
+			},
+			datasets: {
+				bar: {
+					maxBarThickness: 32,
+					borderRadius: 4,
+				},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: false,
+					},
+					stacked: true,
+					beginAtZero: true,
+					border: {
+						display: false,
+					},
+					ticks: {
+						color: colorTextLight.value,
+					},
+				},
+				y: {
+					grid: {
+						color: colorForeGroundBase.value,
+					},
+					stacked: true,
+					border: {
+						display: false,
+					},
+					ticks: {
+						maxTicksLimit: 3,
+						color: colorTextLight.value,
+					},
+				},
+			},
+		},
+		overrides,
+	);
+};