hyperprop-charting-library 0.1.157 → 0.1.158

package/dist/hyperprop-charting-library.cjs

@@ -5439,6 +5439,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5457,13 +5483,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5473,29 +5497,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {

package/dist/hyperprop-charting-library.js

@@ -5400,6 +5400,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5418,13 +5444,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5434,29 +5458,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {

package/dist/index.cjs

@@ -5439,6 +5439,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5457,13 +5483,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5473,29 +5497,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {

package/dist/index.js

@@ -5400,6 +5400,32 @@ function createChart(element, options = {}) {
     ctx.fill();
     ctx.restore();
   };
+  const drawTrashGlyph = (x, y, size, color) => {
+    const w = size * 0.8;
+    const h = size * 0.9;
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(x - w / 2, y - h * 0.28);
+    ctx.lineTo(x + w / 2, y - h * 0.28);
+    ctx.moveTo(x - w * 0.22, y - h * 0.28);
+    ctx.lineTo(x - w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.46);
+    ctx.lineTo(x + w * 0.22, y - h * 0.28);
+    ctx.moveTo(x - w * 0.36, y - h * 0.28);
+    ctx.lineTo(x - w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.28, y + h * 0.48);
+    ctx.lineTo(x + w * 0.36, y - h * 0.28);
+    ctx.moveTo(x - w * 0.1, y - h * 0.08);
+    ctx.lineTo(x - w * 0.1, y + h * 0.3);
+    ctx.moveTo(x + w * 0.1, y - h * 0.08);
+    ctx.lineTo(x + w * 0.1, y + h * 0.3);
+    ctx.stroke();
+    ctx.restore();
+  };
   const drawAlertLine = (alert, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const lineY = getLineY(alert.price, yFromPrice, chartTop, chartBottom, false);
     if (lineY === null) return;
@@ -5418,13 +5444,11 @@ function createChart(element, options = {}) {
     ctx.restore();
     const fontSize = Math.max(8, axis.fontSize);
     ctx.font = `${fontSize}px ${mergedOptions.fontFamily}`;
-    const text = alert.label ? `${formatPrice(alert.price)} ${alert.label}` : formatPrice(alert.price);
     const paddingX = 6;
     const bellWidth = fontSize + 2;
     const labelHeight = 20;
     const hovered = hoveredAlertId === alert.id;
-    const removeWidth = hovered ? labelHeight : 0;
-    const contentWidth = Math.ceil(measureTextWidth(text)) + bellWidth + paddingX * 3 + removeWidth;
+    const contentWidth = bellWidth + paddingX * 2;
     const labelWidth = getRightAxisLabelWidth(chartRight, contentWidth);
     const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
@@ -5434,29 +5458,26 @@ function createChart(element, options = {}) {
     fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, 3);
     const inkColor = labelTextColorOn(color, "#101114");
     drawBellGlyph(labelX + paddingX + bellWidth / 2, labelY + labelHeight / 2, fontSize, inkColor);
-    drawText(text, labelX + paddingX * 2 + bellWidth, labelY + labelHeight / 2, "left", "middle", inkColor);
+    ctx.restore();
     if (hovered) {
-      const removeX = labelX + labelWidth - removeWidth;
-      ctx.strokeStyle = inkColor;
-      ctx.lineWidth = 1.4;
-      const inset = 6;
-      ctx.beginPath();
-      ctx.moveTo(removeX + inset, labelY + inset);
-      ctx.lineTo(removeX + removeWidth - inset, labelY + labelHeight - inset);
-      ctx.moveTo(removeX + removeWidth - inset, labelY + inset);
-      ctx.lineTo(removeX + inset, labelY + labelHeight - inset);
-      ctx.stroke();
+      const buttonSize = labelHeight;
+      const buttonX = chartLeft + 10;
+      const buttonY = lineY - buttonSize / 2;
+      ctx.save();
+      ctx.fillStyle = color;
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), buttonSize, buttonSize, 3);
+      drawTrashGlyph(buttonX + buttonSize / 2, lineY, fontSize, inkColor);
+      ctx.restore();
       alertRegions.push({
         id: alert.id,
-        x: removeX,
-        y: labelY,
-        width: removeWidth,
-        height: labelHeight,
+        x: buttonX,
+        y: buttonY,
+        width: buttonSize,
+        height: buttonSize,
         part: "remove"
       });
     }
-    ctx.restore();
-    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth - removeWidth, height: labelHeight, part: "line" });
+    alertRegions.push({ id: alert.id, x: labelX, y: labelY, width: labelWidth, height: labelHeight, part: "line" });
     alertRegions.push({ id: alert.id, x: chartLeft, y: lineY - 5, width: chartRight - chartLeft, height: 10, part: "line" });
   };
   const drawOrderLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {

package/package.json

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