mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 12:57:29 -08:00
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>
This commit is contained in:
Val
GitHub
parent
6a8c9b7ccc
commit
233f1fa7ec
19
packages/nodes-base/nodes/QuickChart/QuickChart.node.json
Normal file
19
packages/nodes-base/nodes/QuickChart/QuickChart.node.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"node": "n8n-nodes-base.quickChart",
|
||||
"nodeVersion": "1.0",
|
||||
"codexVersion": "1.0",
|
||||
"categories": ["Marketing & Content"],
|
||||
"resources": {
|
||||
"credentialDocumentation": [
|
||||
{
|
||||
"url": "https://docs.n8n.io/integrations/builtin/credentials/quickchart"
|
||||
}
|
||||
],
|
||||
"primaryDocumentation": [
|
||||
{
|
||||
"url": "https://docs.n8n.io/integrations/builtin/app-nodes/n8n-nodes-base.quickchart/"
|
||||
}
|
||||
]
|
||||
},
|
||||
"alias": ["image", "graph", "report", "chart", "diagram", "data", "visualize"]
|
||||
}
|
||||
430
packages/nodes-base/nodes/QuickChart/QuickChart.node.ts
Normal file
430
packages/nodes-base/nodes/QuickChart/QuickChart.node.ts
Normal file
|
|
@ -0,0 +1,430 @@
|
|||
import type {
|
||||
IDataObject,
|
||||
IExecuteFunctions,
|
||||
IHttpRequestOptions,
|
||||
IN8nHttpFullResponse,
|
||||
INodeExecutionData,
|
||||
INodeType,
|
||||
INodeTypeDescription,
|
||||
} from 'n8n-workflow';
|
||||
import { jsonParse, NodeOperationError } from 'n8n-workflow';
|
||||
|
||||
import {
|
||||
CHART_TYPE_OPTIONS,
|
||||
Fill_CHARTS,
|
||||
HORIZONTAL_CHARTS,
|
||||
ITEM_STYLE_CHARTS,
|
||||
POINT_STYLE_CHARTS,
|
||||
} from './constants';
|
||||
import type { IDataset } from './types';
|
||||
|
||||
import _ from 'lodash';
|
||||
export class QuickChart implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
displayName: 'QuickChart',
|
||||
name: 'quickChart',
|
||||
icon: 'file:quickChart.svg',
|
||||
group: ['output'],
|
||||
description: 'Create a chart via QuickChart',
|
||||
version: 1,
|
||||
defaults: {
|
||||
name: 'QuickChart',
|
||||
},
|
||||
inputs: ['main'],
|
||||
outputs: ['main'],
|
||||
properties: [
|
||||
{
|
||||
displayName: 'Chart Type',
|
||||
name: 'chartType',
|
||||
type: 'options',
|
||||
default: 'bar',
|
||||
options: CHART_TYPE_OPTIONS,
|
||||
description: 'The type of chart to create',
|
||||
},
|
||||
{
|
||||
displayName: 'Add Labels',
|
||||
name: 'labelsMode',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
name: 'Manually',
|
||||
value: 'manually',
|
||||
},
|
||||
{
|
||||
name: 'From Array',
|
||||
value: 'array',
|
||||
},
|
||||
],
|
||||
default: 'manually',
|
||||
},
|
||||
{
|
||||
displayName: 'Labels',
|
||||
name: 'labelsUi',
|
||||
type: 'fixedCollection',
|
||||
typeOptions: {
|
||||
multipleValues: true,
|
||||
sortable: true,
|
||||
},
|
||||
default: {},
|
||||
required: true,
|
||||
description: 'Labels to use in the chart',
|
||||
placeholder: 'Add Label',
|
||||
options: [
|
||||
{
|
||||
name: 'labelsValues',
|
||||
displayName: 'Labels',
|
||||
values: [
|
||||
{
|
||||
displayName: 'Label',
|
||||
name: 'label',
|
||||
type: 'string',
|
||||
default: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
displayOptions: {
|
||||
show: {
|
||||
labelsMode: ['manually'],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Labels Array',
|
||||
name: 'labelsArray',
|
||||
type: 'string',
|
||||
required: true,
|
||||
default: '',
|
||||
placeholder: 'e.g. ["Berlin", "Paris", "Rome", "New York"]',
|
||||
displayOptions: {
|
||||
show: {
|
||||
labelsMode: ['array'],
|
||||
},
|
||||
},
|
||||
description: 'The array of labels to be used in the chart',
|
||||
},
|
||||
{
|
||||
displayName: 'Data',
|
||||
name: 'data',
|
||||
type: 'json',
|
||||
default: '',
|
||||
description:
|
||||
'Data to use for the dataset, documentation and examples <a href="https://quickchart.io/documentation/chart-types/" target="_blank">here</a>',
|
||||
placeholder: 'e.g. [60, 10, 12, 20]',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
displayName: 'Put Output In Field',
|
||||
name: 'output',
|
||||
type: 'string',
|
||||
default: 'data',
|
||||
required: true,
|
||||
description:
|
||||
'The binary data will be displayed in the Output panel on the right, under the Binary tab',
|
||||
hint: 'The name of the output field to put the binary file data in',
|
||||
},
|
||||
{
|
||||
displayName: 'Chart Options',
|
||||
name: 'chartOptions',
|
||||
type: 'collection',
|
||||
placeholder: 'Add Option',
|
||||
default: {},
|
||||
options: [
|
||||
{
|
||||
displayName: 'Background Color',
|
||||
name: 'backgroundColor',
|
||||
type: 'color',
|
||||
typeOptions: {
|
||||
showAlpha: true,
|
||||
},
|
||||
default: '',
|
||||
description: 'Background color of the chart',
|
||||
},
|
||||
{
|
||||
displayName: 'Device Pixel Ratio',
|
||||
name: 'devicePixelRatio',
|
||||
type: 'number',
|
||||
default: 2,
|
||||
typeOptions: {
|
||||
minValue: 1,
|
||||
maxValue: 2,
|
||||
},
|
||||
description: 'Pixel ratio of the chart',
|
||||
},
|
||||
{
|
||||
displayName: 'Format',
|
||||
name: 'format',
|
||||
type: 'options',
|
||||
default: 'png',
|
||||
description: 'File format of the resulting chart',
|
||||
options: [
|
||||
{
|
||||
name: 'PNG',
|
||||
value: 'png',
|
||||
},
|
||||
{
|
||||
name: 'PDF',
|
||||
value: 'pdf',
|
||||
},
|
||||
{
|
||||
name: 'SVG',
|
||||
value: 'svg',
|
||||
},
|
||||
{
|
||||
name: 'WebP',
|
||||
value: 'webp',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
displayName: 'Height',
|
||||
name: 'height',
|
||||
type: 'number',
|
||||
default: 300,
|
||||
description: 'Height of the chart',
|
||||
},
|
||||
{
|
||||
displayName: 'Horizontal',
|
||||
name: 'horizontal',
|
||||
type: 'boolean',
|
||||
default: false,
|
||||
description: 'Whether the chart should use its Y axis horizontal',
|
||||
displayOptions: {
|
||||
show: {
|
||||
'/chartType': HORIZONTAL_CHARTS,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Width',
|
||||
name: 'width',
|
||||
type: 'number',
|
||||
default: 500,
|
||||
description: 'Width of the chart',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
displayName: 'Dataset Options',
|
||||
name: 'datasetOptions',
|
||||
type: 'collection',
|
||||
placeholder: 'Add Option',
|
||||
default: {},
|
||||
options: [
|
||||
{
|
||||
displayName: 'Background Color',
|
||||
name: 'backgroundColor',
|
||||
type: 'color',
|
||||
default: '',
|
||||
typeOptions: {
|
||||
showAlpha: true,
|
||||
},
|
||||
description:
|
||||
'Color used for the background the dataset (area of a line graph, fill of a bar chart, etc.)',
|
||||
},
|
||||
{
|
||||
displayName: 'Border Color',
|
||||
name: 'borderColor',
|
||||
type: 'color',
|
||||
typeOptions: {
|
||||
showAlpha: true,
|
||||
},
|
||||
default: '',
|
||||
description: 'Color used for lines of the dataset',
|
||||
},
|
||||
{
|
||||
displayName: 'Fill',
|
||||
name: 'fill',
|
||||
type: 'boolean',
|
||||
default: true,
|
||||
description: 'Whether to fill area of the dataset',
|
||||
displayOptions: {
|
||||
show: {
|
||||
'/chartType': Fill_CHARTS,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
displayName: 'Label',
|
||||
name: 'label',
|
||||
type: 'string',
|
||||
default: '',
|
||||
description: 'The label of the dataset',
|
||||
},
|
||||
{
|
||||
displayName: 'Point Style',
|
||||
name: 'pointStyle',
|
||||
type: 'options',
|
||||
default: 'circle',
|
||||
description: 'Style to use for points of the dataset',
|
||||
options: [
|
||||
{
|
||||
name: 'Circle',
|
||||
value: 'circle',
|
||||
},
|
||||
{
|
||||
name: 'Cross',
|
||||
value: 'cross',
|
||||
},
|
||||
{
|
||||
name: 'CrossRot',
|
||||
value: 'crossRot',
|
||||
},
|
||||
{
|
||||
name: 'Dash',
|
||||
value: 'dash',
|
||||
},
|
||||
{
|
||||
name: 'Line',
|
||||
value: 'line',
|
||||
},
|
||||
{
|
||||
name: 'Rect',
|
||||
value: 'rect',
|
||||
},
|
||||
{
|
||||
name: 'Rect Rot',
|
||||
value: 'rectRot',
|
||||
},
|
||||
{
|
||||
name: 'Rect Rounded',
|
||||
value: 'rectRounded',
|
||||
},
|
||||
{
|
||||
name: 'Star',
|
||||
value: 'star',
|
||||
},
|
||||
{
|
||||
name: 'Triangle',
|
||||
value: 'triangle',
|
||||
},
|
||||
],
|
||||
displayOptions: {
|
||||
show: {
|
||||
'/chartType': POINT_STYLE_CHARTS,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
|
||||
const items = this.getInputData();
|
||||
const datasets: IDataset[] = [];
|
||||
let chartType = '';
|
||||
|
||||
const labels: string[] = [];
|
||||
const labelsMode = this.getNodeParameter('labelsMode', 0) as string;
|
||||
|
||||
if (labelsMode === 'manually') {
|
||||
const labelsUi = this.getNodeParameter('labelsUi.labelsValues', 0, []) as IDataObject[];
|
||||
|
||||
if (labelsUi.length) {
|
||||
for (const labelValue of labelsUi as [{ label: string[] | string }]) {
|
||||
if (Array.isArray(labelValue.label)) {
|
||||
labels?.push(...labelValue.label);
|
||||
} else {
|
||||
labels?.push(labelValue.label);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const labelsArray = this.getNodeParameter('labelsArray', 0, '') as string;
|
||||
|
||||
const errorMessage =
|
||||
'Labels Array is not a valid array, use valid JSON format, or specify it by expressions';
|
||||
|
||||
if (Array.isArray(labelsArray)) {
|
||||
labels.push(...labelsArray);
|
||||
} else {
|
||||
const labelsArrayParsed = jsonParse<string[]>(labelsArray, {
|
||||
errorMessage,
|
||||
});
|
||||
if (!Array.isArray(labelsArrayParsed)) {
|
||||
throw new NodeOperationError(this.getNode(), errorMessage);
|
||||
}
|
||||
labels.push(...labelsArrayParsed);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
const data = this.getNodeParameter('data', i) as string;
|
||||
const datasetOptions = this.getNodeParameter('datasetOptions', i) as IDataObject;
|
||||
|
||||
const backgroundColor = datasetOptions.backgroundColor as string;
|
||||
const borderColor = datasetOptions.borderColor as string | undefined;
|
||||
const fill = datasetOptions.fill as boolean | undefined;
|
||||
const label = (datasetOptions.label as string) || 'Chart';
|
||||
const pointStyle = datasetOptions.pointStyle as string | undefined;
|
||||
|
||||
chartType = this.getNodeParameter('chartType', i) as string;
|
||||
|
||||
if (HORIZONTAL_CHARTS.includes(chartType)) {
|
||||
const horizontal = this.getNodeParameter('chartOptions.horizontal', i, false) as boolean;
|
||||
if (horizontal) {
|
||||
chartType =
|
||||
'horizontal' + chartType[0].toUpperCase() + chartType.substring(1, chartType.length);
|
||||
}
|
||||
}
|
||||
|
||||
// Boxplots and Violins are an addon that uses the name 'itemStyle'
|
||||
// instead of 'pointStyle'.
|
||||
let pointStyleName = 'pointStyle';
|
||||
if (ITEM_STYLE_CHARTS.includes(chartType)) {
|
||||
pointStyleName = 'itemStyle';
|
||||
}
|
||||
|
||||
datasets.push({
|
||||
label,
|
||||
data,
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
type: chartType,
|
||||
fill,
|
||||
[pointStyleName]: pointStyle,
|
||||
});
|
||||
}
|
||||
|
||||
const output = this.getNodeParameter('output', 0) as string;
|
||||
const chartOptions = this.getNodeParameter('chartOptions', 0) as IDataObject;
|
||||
|
||||
const chart = {
|
||||
type: chartType,
|
||||
data: {
|
||||
labels,
|
||||
datasets,
|
||||
},
|
||||
};
|
||||
|
||||
const options: IHttpRequestOptions = {
|
||||
method: 'GET',
|
||||
url: 'https://quickchart.io/chart',
|
||||
qs: {
|
||||
chart: JSON.stringify(chart),
|
||||
...chartOptions,
|
||||
},
|
||||
returnFullResponse: true,
|
||||
encoding: 'arraybuffer',
|
||||
json: false,
|
||||
};
|
||||
|
||||
const response = (await this.helpers.httpRequest(options)) as IN8nHttpFullResponse;
|
||||
let mimeType = response.headers['content-type'] as string | undefined;
|
||||
mimeType = mimeType ? mimeType.split(';').find((value) => value.includes('/')) : undefined;
|
||||
|
||||
return this.prepareOutputData([
|
||||
{
|
||||
binary: {
|
||||
[output]: await this.helpers.prepareBinaryData(
|
||||
response.body as Buffer,
|
||||
undefined,
|
||||
mimeType,
|
||||
),
|
||||
},
|
||||
json: { chart },
|
||||
},
|
||||
]);
|
||||
}
|
||||
}
|
||||
30
packages/nodes-base/nodes/QuickChart/constants.ts
Normal file
30
packages/nodes-base/nodes/QuickChart/constants.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import type { INodePropertyOptions } from 'n8n-workflow';
|
||||
|
||||
// Disable some charts that use different datasets for now
|
||||
export const CHART_TYPE_OPTIONS: INodePropertyOptions[] = [
|
||||
{
|
||||
name: 'Bar Chart',
|
||||
value: 'bar',
|
||||
},
|
||||
{
|
||||
name: 'Doughnut Chart',
|
||||
value: 'doughnut',
|
||||
},
|
||||
{
|
||||
name: 'Line Chart',
|
||||
value: 'line',
|
||||
},
|
||||
{
|
||||
name: 'Pie Chart',
|
||||
value: 'pie',
|
||||
},
|
||||
{
|
||||
name: 'Polar Chart',
|
||||
value: 'polarArea',
|
||||
},
|
||||
];
|
||||
|
||||
export const HORIZONTAL_CHARTS = ['bar', 'boxplot', 'violin'];
|
||||
export const ITEM_STYLE_CHARTS = ['boxplot', 'horizontalBoxplot', 'violin', 'horizontalViolin'];
|
||||
export const Fill_CHARTS = ['line'];
|
||||
export const POINT_STYLE_CHARTS = ['line'];
|
||||
14
packages/nodes-base/nodes/QuickChart/quickChart.svg
Normal file
14
packages/nodes-base/nodes/QuickChart/quickChart.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="445" height="445" viewBox="0 0 445 445" xml:space="preserve">
|
||||
<desc>Created with Fabric.js 1.7.22</desc>
|
||||
<defs>
|
||||
</defs>
|
||||
<g id="icon" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-2.4722222222222285 -2.4722222222222285) scale(4.94 4.94)" >
|
||||
<path d="M 40.135 90 h -8.782 c -1.519 0 -2.75 -1.231 -2.75 -2.75 V 45.381 c 0 -1.519 1.231 -2.75 2.75 -2.75 h 8.782 c 1.519 0 2.75 1.231 2.75 2.75 V 87.25 C 42.885 88.769 41.654 90 40.135 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,195,110); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 58.647 90 h -8.782 c -1.519 0 -2.75 -1.231 -2.75 -2.75 V 31.449 c 0 -1.519 1.231 -2.75 2.75 -2.75 h 8.782 c 1.519 0 2.75 1.231 2.75 2.75 V 87.25 C 61.397 88.769 60.165 90 58.647 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(165,215,110); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 21.624 90 h -8.782 c -1.519 0 -2.75 -1.231 -2.75 -2.75 V 59.313 c 0 -1.519 1.231 -2.75 2.75 -2.75 h 8.782 c 1.519 0 2.75 1.231 2.75 2.75 V 87.25 C 24.374 88.769 23.142 90 21.624 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(210,85,90); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 77.158 90 h -8.782 c -1.519 0 -2.75 -1.231 -2.75 -2.75 V 17.517 c 0 -1.519 1.231 -2.75 2.75 -2.75 h 8.782 c 1.519 0 2.75 1.231 2.75 2.75 V 87.25 C 79.908 88.769 78.677 90 77.158 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(120,210,190); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
<path d="M 67.773 17.977 h 18.183 c 1.787 0 2.682 -2.258 1.418 -3.578 L 74.185 0.614 c -0.783 -0.819 -2.053 -0.819 -2.836 0 L 58.16 14.398 c -1.264 1.321 -0.369 3.578 1.418 3.578 L 67.773 17.977" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(120,210,190); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -0,0 +1,110 @@
|
|||
/* eslint-disable @typescript-eslint/no-loop-func */
|
||||
import * as Helpers from '../../../test/nodes/Helpers';
|
||||
import type { WorkflowTestData } from '../../../test/nodes/types';
|
||||
import { executeWorkflow } from '../../../test/nodes/ExecuteWorkflow';
|
||||
import nock from 'nock';
|
||||
|
||||
describe('Test QuickChart Node', () => {
|
||||
beforeEach(async () => {
|
||||
await Helpers.initBinaryDataManager();
|
||||
nock.disableNetConnect();
|
||||
nock('https://quickchart.io')
|
||||
.persist()
|
||||
.get(/chart.*/)
|
||||
.reply(200, { success: true });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
nock.restore();
|
||||
});
|
||||
|
||||
const workflow = Helpers.readJsonFileSync('nodes/QuickChart/test/QuickChart.workflow.json');
|
||||
|
||||
const tests: WorkflowTestData[] = [
|
||||
{
|
||||
description: 'nodes/QuickChart/test/QuickChart.workflow.json',
|
||||
input: {
|
||||
workflowData: workflow,
|
||||
},
|
||||
output: {
|
||||
nodeData: {
|
||||
BarChart: [
|
||||
[
|
||||
{
|
||||
json: {
|
||||
chart: {
|
||||
type: 'horizontalBar',
|
||||
data: {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Free Users',
|
||||
data: [50, 60, 70, 180],
|
||||
backgroundColor: '#121d6d77',
|
||||
borderColor: '#e81010',
|
||||
type: 'horizontalBar',
|
||||
},
|
||||
{
|
||||
label: 'Paid Users',
|
||||
data: [30, 10, 14, 25],
|
||||
backgroundColor: '#0c0d0d96',
|
||||
borderColor: '#e81010',
|
||||
type: 'horizontalBar',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
Doughnut: [
|
||||
[
|
||||
{
|
||||
json: {
|
||||
chart: {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Free Users',
|
||||
data: [50, 60, 70, 180],
|
||||
backgroundColor: '#121d6d77',
|
||||
borderColor: '#e81010',
|
||||
type: 'doughnut',
|
||||
},
|
||||
{
|
||||
label: 'Paid Users',
|
||||
data: [30, 10, 14, 25],
|
||||
backgroundColor: '#0c0d0d96',
|
||||
borderColor: '#e81010',
|
||||
type: 'doughnut',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const nodeTypes = Helpers.setup(tests);
|
||||
|
||||
for (const testData of tests) {
|
||||
test(testData.description, async () => {
|
||||
const { result } = await executeWorkflow(testData, nodeTypes);
|
||||
|
||||
const resultNodeData = Helpers.getResultNodeData(result, testData);
|
||||
resultNodeData.forEach(({ nodeName, resultData }) => {
|
||||
delete resultData[0]![0].binary;
|
||||
expect(resultData).toEqual(testData.output.nodeData[nodeName]);
|
||||
});
|
||||
expect(result.finished).toEqual(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
12
packages/nodes-base/nodes/QuickChart/types.ts
Normal file
12
packages/nodes-base/nodes/QuickChart/types.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import type { IDataObject } from 'n8n-workflow';
|
||||
|
||||
export interface IDataset {
|
||||
label?: string;
|
||||
data: string | IDataObject;
|
||||
backgroundColor?: string;
|
||||
borderColor?: string;
|
||||
color?: string;
|
||||
type?: string;
|
||||
fill?: boolean;
|
||||
pointStyle?: string;
|
||||
}
|
||||
|
|
@ -621,6 +621,7 @@
|
|||
"dist/nodes/QuestDb/QuestDb.node.js",
|
||||
"dist/nodes/QuickBase/QuickBase.node.js",
|
||||
"dist/nodes/QuickBooks/QuickBooks.node.js",
|
||||
"dist/nodes/QuickChart/QuickChart.node.js",
|
||||
"dist/nodes/RabbitMQ/RabbitMQ.node.js",
|
||||
"dist/nodes/RabbitMQ/RabbitMQTrigger.node.js",
|
||||
"dist/nodes/Raindrop/Raindrop.node.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue