fix: treeshaking (#10504)

* fix: treeshaking
* refactor: DatasetController.datasetElementType and DatasetController.dataElementType as static props

.eslintrc.yml

@@ -13,7 +13,7 @@ env:
   node: true
 
 parserOptions:
-  ecmaVersion: 2021
+  ecmaVersion: 2022
   sourceType: module
   ecmaFeatures:
     impliedStrict: true

.github/workflows/compressed-size.yml

@@ -20,3 +20,11 @@ jobs:
     - uses: preactjs/compressed-size-action@v2
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
+
+  size-limit:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: andresz1/size-limit-action@master
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}

.size-limit.js

@@ -0,0 +1,55 @@
+function modifyWebpackConfig(config) {
+  config.target = 'web';
+
+  return config;
+}
+
+module.exports = [
+  {
+    path: 'dist/chart.js',
+    limit: '94.8 KB',
+    webpack: false,
+    running: false
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '75 KB',
+    webpack: false,
+    running: false
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '34 KB',
+    import: '{ Chart }',
+    running: false,
+    modifyWebpackConfig
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '19.5 KB',
+    import: '{ BarController, BubbleController, DoughnutController, LineController, PolarAreaController, PieController, RadarController, ScatterController }',
+    running: false,
+    modifyWebpackConfig
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '14 KB',
+    import: '{ ArcElement, LineElement, PointElement, BarElement }',
+    running: false,
+    modifyWebpackConfig
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '27 KB',
+    import: '{ Decimation, Filler, Legend, SubTitle, Title, Tooltip }',
+    running: false,
+    modifyWebpackConfig
+  },
+  {
+    path: 'dist/chart.esm.js',
+    limit: '22 KB',
+    import: '{ CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale }',
+    running: false,
+    modifyWebpackConfig
+  }
+]

docs/.vuepress/config.js

@@ -98,6 +98,8 @@ module.exports = {
         }
       }
     })
+
+    config.module.rule('js').test(/\.m?jsx?$/)
   },
   markdown: {
     extendMarkdown: md => {

package.json

@@ -42,6 +42,7 @@
         "lint-tsc": "tsc",
         "lint-types": "eslint \"types/**/*.ts\" && node -r esm types/tests/autogen.js && tsc -p types/tests/",
         "lint": "concurrently \"npm:lint-*\"",
+        "test-size": "size-limit",
         "test": "npm run lint && npm run test-ci",
         "test-ci": "concurrently \"npm:test-ci-*\"",
         "test-ci-karma": "cross-env NODE_ENV=test karma start --auto-watch --single-run --coverage --grep",
@@ -54,6 +55,8 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
+        "@size-limit/preset-big-lib": "^7.0.8",
+        "@types/estree": "^1.0.0",
         "@types/offscreencanvas": "^2019.6.4",
         "@typescript-eslint/eslint-plugin": "^5.8.0",
         "@typescript-eslint/parser": "^5.8.0",
@@ -95,6 +98,7 @@
         "rollup-plugin-cleanup": "^3.2.1",
         "rollup-plugin-istanbul": "^3.0.0",
         "rollup-plugin-terser": "^7.0.2",
+        "size-limit": "^7.0.8",
         "typedoc": "^0.22.10",
         "typedoc-plugin-markdown": "^3.6.1",
         "typescript": "^4.3.5",

rollup.config.js

@@ -24,6 +24,7 @@ module.exports = [
       json(),
       resolve(),
       cleanup({
+        comments: ['some', /__PURE__/],
         sourcemap: true
       }),
       analyze({summaryOnly: true})
@@ -92,6 +93,7 @@ module.exports = [
       json(),
       resolve(),
       cleanup({
+        comments: ['some', /__PURE__/],
         sourcemap: true
       }),
     ],

src/controllers/controller.bar.js

@@ -257,6 +257,47 @@ function setInflateAmount(properties, {inflateAmount}, ratio) {
 
 export default class BarController extends DatasetController {
 
+  static id = 'bar';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: false,
+    dataElementType: 'bar',
+
+    categoryPercentage: 0.8,
+    barPercentage: 0.9,
+    grouped: true,
+
+    animations: {
+      numbers: {
+        type: 'number',
+        properties: ['x', 'y', 'base', 'width', 'height']
+      }
+    }
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    scales: {
+      _index_: {
+        type: 'category',
+        offset: true,
+        grid: {
+          offset: true
+        }
+      },
+      _value_: {
+        type: 'linear',
+        beginAtZero: true,
+      }
+    }
+  };
+
+
   /**
 	 * Overriding primitive data parsing since we support mixed primitive/array
 	 * data for float bars
@@ -608,43 +649,3 @@ export default class BarController extends DatasetController {
   }
 
 }
-
-BarController.id = 'bar';
-
-/**
- * @type {any}
- */
-BarController.defaults = {
-  datasetElementType: false,
-  dataElementType: 'bar',
-
-  categoryPercentage: 0.8,
-  barPercentage: 0.9,
-  grouped: true,
-
-  animations: {
-    numbers: {
-      type: 'number',
-      properties: ['x', 'y', 'base', 'width', 'height']
-    }
-  }
-};
-
-/**
- * @type {any}
- */
-BarController.overrides = {
-  scales: {
-    _index_: {
-      type: 'category',
-      offset: true,
-      grid: {
-        offset: true
-      }
-    },
-    _value_: {
-      type: 'linear',
-      beginAtZero: true,
-    }
-  }
-};

src/controllers/controller.bubble.js

@@ -2,6 +2,48 @@ import DatasetController from '../core/core.datasetController';
 import {valueOrDefault} from '../helpers/helpers.core';
 
 export default class BubbleController extends DatasetController {
+
+  static id = 'bubble';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: false,
+    dataElementType: 'point',
+
+    animations: {
+      numbers: {
+        type: 'number',
+        properties: ['x', 'y', 'borderWidth', 'radius']
+      }
+    }
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    scales: {
+      x: {
+        type: 'linear'
+      },
+      y: {
+        type: 'linear'
+      }
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          title() {
+            // Title doesn't make sense for scatter since we format the data as a point
+            return '';
+          }
+        }
+      }
+    }
+  };
+
   initialize() {
     this.enableOptionSharing = true;
     super.initialize();
@@ -134,44 +176,3 @@ export default class BubbleController extends DatasetController {
     return values;
   }
 }
-
-BubbleController.id = 'bubble';
-
-/**
- * @type {any}
- */
-BubbleController.defaults = {
-  datasetElementType: false,
-  dataElementType: 'point',
-
-  animations: {
-    numbers: {
-      type: 'number',
-      properties: ['x', 'y', 'borderWidth', 'radius']
-    }
-  }
-};
-
-/**
- * @type {any}
- */
-BubbleController.overrides = {
-  scales: {
-    x: {
-      type: 'linear'
-    },
-    y: {
-      type: 'linear'
-    }
-  },
-  plugins: {
-    tooltip: {
-      callbacks: {
-        title() {
-          // Title doesn't make sense for scatter since we format the data as a point
-          return '';
-        }
-      }
-    }
-  }
-};

src/controllers/controller.doughnut.js

@@ -36,6 +36,115 @@ function getRatioAndOffset(rotation, circumference, cutout) {
 
 export default class DoughnutController extends DatasetController {
 
+  static id = 'doughnut';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: false,
+    dataElementType: 'arc',
+    animation: {
+      // Boolean - Whether we animate the rotation of the Doughnut
+      animateRotate: true,
+      // Boolean - Whether we animate scaling the Doughnut from the centre
+      animateScale: false
+    },
+    animations: {
+      numbers: {
+        type: 'number',
+        properties: ['circumference', 'endAngle', 'innerRadius', 'outerRadius', 'startAngle', 'x', 'y', 'offset', 'borderWidth', 'spacing']
+      },
+    },
+    // The percentage of the chart that we cut out of the middle.
+    cutout: '50%',
+
+    // The rotation of the chart, where the first data arc begins.
+    rotation: 0,
+
+    // The total circumference of the chart.
+    circumference: 360,
+
+    // The outr radius of the chart
+    radius: '100%',
+
+    // Spacing between arcs
+    spacing: 0,
+
+    indexAxis: 'r',
+  };
+
+  static descriptors = {
+    _scriptable: (name) => name !== 'spacing',
+    _indexable: (name) => name !== 'spacing',
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    aspectRatio: 1,
+
+    // Need to override these to give a nice default
+    plugins: {
+      legend: {
+        labels: {
+          generateLabels(chart) {
+            const data = chart.data;
+            if (data.labels.length && data.datasets.length) {
+              const {labels: {pointStyle}} = chart.legend.options;
+
+              return data.labels.map((label, i) => {
+                const meta = chart.getDatasetMeta(0);
+                const style = meta.controller.getStyle(i);
+
+                return {
+                  text: label,
+                  fillStyle: style.backgroundColor,
+                  strokeStyle: style.borderColor,
+                  lineWidth: style.borderWidth,
+                  pointStyle: pointStyle,
+                  hidden: !chart.getDataVisibility(i),
+
+                  // Extra data used for toggling the correct item
+                  index: i
+                };
+              });
+            }
+            return [];
+          }
+        },
+
+        onClick(e, legendItem, legend) {
+          legend.chart.toggleDataVisibility(legendItem.index);
+          legend.chart.update();
+        }
+      },
+      tooltip: {
+        callbacks: {
+          title() {
+            return '';
+          },
+          label(tooltipItem) {
+            let dataLabel = tooltipItem.label;
+            const value = ': ' + tooltipItem.formattedValue;
+
+            if (isArray(dataLabel)) {
+              // show value on first line of multiline label
+              // need to clone because we are changing the value
+              dataLabel = dataLabel.slice();
+              dataLabel[0] += value;
+            } else {
+              dataLabel += value;
+            }
+
+            return dataLabel;
+          }
+        }
+      }
+    }
+  };
+
   constructor(chart, datasetIndex) {
     super(chart, datasetIndex);
 
@@ -306,112 +415,3 @@ export default class DoughnutController extends DatasetController {
     return this._getRingWeightOffset(this.chart.data.datasets.length) || 1;
   }
 }
-
-DoughnutController.id = 'doughnut';
-
-/**
- * @type {any}
- */
-DoughnutController.defaults = {
-  datasetElementType: false,
-  dataElementType: 'arc',
-  animation: {
-    // Boolean - Whether we animate the rotation of the Doughnut
-    animateRotate: true,
-    // Boolean - Whether we animate scaling the Doughnut from the centre
-    animateScale: false
-  },
-  animations: {
-    numbers: {
-      type: 'number',
-      properties: ['circumference', 'endAngle', 'innerRadius', 'outerRadius', 'startAngle', 'x', 'y', 'offset', 'borderWidth', 'spacing']
-    },
-  },
-  // The percentage of the chart that we cut out of the middle.
-  cutout: '50%',
-
-  // The rotation of the chart, where the first data arc begins.
-  rotation: 0,
-
-  // The total circumference of the chart.
-  circumference: 360,
-
-  // The outr radius of the chart
-  radius: '100%',
-
-  // Spacing between arcs
-  spacing: 0,
-
-  indexAxis: 'r',
-};
-
-DoughnutController.descriptors = {
-  _scriptable: (name) => name !== 'spacing',
-  _indexable: (name) => name !== 'spacing',
-};
-
-/**
- * @type {any}
- */
-DoughnutController.overrides = {
-  aspectRatio: 1,
-
-  // Need to override these to give a nice default
-  plugins: {
-    legend: {
-      labels: {
-        generateLabels(chart) {
-          const data = chart.data;
-          if (data.labels.length && data.datasets.length) {
-            const {labels: {pointStyle}} = chart.legend.options;
-
-            return data.labels.map((label, i) => {
-              const meta = chart.getDatasetMeta(0);
-              const style = meta.controller.getStyle(i);
-
-              return {
-                text: label,
-                fillStyle: style.backgroundColor,
-                strokeStyle: style.borderColor,
-                lineWidth: style.borderWidth,
-                pointStyle: pointStyle,
-                hidden: !chart.getDataVisibility(i),
-
-                // Extra data used for toggling the correct item
-                index: i
-              };
-            });
-          }
-          return [];
-        }
-      },
-
-      onClick(e, legendItem, legend) {
-        legend.chart.toggleDataVisibility(legendItem.index);
-        legend.chart.update();
-      }
-    },
-    tooltip: {
-      callbacks: {
-        title() {
-          return '';
-        },
-        label(tooltipItem) {
-          let dataLabel = tooltipItem.label;
-          const value = ': ' + tooltipItem.formattedValue;
-
-          if (isArray(dataLabel)) {
-            // show value on first line of multiline label
-            // need to clone because we are changing the value
-            dataLabel = dataLabel.slice();
-            dataLabel[0] += value;
-          } else {
-            dataLabel += value;
-          }
-
-          return dataLabel;
-        }
-      }
-    }
-  }
-};

src/controllers/controller.line.js

@@ -5,6 +5,33 @@ import {_getStartAndCountOfVisiblePoints, _scaleRangesChanged} from '../helpers/
 
 export default class LineController extends DatasetController {
 
+  static id = 'line';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: 'line',
+    dataElementType: 'point',
+
+    showLine: true,
+    spanGaps: false,
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    scales: {
+      _index_: {
+        type: 'category',
+      },
+      _value_: {
+        type: 'linear',
+      },
+    }
+  };
+
   initialize() {
     this.enableOptionSharing = true;
     this.supportsDecimation = true;
@@ -106,30 +133,3 @@ export default class LineController extends DatasetController {
     super.draw();
   }
 }
-
-LineController.id = 'line';
-
-/**
- * @type {any}
- */
-LineController.defaults = {
-  datasetElementType: 'line',
-  dataElementType: 'point',
-
-  showLine: true,
-  spanGaps: false,
-};
-
-/**
- * @type {any}
- */
-LineController.overrides = {
-  scales: {
-    _index_: {
-      type: 'category',
-    },
-    _value_: {
-      type: 'linear',
-    },
-  }
-};

src/controllers/controller.pie.js

@@ -3,23 +3,22 @@ import DoughnutController from './controller.doughnut';
 // Pie charts are Doughnut chart with different defaults
 export default class PieController extends DoughnutController {
 
+  static id = 'pie';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    // The percentage of the chart that we cut out of the middle.
+    cutout: 0,
+
+    // The rotation of the chart, where the first data arc begins.
+    rotation: 0,
+
+    // The total circumference of the chart.
+    circumference: 360,
+
+    // The outr radius of the chart
+    radius: '100%'
+  };
 }
-
-PieController.id = 'pie';
-
-/**
- * @type {any}
- */
-PieController.defaults = {
-  // The percentage of the chart that we cut out of the middle.
-  cutout: 0,
-
-  // The rotation of the chart, where the first data arc begins.
-  rotation: 0,
-
-  // The total circumference of the chart.
-  circumference: 360,
-
-  // The outr radius of the chart
-  radius: '100%'
-};

src/controllers/controller.polarArea.js

@@ -3,6 +3,99 @@ import {toRadians, PI, formatNumber, _parseObjectDataRadialScale} from '../helpe
 
 export default class PolarAreaController extends DatasetController {
 
+  static id = 'polarArea';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    dataElementType: 'arc',
+    animation: {
+      animateRotate: true,
+      animateScale: true
+    },
+    animations: {
+      numbers: {
+        type: 'number',
+        properties: ['x', 'y', 'startAngle', 'endAngle', 'innerRadius', 'outerRadius']
+      },
+    },
+    indexAxis: 'r',
+    startAngle: 0,
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    aspectRatio: 1,
+
+    plugins: {
+      legend: {
+        labels: {
+          generateLabels(chart) {
+            const data = chart.data;
+            if (data.labels.length && data.datasets.length) {
+              const {labels: {pointStyle}} = chart.legend.options;
+
+              return data.labels.map((label, i) => {
+                const meta = chart.getDatasetMeta(0);
+                const style = meta.controller.getStyle(i);
+
+                return {
+                  text: label,
+                  fillStyle: style.backgroundColor,
+                  strokeStyle: style.borderColor,
+                  lineWidth: style.borderWidth,
+                  pointStyle: pointStyle,
+                  hidden: !chart.getDataVisibility(i),
+
+                  // Extra data used for toggling the correct item
+                  index: i
+                };
+              });
+            }
+            return [];
+          }
+        },
+
+        onClick(e, legendItem, legend) {
+          legend.chart.toggleDataVisibility(legendItem.index);
+          legend.chart.update();
+        }
+      },
+
+      // Need to override these to give a nice default
+      tooltip: {
+        callbacks: {
+          title() {
+            return '';
+          },
+          label(context) {
+            return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
+          }
+        }
+      }
+    },
+
+    scales: {
+      r: {
+        type: 'radialLinear',
+        angleLines: {
+          display: false
+        },
+        beginAtZero: true,
+        grid: {
+          circular: true
+        },
+        pointLabels: {
+          display: false
+        },
+        startAngle: 0
+      }
+    }
+  };
+
   constructor(chart, datasetIndex) {
     super(chart, datasetIndex);
 
@@ -143,96 +236,3 @@ export default class PolarAreaController extends DatasetController {
       : 0;
   }
 }
-
-PolarAreaController.id = 'polarArea';
-
-/**
- * @type {any}
- */
-PolarAreaController.defaults = {
-  dataElementType: 'arc',
-  animation: {
-    animateRotate: true,
-    animateScale: true
-  },
-  animations: {
-    numbers: {
-      type: 'number',
-      properties: ['x', 'y', 'startAngle', 'endAngle', 'innerRadius', 'outerRadius']
-    },
-  },
-  indexAxis: 'r',
-  startAngle: 0,
-};
-
-/**
- * @type {any}
- */
-PolarAreaController.overrides = {
-  aspectRatio: 1,
-
-  plugins: {
-    legend: {
-      labels: {
-        generateLabels(chart) {
-          const data = chart.data;
-          if (data.labels.length && data.datasets.length) {
-            const {labels: {pointStyle}} = chart.legend.options;
-
-            return data.labels.map((label, i) => {
-              const meta = chart.getDatasetMeta(0);
-              const style = meta.controller.getStyle(i);
-
-              return {
-                text: label,
-                fillStyle: style.backgroundColor,
-                strokeStyle: style.borderColor,
-                lineWidth: style.borderWidth,
-                pointStyle: pointStyle,
-                hidden: !chart.getDataVisibility(i),
-
-                // Extra data used for toggling the correct item
-                index: i
-              };
-            });
-          }
-          return [];
-        }
-      },
-
-      onClick(e, legendItem, legend) {
-        legend.chart.toggleDataVisibility(legendItem.index);
-        legend.chart.update();
-      }
-    },
-
-    // Need to override these to give a nice default
-    tooltip: {
-      callbacks: {
-        title() {
-          return '';
-        },
-        label(context) {
-          return context.chart.data.labels[context.dataIndex] + ': ' + context.formattedValue;
-        }
-      }
-    }
-  },
-
-  scales: {
-    r: {
-      type: 'radialLinear',
-      angleLines: {
-        display: false
-      },
-      beginAtZero: true,
-      grid: {
-        circular: true
-      },
-      pointLabels: {
-        display: false
-      },
-      startAngle: 0
-    }
-  }
-};

src/controllers/controller.radar.js

@@ -3,6 +3,36 @@ import {_parseObjectDataRadialScale} from '../helpers/index';
 
 export default class RadarController extends DatasetController {
 
+  static id = 'radar';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: 'line',
+    dataElementType: 'point',
+    indexAxis: 'r',
+    showLine: true,
+    elements: {
+      line: {
+        fill: 'start'
+      }
+    },
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+    aspectRatio: 1,
+
+    scales: {
+      r: {
+        type: 'radialLinear',
+      }
+    }
+  };
+
   /**
 	 * @protected
 	 */
@@ -72,33 +102,3 @@ export default class RadarController extends DatasetController {
     }
   }
 }
-
-RadarController.id = 'radar';
-
-/**
- * @type {any}
- */
-RadarController.defaults = {
-  datasetElementType: 'line',
-  dataElementType: 'point',
-  indexAxis: 'r',
-  showLine: true,
-  elements: {
-    line: {
-      fill: 'start'
-    }
-  },
-};
-
-/**
- * @type {any}
- */
-RadarController.overrides = {
-  aspectRatio: 1,
-
-  scales: {
-    r: {
-      type: 'radialLinear',
-    }
-  }
-};

src/controllers/controller.scatter.js

@@ -2,9 +2,53 @@ import DatasetController from '../core/core.datasetController';
 import {isNullOrUndef} from '../helpers';
 import {isNumber} from '../helpers/helpers.math';
 import {_getStartAndCountOfVisiblePoints, _scaleRangesChanged} from '../helpers/helpers.extras';
-import registry from '../core/core.registry';
 
 export default class ScatterController extends DatasetController {
+
+  static id = 'scatter';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    datasetElementType: false,
+    dataElementType: 'point',
+    showLine: false,
+    fill: false
+  };
+
+  /**
+   * @type {any}
+   */
+  static overrides = {
+
+    interaction: {
+      mode: 'point'
+    },
+
+    plugins: {
+      tooltip: {
+        callbacks: {
+          title() {
+            return '';     // doesn't make sense for scatter since data are formatted as a point
+          },
+          label(item) {
+            return '(' + item.label + ', ' + item.formattedValue + ')';
+          }
+        }
+      }
+    },
+
+    scales: {
+      x: {
+        type: 'linear'
+      },
+      y: {
+        type: 'linear'
+      }
+    }
+  };
+
   update(mode) {
     const meta = this._cachedMeta;
     const {data: points = []} = meta;
@@ -46,7 +90,7 @@ export default class ScatterController extends DatasetController {
     const {showLine} = this.options;
 
     if (!this.datasetElementType && showLine) {
-      this.datasetElementType = registry.getElement('line');
+      this.datasetElementType = this.chart.registry.getElement('line');
     }
 
     super.addElements();
@@ -121,47 +165,3 @@ export default class ScatterController extends DatasetController {
     return Math.max(border, firstPoint, lastPoint) / 2;
   }
 }
-
-ScatterController.id = 'scatter';
-
-/**
- * @type {any}
- */
-ScatterController.defaults = {
-  datasetElementType: false,
-  dataElementType: 'point',
-  showLine: false,
-  fill: false
-};
-
-/**
- * @type {any}
- */
-ScatterController.overrides = {
-
-  interaction: {
-    mode: 'point'
-  },
-
-  plugins: {
-    tooltip: {
-      callbacks: {
-        title() {
-          return '';     // doesn't make sense for scatter since data are formatted as a point
-        },
-        label(item) {
-          return '(' + item.label + ', ' + item.formattedValue + ')';
-        }
-      }
-    }
-  },
-
-  scales: {
-    x: {
-      type: 'linear'
-    },
-    y: {
-      type: 'linear'
-    }
-  }
-};

src/core/core.adapters.js

@@ -30,6 +30,10 @@ function abstract() {
 
 export class DateAdapter {
 
+  static override(members) {
+    Object.assign(DateAdapter.prototype, members);
+  }
+
   constructor(options) {
     this.options = options || {};
   }
@@ -116,10 +120,6 @@ export class DateAdapter {
 
 }
 
-DateAdapter.override = function(members) {
-  Object.assign(DateAdapter.prototype, members);
-};
-
 export default {
   _date: DateAdapter
 };

src/core/core.animator.js

@@ -211,4 +211,4 @@ export class Animator {
 }
 
 // singleton instance
-export default new Animator();
+export default /* #__PURE__ */ new Animator();

src/core/core.controller.js

@@ -103,6 +103,23 @@ function determineLastEvent(e, lastEvent, inChartArea, isClick) {
 
 class Chart {
 
+  static defaults = defaults;
+  static instances = instances;
+  static overrides = overrides;
+  static registry = registry;
+  static version = version;
+  static getChart = getChart;
+
+  static register(...items) {
+    registry.add(...items);
+    invalidatePlugins();
+  }
+
+  static unregister(...items) {
+    registry.remove(...items);
+    invalidatePlugins();
+  }
+
   // eslint-disable-next-line max-statements
   constructor(item, userConfig) {
     const config = this.config = new Config(userConfig);
@@ -210,6 +227,10 @@ class Chart {
     this.config.options = options;
   }
 
+  get registry() {
+    return registry;
+  }
+
   /**
 	 * @private
 	 */
@@ -421,7 +442,7 @@ class Chart {
       } else {
         const ControllerClass = registry.getController(type);
         const {datasetElementType, dataElementType} = defaults.datasets[type];
-        Object.assign(ControllerClass.prototype, {
+        Object.assign(ControllerClass, {
           dataElementType: registry.getElement(dataElementType),
           datasetElementType: datasetElementType && registry.getElement(datasetElementType)
         });
@@ -1241,50 +1262,8 @@ class Chart {
 }
 
 // @ts-ignore
-const invalidatePlugins = () => each(Chart.instances, (chart) => chart._plugins.invalidate());
-
-const enumerable = true;
-
-// These are available to both, UMD and ESM packages. Read Only!
-Object.defineProperties(Chart, {
-  defaults: {
-    enumerable,
-    value: defaults
-  },
-  instances: {
-    enumerable,
-    value: instances
-  },
-  overrides: {
-    enumerable,
-    value: overrides
-  },
-  registry: {
-    enumerable,
-    value: registry
-  },
-  version: {
-    enumerable,
-    value: version
-  },
-  getChart: {
-    enumerable,
-    value: getChart
-  },
-  register: {
-    enumerable,
-    value: (...items) => {
-      registry.add(...items);
-      invalidatePlugins();
-    }
-  },
-  unregister: {
-    enumerable,
-    value: (...items) => {
-      registry.remove(...items);
-      invalidatePlugins();
-    }
-  }
-});
+function invalidatePlugins() {
+  return each(Chart.instances, (chart) => chart._plugins.invalidate());
+}
 
 export default Chart;

src/core/core.datasetController.js

@@ -217,6 +217,21 @@ const createStack = (canStack, meta, chart) => canStack && !meta.hidden && meta.
 
 export default class DatasetController {
 
+  /**
+   * @type {any}
+   */
+  static defaults = {};
+
+  /**
+   * Element type used to generate a meta dataset (e.g. Chart.element.LineElement).
+   */
+  static datasetElementType = null;
+
+  /**
+   * Element type used to generate a meta data (e.g. Chart.element.PointElement).
+   */
+  static dataElementType = null;
+
   /**
 	 * @param {Chart} chart
 	 * @param {number} datasetIndex
@@ -240,6 +255,8 @@ export default class DatasetController {
     this.supportsDecimation = false;
     this.$context = undefined;
     this._syncList = [];
+    this.datasetElementType = new.target.datasetElementType;
+    this.dataElementType = new.target.dataElementType;
 
     this.initialize();
   }
@@ -1051,18 +1068,3 @@ export default class DatasetController {
     this._sync(['_insertElements', 0, arguments.length]);
   }
 }
-
-/**
- * @type {any}
- */
-DatasetController.defaults = {};
-
-/**
- * Element type used to generate a meta dataset (e.g. Chart.element.LineElement).
- */
-DatasetController.prototype.datasetElementType = null;
-
-/**
- * Element type used to generate a meta data (e.g. Chart.element.PointElement).
- */
-DatasetController.prototype.dataElementType = null;

src/core/core.defaults.js

@@ -154,7 +154,7 @@ export class Defaults {
 }
 
 // singleton instance
-export default new Defaults({
+export default /* #__PURE__ */ new Defaults({
   _scriptable: (name) => !name.startsWith('on'),
   _indexable: (name) => name !== 'events',
   hover: {

src/core/core.element.js

@@ -2,6 +2,16 @@ import {isNumber} from '../helpers/helpers.math';
 
 export default class Element {
 
+  /**
+   * @type any
+   */
+  static defaults = {};
+
+  /**
+   * @type any
+   */
+  static defaultRoutes = undefined;
+
   constructor() {
     this.x = undefined;
     this.y = undefined;
@@ -41,13 +51,3 @@ export default class Element {
     return ret;
   }
 }
-
-/**
- * @type any
- */
-Element.defaults = {};
-
-/**
- * @type any
- */
-Element.defaultRoutes = undefined;

src/core/core.registry.js

@@ -183,4 +183,4 @@ export class Registry {
 }
 
 // singleton instance
-export default new Registry();
+export default /* #__PURE__ */ new Registry();

src/elements/element.arc.js

@@ -261,6 +261,30 @@ function drawBorder(ctx, element, offset, spacing, endAngle, circular) {
 
 export default class ArcElement extends Element {
 
+  static id = 'arc';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    borderAlign: 'center',
+    borderColor: '#fff',
+    borderJoinStyle: undefined,
+    borderRadius: 0,
+    borderWidth: 2,
+    offset: 0,
+    spacing: 0,
+    angle: undefined,
+    circular: true,
+  };
+
+  /**
+   * @type {any}
+   */
+  static defaultRoutes = {
+    backgroundColor: 'backgroundColor'
+  };
+
   constructor(cfg) {
     super();
 
@@ -358,27 +382,3 @@ export default class ArcElement extends Element {
     ctx.restore();
   }
 }
-
-ArcElement.id = 'arc';
-
-/**
- * @type {any}
- */
-ArcElement.defaults = {
-  borderAlign: 'center',
-  borderColor: '#fff',
-  borderJoinStyle: undefined,
-  borderRadius: 0,
-  borderWidth: 2,
-  offset: 0,
-  spacing: 0,
-  angle: undefined,
-  circular: true,
-};
-
-/**
- * @type {any}
- */
-ArcElement.defaultRoutes = {
-  backgroundColor: 'backgroundColor'
-};

src/elements/element.bar.js

@@ -138,6 +138,27 @@ function inflateRect(rect, amount, refRect = {}) {
 
 export default class BarElement extends Element {
 
+  static id = 'bar';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    borderSkipped: 'start',
+    borderWidth: 0,
+    borderRadius: 0,
+    inflateAmount: 'auto',
+    pointStyle: undefined
+  };
+
+  /**
+   * @type {any}
+   */
+  static defaultRoutes = {
+    backgroundColor: 'backgroundColor',
+    borderColor: 'borderColor'
+  };
+
   constructor(cfg) {
     super();
 
@@ -201,24 +222,3 @@ export default class BarElement extends Element {
     return axis === 'x' ? this.width / 2 : this.height / 2;
   }
 }
-
-BarElement.id = 'bar';
-
-/**
- * @type {any}
- */
-BarElement.defaults = {
-  borderSkipped: 'start',
-  borderWidth: 0,
-  borderRadius: 0,
-  inflateAmount: 'auto',
-  pointStyle: undefined
-};
-
-/**
- * @type {any}
- */
-BarElement.defaultRoutes = {
-  backgroundColor: 'backgroundColor',
-  borderColor: 'borderColor'
-};

src/elements/element.line.js

@@ -239,6 +239,40 @@ function draw(ctx, line, start, count) {
 
 export default class LineElement extends Element {
 
+  static id = 'line';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    borderCapStyle: 'butt',
+    borderDash: [],
+    borderDashOffset: 0,
+    borderJoinStyle: 'miter',
+    borderWidth: 3,
+    capBezierPoints: true,
+    cubicInterpolationMode: 'default',
+    fill: false,
+    spanGaps: false,
+    stepped: false,
+    tension: 0,
+  };
+
+  /**
+   * @type {any}
+   */
+  static defaultRoutes = {
+    backgroundColor: 'backgroundColor',
+    borderColor: 'borderColor'
+  };
+
+
+  static descriptors = {
+    _scriptable: true,
+    _indexable: (name) => name !== 'borderDash' && name !== 'fill',
+  };
+
+
   constructor(cfg) {
     super();
 
@@ -406,36 +440,3 @@ export default class LineElement extends Element {
     }
   }
 }
-
-LineElement.id = 'line';
-
-/**
- * @type {any}
- */
-LineElement.defaults = {
-  borderCapStyle: 'butt',
-  borderDash: [],
-  borderDashOffset: 0,
-  borderJoinStyle: 'miter',
-  borderWidth: 3,
-  capBezierPoints: true,
-  cubicInterpolationMode: 'default',
-  fill: false,
-  spanGaps: false,
-  stepped: false,
-  tension: 0,
-};
-
-/**
- * @type {any}
- */
-LineElement.defaultRoutes = {
-  backgroundColor: 'backgroundColor',
-  borderColor: 'borderColor'
-};
-
-
-LineElement.descriptors = {
-  _scriptable: true,
-  _indexable: (name) => name !== 'borderDash' && name !== 'fill',
-};

src/elements/element.point.js

@@ -10,6 +10,29 @@ function inRange(el, pos, axis, useFinalPosition) {
 
 export default class PointElement extends Element {
 
+  static id = 'point';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    borderWidth: 1,
+    hitRadius: 1,
+    hoverBorderWidth: 1,
+    hoverRadius: 4,
+    pointStyle: 'circle',
+    radius: 3,
+    rotation: 0
+  };
+
+  /**
+   * @type {any}
+   */
+  static defaultRoutes = {
+    backgroundColor: 'backgroundColor',
+    borderColor: 'borderColor'
+  };
+
   constructor(cfg) {
     super();
 
@@ -68,26 +91,3 @@ export default class PointElement extends Element {
     return options.radius + options.hitRadius;
   }
 }
-
-PointElement.id = 'point';
-
-/**
- * @type {any}
- */
-PointElement.defaults = {
-  borderWidth: 1,
-  hitRadius: 1,
-  hoverBorderWidth: 1,
-  hoverRadius: 4,
-  pointStyle: 'circle',
-  radius: 3,
-  rotation: 0
-};
-
-/**
- * @type {any}
- */
-PointElement.defaultRoutes = {
-  backgroundColor: 'backgroundColor',
-  borderColor: 'borderColor'
-};

src/plugins/plugin.tooltip.js

@@ -351,6 +351,12 @@ function overrideCallbacks(callbacks, context) {
 }
 
 export class Tooltip extends Element {
+
+  /**
+   * @namespace Chart.Tooltip.positioners
+   */
+  static positioners = positioners;
+
   constructor(config) {
     super();
 
@@ -1104,11 +1110,6 @@ export class Tooltip extends Element {
   }
 }
 
-/**
- * @namespace Chart.Tooltip.positioners
- */
-Tooltip.positioners = positioners;
-
 export default {
   id: 'tooltip',
   _element: Tooltip,

src/scales/scale.category.js

@@ -22,8 +22,28 @@ function findOrAddLabel(labels, raw, index, addedLabels) {
 
 const validIndex = (index, max) => index === null ? null : _limitValue(Math.round(index), 0, max);
 
+function _getLabelForValue(value) {
+  const labels = this.getLabels();
+
+  if (value >= 0 && value < labels.length) {
+    return labels[value];
+  }
+  return value;
+}
+
 export default class CategoryScale extends Scale {
 
+  static id = 'category';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    ticks: {
+      callback: _getLabelForValue
+    }
+  };
+
   constructor(cfg) {
     super(cfg);
 
@@ -94,12 +114,7 @@ export default class CategoryScale extends Scale {
   }
 
   getLabelForValue(value) {
-    const labels = this.getLabels();
-
-    if (value >= 0 && value < labels.length) {
-      return labels[value];
-    }
-    return value;
+    return _getLabelForValue.call(this, value);
   }
 
   /**
@@ -141,14 +156,3 @@ export default class CategoryScale extends Scale {
     return this.bottom;
   }
 }
-
-CategoryScale.id = 'category';
-
-/**
- * @type {any}
- */
-CategoryScale.defaults = {
-  ticks: {
-    callback: CategoryScale.prototype.getLabelForValue
-  }
-};

src/scales/scale.linear.js

@@ -5,6 +5,18 @@ import {toRadians} from '../helpers';
 
 export default class LinearScale extends LinearScaleBase {
 
+  static id = 'linear';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    ticks: {
+      callback: Ticks.formatters.numeric
+    }
+  };
+
+
   determineDataLimits() {
     const {min, max} = this.getMinMax(true);
 
@@ -37,14 +49,3 @@ export default class LinearScale extends LinearScaleBase {
     return this._startValue + this.getDecimalForPixel(pixel) * this._valueRange;
   }
 }
-
-LinearScale.id = 'linear';
-
-/**
- * @type {any}
- */
-LinearScale.defaults = {
-  ticks: {
-    callback: Ticks.formatters.numeric
-  }
-};

src/scales/scale.logarithmic.js

@@ -46,6 +46,21 @@ function generateTicks(generationOptions, dataRange) {
 
 export default class LogarithmicScale extends Scale {
 
+  static id = 'logarithmic';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    ticks: {
+      callback: Ticks.formatters.logarithmic,
+      major: {
+        enabled: true
+      }
+    }
+  };
+
+
   constructor(cfg) {
     super(cfg);
 
@@ -180,17 +195,3 @@ export default class LogarithmicScale extends Scale {
     return Math.pow(10, this._startValue + decimal * this._valueRange);
   }
 }
-
-LogarithmicScale.id = 'logarithmic';
-
-/**
- * @type {any}
- */
-LogarithmicScale.defaults = {
-  ticks: {
-    callback: Ticks.formatters.logarithmic,
-    major: {
-      enabled: true
-    }
-  }
-};

src/scales/scale.radialLinear.js

@@ -297,6 +297,78 @@ function createPointLabelContext(parent, index, label) {
 
 export default class RadialLinearScale extends LinearScaleBase {
 
+  static id = 'radialLinear';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    display: true,
+
+    // Boolean - Whether to animate scaling the chart from the centre
+    animate: true,
+    position: 'chartArea',
+
+    angleLines: {
+      display: true,
+      lineWidth: 1,
+      borderDash: [],
+      borderDashOffset: 0.0
+    },
+
+    grid: {
+      circular: false
+    },
+
+    startAngle: 0,
+
+    // label settings
+    ticks: {
+      // Boolean - Show a backdrop to the scale label
+      showLabelBackdrop: true,
+
+      callback: Ticks.formatters.numeric
+    },
+
+    pointLabels: {
+      backdropColor: undefined,
+
+      // Number - The backdrop padding above & below the label in pixels
+      backdropPadding: 2,
+
+      // Boolean - if true, show point labels
+      display: true,
+
+      // Number - Point label font size in pixels
+      font: {
+        size: 10
+      },
+
+      // Function - Used to convert point labels
+      callback(label) {
+        return label;
+      },
+
+      // Number - Additionl padding between scale and pointLabel
+      padding: 5,
+
+      // Boolean - if true, center point labels to slices in polar chart
+      centerPointLabels: false
+    }
+  };
+
+  static defaultRoutes = {
+    'angleLines.color': 'borderColor',
+    'pointLabels.color': 'color',
+    'ticks.color': 'color'
+  };
+
+  static descriptors = {
+    angleLines: {
+      _fallback: 'grid'
+    }
+  };
+
   constructor(cfg) {
     super(cfg);
 
@@ -565,75 +637,3 @@ export default class RadialLinearScale extends LinearScaleBase {
 	 */
   drawTitle() {}
 }
-
-RadialLinearScale.id = 'radialLinear';
-
-/**
- * @type {any}
- */
-RadialLinearScale.defaults = {
-  display: true,
-
-  // Boolean - Whether to animate scaling the chart from the centre
-  animate: true,
-  position: 'chartArea',
-
-  angleLines: {
-    display: true,
-    lineWidth: 1,
-    borderDash: [],
-    borderDashOffset: 0.0
-  },
-
-  grid: {
-    circular: false
-  },
-
-  startAngle: 0,
-
-  // label settings
-  ticks: {
-    // Boolean - Show a backdrop to the scale label
-    showLabelBackdrop: true,
-
-    callback: Ticks.formatters.numeric
-  },
-
-  pointLabels: {
-    backdropColor: undefined,
-
-    // Number - The backdrop padding above & below the label in pixels
-    backdropPadding: 2,
-
-    // Boolean - if true, show point labels
-    display: true,
-
-    // Number - Point label font size in pixels
-    font: {
-      size: 10
-    },
-
-    // Function - Used to convert point labels
-    callback(label) {
-      return label;
-    },
-
-    // Number - Additionl padding between scale and pointLabel
-    padding: 5,
-
-    // Boolean - if true, center point labels to slices in polar chart
-    centerPointLabels: false
-  }
-};
-
-RadialLinearScale.defaultRoutes = {
-  'angleLines.color': 'borderColor',
-  'pointLabels.color': 'color',
-  'ticks.color': 'color'
-};
-
-RadialLinearScale.descriptors = {
-  angleLines: {
-    _fallback: 'grid'
-  }
-};

src/scales/scale.time.js

@@ -197,6 +197,47 @@ function ticksFromTimestamps(scale, values, majorUnit) {
 
 export default class TimeScale extends Scale {
 
+  static id = 'time';
+
+  /**
+   * @type {any}
+   */
+  static defaults = {
+    /**
+     * Scale boundary strategy (bypassed by min/max time options)
+     * - `data`: make sure data are fully visible, ticks outside are removed
+     * - `ticks`: make sure ticks are fully visible, data outside are truncated
+     * @see https://github.com/chartjs/Chart.js/pull/4556
+     * @since 2.7.0
+     */
+    bounds: 'data',
+
+    adapters: {},
+    time: {
+      parser: false, // false == a pattern string from or a custom callback that converts its argument to a timestamp
+      unit: false, // false == automatic or override with week, month, year, etc.
+      round: false, // none, or override with week, month, year, etc.
+      isoWeekday: false, // override week start day
+      minUnit: 'millisecond',
+      displayFormats: {}
+    },
+    ticks: {
+      /**
+       * Ticks generation input values:
+       * - 'auto': generates "optimal" ticks based on scale size and time options.
+       * - 'data': generates ticks from data (including labels from data {t|x|y} objects).
+       * - 'labels': generates ticks from user given `data.labels` values ONLY.
+       * @see https://github.com/chartjs/Chart.js/pull/4507
+       * @since 2.7.0
+       */
+      source: 'auto',
+
+      major: {
+        enabled: false
+      }
+    }
+  };
+
   /**
 	 * @param {object} props
 	 */
@@ -611,44 +652,3 @@ export default class TimeScale extends Scale {
     return _arrayUnique(values.sort(sorter));
   }
 }
-
-TimeScale.id = 'time';
-
-/**
- * @type {any}
- */
-TimeScale.defaults = {
-  /**
-	 * Scale boundary strategy (bypassed by min/max time options)
-	 * - `data`: make sure data are fully visible, ticks outside are removed
-	 * - `ticks`: make sure ticks are fully visible, data outside are truncated
-	 * @see https://github.com/chartjs/Chart.js/pull/4556
-	 * @since 2.7.0
-	 */
-  bounds: 'data',
-
-  adapters: {},
-  time: {
-    parser: false, // false == a pattern string from or a custom callback that converts its argument to a timestamp
-    unit: false, // false == automatic or override with week, month, year, etc.
-    round: false, // none, or override with week, month, year, etc.
-    isoWeekday: false, // override week start day
-    minUnit: 'millisecond',
-    displayFormats: {}
-  },
-  ticks: {
-    /**
-		 * Ticks generation input values:
-		 * - 'auto': generates "optimal" ticks based on scale size and time options.
-		 * - 'data': generates ticks from data (including labels from data {t|x|y} objects).
-		 * - 'labels': generates ticks from user given `data.labels` values ONLY.
-		 * @see https://github.com/chartjs/Chart.js/pull/4507
-		 * @since 2.7.0
-		 */
-    source: 'auto',
-
-    major: {
-      enabled: false
-    }
-  }
-};

src/scales/scale.timeseries.js

@@ -33,6 +33,13 @@ function interpolate(table, val, reverse) {
 
 class TimeSeriesScale extends TimeScale {
 
+  static id = 'timeseries';
+
+  /**
+   * @type {any}
+   */
+  static defaults = TimeScale.defaults;
+
   /**
 	 * @param {object} props
 	 */
@@ -148,11 +155,4 @@ class TimeSeriesScale extends TimeScale {
   }
 }
 
-TimeSeriesScale.id = 'timeseries';
-
-/**
- * @type {any}
- */
-TimeSeriesScale.defaults = TimeScale.defaults;
-
 export default TimeSeriesScale;

test/specs/scale.category.tests.js

@@ -15,7 +15,7 @@ describe('Category scale tests', function() {
     var defaultConfig = Chart.defaults.scales.category;
     expect(defaultConfig).toEqual({
       ticks: {
-        callback: Chart.registry.getScale('category').prototype.getLabelForValue
+        callback: Chart.registry.getScale('category').defaults.ticks.callback
       }
     });
   });