Merge branch 'master' into mer-cat/fix-background-color-cartesianscale

docs/axes/styling.md

@@ -15,7 +15,7 @@ Namespace: `options.scales[scaleId].grid`, it defines options for the grid lines
 | `drawTicks` | `boolean` | | | `true` | If true, draw lines beside the ticks in the axis area beside the chart.
 | `lineWidth` | `number` | Yes | Yes | `1` | Stroke width of grid lines.
 | `offset` | `boolean` | | | `false` | If true, grid lines will be shifted to be between labels. This is set to `true` for a bar chart by default.
-| `tickBorderDash` | `number[]` | | | | Length and spacing of the tick mark line. If not set, defaults to the grid line `borderDash` value.
+| `tickBorderDash` | `number[]` | Yes | Yes | `[]` | Length and spacing of the tick mark line. If not set, defaults to the grid line `borderDash` value.
 | `tickBorderDashOffset` | `number` | Yes | Yes |  | Offset for the line dash of the tick mark. If unset, defaults to the grid line `borderDashOffset` value
 | `tickColor` | [`Color`](../general/colors.md) | Yes | Yes | | Color of the tick line. If unset, defaults to the grid line color.
 | `tickLength` | `number` | | | `8` | Length in pixels that the grid lines will draw into the axis area.

docs/developers/plugins.md

@@ -197,7 +197,7 @@ declare module 'chart.js' {
   interface PluginOptionsByType<TType extends ChartType> {
     customCanvasBackgroundColor?: {
       color?: string
-    }
+    } | false
   }
 }
 ```

package.json

@@ -2,7 +2,7 @@
     "name": "chart.js",
     "homepage": "https://www.chartjs.org",
     "description": "Simple HTML5 charts using the canvas element.",
-    "version": "4.3.0",
+    "version": "4.3.1",
     "license": "MIT",
     "type": "module",
     "sideEffects": [

src/controllers/controller.line.js

@@ -57,7 +57,7 @@ export default class LineController extends DatasetController {
     line._chart = this.chart;
     line._datasetIndex = this.index;
     line._decimated = !!_dataset._decimated;
-    line.points = points;
+    line.points = points.slice(Math.max(this._drawStart - 1, 0), this._drawStart + this._drawCount);
 
     const options = this.resolveDatasetElementOptions(mode);
     if (!this.options.showLine) {

src/helpers/helpers.extras.ts

@@ -98,7 +98,7 @@ export function _getStartAndCountOfVisiblePoints(meta: ChartMeta<'line' | 'scatt
     if (minDefined) {
       start = _limitValue(Math.min(
         // @ts-expect-error Need to type _parsed
-        _lookupByKey(_parsed, iScale.axis, min).lo,
+        _lookupByKey(_parsed, axis, min).lo,
         // @ts-expect-error Need to fix types on _lookupByKey
         animationsDisabled ? pointCount : _lookupByKey(points, axis, iScale.getPixelForValue(min)).lo),
       0, pointCount - 1);

src/plugins/plugin.legend.js

@@ -428,7 +428,7 @@ export class Legend extends Element {
         cursor.x += width + padding;
       } else if (typeof legendItem.text !== 'string') {
         const fontLineHeight = labelFont.lineHeight;
-        cursor.y += calculateLegendItemHeight(legendItem, fontLineHeight);
+        cursor.y += calculateLegendItemHeight(legendItem, fontLineHeight) + padding;
       } else {
         cursor.y += lineHeight;
       }
@@ -575,7 +575,7 @@ function calculateItemHeight(_itemHeight, legendItem, fontLineHeight) {
 }
 
 function calculateLegendItemHeight(legendItem, fontLineHeight) {
-  const labelHeight = legendItem.text ? legendItem.text.length + 0.5 : 0;
+  const labelHeight = legendItem.text ? legendItem.text.length : 0;
   return fontLineHeight * labelHeight;
 }
 

src/scales/scale.time.js

@@ -445,7 +445,7 @@ export default class TimeScale extends Scale {
 	 * `minor` unit using the given scale time `options`.
 	 * Important: this method can return ticks outside the min and max range, it's the
 	 * responsibility of the calling code to clamp values if needed.
-	 * @private
+	 * @protected
 	 */
   _generate() {
     const adapter = this._adapter;
@@ -485,7 +485,7 @@ export default class TimeScale extends Scale {
     }
 
     // @ts-ignore
-    return Object.keys(ticks).sort((a, b) => a - b).map(x => +x);
+    return Object.keys(ticks).sort(sorter).map(x => +x);
   }
 
   /**

src/scales/scale.timeseries.js

@@ -110,6 +110,25 @@ class TimeSeriesScale extends TimeScale {
     return table;
   }
 
+  /**
+    * Generates all timestamps defined in the data.
+    * Important: this method can return ticks outside the min and max range, it's the
+    * responsibility of the calling code to clamp values if needed.
+    * @protected
+    */
+  _generate() {
+    const min = this.min;
+    const max = this.max;
+    let timestamps = super.getDataTimestamps();
+    if (!timestamps.includes(min) || !timestamps.length) {
+      timestamps.splice(0, 0, min);
+    }
+    if (!timestamps.includes(max) || timestamps.length === 1) {
+      timestamps.push(max);
+    }
+    return timestamps.sort((a, b) => a - b);
+  }
+
   /**
 	 * Returns all timestamps
 	 * @return {number[]}

src/types/index.d.ts

@@ -928,6 +928,12 @@ export interface Plugin<TType extends ChartType = ChartType, O = AnyObject>
   extends ExtendedPlugin<TType, O> {
   id: string;
 
+  /**
+   * The events option defines the browser events that the plugin should listen.
+   * @default ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove']
+   */
+  events?: (keyof HTMLElementEventMap)[]
+
   /**
    * @desc Called when plugin is installed for this chart instance. This hook is also invoked for disabled plugins (options === false).
    * @param {Chart} chart - The chart instance.
@@ -2474,7 +2480,11 @@ export type DecimationOptions = LttbDecimationOptions | MinMaxDecimationOptions;
 
 export declare const Filler: Plugin;
 export interface FillerOptions {
+<<<<<<< HEAD
   drawTime: "beforeDatasetDraw" | "beforeDatasetsDraw";
+=======
+  drawTime: 'beforeDraw' | 'beforeDatasetDraw' | 'beforeDatasetsDraw';
+>>>>>>> master
   propagate: boolean;
 }
 
@@ -2706,6 +2716,10 @@ export interface LegendOptions<TType extends ChartType> {
      * @default 10
      */
     padding: number;
+    /**
+     * If usePointStyle is true, the width of the point style used for the legend.
+     */
+    pointStyleWidth: number;
     /**
      * Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.
      */
@@ -3256,13 +3270,13 @@ export interface TooltipItem<TType extends ChartType> {
 }
 
 export interface PluginOptionsByType<TType extends ChartType> {
-  colors: ColorsPluginOptions;
-  decimation: DecimationOptions;
-  filler: FillerOptions;
-  legend: LegendOptions<TType>;
-  subtitle: TitleOptions;
-  title: TitleOptions;
-  tooltip: TooltipOptions<TType>;
+  colors: ColorsPluginOptions | false;
+  decimation: DecimationOptions | false;
+  filler: FillerOptions | false;
+  legend: LegendOptions<TType> | false;
+  subtitle: TitleOptions | false;
+  title: TitleOptions | false;
+  tooltip: TooltipOptions<TType> | false;
 }
 export interface PluginChartOptions<TType extends ChartType> {
   plugins: PluginOptionsByType<TType>;
@@ -3314,7 +3328,7 @@ export interface GridLineOptions {
   /**
    * @default []
    */
-  tickBorderDash: number[];
+  tickBorderDash: Scriptable<number[], ScriptableScaleContext>;
   /**
    * @default 0
    */
@@ -3683,7 +3697,66 @@ export declare const LogarithmicScale: ChartComponent & {
   ): LogarithmicScale<O>;
 };
 
+<<<<<<< HEAD
 export type TimeScaleOptions = Omit<CartesianScaleOptions, "min" | "max"> & {
+=======
+export type TimeScaleTimeOptions = {
+  /**
+   * Custom parser for dates.
+   */
+  parser: string | ((v: unknown) => number);
+  /**
+   * If defined, dates will be rounded to the start of this unit. See Time Units below for the allowed units.
+   */
+  round: false | TimeUnit;
+  /**
+   * If boolean and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
+   * If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday).
+   * @default false
+   */
+  isoWeekday: boolean | number;
+  /**
+   * Sets how different time units are displayed.
+   */
+  displayFormats: {
+    [key: string]: string;
+  };
+  /**
+   * The format string to use for the tooltip.
+   */
+  tooltipFormat: string;
+  /**
+   * If defined, will force the unit to be a certain type. See Time Units section below for details.
+   * @default false
+   */
+  unit: false | TimeUnit;
+  /**
+   * The minimum display format to be used for a time unit.
+   * @default 'millisecond'
+   */
+  minUnit: TimeUnit;
+};
+
+export type TimeScaleTickOptions = {
+  /**
+   * 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
+   * @default 'auto'
+   */
+  source: 'labels' | 'auto' | 'data';
+  /**
+   * The number of units between grid lines.
+   * @default 1
+   */
+  stepSize: number;
+};
+
+export type TimeScaleOptions = Omit<CartesianScaleOptions, 'min' | 'max'> & {
+>>>>>>> master
   min: string | number;
   max: string | number;
   suggestedMin: string | number;
@@ -3711,43 +3784,9 @@ export type TimeScaleOptions = Omit<CartesianScaleOptions, "min" | "max"> & {
     date: unknown;
   };
 
-  time: {
-    /**
-     * Custom parser for dates.
-     */
-    parser: string | ((v: unknown) => number);
-    /**
-     * If defined, dates will be rounded to the start of this unit. See Time Units below for the allowed units.
-     */
-    round: false | TimeUnit;
-    /**
-     * If boolean and true and the unit is set to 'week', then the first day of the week will be Monday. Otherwise, it will be Sunday.
-     * If `number`, the index of the first day of the week (0 - Sunday, 6 - Saturday).
-     * @default false
-     */
-    isoWeekday: boolean | number;
-    /**
-     * Sets how different time units are displayed.
-     */
-    displayFormats: {
-      [key: string]: string;
-    };
-    /**
-     * The format string to use for the tooltip.
-     */
-    tooltipFormat: string;
-    /**
-     * If defined, will force the unit to be a certain type. See Time Units section below for details.
-     * @default false
-     */
-    unit: false | TimeUnit;
-    /**
-     * The minimum display format to be used for a time unit.
-     * @default 'millisecond'
-     */
-    minUnit: TimeUnit;
-  };
+  time: TimeScaleTimeOptions;
 
+<<<<<<< HEAD
   ticks: {
     /**
      * Ticks generation input values:
@@ -3765,6 +3804,9 @@ export type TimeScaleOptions = Omit<CartesianScaleOptions, "min" | "max"> & {
      */
     stepSize: number;
   };
+=======
+  ticks: TimeScaleTickOptions;
+>>>>>>> master
 };
 
 export interface TimeScale<O extends TimeScaleOptions = TimeScaleOptions>

test/fixtures/controller.line/cubicInterpolationMode/scaleMInMaxLimits.js

@@ -0,0 +1,35 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {
+          data: [
+            {x: -10, y: 150},
+            {x: 0, y: 81},
+            {x: 10, y: 49},
+            {x: 20, y: 32},
+            {x: 30, y: 21},
+            {x: 35, y: 1},
+            {x: 40, y: 16},
+            {x: 45, y: 13},
+          ],
+          borderColor: '#ff0000',
+          cubicInterpolationMode: 'monotone'
+        }
+      ]
+    },
+    options: {
+      scales: {
+        x: {display: false, type: 'linear', min: 5, max: 37},
+        y: {display: false}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};

test/fixtures/controller.line/cubicInterpolationMode/scaleMaxLimit.js

@@ -0,0 +1,35 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {
+          data: [
+            {x: -10, y: 150},
+            {x: 0, y: 81},
+            {x: 10, y: 49},
+            {x: 20, y: 32},
+            {x: 30, y: 21},
+            {x: 35, y: 1},
+            {x: 40, y: 16},
+            {x: 45, y: 13},
+          ],
+          borderColor: '#ff0000',
+          cubicInterpolationMode: 'monotone'
+        }
+      ]
+    },
+    options: {
+      scales: {
+        x: {display: false, type: 'linear', max: 30},
+        y: {display: false}
+      }
+    }
+  },
+  options: {
+    canvas: {
+      height: 256,
+      width: 512
+    }
+  }
+};