From 37ae2e85997268285ca8fab84fb3149b978179c7 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 24 May 2022 18:51:34 +0200 Subject: [PATCH 1/3] Add sample how to select annotations --- docs/.vuepress/config.js | 1 + docs/samples/interaction/selection.md | 167 ++++++++++++++++++++++++++ 2 files changed, 168 insertions(+) create mode 100644 docs/samples/interaction/selection.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a8b4c6116..e5c0e310d 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -184,6 +184,7 @@ module.exports = { children: [ 'interaction/interaction', 'interaction/dragging', + 'interaction/selection', ], }, 'utils', diff --git a/docs/samples/interaction/selection.md b/docs/samples/interaction/selection.md new file mode 100644 index 000000000..51467b766 --- /dev/null +++ b/docs/samples/interaction/selection.md @@ -0,0 +1,167 @@ +# Selecting annotations + +```js chart-editor +// +const AXIS = ['xy', 'x', 'y']; +const MODE = ['nearest', 'point', 'x', 'y']; +let count = 0; +const selected = []; + +let axisIndex = 0; +let modeIndex = 0; + +Utils.srand(8); + +const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + type: 'line', + label: 'Dataset 1', + borderColor: 'rgb(54, 162, 235)', + borderWidth: 2, + fill: false, + data: Utils.numbers({count: 7, min: 0, max: 100}), + }] +}; +// + +// +const annotation1 = { + type: 'box', + backgroundColor: 'rgba(255, 245, 157, 0.2)', + borderColor: 'rgb(255, 245, 157)', + borderWidth: 2, + enter: function({chart, element}) { + console.log(element.label.options.content + ' entered'); + if (!count) { + chart.canvas.style.cursor = 'pointer'; + } + count++; + element.label.options.font.size = 14; + return true; + }, + click: function({element}) { + console.log(element.label.options.content + ' selected'); + if (selected.includes(element)) { + selected.splice(selected.indexOf(element), 1); + element.options.backgroundColor = 'rgba(255, 245, 157, 0.2)'; + } else { + selected.push(element); + element.options.backgroundColor = 'rgba(255, 245, 157, 0.8)'; + } + return true; + }, + leave: function({chart, element}) { + console.log(element.label.options.content + ' left'); + count--; + if (!count) { + chart.canvas.style.cursor = 'default'; + } + element.label.options.font.size = 12; + return true; + }, + label: { + display: true, + content: 'Yellow box annotation', + position: { + y: 'start' + }, + font: { + size: 12 + } + }, + xMax: 'April', + xMin: 'February', + xScaleID: 'x', + yMax: 90, + yMin: 10, + yScaleID: 'y' +}; +// + +// +const annotation2 = { + type: 'box', + backgroundColor: 'rgba(165, 214, 167, 0.2)', + borderColor: 'rgb(165, 214, 167)', + borderWidth: 2, + enter: function({chart, element}) { + console.log(element.label.options.content + ' entered'); + if (!count) { + chart.canvas.style.cursor = 'pointer'; + } + count++; + element.label.options.font.size = 14; + return true; + }, + click: function({element}) { + console.log(element.label.options.content + ' selected'); + if (selected.includes(element)) { + selected.splice(selected.indexOf(element), 1); + element.options.backgroundColor = 'rgba(165, 214, 167, 0.2)'; + } else { + selected.push(element); + element.options.backgroundColor = 'rgba(165, 214, 167, 0.8)'; + } + return true; + }, + leave: function({chart, element}) { + console.log(element.label.options.content + ' left'); + count--; + if (!count) { + chart.canvas.style.cursor = 'default'; + } + element.label.options.font.size = 12; + return true; + }, + label: { + display: true, + content: 'Green box annotation', + position: { + y: 'start' + }, + font: { + size: 12 + } + }, + xMax: 'May', + xMin: 'March', + xScaleID: 'x', + yMax: 75, + yMin: 25, + yScaleID: 'y' +}; +// + +/* */ +const config = { + type: 'line', + data, + options: { + scales: { + y: { + beginAtZero: true, + min: 0, + max: 100 + } + }, + plugins: { + annotation: { + common: { + drawTime: 'beforeDraw' + }, + annotations: { + annotation1, + annotation2 + } + } + } + } +}; +/* */ + +module.exports = { + config: config, + output: 'console.log output is shown here, click one of the annotations' +}; +``` From 5483e886d3e16b7ef5947cda907f9062f46803fb Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 24 May 2022 18:59:35 +0200 Subject: [PATCH 2/3] Clean up the useless references --- docs/samples/interaction/selection.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docs/samples/interaction/selection.md b/docs/samples/interaction/selection.md index 51467b766..3ab59f794 100644 --- a/docs/samples/interaction/selection.md +++ b/docs/samples/interaction/selection.md @@ -2,14 +2,9 @@ ```js chart-editor // -const AXIS = ['xy', 'x', 'y']; -const MODE = ['nearest', 'point', 'x', 'y']; let count = 0; const selected = []; -let axisIndex = 0; -let modeIndex = 0; - Utils.srand(8); const data = { From c776e801d02e7b31ed7b9cb5620fa651897e4ab7 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Tue, 24 May 2022 19:13:15 +0200 Subject: [PATCH 3/3] changes the sample a little bit --- docs/samples/interaction/dragging.md | 2 +- docs/samples/interaction/selection.md | 94 ++++++++++----------------- 2 files changed, 37 insertions(+), 59 deletions(-) diff --git a/docs/samples/interaction/dragging.md b/docs/samples/interaction/dragging.md index 5c5ce9eb9..b277988ad 100644 --- a/docs/samples/interaction/dragging.md +++ b/docs/samples/interaction/dragging.md @@ -130,7 +130,7 @@ const handleDrag = function(event) { } } }; -// +// // const dragger = { diff --git a/docs/samples/interaction/selection.md b/docs/samples/interaction/selection.md index 3ab59f794..068d0fbf3 100644 --- a/docs/samples/interaction/selection.md +++ b/docs/samples/interaction/selection.md @@ -26,35 +26,7 @@ const annotation1 = { backgroundColor: 'rgba(255, 245, 157, 0.2)', borderColor: 'rgb(255, 245, 157)', borderWidth: 2, - enter: function({chart, element}) { - console.log(element.label.options.content + ' entered'); - if (!count) { - chart.canvas.style.cursor = 'pointer'; - } - count++; - element.label.options.font.size = 14; - return true; - }, - click: function({element}) { - console.log(element.label.options.content + ' selected'); - if (selected.includes(element)) { - selected.splice(selected.indexOf(element), 1); - element.options.backgroundColor = 'rgba(255, 245, 157, 0.2)'; - } else { - selected.push(element); - element.options.backgroundColor = 'rgba(255, 245, 157, 0.8)'; - } - return true; - }, - leave: function({chart, element}) { - console.log(element.label.options.content + ' left'); - count--; - if (!count) { - chart.canvas.style.cursor = 'default'; - } - element.label.options.font.size = 12; - return true; - }, + click: ({element}) => select(element, 'rgba(255, 245, 157, 0.8)', 'rgba(255, 245, 157, 0.2)'), label: { display: true, content: 'Yellow box annotation', @@ -80,35 +52,7 @@ const annotation2 = { backgroundColor: 'rgba(165, 214, 167, 0.2)', borderColor: 'rgb(165, 214, 167)', borderWidth: 2, - enter: function({chart, element}) { - console.log(element.label.options.content + ' entered'); - if (!count) { - chart.canvas.style.cursor = 'pointer'; - } - count++; - element.label.options.font.size = 14; - return true; - }, - click: function({element}) { - console.log(element.label.options.content + ' selected'); - if (selected.includes(element)) { - selected.splice(selected.indexOf(element), 1); - element.options.backgroundColor = 'rgba(165, 214, 167, 0.2)'; - } else { - selected.push(element); - element.options.backgroundColor = 'rgba(165, 214, 167, 0.8)'; - } - return true; - }, - leave: function({chart, element}) { - console.log(element.label.options.content + ' left'); - count--; - if (!count) { - chart.canvas.style.cursor = 'default'; - } - element.label.options.font.size = 12; - return true; - }, + click: ({element}) => select(element, 'rgba(165, 214, 167, 0.8)', 'rgba(165, 214, 167, 0.2)'), label: { display: true, content: 'Green box annotation', @@ -128,6 +72,38 @@ const annotation2 = { }; // +// +function enter({chart, element}) { + console.log(element.label.options.content + ' entered'); + if (!count) { + chart.canvas.style.cursor = 'pointer'; + } + count++; +} + +function leave({chart, element}) { + console.log(element.label.options.content + ' left'); + count--; + if (!count) { + chart.canvas.style.cursor = 'default'; + } +} + +function select(element, selectedColor, unselectedColor) { + console.log(element.label.options.content + ' selected'); + if (selected.includes(element)) { + selected.splice(selected.indexOf(element), 1); + element.options.backgroundColor = unselectedColor; + element.label.options.font.size = 12; + } else { + selected.push(element); + element.options.backgroundColor = selectedColor; + element.label.options.font.size = 14; + } + return true; +} +// + /* */ const config = { type: 'line', @@ -142,6 +118,8 @@ const config = { }, plugins: { annotation: { + enter: enter, + leave: leave, common: { drawTime: 'beforeDraw' },