feat(detail): update Antv home update dumi-theme-antv

antvis · Nov 14, 2023 · f3cf1ea · f3cf1ea
1 parent 981f9d9
commit f3cf1ea
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 58 deletions.
diff --git a/site/components/Banner/Banner.module.less b/site/components/Banner/Banner.module.less
@@ -1,3 +1,8 @@
+@font-face {
+  font-family: AlibabaPuHuiTiRHeavy;
+  src: url(../../public/Alibaba-PuHuiTi-Heavy.otf);
+}
+
 .commonFlexConfig {
   display: flex;
   align-items: center;
@@ -11,7 +16,7 @@
   background-size: cover;
 
   .leftBackground,.rightBackground {
-    width: 900px;
+    width: 765px;
     height: 100%;
     position: absolute;
     top: 80px;
@@ -31,7 +36,7 @@
 
 
   .header {
-    height: 690px;
+    height: 670px;
     position: relative;
     font-family: PingFangSC;
   }
@@ -48,10 +53,10 @@
 
   .mainTitle {
     font-size: 64px;
-    font-weight: 900;
     color: #000;
     text-align: center;
     margin-top: 138px;
+    font-family: AlibabaPuHuiTiRHeavy;
 
     >span {
       color: #691EFF;
@@ -127,7 +132,7 @@
     .message {
       &:extend(.commonFlexConfig);
       min-height: 114px;
-      width: calc((100vw - 280px - 26px) / 3);
+      width: calc((100vw - 360px - 26px) / 3);
       min-width: 338px; 
       max-width: 551px;
       background-color: #FFFFFF;

diff --git a/site/components/ComplexCharts/index.module.less b/site/components/ComplexCharts/index.module.less
@@ -53,37 +53,20 @@
   }
 
   .content {
-    width: calc(100vw - 240px);
+    width: calc(100vw - 360px);
     max-width: 1680px;
     min-width: 1040px;
+    height: 370px;
     border-radius: 16px;
     box-sizing: border-box;
-    padding: 24px;
     background-image: linear-gradient(111deg, #332F4F 0%, #28243F 100%);
     box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.20);
-
-    .message {
-      height: 24px;
-      font-family: PingFangSC;
-      font-weight: 500;
-      font-size: 16px;
-      color: #fff;
-      letter-spacing: 0;
-      line-height: 24px;
-      margin-bottom: 10px;
-    }
-
-    .chart {
-      height: calc(100% - 36px);
-      border-radius: 10px;
-      overflow: hidden;
-      display: block;
+    overflow: hidden;
 
       >video {
         width: 100%;
         height: 100%;
         background-size: cover ;
       }
-    }
   }
 }
diff --git a/site/components/ComplexCharts/index.tsx b/site/components/ComplexCharts/index.tsx
@@ -8,7 +8,7 @@ import COMPLEX_DATAS from '../../data/complex-charts.json';
 import styles from './index.module.less';
 
 export function ComplexCharts() {
-  
+
   const locale = useLocale();
   const [isChinaMirrorHost] = useChinaMirrorHost();
 
@@ -41,22 +41,19 @@ export function ComplexCharts() {
           })
         }
       </div>
-      <div className={styles.content}>
-        <div className={styles.message}>{useT(select.message)}</div>
-        <a
-          className={styles.chart}
-          href={transformUrl({ url: select.link, language, isChinaMirrorHost })}
-          target='_black'
-        >
-          <video
-            muted={true}
-            src={select.video}
-            autoPlay
-            loop
-            style={{ objectFit: 'fill' }}
-          />
-        </a>
-      </div>
+      <a
+        className={styles.content}
+        href={transformUrl({ url: select.link, language, isChinaMirrorHost })}
+        target='_black'
+      >
+        <video
+          muted={true}
+          src={select.video}
+          autoPlay
+          loop
+          style={{ objectFit: 'fill' }}
+        />
+      </a>
     </div>
   );
 }
diff --git a/site/components/FamousPersons/index.module.less b/site/components/FamousPersons/index.module.less
@@ -20,8 +20,8 @@
       &:extend(.commonFlexConfig);
       flex-direction: column;
       justify-content: space-between;
-      height: 377px;
-      width: calc((100vw - 316px)/ 4);
+      height:  calc(1680px - 100vw + 377px );
+      width: calc((100vw - 396px)/ 4);
       min-width: 239px;
       max-width: 399px;
       padding: 29px 20px 20px;

diff --git a/site/components/ProjectCard/index.module.less b/site/components/ProjectCard/index.module.less
@@ -14,7 +14,7 @@
 
   .cards {
     height: 540px;
-    width: calc(100vw - 240px);
+    width: calc(100vw - 360px);
     max-width: 1680px;
     min-width: 1040px;
     background-image: linear-gradient(114deg, #332F4F 0%, #28243F 100%);

diff --git a/site/components/ThemeCharts/index.module.less b/site/components/ThemeCharts/index.module.less
@@ -8,14 +8,15 @@
   &:extend(.commonFlexConfig);
   position: relative;
   z-index: 2;
-  padding: 20px 0 40px;
+  padding: 50px 0 40px;
   flex-direction: column;
   font-family: PingFangSC;
   background-size: cover;
   background-color: rgba(0, 0, 0, 0);
 
   .title {
     height: 48px;
+    line-height: 1em;
     font-size: 40px;
     color: #1D2129;
     font-family: AlibabaPuHuiTiB;
@@ -60,7 +61,7 @@
 
   .themeChart {
     height: 600px;
-    width: calc(100vw - 240px);
+    width: calc(100vw - 360px);
     max-width: 1680px;
     min-width: 1040px;
     background-color: #FAFBFC;

diff --git a/site/data/complex-charts.json b/site/data/complex-charts.json
@@ -3,21 +3,18 @@
     "text": "3D大图",
     "video": "https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/wg8jTrLg-3EAAAAAAAAAAAAAK4eUAQBr",
     "link": "https://g6-next.antv.antgroup.com/examples/feature/features#webgl3d",
-    "message": "3D 可视化图",
     "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*RFK7R4TWuWQAAAAAAAAAAAAADmJ7AQ/original",
     "activeImg": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NYQ-SLUYDpMAAAAAAAAAAAAADmJ7AQ/original"
   },
   {
     "text": "超强性能",
-    "message": "渲染器运行时切换",
     "video": "https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/l9viS4v0-fgAAAAAAAAAAAAAK4eUAQBr",
     "link": "https://g6-next.antv.antgroup.com/zh/examples/feature/features/#rendererSwitch",
     "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*EZ7OTLICg8MAAAAAAAAAAAAADmJ7AQ/original",
     "activeImg": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2_soSbk9R-gAAAAAAAAAAAAADmJ7AQ/original"
   },
   {
     "text": "叙事动画",
-    "message": "分面帧动画",
     "video": "https://gw.alipayobjects.com/v/huamei_qa8qxu/afts/video/6aeMQqQag_4AAAAAAAAAAAAAK4eUAQBr",
     "link": "https://g2.antv.antgroup.com/examples/storytelling/storytelling/#facet-keyframe",
     "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yrlSTZeONjUAAAAAAAAAAAAADmJ7AQ/original",

diff --git a/site/data/link-charts.json b/site/data/link-charts.json
@@ -13,7 +13,7 @@
     "image": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eo6jSqTIB-QAAAAAAAAAAAAADmJ7AQ/original",
     "link": "https://g6.antv.antgroup.com/examples/net/gpuLayout/#fruchtermanClustering",
     "antv": "G6",
-    "color": "#F58C58"
+    "color": "rgba(249,106,65)"
   },
   {
     "title": "散点图 (3D图表)",
@@ -29,7 +29,7 @@
     "image": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eXzfTbFrYjMAAAAAAAAAAAAADmJ7AQ/original",
     "link": "https://g6-next.antv.antgroup.com/examples/tool/hull/#hull",
     "antv": "G6",
-    "color": "#F58C58"
+    "color": "rgba(249,106,65)"
   },
   {
     "title": "统计图表",
@@ -45,7 +45,7 @@
     "image": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*M6ubT4Mv7pcAAAAAAAAAAAAADmJ7AQ/original",
     "link": "https://f2.antv.antgroup.com/examples/creative/plugin/#rough",
     "antv": "F2",
-    "color": "#D580FF"
+    "color": "rgba(198,86,253)"
   },
   {
     "title": "地图",
@@ -77,7 +77,7 @@
     "image": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cEgmQov_Kf0AAAAAAAAAAAAADmJ7AQ/original",
     "link": "https://g6.antv.antgroup.com/examples/case/treeDemos/#decisionTree",
     "antv": "G6",
-    "color": "#F58C58"
+    "color": "rgba(249,106,65)"
   },
   {
     "title": "热力图",
@@ -101,6 +101,6 @@
     "image": "https://gw.alipayobjects.com/zos/antfincdn/veD1IGEyne/20211116113745.jpg",
     "link": "https://f2.antv.antgroup.com/examples/relation/treemap/#treemap",
     "antv": "F2",
-    "color": "#D580FF"
+    "color": "rgba(198,86,253)"
   }
 ]
diff --git a/site/data/theme-charts.json b/site/data/theme-charts.json
@@ -1,5 +1,4 @@
-[
-  {
+[{
     "text": "日常分析",
     "img": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*_QoYRowGM50AAAAAAAAAAAAADmJ7AQ/original",
     "activeImg": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q5g5Qp2D7GYAAAAAAAAAAAAADmJ7AQ/original",

diff --git a/site/utils.ts b/site/utils.ts
@@ -8,12 +8,11 @@ export const getLang = () => {
   return useLocale().id
 }
 
-
 function rgbToHex(rgb: string) {
   const arr = rgb.slice(4, rgb.length - 1).split(',');
   return arr.reduce((color, item) => {
     const v = Number(item).toString(16);
-    if(v.length === 1) {
+    if (v.length === 1) {
       return `${color}0${v}`;
     }
     return `${color}${v}`;
@@ -39,3 +38,45 @@ export function pick(seed: string, isHex: boolean = false) {
   }
   return I.map((i) => isHex ? rgbToHex(colors[i]) : colors[i]).slice(0, 10);
 }
+
+export function autoPalette2(categorical: string[], count = 7) {
+  const sequential = categorical.map((d) => generate(d, count));
+  const diverging = merge(sequential);
+
+  function merge(sequential: string[][]) {
+    const diverging = [];
+    const count = (sequential[0].length / 2) | 0;
+    for (let i = 0; i < 10; i++) {
+      const j = (i + 2) % 10;
+      diverging.push([
+        ...sequential[i].slice(0, count).reverse(),
+        "#e5e5e5",
+        ...sequential[j].slice(0, count)
+      ]);
+    }
+    return diverging;
+  }
+
+  function generate(color: string, count = 7) {
+    const random = (min: number, max: number) => min + Math.random() * (max - min);
+    const rangeMin = random(5, 10);
+    const rangeMax = random(90, 95);
+    const { l, a, b, opacity } = d3.lab(color);
+    const minL = l <= 15 ? l : rangeMin;
+    const maxL = l >= 85 ? l : rangeMax;
+    let dl = (maxL - minL) / (count - 1);
+    const index = Math.ceil((l - minL) / dl);
+    dl = index === 0 ? dl : (l - minL) / index;
+    return Array.from({ length: count }, (_, i) =>
+      d3.lab(dl * i + minL, a, b, opacity)
+    )
+      .map((d) => d.formatHex())
+      .reverse();
+  }
+
+  return {
+    categorical,
+    sequential,
+    diverging
+  };
+}