feat(tooltip): treemap

__tests__/integration/snapshots/tooltip/flare-treemap-default/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    flare.vis.Visualization
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; margin-top: 12px; display: flex; line-height: 1em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(78, 121, 167); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          value
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="16540"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        16540
+      </span>
+    </li>
+  </ul>
+</div>;

__tests__/plots/tooltip/flare-treemap-default.ts

@@ -0,0 +1,40 @@
+import { schemeTableau10 } from 'd3-scale-chromatic';
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export async function flareTreemapDefault(): Promise<G2Spec> {
+  return {
+    type: 'treemap',
+    height: 600,
+    width: 800,
+    data: {
+      type: 'fetch',
+      value: 'data/flare.csv',
+    },
+    layout: {
+      path: (d) => d.name.replace(/\./g, '/'),
+      tile: 'treemapBinary',
+    },
+    scale: { color: { range: schemeTableau10 } },
+    encode: {
+      value: 'size',
+      color: (d) => d.parent.data.name.split('.')[1],
+    },
+    style: {
+      labelText: (d) => {
+        const name = d.data.name
+          .split('.')
+          .pop()
+          .split(/(?=[A-Z][a-z])/g)[0];
+        return name;
+      },
+      labelFill: '#000',
+      labelPosition: 'top-left',
+      dx: 3,
+      dy: 3,
+      fillOpacity: 0.5,
+    },
+  };
+}
+
+flareTreemapDefault.steps = tooltipSteps(0);

__tests__/plots/tooltip/index.ts

@@ -43,3 +43,4 @@ export { seattleWeatherIntervalAggregated } from './seattle-weather-interval-agg
 export { temperature2LineThreshold } from './temperature2-line-threshold';
 export { morleyBoxDefault } from './morley-box-default';
 export { morleyBoxDefaultExtend } from './morley-box-default-extend';
+export { flareTreemapDefault } from './flare-treemap-default';

src/mark/treemap.ts

@@ -12,7 +12,7 @@ import { subObject } from '../utils/helper';
 import { CompositionComponent as CC } from '../runtime';
 import { TreemapMark } from '../spec';
 import { getBBoxSize } from '../utils/size';
-import { generateHierarchyRoot } from './utils';
+import { generateHierarchyRoot, field, maybeTooltip } from './utils';
 
 export type TreemapOptions = Omit<TreemapMark, 'type'>;
 
@@ -73,7 +73,9 @@ function dataTransform(data, layout: Layout, encode): TreemapData {
   // Calculate the value and sort.
   value
     ? root
-        .sum((d) => (layout.ignoreParentValue && d.children ? 0 : d[value]))
+        .sum((d) =>
+          layout.ignoreParentValue && d.children ? 0 : field(value)(d),
+        )
         .sort(layout.sort)
     : root.count();
 
@@ -114,9 +116,11 @@ export const Treemap: CC<TreemapOptions> = (options) => {
       style = {},
       layout = {},
       labels = [],
+      tooltip = {},
       ...resOptions
     } = options;
 
+    // Defaults
     const DEFAULT_LAYOUT_OPTIONS: Layout = {
       tile: 'treemapSquarify',
       ratio: 0.5 * (1 + Math.sqrt(5)),
@@ -159,11 +163,19 @@ export const Treemap: CC<TreemapOptions> = (options) => {
       maxLines: 1,
       wordWrapWidth: (d) => d.x1 - d.x0,
     };
+    const DEFAULT_TOOLTIP_OPTIONS = {
+      title: (d) => d.data.name,
+      items: [{ field: 'value' }],
+    };
+
+    // Data
     const transformedData = dataTransform(
       data,
       deepMix({}, DEFAULT_LAYOUT_OPTIONS, layout),
       encode,
     );
+
+    // Label
     const labelStyle = subObject(style, 'label');
     return [
       deepMix({}, DEFAULT_OPTIONS, {
@@ -179,6 +191,7 @@ export const Treemap: CC<TreemapOptions> = (options) => {
           ...labels,
         ],
         ...resOptions,
+        tooltip: maybeTooltip(tooltip, DEFAULT_TOOLTIP_OPTIONS),
         axis: false,
       }),
     ];

src/mark/utils.ts

@@ -173,3 +173,8 @@ export function subTooltip(tooltip, name, defaults = {}, main = false) {
   const sub = subObject(tooltip, name);
   return deepMix(defaults, sub);
 }
+
+export function maybeTooltip(tooltip, defaults = {}) {
+  if (isUnset(tooltip)) return tooltip;
+  return deepMix(defaults, tooltip);
+}