Feature/refactor tooltip builder

dist/components/types/index.d.ts

@@ -1,4 +1,4 @@
-import { Tooltip } from "../../configurations/Tooltip";
+import { TooltipInterface } from "../../configurations/Tooltip/types";
 import { Border } from "../../configurations/Border";
 import { LinearAxisOptions, RadialAxisOptions } from "../../configurations/Axes/types";
 import { LegendInterface } from "../../configurations/Legend/types";
@@ -37,7 +37,7 @@ interface ChartProps extends RetinalEncoding, RetinalEncodingLegend {
     className?: string;
     crossInteractive?: boolean;
     sort?: Map<string, MuzeConstants.SORT_ORDER>;
-    tooltips?: Tooltip[];
+    tooltips?: Array<TooltipInterface>;
     border: Border;
     radiusAxis?: RadialAxisOptions;
     propagationBehaviourMap?: {

dist/configurations/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-import { Tooltip, multiTooltipIntoMuze, TOOLTIP_TYPE, TOOLTIP_MODE } from "./tooltip";
-export { Tooltip, multiTooltipIntoMuze, TOOLTIP_TYPE, TOOLTIP_MODE };
+import { Tooltip, resolveMultiTooltips, TOOLTIP_TYPE, TOOLTIP_MODE } from "./tooltip";
+export { Tooltip, resolveMultiTooltips, TOOLTIP_TYPE, TOOLTIP_MODE };

dist/configurations/Tooltip/tooltip.d.ts

@@ -1,34 +1,20 @@
-import { TooltipInterface, MuzeTooltipInputInterface, TooltipType, TooltipMode } from './types';
+import { TooltipInterface, TooltipType, TooltipMode } from "./types";
 declare class Tooltip {
-    _type: TooltipType;
-    _mode: TooltipMode;
-    _formatter?: Function;
-    _displayFields?: Array<String>;
-    constructor({ type, mode, formatter, displayFields }: TooltipInterface);
+    private _config;
+    private constructor();
     static config(): Tooltip;
-    mode(mode: TooltipMode): Tooltip;
     on(type: TooltipType): Tooltip;
+    mode(mode: TooltipMode): Tooltip;
     formatter(func: Function): Tooltip;
     displayFields(fields: Array<String>): Tooltip;
-    create(values?: TooltipInterface): Tooltip;
-    asMuzeInput(): MuzeTooltipInputInterface;
+    create(options?: TooltipInterface): TooltipInterface;
 }
-export declare function multiTooltipIntoMuze(tooltips: Array<Tooltip> | undefined): {
-    tooltip?: undefined;
-} | {
-    tooltip: {
-        highlightSummary: MuzeTooltipInputInterface;
-        selectionSummary: MuzeTooltipInputInterface;
-    };
-} | {
-    tooltip: {
-        highlightSummary: MuzeTooltipInputInterface;
-        selectionSummary?: undefined;
-    };
-} | {
-    tooltip: {
-        selectionSummary: MuzeTooltipInputInterface | undefined;
-        highlightSummary?: undefined;
-    };
-};
+export declare function resolveMultiTooltips(tooltips: Array<TooltipInterface> | undefined): {
+    mode?: TooltipMode | undefined;
+    formatter?: Function | undefined;
+    displayFields?: String[] | undefined;
+    highlightSummary?: TooltipInterface | undefined;
+    selectionSummary?: TooltipInterface | undefined;
+    _type?: TooltipType | undefined;
+} | null;
 export { Tooltip, TooltipType as TOOLTIP_TYPE, TooltipMode as TOOLTIP_MODE };

dist/configurations/Tooltip/types.d.ts

@@ -1,13 +1,10 @@
 export interface TooltipInterface {
-    type?: TooltipType;
     mode?: TooltipMode;
     formatter?: Function;
     displayFields?: Array<String>;
-}
-export interface MuzeTooltipInputInterface {
-    mode?: String;
-    formatter?: Function;
-    displayFields?: Array<String>;
+    highlightSummary?: TooltipInterface;
+    selectionSummary?: TooltipInterface;
+    _type?: TooltipType;
 }
 export declare enum TooltipType {
     HIGHLIGHT = "highlight",

examples/package.json

@@ -10,8 +10,8 @@
     "@types/react": "file:../node_modules/@types/react",
     "@types/react-dom": "file:../node_modules/@types/react-dom",
     "react": "file:../node_modules/react",
-    "react-dom": "file:../node_modules/react-dom",
-    "react-app-rewired": "file:../node_modules/react-app-rewired"
+    "react-app-rewired": "file:../node_modules/react-app-rewired",
+    "react-dom": "file:../node_modules/react-dom"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -31,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "copy-webpack-plugin": "5.1.1"
   }
-}
+}

examples/src/Examples/Tooltips/CustomTooltip.js

@@ -29,37 +29,32 @@ class CustomTooltip extends React.Component {
   render() {
     const { carsDm } = this.state;
 
-    const tooltip = Tooltip.config().formatter((dataStore, config, context) => {
-      const colorAxis = context.axes.color[0];
-      const tooltipData = dataStore.getData().data;
+    const tooltip = Tooltip.config()
+      .formatter((dataStore, config, context) => {
+        const colorAxis = context.axes.color[0];
+        const tooltipData = dataStore.getData().data;
 
-      let tooltipContent = "";
-      tooltipData.forEach((dataArray, i) => {
-        const originVal = dataArray[dataStore.getFieldIndex("Origin")];
-        const hpVal = dataArray[dataStore.getFieldIndex("Horsepower")];
-        const cylVal = dataArray[dataStore.getFieldIndex("Cylinders")];
-        const l = colorAxis.getRawColor(cylVal)[2]; // luminance
-        tooltipContent += `
+        let tooltipContent = "";
+        tooltipData.forEach((dataArray, i) => {
+          const originVal = dataArray[dataStore.getFieldIndex("Origin")];
+          const hpVal = dataArray[dataStore.getFieldIndex("Horsepower")];
+          const cylVal = dataArray[dataStore.getFieldIndex("Cylinders")];
+          const l = colorAxis.getRawColor(cylVal)[2]; // luminance
+          tooltipContent += `
 ${i ? "" : `<h3 style="background-color:#EAEAEA">Country: ${originVal}</h3>`}
 <div style="background: ${colorAxis.getColor(
-          cylVal
-        )}; padding: 4px 8px; color: ${l > 0.45 ? "black" : "white"};">
+            cylVal
+          )}; padding: 4px 8px; color: ${l > 0.45 ? "black" : "white"};">
 <u>${cylVal} Cylinders</u> cars with an average power of <b>${hpVal} HP</b>
 </div>
 `;
-        tooltipContent += "<br>";
-      });
-      return Muze.Operators.html`${tooltipContent}`;
-    });
-
-    // NOTE: in the demo (react) tooltip is not fragmented
+          tooltipContent += "<br>";
+        });
+        return Muze.Operators.html`${tooltipContent}`;
+      })
+      .create();
 
-    // the input that is getting passed to muze is (core muze bug)
-    // tooltip: {
-    //   highlightSummary: {
-    //     mode: "fragmented";
-    //   }
-    // }
+    console.log("tooltip", tooltip);
 
     return (
       <Muze data={carsDm}>

examples/src/Examples/Tooltips/Tooltip.js

@@ -29,7 +29,10 @@ class FragmentedTooltip extends React.Component {
   render() {
     const { carsDm } = this.state;
 
-    const tooltip = Tooltip.config().on("highlight").mode("fragmented");
+    const tooltip = Tooltip.config()
+      .on("highlight")
+      .mode("fragmented")
+      .create();
 
     return (
       <Muze data={carsDm}>

examples/src/index.js

@@ -2,11 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom";
 import * as serviceWorker from "./serviceWorker";
 
-import BoxPlot from './Examples/Composability/BoxPlot';
+import CustomTooltip from "./Examples/Tooltips/CustomTooltip";
 
 ReactDOM.render(
   <React.StrictMode>
-    <BoxPlot />
+    <CustomTooltip />
   </React.StrictMode>,
   document.getElementById("root")
 );