docs: 新增demo「想如何度过一天（抽象版）」 (#1385)

s2-site/examples/case/art/demo/meta.json

@@ -11,6 +11,14 @@
         "en": "Mosaic"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CT6lTXeKB6/20690319-81f8-4847-9247-c1f7e7f2d9d1.png"
+    },
+    {
+      "filename": "time-spend-abstract.tsx",
+      "title": {
+        "zh": "想如何度过一天(抽象版)",
+        "en": "How to spend the day"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/lN8USZvMEV/f6b5e06f-5def-4db8-a9c8-826e347d0fa1.png"
     }
   ]
 }

s2-site/examples/case/art/demo/mosaic.tsx

@@ -3,8 +3,7 @@ import ReactDOM from 'react-dom';
 import { SheetComponent } from '@antv/s2-react';
 import '@antv/s2-react/dist/style.min.css';
 
-// Respect to Fuck Design (https://github.com/fuck-design/fuck-design)
-// more Info https://observablehq.com/@pearmini/draw-fuck-design-logo-with-antv-s2
+// more Info https://observablehq.com/@pearmini/mosaic-antv-s2
 
 fetch(
   'https://gw.alipayobjects.com/os/bmw-prod/7f6ebbb4-ffeb-4f6c-a763-6faa8c0ccf7a.json',
@@ -18,60 +17,64 @@ fetch(
       conditions: {
         background: [
           {
-            field: "color",
-            mapping: (fill) => ({ fill })
-          }
-        ]
+            field: 'color',
+            mapping: (fill) => ({ fill }),
+          },
+        ],
       },
       interaction: {
         hoverHighlight: false,
-        hoverFocus: false
+        hoverFocus: false,
       },
       style: {
-        layoutWidthType: "compact",
+        layoutWidthType: 'compact',
         colCfg: {
           height: 0,
           widthByFieldValue: {
-            color: 23
-          }
+            color: 23,
+          },
         },
         cellCfg: {
-          height: 23
-        }
-      }
+          height: 23,
+        },
+      },
     };
 
     const customTheme = {
       rowCell: {
         cell: {
           backgroundColor: dataCfg.data[0].color,
           horizontalBorderColorOpacity: 0,
-          verticalBorderColorOpacity: 0
-        }
+          verticalBorderColorOpacity: 0,
+        },
       },
       dataCell: {
         text: {
-          opacity: 0
+          opacity: 0,
         },
         cell: {
           horizontalBorderColorOpacity: 0,
-          verticalBorderColorOpacity: 0
-        }
+          verticalBorderColorOpacity: 0,
+        },
       },
       splitLine: {
         horizontalBorderColorOpacity: 0,
-        verticalBorderColorOpacity: 0
+        verticalBorderColorOpacity: 0,
       },
       background: {
         color: dataCfg.data[0].color,
       },
       scrollBar: {
-        size: 0
-      }
+        size: 0,
+      },
     };
 
     ReactDOM.render(
-      <SheetComponent dataCfg={dataCfg} options={s2Options} themeCfg={{ theme: customTheme }} />,
+      <SheetComponent
+        dataCfg={dataCfg}
+        options={s2Options}
+        themeCfg={{ theme: customTheme }}
+      />,
       document.getElementById('container'),
     );
   });

s2-site/examples/case/art/demo/time-spend-abstract.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import insertCss from 'insert-css';
+import { SheetComponent } from '@antv/s2-react';
+import { DataCell } from '@antv/s2';
+import '@antv/s2-react/dist/style.min.css';
+
+const paletteLegendMap = [
+  {
+    text: '睡觉',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*zGyiSa2A8ZMAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '工作',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*RdyWRpg3hRAAAAAAAAAAAAAAARQnAQ',
+  },
+
+  {
+    text: '上学',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '吃饭',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*XHHcSZxmR7gAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '学习',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*1p5iTYDCkKEAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '娱乐',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*ZRaUT55QCaoAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '运动',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*xpO5Sawk8YIAAAAAAAAAAAAAARQnAQ',
+  },
+  {
+    text: '其他',
+    img: 'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ',
+  },
+];
+// 自定义单元格
+class CustomDataCell extends DataCell {
+  drawTextShape() {
+    const { fieldValue } = this.meta;
+    const url =
+      paletteLegendMap.find((v) => v.text === fieldValue)?.img ??
+      'https://gw.alipayobjects.com/mdn/rms_56cbb2/afts/img/A*e5A3SKifw1EAAAAAAAAAAAAAARQnAQ';
+    const img = new Image();
+    img.src = url;
+    const { x, y, width, height } = this.meta;
+    img.onload = () => {
+      this.textShape = this.addShape('image', {
+        attrs: {
+          x: x + (width - img?.width) / 2,
+          y: y + (height - img?.height) / 2,
+          width: img?.width ?? width,
+          height: img?.height ?? height,
+          img: url,
+        },
+      });
+    };
+  }
+}
+
+fetch('../data/time-spend.json')
+  .then((res) => res.json())
+  .then((s2DataConfig) => {
+    const s2Theme = {
+      colCell: {
+        text: {
+          opacity: 0,
+        },
+        bolderText: {
+          opacity: 0,
+        },
+        cell: {
+          backgroundColor: '#020138',
+        },
+      },
+      rowCell: {
+        text: {
+          opacity: 0,
+        },
+        bolderText: {
+          opacity: 0,
+        },
+        cell: {
+          horizontalBorderColorOpacity: 0,
+          verticalBorderColorOpacity: 0,
+          backgroundColor: '#020138',
+          interactionState: {
+            // -------------- hover -------------------
+            hover: {
+              backgroundColor: 'rgba(255,255,255,0.18)',
+            },
+            // -------------- selected -------------------
+            selected: {
+              backgroundColor: 'rgba(255,255,255,0.18)',
+            },
+          },
+        },
+      },
+      dataCell: {
+        cell: {
+          horizontalBorderColorOpacity: 0,
+          verticalBorderColorOpacity: 0,
+          crossBackgroundColor: '#020138',
+          backgroundColor: '#020138',
+          interactionState: {
+            // -------------- hover -------------------
+            hover: {
+              backgroundColor: 'rgba(255,255,255,0.18)',
+            },
+            // -------------- keep hover -------------------
+            hoverFocus: {
+              backgroundColor: 'rgba(255, 255, 255, 0.18)',
+              borderOpacity: 0,
+            },
+            // -------------- selected -------------------
+            selected: {
+              backgroundColor: 'rgba(255,255,255,0.18)',
+            },
+          },
+        },
+      },
+      cornerCell: {
+        bolderText: {
+          opacity: 0,
+        },
+        cell: {
+          horizontalBorderColorOpacity: 0,
+          verticalBorderColorOpacity: 0,
+          backgroundColor: '#020138',
+        },
+      },
+      splitLine: {
+        horizontalBorderColorOpacity: 0,
+        verticalBorderColorOpacity: 0,
+      },
+      background: {
+        color: '#020138',
+      },
+    };
+
+    const s2Options = {
+      width: 1150,
+      height: 720,
+      showDefaultHeaderActionIcon: false,
+      dataCell: (viewMeta) => {
+        return new CustomDataCell(viewMeta, viewMeta?.spreadsheet);
+      },
+      interaction: {
+        hoverHighlight: false,
+      },
+      style: {
+        layoutWidthType: 'compact',
+        colCfg: {
+          hideMeasureColumn: true,
+          height: 0,
+        },
+        cellCfg: {
+          height: 80,
+        },
+      },
+    };
+    const PaletteLegend = () => (
+      <div className="palette">
+        {paletteLegendMap.map((value, key) => (
+          <div key={key} className="palette-group">
+            <img className="palette-img" src={value.img} />
+            <span className="palette-text">{value.text}</span>
+          </div>
+        ))}
+      </div>
+    );
+    ReactDOM.render(
+      <div className="sheet-wrapper">
+        <PaletteLegend />
+        <SheetComponent
+          dataCfg={s2DataConfig}
+          options={s2Options}
+          sheetType="pivot"
+          themeCfg={{ theme: s2Theme }}
+        />
+      </div>,
+      document.getElementById('container'),
+    );
+  });
+
+insertCss(`
+  .sheet-wrapper {
+    background: #010138;
+    padding: 16px;
+  }
+  .palette {
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+    margin-bottom: 16px;
+    margin-left: 88px;
+  }
+  .palette-group {
+    display: flex;
+  }
+  .palette-img {
+    width: auto;
+    height: 20px;
+  }
+  .palette-text {
+    color: #FFF;
+    width: 50px;
+    font-size: 12px;
+    padding-left: 8px;
+  }
+`);

s2-site/examples/case/comparison/demo/time-spend.tsx

@@ -293,7 +293,7 @@ insertCss(`
     display: flex;
     width: 100%;
     overflow: hidden;
-        margin-bottom: 16px;
+    margin-bottom: 16px;
   }
   .palette-group {
     display: flex;