feat(api): add new api for view (#3600)

* feat(api): add new api for view

* chore: add new api for geometry

* test: fix ci

* chore(legend): add demo for customize legend

* chore: update screenshot

* docs(tooltip): add costomize tooltip

* chore: update demo dir

* docs(annotation): add customize annotation for bar chart

examples/customize/component/API.en.md

@@ -0,0 +1 @@
+`markdown:docs/common/api..md`

examples/customize/component/API.zh.md

@@ -0,0 +1 @@
+`markdown:docs/common/api.zh.md`

examples/customize/component/demo/bar-annotation.ts

@@ -0,0 +1,101 @@
+import { Chart } from '@antv/g2';
+import inserCss from 'insert-css';
+
+const $container = document.getElementById('container');
+$container.innerHTML = `
+<div id="app-container">
+  <div id="g2-container-bar">
+    <div id="g2-customize-annotation"></div>
+  </div>
+</div>
+`;
+
+inserCss(`
+#app-container {
+  width: 100%;
+  height: 100%;
+}
+
+#g2-container-bar {
+  position: relative;
+}
+
+#g2-customize-annotation {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#g2-customize-annotation .annotation-item {
+  position: absolute;
+  margin-left: 8px;
+  padding: 0 4px;
+  background: #fffbe6;
+
+  font-size: 12px;
+  opacity: 0.8;
+}
+`);
+
+const data = [
+  { name: '曝光', count: 120000000, message: '曝光率过低' },
+  { name: '点击', count: 80000000 },
+  { name: '承接访问页', count: 60000000 },
+  { name: '承接点击页', count: 40000000, message: '最终转化率过低，请关注表单提交成功率' },
+  { name: '最终转化量', count: 2000000 },
+];
+
+const chart = new Chart({
+  container: 'g2-container-bar',
+  autoFit: true,
+  height: 400,
+});
+
+chart.data(data);
+
+chart.scale('count', { nice: true });
+
+chart.coordinate().transpose().scale(1, -1);
+
+chart.tooltip({
+  showMarkers: false
+});
+
+chart.interaction('active-region');
+
+chart.interval().position('name*count');
+
+// customize annotation
+const $annotation = document.getElementById('g2-customize-annotation');
+chart.on('afterrender', (e) => {
+  const elements = e.view.getElements();
+  const x = chart.getCoordinate().x.start;
+
+  const html = [];
+
+  elements.reduce((prev, curr) => {
+    if (prev && curr) {
+      const data = prev.getData();
+      const message = data.message;
+
+      if (message) {
+        // 第一个空隙的 y 位置
+        const y = prev.getBBox().maxY;
+        // 第一个空隙的高度
+        const height = curr.getBBox().minY - prev.getBBox().maxY;
+
+        html.push(`
+          <div class="annotation-item" style="top: ${y + height / 2 - 9}px; left: ${x}px;">${message}。<a href="https://antv.vision/" target="_blank">查看原因</a></div>
+        `);
+      }
+
+      return curr;
+    }
+  });
+
+  $annotation.innerHTML = html.join('');
+});
+
+chart.render();

examples/customize/component/demo/line-tooltip.ts

@@ -0,0 +1,205 @@
+import { Chart } from '@antv/g2';
+import inserCss from 'insert-css';
+
+const $container = document.getElementById('container');
+$container.innerHTML = `
+<div id="app-container">
+  <div id="g2-customize-tooltip"></div>
+  <div id="g2-container"></div>
+</div>
+`;
+
+inserCss(`
+#app-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#g2-container {
+  flex: auto;
+}
+
+#g2-customize-tooltip {
+  margin-bottom: 16px;
+  font-size: 12px;
+}
+
+
+#g2-customize-tooltip .tooltip-title {
+  
+}
+
+#g2-customize-tooltip .tooltip-items {
+  display: flex;
+  flex-direction: row;
+}
+
+#g2-customize-tooltip .tooltip-item {
+  flex-basis: 240px;
+  padding-left: 8px;
+  margin-right: 12px;
+}
+
+#g2-customize-tooltip .tooltip-item .tooltip-item-value {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+
+
+#g2-customize-tooltip .tooltip-item-info {
+  display: flex;
+  justify-content: space-between;
+}
+
+#g2-customize-tooltip .tooltip-item-info .info-item {
+  display: flex;
+}
+
+#g2-customize-tooltip .tooltip-item-info .info-item .info-item-name {
+  opacity: 0.65;
+}
+
+#g2-customize-tooltip .tooltip-item-info .info-item .info-item-value {
+  margin-left: 8px;
+}
+`);
+
+const data = [
+  { month: 'Jan', city: 'Tokyo', temperature: 7 },
+  { month: 'Jan', city: 'London', temperature: 3.9 },
+  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
+  { month: 'Feb', city: 'London', temperature: 4.2 },
+  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
+  { month: 'Mar', city: 'London', temperature: 5.7 },
+  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
+  { month: 'Apr', city: 'London', temperature: 8.5 },
+  { month: 'May', city: 'Tokyo', temperature: 18.4 },
+  { month: 'May', city: 'London', temperature: 11.9 },
+  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
+  { month: 'Jun', city: 'London', temperature: 15.2 },
+  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
+  { month: 'Jul', city: 'London', temperature: 17 },
+  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
+  { month: 'Aug', city: 'London', temperature: 16.6 },
+  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
+  { month: 'Sep', city: 'London', temperature: 14.2 },
+  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
+  { month: 'Oct', city: 'London', temperature: 10.3 },
+  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
+  { month: 'Nov', city: 'London', temperature: 6.6 },
+  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
+  { month: 'Dec', city: 'London', temperature: 4.8 },
+];
+
+const chart = new Chart({
+  container: 'g2-container',
+  autoFit: true,
+});
+
+chart.data(data);
+chart.scale({
+  month: {
+    range: [0, 1],
+  },
+  temperature: {
+    nice: true,
+  },
+});
+
+chart.tooltip({
+  showCrosshairs: true,
+  shared: true,
+});
+
+chart.axis('temperature', {
+  label: {
+    formatter: (val) => {
+      return val + ' °C';
+    },
+  },
+});
+
+chart
+  .line()
+  .position('month*temperature')
+  .color('city')
+  .shape('smooth');
+
+chart
+  .point()
+  .position('month*temperature')
+  .color('city')
+  .shape('circle');
+
+// customize tooltip
+const $tooltip = document.getElementById('g2-customize-tooltip');
+
+function getTooltipHTML(data) {
+  const { title, items } = data;
+  return `
+    <div class="tooltip-title">${title}</div>
+    <div class="tooltip-items">
+      ${items.map(datum => {
+        const color = datum.color;
+        const name = datum.name;
+        const value = datum.value;
+
+        return `
+        <div class="tooltip-item" style="border-left: 2px solid ${color}">
+          <div class="tooltip-item-name">${name}</div>
+          <div class="tooltip-item-value">${value} °C</div>
+          <div class="tooltip-item-info">
+            <div class="info-item">
+              <div class="info-item-name">最新值</div>
+              <div class="info-item-value">9.6</div>
+            </div>
+            <div class="info-item">
+              <div class="info-item-name">平均值</div>
+              <div class="info-item-value">4.8</div>
+            </div>
+            <div class="info-item">
+              <div class="info-item-name">最大值</div>
+              <div class="info-item-value">16.9</div>
+            </div>
+          </div>
+        </div>
+        `;
+      }).join('')}
+    </div>
+  `;
+
+}
+
+// 初始的 tooltip
+chart.on('afterrender', (e) => {
+  const elements = e.view.getElements();
+  console.log(111, elements);
+  // 获取最新值的数据
+  const items = elements
+    .filter(ele => ele.getData().month === 'Dec')
+    .map(ele => {
+      const model = ele.getModel();
+      return {
+        color: model.color,
+        name: model.data.city,
+        value: model.data.temperature,
+      };
+    });
+
+  const data = {
+    title: 'Dec',
+    items,
+  }
+
+  $tooltip.innerHTML = getTooltipHTML(data);
+});
+
+// tooltip 的更新
+chart.on('tooltip:change', (e) => {
+  $tooltip.innerHTML = getTooltipHTML(e.data);
+});
+
+chart.render();

examples/customize/component/demo/meta.json

@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "pie-legend.ts",
+      "title": {
+        "en": "Pie Legend",
+        "zh": "自定义饼图图例"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/FXumtQPY8%24/4f400067-dfde-47bc-8e75-0cd7695bd3b7.png"
+    },
+    {
+      "filename": "line-tooltip.ts",
+      "title": {
+        "en": "Line Tooltip",
+        "zh": "自定义折线图 Tooltip"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/mt6fmjOEz9/7e80e61e-f4f5-4e55-9e72-75a37e62a078.png"
+    },
+    {
+      "filename": "bar-annotation.ts",
+      "title": {
+        "en": "Bar Annotation",
+        "zh": "自定义条图标注"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/rPYLMuT0Um/a45f988e-9e43-43ac-95b1-c4ee87480174.png"
+    }
+  ]
+}