@devexperts/dxcharts-lite 2.0.1 → 2.0.2

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 (18) hide show
  1. package/README.md +28 -29
  2. package/dist/chart/bootstrap.d.ts +7 -2
  3. package/dist/chart/chart.d.ts +2 -0
  4. package/dist/chart/chart.js +3 -1
  5. package/dist/chart/components/chart/candle-transformer.functions.d.ts +1 -0
  6. package/dist/chart/components/chart/candle-transformer.functions.js +1 -0
  7. package/dist/chart/components/chart/chart-base.model.d.ts +1 -1
  8. package/dist/chart/components/chart/chart-base.model.js +2 -2
  9. package/dist/chart/components/chart/chart.component.d.ts +6 -0
  10. package/dist/chart/components/chart/chart.component.js +10 -1
  11. package/dist/chart/components/chart/chart.model.d.ts +7 -1
  12. package/dist/chart/components/chart/chart.model.js +26 -6
  13. package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts +7 -0
  14. package/dist/chart/inputlisteners/canvas-input-listener.component.js +12 -1
  15. package/dist/dxchart.min.js +4 -4
  16. package/package.json +12 -1
  17. package/dist/chart/chart-container.d.ts +0 -18
  18. package/dist/chart/chart-container.js +0 -6
package/README.md CHANGED
@@ -23,7 +23,7 @@
23
23
  <img src="https://img.shields.io/static/v1?label=PRs&message=Welcome&color=blue" alt="PRs: Welcome" />
24
24
  </a>&nbsp;
25
25
  <a href="https://devexperts.com/dxcharts-demo/?lang=en">
26
- <img src="https://img.shields.io/static/v1?label=Latest%20version&message=1.0.0&color=blue" alt="Version" />
26
+ <img src="https://img.shields.io/static/v1?label=Latest%20version&message=2.0.2&color=blue" alt="Version" />
27
27
  </a>
28
28
  </p>
29
29
 
@@ -97,16 +97,11 @@ Now you should have empty chart on screen.
97
97
 
98
98
  Let's pass in some data i.e. `Candles`. You can use bundled function to generate some mock data.
99
99
  Import `generateCandlesData` and call it to generate candles.
100
- Also, you would need `Instrument` object - it is required to show instrument description on chart and show correct price precisions on Y axis.
101
100
 
102
101
  ```js
103
102
  export const generateMockData = () => {
104
- const mockCandles = generateCandlesData();
105
- const mockInstrument = {
106
- symbol: 'AAPL',
107
- priceIncrements: [0.01],
108
- };
109
- chart.setData({ candles: mockCandles, instrument: mockInstrument });
103
+ const candles = generateCandlesData();
104
+ chart.setData({ candles });
110
105
  };
111
106
  ```
112
107
 
@@ -120,28 +115,32 @@ Now you should see chart just like image below:
120
115
 
121
116
  Here is full quick-start code example:
122
117
 
123
- ```markup
118
+ ```html
124
119
  <html>
125
- <head>
126
- <script src="https://www.unpkg.com/@devexperts/dxcharts-lite@1.0.1/dist/dxchart.min.js"></script>
127
- </head>
128
- <body>
129
- <div id="chart_container"></div>
130
- </body>
131
- <script type="module">
132
- import generateCandlesData from 'https://www.unpkg.com/@devexperts/dxcharts-lite@1.0.1/dist/chart/utils/candles-generator.utils.js';
133
-
134
- // create chart instance, pass parent container as 1st argument
135
- const container = document.getElementById("chart_container");
136
- const chartInstance = DXChart.createChart(container);
137
- // create and set candles data
138
- const mockCandles = generateCandlesData();
139
- const mockInstrument = {
140
- symbol: 'AAPL',
141
- priceIncrements: [0.01],
142
- };
143
- chart.setData({ candles: mockCandles, instrument: mockInstrument });
144
- </script>
120
+ <head>
121
+ <script src="https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/dist/dxchart.min.js"></script>
122
+ <script type="importmap">
123
+ {
124
+ "imports": {
125
+ "@devexperts/dxcharts-lite/": "https://www.unpkg.com/@devexperts/dxcharts-lite@2.0.1/"
126
+ }
127
+ }
128
+ </script>
129
+ </head>
130
+ <body>
131
+ <div id="chart_container"></div>
132
+ </body>
133
+ <script type="module">
134
+ import generateCandlesData from '@devexperts/dxcharts-lite/dist/chart/utils/candles-generator.utils';
135
+
136
+ // create chart instance, pass parent container as 1st argument
137
+ const container = document.getElementById('chart_container');
138
+ const chart = DXChart.createChart(container);
139
+ // create and set candles data
140
+ const candles = generateCandlesData();
141
+ chart.setData({ candles });
142
+ </script>
143
+ </html>
145
144
  ```
146
145
 
147
146
  ## Configuration
package/dist/chart/bootstrap.d.ts CHANGED
@@ -7,7 +7,6 @@ import { CanvasAnimation } from './animation/canvas-animation';
7
7
  import { CanvasBoundsContainer } from './canvas/canvas-bounds-container';
8
8
  import { ValidatedChartElements } from './canvas/chart-elements';
9
9
  import { CursorHandler } from './canvas/cursor.handler';
10
- import ChartContainer from './chart-container';
11
10
  import { ChartColors, ChartConfigComponentsOffsets, FullChartConfig, GridComponentConfig, PartialChartConfig } from './chart.config';
12
11
  import { ChartBaseModel } from './components/chart/chart-base.model';
13
12
  import { ChartComponent } from './components/chart/chart.component';
@@ -43,7 +42,7 @@ export type FitType = 'studies' | 'orders' | 'positions';
43
42
  /**
44
43
  * @deprecated use {Chart} instead
45
44
  */
46
- export default class ChartBootstrap implements ChartContainer {
45
+ export default class ChartBootstrap {
47
46
  id: string;
48
47
  bus: EventBus;
49
48
  config: FullChartConfig;
@@ -89,6 +88,9 @@ export default class ChartBootstrap implements ChartContainer {
89
88
  mainCanvasModel: CanvasModel;
90
89
  dynamicObjectsCanvasModel: CanvasModel;
91
90
  hitTestCanvasModel: HitTestCanvasModel;
91
+ /**
92
+ * @deprecated use {bounds} instead
93
+ */
92
94
  canvasBoundsContainer: CanvasBoundsContainer;
93
95
  canvasInputListener: CanvasInputListenerComponent;
94
96
  /**
@@ -117,6 +119,9 @@ export default class ChartBootstrap implements ChartContainer {
117
119
  */
118
120
  chartPanComponent: ChartPanComponent;
119
121
  paneManager: PaneManager;
122
+ /**
123
+ * @deprecated use {hover} instead
124
+ */
120
125
  hoverProducer: HoverProducerComponent;
121
126
  canvasModels: CanvasModel[];
122
127
  chartResizeHandler: ChartResizeHandler;
package/dist/chart/chart.d.ts CHANGED
@@ -24,6 +24,8 @@ export declare class Chart extends ChartBootstrap {
24
24
  data: import("./components/chart/chart.component").ChartComponent;
25
25
  scale: import("./model/scale.model").ScaleModel;
26
26
  panning: import("./components/pan/chart-pan.component").ChartPanComponent;
27
+ bounds: import("./canvas/canvas-bounds-container").CanvasBoundsContainer;
28
+ hover: import("./inputhandlers/hover-producer.component").HoverProducerComponent;
27
29
  constructor(element: HTMLElement, config?: PartialChartConfig);
28
30
  /**
29
31
  * Registers number formatters for pane
package/dist/chart/chart.js CHANGED
@@ -23,6 +23,8 @@ export class Chart extends ChartBootstrap {
23
23
  this.data = this.chartComponent;
24
24
  this.scale = this.scaleModel;
25
25
  this.panning = this.chartPanComponent;
26
+ this.bounds = this.canvasBoundsContainer;
27
+ this.hover = this.hoverProducer;
26
28
  }
27
29
  /**
28
30
  * Registers number formatters for pane
@@ -53,7 +55,7 @@ export class Chart extends ChartBootstrap {
53
55
  showSeparateVolumes(separate = false) {
54
56
  if (this.volumes) {
55
57
  this.volumes.setShowVolumesSeparatly(separate);
56
- this.canvasBoundsContainer.updateYAxisWidths();
58
+ this.bounds.updateYAxisWidths();
57
59
  }
58
60
  }
59
61
  setData(data) {
package/dist/chart/components/chart/candle-transformer.functions.d.ts CHANGED
@@ -8,4 +8,5 @@ import { Candle } from '../../model/candle.model';
8
8
  export declare const defaultCandleTransformer: VisualCandleCalculator;
9
9
  export declare const hollowCandleTransformer: VisualCandleCalculator;
10
10
  export declare const trendCandleTransformer: VisualCandleCalculator;
11
+ export declare const lineCandleTransformer: VisualCandleCalculator;
11
12
  export declare const getCandleIsActive: (candle: Candle, activeCandle?: Candle) => boolean;
package/dist/chart/components/chart/candle-transformer.functions.js CHANGED
@@ -14,6 +14,7 @@ export const trendCandleTransformer = (candle, { x, width, activeCandle, prevCan
14
14
  var _a;
15
15
  return new VisualCandle(x, width, candle.open, candle.close, candle.hi, candle.lo, nameDirection((_a = prevCandle === null || prevCandle === void 0 ? void 0 : prevCandle.close) !== null && _a !== void 0 ? _a : candle.close, candle.close), candle, true, getCandleIsActive(candle, activeCandle), candle.close > candle.open);
16
16
  };
17
+ export const lineCandleTransformer = trendCandleTransformer;
17
18
  export const getCandleIsActive = (candle, activeCandle) => {
18
19
  const isActive = activeCandle && activeCandle.idx === candle.idx;
19
20
  return isActive !== null && isActive !== void 0 ? isActive : false;
package/dist/chart/components/chart/chart-base.model.d.ts CHANGED
@@ -40,7 +40,7 @@ export declare class ChartBaseModel<T extends BaseType = 'point'> {
40
40
  * For given timestamp finds the closest candle in dataset.
41
41
  * @param timestamp
42
42
  */
43
- dataFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean): VisualPoint<T>;
43
+ dataFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean, selectedDataPoints?: DataPoint<T>[]): VisualPoint<T>;
44
44
  /**
45
45
  * Recalculates the period of the main candle series based on the data points.
46
46
  * If a period is detected, it is set as the new period.
package/dist/chart/components/chart/chart-base.model.js CHANGED
@@ -34,8 +34,8 @@ export class ChartBaseModel {
34
34
  * @param timestamp
35
35
  */
36
36
  // TODO think how to make this function like candleFromX
37
- dataFromTimestamp(timestamp, shouldExtrapolate = true) {
38
- const result = searchCandleIndex(timestamp, shouldExtrapolate, this.mainDataPoints, this.period);
37
+ dataFromTimestamp(timestamp, shouldExtrapolate = true, selectedDataPoints = this.mainDataPoints) {
38
+ const result = searchCandleIndex(timestamp, shouldExtrapolate, selectedDataPoints, this.period);
39
39
  return this.dataFromIdx(result.index);
40
40
  }
41
41
  /**
package/dist/chart/components/chart/chart.component.d.ts CHANGED
@@ -190,6 +190,12 @@ export declare class ChartComponent extends ChartBaseElement {
190
190
  * @param instrument - name of the instrument to update
191
191
  */
192
192
  addLastCandle(candle: Candle, instrumentSymbol?: string): void;
193
+ /**
194
+ * Remove candle by idx and recaculate indexes
195
+ * @param idx - candle index
196
+ * @param instrument - name of the instrument to update
197
+ */
198
+ removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
193
199
  /**
194
200
  * Updates last candle value
195
201
  * @param candle - updated candle
package/dist/chart/components/chart/chart.component.js CHANGED
@@ -27,7 +27,7 @@ import { HTDataSeriesDrawer } from '../../drawers/ht-data-series.drawer';
27
27
  import { BaselineModel } from '../../model/baseline.model';
28
28
  import { keys } from '../../utils/object.utils';
29
29
  import { PriceIncrementsUtils } from '../../utils/price-increments.utils';
30
- import { defaultCandleTransformer, hollowCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
30
+ import { defaultCandleTransformer, hollowCandleTransformer, lineCandleTransformer, trendCandleTransformer, } from './candle-transformer.functions';
31
31
  import { deleteCandlesIndex } from './candle.functions';
32
32
  import { TrendHistogramDrawer } from '../../drawers/data-series-drawers/trend-histogram.drawer';
33
33
  /**
@@ -105,6 +105,7 @@ export class ChartComponent extends ChartBaseElement {
105
105
  this.registerCandlesTransformer('candle', defaultCandleTransformer);
106
106
  this.registerCandlesTransformer('trend', trendCandleTransformer);
107
107
  this.registerCandlesTransformer('hollow', hollowCandleTransformer);
108
+ this.registerCandlesTransformer('line', lineCandleTransformer);
108
109
  }
109
110
  get barTypeValues() {
110
111
  // @ts-ignore
@@ -319,6 +320,14 @@ export class ChartComponent extends ChartBaseElement {
319
320
  addLastCandle(candle, instrumentSymbol) {
320
321
  this.chartModel.addLastCandle(candle, instrumentSymbol);
321
322
  }
323
+ /**
324
+ * Remove candle by idx and recaculate indexes
325
+ * @param idx - candle index
326
+ * @param instrument - name of the instrument to update
327
+ */
328
+ removeCandleByIdx(idx, instrumentSymbol) {
329
+ this.chartModel.removeCandleByIdx(idx, instrumentSymbol);
330
+ }
322
331
  /**
323
332
  * Updates last candle value
324
333
  * @param candle - updated candle
package/dist/chart/components/chart/chart.model.d.ts CHANGED
@@ -250,7 +250,7 @@ export declare class ChartModel extends ChartBaseElement {
250
250
  * For given timestamp finds the closest candle in dataset.
251
251
  * @param timestamp
252
252
  */
253
- candleFromTimestamp(timestamp: Timestamp, shouldExtrapolate?: boolean): VisualCandle;
253
+ candleFromTimestamp(timestamp: Timestamp, extrapolate?: boolean, selectedCandleSeries?: CandleSeriesModel): VisualCandle;
254
254
  /**
255
255
  * For given index returns the closest visual candle, or fake candle with correct X coordinate.
256
256
  * @param idx - index of candle
@@ -432,6 +432,12 @@ export declare class ChartModel extends ChartBaseElement {
432
432
  * @param instrument - name of the instrument to update
433
433
  */
434
434
  updateLastCandle(candle: Candle, instrumentSymbol?: string): void;
435
+ /**
436
+ * Remove candle by idx and recaculate indexes
437
+ * @param candle - new candle
438
+ * @param instrument - name of the instrument to update
439
+ */
440
+ removeCandleByIdx(idx: number, instrumentSymbol?: string): void;
435
441
  }
436
442
  export interface UpdateCandlesResult {
437
443
  prepended: number;
package/dist/chart/components/chart/chart.model.js CHANGED
@@ -183,7 +183,7 @@ export class ChartModel extends ChartBaseElement {
183
183
  // now the visual candles
184
184
  candleSeriesModel.recalculateVisualPoints();
185
185
  this.candlesSetSubject.next();
186
- this.bus.fireDraw([this.canvasModel.canvasId]);
186
+ this.canvasModel.fireDraw();
187
187
  }
188
188
  return candleSeriesModel;
189
189
  }
@@ -220,7 +220,7 @@ export class ChartModel extends ChartBaseElement {
220
220
  this.autoScaleOnCandles();
221
221
  this.scale.doAutoScale();
222
222
  this.candlesSetSubject.next();
223
- this.bus.fireDraw([this.canvasModel.canvasId]);
223
+ this.canvasModel.fireDraw();
224
224
  }
225
225
  /**
226
226
  * This function checks if the autoScaleOnCandles state is true. If it is, it calls the doBasicScale() function and then calls the autoScale() function with a true parameter.
@@ -410,7 +410,6 @@ export class ChartModel extends ChartBaseElement {
410
410
  if (seriesToUpdate) {
411
411
  seriesToUpdate.config.type = chartType;
412
412
  seriesToUpdate.updateCandleSeriesColors(candleSeriesConfig);
413
- this.bus.fireDraw([this.canvasModel.canvasId]);
414
413
  }
415
414
  this.bus.fireDraw([this.canvasModel.canvasId]);
416
415
  }
@@ -549,8 +548,9 @@ export class ChartModel extends ChartBaseElement {
549
548
  * For given timestamp finds the closest candle in dataset.
550
549
  * @param timestamp
551
550
  */
552
- candleFromTimestamp(timestamp, shouldExtrapolate = true) {
553
- return this.chartBaseModel.dataFromTimestamp(timestamp, shouldExtrapolate);
551
+ candleFromTimestamp(timestamp, extrapolate = true, selectedCandleSeries = this.mainCandleSeries) {
552
+ const dataPointsSource = selectedCandleSeries.dataPoints;
553
+ return this.chartBaseModel.dataFromTimestamp(timestamp, extrapolate, dataPointsSource);
554
554
  }
555
555
  /**
556
556
  * For given index returns the closest visual candle, or fake candle with correct X coordinate.
@@ -803,7 +803,7 @@ export class ChartModel extends ChartBaseElement {
803
803
  // can apply some optimization
804
804
  // series.recalculateOnlyLastVisualCandle();
805
805
  // TODO apply optimization
806
- this.bus.fireDraw([this.canvasModel.canvasId]);
806
+ this.canvasModel.fireDraw();
807
807
  }
808
808
  else {
809
809
  series.recalculateVisualPoints();
@@ -910,6 +910,26 @@ export class ChartModel extends ChartBaseElement {
910
910
  updateLastCandle(candle, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
911
911
  this.updateCandles([candle], instrumentSymbol);
912
912
  }
913
+ /**
914
+ * Remove candle by idx and recaculate indexes
915
+ * @param candle - new candle
916
+ * @param instrument - name of the instrument to update
917
+ */
918
+ removeCandleByIdx(idx, instrumentSymbol = this.mainCandleSeries.instrument.symbol) {
919
+ const seriesList = this.findSeriesBySymbol(instrumentSymbol);
920
+ if (seriesList.length === 0) {
921
+ console.warn("removeCandle by id failed. Can't find series", instrumentSymbol);
922
+ return;
923
+ }
924
+ seriesList.forEach(series => {
925
+ series.dataPoints = series.dataPoints.slice(0, idx).concat(series.dataPoints.slice(idx + 1));
926
+ reindexCandles(series.dataPoints);
927
+ series.recalculateVisualPoints();
928
+ });
929
+ this.candlesRemovedSubject.next();
930
+ this.candlesUpdatedSubject.next();
931
+ this.canvasModel.fireDraw();
932
+ }
913
933
  }
914
934
  const sortCandles = (candles) => candles.slice().sort((a, b) => (a.timestamp === b.timestamp ? 0 : a.timestamp > b.timestamp ? 1 : -1));
915
935
  const findFirstNotEmptyCandle = (candles, startIdx, iterateStep) => {
package/dist/chart/inputlisteners/canvas-input-listener.component.d.ts CHANGED
@@ -38,6 +38,7 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
38
38
  private clickSubject;
39
39
  private clickDocumentSubject;
40
40
  private dbClickSubject;
41
+ private dbTapSubject;
41
42
  private mouseDownSubject;
42
43
  private mouseUpSubject;
43
44
  private mouseUpDocumentSubject;
@@ -224,6 +225,12 @@ export declare class CanvasInputListenerComponent extends ChartBaseElement {
224
225
  * @returns {Observable<Point>} An Observable that emits a Point object when a double click event occurs within the bounds of the current point.
225
226
  */
226
227
  observeDbClick(hitBoundsTest?: HitBoundsTest): Observable<Point>;
228
+ /**
229
+ * Returns an Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
230
+ * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the double click event occurred within the bounds of the current point.
231
+ * @returns {Observable<Point>} An Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
232
+ */
233
+ observeDbTap(hitBoundsTest?: HitBoundsTest): Observable<Point>;
227
234
  /**
228
235
  * Returns an Observable that emits WheelEvent objects when the wheelSubject emits a new value.
229
236
  * The emitted events are filtered by the hitBoundsTest function, which is passed as an optional parameter.
package/dist/chart/inputlisteners/canvas-input-listener.component.js CHANGED
@@ -46,6 +46,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
46
46
  this.clickSubject = new Subject();
47
47
  this.clickDocumentSubject = new Subject();
48
48
  this.dbClickSubject = new Subject();
49
+ this.dbTapSubject = new Subject();
49
50
  this.mouseDownSubject = new Subject();
50
51
  this.mouseUpSubject = new Subject();
51
52
  this.mouseUpDocumentSubject = new Subject();
@@ -196,7 +197,7 @@ class CanvasInputListenerComponent extends ChartBaseElement {
196
197
  let timeoutId = null;
197
198
  return () => {
198
199
  if (timeoutId) {
199
- this.dbClickSubject.next(this.currentPoint);
200
+ this.dbTapSubject.next(this.currentPoint);
200
201
  clearTimeout(timeoutId);
201
202
  timeoutId = null;
202
203
  }
@@ -508,6 +509,16 @@ class CanvasInputListenerComponent extends ChartBaseElement {
508
509
  .asObservable()
509
510
  .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
510
511
  }
512
+ /**
513
+ * Returns an Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
514
+ * @param {HitBoundsTest} [hitBoundsTest=() => true] - A function that tests if the double click event occurred within the bounds of the current point.
515
+ * @returns {Observable<Point>} An Observable that emits a Point object when a double tap event occurs within the bounds of the current point.
516
+ */
517
+ observeDbTap(hitBoundsTest = () => true) {
518
+ return this.dbTapSubject
519
+ .asObservable()
520
+ .pipe(filter(() => hitBoundsTest(this.currentPoint.x, this.currentPoint.y)));
521
+ }
511
522
  /**
512
523
  * Returns an Observable that emits WheelEvent objects when the wheelSubject emits a new value.
513
524
  * The emitted events are filtered by the hitBoundsTest function, which is passed as an optional parameter.