refactor: subDomain title moved to tooltip

Title is used only by the tooltip, and should belong there
wa0x6e · Dec 24, 2022 · 6ce5b95 · 6ce5b95
1 parent 64ce7b1
commit 6ce5b95
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 109 deletions.
diff --git a/src/calendar/Populator.ts b/src/calendar/Populator.ts
@@ -33,12 +33,7 @@ export default class Populator {
       .call((element: any) => {
         element
           .select('rect')
-          .style('fill', (d: any) => colorScale?.apply(d.v))
-          .attr('aria-labelledby', (d: any) => {
-            const { title } = options.subDomain;
-
-            return title ? title(d.t, d.v) : null;
-          });
+          .style('fill', (d: any) => colorScale?.apply(d.v));
       })
       .call((element: any) => {
         element

diff --git a/src/options/Options.ts b/src/options/Options.ts
@@ -36,7 +36,6 @@ export type SubDomainOptions = {
   | string
   | null
   | ((timestamp: number, value: number, element: SVGElement) => string);
-  title: (timestamp: number, value: number) => string;
   color?:
   | string
   | ((timestamp: number, value: number, backgroundColor: string) => string);
@@ -85,7 +84,10 @@ export type OptionsType = {
   scale: ScaleOptions;
   legend: LegendOptions;
   animationDuration: number;
-  tooltip: boolean | TooltipOptions;
+  tooltip: {
+    show: boolean;
+    title: (timestamp: number, value: number) => string;
+  } & TooltipOptions;
   verticalOrientation: boolean;
 };
 
@@ -189,13 +191,6 @@ export default class Options {
         label: null,
 
         color: undefined,
-
-        // Formatting of the title displayed when hovering a subDomain cell
-        // This will also be the tooltip's text when enabled
-        // Expecting a function, which is returning the title's text
-        title: (timestamp: number, value: number): string =>
-          // eslint-disable-next-line implicit-arrow-linebreak
-          `${value} - ${new Date(timestamp).toISOString()}`,
       },
 
       // Show weekday's name when showing full month
@@ -274,7 +269,15 @@ export default class Options {
 
       // Whether to show tooltip on subDomain cell hover
       // To format its content, see subDomain.title option
-      tooltip: false,
+      tooltip: {
+        show: false,
+
+        // Formatting of the tooltip's text, when enabled
+        // Expecting a function, which will return the title's text
+        title: (timestamp: number, value: number): string =>
+          // eslint-disable-next-line implicit-arrow-linebreak
+          `${value} - ${new Date(timestamp).toISOString()}`,
+      },
 
       // Internally used options, do not edit not set
       x: {

diff --git a/src/tooltip/Tooltip.ts b/src/tooltip/Tooltip.ts
@@ -52,12 +52,11 @@ export default class Tooltip {
   init(): void {
     const { tooltip } = this.calendar.options.options;
 
-    if (!tooltip) {
+    if (!tooltip.show) {
       return;
     }
 
-    this.popperOptions =
-      typeof tooltip === 'object' ? tooltip : DEFAULT_POPPER_OPTIONS;
+    this.popperOptions = { ...DEFAULT_POPPER_OPTIONS, ...tooltip };
 
     this.root = document.getElementById(BASE_CLASSNAME);
 
@@ -78,9 +77,12 @@ export default class Tooltip {
       this.popperOptions,
     );
 
-    this.calendar.eventEmitter.on('mouseover', (e: PointerEvent) => {
-      this.#show(e.target);
-    });
+    this.calendar.eventEmitter.on(
+      'mouseover',
+      (e: PointerEvent, timestamp: number, value: number) => {
+        this.#show(e.target, timestamp, value);
+      },
+    );
 
     this.calendar.eventEmitter.on('mouseout', () => {
       this.#hide();
@@ -93,8 +95,9 @@ export default class Tooltip {
     }
   }
 
-  #show(e: any): void {
-    const title = e.getAttribute('aria-labelledby');
+  #show(e: any, timestamp: number, value: number): void {
+    const formatter = this.calendar.options.options.tooltip.title;
+    const title = formatter ? formatter(timestamp, value) : null;
 
     if (!title) {
       return;

diff --git a/test/frontend/subDomainTitle.test.ts b/test/frontend/subDomainTitle.test.ts
diff --git a/test/frontend/tooltip.test.ts b/test/frontend/tooltip.test.ts
@@ -22,23 +22,108 @@ describe('Tooltip', () => {
     expect(select('#ch-tooltip').node()).toBeNull();
 
     cal.on('fill', () => {
-      cal.eventEmitter.emit('mouseover', {
-        target: select('.graph-rect').node(),
-      });
+      cal.eventEmitter.emit(
+        'mouseover',
+        {
+          target: select('.graph-rect').node(),
+        },
+        1,
+        1,
+      );
 
       expect(select('#ch-tooltip').attr('data-show')).toBe('1');
       expect(select('#ch-tooltip-body').html()).not.toBeNull();
     });
 
-    cal.paint({ tooltip: true });
+    cal.paint({ tooltip: { show: true } });
     expect(select('#ch-tooltip').node()).not.toBeNull();
   });
 
   it('disables the tooltip', () => {
     expect(select('#ch-tooltip').node()).toBeNull();
 
-    cal.paint({ tooltip: false });
+    cal.paint({ tooltip: { show: false } });
 
     expect(select('#ch-tooltip').node()).toBeNull();
   });
+
+  it('formats the title with the user function', () => {
+    const date = new Date(2000, 0, 5);
+    const data: any[] = [];
+    data.push({
+      time: +date,
+      value: 10,
+    });
+
+    cal.on('fill', () => {
+      cal.eventEmitter.emit(
+        'mouseover',
+        {
+          target: select('.graph-rect').node(),
+        },
+        +date,
+        10,
+      );
+
+      expect(select('#ch-tooltip-body').html()).toBe('2000-10');
+
+      expect(select('#ch-tooltip').attr('data-show')).toBe('1');
+    });
+
+    cal.paint({
+      range: 1,
+      date: { start: date },
+      data: { source: data, x: 'time', y: 'value' },
+      domain: { type: 'year' },
+      subDomain: {
+        type: 'month',
+        label: (d, v) => `${v}`,
+      },
+      tooltip: {
+        show: true,
+        title: (d: number, value: number) =>
+          // eslint-disable-next-line implicit-arrow-linebreak
+          `${new Date(d).getFullYear()}-${value}`,
+      },
+    });
+  });
+
+  it('formats the title with the default function', () => {
+    const date = new Date(2000, 0, 5);
+    const data: any[] = [];
+    data.push({
+      time: +date,
+      value: 10,
+    });
+
+    cal.on('fill', () => {
+      cal.eventEmitter.emit(
+        'mouseover',
+        {
+          target: select('.graph-rect').node(),
+        },
+        +date,
+        10,
+      );
+
+      expect(select('#ch-tooltip-body').html()).toBe(
+        `10 - ${new Date(date).toISOString()}`,
+      );
+
+      expect(select('#ch-tooltip').attr('data-show')).toBe('1');
+    });
+
+    cal.paint({
+      range: 1,
+      date: { start: date },
+      data: { source: data, x: 'time', y: 'value' },
+      domain: { type: 'year' },
+      subDomain: {
+        type: 'month',
+      },
+      tooltip: {
+        show: true,
+      },
+    });
+  });
 });