From: stockiNail Date: Mon, 7 Aug 2023 18:16:20 +0000 (+0200) Subject: Add clip option to scale configuration to allow unclipped scales (#11404) X-Git-Tag: v4.4.0~4 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=79f1a0a9e878b166c1e6c01a1bf5d718fe1e1bc7;p=thirdparty%2FChart.js.git Add clip option to scale configuration to allow unclipped scales (#11404) * Add clip option to scale configuration to allow unclipped scales * add images * fix cc * change name of function --- diff --git a/docs/axes/cartesian/_common.md b/docs/axes/cartesian/_common.md index 1050a85a2..b6b5a8e12 100644 --- a/docs/axes/cartesian/_common.md +++ b/docs/axes/cartesian/_common.md @@ -5,6 +5,7 @@ Namespace: `options.scales[scaleId]` | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `bounds` | `string` | `'ticks'` | Determines the scale bounds. [more...](./index.md#scale-bounds) +| `clip` | `boolean` | `true` | If true, clip the dataset drawing against the size of the scale instead of chart area | `position` | `string` \| `object` | | Position of the axis. [more...](./index.md#axis-position) | `stack` | `string` | | Stack group. Axes at the same `position` with same `stack` are stacked. | `stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group. diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 2ba26c9f3..a54c5a032 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -101,16 +101,21 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) { return e; } -function getDatasetArea(meta) { +function getSizeForArea(scale, chartArea, field) { + return scale.options.clip ? scale[field] : chartArea[field]; +} + +function getDatasetArea(meta, chartArea) { const {xScale, yScale} = meta; if (xScale && yScale) { return { - left: xScale.left, - right: xScale.right, - top: yScale.top, - bottom: yScale.bottom + left: getSizeForArea(xScale, chartArea, 'left'), + right: getSizeForArea(xScale, chartArea, 'right'), + top: getSizeForArea(yScale, chartArea, 'top'), + bottom: getSizeForArea(yScale, chartArea, 'bottom') }; } + return chartArea; } class Chart { @@ -796,7 +801,7 @@ class Chart { const ctx = this.ctx; const clip = meta._clip; const useClip = !clip.disabled; - const area = getDatasetArea(meta) || this.chartArea; + const area = getDatasetArea(meta, this.chartArea); const args = { meta, index: meta.index, diff --git a/src/core/core.scale.defaults.js b/src/core/core.scale.defaults.js index 85f9764ec..b6798e094 100644 --- a/src/core/core.scale.defaults.js +++ b/src/core/core.scale.defaults.js @@ -16,6 +16,8 @@ export function applyScaleDefaults(defaults) { */ bounds: 'ticks', + clip: true, + /** * Addition grace added to max and reduced from min data value. * @since 3.0.0 diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 5cf2d0cc9..eeee5fa08 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -1171,6 +1171,11 @@ export interface CoreScaleOptions { * @default false */ reverse: boolean; + /** + * Clip the dataset drawing against the size of the scale instead of chart area. + * @default true + */ + clip: boolean; /** * The weight used to sort the axis. Higher weights are further away from the chart area. * @default true diff --git a/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js new file mode 100644 index 000000000..8e2df9cd2 --- /dev/null +++ b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.js @@ -0,0 +1,115 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], borderColor: 'red'}, + {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'}, + {data: [{x: 5, y: 1}, {x: 10, y: 2}, {x: 5, y: 3}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'}, + ], + labels: ['tick1', 'tick2', 'tick3'] + }, + options: { + plugins: false, + scales: { + x: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'red' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + }, + max: 7 + }, + x1: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'green' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + }, + max: 7 + }, + x2: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'blue' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + }, + max: 7 + }, + y: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'red' + }, + ticks: { + precision: 0 + } + }, + y1: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'green' + }, + ticks: { + precision: 0 + } + }, + y2: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'blue', + }, + ticks: { + precision: 0 + } + } + } + } + }, + options: { + spriteText: true, + canvas: { + height: 384, + width: 384 + } + } +}; diff --git a/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png new file mode 100644 index 000000000..0f7d3290f Binary files /dev/null and b/test/fixtures/core.layouts/stacked-boxes-max-index-without-clip.png differ diff --git a/test/fixtures/core.layouts/stacked-boxes-max-without-clip.js b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.js new file mode 100644 index 000000000..cdfc3850f --- /dev/null +++ b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.js @@ -0,0 +1,115 @@ +module.exports = { + config: { + type: 'line', + data: { + datasets: [ + {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], borderColor: 'red'}, + {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'}, + {data: [{x: 1, y: 5}, {x: 2, y: 10}, {x: 3, y: 5}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'}, + ], + labels: ['tick1', 'tick2', 'tick3'] + }, + options: { + plugins: false, + scales: { + x: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'red' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + } + }, + x1: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'green' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + } + }, + x2: { + type: 'linear', + position: 'bottom', + stack: '1', + offset: true, + clip: false, + bounds: 'data', + border: { + color: 'blue' + }, + ticks: { + autoSkip: false, + maxRotation: 0, + count: 3 + } + }, + y: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'red' + }, + ticks: { + precision: 0 + }, + max: 7 + }, + y1: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'green' + }, + ticks: { + precision: 0 + }, + max: 7 + }, + y2: { + type: 'linear', + position: 'left', + stack: '1', + offset: true, + clip: false, + border: { + color: 'blue', + }, + ticks: { + precision: 0 + }, + max: 7 + } + } + } + }, + options: { + spriteText: true, + canvas: { + height: 384, + width: 384 + } + } +}; diff --git a/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png new file mode 100644 index 000000000..dc2ab23c8 Binary files /dev/null and b/test/fixtures/core.layouts/stacked-boxes-max-without-clip.png differ