hyperprop-charting-library 0.1.38 → 0.1.39
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.
- package/dist/hyperprop-charting-library.cjs +67 -41
- package/dist/hyperprop-charting-library.d.ts +1 -0
- package/dist/hyperprop-charting-library.js +67 -41
- package/dist/index.cjs +67 -41
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +67 -41
- package/package.json +2 -2
|
@@ -177,6 +177,47 @@ var DEFAULT_OPTIONS = {
|
|
|
177
177
|
dashPatterns: DEFAULT_DASH_PATTERNS,
|
|
178
178
|
indicators: []
|
|
179
179
|
};
|
|
180
|
+
var mergeChartOptions = (baseOptions, options = {}) => ({
|
|
181
|
+
...baseOptions,
|
|
182
|
+
...options,
|
|
183
|
+
axis: {
|
|
184
|
+
...baseOptions.axis,
|
|
185
|
+
...options.axis ?? {},
|
|
186
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
187
|
+
},
|
|
188
|
+
xAxis: {
|
|
189
|
+
...baseOptions.xAxis,
|
|
190
|
+
...options.axis ?? {},
|
|
191
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
192
|
+
...options.xAxis ?? {}
|
|
193
|
+
},
|
|
194
|
+
yAxis: {
|
|
195
|
+
...baseOptions.yAxis,
|
|
196
|
+
...options.axis ?? {},
|
|
197
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
198
|
+
...options.yAxis ?? {}
|
|
199
|
+
},
|
|
200
|
+
crosshair: {
|
|
201
|
+
...baseOptions.crosshair,
|
|
202
|
+
...options.crosshair ?? {}
|
|
203
|
+
},
|
|
204
|
+
grid: {
|
|
205
|
+
...baseOptions.grid,
|
|
206
|
+
...options.grid ?? {}
|
|
207
|
+
},
|
|
208
|
+
watermark: {
|
|
209
|
+
...baseOptions.watermark,
|
|
210
|
+
...options.watermark ?? {}
|
|
211
|
+
},
|
|
212
|
+
tickerLine: {
|
|
213
|
+
...baseOptions.tickerLine,
|
|
214
|
+
...options.tickerLine ?? {}
|
|
215
|
+
},
|
|
216
|
+
dashPatterns: {
|
|
217
|
+
...baseOptions.dashPatterns,
|
|
218
|
+
...options.dashPatterns ?? {}
|
|
219
|
+
}
|
|
220
|
+
});
|
|
180
221
|
var getIndicatorSourceValue = (point, source) => {
|
|
181
222
|
if (source === "open") return point.o;
|
|
182
223
|
if (source === "high") return point.h;
|
|
@@ -728,47 +769,7 @@ var BUILTIN_INDICATORS = [
|
|
|
728
769
|
BUILTIN_ATR_INDICATOR
|
|
729
770
|
];
|
|
730
771
|
function createChart(element, options = {}) {
|
|
731
|
-
|
|
732
|
-
...DEFAULT_OPTIONS,
|
|
733
|
-
...options,
|
|
734
|
-
axis: {
|
|
735
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
736
|
-
...options.axis ?? {},
|
|
737
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
738
|
-
},
|
|
739
|
-
xAxis: {
|
|
740
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
741
|
-
...options.axis ?? {},
|
|
742
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
743
|
-
...options.xAxis ?? {}
|
|
744
|
-
},
|
|
745
|
-
yAxis: {
|
|
746
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
747
|
-
...options.axis ?? {},
|
|
748
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
749
|
-
...options.yAxis ?? {}
|
|
750
|
-
},
|
|
751
|
-
crosshair: {
|
|
752
|
-
...DEFAULT_CROSSHAIR_OPTIONS,
|
|
753
|
-
...options.crosshair ?? {}
|
|
754
|
-
},
|
|
755
|
-
grid: {
|
|
756
|
-
...DEFAULT_GRID_OPTIONS,
|
|
757
|
-
...options.grid
|
|
758
|
-
},
|
|
759
|
-
watermark: {
|
|
760
|
-
...DEFAULT_WATERMARK_OPTIONS,
|
|
761
|
-
...options.watermark
|
|
762
|
-
},
|
|
763
|
-
tickerLine: {
|
|
764
|
-
...DEFAULT_OPTIONS.tickerLine,
|
|
765
|
-
...options.tickerLine
|
|
766
|
-
},
|
|
767
|
-
dashPatterns: {
|
|
768
|
-
...DEFAULT_DASH_PATTERNS,
|
|
769
|
-
...options.dashPatterns ?? {}
|
|
770
|
-
}
|
|
771
|
-
};
|
|
772
|
+
let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
|
|
772
773
|
let width = mergedOptions.width;
|
|
773
774
|
let height = mergedOptions.height;
|
|
774
775
|
let data = [];
|
|
@@ -2803,6 +2804,29 @@ function createChart(element, options = {}) {
|
|
|
2803
2804
|
canvas.addEventListener("pointerleave", endPointerDrag);
|
|
2804
2805
|
canvas.addEventListener("wheel", onWheel, { passive: false });
|
|
2805
2806
|
canvas.addEventListener("dblclick", onDoubleClick);
|
|
2807
|
+
const updateOptions = (nextOptions) => {
|
|
2808
|
+
const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2809
|
+
const previousWidth = width;
|
|
2810
|
+
const previousHeight = height;
|
|
2811
|
+
mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
|
|
2812
|
+
width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
|
|
2813
|
+
height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
|
|
2814
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2815
|
+
doubleClickEnabled = mergedOptions.doubleClickEnabled;
|
|
2816
|
+
doubleClickAction = mergedOptions.doubleClickAction;
|
|
2817
|
+
const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2818
|
+
if (!isTickerSmoothingEnabled) {
|
|
2819
|
+
smoothedTickerPrice = null;
|
|
2820
|
+
tickerPriceTarget = null;
|
|
2821
|
+
if (smoothingRafId !== null) {
|
|
2822
|
+
cancelAnimationFrame(smoothingRafId);
|
|
2823
|
+
smoothingRafId = null;
|
|
2824
|
+
}
|
|
2825
|
+
} else if (!wasTickerSmoothingEnabled && data.length > 0) {
|
|
2826
|
+
pushSmoothedPrice(data[data.length - 1].c);
|
|
2827
|
+
}
|
|
2828
|
+
draw();
|
|
2829
|
+
};
|
|
2806
2830
|
const resize = (nextWidth, nextHeight) => {
|
|
2807
2831
|
if (nextWidth && nextWidth > 0) {
|
|
2808
2832
|
width = nextWidth;
|
|
@@ -2810,6 +2834,7 @@ function createChart(element, options = {}) {
|
|
|
2810
2834
|
if (nextHeight && nextHeight > 0) {
|
|
2811
2835
|
height = nextHeight;
|
|
2812
2836
|
}
|
|
2837
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2813
2838
|
draw();
|
|
2814
2839
|
};
|
|
2815
2840
|
const setData = (nextData) => {
|
|
@@ -3013,6 +3038,7 @@ function createChart(element, options = {}) {
|
|
|
3013
3038
|
};
|
|
3014
3039
|
draw();
|
|
3015
3040
|
return {
|
|
3041
|
+
updateOptions,
|
|
3016
3042
|
setData,
|
|
3017
3043
|
setPriceLines,
|
|
3018
3044
|
addPriceLine,
|
|
@@ -263,6 +263,7 @@ interface TickerLineOptions {
|
|
|
263
263
|
smoothingSpeed?: number;
|
|
264
264
|
}
|
|
265
265
|
interface ChartInstance {
|
|
266
|
+
updateOptions: (options: ChartOptions) => void;
|
|
266
267
|
setData: (data: OhlcDataPoint[]) => void;
|
|
267
268
|
setPriceLines: (lines: PriceLineOptions[]) => void;
|
|
268
269
|
addPriceLine: (line: PriceLineOptions) => string;
|
|
@@ -153,6 +153,47 @@ var DEFAULT_OPTIONS = {
|
|
|
153
153
|
dashPatterns: DEFAULT_DASH_PATTERNS,
|
|
154
154
|
indicators: []
|
|
155
155
|
};
|
|
156
|
+
var mergeChartOptions = (baseOptions, options = {}) => ({
|
|
157
|
+
...baseOptions,
|
|
158
|
+
...options,
|
|
159
|
+
axis: {
|
|
160
|
+
...baseOptions.axis,
|
|
161
|
+
...options.axis ?? {},
|
|
162
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
163
|
+
},
|
|
164
|
+
xAxis: {
|
|
165
|
+
...baseOptions.xAxis,
|
|
166
|
+
...options.axis ?? {},
|
|
167
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
168
|
+
...options.xAxis ?? {}
|
|
169
|
+
},
|
|
170
|
+
yAxis: {
|
|
171
|
+
...baseOptions.yAxis,
|
|
172
|
+
...options.axis ?? {},
|
|
173
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
174
|
+
...options.yAxis ?? {}
|
|
175
|
+
},
|
|
176
|
+
crosshair: {
|
|
177
|
+
...baseOptions.crosshair,
|
|
178
|
+
...options.crosshair ?? {}
|
|
179
|
+
},
|
|
180
|
+
grid: {
|
|
181
|
+
...baseOptions.grid,
|
|
182
|
+
...options.grid ?? {}
|
|
183
|
+
},
|
|
184
|
+
watermark: {
|
|
185
|
+
...baseOptions.watermark,
|
|
186
|
+
...options.watermark ?? {}
|
|
187
|
+
},
|
|
188
|
+
tickerLine: {
|
|
189
|
+
...baseOptions.tickerLine,
|
|
190
|
+
...options.tickerLine ?? {}
|
|
191
|
+
},
|
|
192
|
+
dashPatterns: {
|
|
193
|
+
...baseOptions.dashPatterns,
|
|
194
|
+
...options.dashPatterns ?? {}
|
|
195
|
+
}
|
|
196
|
+
});
|
|
156
197
|
var getIndicatorSourceValue = (point, source) => {
|
|
157
198
|
if (source === "open") return point.o;
|
|
158
199
|
if (source === "high") return point.h;
|
|
@@ -704,47 +745,7 @@ var BUILTIN_INDICATORS = [
|
|
|
704
745
|
BUILTIN_ATR_INDICATOR
|
|
705
746
|
];
|
|
706
747
|
function createChart(element, options = {}) {
|
|
707
|
-
|
|
708
|
-
...DEFAULT_OPTIONS,
|
|
709
|
-
...options,
|
|
710
|
-
axis: {
|
|
711
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
712
|
-
...options.axis ?? {},
|
|
713
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
714
|
-
},
|
|
715
|
-
xAxis: {
|
|
716
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
717
|
-
...options.axis ?? {},
|
|
718
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
719
|
-
...options.xAxis ?? {}
|
|
720
|
-
},
|
|
721
|
-
yAxis: {
|
|
722
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
723
|
-
...options.axis ?? {},
|
|
724
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
725
|
-
...options.yAxis ?? {}
|
|
726
|
-
},
|
|
727
|
-
crosshair: {
|
|
728
|
-
...DEFAULT_CROSSHAIR_OPTIONS,
|
|
729
|
-
...options.crosshair ?? {}
|
|
730
|
-
},
|
|
731
|
-
grid: {
|
|
732
|
-
...DEFAULT_GRID_OPTIONS,
|
|
733
|
-
...options.grid
|
|
734
|
-
},
|
|
735
|
-
watermark: {
|
|
736
|
-
...DEFAULT_WATERMARK_OPTIONS,
|
|
737
|
-
...options.watermark
|
|
738
|
-
},
|
|
739
|
-
tickerLine: {
|
|
740
|
-
...DEFAULT_OPTIONS.tickerLine,
|
|
741
|
-
...options.tickerLine
|
|
742
|
-
},
|
|
743
|
-
dashPatterns: {
|
|
744
|
-
...DEFAULT_DASH_PATTERNS,
|
|
745
|
-
...options.dashPatterns ?? {}
|
|
746
|
-
}
|
|
747
|
-
};
|
|
748
|
+
let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
|
|
748
749
|
let width = mergedOptions.width;
|
|
749
750
|
let height = mergedOptions.height;
|
|
750
751
|
let data = [];
|
|
@@ -2779,6 +2780,29 @@ function createChart(element, options = {}) {
|
|
|
2779
2780
|
canvas.addEventListener("pointerleave", endPointerDrag);
|
|
2780
2781
|
canvas.addEventListener("wheel", onWheel, { passive: false });
|
|
2781
2782
|
canvas.addEventListener("dblclick", onDoubleClick);
|
|
2783
|
+
const updateOptions = (nextOptions) => {
|
|
2784
|
+
const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2785
|
+
const previousWidth = width;
|
|
2786
|
+
const previousHeight = height;
|
|
2787
|
+
mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
|
|
2788
|
+
width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
|
|
2789
|
+
height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
|
|
2790
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2791
|
+
doubleClickEnabled = mergedOptions.doubleClickEnabled;
|
|
2792
|
+
doubleClickAction = mergedOptions.doubleClickAction;
|
|
2793
|
+
const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2794
|
+
if (!isTickerSmoothingEnabled) {
|
|
2795
|
+
smoothedTickerPrice = null;
|
|
2796
|
+
tickerPriceTarget = null;
|
|
2797
|
+
if (smoothingRafId !== null) {
|
|
2798
|
+
cancelAnimationFrame(smoothingRafId);
|
|
2799
|
+
smoothingRafId = null;
|
|
2800
|
+
}
|
|
2801
|
+
} else if (!wasTickerSmoothingEnabled && data.length > 0) {
|
|
2802
|
+
pushSmoothedPrice(data[data.length - 1].c);
|
|
2803
|
+
}
|
|
2804
|
+
draw();
|
|
2805
|
+
};
|
|
2782
2806
|
const resize = (nextWidth, nextHeight) => {
|
|
2783
2807
|
if (nextWidth && nextWidth > 0) {
|
|
2784
2808
|
width = nextWidth;
|
|
@@ -2786,6 +2810,7 @@ function createChart(element, options = {}) {
|
|
|
2786
2810
|
if (nextHeight && nextHeight > 0) {
|
|
2787
2811
|
height = nextHeight;
|
|
2788
2812
|
}
|
|
2813
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2789
2814
|
draw();
|
|
2790
2815
|
};
|
|
2791
2816
|
const setData = (nextData) => {
|
|
@@ -2989,6 +3014,7 @@ function createChart(element, options = {}) {
|
|
|
2989
3014
|
};
|
|
2990
3015
|
draw();
|
|
2991
3016
|
return {
|
|
3017
|
+
updateOptions,
|
|
2992
3018
|
setData,
|
|
2993
3019
|
setPriceLines,
|
|
2994
3020
|
addPriceLine,
|
package/dist/index.cjs
CHANGED
|
@@ -177,6 +177,47 @@ var DEFAULT_OPTIONS = {
|
|
|
177
177
|
dashPatterns: DEFAULT_DASH_PATTERNS,
|
|
178
178
|
indicators: []
|
|
179
179
|
};
|
|
180
|
+
var mergeChartOptions = (baseOptions, options = {}) => ({
|
|
181
|
+
...baseOptions,
|
|
182
|
+
...options,
|
|
183
|
+
axis: {
|
|
184
|
+
...baseOptions.axis,
|
|
185
|
+
...options.axis ?? {},
|
|
186
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
187
|
+
},
|
|
188
|
+
xAxis: {
|
|
189
|
+
...baseOptions.xAxis,
|
|
190
|
+
...options.axis ?? {},
|
|
191
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
192
|
+
...options.xAxis ?? {}
|
|
193
|
+
},
|
|
194
|
+
yAxis: {
|
|
195
|
+
...baseOptions.yAxis,
|
|
196
|
+
...options.axis ?? {},
|
|
197
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
198
|
+
...options.yAxis ?? {}
|
|
199
|
+
},
|
|
200
|
+
crosshair: {
|
|
201
|
+
...baseOptions.crosshair,
|
|
202
|
+
...options.crosshair ?? {}
|
|
203
|
+
},
|
|
204
|
+
grid: {
|
|
205
|
+
...baseOptions.grid,
|
|
206
|
+
...options.grid ?? {}
|
|
207
|
+
},
|
|
208
|
+
watermark: {
|
|
209
|
+
...baseOptions.watermark,
|
|
210
|
+
...options.watermark ?? {}
|
|
211
|
+
},
|
|
212
|
+
tickerLine: {
|
|
213
|
+
...baseOptions.tickerLine,
|
|
214
|
+
...options.tickerLine ?? {}
|
|
215
|
+
},
|
|
216
|
+
dashPatterns: {
|
|
217
|
+
...baseOptions.dashPatterns,
|
|
218
|
+
...options.dashPatterns ?? {}
|
|
219
|
+
}
|
|
220
|
+
});
|
|
180
221
|
var getIndicatorSourceValue = (point, source) => {
|
|
181
222
|
if (source === "open") return point.o;
|
|
182
223
|
if (source === "high") return point.h;
|
|
@@ -728,47 +769,7 @@ var BUILTIN_INDICATORS = [
|
|
|
728
769
|
BUILTIN_ATR_INDICATOR
|
|
729
770
|
];
|
|
730
771
|
function createChart(element, options = {}) {
|
|
731
|
-
|
|
732
|
-
...DEFAULT_OPTIONS,
|
|
733
|
-
...options,
|
|
734
|
-
axis: {
|
|
735
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
736
|
-
...options.axis ?? {},
|
|
737
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
738
|
-
},
|
|
739
|
-
xAxis: {
|
|
740
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
741
|
-
...options.axis ?? {},
|
|
742
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
743
|
-
...options.xAxis ?? {}
|
|
744
|
-
},
|
|
745
|
-
yAxis: {
|
|
746
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
747
|
-
...options.axis ?? {},
|
|
748
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
749
|
-
...options.yAxis ?? {}
|
|
750
|
-
},
|
|
751
|
-
crosshair: {
|
|
752
|
-
...DEFAULT_CROSSHAIR_OPTIONS,
|
|
753
|
-
...options.crosshair ?? {}
|
|
754
|
-
},
|
|
755
|
-
grid: {
|
|
756
|
-
...DEFAULT_GRID_OPTIONS,
|
|
757
|
-
...options.grid
|
|
758
|
-
},
|
|
759
|
-
watermark: {
|
|
760
|
-
...DEFAULT_WATERMARK_OPTIONS,
|
|
761
|
-
...options.watermark
|
|
762
|
-
},
|
|
763
|
-
tickerLine: {
|
|
764
|
-
...DEFAULT_OPTIONS.tickerLine,
|
|
765
|
-
...options.tickerLine
|
|
766
|
-
},
|
|
767
|
-
dashPatterns: {
|
|
768
|
-
...DEFAULT_DASH_PATTERNS,
|
|
769
|
-
...options.dashPatterns ?? {}
|
|
770
|
-
}
|
|
771
|
-
};
|
|
772
|
+
let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
|
|
772
773
|
let width = mergedOptions.width;
|
|
773
774
|
let height = mergedOptions.height;
|
|
774
775
|
let data = [];
|
|
@@ -2803,6 +2804,29 @@ function createChart(element, options = {}) {
|
|
|
2803
2804
|
canvas.addEventListener("pointerleave", endPointerDrag);
|
|
2804
2805
|
canvas.addEventListener("wheel", onWheel, { passive: false });
|
|
2805
2806
|
canvas.addEventListener("dblclick", onDoubleClick);
|
|
2807
|
+
const updateOptions = (nextOptions) => {
|
|
2808
|
+
const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2809
|
+
const previousWidth = width;
|
|
2810
|
+
const previousHeight = height;
|
|
2811
|
+
mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
|
|
2812
|
+
width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
|
|
2813
|
+
height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
|
|
2814
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2815
|
+
doubleClickEnabled = mergedOptions.doubleClickEnabled;
|
|
2816
|
+
doubleClickAction = mergedOptions.doubleClickAction;
|
|
2817
|
+
const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2818
|
+
if (!isTickerSmoothingEnabled) {
|
|
2819
|
+
smoothedTickerPrice = null;
|
|
2820
|
+
tickerPriceTarget = null;
|
|
2821
|
+
if (smoothingRafId !== null) {
|
|
2822
|
+
cancelAnimationFrame(smoothingRafId);
|
|
2823
|
+
smoothingRafId = null;
|
|
2824
|
+
}
|
|
2825
|
+
} else if (!wasTickerSmoothingEnabled && data.length > 0) {
|
|
2826
|
+
pushSmoothedPrice(data[data.length - 1].c);
|
|
2827
|
+
}
|
|
2828
|
+
draw();
|
|
2829
|
+
};
|
|
2806
2830
|
const resize = (nextWidth, nextHeight) => {
|
|
2807
2831
|
if (nextWidth && nextWidth > 0) {
|
|
2808
2832
|
width = nextWidth;
|
|
@@ -2810,6 +2834,7 @@ function createChart(element, options = {}) {
|
|
|
2810
2834
|
if (nextHeight && nextHeight > 0) {
|
|
2811
2835
|
height = nextHeight;
|
|
2812
2836
|
}
|
|
2837
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2813
2838
|
draw();
|
|
2814
2839
|
};
|
|
2815
2840
|
const setData = (nextData) => {
|
|
@@ -3013,6 +3038,7 @@ function createChart(element, options = {}) {
|
|
|
3013
3038
|
};
|
|
3014
3039
|
draw();
|
|
3015
3040
|
return {
|
|
3041
|
+
updateOptions,
|
|
3016
3042
|
setData,
|
|
3017
3043
|
setPriceLines,
|
|
3018
3044
|
addPriceLine,
|
package/dist/index.d.cts
CHANGED
|
@@ -263,6 +263,7 @@ interface TickerLineOptions {
|
|
|
263
263
|
smoothingSpeed?: number;
|
|
264
264
|
}
|
|
265
265
|
interface ChartInstance {
|
|
266
|
+
updateOptions: (options: ChartOptions) => void;
|
|
266
267
|
setData: (data: OhlcDataPoint[]) => void;
|
|
267
268
|
setPriceLines: (lines: PriceLineOptions[]) => void;
|
|
268
269
|
addPriceLine: (line: PriceLineOptions) => string;
|
package/dist/index.d.ts
CHANGED
|
@@ -263,6 +263,7 @@ interface TickerLineOptions {
|
|
|
263
263
|
smoothingSpeed?: number;
|
|
264
264
|
}
|
|
265
265
|
interface ChartInstance {
|
|
266
|
+
updateOptions: (options: ChartOptions) => void;
|
|
266
267
|
setData: (data: OhlcDataPoint[]) => void;
|
|
267
268
|
setPriceLines: (lines: PriceLineOptions[]) => void;
|
|
268
269
|
addPriceLine: (line: PriceLineOptions) => string;
|
package/dist/index.js
CHANGED
|
@@ -153,6 +153,47 @@ var DEFAULT_OPTIONS = {
|
|
|
153
153
|
dashPatterns: DEFAULT_DASH_PATTERNS,
|
|
154
154
|
indicators: []
|
|
155
155
|
};
|
|
156
|
+
var mergeChartOptions = (baseOptions, options = {}) => ({
|
|
157
|
+
...baseOptions,
|
|
158
|
+
...options,
|
|
159
|
+
axis: {
|
|
160
|
+
...baseOptions.axis,
|
|
161
|
+
...options.axis ?? {},
|
|
162
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
163
|
+
},
|
|
164
|
+
xAxis: {
|
|
165
|
+
...baseOptions.xAxis,
|
|
166
|
+
...options.axis ?? {},
|
|
167
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
168
|
+
...options.xAxis ?? {}
|
|
169
|
+
},
|
|
170
|
+
yAxis: {
|
|
171
|
+
...baseOptions.yAxis,
|
|
172
|
+
...options.axis ?? {},
|
|
173
|
+
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
174
|
+
...options.yAxis ?? {}
|
|
175
|
+
},
|
|
176
|
+
crosshair: {
|
|
177
|
+
...baseOptions.crosshair,
|
|
178
|
+
...options.crosshair ?? {}
|
|
179
|
+
},
|
|
180
|
+
grid: {
|
|
181
|
+
...baseOptions.grid,
|
|
182
|
+
...options.grid ?? {}
|
|
183
|
+
},
|
|
184
|
+
watermark: {
|
|
185
|
+
...baseOptions.watermark,
|
|
186
|
+
...options.watermark ?? {}
|
|
187
|
+
},
|
|
188
|
+
tickerLine: {
|
|
189
|
+
...baseOptions.tickerLine,
|
|
190
|
+
...options.tickerLine ?? {}
|
|
191
|
+
},
|
|
192
|
+
dashPatterns: {
|
|
193
|
+
...baseOptions.dashPatterns,
|
|
194
|
+
...options.dashPatterns ?? {}
|
|
195
|
+
}
|
|
196
|
+
});
|
|
156
197
|
var getIndicatorSourceValue = (point, source) => {
|
|
157
198
|
if (source === "open") return point.o;
|
|
158
199
|
if (source === "high") return point.h;
|
|
@@ -704,47 +745,7 @@ var BUILTIN_INDICATORS = [
|
|
|
704
745
|
BUILTIN_ATR_INDICATOR
|
|
705
746
|
];
|
|
706
747
|
function createChart(element, options = {}) {
|
|
707
|
-
|
|
708
|
-
...DEFAULT_OPTIONS,
|
|
709
|
-
...options,
|
|
710
|
-
axis: {
|
|
711
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
712
|
-
...options.axis ?? {},
|
|
713
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
|
|
714
|
-
},
|
|
715
|
-
xAxis: {
|
|
716
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
717
|
-
...options.axis ?? {},
|
|
718
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
719
|
-
...options.xAxis ?? {}
|
|
720
|
-
},
|
|
721
|
-
yAxis: {
|
|
722
|
-
...DEFAULT_AXIS_OPTIONS,
|
|
723
|
-
...options.axis ?? {},
|
|
724
|
-
...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
|
|
725
|
-
...options.yAxis ?? {}
|
|
726
|
-
},
|
|
727
|
-
crosshair: {
|
|
728
|
-
...DEFAULT_CROSSHAIR_OPTIONS,
|
|
729
|
-
...options.crosshair ?? {}
|
|
730
|
-
},
|
|
731
|
-
grid: {
|
|
732
|
-
...DEFAULT_GRID_OPTIONS,
|
|
733
|
-
...options.grid
|
|
734
|
-
},
|
|
735
|
-
watermark: {
|
|
736
|
-
...DEFAULT_WATERMARK_OPTIONS,
|
|
737
|
-
...options.watermark
|
|
738
|
-
},
|
|
739
|
-
tickerLine: {
|
|
740
|
-
...DEFAULT_OPTIONS.tickerLine,
|
|
741
|
-
...options.tickerLine
|
|
742
|
-
},
|
|
743
|
-
dashPatterns: {
|
|
744
|
-
...DEFAULT_DASH_PATTERNS,
|
|
745
|
-
...options.dashPatterns ?? {}
|
|
746
|
-
}
|
|
747
|
-
};
|
|
748
|
+
let mergedOptions = mergeChartOptions(DEFAULT_OPTIONS, options);
|
|
748
749
|
let width = mergedOptions.width;
|
|
749
750
|
let height = mergedOptions.height;
|
|
750
751
|
let data = [];
|
|
@@ -2779,6 +2780,29 @@ function createChart(element, options = {}) {
|
|
|
2779
2780
|
canvas.addEventListener("pointerleave", endPointerDrag);
|
|
2780
2781
|
canvas.addEventListener("wheel", onWheel, { passive: false });
|
|
2781
2782
|
canvas.addEventListener("dblclick", onDoubleClick);
|
|
2783
|
+
const updateOptions = (nextOptions) => {
|
|
2784
|
+
const wasTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2785
|
+
const previousWidth = width;
|
|
2786
|
+
const previousHeight = height;
|
|
2787
|
+
mergedOptions = mergeChartOptions(mergedOptions, nextOptions);
|
|
2788
|
+
width = nextOptions.width !== void 0 && nextOptions.width > 0 ? mergedOptions.width : previousWidth;
|
|
2789
|
+
height = nextOptions.height !== void 0 && nextOptions.height > 0 ? mergedOptions.height : previousHeight;
|
|
2790
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2791
|
+
doubleClickEnabled = mergedOptions.doubleClickEnabled;
|
|
2792
|
+
doubleClickAction = mergedOptions.doubleClickAction;
|
|
2793
|
+
const isTickerSmoothingEnabled = mergedOptions.tickerLine?.smoothing ?? false;
|
|
2794
|
+
if (!isTickerSmoothingEnabled) {
|
|
2795
|
+
smoothedTickerPrice = null;
|
|
2796
|
+
tickerPriceTarget = null;
|
|
2797
|
+
if (smoothingRafId !== null) {
|
|
2798
|
+
cancelAnimationFrame(smoothingRafId);
|
|
2799
|
+
smoothingRafId = null;
|
|
2800
|
+
}
|
|
2801
|
+
} else if (!wasTickerSmoothingEnabled && data.length > 0) {
|
|
2802
|
+
pushSmoothedPrice(data[data.length - 1].c);
|
|
2803
|
+
}
|
|
2804
|
+
draw();
|
|
2805
|
+
};
|
|
2782
2806
|
const resize = (nextWidth, nextHeight) => {
|
|
2783
2807
|
if (nextWidth && nextWidth > 0) {
|
|
2784
2808
|
width = nextWidth;
|
|
@@ -2786,6 +2810,7 @@ function createChart(element, options = {}) {
|
|
|
2786
2810
|
if (nextHeight && nextHeight > 0) {
|
|
2787
2811
|
height = nextHeight;
|
|
2788
2812
|
}
|
|
2813
|
+
mergedOptions = { ...mergedOptions, width, height };
|
|
2789
2814
|
draw();
|
|
2790
2815
|
};
|
|
2791
2816
|
const setData = (nextData) => {
|
|
@@ -2989,6 +3014,7 @@ function createChart(element, options = {}) {
|
|
|
2989
3014
|
};
|
|
2990
3015
|
draw();
|
|
2991
3016
|
return {
|
|
3017
|
+
updateOptions,
|
|
2992
3018
|
setData,
|
|
2993
3019
|
setPriceLines,
|
|
2994
3020
|
addPriceLine,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hyperprop-charting-library",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.39",
|
|
4
4
|
"description": "Lightweight TypeScript charting core",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/hyperprop-charting-library.cjs",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
22
|
"build": "tsup src/index.ts --format esm,cjs --dts --clean && cp \"./dist/index.js\" \"./dist/hyperprop-charting-library.js\" && cp \"./dist/index.cjs\" \"./dist/hyperprop-charting-library.cjs\" && cp \"./dist/index.d.ts\" \"./dist/hyperprop-charting-library.d.ts\"",
|
|
23
|
-
"dev": "tsup src/index.ts --format esm,cjs --dts --watch",
|
|
23
|
+
"dev": "tsup src/index.ts --format esm,cjs --dts --watch --onSuccess \"cp ./dist/index.js ./dist/hyperprop-charting-library.js && cp ./dist/index.cjs ./dist/hyperprop-charting-library.cjs && cp ./dist/index.d.ts ./dist/hyperprop-charting-library.d.ts\"",
|
|
24
24
|
"typecheck": "tsc -p tsconfig.json --noEmit"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|