feat-colorsetting-0825-ldy

Kanaries · Sep 25, 2023 · 4ef5da2 · 4ef5da2
1 parent 92703f4
commit 4ef5da2
Show file tree

Hide file tree

Showing 10 changed files with 433 additions and 114 deletions.
diff --git a/packages/graphic-walker/package.json b/packages/graphic-walker/package.json
@@ -53,6 +53,7 @@
     "postcss": "^8.3.7",
     "postinstall-postinstall": "^2.1.0",
     "re-resizable": "^6.9.8",
+    "react-color": "^2.19.3",
     "react-i18next": "^11.18.6",
     "react-leaflet": "^4.2.1",
     "react-shadow": "^20.0.0",

diff --git a/packages/graphic-walker/src/components/sizeSetting.tsx b/packages/graphic-walker/src/components/sizeSetting.tsx
@@ -98,6 +98,7 @@ const SizeSetting: React.FC<SizeSettingProps> = (props) => {
                 className="w-4 h-4 inline-block mr-0.5 text-gray-900"
             />
             {show && (
+                <>
                 <ResizeDialog {...props}>
                     <div>
                         <XMarkIcon
@@ -112,6 +113,7 @@ const SizeSetting: React.FC<SizeSettingProps> = (props) => {
                         />
                     </div>
                 </ResizeDialog>
+                </>
             )}
         </div>
     );

diff --git a/packages/graphic-walker/src/components/visualConfig/colorScheme.tsx b/packages/graphic-walker/src/components/visualConfig/colorScheme.tsx
@@ -0,0 +1,97 @@
+export const ColorSchemes = [
+    {
+        name: 'accent',
+        value: ['#7fc97f', '#beaed4', '#fdc086', '#ffff99', '#386cb0', '#f0027f', '#bf5b17', '#666666'],
+    },
+    {
+        name: 'category10',
+        value: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'],
+    },
+    {
+        name: 'category20',
+        value: [
+            '#1f77b4',
+            '#aec7e8',
+            '#ff7f0e',
+            '#ffbb78',
+            '#2ca02c',
+            '#98df8a',
+            '#d62728',
+            '#ff9896',
+            '#9467bd',
+            '#c5b0d5',
+            '#8c564b',
+            '#c49c94',
+            '#e377c2',
+            '#f7b6d2',
+            '#7f7f7f',
+            '#c7c7c7',
+            '#bcbd22',
+            '#dbdb8d',
+            '#17becf',
+            '#9edae5',
+        ],
+    },
+    {
+        name: 'category20b',
+        value: [
+            '#393b79',
+            '#5254a3',
+            '#6b6ecf',
+            '#9c9ede',
+            '#637939',
+            '#8ca252',
+            '#b5cf6b',
+            '#cedb9c',
+            '#8c6d31',
+            '#bd9e39',
+            '#e7ba52',
+            '#e7cb94',
+            '#843c39',
+            '#ad494a',
+            '#d6616b',
+            '#e7969c',
+            '#7b4173',
+            '#a55194',
+            '#ce6dbd',
+            '#de9ed6',
+        ],
+    },
+    {
+        name: 'category20c',
+        value: [
+            '#3182bd',
+            '#6baed6',
+            '#9ecae1',
+            '#c6dbef',
+            '#e6550d',
+            '#fd8d3c',
+            '#fdae6b',
+            '#fdd0a2',
+            '#31a354',
+            '#74c476',
+            '#a1d99b',
+            '#c7e9c0',
+            '#756bb1',
+            '#9e9ac8',
+            '#bcbddc',
+            '#dadaeb',
+            '#636363',
+            '#969696',
+            '#bdbdbd',
+            '#d9d9d9',
+        ],
+    },
+    {
+        name: 'dark2',
+        value: ['#1b9e77', '#d95f02', '#7570b3', '#e7298a', '#66a61e', '#e6ab02', '#a6761d', '#666666'],
+    },
+    {
+        name: 'paired',
+        value: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'],
+    },
+    {
+        name: 'pastel1',
+        value: ['#fbb4ae', '#b3cde3', '#ccebc5', '#decbe4', '#fed9a6', '#ffffcc', '#e5d8bd', '#fddaec', '#f2f2f2'],
+    },
+];