docs: 新增马赛克图 (#1382)

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

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "💡 灵光乍现",
+    "en": "Art Work"
+  },
+  "demos": [
+    {
+      "filename": "mosaic.tsx",
+      "title": {
+        "zh": "马赛克",
+        "en": "Mosaic"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/CT6lTXeKB6/20690319-81f8-4847-9247-c1f7e7f2d9d1.png"
+    }
+  ]
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+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
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/7f6ebbb4-ffeb-4f6c-a763-6faa8c0ccf7a.json',
+)
+  .then((res) => res.json())
+  .then((dataCfg) => {
+    const s2Options = {
+      width: 700,
+      height: 575,
+      frozenRowHeader: false,
+      conditions: {
+        background: [
+          {
+            field: "color",
+            mapping: (fill) => ({ fill })
+          }
+        ]
+      },
+      interaction: {
+        hoverHighlight: false,
+        hoverFocus: false
+      },
+      style: {
+        layoutWidthType: "compact",
+        colCfg: {
+          height: 0,
+          widthByFieldValue: {
+            color: 23
+          }
+        },
+        cellCfg: {
+          height: 23
+        }
+      }
+    };
+
+    const customTheme = {
+      rowCell: {
+        cell: {
+          backgroundColor: dataCfg.data[0].color,
+          horizontalBorderColorOpacity: 0,
+          verticalBorderColorOpacity: 0
+        }
+      },
+      dataCell: {
+        text: {
+          opacity: 0
+        },
+        cell: {
+          horizontalBorderColorOpacity: 0,
+          verticalBorderColorOpacity: 0
+        }
+      },
+      splitLine: {
+        horizontalBorderColorOpacity: 0,
+        verticalBorderColorOpacity: 0
+      },
+      background: {
+        color: dataCfg.data[0].color,
+      },
+      scrollBar: {
+        size: 0
+      }
+    };
+
+    ReactDOM.render(
+      <SheetComponent dataCfg={dataCfg} options={s2Options} themeCfg={{ theme: customTheme }} />,
+      document.getElementById('container'),
+    );
+  });

s2-site/examples/case/art/index.en.md

@@ -0,0 +1,5 @@
+---
+title: Art Work
+order: 6
+---
+`markdown:examples/case/art/index.zh.md`

s2-site/examples/case/art/index.zh.md

@@ -0,0 +1,5 @@
+---
+title: 💡灵光乍现
+order: 6
+---
+