From: Jukka Kurkela Date: Mon, 13 Jul 2020 13:41:42 +0000 (+0300) Subject: Registry bugs (#7608) X-Git-Tag: v3.0.0-beta.2~49 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=b8ad2a6a0a49cedbf8c0e84b716721f963f619e6;p=thirdparty%2FChart.js.git Registry bugs (#7608) * Stop failing early when no scales are registered * Move filler defaults * Move legend defaults * Remove legendHitBoxes from title * Move @kurkle/color to devDependencies --- diff --git a/docs/docs/configuration/legend.md b/docs/docs/configuration/legend.md index 25b1c7da7..3c6c897e0 100644 --- a/docs/docs/configuration/legend.md +++ b/docs/docs/configuration/legend.md @@ -6,7 +6,7 @@ The chart legend displays data about the datasets that are appearing on the char ## Configuration options -The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.legend`. +The legend configuration is passed into the `options.legend` namespace. The global options for the chart legend is defined in `Chart.defaults.plugins.legend`. | Name | Type | Default | Description | ---- | ---- | ------- | ----------- @@ -150,7 +150,7 @@ function(e, legendItem, legend) { Lets say we wanted instead to link the display of the first two datasets. We could change the click handler accordingly. ```javascript -var defaultLegendClickHandler = Chart.defaults.legend.onClick; +var defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick; var newLegendClickHandler = function (e, legendItem, legend) { var index = legendItem.datasetIndex; diff --git a/package-lock.json b/package-lock.json index 6ca9da985..0bd4a4006 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1085,7 +1085,8 @@ "@kurkle/color": { "version": "0.1.9", "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.1.9.tgz", - "integrity": "sha512-K3Aul4Ct6O48yWw0/az5rqk2K76oNXXX3Su32Xkh4SfMFvPt0QEkq0Q6+3icE5S3U2c88WAuq3Vh1Iaz4aUH+w==" + "integrity": "sha512-K3Aul4Ct6O48yWw0/az5rqk2K76oNXXX3Su32Xkh4SfMFvPt0QEkq0Q6+3icE5S3U2c88WAuq3Vh1Iaz4aUH+w==", + "dev": true }, "@rollup/plugin-commonjs": { "version": "13.0.0", diff --git a/package.json b/package.json index 2fed3242c..c50293c03 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "@babel/core": "^7.10.2", "@babel/plugin-transform-object-assign": "^7.8.3", "@babel/preset-env": "^7.10.2", + "@kurkle/color": "^0.1.9", "@rollup/plugin-commonjs": "^13.0.0", "@rollup/plugin-inject": "^4.0.2", "@rollup/plugin-json": "^4.1.0", @@ -80,7 +81,5 @@ "typescript": "^3.9.5", "yargs": "^15.3.1" }, - "dependencies": { - "@kurkle/color": "^0.1.9" - } + "dependencies": {} } diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index 85612b738..74730c45e 100644 --- a/src/core/core.defaults.js +++ b/src/core/core.defaults.js @@ -58,7 +58,7 @@ export class Defaults { this.tooltips = undefined; this.doughnut = undefined; this._routes = {}; - this.scales = undefined; + this.scales = {}; this.controllers = undefined; } /** diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index 3a4d24d17..1ed214f18 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -4,19 +4,12 @@ * @see https://github.com/chartjs/Chart.js/issues/2440#issuecomment-256461897 */ -import defaults from '../core/core.defaults'; import Line from '../elements/element.line'; import {_boundSegment, _boundSegments} from '../helpers/helpers.segment'; import {clipArea, unclipArea} from '../helpers/helpers.canvas'; import {isArray, isFinite, valueOrDefault} from '../helpers/helpers.core'; import {_normalizeAngle} from '../helpers/helpers.math'; -defaults.set('plugins', { - filler: { - propagate: true - } -}); - function getLineByIndex(chart, index) { const meta = chart.getDatasetMeta(index); const visible = meta && chart.isDatasetVisible(index); @@ -458,12 +451,16 @@ export default { const {line, target, scale} = meta; const lineOpts = line.options; const fillOption = lineOpts.fill; - const color = lineOpts.backgroundColor || defaults.color; + const color = lineOpts.backgroundColor; const {above = color, below = color} = fillOption || {}; if (target && line.points.length) { clipArea(ctx, area); doFill(ctx, {line, target, above, below, area, scale}); unclipArea(ctx); } + }, + + defaults: { + propagate: true } }; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 052ffab60..2a5077556 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -2,7 +2,7 @@ import defaults from '../core/core.defaults'; import Element from '../core/core.element'; import layouts from '../core/core.layouts'; import {drawPoint} from '../helpers/helpers.canvas'; -import {callback as call, mergeIf, valueOrDefault, isNullOrUndef} from '../helpers/helpers.core'; +import {callback as call, merge, valueOrDefault, isNullOrUndef} from '../helpers/helpers.core'; import {toFont, toPadding} from '../helpers/helpers.options'; import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../helpers/helpers.rtl'; @@ -10,79 +10,6 @@ import {getRtlAdapter, overrideTextDirection, restoreTextDirection} from '../hel * @typedef { import("../platform/platform.base").IEvent } IEvent */ -defaults.set('legend', { - display: true, - position: 'top', - align: 'center', - fullWidth: true, - reverse: false, - weight: 1000, - - // a callback that will handle - onClick(e, legendItem, legend) { - const index = legendItem.datasetIndex; - const ci = legend.chart; - if (ci.isDatasetVisible(index)) { - ci.hide(index); - legendItem.hidden = true; - } else { - ci.show(index); - legendItem.hidden = false; - } - }, - - onHover: null, - onLeave: null, - - labels: { - boxWidth: 40, - padding: 10, - // Generates labels shown in the legend - // Valid properties to return: - // text : text to display - // fillStyle : fill of coloured box - // strokeStyle: stroke of coloured box - // hidden : if this legend item refers to a hidden item - // lineCap : cap style for line - // lineDash - // lineDashOffset : - // lineJoin : - // lineWidth : - generateLabels(chart) { - const datasets = chart.data.datasets; - const options = chart.options.legend || {}; - const usePointStyle = options.labels && options.labels.usePointStyle; - - return chart._getSortedDatasetMetas().map((meta) => { - const style = meta.controller.getStyle(usePointStyle ? 0 : undefined); - - return { - text: datasets[meta.index].label, - fillStyle: style.backgroundColor, - hidden: !meta.visible, - lineCap: style.borderCapStyle, - lineDash: style.borderDash, - lineDashOffset: style.borderDashOffset, - lineJoin: style.borderJoinStyle, - lineWidth: style.borderWidth, - strokeStyle: style.borderColor, - pointStyle: style.pointStyle, - rotation: style.rotation, - - // Below is extra data used for toggling the datasets - datasetIndex: meta.index - }; - }, this); - } - }, - - title: { - display: false, - position: 'center', - text: '', - } -}); - /** * Helper function to get the box width based on the usePointStyle option * @param {object} labelOpts - the label options on the legend @@ -696,6 +623,10 @@ export class Legend extends Element { } } +function resolveOptions(options) { + return options !== false && merge({}, [defaults.plugins.legend, options]); +} + function createNewLegendAndAttach(chart, legendOpts) { const legend = new Legend({ ctx: chart.ctx, @@ -721,7 +652,7 @@ export default { _element: Legend, beforeInit(chart) { - const legendOpts = chart.options.legend; + const legendOpts = resolveOptions(chart.options.legend); if (legendOpts) { createNewLegendAndAttach(chart, legendOpts); @@ -732,12 +663,10 @@ export default { // This ensures that if the legend position changes (via an option update) // the layout system respects the change. See https://github.com/chartjs/Chart.js/issues/7527 beforeUpdate(chart) { - const legendOpts = chart.options.legend; + const legendOpts = resolveOptions(chart.options.legend); const legend = chart.legend; if (legendOpts) { - mergeIf(legendOpts, defaults.legend); - if (legend) { layouts.configure(chart, legend, legendOpts); legend.options = legendOpts; @@ -764,5 +693,78 @@ export default { if (legend) { legend.handleEvent(e); } + }, + + defaults: { + display: true, + position: 'top', + align: 'center', + fullWidth: true, + reverse: false, + weight: 1000, + + // a callback that will handle + onClick(e, legendItem, legend) { + const index = legendItem.datasetIndex; + const ci = legend.chart; + if (ci.isDatasetVisible(index)) { + ci.hide(index); + legendItem.hidden = true; + } else { + ci.show(index); + legendItem.hidden = false; + } + }, + + onHover: null, + onLeave: null, + + labels: { + boxWidth: 40, + padding: 10, + // Generates labels shown in the legend + // Valid properties to return: + // text : text to display + // fillStyle : fill of coloured box + // strokeStyle: stroke of coloured box + // hidden : if this legend item refers to a hidden item + // lineCap : cap style for line + // lineDash + // lineDashOffset : + // lineJoin : + // lineWidth : + generateLabels(chart) { + const datasets = chart.data.datasets; + const options = chart.options.legend || {}; + const usePointStyle = options.labels && options.labels.usePointStyle; + + return chart._getSortedDatasetMetas().map((meta) => { + const style = meta.controller.getStyle(usePointStyle ? 0 : undefined); + + return { + text: datasets[meta.index].label, + fillStyle: style.backgroundColor, + hidden: !meta.visible, + lineCap: style.borderCapStyle, + lineDash: style.borderDash, + lineDashOffset: style.borderDashOffset, + lineJoin: style.borderJoinStyle, + lineWidth: style.borderWidth, + strokeStyle: style.borderColor, + pointStyle: style.pointStyle, + rotation: style.rotation, + + // Below is extra data used for toggling the datasets + datasetIndex: meta.index + }; + }, this); + } + }, + + title: { + display: false, + position: 'center', + text: '', + } } }; diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index 917e05a98..50d722f10 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -15,7 +15,6 @@ export class Title extends Element { this.ctx = config.ctx; this._margins = undefined; this._padding = undefined; - this.legendHitBoxes = []; // Contains hit boxes for each dataset (in dataset order) this.top = undefined; this.bottom = undefined; this.left = undefined; diff --git a/test/specs/plugin.legend.tests.js b/test/specs/plugin.legend.tests.js index dcb9b1fef..bb1121f87 100644 --- a/test/specs/plugin.legend.tests.js +++ b/test/specs/plugin.legend.tests.js @@ -3,7 +3,7 @@ describe('Legend block tests', function() { describe('auto', jasmine.fixture.specs('plugin.legend')); it('should have the correct default config', function() { - expect(Chart.defaults.legend).toEqual({ + expect(Chart.defaults.plugins.legend).toEqual({ display: true, position: 'top', align: 'center', @@ -628,7 +628,7 @@ describe('Legend block tests', function() { chart.options.legend = {}; chart.update(); expect(chart.legend).not.toBe(undefined); - expect(chart.legend.options).toEqual(jasmine.objectContaining(Chart.defaults.legend)); + expect(chart.legend.options).toEqual(jasmine.objectContaining(Chart.defaults.plugins.legend)); }); });