javascript-color-gradient - npm Package Compare versions

Comparing version 2.4.4 to 2.5.0

CODE_OF_CONDUCT.md

@@ -0,0 +0,0 @@ # Contributor Covenant Code of Conduct

package.json

 {
   "name": "javascript-color-gradient",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "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. ",
@@ -38,7 +38,7 @@ "main": "src/index.js",
     "chai": "4.2.0",
-    "mocha": "7.1.2",
+    "mocha": "10.1.0",
     "npm-run-all": "4.1.5",
     "rimraf": "3.0.2",
     "webpack": "4.43.0",
-    "webpack-cli": "3.3.11"
+    "webpack-cli": "3.3.12"
   },
@@ -45,0 +45,0 @@ "babel": {

README.md

@@ -23,3 +23,3 @@ <div>
 ```javascript
-import { Gradient } from "javascript-color-gradient";
+import Gradient from "javascript-color-gradient";
 ```
@@ -47,10 +47,17 @@
 ```javascript
-import { Gradient } from "javascript-color-gradient";
+import Gradient from "javascript-color-gradient";
 
 const gradientArray = new Gradient()
-  .setColorGradient("#3F2CAF", "e9446a")
+  .setColorGradient("#3F2CAF", "#e9446a")
   .getColors();
 
 console.log(gradientArray);
-// ["#502ea8", "#6131a1", "#72339a", "#833693", "#94388d", "#a53a86", "#b63d7f", "#c73f78", "#d84271", "#e9446a"]
+
+[
+  '#3f2caf', '#522fa7',
+  '#6531a0', '#783498',
+  '#8b3790', '#9d3989',
+  '#b03c81', '#c33f79',
+  '#d64172', '#e9446a'
+]
 ```
@@ -61,3 +68,3 @@
 ```javascript
-import colorGradient from "javascript-color-gradient";
+import Gradient from "javascript-color-gradient";
 
@@ -70,3 +77,14 @@ const gradientArray = new Gradient()
 console.log(gradientArray);
-// ["#5930a5", "#72339a", "#8c3790", "#a53a86", "#bf3e7b", "#d84271", "#e94b6c", "#ea5f70", "#ea7375", "#eb8779", …]
+
+[
+  '#3f2caf', '#5a30a4',
+  '#753499', '#90378e',
+  '#aa3b83', '#c53f79',
+  '#e9526d', '#ea6772',
+  '#eb7c77', '#eb917b',
+  '#eca680', '#e6c588',
+  '#cfb989', '#b9ad89',
+  '#a3a18a', '#8d958a',
+  '#76898b', '#607D8B'
+]
 ```
@@ -77,11 +95,11 @@
 ```javascript
-import { Gradient } from "javascript-color-gradient";
+import Gradient from "javascript-color-gradient";
 
 const colorAtIndexTwo = new Gradient()
-  .setColorGradient("#3F2CAF", "e9446a")
-  .setMidpoint(20)
+  .setColorGradient("#3F2CAF", "#e9446a")
   .getColor(2);
 
 console.log(colorAtIndexTwo);
-// #5930a5
+
+#6531a0
 ```
@@ -88,0 +106,0 @@

src/index.js

 class GradientColor {
-  constructor(startColor = "", endColor = "", minNum = 0, maxNum = 10) {
-    this.setColorGradient = (colorStart, colorEnd) => {
-      startColor = getHexColor(colorStart);
-      endColor = getHexColor(colorEnd);
-    };
+  constructor() {
+    this.minNum = 0;
+    this.maxNum = 10;
+    this.startHex = "";
+    this.endHex = "";
+  }
 
-    this.setMidpoint = (minNumber, maxNumber) => {
-      minNum = minNumber;
-      maxNum = maxNumber;
-    };
+  setColorGradient(colorStart, colorEnd) {
+    if (!colorStart.startsWith("#") || !colorEnd.startsWith("#")) {
+      throw new Error('Colors must be in hexadecimal format starting with "#"');
+    }
 
-    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)
-          )
-        );
-      }
-    };
+    this.startHex = this.validateAndExpandHex(colorStart);
+    this.endHex = this.validateAndExpandHex(colorEnd);
+  }
 
-    const generateHex = (number, start, end) => {
-      if (number < minNum) {
-        number = minNum;
-      } else if (number > maxNum) {
-        number = maxNum;
-      }
+  validateAndExpandHex(hex) {
+    if (hex.length === 4) {
+      return "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+    } else if (hex.length === 7) {
+      return hex;
+    } else {
+      throw new Error(
+        "Invalid color format. Please use full hex color values (e.g., #3f2caf) instead of abbreviated formats",
+      );
+    }
+  }
 
-      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;
-    };
+  setMidpoint(minNumber = 0, maxNumber = 10) {
+    this.minNum = minNumber;
+    this.maxNum = maxNumber;
+  }
 
-    const getHexColor = (color) => {
-      return color.substring(color.length - 6, color.length);
-    };
+  getColor(numberValue) {
+    if (numberValue === undefined) return;
+
+    return (
+      "#" +
+      this.generateHex(
+        numberValue,
+        this.startHex.substring(1, 3),
+        this.endHex.substring(1, 3),
+      ) +
+      this.generateHex(
+        numberValue,
+        this.startHex.substring(3, 5),
+        this.endHex.substring(3, 5),
+      ) +
+      this.generateHex(
+        numberValue,
+        this.startHex.substring(5, 7),
+        this.endHex.substring(5, 7),
+      )
+    );
   }
+
+  generateHex(number, start, end) {
+    if (number < this.minNum) number = this.minNum;
+    else if (number > this.maxNum) number = this.maxNum;
+
+    const midPoint = this.maxNum - this.minNum;
+    const startBase = parseInt(start, 16);
+    const endBase = parseInt(end, 16);
+    const average = (endBase - startBase) / midPoint;
+    const finalBase = Math.round(average * (number - this.minNum) + startBase);
+    return finalBase.toString(16).padStart(2, "0");
+  }
 }
 
 class Gradient {
-  constructor(
-    colorGradients = "",
-    maxNum = 10,
-    colors = ["", ""],
-    intervals = []
-  ) {
-    const setColorGradient = (gradientColors) => {
-      if (gradientColors.length < 2) {
-        throw new Error(
-          `setColorGradient should have more than ${gradientColors.length} color`
-        );
-      } else {
-        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 = [
-          {
-            lower,
-            upper,
-          },
-        ];
+  constructor() {
+    this.maxNum = 10;
+    this.colors = [];
+    this.colorGradients = [];
+    this.intervals = [];
+  }
 
-        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);
-          colorGradients[i] = gradientColor;
-          intervals[i] = {
-            lower,
-            upper,
-          };
-        }
-        colors = gradientColors;
-      }
-    };
+  setColorGradient(...gradientColors) {
+    if (gradientColors.length < 2) {
+      throw new RangeError(`setColorGradient requires at least 2 colors`);
+    }
 
-    this.setColorGradient = (...gradientColors) => {
-      setColorGradient(gradientColors);
-      return this;
-    };
+    const increment = (this.maxNum - 1) / (gradientColors.length - 1);
+    this.colorGradients = [];
+    this.intervals = [];
 
-    this.getColors = () => {
-      const gradientColorsArray = [];
-      for (let j = 0; j < intervals.length; j++) {
-        const interval = intervals[j];
-        const start = interval.lower === 0 ? 1 : Math.ceil(interval.lower);
-        const end =
-          interval.upper === maxNum
-            ? interval.upper + 1
-            : Math.ceil(interval.upper);
-        for (let i = start; i < end; i++) {
-          gradientColorsArray.push(colorGradients[j].getColor(i));
-        }
-      }
-      return gradientColorsArray;
-    };
+    for (let i = 0; i < gradientColors.length - 1; i++) {
+      const gradientColor = new GradientColor();
+      const lower = increment * i;
+      const upper = increment * (i + 1);
+      gradientColor.setColorGradient(gradientColors[i], gradientColors[i + 1]);
+      gradientColor.setMidpoint(lower, upper);
+      this.colorGradients.push(gradientColor);
+      this.intervals.push({ lower, upper });
+    }
+    this.colors = gradientColors;
+    return this;
+  }
 
-    this.getColor = (numberValue) => {
-      if (isNaN(numberValue)) {
-        throw new TypeError(`getColor should be a number`);
-      } else if (numberValue <= 0) {
-        throw new TypeError(`getColor should be greater than ${numberValue}`);
-      } else {
-        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 colorGradients[index].getColor(toInsert);
+  getColors() {
+    const gradientColorsArray = [];
+    const numColors = this.maxNum + 1;
+
+    for (let j = 0; j < this.intervals.length; j++) {
+      const { lower, upper } = this.intervals[j];
+      const start = j === 0 ? 0 : Math.ceil(lower);
+      const end = j === this.intervals.length - 1 ? Math.ceil(upper) : Math.floor(upper);
+
+      for (let i = start; i < end; i++) {
+        gradientColorsArray.push(this.colorGradients[j].getColor(i));
       }
-    };
+    }
 
-    this.setMidpoint = (maxNumber) => {
-      if (!isNaN(maxNumber) && maxNumber >= 0) {
-        maxNum = maxNumber;
-        setColorGradient(colors);
-      } else if (maxNumber <= 0) {
-        throw new RangeError(`midPoint should be greater than ${maxNumber}`);
-      } else {
-        throw new RangeError("midPoint should be a number");
-      }
-      return this;
-    };
+    gradientColorsArray.push(this.colors[this.colors.length - 1]);
+    return gradientColorsArray.slice(0, numColors);
   }
+
+  getColor(numberValue) {
+    if (isNaN(numberValue)) {
+      throw new TypeError(`getColor requires a numeric value`);
+    }
+    if (numberValue <= 0) {
+      throw new RangeError(`getColor value should be greater than 0`);
+    }
+
+    const segment = (this.maxNum + 1) / this.colorGradients.length;
+    const index = Math.min(Math.floor(numberValue / segment), this.colorGradients.length - 1);
+    return this.colorGradients[index].getColor(numberValue);
+  }
+
+  setMidpoint(maxNumber = 10) {
+    if (isNaN(maxNumber) || maxNumber < this.colors.length) {
+      throw new RangeError(
+        `setMidpoint should be a number greater than or equal to the number of colors`,
+      );
+    }
+
+    this.maxNum = maxNumber ;
+    this.setColorGradient(...this.colors);
+    return this;
+  }
 }
 
-module.exports = Gradient;
+module.exports = Gradient;

src/index.test.js

 const Gradient = require("./index");
 const expect = require("chai").expect;
 
-describe("javascript-color-gradient", function () {
-  describe("getArray", function () {
-    it("should return an array of strings", function () {
-      expect(
-        new Gradient().setColorGradient("#3F2CAF", "#8BC2E3").getColors()
-      ).to.satisfy(isArrayOfStrings);
-
-      function isArrayOfStrings() {
-        return function (item) {
-          return typeof item === "string";
-        };
-      }
+describe("Gradient Color Library", function () {
+  describe("setColorGradient", function () {
+    it("should set gradient colors and return an object", function () {
+      const gradient = new Gradient();
+      gradient.setColorGradient("#3F2CAF", "#8BC2E3").setMidpoint(10);
+      
+      expect(gradient).to.be.an.instanceOf(Gradient);
+      expect(gradient.getColors()).to.be.an("array").that.is.not.empty;
     });
-  });
 
-  describe("setColorGradient", function () {
-    it("type should be an object", function () {
-      expect(new Gradient().setColorGradient("#3F2CAF", "#8BC2E3")).to.satisfy(
-        isObject
+    it("should throw error for invalid color format", function () {
+      const gradient = new Gradient();
+
+      expect(() => gradient.setColorGradient("#3F2CAF", "e9446a")).to.throw(
+        Error,
+        'Colors must be in hexadecimal format starting with "#"'
       );
-
-      function isObject(object) {
-        return typeof object === "object";
-      }
     });
@@ -32,12 +25,12 @@ });
   describe("getColors", function () {
-    it("array length should be 10", function () {
-      expect(
-        new Gradient()
-          .setColorGradient("#3F2CAF", "e9446a")
-          .getColors("#3F2CAF", "#8BC2E3")
-      ).to.satisfy(isArray);
+    it("should return an array of strings with length 10", function () {
+      const colors = new Gradient()
+        .setColorGradient("#3F2CAF", "#8BC2E3")
+        .setMidpoint(10)
+        .getColors();
 
-      function isArray(object) {
-        return object.length === 10;
-      }
+      expect(colors).to.be.an("array").that.has.lengthOf(10);
+      colors.forEach(color => {
+        expect(color).to.be.a("string");
+      });
     });
@@ -47,15 +40,54 @@ });
   describe("getColor", function () {
-    it("should be equal to #8bc2e3", function () {
-      expect(
-        new Gradient()
-          .setColorGradient("#3F2CAF", "e9446a")
-          .setMidpoint(20)
-          .getColor(2)
-      ).to.satisfy(isEqual);
+    it("should return the correct color", function () {
+      const color = new Gradient()
+        .setColorGradient("#3F2CAF", "#8BC2E3")
+        .setMidpoint(20)
+        .getColor(2);
 
-      function isEqual(item) {
-        return item === "#5930a5";
-      }
+      expect(color).to.equal("#473cb4");
     });
+
+    it("should throw error for non-numeric input", function () {
+      const gradient = new Gradient().setColorGradient("#3F2CAF", "#8BC2E3");
+
+      expect(() => gradient.getColor("invalid")).to.throw(
+        TypeError,
+        "getColor requires a numeric value"
+      );
+    });
+
+    it("should throw error for out of range input", function () {
+      const gradient = new Gradient().setColorGradient("#3F2CAF", "#8BC2E3");
+
+      expect(() => gradient.getColor(-1)).to.throw(
+        RangeError,
+        "getColor value should be greater than 0"
+      );
+    });
   });
+
+  describe("setMidpoint", function () {
+    it("should set the midpoint correctly", function () {
+      const gradient = new Gradient().setColorGradient("#3F2CAF", "#8BC2E3");
+    
+      gradient.setMidpoint(15);
+    
+      const colors = gradient.getColors();
+      expect(colors).to.have.lengthOf(15);
+    });
+
+    it("should throw error for invalid midpoint input", function () {
+      const gradient = new Gradient().setColorGradient("#3F2CAF", "#8BC2E3");
+
+      expect(() => gradient.setMidpoint("invalid")).to.throw(
+        RangeError,
+        "setMidpoint should be a number greater than or equal to the number of colors"
+      );
+
+      expect(() => gradient.setMidpoint(1)).to.throw(
+        RangeError,
+        "setMidpoint should be a number greater than or equal to the number of colors"
+      );
+    });
+  });
 });

webpack.config.babel.js

@@ -0,0 +0,0 @@ const path = require("path");

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

Fixed 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

17127

increased by3.04%

Number of lines in readme file

118

increased by18%

Worsened metrics

Lines of code

207

decreased by-0.96%

No dependency changes