hyperprop-charting-library 0.1.58 → 0.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/hyperprop-charting-library.cjs +8 -11
  2. package/dist/hyperprop-charting-library.js +8 -11
  3. package/dist/index.cjs +8 -11
  4. package/dist/index.js +8 -11
  5. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -2033,27 +2033,24 @@ function createChart(element, options = {}) {
2033
2033
  ctx.stroke();
2034
2034
  ctx.restore();
2035
2035
  };
2036
- const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
2036
+ const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
2037
2037
  if (!labelText) return;
2038
2038
  ctx.save();
2039
- ctx.translate(anchorX, anchorY);
2040
- ctx.rotate(angle);
2041
- ctx.translate(0, -8);
2042
2039
  const prevFont = ctx.font;
2043
2040
  ctx.font = `500 12px ${mergedOptions.fontFamily}`;
2044
2041
  const textWidth = ctx.measureText(labelText).width;
2045
2042
  const paddingX = 6;
2046
- const paddingY = 3;
2047
2043
  const bgWidth = textWidth + paddingX * 2;
2048
2044
  const bgHeight = 18;
2045
+ const bgX = anchorX - bgWidth / 2;
2046
+ const bgY = anchorY - bgHeight - 6;
2049
2047
  ctx.fillStyle = `${color}1f`;
2050
- fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
2048
+ fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
2051
2049
  ctx.fillStyle = color;
2052
2050
  ctx.textAlign = "center";
2053
2051
  ctx.textBaseline = "middle";
2054
- ctx.fillText(labelText, 0, -bgHeight / 2);
2052
+ ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
2055
2053
  ctx.font = prevFont;
2056
- void paddingY;
2057
2054
  ctx.restore();
2058
2055
  };
2059
2056
  const drawDrawing = (drawing, draft = false) => {
@@ -2076,7 +2073,8 @@ function createChart(element, options = {}) {
2076
2073
  ctx.stroke();
2077
2074
  drawDrawingHandle(handleX, y, drawing.color);
2078
2075
  if (drawing.label) {
2079
- drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
2076
+ const midX = (chartLeft + chartRight) / 2;
2077
+ drawDrawingLabel(drawing.label, midX, y, drawing.color);
2080
2078
  }
2081
2079
  }
2082
2080
  } else if (drawing.type === "trendline") {
@@ -2096,8 +2094,7 @@ function createChart(element, options = {}) {
2096
2094
  if (drawing.label) {
2097
2095
  const midX = (firstX + secondX) / 2;
2098
2096
  const midY = (firstY + secondY) / 2;
2099
- const angle = Math.atan2(secondY - firstY, secondX - firstX);
2100
- drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
2097
+ drawDrawingLabel(drawing.label, midX, midY, drawing.color);
2101
2098
  }
2102
2099
  }
2103
2100
  }
package/dist/hyperprop-charting-library.js CHANGED
@@ -2009,27 +2009,24 @@ function createChart(element, options = {}) {
2009
2009
  ctx.stroke();
2010
2010
  ctx.restore();
2011
2011
  };
2012
- const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
2012
+ const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
2013
2013
  if (!labelText) return;
2014
2014
  ctx.save();
2015
- ctx.translate(anchorX, anchorY);
2016
- ctx.rotate(angle);
2017
- ctx.translate(0, -8);
2018
2015
  const prevFont = ctx.font;
2019
2016
  ctx.font = `500 12px ${mergedOptions.fontFamily}`;
2020
2017
  const textWidth = ctx.measureText(labelText).width;
2021
2018
  const paddingX = 6;
2022
- const paddingY = 3;
2023
2019
  const bgWidth = textWidth + paddingX * 2;
2024
2020
  const bgHeight = 18;
2021
+ const bgX = anchorX - bgWidth / 2;
2022
+ const bgY = anchorY - bgHeight - 6;
2025
2023
  ctx.fillStyle = `${color}1f`;
2026
- fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
2024
+ fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
2027
2025
  ctx.fillStyle = color;
2028
2026
  ctx.textAlign = "center";
2029
2027
  ctx.textBaseline = "middle";
2030
- ctx.fillText(labelText, 0, -bgHeight / 2);
2028
+ ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
2031
2029
  ctx.font = prevFont;
2032
- void paddingY;
2033
2030
  ctx.restore();
2034
2031
  };
2035
2032
  const drawDrawing = (drawing, draft = false) => {
@@ -2052,7 +2049,8 @@ function createChart(element, options = {}) {
2052
2049
  ctx.stroke();
2053
2050
  drawDrawingHandle(handleX, y, drawing.color);
2054
2051
  if (drawing.label) {
2055
- drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
2052
+ const midX = (chartLeft + chartRight) / 2;
2053
+ drawDrawingLabel(drawing.label, midX, y, drawing.color);
2056
2054
  }
2057
2055
  }
2058
2056
  } else if (drawing.type === "trendline") {
@@ -2072,8 +2070,7 @@ function createChart(element, options = {}) {
2072
2070
  if (drawing.label) {
2073
2071
  const midX = (firstX + secondX) / 2;
2074
2072
  const midY = (firstY + secondY) / 2;
2075
- const angle = Math.atan2(secondY - firstY, secondX - firstX);
2076
- drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
2073
+ drawDrawingLabel(drawing.label, midX, midY, drawing.color);
2077
2074
  }
2078
2075
  }
2079
2076
  }
package/dist/index.cjs CHANGED
@@ -2033,27 +2033,24 @@ function createChart(element, options = {}) {
2033
2033
  ctx.stroke();
2034
2034
  ctx.restore();
2035
2035
  };
2036
- const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
2036
+ const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
2037
2037
  if (!labelText) return;
2038
2038
  ctx.save();
2039
- ctx.translate(anchorX, anchorY);
2040
- ctx.rotate(angle);
2041
- ctx.translate(0, -8);
2042
2039
  const prevFont = ctx.font;
2043
2040
  ctx.font = `500 12px ${mergedOptions.fontFamily}`;
2044
2041
  const textWidth = ctx.measureText(labelText).width;
2045
2042
  const paddingX = 6;
2046
- const paddingY = 3;
2047
2043
  const bgWidth = textWidth + paddingX * 2;
2048
2044
  const bgHeight = 18;
2045
+ const bgX = anchorX - bgWidth / 2;
2046
+ const bgY = anchorY - bgHeight - 6;
2049
2047
  ctx.fillStyle = `${color}1f`;
2050
- fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
2048
+ fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
2051
2049
  ctx.fillStyle = color;
2052
2050
  ctx.textAlign = "center";
2053
2051
  ctx.textBaseline = "middle";
2054
- ctx.fillText(labelText, 0, -bgHeight / 2);
2052
+ ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
2055
2053
  ctx.font = prevFont;
2056
- void paddingY;
2057
2054
  ctx.restore();
2058
2055
  };
2059
2056
  const drawDrawing = (drawing, draft = false) => {
@@ -2076,7 +2073,8 @@ function createChart(element, options = {}) {
2076
2073
  ctx.stroke();
2077
2074
  drawDrawingHandle(handleX, y, drawing.color);
2078
2075
  if (drawing.label) {
2079
- drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
2076
+ const midX = (chartLeft + chartRight) / 2;
2077
+ drawDrawingLabel(drawing.label, midX, y, drawing.color);
2080
2078
  }
2081
2079
  }
2082
2080
  } else if (drawing.type === "trendline") {
@@ -2096,8 +2094,7 @@ function createChart(element, options = {}) {
2096
2094
  if (drawing.label) {
2097
2095
  const midX = (firstX + secondX) / 2;
2098
2096
  const midY = (firstY + secondY) / 2;
2099
- const angle = Math.atan2(secondY - firstY, secondX - firstX);
2100
- drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
2097
+ drawDrawingLabel(drawing.label, midX, midY, drawing.color);
2101
2098
  }
2102
2099
  }
2103
2100
  }
package/dist/index.js CHANGED
@@ -2009,27 +2009,24 @@ function createChart(element, options = {}) {
2009
2009
  ctx.stroke();
2010
2010
  ctx.restore();
2011
2011
  };
2012
- const drawDrawingLabel = (labelText, anchorX, anchorY, color, angle) => {
2012
+ const drawDrawingLabel = (labelText, anchorX, anchorY, color) => {
2013
2013
  if (!labelText) return;
2014
2014
  ctx.save();
2015
- ctx.translate(anchorX, anchorY);
2016
- ctx.rotate(angle);
2017
- ctx.translate(0, -8);
2018
2015
  const prevFont = ctx.font;
2019
2016
  ctx.font = `500 12px ${mergedOptions.fontFamily}`;
2020
2017
  const textWidth = ctx.measureText(labelText).width;
2021
2018
  const paddingX = 6;
2022
- const paddingY = 3;
2023
2019
  const bgWidth = textWidth + paddingX * 2;
2024
2020
  const bgHeight = 18;
2021
+ const bgX = anchorX - bgWidth / 2;
2022
+ const bgY = anchorY - bgHeight - 6;
2025
2023
  ctx.fillStyle = `${color}1f`;
2026
- fillRoundedRect(-bgWidth / 2, -bgHeight, bgWidth, bgHeight, 4);
2024
+ fillRoundedRect(bgX, bgY, bgWidth, bgHeight, 4);
2027
2025
  ctx.fillStyle = color;
2028
2026
  ctx.textAlign = "center";
2029
2027
  ctx.textBaseline = "middle";
2030
- ctx.fillText(labelText, 0, -bgHeight / 2);
2028
+ ctx.fillText(labelText, anchorX, bgY + bgHeight / 2);
2031
2029
  ctx.font = prevFont;
2032
- void paddingY;
2033
2030
  ctx.restore();
2034
2031
  };
2035
2032
  const drawDrawing = (drawing, draft = false) => {
@@ -2052,7 +2049,8 @@ function createChart(element, options = {}) {
2052
2049
  ctx.stroke();
2053
2050
  drawDrawingHandle(handleX, y, drawing.color);
2054
2051
  if (drawing.label) {
2055
- drawDrawingLabel(drawing.label, chartLeft + 60, y, drawing.color, 0);
2052
+ const midX = (chartLeft + chartRight) / 2;
2053
+ drawDrawingLabel(drawing.label, midX, y, drawing.color);
2056
2054
  }
2057
2055
  }
2058
2056
  } else if (drawing.type === "trendline") {
@@ -2072,8 +2070,7 @@ function createChart(element, options = {}) {
2072
2070
  if (drawing.label) {
2073
2071
  const midX = (firstX + secondX) / 2;
2074
2072
  const midY = (firstY + secondY) / 2;
2075
- const angle = Math.atan2(secondY - firstY, secondX - firstX);
2076
- drawDrawingLabel(drawing.label, midX, midY, drawing.color, angle);
2073
+ drawDrawingLabel(drawing.label, midX, midY, drawing.color);
2077
2074
  }
2078
2075
  }
2079
2076
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.58",
3
+ "version": "0.1.59",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",