feat: 增加根据主题色生成对应主题风格色板功能

antvis · Mar 16, 2022 · 9928227 · 9928227
1 parent d02772e
commit 9928227
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 10 deletions.
diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
@@ -62,6 +62,7 @@
   },
   "devDependencies": {
     "d3-dsv": "^1.1.1",
+    "tinycolor2": "^1.4.2",
     "inquirer": "^8.2.0",
     "inquirer-autocomplete-prompt": "^1.4.0"
   },

diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts
@@ -15,9 +15,13 @@ export interface Palette {
   semanticColors: {
     red?: string;
     green?: string;
-    /* 额外颜色字段 */
     [key: string]: string;
   };
+  /* 用于标记生成色板时固定不变的色值索引 */
+  fixedColorIndex?: number[];
+  /* 主题色索引 */
+  brandColorIndex?: number;
+  /* 额外颜色字段 */
 }
 
 export interface Padding {

diff --git a/packages/s2-core/src/theme/palette/colorful.ts b/packages/s2-core/src/theme/palette/colorful.ts
@@ -4,6 +4,7 @@ export const paletteColorful = {
     '#FFFFFF',
     '#F4F7FE',
     '#DDE7FD',
+    // brand color
     '#3471F9',
     '#2C60D3',
     '#2C60D3',
@@ -23,4 +24,9 @@ export const paletteColorful = {
     red: '#FF4D4F',
     green: '#29A294',
   },
+
+  // 用于标记生成色板时固定不变的色值索引
+  fixedColorIndex: [0, 13, 14],
+  // 主题色索引
+  brandColorIndex: 3,
 };
diff --git a/packages/s2-core/src/theme/palette/default.ts b/packages/s2-core/src/theme/palette/default.ts
@@ -8,6 +8,7 @@ export const paletteDefault = {
     '#CCDBFD',
     '#2C60D3',
     '#0000EE',
+    // brand color
     '#326EF4',
     '#FFFFFF',
     '#EBF2FF',
@@ -23,4 +24,9 @@ export const paletteDefault = {
     red: '#FF4D4F',
     green: '#29A294',
   },
+
+  // 用于标记生成色板时固定不变的色值索引
+  fixedColorIndex: [0, 13, 14],
+  // 主题色索引
+  brandColorIndex: 7,
 };
diff --git a/packages/s2-core/src/theme/palette/gray.ts b/packages/s2-core/src/theme/palette/gray.ts
@@ -8,6 +8,7 @@ export const paletteGray = {
     '#E7E8EA',
     '#CECFD1',
     '#A9AAAB',
+    // brand color
     '#616162',
     '#FFFFFF',
     '#F2F2F2',
@@ -22,4 +23,9 @@ export const paletteGray = {
     red: '#FF4D4F',
     green: '#29A294',
   },
+
+  // 用于标记生成色板时固定不变的色值索引
+  fixedColorIndex: [0, 13, 14],
+  // 主题色索引
+  brandColorIndex: 7,
 };
diff --git a/packages/s2-core/src/utils/color.ts b/packages/s2-core/src/utils/color.ts
@@ -0,0 +1,32 @@
+import tinycolor from 'tinyColor2';
+import { includes, map } from 'lodash';
+import { Palette } from '@/common';
+
+export const generatePalette = (palette: Palette, brandColor: string) => {
+  const { basicColors, ...restParams } = palette;
+  const preBrandColor = tinycolor(
+    basicColors[restParams?.brandColorIndex],
+  ).toRgb();
+  const newBrandColor = tinycolor(brandColor).toRgb();
+  const distance = {
+    r: newBrandColor.r - preBrandColor.r,
+    g: newBrandColor.g - preBrandColor.g,
+    b: newBrandColor.b - preBrandColor.b,
+  };
+  const newColors = map(basicColors, (color: string, key) => {
+    if (includes(restParams?.fixedColorIndex, key)) {
+      return color;
+    }
+    const preColor = tinycolor(color).toRgb();
+    const newColor = tinycolor({
+      r: preColor.r + distance.r,
+      g: preColor.g + distance.g,
+      b: preColor.b + distance.b,
+    });
+    return `#${newColor.toHex().toUpperCase()}`;
+  });
+  return {
+    basicColors: newColors,
+    ...restParams,
+  };
+};
diff --git a/packages/s2-core/src/utils/index.ts b/packages/s2-core/src/utils/index.ts
@@ -2,6 +2,7 @@ export { splitTotal } from './data-set-operate';
 export { auto } from './formatter';
 export * from './layout';
 export * from './text';
+export * from './color';
 export * from './theme';
 export * from './export/index';
 export * from './export/copy';

diff --git a/packages/s2-react/package.json b/packages/s2-react/package.json
@@ -69,7 +69,8 @@
     "antd": "^4.16.13",
     "concurrently": "^7.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-color": "^2.19.3"
   },
   "bundlesize": [
     {

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -16,6 +16,7 @@ import {
 } from 'antd';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { ChromePicker } from 'react-color';
 import {
   HeaderActionIconProps,
   S2Options,
@@ -29,6 +30,8 @@ import {
   ThemeCfg,
   S2Theme,
   DataType,
+  generatePalette,
+  getPalette,
 } from '@antv/s2';
 import corePkg from '@antv/s2/package.json';
 import { forEach, random } from 'lodash';
@@ -147,6 +150,7 @@ function MainLayout() {
   const [showPagination, setShowPagination] = React.useState(false);
   const [showTotals, setShowTotals] = React.useState(false);
   const [themeCfg, setThemeCfg] = React.useState<ThemeCfg>({ name: 'default' });
+  const [themeColor, setThemeColor] = React.useState<string>('#FFF');
   const [showCustomTooltip, setShowCustomTooltip] = React.useState(false);
   const [adaptive, setAdaptive] = React.useState(false);
   const [options, setOptions] =
@@ -210,11 +214,9 @@ function MainLayout() {
   };
 
   const onThemeChange = (e: RadioChangeEvent) => {
-    setThemeCfg(
-      customMerge({}, themeCfg, {
-        name: e.target.value,
-      }),
-    );
+    setThemeCfg({
+      name: e.target.value,
+    });
   };
 
   const onSheetTypeChange = (e: RadioChangeEvent) => {
@@ -415,6 +417,33 @@ function MainLayout() {
                   </Radio.Group>
                 </Tooltip>
               </Space>
+              <Space>
+                <Popover
+                  placement="bottomRight"
+                  content={
+                    <>
+                      <ChromePicker
+                        color={themeColor}
+                        onChangeComplete={(color) => {
+                          setThemeColor(color.hex);
+                          const palette = getPalette(themeCfg.name);
+                          const newPalette = generatePalette(
+                            palette,
+                            color.hex,
+                          );
+                          setThemeCfg({
+                            palette: newPalette,
+                          });
+                        }}
+                      />
+                    </>
+                  }
+                >
+                  <Button size="small" style={{ marginLeft: 20 }}>
+                    主题色调整
+                  </Button>
+                </Popover>
+              </Space>
               <Space style={{ margin: '20px 0', display: 'flex' }}>
                 <Tooltip title="tooltip 自动调整: 显示的tooltip超过指定区域时自动调整, 使其不遮挡">
                   <Select

diff --git a/yarn.lock b/yarn.lock
@@ -701,6 +701,11 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@isaacs/string-locale-compare@^1.0.1", "@isaacs/string-locale-compare@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz#291c227e93fd407a96ecd59879a35809120e432b"
@@ -8928,7 +8933,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
+lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -9028,7 +9033,7 @@ lodash.uniqby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz#d99c07a669e9e6d24e1362dfe266c67616af1302"
   integrity sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=
 
-lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@^4.0.1, lodash@^4.17.10, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -9274,6 +9279,11 @@ matcher@^3.0.0:
   dependencies:
     escape-string-regexp "^4.0.0"
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 math-random@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
@@ -11275,6 +11285,15 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
+prop-types@^15.5.10:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -11757,6 +11776,19 @@ react-beautiful-dnd@^13.1.0:
     redux "^4.0.4"
     use-memo-one "^1.1.1"
 
+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -11773,7 +11805,7 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11808,6 +11840,13 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-cmd-shim@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9"
@@ -13522,6 +13561,11 @@ tiny-relative-date@^1.3.0:
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
+tinycolor2@^1.4.1, tinycolor2@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"