react-colorscales - npm Package Compare versions

Comparing version 0.5.9 to 0.6.0

docs/App.js

@@ -81,3 +81,3 @@ /* global Plotly:true */
             onClick={() => {}}
-            width={150}
+            width={200}
           />
@@ -84,0 +84,0 @@ Toggle Colorscale Picker

package.json

 {
   "name": "react-colorscales",
-  "version": "0.5.9",
+  "version": "0.6.0",
   "description": "A React component for picking colorscales based on Chroma.js",
@@ -5,0 +5,0 @@ "main": "build/index.js",

src/components/Colorscale.js

 import React, {Component} from 'react';
 import {
   DEFAULT_SCALE,
-  DEFAULT_SWATCH_WIDTH,
-  DEFAULT_NPREVIEWCOLORS,
 } from './constants.js';
@@ -10,24 +8,6 @@
   render() {
-    const scaleLength = this.props.scaleLength || DEFAULT_NPREVIEWCOLORS;
-
     const scale = this.props.colorscale
-      ? this.props.colorscale.slice(0, scaleLength)
-      : DEFAULT_SCALE;
+      ? this.props.colorscale : DEFAULT_SCALE;
 
-    let swatchWidth = DEFAULT_SWATCH_WIDTH;
 
-    if (this.props.width) {
-      swatchWidth = this.props.width / scale.length;
-    }
-
-    if (this.props.maxWidth) {
-      if (swatchWidth * scale.length > this.props.maxWidth) {
-        swatchWidth = this.props.maxWidth / scale.length;
-      }
-    }
-
-    const scaleWidth = this.props.scaleLength
-      ? swatchWidth * this.props.scaleLength + 'px'
-      : swatchWidth * scale.length + 'px';
-
     return (
@@ -42,3 +22,3 @@ <div style={{width: '100%'}}>
               display: 'inline-block',
-              width: '70px',
+              width: '25%',
               textAlign: 'start',
@@ -54,3 +34,3 @@ }}
             textAlign: 'start',
-            width: scaleWidth,
+            width: "75%",
           }}
@@ -63,2 +43,3 @@ >
               display: 'inline-block',
+              width: "100%"
             }}
@@ -75,3 +56,3 @@ onClick={() =>
                   backgroundColor: x,
-                  width: '20px',
+                  width: ""+(100.0/scale.length)+'%',
                   height: '20px',
@@ -78,0 +59,0 @@ margin: '0 auto',

src/components/ColorscalePicker.js

@@ -18,3 +18,2 @@ import React, {Component} from 'react';
   DEFAULT_SCALE,
-  DEFAULT_SWATCHES,
   DEFAULT_BREAKPOINTS,
@@ -28,2 +27,3 @@ DEFAULT_START,
   DEFAULT_NPREVIEWCOLORS,
+  BUILTINS,
 } from './constants.js';
@@ -79,5 +79,4 @@
     this.state = {
-      nSwatches:
-        this.props.nSwatches || this.props.scaleLength || DEFAULT_SWATCHES,
       colorscale: this.props.colorscale || DEFAULT_SCALE,
+      nSwatches: (this.props.colorscale || DEFAULT_SCALE).length,
       previousColorscale: this.props.colorscale || DEFAULT_SCALE,
@@ -148,3 +147,3 @@ colorscaleType:
       newColorscale,
-      this.state.nSwatches,
+      newColorscale.length,
       this.state.logBreakpoints,
@@ -164,2 +163,3 @@ this.state.log,
         colorscale: cs,
+        nSwatches: newColorscale.length,
         previousCustomBreakpoints:
@@ -174,2 +174,3 @@ this.state.colorscaleType === 'custom'
         colorscale: cs,
+        nSwatches: newColorscale.length,
         previousCustomBreakpoints: null,
@@ -426,2 +427,14 @@ cubehelix: {
 
+
+          {BUILTINS.hasOwnProperty(colorscaleType) &&
+            Object.keys(BUILTINS[colorscaleType]).map((x, i) => (
+              <Colorscale
+                key={i}
+                onClick={onClick}
+                colorscale={BUILTINS[colorscaleType][x]}
+                label={x}
+                scaleLength={BUILTINS[colorscaleType][x].length}
+              />
+            ))}
+
           {BREWER.hasOwnProperty(colorscaleType) &&
@@ -432,7 +445,5 @@ BREWER[colorscaleType].map((x, i) => (
                 onClick={onClick}
-                colorscale={chroma
-                  .scale(x)
-                  .colors(scaleLength || DEFAULT_NPREVIEWCOLORS)}
+                colorscale={chroma.brewer[x]}
                 label={x}
-                scaleLength={scaleLength}
+                scaleLength={chroma.brewer[x].length}
               />
@@ -467,8 +478,5 @@ ))}
                 onClick={onClick}
-                colorscale={CMOCEAN[x].slice(
-                  0,
-                  scaleLength || DEFAULT_NPREVIEWCOLORS
-                )}
+                colorscale={CMOCEAN[x]}
                 label={x}
-                scaleLength={scaleLength}
+                scaleLength={CMOCEAN[x].length}
               />
@@ -475,0 +483,0 @@ ))}

src/components/constants.js

@@ -31,20 +31,20 @@ import chroma from "chroma-js";
   sequential: [
+    "Purples",
+    "Blues",
+    "Greens",
+    "Oranges",
+    "Reds",
+    "YlOrBr",
+    "YlOrRd",
     "OrRd",
+    "PuRd",
+    "RdPu",
+    "BuPu",
     "PuBu",
-    "BuPu",
-    "Oranges",
+    "PuBuGn",
+    "GnBu",
     "BuGn",
-    "YlOrBr",
+    "YlGnBu",
     "YlGn",
-    "Reds",
-    "RdPu",
-    "Greens",
-    "YlGnBu",
-    "Purples",
-    "GnBu",
-    "Greys",
-    "YlOrRd",
-    "PuRd",
-    "Blues",
-    "Viridis"
+    "Greys"
   ],
@@ -61,5 +61,85 @@ divergent: [
   ],
-  categorical: ["Accent", "Set1", "Set3", "Dark2", "Paired", "Pastel1"]
+  categorical: ["Set1", "Pastel1", "Dark2", "Set2", "Pastel2", "Set3"]
 };
 
+export const BUILTINS = {
+  sequential: {
+    Viridis: [
+      "#440154",
+      "#482878",
+      "#3e4989",
+      "#31688e",
+      "#26828e",
+      "#1f9e89",
+      "#35b779",
+      "#6ece58",
+      "#b5de2b",
+      "#fde725"
+    ],
+
+    Inferno: [
+      "#000004",
+      "#1b0c41",
+      "#4a0c6b",
+      "#781c6d",
+      "#a52c60",
+      "#cf4446",
+      "#ed6925",
+      "#fb9b06",
+      "#f7d13d",
+      "#fcffa4"
+    ],
+    Magma: [
+      "#000004",
+      "#180f3d",
+      "#440f76",
+      "#721f81",
+      "#9e2f7f",
+      "#cd4071",
+      "#f1605d",
+      "#fd9668",
+      "#feca8d",
+      "#fcfdbf"
+    ],
+    Plasma: [
+      "#0d0887",
+      "#46039f",
+      "#7201a8",
+      "#9c179e",
+      "#bd3786",
+      "#d8576b",
+      "#ed7953",
+      "#fb9f3a",
+      "#fdca26",
+      "#f0f921"
+    ]
+  },
+  categorical: {
+    D3: [
+      "#1f77b4",
+      "#ff7f0e",
+      "#2ca02c",
+      "#d62728",
+      "#9467bd",
+      "#8c564b",
+      "#e377c2",
+      "#7f7f7f",
+      "#bcbd22",
+      "#17becf"
+    ],
+    G10: [
+      "#3366cc",
+      "#dc3912",
+      "#ff9900",
+      "#109618",
+      "#990099",
+      "#0099c6",
+      "#dd4477",
+      "#66aa00",
+      "#b82e2e",
+      "#316395"
+    ]
+  }
+};
+
 export const CMOCEAN = {
@@ -337,3 +417,3 @@ turbid: [
 export const DEFAULT_NCOLORS = 10;
-export const DEFAULT_SWATCHES = 6;
+export const DEFAULT_SWATCHES = 9;
 export const DEFAULT_SCALE = chroma
@@ -346,2 +426,2 @@ .scale(["#fafa6e", "#2A4858"])
 export const DEFAULT_SWATCH_WIDTH = 20;
-export const DEFAULT_NPREVIEWCOLORS = 9;
+export const DEFAULT_NPREVIEWCOLORS = 10;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23918319

increased by0.02%

Lines of code

42748

increased by0.16%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes