mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 15:22: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
87
library/modules/chartjs/examples/custom-axis.md
Normal file
87
library/modules/chartjs/examples/custom-axis.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: Custom Axis
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Custom Axis
|
||||
|
||||
Here is a very rough example of how to setup custom axes, and the different options that are available.
|
||||
|
||||
```js
|
||||
Outputs.Data = {
|
||||
datasets: [
|
||||
{
|
||||
data: [Inputs.data1],
|
||||
yAxisID: "y-axis-1",
|
||||
},
|
||||
{
|
||||
data: [Inputs.data2],
|
||||
yAxisID: "y-axis-2",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Outputs.Scales = {
|
||||
"y-axis-1": {
|
||||
position: "left",
|
||||
title: {
|
||||
display: true,
|
||||
text: "Hello World",
|
||||
},
|
||||
},
|
||||
"y-axis-2": {
|
||||
position: "right",
|
||||
axis: "y",
|
||||
type: "linear",
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
minRotation: 0,
|
||||
maxRotation: 50,
|
||||
mirror: false,
|
||||
textStrokeWidth: 0,
|
||||
textStrokeColor: "",
|
||||
padding: 3,
|
||||
display: true,
|
||||
autoSkip: true,
|
||||
autoSkipPadding: 3,
|
||||
labelOffset: 0,
|
||||
minor: {},
|
||||
major: {},
|
||||
align: "center",
|
||||
crossAlign: "near",
|
||||
showLabelBackdrop: false,
|
||||
backdropColor: "rgba(255, 255, 255, 0.75)",
|
||||
backdropPadding: 2,
|
||||
color: "#666",
|
||||
},
|
||||
display: true,
|
||||
offset: false,
|
||||
reverse: false,
|
||||
bounds: "ticks",
|
||||
grace: 0,
|
||||
grid: {
|
||||
display: true,
|
||||
lineWidth: 1,
|
||||
drawBorder: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
tickLength: 8,
|
||||
offset: false,
|
||||
borderDash: [],
|
||||
borderDashOffset: 0,
|
||||
borderWidth: 1,
|
||||
color: "rgba(0,0,0,0.1)",
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
text: "",
|
||||
padding: {
|
||||
top: 4,
|
||||
bottom: 4,
|
||||
},
|
||||
color: "#666",
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
266
library/modules/chartjs/examples/custom-tooltip/README.md
Normal file
266
library/modules/chartjs/examples/custom-tooltip/README.md
Normal file
@@ -0,0 +1,266 @@
|
||||
---
|
||||
title: Custom Tooltip
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Custom Tooltip
|
||||
|
||||
:::tip
|
||||
|
||||
There are some known timing problems when setting `Plugins Object`,
|
||||
solution is to set the `Plugins Object` on `Did Mount`.
|
||||
|
||||
:::
|
||||
|
||||
## Custom Tooltip Content
|
||||
|
||||
This sample shows how to use the tooltip callbacks to add additional content to the tooltip.
|
||||
[Chart.js Example](https://www.chartjs.org/docs/3.6.0/samples/tooltip/content.html)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
footer: (tooltipItems) => {
|
||||
let sum = 0;
|
||||
|
||||
tooltipItems.forEach(function (tooltipItem) {
|
||||
sum += tooltipItem.parsed.y;
|
||||
});
|
||||
return "Sum: " + sum;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## External HTML Tooltip
|
||||
|
||||
This sample shows how to use the external tooltip functionality to generate an HTML tooltip.
|
||||
[Chart.js Example](https://www.chartjs.org/docs/3.6.0/samples/tooltip/html.html)
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
```js
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector("div");
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
|
||||
tooltipEl.style.borderRadius = "3px";
|
||||
tooltipEl.style.color = "white";
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.pointerEvents = "none";
|
||||
tooltipEl.style.position = "absolute";
|
||||
tooltipEl.style.transform = "translate(-50%, 0)";
|
||||
tooltipEl.style.transition = "all .1s ease";
|
||||
|
||||
const table = document.createElement("table");
|
||||
table.style.margin = "0px";
|
||||
|
||||
tooltipEl.appendChild(table);
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
const externalTooltipHandler = (context) => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map((b) => b.lines);
|
||||
|
||||
const tableHead = document.createElement("thead");
|
||||
|
||||
titleLines.forEach((title) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const th = document.createElement("th");
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
|
||||
th.appendChild(text);
|
||||
tr.appendChild(th);
|
||||
tableHead.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableBody = document.createElement("tbody");
|
||||
bodyLines.forEach((body, i) => {
|
||||
const colors = tooltip.labelColors[i];
|
||||
|
||||
const span = document.createElement("span");
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = "2px";
|
||||
span.style.marginRight = "10px";
|
||||
span.style.height = "10px";
|
||||
span.style.width = "10px";
|
||||
span.style.display = "inline-block";
|
||||
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.backgroundColor = "inherit";
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const td = document.createElement("td");
|
||||
td.style.borderWidth = 0;
|
||||
|
||||
const text = document.createTextNode(body);
|
||||
|
||||
td.appendChild(span);
|
||||
td.appendChild(text);
|
||||
tr.appendChild(td);
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableRoot = tooltipEl.querySelector("table");
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.appendChild(tableHead);
|
||||
tableRoot.appendChild(tableBody);
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + "px";
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + "px";
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding =
|
||||
tooltip.options.padding + "px " + tooltip.options.padding + "px";
|
||||
};
|
||||
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
position: "nearest",
|
||||
external: externalTooltipHandler,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Only show titles
|
||||
|
||||
For this we just change the code to only return the titles.
|
||||
|
||||
<div className="ndl-image-with-background l">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
```js
|
||||
const getOrCreateTooltip = (chart) => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector("div");
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement("div");
|
||||
tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
|
||||
tooltipEl.style.borderRadius = "3px";
|
||||
tooltipEl.style.color = "white";
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.pointerEvents = "none";
|
||||
tooltipEl.style.position = "absolute";
|
||||
tooltipEl.style.transform = "translate(-50%, 0)";
|
||||
tooltipEl.style.transition = "all .1s ease";
|
||||
|
||||
const table = document.createElement("table");
|
||||
table.style.margin = "0px";
|
||||
|
||||
tooltipEl.appendChild(table);
|
||||
chart.canvas.parentNode.appendChild(tooltipEl);
|
||||
}
|
||||
|
||||
return tooltipEl;
|
||||
};
|
||||
|
||||
const externalTooltipHandler = (context) => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map((b) => b.lines);
|
||||
|
||||
const tableHead = document.createElement("thead");
|
||||
|
||||
titleLines.forEach((title) => {
|
||||
const tr = document.createElement("tr");
|
||||
tr.style.borderWidth = 0;
|
||||
|
||||
const th = document.createElement("th");
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
|
||||
th.appendChild(text);
|
||||
tr.appendChild(th);
|
||||
tableHead.appendChild(tr);
|
||||
});
|
||||
|
||||
const tableRoot = tooltipEl.querySelector("table");
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.appendChild(tableHead);
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = positionX + tooltip.caretX + "px";
|
||||
tooltipEl.style.top = positionY + tooltip.caretY + "px";
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding =
|
||||
tooltip.options.padding + "px " + tooltip.options.padding + "px";
|
||||
};
|
||||
|
||||
Outputs.Plugins = {
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
position: "nearest",
|
||||
external: externalTooltipHandler,
|
||||
},
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user