hyperprop-charting-library 0.1.68 → 0.1.69

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 (9) hide show
  1. package/dist/hyperprop-charting-library.cjs +26 -15
  2. package/dist/hyperprop-charting-library.d.ts +2 -0
  3. package/dist/hyperprop-charting-library.js +26 -15
  4. package/dist/index.cjs +26 -15
  5. package/dist/index.d.cts +2 -0
  6. package/dist/index.d.ts +2 -0
  7. package/dist/index.js +26 -15
  8. package/docs/API.md +2 -0
  9. package/package.json +1 -1
package/dist/hyperprop-charting-library.cjs CHANGED
@@ -43,6 +43,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
43
43
  color: "#94a3b8",
44
44
  width: 1,
45
45
  style: "dotted",
46
+ mode: "cross",
47
+ dotRadius: 3,
46
48
  showHorizontal: true,
47
49
  showVertical: true,
48
50
  showPriceLabel: true,
@@ -2479,23 +2481,32 @@ function createChart(element, options = {}) {
2479
2481
  if (crosshair.visible && crosshairPoint) {
2480
2482
  const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
2481
2483
  const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
2482
- ctx.save();
2483
- ctx.strokeStyle = crosshair.color;
2484
- ctx.lineWidth = Math.max(1, crosshair.width);
2485
- applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2486
- if (crosshair.showVertical) {
2487
- ctx.beginPath();
2488
- ctx.moveTo(crisp(cx), crisp(chartTop));
2489
- ctx.lineTo(crisp(cx), crisp(chartBottom));
2490
- ctx.stroke();
2491
- }
2492
- if (crosshair.showHorizontal) {
2484
+ if (crosshair.mode === "dot") {
2485
+ ctx.save();
2486
+ ctx.fillStyle = crosshair.color;
2493
2487
  ctx.beginPath();
2494
- ctx.moveTo(crisp(chartLeft), crisp(cy));
2495
- ctx.lineTo(crisp(chartRight), crisp(cy));
2496
- ctx.stroke();
2488
+ ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
2489
+ ctx.fill();
2490
+ ctx.restore();
2491
+ } else {
2492
+ ctx.save();
2493
+ ctx.strokeStyle = crosshair.color;
2494
+ ctx.lineWidth = Math.max(1, crosshair.width);
2495
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2496
+ if (crosshair.showVertical) {
2497
+ ctx.beginPath();
2498
+ ctx.moveTo(crisp(cx), crisp(chartTop));
2499
+ ctx.lineTo(crisp(cx), crisp(chartBottom));
2500
+ ctx.stroke();
2501
+ }
2502
+ if (crosshair.showHorizontal) {
2503
+ ctx.beginPath();
2504
+ ctx.moveTo(crisp(chartLeft), crisp(cy));
2505
+ ctx.lineTo(crisp(chartRight), crisp(cy));
2506
+ ctx.stroke();
2507
+ }
2508
+ ctx.restore();
2497
2509
  }
2498
- ctx.restore();
2499
2510
  }
2500
2511
  ctx.restore();
2501
2512
  if (activeSeparateIndicators.length > 0) {
package/dist/hyperprop-charting-library.d.ts CHANGED
@@ -188,6 +188,8 @@ interface CrosshairOptions {
188
188
  color?: string;
189
189
  width?: number;
190
190
  style?: "solid" | "dotted" | "dashed";
191
+ mode?: "cross" | "dot";
192
+ dotRadius?: number;
191
193
  showHorizontal?: boolean;
192
194
  showVertical?: boolean;
193
195
  showPriceLabel?: boolean;
package/dist/hyperprop-charting-library.js CHANGED
@@ -19,6 +19,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
19
19
  color: "#94a3b8",
20
20
  width: 1,
21
21
  style: "dotted",
22
+ mode: "cross",
23
+ dotRadius: 3,
22
24
  showHorizontal: true,
23
25
  showVertical: true,
24
26
  showPriceLabel: true,
@@ -2455,23 +2457,32 @@ function createChart(element, options = {}) {
2455
2457
  if (crosshair.visible && crosshairPoint) {
2456
2458
  const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
2457
2459
  const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
2458
- ctx.save();
2459
- ctx.strokeStyle = crosshair.color;
2460
- ctx.lineWidth = Math.max(1, crosshair.width);
2461
- applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2462
- if (crosshair.showVertical) {
2463
- ctx.beginPath();
2464
- ctx.moveTo(crisp(cx), crisp(chartTop));
2465
- ctx.lineTo(crisp(cx), crisp(chartBottom));
2466
- ctx.stroke();
2467
- }
2468
- if (crosshair.showHorizontal) {
2460
+ if (crosshair.mode === "dot") {
2461
+ ctx.save();
2462
+ ctx.fillStyle = crosshair.color;
2469
2463
  ctx.beginPath();
2470
- ctx.moveTo(crisp(chartLeft), crisp(cy));
2471
- ctx.lineTo(crisp(chartRight), crisp(cy));
2472
- ctx.stroke();
2464
+ ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
2465
+ ctx.fill();
2466
+ ctx.restore();
2467
+ } else {
2468
+ ctx.save();
2469
+ ctx.strokeStyle = crosshair.color;
2470
+ ctx.lineWidth = Math.max(1, crosshair.width);
2471
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2472
+ if (crosshair.showVertical) {
2473
+ ctx.beginPath();
2474
+ ctx.moveTo(crisp(cx), crisp(chartTop));
2475
+ ctx.lineTo(crisp(cx), crisp(chartBottom));
2476
+ ctx.stroke();
2477
+ }
2478
+ if (crosshair.showHorizontal) {
2479
+ ctx.beginPath();
2480
+ ctx.moveTo(crisp(chartLeft), crisp(cy));
2481
+ ctx.lineTo(crisp(chartRight), crisp(cy));
2482
+ ctx.stroke();
2483
+ }
2484
+ ctx.restore();
2473
2485
  }
2474
- ctx.restore();
2475
2486
  }
2476
2487
  ctx.restore();
2477
2488
  if (activeSeparateIndicators.length > 0) {
package/dist/index.cjs CHANGED
@@ -43,6 +43,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
43
43
  color: "#94a3b8",
44
44
  width: 1,
45
45
  style: "dotted",
46
+ mode: "cross",
47
+ dotRadius: 3,
46
48
  showHorizontal: true,
47
49
  showVertical: true,
48
50
  showPriceLabel: true,
@@ -2479,23 +2481,32 @@ function createChart(element, options = {}) {
2479
2481
  if (crosshair.visible && crosshairPoint) {
2480
2482
  const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
2481
2483
  const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
2482
- ctx.save();
2483
- ctx.strokeStyle = crosshair.color;
2484
- ctx.lineWidth = Math.max(1, crosshair.width);
2485
- applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2486
- if (crosshair.showVertical) {
2487
- ctx.beginPath();
2488
- ctx.moveTo(crisp(cx), crisp(chartTop));
2489
- ctx.lineTo(crisp(cx), crisp(chartBottom));
2490
- ctx.stroke();
2491
- }
2492
- if (crosshair.showHorizontal) {
2484
+ if (crosshair.mode === "dot") {
2485
+ ctx.save();
2486
+ ctx.fillStyle = crosshair.color;
2493
2487
  ctx.beginPath();
2494
- ctx.moveTo(crisp(chartLeft), crisp(cy));
2495
- ctx.lineTo(crisp(chartRight), crisp(cy));
2496
- ctx.stroke();
2488
+ ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
2489
+ ctx.fill();
2490
+ ctx.restore();
2491
+ } else {
2492
+ ctx.save();
2493
+ ctx.strokeStyle = crosshair.color;
2494
+ ctx.lineWidth = Math.max(1, crosshair.width);
2495
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2496
+ if (crosshair.showVertical) {
2497
+ ctx.beginPath();
2498
+ ctx.moveTo(crisp(cx), crisp(chartTop));
2499
+ ctx.lineTo(crisp(cx), crisp(chartBottom));
2500
+ ctx.stroke();
2501
+ }
2502
+ if (crosshair.showHorizontal) {
2503
+ ctx.beginPath();
2504
+ ctx.moveTo(crisp(chartLeft), crisp(cy));
2505
+ ctx.lineTo(crisp(chartRight), crisp(cy));
2506
+ ctx.stroke();
2507
+ }
2508
+ ctx.restore();
2497
2509
  }
2498
- ctx.restore();
2499
2510
  }
2500
2511
  ctx.restore();
2501
2512
  if (activeSeparateIndicators.length > 0) {
package/dist/index.d.cts CHANGED
@@ -188,6 +188,8 @@ interface CrosshairOptions {
188
188
  color?: string;
189
189
  width?: number;
190
190
  style?: "solid" | "dotted" | "dashed";
191
+ mode?: "cross" | "dot";
192
+ dotRadius?: number;
191
193
  showHorizontal?: boolean;
192
194
  showVertical?: boolean;
193
195
  showPriceLabel?: boolean;
package/dist/index.d.ts CHANGED
@@ -188,6 +188,8 @@ interface CrosshairOptions {
188
188
  color?: string;
189
189
  width?: number;
190
190
  style?: "solid" | "dotted" | "dashed";
191
+ mode?: "cross" | "dot";
192
+ dotRadius?: number;
191
193
  showHorizontal?: boolean;
192
194
  showVertical?: boolean;
193
195
  showPriceLabel?: boolean;
package/dist/index.js CHANGED
@@ -19,6 +19,8 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
19
19
  color: "#94a3b8",
20
20
  width: 1,
21
21
  style: "dotted",
22
+ mode: "cross",
23
+ dotRadius: 3,
22
24
  showHorizontal: true,
23
25
  showVertical: true,
24
26
  showPriceLabel: true,
@@ -2455,23 +2457,32 @@ function createChart(element, options = {}) {
2455
2457
  if (crosshair.visible && crosshairPoint) {
2456
2458
  const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
2457
2459
  const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
2458
- ctx.save();
2459
- ctx.strokeStyle = crosshair.color;
2460
- ctx.lineWidth = Math.max(1, crosshair.width);
2461
- applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2462
- if (crosshair.showVertical) {
2463
- ctx.beginPath();
2464
- ctx.moveTo(crisp(cx), crisp(chartTop));
2465
- ctx.lineTo(crisp(cx), crisp(chartBottom));
2466
- ctx.stroke();
2467
- }
2468
- if (crosshair.showHorizontal) {
2460
+ if (crosshair.mode === "dot") {
2461
+ ctx.save();
2462
+ ctx.fillStyle = crosshair.color;
2469
2463
  ctx.beginPath();
2470
- ctx.moveTo(crisp(chartLeft), crisp(cy));
2471
- ctx.lineTo(crisp(chartRight), crisp(cy));
2472
- ctx.stroke();
2464
+ ctx.arc(cx, cy, Math.max(1, crosshair.dotRadius), 0, Math.PI * 2);
2465
+ ctx.fill();
2466
+ ctx.restore();
2467
+ } else {
2468
+ ctx.save();
2469
+ ctx.strokeStyle = crosshair.color;
2470
+ ctx.lineWidth = Math.max(1, crosshair.width);
2471
+ applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
2472
+ if (crosshair.showVertical) {
2473
+ ctx.beginPath();
2474
+ ctx.moveTo(crisp(cx), crisp(chartTop));
2475
+ ctx.lineTo(crisp(cx), crisp(chartBottom));
2476
+ ctx.stroke();
2477
+ }
2478
+ if (crosshair.showHorizontal) {
2479
+ ctx.beginPath();
2480
+ ctx.moveTo(crisp(chartLeft), crisp(cy));
2481
+ ctx.lineTo(crisp(chartRight), crisp(cy));
2482
+ ctx.stroke();
2483
+ }
2484
+ ctx.restore();
2473
2485
  }
2474
- ctx.restore();
2475
2486
  }
2476
2487
  ctx.restore();
2477
2488
  if (activeSeparateIndicators.length > 0) {
package/docs/API.md CHANGED
@@ -94,6 +94,8 @@ Top-level options:
94
94
  - `color` (default `#94a3b8`)
95
95
  - `width` (default `1`)
96
96
  - `style` (`"solid" | "dotted" | "dashed"`, default `"dotted"`)
97
+ - `mode` (`"cross" | "dot"`, default `"cross"`; `"dot"` draws a dot at the cursor instead of crosshair lines)
98
+ - `dotRadius` (default `3`; dot radius in px when `mode` is `"dot"`)
97
99
  - `showHorizontal` (default `true`)
98
100
  - `showVertical` (default `true`)
99
101
  - `showPriceLabel` (default `true`)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hyperprop-charting-library",
3
- "version": "0.1.68",
3
+ "version": "0.1.69",
4
4
  "description": "Lightweight TypeScript charting core",
5
5
  "type": "module",
6
6
  "main": "./dist/hyperprop-charting-library.cjs",