hyperprop-charting-library 0.1.61 → 0.1.62

package/dist/hyperprop-charting-library.cjs

@@ -2023,16 +2023,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2119,28 +2120,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2148,7 +2148,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2168,7 +2168,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);

package/dist/hyperprop-charting-library.js

@@ -1999,16 +1999,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2095,28 +2096,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2124,7 +2124,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2144,7 +2144,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);

package/dist/index.cjs

@@ -2023,16 +2023,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2119,28 +2120,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2148,7 +2148,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2168,7 +2168,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);

package/dist/index.js

@@ -1999,16 +1999,17 @@ function createChart(element, options = {}) {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
-    const FIB_LEVELS = [
-      { ratio: 0, color: "#787b86" },
-      { ratio: 0.236, color: "#f23645", band: "rgba(242,54,69,0.10)" },
-      { ratio: 0.382, color: "#ff9800", band: "rgba(255,152,0,0.10)" },
-      { ratio: 0.5, color: "#4caf50", band: "rgba(76,175,80,0.10)" },
-      { ratio: 0.618, color: "#089981", band: "rgba(8,153,129,0.10)" },
-      { ratio: 0.786, color: "#00bcd4", band: "rgba(0,188,212,0.10)" },
-      { ratio: 1, color: "#787b86", band: "rgba(120,123,134,0.10)" },
-      { ratio: 1.618, color: "#2962ff", band: "rgba(41,98,255,0.08)" }
-    ];
+    const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const hexToRgba = (hex, alpha) => {
+      const cleaned = hex.replace("#", "");
+      if (cleaned.length !== 6) {
+        return `rgba(0,0,0,${alpha})`;
+      }
+      const r = parseInt(cleaned.slice(0, 2), 16);
+      const g = parseInt(cleaned.slice(2, 4), 16);
+      const b = parseInt(cleaned.slice(4, 6), 16);
+      return `rgba(${r},${g},${b},${alpha})`;
+    };
     const drawDrawingHandle = (x, y, color) => {
       ctx.save();
       ctx.setLineDash([]);
@@ -2095,28 +2096,27 @@ function createChart(element, options = {}) {
           const secondY = yFromPrice(second.price);
           const lineLeft = chartLeft;
           const lineRight = chartRight;
-          const levelLines = FIB_LEVELS.map((level) => {
-            const price = first.price + (second.price - first.price) * (1 - level.ratio);
-            return { ...level, price, y: yFromPrice(price) };
+          const levelLines = FIB_RATIOS.map((ratio) => {
+            const price = first.price + (second.price - first.price) * (1 - ratio);
+            return { ratio, price, y: yFromPrice(price) };
           });
+          const bandColor = hexToRgba(drawing.color, 0.1);
           for (let index = 0; index < levelLines.length - 1; index += 1) {
             const top = levelLines[index];
             const bottom = levelLines[index + 1];
-            const fillColor = bottom.band ?? top.band;
-            if (!fillColor) continue;
             const bandTop = Math.min(top.y, bottom.y);
             const bandBottom = Math.max(top.y, bottom.y);
             ctx.save();
-            ctx.fillStyle = fillColor;
+            ctx.fillStyle = bandColor;
             ctx.globalAlpha = draft ? 0.5 : 1;
             ctx.fillRect(lineLeft, bandTop, lineRight - lineLeft, bandBottom - bandTop);
             ctx.restore();
           }
           ctx.save();
           ctx.lineWidth = drawing.width;
+          ctx.strokeStyle = drawing.color;
           applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
           for (const level of levelLines) {
-            ctx.strokeStyle = level.color;
             ctx.beginPath();
             ctx.moveTo(crisp(lineLeft), crisp(level.y));
             ctx.lineTo(crisp(lineRight), crisp(level.y));
@@ -2124,7 +2124,7 @@ function createChart(element, options = {}) {
           }
           ctx.restore();
           ctx.save();
-          ctx.strokeStyle = "rgba(148,163,184,0.7)";
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
           ctx.setLineDash([4, 4]);
           ctx.lineWidth = 1;
           ctx.beginPath();
@@ -2144,7 +2144,7 @@ function createChart(element, options = {}) {
             const bgY = level.y - 9;
             ctx.fillStyle = mergedOptions.backgroundColor;
             fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
-            ctx.fillStyle = level.color;
+            ctx.fillStyle = drawing.color;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
             ctx.fillText(labelText, bgX + padding, bgY + 8);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",