hyperprop-charting-library 0.1.52 → 0.1.54

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 +28 -10
  2. package/dist/hyperprop-charting-library.js +28 -10
  3. package/dist/index.cjs +28 -10
  4. package/dist/index.js +28 -10
  5. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -615,7 +615,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
615
615
  if (guideLines) {
616
616
  paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
617
617
  }
618
- if (latestValue !== null) {
618
+ if (options.showLegend !== false && latestValue !== null) {
619
619
  paneInfo.legendValues = [
620
620
  {
621
621
  ...options.legendLabel ? { label: options.legendLabel } : {},
@@ -835,10 +835,19 @@ var BUILTIN_RSI_INDICATOR = {
835
835
  name: "RSI",
836
836
  pane: "separate",
837
837
  paneHeightRatio: 0.18,
838
- defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
838
+ defaultInputs: {
839
+ length: 14,
840
+ color: "#3b82f6",
841
+ width: 2,
842
+ showLegend: true,
843
+ showValueLabel: true,
844
+ showGuideLines: true,
845
+ showScaleLabels: true
846
+ },
839
847
  draw: (ctx, renderContext, inputs) => {
840
848
  const length = clampIndicatorLength(inputs.length, 14);
841
849
  const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
850
+ const guideLines = inputs.showGuideLines === false ? void 0 : [30, 50, 70];
842
851
  return drawSeparateSeries(
843
852
  ctx,
844
853
  renderContext,
@@ -847,14 +856,16 @@ var BUILTIN_RSI_INDICATOR = {
847
856
  Number(inputs.width) || 2,
848
857
  0,
849
858
  100,
850
- [30, 50, 70],
859
+ guideLines,
851
860
  {
852
- title: `RSI ${length}`,
853
- axisTicks: [0, 30, 50, 70, 100],
861
+ ...inputs.showLegend === false ? {} : { title: `RSI ${length}` },
862
+ axisTicks: inputs.showScaleLabels === false ? [] : [0, 30, 50, 70, 100],
854
863
  decimals: 2,
864
+ valueLabel: inputs.showValueLabel !== false,
855
865
  valueLabelColor: "#9E9E9E",
856
866
  valueLabelBackgroundColor: "#9E9E9E",
857
- valueLabelTextColor: "#0f172a"
867
+ valueLabelTextColor: "#0f172a",
868
+ showLegend: inputs.showLegend !== false
858
869
  }
859
870
  );
860
871
  }
@@ -2223,7 +2234,7 @@ function createChart(element, options = {}) {
2223
2234
  const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
2224
2235
  return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
2225
2236
  };
2226
- const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2237
+ const axisTicks = axisInfo.ticks !== void 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2227
2238
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2228
2239
  ctx.save();
2229
2240
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
@@ -2290,10 +2301,11 @@ function createChart(element, options = {}) {
2290
2301
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2291
2302
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2292
2303
  ctx.stroke();
2304
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2293
2305
  for (let tick = 0; tick <= yTicks; tick += 1) {
2294
2306
  const ratio = tick / yTicks;
2295
2307
  const price = yMin + yRange * ratio;
2296
- const y = yFromPrice(price);
2308
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2297
2309
  const prevFont = ctx.font;
2298
2310
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2299
2311
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
@@ -2529,8 +2541,14 @@ function createChart(element, options = {}) {
2529
2541
  drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
2530
2542
  }
2531
2543
  if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
2532
- const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
2533
- const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
2544
+ const isLegendInputValue = (value) => {
2545
+ if (typeof value === "number" || typeof value === "boolean") {
2546
+ return true;
2547
+ }
2548
+ return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
2549
+ };
2550
+ const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
2551
+ const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
2534
2552
  if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
2535
2553
  return `${plugin.name} ${inputValues.join(" ")}`;
2536
2554
  }
package/dist/hyperprop-charting-library.js CHANGED
@@ -591,7 +591,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
591
591
  if (guideLines) {
592
592
  paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
593
593
  }
594
- if (latestValue !== null) {
594
+ if (options.showLegend !== false && latestValue !== null) {
595
595
  paneInfo.legendValues = [
596
596
  {
597
597
  ...options.legendLabel ? { label: options.legendLabel } : {},
@@ -811,10 +811,19 @@ var BUILTIN_RSI_INDICATOR = {
811
811
  name: "RSI",
812
812
  pane: "separate",
813
813
  paneHeightRatio: 0.18,
814
- defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
814
+ defaultInputs: {
815
+ length: 14,
816
+ color: "#3b82f6",
817
+ width: 2,
818
+ showLegend: true,
819
+ showValueLabel: true,
820
+ showGuideLines: true,
821
+ showScaleLabels: true
822
+ },
815
823
  draw: (ctx, renderContext, inputs) => {
816
824
  const length = clampIndicatorLength(inputs.length, 14);
817
825
  const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
826
+ const guideLines = inputs.showGuideLines === false ? void 0 : [30, 50, 70];
818
827
  return drawSeparateSeries(
819
828
  ctx,
820
829
  renderContext,
@@ -823,14 +832,16 @@ var BUILTIN_RSI_INDICATOR = {
823
832
  Number(inputs.width) || 2,
824
833
  0,
825
834
  100,
826
- [30, 50, 70],
835
+ guideLines,
827
836
  {
828
- title: `RSI ${length}`,
829
- axisTicks: [0, 30, 50, 70, 100],
837
+ ...inputs.showLegend === false ? {} : { title: `RSI ${length}` },
838
+ axisTicks: inputs.showScaleLabels === false ? [] : [0, 30, 50, 70, 100],
830
839
  decimals: 2,
840
+ valueLabel: inputs.showValueLabel !== false,
831
841
  valueLabelColor: "#9E9E9E",
832
842
  valueLabelBackgroundColor: "#9E9E9E",
833
- valueLabelTextColor: "#0f172a"
843
+ valueLabelTextColor: "#0f172a",
844
+ showLegend: inputs.showLegend !== false
834
845
  }
835
846
  );
836
847
  }
@@ -2199,7 +2210,7 @@ function createChart(element, options = {}) {
2199
2210
  const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
2200
2211
  return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
2201
2212
  };
2202
- const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2213
+ const axisTicks = axisInfo.ticks !== void 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2203
2214
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2204
2215
  ctx.save();
2205
2216
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
@@ -2266,10 +2277,11 @@ function createChart(element, options = {}) {
2266
2277
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2267
2278
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2268
2279
  ctx.stroke();
2280
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2269
2281
  for (let tick = 0; tick <= yTicks; tick += 1) {
2270
2282
  const ratio = tick / yTicks;
2271
2283
  const price = yMin + yRange * ratio;
2272
- const y = yFromPrice(price);
2284
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2273
2285
  const prevFont = ctx.font;
2274
2286
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2275
2287
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
@@ -2505,8 +2517,14 @@ function createChart(element, options = {}) {
2505
2517
  drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
2506
2518
  }
2507
2519
  if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
2508
- const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
2509
- const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
2520
+ const isLegendInputValue = (value) => {
2521
+ if (typeof value === "number" || typeof value === "boolean") {
2522
+ return true;
2523
+ }
2524
+ return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
2525
+ };
2526
+ const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
2527
+ const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
2510
2528
  if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
2511
2529
  return `${plugin.name} ${inputValues.join(" ")}`;
2512
2530
  }
package/dist/index.cjs CHANGED
@@ -615,7 +615,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
615
615
  if (guideLines) {
616
616
  paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
617
617
  }
618
- if (latestValue !== null) {
618
+ if (options.showLegend !== false && latestValue !== null) {
619
619
  paneInfo.legendValues = [
620
620
  {
621
621
  ...options.legendLabel ? { label: options.legendLabel } : {},
@@ -835,10 +835,19 @@ var BUILTIN_RSI_INDICATOR = {
835
835
  name: "RSI",
836
836
  pane: "separate",
837
837
  paneHeightRatio: 0.18,
838
- defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
838
+ defaultInputs: {
839
+ length: 14,
840
+ color: "#3b82f6",
841
+ width: 2,
842
+ showLegend: true,
843
+ showValueLabel: true,
844
+ showGuideLines: true,
845
+ showScaleLabels: true
846
+ },
839
847
  draw: (ctx, renderContext, inputs) => {
840
848
  const length = clampIndicatorLength(inputs.length, 14);
841
849
  const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
850
+ const guideLines = inputs.showGuideLines === false ? void 0 : [30, 50, 70];
842
851
  return drawSeparateSeries(
843
852
  ctx,
844
853
  renderContext,
@@ -847,14 +856,16 @@ var BUILTIN_RSI_INDICATOR = {
847
856
  Number(inputs.width) || 2,
848
857
  0,
849
858
  100,
850
- [30, 50, 70],
859
+ guideLines,
851
860
  {
852
- title: `RSI ${length}`,
853
- axisTicks: [0, 30, 50, 70, 100],
861
+ ...inputs.showLegend === false ? {} : { title: `RSI ${length}` },
862
+ axisTicks: inputs.showScaleLabels === false ? [] : [0, 30, 50, 70, 100],
854
863
  decimals: 2,
864
+ valueLabel: inputs.showValueLabel !== false,
855
865
  valueLabelColor: "#9E9E9E",
856
866
  valueLabelBackgroundColor: "#9E9E9E",
857
- valueLabelTextColor: "#0f172a"
867
+ valueLabelTextColor: "#0f172a",
868
+ showLegend: inputs.showLegend !== false
858
869
  }
859
870
  );
860
871
  }
@@ -2223,7 +2234,7 @@ function createChart(element, options = {}) {
2223
2234
  const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
2224
2235
  return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
2225
2236
  };
2226
- const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2237
+ const axisTicks = axisInfo.ticks !== void 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2227
2238
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2228
2239
  ctx.save();
2229
2240
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
@@ -2290,10 +2301,11 @@ function createChart(element, options = {}) {
2290
2301
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2291
2302
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2292
2303
  ctx.stroke();
2304
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2293
2305
  for (let tick = 0; tick <= yTicks; tick += 1) {
2294
2306
  const ratio = tick / yTicks;
2295
2307
  const price = yMin + yRange * ratio;
2296
- const y = yFromPrice(price);
2308
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2297
2309
  const prevFont = ctx.font;
2298
2310
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2299
2311
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
@@ -2529,8 +2541,14 @@ function createChart(element, options = {}) {
2529
2541
  drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
2530
2542
  }
2531
2543
  if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
2532
- const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
2533
- const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
2544
+ const isLegendInputValue = (value) => {
2545
+ if (typeof value === "number" || typeof value === "boolean") {
2546
+ return true;
2547
+ }
2548
+ return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
2549
+ };
2550
+ const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
2551
+ const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
2534
2552
  if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
2535
2553
  return `${plugin.name} ${inputValues.join(" ")}`;
2536
2554
  }
package/dist/index.js CHANGED
@@ -591,7 +591,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
591
591
  if (guideLines) {
592
592
  paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
593
593
  }
594
- if (latestValue !== null) {
594
+ if (options.showLegend !== false && latestValue !== null) {
595
595
  paneInfo.legendValues = [
596
596
  {
597
597
  ...options.legendLabel ? { label: options.legendLabel } : {},
@@ -811,10 +811,19 @@ var BUILTIN_RSI_INDICATOR = {
811
811
  name: "RSI",
812
812
  pane: "separate",
813
813
  paneHeightRatio: 0.18,
814
- defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
814
+ defaultInputs: {
815
+ length: 14,
816
+ color: "#3b82f6",
817
+ width: 2,
818
+ showLegend: true,
819
+ showValueLabel: true,
820
+ showGuideLines: true,
821
+ showScaleLabels: true
822
+ },
815
823
  draw: (ctx, renderContext, inputs) => {
816
824
  const length = clampIndicatorLength(inputs.length, 14);
817
825
  const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
826
+ const guideLines = inputs.showGuideLines === false ? void 0 : [30, 50, 70];
818
827
  return drawSeparateSeries(
819
828
  ctx,
820
829
  renderContext,
@@ -823,14 +832,16 @@ var BUILTIN_RSI_INDICATOR = {
823
832
  Number(inputs.width) || 2,
824
833
  0,
825
834
  100,
826
- [30, 50, 70],
835
+ guideLines,
827
836
  {
828
- title: `RSI ${length}`,
829
- axisTicks: [0, 30, 50, 70, 100],
837
+ ...inputs.showLegend === false ? {} : { title: `RSI ${length}` },
838
+ axisTicks: inputs.showScaleLabels === false ? [] : [0, 30, 50, 70, 100],
830
839
  decimals: 2,
840
+ valueLabel: inputs.showValueLabel !== false,
831
841
  valueLabelColor: "#9E9E9E",
832
842
  valueLabelBackgroundColor: "#9E9E9E",
833
- valueLabelTextColor: "#0f172a"
843
+ valueLabelTextColor: "#0f172a",
844
+ showLegend: inputs.showLegend !== false
834
845
  }
835
846
  );
836
847
  }
@@ -2199,7 +2210,7 @@ function createChart(element, options = {}) {
2199
2210
  const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
2200
2211
  return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
2201
2212
  };
2202
- const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2213
+ const axisTicks = axisInfo.ticks !== void 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
2203
2214
  const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
2204
2215
  ctx.save();
2205
2216
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
@@ -2266,10 +2277,11 @@ function createChart(element, options = {}) {
2266
2277
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2267
2278
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2268
2279
  ctx.stroke();
2280
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2269
2281
  for (let tick = 0; tick <= yTicks; tick += 1) {
2270
2282
  const ratio = tick / yTicks;
2271
2283
  const price = yMin + yRange * ratio;
2272
- const y = yFromPrice(price);
2284
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2273
2285
  const prevFont = ctx.font;
2274
2286
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2275
2287
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
@@ -2505,8 +2517,14 @@ function createChart(element, options = {}) {
2505
2517
  drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
2506
2518
  }
2507
2519
  if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
2508
- const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
2509
- const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
2520
+ const isLegendInputValue = (value) => {
2521
+ if (typeof value === "number" || typeof value === "boolean") {
2522
+ return true;
2523
+ }
2524
+ return typeof value === "string" && !/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value.trim());
2525
+ };
2526
+ const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
2527
+ const inputValues = Object.entries(indicator.inputs).filter(([, value]) => isLegendInputValue(value)).slice(0, 2).map(([, value]) => String(value));
2510
2528
  if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
2511
2529
  return `${plugin.name} ${inputValues.join(" ")}`;
2512
2530
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.52",
3
+ "version": "0.1.54",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",