hyperprop-charting-library 0.1.51 → 0.1.53

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 +23 -9
  2. package/dist/hyperprop-charting-library.js +23 -9
  3. package/dist/index.cjs +23 -9
  4. package/dist/index.js +23 -9
  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,15 +2234,17 @@ 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}`;
2241
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2230
2242
  for (const tick of uniqueTicks) {
2231
2243
  if (tick < axisInfo.min || tick > axisInfo.max) {
2232
2244
  continue;
2233
2245
  }
2234
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2246
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2247
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2235
2248
  }
2236
2249
  ctx.restore();
2237
2250
  if (labels.visible) {
@@ -2288,10 +2301,11 @@ function createChart(element, options = {}) {
2288
2301
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2289
2302
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2290
2303
  ctx.stroke();
2304
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2291
2305
  for (let tick = 0; tick <= yTicks; tick += 1) {
2292
2306
  const ratio = tick / yTicks;
2293
2307
  const price = yMin + yRange * ratio;
2294
- const y = yFromPrice(price);
2308
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2295
2309
  const prevFont = ctx.font;
2296
2310
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2297
2311
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
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,15 +2210,17 @@ 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}`;
2217
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2206
2218
  for (const tick of uniqueTicks) {
2207
2219
  if (tick < axisInfo.min || tick > axisInfo.max) {
2208
2220
  continue;
2209
2221
  }
2210
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2222
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2223
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2211
2224
  }
2212
2225
  ctx.restore();
2213
2226
  if (labels.visible) {
@@ -2264,10 +2277,11 @@ function createChart(element, options = {}) {
2264
2277
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2265
2278
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2266
2279
  ctx.stroke();
2280
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2267
2281
  for (let tick = 0; tick <= yTicks; tick += 1) {
2268
2282
  const ratio = tick / yTicks;
2269
2283
  const price = yMin + yRange * ratio;
2270
- const y = yFromPrice(price);
2284
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2271
2285
  const prevFont = ctx.font;
2272
2286
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2273
2287
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
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,15 +2234,17 @@ 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}`;
2241
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2230
2242
  for (const tick of uniqueTicks) {
2231
2243
  if (tick < axisInfo.min || tick > axisInfo.max) {
2232
2244
  continue;
2233
2245
  }
2234
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2246
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2247
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2235
2248
  }
2236
2249
  ctx.restore();
2237
2250
  if (labels.visible) {
@@ -2288,10 +2301,11 @@ function createChart(element, options = {}) {
2288
2301
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2289
2302
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2290
2303
  ctx.stroke();
2304
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2291
2305
  for (let tick = 0; tick <= yTicks; tick += 1) {
2292
2306
  const ratio = tick / yTicks;
2293
2307
  const price = yMin + yRange * ratio;
2294
- const y = yFromPrice(price);
2308
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2295
2309
  const prevFont = ctx.font;
2296
2310
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2297
2311
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
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,15 +2210,17 @@ 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}`;
2217
+ const paneTickLabelInset = yAxisFontSize / 2 + 3;
2206
2218
  for (const tick of uniqueTicks) {
2207
2219
  if (tick < axisInfo.min || tick > axisInfo.max) {
2208
2220
  continue;
2209
2221
  }
2210
- drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
2222
+ const labelY = clamp(yFromPaneValue(tick), paneTop + paneTickLabelInset, paneBottom - paneTickLabelInset);
2223
+ drawText(formatPaneValue(tick), chartRight + 6, labelY, "left", "middle", yAxis.textColor);
2211
2224
  }
2212
2225
  ctx.restore();
2213
2226
  if (labels.visible) {
@@ -2264,10 +2277,11 @@ function createChart(element, options = {}) {
2264
2277
  ctx.moveTo(crisp(chartRight), crisp(chartTop));
2265
2278
  ctx.lineTo(crisp(chartRight), crisp(fullChartBottom));
2266
2279
  ctx.stroke();
2280
+ const priceScaleTickLabelInset = yAxisFontSize / 2 + 3;
2267
2281
  for (let tick = 0; tick <= yTicks; tick += 1) {
2268
2282
  const ratio = tick / yTicks;
2269
2283
  const price = yMin + yRange * ratio;
2270
- const y = yFromPrice(price);
2284
+ const y = clamp(yFromPrice(price), chartTop + priceScaleTickLabelInset, chartBottom - priceScaleTickLabelInset);
2271
2285
  const prevFont = ctx.font;
2272
2286
  ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
2273
2287
  drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.51",
3
+ "version": "0.1.53",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",