网站 demo cases 更新 (#1934)

* refactor(demos): 一些 demo 和截图的优化 * feat(demo): 一波 demo 的更新 * fix(pie): 饼图类型定义 * refactor(demo): demo 更新 * fix(pie): 移除饼图 labelType 类型定义
antvis · Nov 17, 2020 · a086405 · a086405
1 parent d6255e0
commit a086405
Show file tree

Hide file tree

Showing 22 changed files with 481 additions and 158 deletions.
diff --git a/examples/case/customize/demo/meta.json b/examples/case/customize/demo/meta.json
@@ -27,6 +27,14 @@
         "en": "Custom tooltip"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5bPrQK5F-toAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "pie/basic/basic.ts",
+      "title": {
+        "zh": "自定义 Tooltip",
+        "en": "Custom tooltip"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5bPrQK5F-toAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/case/customize/index.en.md b/examples/case/customize/index.en.md
@@ -1,4 +1,4 @@
 ---
 title: Custom Charts
-order: 1
+order: 2
 ---
diff --git a/examples/case/customize/index.zh.md b/examples/case/customize/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 自定义图表
-order: 1
+order: 2
 ---
diff --git a/examples/case/multi-view/demo/drinks.ts b/examples/case/multi-view/demo/drinks.ts
@@ -22,6 +22,7 @@ const yearData = [
 const labChart = new Lab.MultiView('container', {
   height: 500,
   padding: 'auto',
+  tooltip: { showMarkers: false },
   views: [
     {
       data: data.map((d) => ({ type: d[0], value: d[1] })),

diff --git a/examples/case/multi-view/demo/series-columns.ts b/examples/case/multi-view/demo/series-columns.ts
@@ -15,6 +15,7 @@ const semanticGreen = '#30BF78'; /** 语义绿 */
 // Step 2: 创建图表
 const labPlot = new Lab.MultiView('container', {
   appendPadding: 8,
+  tooltip: { showMarkers: false },
   views: [
     {
       region: { start: { x: 0, y: 0 }, end: { x: 1 / 2, y: 2 / 5 } },
@@ -32,7 +33,11 @@ const labPlot = new Lab.MultiView('container', {
           xField: 'area',
           yField: 'value',
           mapping: {
-            style: ({ value }) => ({ fill: value > 0.3 ? semanticGreen : defaultGrey, lineWidth: 1 }),
+            color: ({ area }) => {
+              const value = data.find((d) => d.area === area).value;
+              return value > 0.3 ? semanticGreen : defaultGrey;
+            },
+            style: { lineWidth: 1 },
           },
           label: {
             position: 'left',
@@ -58,7 +63,11 @@ const labPlot = new Lab.MultiView('container', {
           xField: 'area',
           yField: 'value',
           mapping: {
-            style: ({ value }) => ({ fillOpacity: 0, stroke: value > 0.3 ? semanticGreen : defaultGrey, lineWidth: 1 }),
+            color: ({ area }) => {
+              const value = data.find((d) => d.area === area).value;
+              return value > 0.3 ? semanticGreen : defaultGrey;
+            },
+            style: { lineWidth: 1 },
           },
           label: { position: 'left', formatter: ({ value }) => `${(value * 100).toFixed(1)}%` },
         },
@@ -82,7 +91,11 @@ const labPlot = new Lab.MultiView('container', {
           xField: 'area',
           yField: 'value',
           mapping: {
-            style: ({ value }) => ({ fillOpacity: 0 }),
+            color: ({ area }) => {
+              const value = data.find((d) => d.area === area).value;
+              return value > 0.3 ? semanticGreen : defaultGrey;
+            },
+            style: { fillOpacity: 0 },
           },
           label: { position: 'right', formatter: ({ value }) => `${(value * 100).toFixed(1)}%` },
         },
@@ -153,7 +166,10 @@ const labPlot = new Lab.MultiView('container', {
             },
           },
           mapping: {
-            style: ({ value }) => ({ fill: value > 0.3 ? semanticGreen : defaultGrey }),
+            color: ({ area }) => {
+              const value = data.find((d) => d.area === area).value;
+              return value > 0.3 ? semanticGreen : defaultGrey;
+            },
           },
         },
       ],

diff --git a/examples/case/multi-view/index.en.md b/examples/case/multi-view/index.en.md
@@ -1,4 +1,4 @@
 ---
 title: Multi-View Charts
-order: 0
+order: 1
 ---
diff --git a/examples/case/multi-view/index.zh.md b/examples/case/multi-view/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 多图层图表
-order: 0
+order: 1
 ---
diff --git a/examples/case/statistical-charts/demo/line.ts b/examples/case/statistical-charts/demo/line.ts
@@ -0,0 +1,259 @@
+import { Area, Lab } from '@antv/g2plot';
+
+const color = ['#5B8FF9', '#5D7092'];
+
+// 创建容器2
+const div = document.createElement('div');
+div.id = 'container2';
+document.querySelector('#container').parentNode.appendChild(div);
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/b6fde479-c353-47de-a4c0-442d58474b9d.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const area = new Area('container', {
+      data,
+      xField: 'sessions',
+      yField: 'visits',
+      seriesField: 'type',
+      color,
+      padding: 'auto',
+      isStack: false,
+      appendPadding: [0, 0, 30, 0],
+      height: 400,
+      tooltip: { shared: true },
+      meta: {
+        visits: {
+          min: 30,
+          max: 180,
+          tickItnerval: 30,
+        },
+        sessions: {
+          range: [0.05, 0.95],
+        },
+      },
+      yAxis: {
+        grid: { line: { style: { lineDash: [4, 2], stroke: '#ddd' } } },
+        tickLine: { style: { stroke: '#ddd' } },
+      },
+      xAxis: false,
+      line: {},
+      areaStyle: {
+        fillOpacity: 0.5,
+        fill: `l(90) 0:${color[0]} 0.8:#CDDDFD 1:rgba(255,255,255,0.2)`,
+      },
+      legend: { position: 'top' },
+    });
+    area.render();
+  });
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/b0b850d4-a8ce-4abe-8466-232a677af79c.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const uvData = data.uniqueSessions.map((d, idx) => ({
+      date: `${idx}`,
+      uv: d,
+    }));
+    const pvData = data.pageSessions.map((d, idx) => ({
+      date: `${idx}`,
+      pv: d,
+    }));
+    const directTrafficData = data.directTraffic.map((d, idx) => ({
+      date: `${idx}`,
+      directTraffic: d,
+    }));
+    const referringSitesData = data.referringSites.map((d, idx) => ({
+      date: `${idx}`,
+      referringSites: d,
+    }));
+    const labChart = new Lab.MultiView('container2', {
+      height: 200,
+      appendPadding: [25, 0, 0, 0],
+      views: [
+        {
+          region: { start: { x: 0, y: 0 }, end: { x: 11 / 24, y: 1 / 4 } },
+          data: uvData,
+          meta: {
+            uv: {
+              min: 0,
+            },
+          },
+          geometries: [
+            { type: 'area', xField: 'date', yField: 'uv', mapping: {} },
+            { type: 'line', xField: 'date', yField: 'uv', mapping: {} },
+            {
+              type: 'point',
+              xField: 'date',
+              yField: 'uv',
+              mapping: {
+                style: ({ uv }) => {
+                  if (uv === Math.min(...uvData.map((d) => d.uv))) {
+                    return {
+                      r: 2,
+                      fill: 'rgba(0,0,0,0.85)',
+                      lineWidth: 0,
+                    };
+                  }
+                  return { r: 0 };
+                },
+              },
+            },
+          ],
+          annotations: [
+            {
+              type: 'text',
+              content: 'Unique Sessions',
+              position: ['min', 'max'],
+              offsetY: -8,
+              style: { textAlign: 'left' },
+            },
+            {
+              type: 'text',
+              content: `${uvData.reduce((a, b) => a + b.uv, 0)}`,
+              position: ['max', 'median'],
+              offsetX: 4,
+              style: { textAlign: 'left' },
+            },
+          ],
+        },
+        {
+          region: { start: { x: 13 / 24, y: 0 }, end: { x: 17 / 18, y: 1 / 4 } },
+          data: pvData,
+          meta: {
+            pv: {
+              min: 20,
+            },
+          },
+          geometries: [
+            { type: 'area', xField: 'date', yField: 'pv', mapping: {} },
+            { type: 'line', xField: 'date', yField: 'pv', mapping: {} },
+            {
+              type: 'point',
+              xField: 'date',
+              yField: 'pv',
+              mapping: {
+                style: ({ pv }) => {
+                  if (pv === Math.min(...pvData.map((d) => d.pv))) {
+                    return {
+                      r: 2,
+                      fill: 'rgba(0,0,0,0.85)',
+                      lineWidth: 0,
+                    };
+                  }
+                  return { r: 0 };
+                },
+              },
+            },
+          ],
+          annotations: [
+            {
+              type: 'text',
+              content: 'Page Sessions',
+              position: ['min', 'max'],
+              offsetY: -8,
+              style: { textAlign: 'left' },
+            },
+            {
+              type: 'text',
+              content: `${pvData.reduce((a, b) => a + b.pv, 0)}`,
+              position: ['max', 'median'],
+              offsetX: 8,
+              style: { textAlign: 'left' },
+            },
+          ],
+        },
+        {
+          region: { start: { x: 0 / 24, y: 3 / 8 }, end: { x: 11 / 24, y: 5 / 8 } },
+          data: directTrafficData,
+          meta: {
+            directTraffic: {
+              min: 2000,
+            },
+          },
+          geometries: [
+            { type: 'area', xField: 'date', yField: 'directTraffic', mapping: {} },
+            { type: 'line', xField: 'date', yField: 'directTraffic', mapping: {} },
+            {
+              type: 'point',
+              xField: 'date',
+              yField: 'directTraffic',
+              mapping: {
+                style: ({ directTraffic }) => {
+                  if (directTraffic === Math.min(...directTrafficData.map((d) => d.directTraffic))) {
+                    return {
+                      r: 2,
+                      fill: 'rgba(0,0,0,0.85)',
+                      lineWidth: 0,
+                    };
+                  }
+                  return { r: 0 };
+                },
+              },
+            },
+          ],
+          annotations: [
+            {
+              type: 'text',
+              content: 'Direct Traffic',
+              position: ['min', 'max'],
+              offsetY: -8,
+              style: { textAlign: 'left' },
+            },
+            {
+              type: 'text',
+              position: ['max', 'median'],
+              content: `${directTrafficData.reduce((a, b) => a + b.directTraffic, 0)}`,
+              offsetX: 8,
+              style: { textAlign: 'left' },
+            },
+          ],
+        },
+        {
+          region: { start: { x: 13 / 24, y: 3 / 8 }, end: { x: 17 / 18, y: 5 / 8 } },
+          data: referringSitesData,
+          meta: {
+            referringSites: {
+              min: 2800,
+            },
+          },
+          geometries: [
+            { type: 'area', xField: 'date', yField: 'referringSites', mapping: {} },
+            { type: 'line', xField: 'date', yField: 'referringSites', mapping: {} },
+            {
+              type: 'point',
+              xField: 'date',
+              yField: 'referringSites',
+              mapping: {
+                style: ({ referringSites }) => {
+                  if (referringSites === Math.min(...referringSitesData.map((d) => d.referringSites))) {
+                    return {
+                      r: 2,
+                      fill: 'rgba(0,0,0,0.85)',
+                      lineWidth: 0,
+                    };
+                  }
+                  return { r: 0 };
+                },
+              },
+            },
+          ],
+          annotations: [
+            {
+              type: 'text',
+              content: 'Referring Sites',
+              position: ['min', 'max'],
+              offsetY: -8,
+              style: { textAlign: 'left' },
+            },
+            {
+              type: 'text',
+              content: `${referringSitesData.reduce((a, b) => a + b.referringSites, 0)}`,
+              position: ['max', 'median'],
+              offsetX: 8,
+              style: { textAlign: 'left' },
+            },
+          ],
+        },
+      ],
+    });
+    labChart.render();
+  });
diff --git a/examples/case/statistical-charts/demo/meta.json b/examples/case/statistical-charts/demo/meta.json
@@ -0,0 +1,25 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "line.ts",
+      "title": {
+        "zh": "折线图(趋势)",
+        "en": "Statistical Charts-Line"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*MikuQoOtm1cAAAAAAAAAAAAAARQnAQ"
+    }, 
+    {
+      "filename": "pie.ts",
+      "title": {
+        "zh": "饼图(占比)",
+        "en": "Statistical Charts-Pie"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*OOnhQI4Sme4AAAAAAAAAAAAAARQnAQ"
+
+    }
+  ]
+}