docs(demo): add cell

site/examples/single-view/box/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Box
-order: 10
+order: 11
 ---

site/examples/single-view/box/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Box
-order: 10
+order: 11
 ---

site/examples/single-view/cell/demo/cell-aggregated.ts

@@ -0,0 +1,27 @@
+/**
+ * A recreation of this demo: https://vega.github.io/vega-lite/examples/rect_heatmap_weather.html
+ */
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  height: 300,
+});
+
+chart
+  .cell()
+  .data({
+    type: 'fetch',
+    value: 'https://assets.antv.antgroup.com/g2/seattle-weather.json',
+  })
+  .transform({ type: 'group', color: 'max' })
+  .encode('x', (d) => new Date(d.date).getUTCDate())
+  .encode('y', (d) => new Date(d.date).getUTCMonth())
+  .encode('color', 'temp_max')
+  .style('inset', 0.5)
+  .scale('color', {
+    type: 'sequential',
+    palette: 'gnBu',
+  });
+
+chart.render();

site/examples/single-view/cell/demo/cell-basic.ts

@@ -0,0 +1,22 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  height: 640,
+});
+
+chart
+  .cell()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/bd287f2c-3e2b-4d0a-8428-6a85211dce33.json',
+  })
+  .scale('color', { type: 'ordinal' })
+  .encode('x', 'x')
+  .encode('y', 'y')
+  .encode('color', 'index')
+  .style('stroke', '#000')
+  .style('inset', 2);
+
+chart.render();

site/examples/single-view/cell/demo/cell-heatmap.ts

@@ -0,0 +1,59 @@
+/**
+ * A recreation of this demo: https://observablehq.com/@mbostock/the-impact-of-vaccines
+ */
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  width: 1152,
+  height: 780,
+  paddingLeft: 60,
+});
+
+chart
+  .data({
+    type: 'fetch',
+    value: 'https://assets.antv.antgroup.com/g2/vaccines.json',
+  })
+  .axis('y', { labelAutoRotate: false })
+  .axis('x', {
+    tickFilter: (d) => d % 10 === 0,
+    position: 'top',
+  })
+  .scale('color', {
+    type: 'sequential',
+    palette: 'puRd',
+    relations: [
+      [(d) => d === null, '#eee'],
+      [0, '#fff'],
+    ],
+  });
+
+chart
+  .cell()
+  .encode('x', 'year')
+  .encode('y', 'name')
+  .encode('color', 'value')
+  .style('inset', 0.5);
+
+chart
+  .lineX()
+  .data([1963])
+  .style('stroke', 'black')
+  .label({
+    text: '1963',
+    position: 'bottom',
+    textBaseline: 'top',
+    dy: '0.1em',
+    fontSize: 10,
+  })
+  .label({
+    text: 'Measles vaccine introduced',
+    position: 'bottom',
+    textBaseline: 'top',
+    fontSize: 10,
+    fontWeight: 'bold',
+    dy: '0.7em',
+  });
+
+chart.render();

site/examples/single-view/cell/demo/cell-quantile.ts

@@ -0,0 +1,24 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  width: 900,
+  height: 300,
+});
+
+chart
+  .cell()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
+    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
+  })
+  .scale('color', { type: 'quantile', range: ['#eee', 'pink', 'red'] })
+  .encode('y', (_, i) => (i % 5) + 1)
+  .encode('x', (_, i) => ((i / 5) | 0) + 1)
+  .encode('color', 'salary')
+  .style('stroke', '#000')
+  .style('inset', 2);
+
+chart.render();

site/examples/single-view/cell/demo/cell-quantize.ts

@@ -0,0 +1,24 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  width: 900,
+  height: 300,
+});
+
+chart
+  .cell()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
+    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
+  })
+  .scale('color', { type: 'quantize', range: ['#eee', 'pink', 'red'] })
+  .encode('y', (_, i) => (i % 5) + 1)
+  .encode('x', (_, i) => ((i / 5) | 0) + 1)
+  .encode('color', 'salary')
+  .style('stroke', '#000')
+  .style('inset', 2);
+
+chart.render();

site/examples/single-view/cell/demo/cell-threshold.ts

@@ -0,0 +1,28 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  width: 900,
+  height: 300,
+});
+
+chart
+  .cell()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/89c20fe8-0c6f-46c8-b36b-4cb653dba8ed.json',
+    transform: [{ type: 'map', callback: (d) => ({ salary: d }) }],
+  })
+  .scale('color', {
+    type: 'threshold',
+    domain: [10000, 100000],
+    range: ['#eee', 'pink', 'red'],
+  })
+  .encode('y', (_, i) => (i % 5) + 1)
+  .encode('x', (_, i) => ((i / 5) | 0) + 1)
+  .encode('color', 'salary')
+  .style('stroke', '#000')
+  .style('inset', 2);
+
+chart.render();

site/examples/single-view/cell/demo/meta.json

@@ -0,0 +1,56 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "cell-basic.ts",
+      "title": {
+        "zh": "华夫饼图",
+        "en": "Waffle"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*kaRCT7ik6rkAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "cell-heatmap.ts",
+      "title": {
+        "zh": "热力图",
+        "en": "Heatmap"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*XYedR7WEoUEAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "cell-threshold.ts",
+      "title": {
+        "zh": "阈值热力图",
+        "en": "Threshold Heatmap"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*RcOMSq6qcFAAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "cell-quantile.ts",
+      "title": {
+        "zh": "分位数热力图",
+        "en": "Quantile Heatmap"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*i8u2RLyueqgAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "cell-quantize.ts",
+      "title": {
+        "zh": "量化热力图",
+        "en": "Quantize Heatmap"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*gWiuQqMJ-TAAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "cell-aggregated.ts",
+      "title": {
+        "zh": "聚合热力图",
+        "en": "Aggregated Heatmap"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*Wk4zR40uQesAAAAAAAAAAAAADmJ7AQ"
+    }
+  ]
+}

site/examples/single-view/cell/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Cell
+order: 6
+---

site/examples/single-view/cell/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: Cell
+order: 5
+---

site/examples/single-view/hierarchy/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Hierarchy
-order: 13
+order: 14
 ---

site/examples/single-view/hierarchy/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Hierarchy
-order: 13
+order: 14
 ---

site/examples/single-view/image/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Image
-order: 8
+order: 9
 ---

site/examples/single-view/image/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Image
-order: 8
+order: 9
 ---

site/examples/single-view/link/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Link
-order: 11
+order: 12
 ---

site/examples/single-view/link/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Link
-order: 11
+order: 12
 ---

site/examples/single-view/map/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Map
-order: 15
+order: 16
 ---

site/examples/single-view/map/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Map
-order: 15
+order: 16
 ---

site/examples/single-view/network/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Network
-order: 14
+order: 15
 ---

site/examples/single-view/network/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Network
-order: 14
+order: 15
 ---

site/examples/single-view/radial/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Radial
-order: 9
+order: 10
 ---

site/examples/single-view/radial/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Radial
-order: 9
+order: 10
 ---

site/examples/single-view/text/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Text
-order: 7
+order: 8
 ---

site/examples/single-view/text/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Text
-order: 7
+order: 8
 ---

site/examples/single-view/vector/index.en.md

@@ -1,4 +1,4 @@
 ---
 title: Vector
-order: 12
+order: 13
 ---

site/examples/single-view/vector/index.zh.md

@@ -1,4 +1,4 @@
 ---
 title: Vector
-order: 12
+order: 13
 ---

src/runtime/scale.ts

@@ -226,6 +226,7 @@ function inferScaleDomain(
     case 'log':
     case 'pow':
     case 'sqrt':
+    case 'quantize':
     case 'threshold': {
       const [d0, d1] = inferDomainQ(value, options);
       return [domainMin || d0, domainMax || d1];