@superset-ui/color - npm Package Compare versions

Comparing version 0.13.21 to 0.13.24

esm/SequentialScheme.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _d3Interpolate = require("d3-interpolate");
+
 var _ColorScheme = _interopRequireDefault(require("./ColorScheme"));
@@ -15,12 +17,2 @@
 
-function range(count) {
-  const values = [];
-
-  for (let i = 0; i < count; i += 1) {
-    values.push(i);
-  }
-
-  return values;
-}
-
 class SequentialScheme extends _ColorScheme.default {
@@ -37,21 +29,37 @@ constructor(config) {
   }
+  /**
+   * Return a linear scale with a new domain interpolated from the input domain
+   * to match the number of elements in the color scheme
+   * because D3 continuous scale uses piecewise mapping between domain and range.
+   * This is a common use-case when the domain is [min, max]
+   * and the palette has more than two colors.
+   *
+   * @param domain domain of the scale
+   * @param modifyRange Set this to true if you don't want to modify the domain and
+   * want to interpolate range to have the same number of elements with domain instead.
+   */
 
-  createLinearScale(extent = [0, 1]) {
-    // Create matching domain
-    // because D3 continuous scale uses piecewise mapping
-    // between domain and range.
-    const valueScale = (0, _d3Scale.scaleLinear)().range(extent);
-    const denominator = this.colors.length - 1;
-    const domain = range(this.colors.length).map(i => valueScale(i / denominator));
-    return (0, _d3Scale.scaleLinear)().domain(domain).range(this.colors).clamp(true);
+
+  createLinearScale(domain = [0, 1], modifyRange = false) {
+    const scale = (0, _d3Scale.scaleLinear)().interpolate(_d3Interpolate.interpolateHcl).clamp(true);
+    return modifyRange || domain.length === this.colors.length ? scale.domain(domain).range(this.getColors(domain.length)) : scale.domain((0, _d3Interpolate.quantize)((0, _d3Interpolate.piecewise)(_d3Interpolate.interpolateNumber, domain), this.colors.length)).range(this.colors);
   }
+  /**
+   * Get colors from this scheme
+   * @param numColors number of colors to return.
+   * Will interpolate the current scheme to match the number of colors requested
+   * @param extent The extent of the color range to use.
+   * For example [0.2, 1] will rescale the color scheme
+   * such that color values in the range [0, 0.2) are excluded from the scheme.
+   */
 
-  getColors(numColors = this.colors.length) {
-    if (numColors === this.colors.length) {
+
+  getColors(numColors = this.colors.length, extent = [0, 1]) {
+    if (numColors === this.colors.length && extent[0] === 0 && extent[1] === 1) {
       return this.colors;
     }
 
-    const colorScale = this.createLinearScale();
-    const denominator = numColors - 1;
-    return range(numColors).map(i => colorScale(i / denominator));
+    const piecewiseScale = (0, _d3Interpolate.piecewise)(_d3Interpolate.interpolateHcl, this.colors);
+    const adjustExtent = (0, _d3Scale.scaleLinear)().range(extent).clamp(true);
+    return (0, _d3Interpolate.quantize)(t => piecewiseScale(adjustExtent(t)), numColors);
   }
@@ -58,0 +66,0 @@

lib/SequentialScheme.d.ts

@@ -8,5 +8,24 @@ import ColorScheme, { ColorSchemeConfig } from './ColorScheme';
     constructor(config: SequentialSchemeConfig);
-    createLinearScale(extent?: number[]): import("d3-scale").ScaleLinear<string, string>;
-    getColors(numColors?: number): string[];
+    /**
+     * Return a linear scale with a new domain interpolated from the input domain
+     * to match the number of elements in the color scheme
+     * because D3 continuous scale uses piecewise mapping between domain and range.
+     * This is a common use-case when the domain is [min, max]
+     * and the palette has more than two colors.
+     *
+     * @param domain domain of the scale
+     * @param modifyRange Set this to true if you don't want to modify the domain and
+     * want to interpolate range to have the same number of elements with domain instead.
+     */
+    createLinearScale(domain?: number[], modifyRange?: boolean): import("d3-scale").ScaleLinear<string, string>;
+    /**
+     * Get colors from this scheme
+     * @param numColors number of colors to return.
+     * Will interpolate the current scheme to match the number of colors requested
+     * @param extent The extent of the color range to use.
+     * For example [0.2, 1] will rescale the color scheme
+     * such that color values in the range [0, 0.2) are excluded from the scheme.
+     */
+    getColors(numColors?: number, extent?: number[]): string[];
 }
 //# sourceMappingURL=SequentialScheme.d.ts.map

lib/SequentialScheme.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _d3Interpolate = require("d3-interpolate");
+
 var _ColorScheme = _interopRequireDefault(require("./ColorScheme"));
@@ -15,12 +17,2 @@
 
-function range(count) {
-  const values = [];
-
-  for (let i = 0; i < count; i += 1) {
-    values.push(i);
-  }
-
-  return values;
-}
-
 class SequentialScheme extends _ColorScheme.default {
@@ -37,21 +29,37 @@ constructor(config) {
   }
+  /**
+   * Return a linear scale with a new domain interpolated from the input domain
+   * to match the number of elements in the color scheme
+   * because D3 continuous scale uses piecewise mapping between domain and range.
+   * This is a common use-case when the domain is [min, max]
+   * and the palette has more than two colors.
+   *
+   * @param domain domain of the scale
+   * @param modifyRange Set this to true if you don't want to modify the domain and
+   * want to interpolate range to have the same number of elements with domain instead.
+   */
 
-  createLinearScale(extent = [0, 1]) {
-    // Create matching domain
-    // because D3 continuous scale uses piecewise mapping
-    // between domain and range.
-    const valueScale = (0, _d3Scale.scaleLinear)().range(extent);
-    const denominator = this.colors.length - 1;
-    const domain = range(this.colors.length).map(i => valueScale(i / denominator));
-    return (0, _d3Scale.scaleLinear)().domain(domain).range(this.colors).clamp(true);
+
+  createLinearScale(domain = [0, 1], modifyRange = false) {
+    const scale = (0, _d3Scale.scaleLinear)().interpolate(_d3Interpolate.interpolateHcl).clamp(true);
+    return modifyRange || domain.length === this.colors.length ? scale.domain(domain).range(this.getColors(domain.length)) : scale.domain((0, _d3Interpolate.quantize)((0, _d3Interpolate.piecewise)(_d3Interpolate.interpolateNumber, domain), this.colors.length)).range(this.colors);
   }
+  /**
+   * Get colors from this scheme
+   * @param numColors number of colors to return.
+   * Will interpolate the current scheme to match the number of colors requested
+   * @param extent The extent of the color range to use.
+   * For example [0.2, 1] will rescale the color scheme
+   * such that color values in the range [0, 0.2) are excluded from the scheme.
+   */
 
-  getColors(numColors = this.colors.length) {
-    if (numColors === this.colors.length) {
+
+  getColors(numColors = this.colors.length, extent = [0, 1]) {
+    if (numColors === this.colors.length && extent[0] === 0 && extent[1] === 1) {
       return this.colors;
     }
 
-    const colorScale = this.createLinearScale();
-    const denominator = numColors - 1;
-    return range(numColors).map(i => colorScale(i / denominator));
+    const piecewiseScale = (0, _d3Interpolate.piecewise)(_d3Interpolate.interpolateHcl, this.colors);
+    const adjustExtent = (0, _d3Scale.scaleLinear)().range(extent).clamp(true);
+    return (0, _d3Interpolate.quantize)(t => piecewiseScale(adjustExtent(t)), numColors);
   }
@@ -58,0 +66,0 @@

package.json

 {
   "name": "@superset-ui/color",
-  "version": "0.13.21",
+  "version": "0.13.24",
   "description": "Superset UI color",
@@ -29,3 +29,5 @@ "sideEffects": false,
   "dependencies": {
+    "@types/d3-interpolate": "^1.3.1",
     "@types/d3-scale": "^2.1.1",
+    "d3-interpolate": "^1.4.0",
     "d3-scale": "^3.0.0"
@@ -36,3 +38,3 @@ },
   },
-  "gitHead": "14aeb4f70403e02e228f73a47a3e932d0eb5505c"
+  "gitHead": "0ac09d8a84b20822f6b8379da355c5e39387e226"
 }

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

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

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

Improved metrics

Total package byte prevSize

77785

increased by4.27%

Lines of code

1380

increased by2.76%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Added@types/d3-interpolate@^1.3.1

• + Addedd3-interpolate@^1.4.0

• + Added@types/d3-color@1.4.5(transitive)

• + Added@types/d3-interpolate@1.4.5(transitive)

• + Addedd3-color@1.4.1(transitive)

• + Addedd3-interpolate@1.4.0(transitive)

• - Removedd3-color@2.0.0(transitive)

• - Removedd3-interpolate@2.0.1(transitive)