javascript-color-gradient - npm Package Compare versions

Comparing version 2.3.4 to 2.4.4

package.json

 {
   "name": "javascript-color-gradient",
-  "version": "2.3.4",
+  "version": "2.4.4",
   "description": "javascript-color-gradient is a lightweight JavaScript library, used to generate an array of color gradients by providing start and finish colors, as well as the required number of midpoints. ",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -23,3 +23,3 @@ <div>
 ```javascript
-import colorGradient from "javascript-color-gradient";
+import { Gradient } from "javascript-color-gradient";
 ```
@@ -35,8 +35,8 @@
 
-| Method           |     | Description                                                                              |
-| ---------------- | --- | ---------------------------------------------------------------------------------------- |
-| `setGradient()`  |     | Initializes `colorGradient` with two or more hex color values. Should always be defined. |
-| `setMidpoint(n)` |     | Defines number of midpoints. Defaults to 10.                                             |
-| `getArray()`     |     | Returns an array of hex color values .                                                   |
-| `getColor(n)`    |     | Returns single hex color value corresponding to the provided index.                      |
+| Method               |     | Description                                                                           |
+| -------------------- | --- | ------------------------------------------------------------------------------------- |
+| `setColorGradient()` |     | Initializes `{Gradient}` with two or more hex color values. Should always be defined. |
+| `setMidpoint(n)`     |     | Defines number of midpoints. Defaults to 10.                                          |
+| `getColors()`        |     | Returns an array of hex color values .                                                |
+| `getColor(n)`        |     | Returns single hex color value corresponding to the provided index.                   |
 
@@ -48,5 +48,7 @@ ## Usage
 ```javascript
-import colorGradient from "javascript-color-gradient";
+import { Gradient } from "javascript-color-gradient";
 
-const gradientArray = colorGradient.setGradient("#3F2CAF", "e9446a").getArray();
+const gradientArray = new Gradient()
+  .setColorGradient("#3F2CAF", "e9446a")
+  .getColors();
 
@@ -62,6 +64,6 @@ console.log(gradientArray);
 
-const gradientArray = colorGradient
-  .setGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
+const gradientArray = new Gradient()
+  .setColorGradient("#3F2CAF", "#e9446a", "#edc988", "#607D8B")
   .setMidpoint(20)
-  .getArray();
+  .getColors();
 
@@ -75,8 +77,11 @@ console.log(gradientArray);
 ```javascript
-import colorGradient from "javascript-color-gradient";
+import { Gradient } from "javascript-color-gradient";
 
-const colorAtTwo = colorGradient.setGradient("#3F2CAF", "e9446a").getColor(2);
+const colorAtIndexTwo = new Gradient()
+  .setColorGradient("#3F2CAF", "e9446a")
+  .setMidpoint(20)
+  .getColor(2);
 
-console.log(colorAtTwo);
-// #502ea8
+console.log(colorAtIndexTwo);
+// #5930a5
 ```
@@ -83,0 +88,0 @@

src/index.js

@@ -0,16 +1,82 @@
+class GradientColor {
+  constructor(startColor = "", endColor = "", minNum = 0, maxNum = 10) {
+    this.setColorGradient = (colorStart, colorEnd) => {
+      startColor = getHexColor(colorStart);
+      endColor = getHexColor(colorEnd);
+    };
+
+    this.setMidpoint = (minNumber, maxNumber) => {
+      minNum = minNumber;
+      maxNum = maxNumber;
+    };
+
+    this.getColor = (numberValue) => {
+      if (numberValue) {
+        return (
+          "#" +
+          generateHex(
+            numberValue,
+            startColor.substring(0, 2),
+            endColor.substring(0, 2)
+          ) +
+          generateHex(
+            numberValue,
+            startColor.substring(2, 4),
+            endColor.substring(2, 4)
+          ) +
+          generateHex(
+            numberValue,
+            startColor.substring(4, 6),
+            endColor.substring(4, 6)
+          )
+        );
+      }
+    };
+
+    const generateHex = (number, start, end) => {
+      if (number < minNum) {
+        number = minNum;
+      } else if (number > maxNum) {
+        number = maxNum;
+      }
+
+      const midPoint = maxNum - minNum;
+      const startBase = parseInt(start, 16);
+      const endBase = parseInt(end, 16);
+      const average = (endBase - startBase) / midPoint;
+      const finalBase = Math.round(average * (number - minNum) + startBase);
+      const balancedFinalBase =
+        finalBase < 16 ? "0" + finalBase.toString(16) : finalBase.toString(16);
+      return balancedFinalBase;
+    };
+
+    const getHexColor = (color) => {
+      return color.substring(color.length - 6, color.length);
+    };
+  }
+}
+
 class Gradient {
-  constructor(gradients = "", maxNum = 10, colors = ["", ""], intervals = []) {
-    const setColors = (props) => {
-      if (props.length < 2) {
+  constructor(
+    colorGradients = "",
+    maxNum = 10,
+    colors = ["", ""],
+    intervals = []
+  ) {
+    const setColorGradient = (gradientColors) => {
+      if (gradientColors.length < 2) {
         throw new Error(
-          `setGradient should have more than ${props.length} color`
+          `setColorGradient should have more than ${gradientColors.length} color`
         );
       } else {
-        let increment = maxNum / (props.length - 1);
-        let firstGradient = new GradientColor();
-        let lower = 0;
-        let upper = 0 + increment;
-        firstGradient.setGradient(props[0], props[1]);
-        firstGradient.setMidpoint(lower, upper);
-        gradients = [firstGradient];
+        const increment = maxNum / (gradientColors.length - 1);
+        const firstColorGradient = new GradientColor();
+        const lower = 0;
+        const upper = 0 + increment;
+        firstColorGradient.setColorGradient(
+          gradientColors[0],
+          gradientColors[1]
+        );
+        firstColorGradient.setMidpoint(lower, upper);
+        colorGradients = [firstColorGradient];
         intervals = [
@@ -23,9 +89,12 @@ {
 
-        for (let i = 1; i < props.length - 1; i++) {
-          let gradientColor = new GradientColor();
-          let lower = 0 + increment * i;
-          let upper = 0 + increment * (i + 1);
-          gradientColor.setGradient(props[i], props[i + 1]);
+        for (let i = 1; i < gradientColors.length - 1; i++) {
+          const gradientColor = new GradientColor();
+          const lower = 0 + increment * i;
+          const upper = 0 + increment * (i + 1);
+          gradientColor.setColorGradient(
+            gradientColors[i],
+            gradientColors[i + 1]
+          );
           gradientColor.setMidpoint(lower, upper);
-          gradients[i] = gradientColor;
+          colorGradients[i] = gradientColor;
           intervals[i] = {
@@ -36,13 +105,13 @@ lower,
         }
-        colors = props;
+        colors = gradientColors;
       }
     };
 
-    this.setGradient = (...props) => {
-      setColors(props);
+    this.setColorGradient = (...gradientColors) => {
+      setColorGradient(gradientColors);
       return this;
     };
 
-    this.getArray = () => {
-      let gradientArray = [];
+    this.getColors = () => {
+      const gradientColorsArray = [];
       for (let j = 0; j < intervals.length; j++) {
@@ -56,20 +125,21 @@ const interval = intervals[j];
         for (let i = start; i < end; i++) {
-          gradientArray.push(gradients[j].getColor(i));
+          gradientColorsArray.push(colorGradients[j].getColor(i));
         }
       }
-      return gradientArray;
+      return gradientColorsArray;
     };
 
-    this.getColor = (props) => {
-      if (isNaN(props)) {
+    this.getColor = (numberValue) => {
+      if (isNaN(numberValue)) {
         throw new TypeError(`getColor should be a number`);
-      } else if (props <= 0) {
-        throw new TypeError(`getColor should be greater than ${props}`);
+      } else if (numberValue <= 0) {
+        throw new TypeError(`getColor should be greater than ${numberValue}`);
       } else {
-        let segment = (maxNum - 0) / gradients.length;
-        let index = Math.min(
-          Math.floor((Math.max(props, 0) - 0) / segment),
-          gradients.length - 1
+        const toInsert = numberValue + 1;
+        const segment = (maxNum - 0) / colorGradients.length;
+        const index = Math.min(
+          Math.floor((Math.max(numberValue, 0) - 0) / segment),
+          colorGradients.length - 1
         );
-        return gradients[index].getColor(props);
+        return colorGradients[index].getColor(toInsert);
       }
@@ -81,3 +151,3 @@ };
         maxNum = maxNumber;
-        setColors(colors);
+        setColorGradient(colors);
       } else if (maxNumber <= 0) {
@@ -93,62 +163,2 @@ throw new RangeError(`midPoint should be greater than ${maxNumber}`);
 
-class GradientColor {
-  constructor(startColor = "", endColor = "", minNum = 0, maxNum = 10) {
-    this.setGradient = (colorStart, colorEnd) => {
-      startColor = getHexColor(colorStart);
-      endColor = getHexColor(colorEnd);
-    };
-
-    this.setMidpoint = (minNumber, maxNumber) => {
-      minNum = minNumber;
-      maxNum = maxNumber;
-    };
-
-    this.getColor = (props) => {
-      if (props) {
-        return (
-          "#" +
-          generateHex(
-            props,
-            startColor.substring(0, 2),
-            endColor.substring(0, 2)
-          ) +
-          generateHex(
-            props,
-            startColor.substring(2, 4),
-            endColor.substring(2, 4)
-          ) +
-          generateHex(
-            props,
-            startColor.substring(4, 6),
-            endColor.substring(4, 6)
-          )
-        );
-      }
-    };
-
-    const generateHex = (number, start, end) => {
-      if (number < minNum) {
-        number = minNum;
-      } else if (number > maxNum) {
-        number = maxNum;
-      }
-
-      let midPoint = maxNum - minNum;
-      let startBase = parseInt(start, 16);
-      let endBase = parseInt(end, 16);
-      let average = (endBase - startBase) / midPoint;
-      let finalBase = Math.round(average * (number - minNum) + startBase);
-      let balancedFinalBase =
-        finalBase < 16 ? "0" + finalBase.toString(16) : finalBase.toString(16);
-      return balancedFinalBase;
-    };
-
-    const getHexColor = (props) => {
-      return props.substring(props.length - 6, props.length);
-    };
-  }
-}
-
-const colorGradient = new Gradient();
-
-module.exports = colorGradient;
+module.exports = Gradient;

src/index.test.js

@@ -1,2 +0,2 @@
-const colorGradient = require("./index");
+const Gradient = require("./index");
 const expect = require("chai").expect;
@@ -7,3 +7,5 @@
     it("should return an array of strings", function () {
-      expect(colorGradient.getArray).to.satisfy(isArrayOfStrings);
+      expect(
+        new Gradient().setColorGradient("#3F2CAF", "#8BC2E3").getColors()
+      ).to.satisfy(isArrayOfStrings);
 
@@ -18,5 +20,5 @@ function isArrayOfStrings() {
 
-  describe("setGradient", function () {
+  describe("setColorGradient", function () {
     it("type should be an object", function () {
-      expect(colorGradient.setGradient("#3F2CAF", "#8BC2E3")).to.satisfy(
+      expect(new Gradient().setColorGradient("#3F2CAF", "#8BC2E3")).to.satisfy(
         isObject
@@ -31,5 +33,9 @@ );
 
-  describe("getArray", function () {
+  describe("getColors", function () {
     it("array length should be 10", function () {
-      expect(colorGradient.getArray("#3F2CAF", "#8BC2E3")).to.satisfy(isArray);
+      expect(
+        new Gradient()
+          .setColorGradient("#3F2CAF", "e9446a")
+          .getColors("#3F2CAF", "#8BC2E3")
+      ).to.satisfy(isArray);
 
@@ -44,6 +50,11 @@ function isArray(object) {
     it("should be equal to #8bc2e3", function () {
-      expect(colorGradient.getColor(10)).to.satisfy(isEqual);
+      expect(
+        new Gradient()
+          .setColorGradient("#3F2CAF", "e9446a")
+          .setMidpoint(20)
+          .getColor(2)
+      ).to.satisfy(isEqual);
 
       function isEqual(item) {
-        return item === "#8bc2e3";
+        return item === "#5930a5";
       }
@@ -50,0 +61,0 @@ });

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16622

increased by4.69%

Lines of code

209

increased by11.76%

Number of lines in readme file

100

increased by5.26%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes