mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
Initial commit
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
36
library/modules/chartjs/nodes/bar.md
Normal file
36
library/modules/chartjs/nodes/bar.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Bar Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Bar Chart
|
||||
|
||||
This visual node adds a bar chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/bar) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/bubble.md
Normal file
36
library/modules/chartjs/nodes/bubble.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Bubble Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Bubble Chart
|
||||
|
||||
This visual node adds a bubble chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/bubble) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/doughnut.md
Normal file
36
library/modules/chartjs/nodes/doughnut.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Doughnut Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Doughnut Chart
|
||||
|
||||
This visual node adds a doughnut chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/doughnut) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/line.md
Normal file
36
library/modules/chartjs/nodes/line.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Line Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Line Chart
|
||||
|
||||
This visual node adds a line chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/line) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/pie.md
Normal file
36
library/modules/chartjs/nodes/pie.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Pie Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Pie Chart
|
||||
|
||||
This visual node adds a pie chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/pie) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/polar-area.md
Normal file
36
library/modules/chartjs/nodes/polar-area.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Polar Area Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Polar Area Chart
|
||||
|
||||
This visual node adds a polar area chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/polar-area) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/radar.md
Normal file
36
library/modules/chartjs/nodes/radar.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Radar Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Radar Chart
|
||||
|
||||
This visual node adds a radar chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/radar) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
36
library/modules/chartjs/nodes/scatter.md
Normal file
36
library/modules/chartjs/nodes/scatter.md
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Scatter Chart
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
<##head##>
|
||||
|
||||
# Scatter Chart
|
||||
|
||||
This visual node adds a scatter chart to the visual tree.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
[Here](../charts/scatter) is an example how to use used the node.
|
||||
|
||||
<##head##>
|
||||
|
||||
## Inputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_inputs.md"
|
||||
|
||||
</div>
|
||||
|
||||
## Outputs
|
||||
|
||||
<div className="ndl-table-35-65">
|
||||
|
||||
@include "./shared/_outputs.md"
|
||||
|
||||
</div>
|
||||
95
library/modules/chartjs/nodes/shared/_inputs.md
Normal file
95
library/modules/chartjs/nodes/shared/_inputs.md
Normal file
@@ -0,0 +1,95 @@
|
||||
|
||||
### General Options
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Index Axis</span> | |
|
||||
| <span className="ndl-data">Responsive</span> | Resizes the chart canvas when its parent node changes size. |
|
||||
| <span className="ndl-data">Maintain Aspect Ratio</span> | Maintain the original canvas aspect ratio (width / height) when resizing. |
|
||||
| <span className="ndl-data">Aspect Ratio</span> | Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Default: 1 |
|
||||
|
||||
### Animation
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">On Data Update</span> | When false, it wont animate when you update the data object. ([Preventing Animations](https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations)) |
|
||||
|
||||
### Title
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Show Title</span> | Is the title shown? |
|
||||
| <span className="ndl-data">Text</span> | Title text to display. |
|
||||
| <span className="ndl-data">Align</span> | Alignment of the title. |
|
||||
| <span className="ndl-data">Position</span> | Position of title. |
|
||||
| <span className="ndl-data">Color</span> | Color of text. |
|
||||
|
||||
### Title Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Tooltips
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Show Tooltips</span> | Are on-canvas tooltips enabled? |
|
||||
| <span className="ndl-data">Mode</span> | Sets which elements appear in the tooltip. |
|
||||
| <span className="ndl-data">Position</span> | The mode for positioning the tooltip. |
|
||||
| <span className="ndl-data">Background Color</span> | Background color of the tooltip. |
|
||||
| <span className="ndl-data">Body Color</span> | Color of body text. |
|
||||
| <span className="ndl-data">Spacing</span> | Spacing to add to top and bottom of each tooltip item. |
|
||||
| <span className="ndl-data">Corner Radius</span> | Radius of tooltip corner curves. |
|
||||
| <span className="ndl-data">Display Colors</span> | If true, color boxes are shown in the tooltip. |
|
||||
|
||||
### Tooltips Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Legend Labels
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Text Color</span> | |
|
||||
| <span className="ndl-data">Text Align</span> | |
|
||||
| <span className="ndl-data">Use Point Style</span> | |
|
||||
| <span className="ndl-data">Point Style</span> | |
|
||||
|
||||
### Legend Label Font
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Font Family</span> | The font family. |
|
||||
| <span className="ndl-data">Font Size</span> | The font size. |
|
||||
| <span className="ndl-data">Font Style</span> | The font style. |
|
||||
| <span className="ndl-data">Weight</span> | The font weight (boldness). |
|
||||
| <span className="ndl-data">Line Height</span> | The height of an individual line of text. |
|
||||
|
||||
### Data Decimation
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Enabled</span> | Is decimation enabled? |
|
||||
| <span className="ndl-data">Algorithm</span> | Decimation algorithm to use. See the [more...](https://www.chartjs.org/docs/latest/configuration/decimation.html#decimation-algorithms) |
|
||||
| <span className="ndl-data">Samples</span> | If the `lttb` algorithm is used, this is the number of samples in the output dataset. Defaults to the canvas width to pick 1 sample per pixel. |
|
||||
| <span className="ndl-data">Threshold</span> | If the number of samples in the current axis range is above this value, the decimation will be triggered. Defaults to 4 times the canvas width. The number of point after decimation can be higher than the `threshold` value. |
|
||||
|
||||
### Interaction
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Intersect</span> | If true, the interaction mode only applies when the mouse position intersects an item on the chart. |
|
||||
| <span className="ndl-data">Mode</span> | Sets which elements appear in the interaction. |
|
||||
| <span className="ndl-data">Axis</span> | |
|
||||
| <span className="ndl-data">Include Invisible</span> | If true, the invisible points that are outside of the chart area will also be included when evaluating interactions. |
|
||||
27
library/modules/chartjs/nodes/shared/_outputs.md
Normal file
27
library/modules/chartjs/nodes/shared/_outputs.md
Normal file
@@ -0,0 +1,27 @@
|
||||
|
||||
### Click Event
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Data</span> | |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Click</span> | |
|
||||
|
||||
### Before Event
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Chart</span> | |
|
||||
| <span className="ndl-data">Args</span> | |
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Before</span> | |
|
||||
|
||||
### Debug
|
||||
|
||||
| Data | Description |
|
||||
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Chart.js Options</span> | |
|
||||
Reference in New Issue
Block a user