feat(colors): add the tableau10 color scheme

plouc · May 5, 2024 · ff1e796 · ff1e796
1 parent 1a05890
commit ff1e796
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 16 deletions.
diff --git a/packages/colors/src/props.ts b/packages/colors/src/props.ts
@@ -1,18 +1,4 @@
 import PropTypes from 'prop-types'
-import { colorSchemeIds } from './schemes'
-
-export const ordinalColorsPropType = PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.shape({
-        scheme: PropTypes.oneOf(colorSchemeIds).isRequired,
-        size: PropTypes.number,
-    }),
-    PropTypes.shape({
-        datum: PropTypes.string.isRequired,
-    }),
-    PropTypes.string,
-])
 
 export const inheritedColorPropType = PropTypes.oneOfType([
     PropTypes.string,

diff --git a/packages/colors/src/schemes/categorical.ts b/packages/colors/src/schemes/categorical.ts
@@ -8,6 +8,7 @@ import {
     schemeSet1,
     schemeSet2,
     schemeSet3,
+    schemeTableau10,
 } from 'd3-scale-chromatic'
 
 export const categoricalColorSchemes = {
@@ -21,6 +22,7 @@ export const categoricalColorSchemes = {
     set1: schemeSet1,
     set2: schemeSet2,
     set3: schemeSet3,
+    tableau10: schemeTableau10,
 }
 
 export type CategoricalColorSchemeId = keyof typeof categoricalColorSchemes

diff --git a/storybook/stories/tree/Tree.stories.tsx b/storybook/stories/tree/Tree.stories.tsx
@@ -74,7 +74,7 @@ const commonProperties: Partial<TreeSvgProps<any>> = {
     ...generateData(),
     identity: 'name',
     activeNodeSize: 20,
-    nodeColor: { scheme: 'dark2' },
+    nodeColor: { scheme: 'tableau10' },
     fixNodeColorAtDepth: 1,
     linkThickness: 2,
     activeLinkThickness: 6,

diff --git a/website/src/pages/tree/index.tsx b/website/src/pages/tree/index.tsx
@@ -52,7 +52,7 @@ const initialProperties: Pick<
     nodeSize: 12,
     activeNodeSize: 24,
     inactiveNodeSize: 12,
-    nodeColor: { scheme: 'dark2' },
+    nodeColor: { scheme: 'tableau10' },
     fixNodeColorAtDepth: 1,
     linkCurve: defaults.linkCurve,
     linkThickness: 2,