Demo/multi view (#1985)

* refactor(demo): 隐藏多view实验室的多系列column 的demo * refactor(demo): 隐藏星空诺贝尔奖的按钮 * refactor(demo): 更新 demo 名称 * fix(demo): 修改多view实验室的文档 * refactor(demo): 修改两个截图
antvis · Nov 21, 2020 · 66d8341 · 66d8341
1 parent 2375272
commit 66d8341
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 75 deletions.
diff --git a/examples/case/customize/demo/meta.json b/examples/case/customize/demo/meta.json
@@ -7,8 +7,8 @@
     {
       "filename": "line.ts",
       "title": {
-        "zh": "自定义折线图",
-        "en": "Custom line"
+        "zh": "用户会话",
+        "en": "User session"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_iXASYTyIzcAAAAAAAAAAAAAARQnAQ"
     },

diff --git a/examples/case/multi-view/demo/nobel-prize.ts b/examples/case/multi-view/demo/nobel-prize.ts
@@ -5,8 +5,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c
   .then((data) => data.json())
   .then((data) => {
     const COLORS = ['#ff93a7', '#ff9300', '#bb82f3', '#6349ec', '#0074ff'];
-    const START_BTN = 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*rhl0QYDkV7EAAAAAAAAAAAAAARQnAQ';
-    const STOP_BTN = 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*2F9fRr2RfEEAAAAAAAAAAAAAARQnAQ';
     let currentYear = 1901;
     /** 散点图数据（各国诺贝尔奖获奖者的年龄分布） */
     const getPointViewData = (year) => {
@@ -61,7 +59,7 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c
           region: { start: { x: 0, y: 0.35 }, end: { x: 1, y: 0.65 } },
           coordinate: {
             type: 'theta',
-            cfg: { innerRadius: 0.89, radius: 0.96 },
+            cfg: { innerRadius: 0.78, radius: 0.96 },
           },
           geometries: [
             {
@@ -75,24 +73,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c
               adjust: { type: 'stack' },
             },
           ],
-          annotations: [
-            {
-              type: 'html',
-              position: ['50%', '50%'],
-              style: {
-                textAlign: 'center',
-                fill: 'rgba(255,255,255,0.85)',
-              },
-              html: (container, view) => {
-                const width = Math.min(view.getCoordinate().getWidth(), view.getCoordinate().getHeight()) * 0.2;
-                return `<div id="btn" style="width=${width * 1.2}px;height=${
-                  width * 1.2
-                }px;color: rgba(255,255,2550.85);transform: translate(-50%,-50%);cursor: pointer;">
-                  <img alt="image" width=${width} height=${width} src=${START_BTN}>
-                </div>`;
-              },
-            },
-          ],
         },
         {
           data: getPointViewData(currentYear),
@@ -291,11 +271,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c
 
     let interval;
     function start() {
-      if (!interval) {
-        if (document.querySelector('#btn').querySelector('img')) {
-          document.querySelector('#btn').querySelector('img').setAttribute('src', START_BTN);
-        }
-      }
       interval = setInterval(() => {
         if (currentYear < 2016) {
           currentYear += 1;
@@ -308,9 +283,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/738147f2-2cef-4591-8e0d-4fd5268c
     function end() {
       clearInterval(interval);
       interval = null;
-      if (document.querySelector('#btn').querySelector('img')) {
-        document.querySelector('#btn').querySelector('img').setAttribute('src', STOP_BTN);
-      }
     }
 
     start();

diff --git a/examples/case/multi-view/demo/series-columns.ts b/examples/case/multi-view/demo/series-columns.ts
@@ -49,6 +49,7 @@ labPlot.update({
           },
           label: {
             position: 'left',
+            layout: { type: 'adjust-color' },
             formatter: ({ value }) => `${(value * 100).toFixed(1)}%`,
             style: { fill: '#fff' },
           },
@@ -75,10 +76,15 @@ labPlot.update({
               const value = data.find((d) => d.area === area).value;
               return value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey;
             },
-            style: { lineWidth: 1 },
+            style: ({ value }) => {
+              return {
+                lineWidth: 1,
+                fillOpacity: 0,
+                stroke: value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey,
+              };
+            },
           },
           label: {
-            layout: { type: 'adjust-color' },
             position: 'left',
             formatter: ({ value }) => `${(value * 100).toFixed(1)}%`,
           },
@@ -99,46 +105,44 @@ labPlot.update({
       coordinate: { cfg: { isTransposed: true } },
       geometries: [
         {
-          type: 'interval',
+          type: 'point',
           xField: 'area',
           yField: 'value',
           mapping: {
             color: ({ area }) => {
               const value = data.find((d) => d.area === area).value;
               return value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey;
             },
-            style: { fillOpacity: 0 },
+            style: ({ value }) => {
+              return {
+                r: 4,
+                strokeOpacity: 0,
+                fill: value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey,
+              };
+            },
+          },
+          label: {
+            offsetY: -12,
+            offsetX: 8,
+            style: { textAlign: 'right' },
+            position: 'top',
+            formatter: ({ value }) => `${(value * 100).toFixed(1)}%`,
           },
-          label: { position: 'right', formatter: ({ value }) => `${(value * 100).toFixed(1)}%` },
         },
       ],
 
       annotations: [
-        ...data.map((d) => {
-          return {
-            type: 'html',
-            position: d,
-            offsetX: -1,
-            html: () =>
-              `<div style="border:1.5px solid ${
-                d.value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey
-              };width:12px;height:12px;transform:translateY(-50%);border-radius:12px;"></div>`,
-            style: () => {
-              return {
-                fill: d.value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey,
-                fontWeight: 800,
-              };
-            },
-          };
-        }),
         ...data.map((d) => {
           return {
             type: 'line',
             start: [d.area, 'min'],
-            end: [d.area, d.value],
+            end: [d.area, 'max'],
+            top: false,
             style: {
-              lineWidth: 4,
-              stroke: d.value > 0.3 ? labPlot.chart.getTheme().defaultColor : defaultGrey,
+              lineWidth: 2,
+              radius: 2,
+              lineDash: [2, 4],
+              stroke: defaultGrey,
             },
           };
         }),
@@ -191,8 +195,8 @@ labPlot.update({
       annotations: data.map((d, idx) => {
         return {
           type: 'line',
-          start: [3 - idx - 0.4, 'min'],
-          end: [3 - idx - 0.4, 'max'],
+          start: [3 - idx - 0.25, 'min'],
+          end: [3 - idx - 0.25, 'max'],
           style: {
             lineWidth: 2,
             stroke: '#595959',
@@ -202,8 +206,5 @@ labPlot.update({
     },
   ],
 });
-labPlot.chart.theme({
-  columnWidthRatio: 0.85,
-});
 // Step 3: 渲染图表
 labPlot.render();
diff --git a/examples/case/multi-view/design.en.md b/examples/case/multi-view/design.en.md
diff --git a/examples/case/multi-view/design.zh.md b/examples/case/multi-view/design.zh.md
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
+title: Multi-View Charts(beta)
 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: 多图层图表
+title: 多图层图表(beta)
 order: 1
 ---
diff --git a/examples/case/statistical-scenario/demo/meta.json b/examples/case/statistical-scenario/demo/meta.json
@@ -18,7 +18,7 @@
         "zh": "场景漏斗图",
         "en": "Funnel Scenario"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kqkXF8ap7d/24934434-0067-4c1f-9c22-e51b27beb3f6.png"
     },
     {
       "filename": "pie.ts",
@@ -35,7 +35,7 @@
         "zh": "漏斗图(趋势)",
         "en": "Statistical Charts-Funnel"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Tf6bTKBux8gAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/yYAiTdM%242e/case-funnel.png"
     }
   ]
 }