feat(QuickChart Node): Add QuickChart node (#3572)

* ✨ Add basic QuickChart node * 🏷️ Fix up types * ❇️ Add Boxplot and Violin * ❇️ Add point styles * ❇️ Add horizontal charts * ⚡ Make possible to provide array of labels via expressions * ⚡ Improvements * ⚡ Improvements * 🎨 fix lint errors * ⚡️disable chart types we don't want to support in P0 * ⚡️support setting labels manually or using an array * ⚡️move Horizontal parameter into options * ⚡️ update "Put Output In Field" param description and hint * ⚡️ removed font color * ⚡️fix Device Pixel Ratio * ⚡️fix Polar Chart not working * ⚡️Show Fill param only for charts supporting it * ⚡️Show pointStyle param only for charts supporting it * ⚡️remove second "Chart Type" option * ⚡ updated error message, added json data, updated description * Add codex json file * ✅ add unit test * ✅ improve unit test * ⚡ removed any, added aliases --------- Co-authored-by: ricardo <ricardoespinoza105@gmail.com> Co-authored-by: Marcus <marcus@n8n.io> Co-authored-by: Michael Kret <michael.k@radency.com>
2023-03-17 11:50:26 +00:00
parent 6a8c9b7ccc
commit 233f1fa7ec
8 changed files with 748 additions and 0 deletions
--- a/packages/nodes-base/nodes/QuickChart/test/QuickChart.workflow.json
+++ b/packages/nodes-base/nodes/QuickChart/test/QuickChart.workflow.json
@@ -0,0 +1,132 @@
+{
+	"meta": {
+		"instanceId": "104a4d08d8897b8bdeb38aaca515021075e0bd8544c983c2bb8c86e6a8e6081c"
+	},
+	"nodes": [
+		{
+			"parameters": {},
+			"id": "5ebe2f65-45db-4b22-bd2b-43993c20806f",
+			"name": "When clicking \"Execute Workflow\"",
+			"type": "n8n-nodes-base.manualTrigger",
+			"typeVersion": 1,
+			"position": [740, 320]
+		},
+		{
+			"parameters": {
+				"jsCode": "return [\n  {\n    label: 'Free Users',\n    labels: [\"Berlin\", \"Paris\", \"Rome\", \"New York\"],\n    data: [50, 60, 70, 180],\n    backgroundColor: '#121d6d77',\n    chartType: 'line'\n  },\n  {\n    label: 'Paid Users',\n    labels: [\"Berlin\", \"Paris\", \"Rome\", \"New York\"],\n    data: [30, 10, 14, 25],\n    backgroundColor: '#0c0d0d96',\n    chartType: 'bar'\n  },\n]"
+			},
+			"id": "2e81f78c-41a5-48de-80c4-74abf163cd57",
+			"name": "Code",
+			"type": "n8n-nodes-base.code",
+			"typeVersion": 1,
+			"position": [980, 320]
+		},
+		{
+			"parameters": {
+				"labelsUi": {
+					"labelsValues": [
+						{
+							"label": "Q1"
+						},
+						{
+							"label": "Q2"
+						},
+						{
+							"label": "Q3"
+						},
+						{
+							"label": "Q4"
+						}
+					]
+				},
+				"data": "={{ $json.data }}",
+				"chartOptions": {
+					"backgroundColor": "#f93636ff",
+					"devicePixelRatio": 2,
+					"format": "png",
+					"height": 300,
+					"horizontal": true,
+					"width": 500
+				},
+				"datasetOptions": {
+					"backgroundColor": "={{ $json[\"backgroundColor\"] }}",
+					"borderColor": "#e81010",
+					"label": "={{ $json[\"label\"] }}"
+				}
+			},
+			"name": "BarChart",
+			"type": "n8n-nodes-base.quickChart",
+			"typeVersion": 1,
+			"position": [1220, 200],
+			"id": "9f6c9d1c-2732-473f-a357-5766265cd0db"
+		},
+		{
+			"parameters": {
+				"chartType": "doughnut",
+				"labelsUi": {
+					"labelsValues": [
+						{
+							"label": "Q1"
+						},
+						{
+							"label": "Q2"
+						},
+						{
+							"label": "Q3"
+						},
+						{
+							"label": "Q4"
+						}
+					]
+				},
+				"data": "={{ $json.data }}",
+				"chartOptions": {
+					"backgroundColor": "#f93636ff",
+					"devicePixelRatio": 2,
+					"format": "png",
+					"height": 300,
+					"width": 500
+				},
+				"datasetOptions": {
+					"backgroundColor": "={{ $json[\"backgroundColor\"] }}",
+					"borderColor": "#e81010",
+					"label": "={{ $json[\"label\"] }}"
+				}
+			},
+			"name": "Doughnut",
+			"type": "n8n-nodes-base.quickChart",
+			"typeVersion": 1,
+			"position": [1220, 400],
+			"id": "6c8e1463-c384-4f5c-9de3-d7e052b02b0a"
+		}
+	],
+	"connections": {
+		"When clicking \"Execute Workflow\"": {
+			"main": [
+				[
+					{
+						"node": "Code",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		},
+		"Code": {
+			"main": [
+				[
+					{
+						"node": "BarChart",
+						"type": "main",
+						"index": 0
+					},
+					{
+						"node": "Doughnut",
+						"type": "main",
+						"index": 0
+					}
+				]
+			]
+		}
+	}
+}