From 7e9ba718ca96fa99a826ae76b9c94f9adfa8428b Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 13 Jan 2023 14:28:30 +0100 Subject: [PATCH 1/3] Add sample for label auto scaling during chart resize --- docs/.vuepress/config.js | 1 + docs/samples/label/autoscaling.md | 88 +++++++++++++++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 docs/samples/label/autoscaling.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 301aad415..6d0c9e417 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -165,6 +165,7 @@ module.exports = { 'label/image', 'label/innerChart', 'label/lowerUpper', + 'label/autoscaling' ] }, { diff --git a/docs/samples/label/autoscaling.md b/docs/samples/label/autoscaling.md new file mode 100644 index 000000000..31888d875 --- /dev/null +++ b/docs/samples/label/autoscaling.md @@ -0,0 +1,88 @@ +# Auto scaling + + + +```js chart-editor +// +const uniqueId = new Date().getTime(); + +const DATA_COUNT = 12; +const MIN = 0; +const MAX = 100; + +const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX}; + +const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], + datasets: [{ + data: Utils.numbers(numberCfg) + }] +}; +// + +// +const annotation = { + type: 'label', + backgroundColor: 'whiteSmoke', + borderColor: 'lightGray', + borderRadius: 6, + borderWidth: 2, + content: ['Annotation', 'to resize'], + drawTime: 'afterDraw', + font: (ctx) => autoScaling(ctx) +}; +// + +/* */ +const config = { + type: 'line', + data, + options: { + _sampleId: uniqueId, + plugins: { + annotation: { + annotations: { + annotation + } + } + } + } +}; +/* */ + +// +let originalArea; +document.getElementById('update').addEventListener('input', update); + +function update() { + const ratio = +document.querySelector('input[type=range]').value / 100; + const chart = Object.values(Chart.instances).find(c => c.options._sampleId === uniqueId); + if (!originalArea) { + originalArea = chart.chartArea; + } + const w = originalArea.width * ratio; + const h = originalArea.height * ratio; + chart.resize(w, h); +} + +function autoScaling(ctx) { + const {chart, original} = ctx; + const {width, height} = chart.chartArea; + const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); + if (!original) { + ctx.original = { + fontSize: 48, + size: hypo + }; + return {size: 48}; + } + const {fontSize, size} = original; + const newFontSize = hypo / size * fontSize; + return {size: newFontSize}; +} +// + +module.exports = { + config: config +}; +``` From 8c630dc8a79013b9353b5fa6ea0d7f35001c07ff Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 13 Jan 2023 15:00:04 +0100 Subject: [PATCH 2/3] scaling of padding and borderwidth --- docs/samples/label/autoscaling.md | 48 ++++++++++++++++++------------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/docs/samples/label/autoscaling.md b/docs/samples/label/autoscaling.md index 31888d875..98163b128 100644 --- a/docs/samples/label/autoscaling.md +++ b/docs/samples/label/autoscaling.md @@ -3,7 +3,7 @@ ```js chart-editor -// +// const uniqueId = new Date().getTime(); const DATA_COUNT = 12; @@ -26,10 +26,11 @@ const annotation = { backgroundColor: 'whiteSmoke', borderColor: 'lightGray', borderRadius: 6, - borderWidth: 2, content: ['Annotation', 'to resize'], drawTime: 'afterDraw', - font: (ctx) => autoScaling(ctx) + borderWidth: (ctx) => autoScaling(ctx, 'borderWidth', 2), + font: (ctx) => autoScaling(ctx, 'font', {size: 48}), + padding: (ctx) => autoScaling(ctx, 'padding', 6), }; // @@ -50,7 +51,30 @@ const config = { }; /* */ -// +// +function autoScaling(ctx, option, origValue) { + const {chart, original} = ctx; + const {width, height} = chart.chartArea; + const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); + if (!original) { + ctx.original = {size: hypo}; + ctx.original[option] = origValue; + return origValue; + } else if (!original[option]) { + original[option] = origValue; + return origValue; + } + const size = original.size; + const value = original[option]; + const newValue = hypo / size * (option === 'font' ? value.size : value); + if (option === 'font') { + return {size: newValue}; + } + return newValue; +} +// + +// let originalArea; document.getElementById('update').addEventListener('input', update); @@ -64,22 +88,6 @@ function update() { const h = originalArea.height * ratio; chart.resize(w, h); } - -function autoScaling(ctx) { - const {chart, original} = ctx; - const {width, height} = chart.chartArea; - const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); - if (!original) { - ctx.original = { - fontSize: 48, - size: hypo - }; - return {size: 48}; - } - const {fontSize, size} = original; - const newFontSize = hypo / size * fontSize; - return {size: newFontSize}; -} // module.exports = { From 2f7b099a6eed015488ef2e2d554f62371f586335 Mon Sep 17 00:00:00 2001 From: stockiNail Date: Fri, 13 Jan 2023 17:48:27 +0100 Subject: [PATCH 3/3] improves autoscaling callback --- docs/samples/label/autoscaling.md | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/samples/label/autoscaling.md b/docs/samples/label/autoscaling.md index 98163b128..6e52278c3 100644 --- a/docs/samples/label/autoscaling.md +++ b/docs/samples/label/autoscaling.md @@ -1,6 +1,6 @@ # Auto scaling - + ```js chart-editor // @@ -29,7 +29,7 @@ const annotation = { content: ['Annotation', 'to resize'], drawTime: 'afterDraw', borderWidth: (ctx) => autoScaling(ctx, 'borderWidth', 2), - font: (ctx) => autoScaling(ctx, 'font', {size: 48}), + font: (ctx) => autoScaling(ctx, 'font', 48), padding: (ctx) => autoScaling(ctx, 'padding', 6), }; // @@ -53,24 +53,21 @@ const config = { // function autoScaling(ctx, option, origValue) { - const {chart, original} = ctx; + const {chart} = ctx; const {width, height} = chart.chartArea; const hypo = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); - if (!original) { - ctx.original = {size: hypo}; - ctx.original[option] = origValue; - return origValue; - } else if (!original[option]) { - original[option] = origValue; - return origValue; + let size, value; + if (!ctx.size) { + ctx.size = size = hypo; + value = origValue; + } else { + size = ctx.size; + value = hypo / size * origValue; } - const size = original.size; - const value = original[option]; - const newValue = hypo / size * (option === 'font' ? value.size : value); if (option === 'font') { - return {size: newValue}; + return {size: value}; } - return newValue; + return value; } //