Merge pull request #133 from sgratzl/sgratzl/itemtooltip

item tooltips and improved interfaces

Author: sgratzl

docs/examples/items.ts

@@ -8,8 +8,9 @@ export const config: ChartConfiguration<'boxplot'> = {
   data,
   options: {
     elements: {
-      boxplot: {
+      boxandwhiskers: {
         itemRadius: 2,
+        itemHitRadius: 4,
       },
     },
   },

src/controllers/BoxPlotController.ts

@@ -11,6 +11,7 @@ import {
   AnimationOptions,
   ScriptableContext,
   CartesianScaleTypeRegistry,
+  BarControllerDatasetOptions,
 } from 'chart.js';
 import { merge } from 'chart.js/helpers';
 import { asBoxPlotStats, IBoxPlot, IBoxplotOptions } from '../data';
@@ -70,6 +71,10 @@ export class BoxPlotController extends StatsBase<IBoxPlot, Required<IBoxplotOpti
 
 export interface BoxPlotControllerDatasetOptions
   extends ControllerDatasetOptions,
+    Pick<
+      BarControllerDatasetOptions,
+      'barPercentage' | 'barThickness' | 'categoryPercentage' | 'maxBarThickness' | 'minBarLength'
+    >,
     IBoxplotOptions,
     ScriptableAndArrayOptions<IBoxAndWhiskersOptions, ScriptableContext<'boxplot'>>,
     ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'boxplot'>>,

src/controllers/StatsBase.ts

@@ -147,7 +147,10 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
   /**
    * @hidden
    */
-  getLabelAndValue(index: number): { label: string; value: string & { raw: S; hoveredOutlierIndex: number } & S } {
+  getLabelAndValue(index: number): {
+    label: string;
+    value: string & { raw: S; hoveredOutlierIndex: number; hoveredItemIndex: number } & S;
+  } {
     const r = super.getLabelAndValue(index) as any;
     const { vScale } = this._cachedMeta;
     const parsed = this.getParsed(index) as unknown as S;
@@ -157,6 +160,7 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
     r.value = {
       raw: parsed,
       hoveredOutlierIndex: -1,
+      hoveredItemIndex: -1,
     };
     this._transformStats(r.value, parsed, (v) => vScale.getLabelForValue(v));
     const s = this._toStringStats(r.value.raw);
@@ -166,6 +170,10 @@ export abstract class StatsBase<S extends IBaseStats, C extends Required<IBaseOp
         // TODO formatter
         return `(outlier: ${this.outliers[this.hoveredOutlierIndex]})`;
       }
+      if (this.hoveredItemIndex >= 0) {
+        // TODO formatter
+        return `(item: ${this.items[this.hoveredItemIndex]})`;
+      }
       return s;
     };
     return r;

src/controllers/ViolinController.ts

@@ -11,6 +11,7 @@ import {
   AnimationOptions,
   ScriptableContext,
   CartesianScaleTypeRegistry,
+  BarControllerDatasetOptions,
 } from 'chart.js';
 import { merge } from 'chart.js/helpers';
 import { asViolinStats, IViolin, IViolinOptions } from '../data';
@@ -79,6 +80,10 @@ export type ViolinDataPoint = number[] | (Partial<IViolin> & Pick<IViolin, 'medi
 
 export interface ViolinControllerDatasetOptions
   extends ControllerDatasetOptions,
+    Pick<
+      BarControllerDatasetOptions,
+      'barPercentage' | 'barThickness' | 'categoryPercentage' | 'maxBarThickness' | 'minBarLength'
+    >,
     IViolinOptions,
     ScriptableAndArrayOptions<IViolinElementOptions, ScriptableContext<'violin'>>,
     ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'violin'>>,

src/elements/BoxAndWiskers.ts

@@ -259,6 +259,6 @@ export class BoxAndWiskers extends StatsBase<IBoxAndWhiskerProps, IBoxAndWhisker
 
 declare module 'chart.js' {
   export interface ElementOptionsByType<TType extends ChartType> {
-    boxplot: ScriptableAndArrayOptions<IBoxAndWhiskersOptions & CommonHoverOptions, ScriptableContext<TType>>;
+    boxandwhiskers: ScriptableAndArrayOptions<IBoxAndWhiskersOptions & CommonHoverOptions, ScriptableContext<TType>>;
   }
 }

src/elements/base.ts

@@ -116,6 +116,13 @@ export interface IStatsBaseOptions {
    * @indexable
    */
   itemBorderWidth: number;
+  /**
+   * hit radius for hit test of items
+   * @default 0
+   * @scriptable
+   * @indexable
+   */
+  itemHitRadius: number;
 
   /**
    * padding that is added around the bounding box when computing a mouse hit
@@ -195,6 +202,7 @@ export const baseDefaults = {
   itemStyle: 'circle',
   itemRadius: 0,
   itemBorderWidth: 0,
+  itemHitRadius: 0,
 
   meanStyle: 'circle',
   meanRadius: 3,
@@ -399,7 +407,8 @@ export class StatsBase<T extends IStatsBaseProps & { mean?: number }, O extends
     }
     return (
       this._boxInRange(mouseX, mouseY, useFinalPosition) ||
-      this._outlierIndexInRange(mouseX, mouseY, useFinalPosition) >= 0
+      this._outlierIndexInRange(mouseX, mouseY, useFinalPosition) != null ||
+      this._itemIndexInRange(mouseX, mouseY, useFinalPosition) != null
     );
   }
 
@@ -422,23 +431,75 @@ export class StatsBase<T extends IStatsBaseProps & { mean?: number }, O extends
   /**
    * @hidden
    */
-  protected _outlierIndexInRange(mouseX: number, mouseY: number, useFinalPosition?: boolean): number {
+  protected _outlierIndexInRange(
+    mouseX: number,
+    mouseY: number,
+    useFinalPosition?: boolean
+  ): { index: number; x: number; y: number } | null {
     const props = this.getProps(['x', 'y'], useFinalPosition);
     const hitRadius = this.options.outlierHitRadius;
     const outliers = this._getOutliers(useFinalPosition);
     const vertical = this.isVertical();
 
     // check if along the outlier line
     if ((vertical && Math.abs(mouseX - props.x) > hitRadius) || (!vertical && Math.abs(mouseY - props.y) > hitRadius)) {
-      return -1;
+      return null;
     }
     const toCompare = vertical ? mouseY : mouseX;
     for (let i = 0; i < outliers.length; i += 1) {
       if (Math.abs(outliers[i] - toCompare) <= hitRadius) {
-        return i;
+        return vertical ? { index: i, x: props.x, y: outliers[i] } : { index: i, x: outliers[i], y: props.y };
+      }
+    }
+    return null;
+  }
+
+  /**
+   * @hidden
+   */
+  protected _itemIndexInRange(
+    mouseX: number,
+    mouseY: number,
+    useFinalPosition?: boolean
+  ): { index: number; x: number; y: number } | null {
+    const hitRadius = this.options.itemHitRadius;
+    if (hitRadius <= 0) {
+      return null;
+    }
+    const props = this.getProps(['x', 'y', 'items', 'width', 'height', 'outliers'], useFinalPosition);
+    const vert = this.isVertical();
+    const { options } = this;
+
+    if (options.itemRadius <= 0 || !props.items || props.items.length <= 0) {
+      return null;
+    }
+    // jitter based on random data
+    // use the dataset index and index to initialize the random number generator
+    const random = rnd(this._datasetIndex * 1000 + this._index);
+    const outliers = new Set(props.outliers || []);
+
+    if (vert) {
+      for (let i = 0; i < props.items.length; i++) {
+        const y = props.items[i];
+        if (!outliers.has(y)) {
+          const x = props.x - props.width / 2 + random() * props.width;
+          if (Math.abs(x - mouseX) <= hitRadius && Math.abs(y - mouseY) <= hitRadius) {
+            return { index: i, x, y };
+          }
+        }
+      }
+    } else {
+      for (let i = 0; i < props.items.length; i++) {
+        const x = props.items[i];
+        if (!outliers.has(x)) {
+          const y = props.y - props.height / 2 + random() * props.height;
+          if (Math.abs(x - mouseX) <= hitRadius && Math.abs(y - mouseY) <= hitRadius) {
+            return { index: i, x, y };
+          }
+        }
       }
     }
-    return -1;
+    return null;
   }
 
   /**
@@ -482,28 +543,40 @@ export class StatsBase<T extends IStatsBaseProps & { mean?: number }, O extends
     if (tooltip) {
       // eslint-disable-next-line no-param-reassign
       delete tooltip._tooltipOutlier;
+      // eslint-disable-next-line no-param-reassign
+      delete tooltip._tooltipItem;
     }
 
-    const props = this.getProps(['x', 'y']);
-    const index = this._outlierIndexInRange(eventPosition.x, eventPosition.y);
-    if (index < 0 || !tooltip) {
-      return this.getCenterPoint();
+    //outlier
+    const info = this._outlierIndexInRange(eventPosition.x, eventPosition.y);
+    if (info != null && tooltip) {
+      // hack in the data of the hovered outlier
+      // eslint-disable-next-line no-param-reassign
+      tooltip._tooltipOutlier = {
+        index: info.index,
+        datasetIndex: this._datasetIndex,
+      };
+      return {
+        x: info.x,
+        y: info.y,
+      };
     }
-    // hack in the data of the hovered outlier
-    // eslint-disable-next-line no-param-reassign
-    tooltip._tooltipOutlier = {
-      index,
-      datasetIndex: this._datasetIndex,
-    };
-    if (this.isVertical()) {
+    // items
+    const itemInfo = this._itemIndexInRange(eventPosition.x, eventPosition.y);
+    if (itemInfo != null && tooltip) {
+      // hack in the data of the hovered outlier
+      // eslint-disable-next-line no-param-reassign
+      tooltip._tooltipItem = {
+        index: itemInfo.index,
+        datasetIndex: this._datasetIndex,
+      };
       return {
-        x: props.x as number,
-        y: this._getOutliers()[index],
+        x: itemInfo.x,
+        y: itemInfo.y,
       };
     }
-    return {
-      x: this._getOutliers()[index],
-      y: props.y as number,
-    };
+
+    // fallback
+    return this.getCenterPoint();
   }
 }

src/tooltip.ts

@@ -5,6 +5,10 @@ export interface ExtendedTooltip extends TooltipModel<'boxplot' | 'violin'> {
     index: number;
     datasetIndex: number;
   };
+  _tooltipItem?: {
+    index: number;
+    datasetIndex: number;
+  };
 }
 
 /**
@@ -19,6 +23,9 @@ export function patchInHoveredOutlier(
   if (value && that._tooltipOutlier != null && item.datasetIndex === that._tooltipOutlier.datasetIndex) {
     value.hoveredOutlierIndex = that._tooltipOutlier.index;
   }
+  if (value && that._tooltipItem != null && item.datasetIndex === that._tooltipItem.datasetIndex) {
+    value.hoveredItemIndex = that._tooltipItem.index;
+  }
 }
 
 /**