]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Registry bugs (#7608)
authorJukka Kurkela <jukka.kurkela@gmail.com>
Mon, 13 Jul 2020 13:41:42 +0000 (16:41 +0300)
committerGitHub <noreply@github.com>
Mon, 13 Jul 2020 13:41:42 +0000 (09:41 -0400)
* Stop failing early when no scales are registered
* Move filler defaults
* Move legend defaults
* Remove legendHitBoxes from title
* Move @kurkle/color to devDependencies

docs/docs/configuration/legend.md
package-lock.json
package.json
src/core/core.defaults.js
src/plugins/plugin.filler.js
src/plugins/plugin.legend.js
src/plugins/plugin.title.js
test/specs/plugin.legend.tests.js

index 25b1c7da7e1794eb70618d892b56a73d1d053a5b..3c6c897e0fe34825a67252088bfb51d7afdcbf01 100644 (file)
@@ -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;
 
index 6ca9da985cdf6884a711a0ec53953b2009103a13..0bd4a4006a67ee0638c6526f216bd19fff1a3c0d 100644 (file)
     "@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",
index 2fed3242c68bc9d804c74d488b1febebdad63749..c50293c03d69ccfd01b4318ef3df4f215a76559a 100644 (file)
@@ -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": {}
 }
index 85612b738cd253b7a68134ce8a2de758ddb59019..74730c45e6dda51d5b09c1560127e9fbe394cb75 100644 (file)
@@ -58,7 +58,7 @@ export class Defaults {
                this.tooltips = undefined;
                this.doughnut = undefined;
                this._routes = {};
-               this.scales = undefined;
+               this.scales = {};
                this.controllers = undefined;
        }
        /**
index 3a4d24d179a57696f7a8379053f22555b85017ee..1ed214f182cef8a7eeaec0d128d59c5ae47cce50 100644 (file)
@@ -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
        }
 };
index 052ffab6076a65aafafac1419a5f817c5c69cba4..2a507755669b908a942b017b09ff65780c0e92f6 100644 (file)
@@ -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: '',
+               }
        }
 };
index 917e05a988965029775fab2ded9832eb20f1a6ad..50d722f10e1ec148f79762c733888826310d7924 100644 (file)
@@ -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;
index dcb9b1fef539b60fe2df17e6c18092e8924fbdf8..bb1121f87956efe32e5943d55e43442dc2bbdcb1 100644 (file)
@@ -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));
                });
        });