feat(tooltip): support css (#5563)

antvis · Sep 19, 2023 · 8a10429 · 8a10429
1 parent 8615db0
commit 8a10429
Show file tree

Hide file tree

Showing 8 changed files with 478 additions and 86 deletions.
diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-custom-style/step0.html
@@ -0,0 +1,278 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-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); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 0.25em !important; 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; background: rgb(238, 238, 238); left: 10px; top: 10px; background-color: rgba(255, 255, 255, 0.96);"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 20px; font-weight: bold; padding-bottom: 0.25em;"
+  >
+    CA
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="&lt;10"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          &lt;10
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5038433"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5038433
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="1"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="10-19"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          10-19
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5170341"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5170341
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="2"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(240, 136, 77); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="20-29"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          20-29
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5809455"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5809455
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="3"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(213, 128, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="30-39"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          30-39
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5354112"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5354112
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="4"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(120, 99, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="40-49"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          40-49
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5179258"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5179258
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="5"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(96, 196, 45); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="50-59"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          50-59
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="5042094"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        5042094
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="6"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(189, 143, 36); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="60-69"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          60-69
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="3737461"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        3737461
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="7"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(255, 128, 202); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="70-79"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          70-79
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="2011678"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        2011678
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="8"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap; background: rgb(204, 204, 204); padding: 0.25em; margin: 0.25em; border-radius: 0.25em;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(36, 145, 179); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="≥80"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 16px;"
+        >
+          ≥80
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="1311374"
+        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; font-weight: bold; font-size: 16px;"
+      >
+        1311374
+      </span>
+    </li>
+  </ul>
+</div>
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -64,3 +64,4 @@ export { provincesLineGroupName } from './provinces-line-group-name';
 export { pointsPointRegressionQuad } from './points-point-regression-quad';
 export { alphabetIntervalTooltipRenderUpdate } from './alphabet-interval-tooltip-render-update';
 export { mockIntervalShared } from './mock-interval-shared';
+export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style';
diff --git a/__tests__/plots/tooltip/stateages-interval-custom-style.ts b/__tests__/plots/tooltip/stateages-interval-custom-style.ts
@@ -0,0 +1,59 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function stateAgesIntervalCustomStyle(): G2Spec {
+  return {
+    type: 'interval',
+    transform: [
+      { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 },
+      { type: 'dodgeX' },
+    ],
+    data: {
+      type: 'fetch',
+      value: 'data/stateages.csv',
+    },
+    legend: false,
+    encode: {
+      x: 'state',
+      y: 'population',
+      color: 'age',
+    },
+    interaction: {
+      tooltip: {
+        shared: true,
+        css: {
+          '.g2-tooltip': {
+            background: '#eee',
+            'border-radius': ' 0.25em !important',
+          },
+          '.g2-tooltip-title': {
+            'font-size': '20px',
+            'font-weight': 'bold',
+            'padding-bottom': '0.25em',
+          },
+          '.g2-tooltip-list-item': {
+            background: '#ccc',
+            padding: '0.25em',
+            margin: '0.25em',
+            'border-radius': '0.25em',
+          },
+          '.g2-tooltip-list-item-name-label': {
+            'font-weight': 'bold',
+            'font-size': '16px',
+          },
+          'g2-tooltip-list-item-marker': {
+            'border-radius': '0.25em',
+            width: '15px',
+            height: '15px',
+          },
+          '.g2-tooltip-list-item-value': {
+            'font-weight': 'bold',
+            'font-size': '16px',
+          },
+        },
+      },
+    },
+  };
+}
+
+stateAgesIntervalCustomStyle.steps = tooltipSteps(0);