docs: add mini charts demo (#5042)

site/examples/general/mini/demo/area.ts

@@ -0,0 +1,33 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
+  546, 983, 340, 539, 243, 226, 192,
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 480,
+  height: 80,
+  padding: 8,
+});
+
+chart.data(data);
+
+chart
+  .area()
+  .encode('x', (_, idx) => idx)
+  .encode('y', (d) => d)
+  .encode('shape', 'smooth')
+  .scale('y', { zero: true })
+  .style('fill', 'linear-gradient(-90deg, white 0%, darkgreen 100%)')
+  .style('fillOpacity', 0.6)
+  .animate('enter', { type: 'fadeIn' })
+  .axis(false);
+
+chart.interaction('tooltip', {
+  render: (e, { title, items }) => items[0].value,
+});
+
+chart.render();

site/examples/general/mini/demo/column.ts

@@ -0,0 +1,44 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
+  546, 983, 340, 539, 243, 226, 192,
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 480,
+  height: 80,
+  padding: 8,
+});
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', (_, idx) => idx)
+  .encode('y', (d) => d)
+  .axis(false);
+
+chart
+  .lineY()
+  .data([700])
+  .style('arrow', true)
+  .style('stroke', 'red')
+  .style('lineDash', [2, 2])
+  .style('arrow', true)
+  .label({
+    text: 'value = 700',
+    position: 'right',
+    dx: -10,
+    style: {
+      textBaseline: 'bottom',
+    },
+  });
+
+chart.interaction('tooltip', {
+  render: (e, { title, items }) => items[0].value,
+});
+
+chart.render();

site/examples/general/mini/demo/line.ts

@@ -0,0 +1,42 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592, 492, 467, 513,
+  546, 983, 340, 539, 243, 226, 192,
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 480,
+  height: 80,
+  padding: 8,
+});
+
+chart.data(data);
+
+chart
+  .line()
+  .encode('x', (_, idx) => idx)
+  .encode('y', (d) => d)
+  .encode('shape', 'smooth')
+  .animate('enter', { type: 'fadeIn' })
+  .label({
+    selector: 'last',
+    text: (d) => d,
+    textAlign: 'right',
+    textBaseline: 'bottom',
+    dx: -10,
+    dy: -10,
+    connector: true,
+    style: {
+      fontSize: 10,
+    },
+  })
+  .axis(false);
+
+chart.interaction('tooltip', {
+  render: (e, { title, items }) => items[0].value,
+});
+
+chart.render();

site/examples/general/mini/demo/meta.json

@@ -0,0 +1,56 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "迷你折线图",
+        "en": "Mini line"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*7mspQrtT-VYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "area.ts",
+      "title": {
+        "zh": "迷你面积图",
+        "en": "Mini area"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*e7gFTKK4RXwAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "column.ts",
+      "title": {
+        "zh": "迷你柱形图",
+        "en": "Mini column"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mVxXQZLTI8UAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "pie.ts",
+      "title": {
+        "zh": "迷你饼图",
+        "en": "Mini pie"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ry-9RLpnNbAAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "progress.ts",
+      "title": {
+        "zh": "迷你进度条",
+        "en": "Mini progress"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ZJ6JSL4WFt8AAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "ring.ts",
+      "title": {
+        "zh": "迷你环图",
+        "en": "Mini ring"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9K68TYbHx7IAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/general/mini/demo/pie.ts

@@ -0,0 +1,36 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 100,
+  height: 100,
+  padding: 8,
+});
+
+chart.coordinate({ type: 'theta' });
+
+chart
+  .interval()
+  .data([
+    { id: 'c', value: 526 },
+    { id: 'sass', value: 220 },
+    { id: 'php', value: 325 },
+    { id: 'elixir', value: 561 },
+    { id: 'rust', value: 54 },
+  ])
+  .transform({ type: 'stackY' })
+  .encode('y', 'value')
+  .encode('color', 'id')
+  .style('radius', 4)
+  .style('stroke', '#fff')
+  .style('lineWidth', 1)
+  .animate('enter', { type: 'waveIn' })
+  .axis(false)
+  .legend(false);
+
+chart.interaction('tooltip', {
+  render: (e, { title, items }) => items[0].value,
+});
+
+chart.render();

site/examples/general/mini/demo/progress.ts

@@ -0,0 +1,38 @@
+import { Chart } from '@antv/g2';
+
+const progress = 0.7;
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 480,
+  height: 60,
+  padding: 8,
+});
+
+chart.coordinate({
+  transform: [{ type: 'transpose' }],
+});
+
+chart
+  .interval()
+  .data([1, progress])
+  .encode('y', (d) => d)
+  .encode('color', (d, idx) => idx)
+  .scale('y', { domain: [0, 1] })
+  .scale('color', { range: ['#000000', '#a0ff03'] })
+  .legend(false)
+  .axis(false);
+
+chart.text().style({
+  text: `${progress * 100}%`,
+  x: '50%',
+  y: '50%',
+  textAlign: 'center',
+  fontSize: 16,
+  fontStyle: 'bold',
+});
+
+chart.interaction('tooltip', false);
+
+chart.render();

site/examples/general/mini/demo/ring.ts

@@ -0,0 +1,37 @@
+import { Chart } from '@antv/g2';
+
+const progress = 0.7;
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  width: 100,
+  height: 100,
+  padding: 8,
+});
+
+chart.coordinate({ type: 'theta', innerRadius: 0.7 });
+
+chart
+  .interval()
+  .data([1, progress])
+  .encode('y', (d) => d)
+  .encode('color', (d, idx) => idx)
+  .scale('y', { domain: [0, 1] })
+  .scale('color', { range: ['#000000', '#a0ff03'] })
+  .animate('enter', { type: 'waveIn' })
+  .axis(false)
+  .legend(false);
+
+chart.text().style({
+  text: `${progress * 100}%`,
+  x: '50%',
+  y: '50%',
+  textAlign: 'center',
+  fontSize: 16,
+  fontStyle: 'bold',
+});
+
+chart.interaction('tooltip', false);
+
+chart.render();

site/examples/general/mini/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Mini charts
+order: 18
+---

site/examples/general/mini/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 迷你图
+order: 18
+---