|
18 | 18 | </Chart>
|
19 | 19 |
|
20 | 20 | <script lang="ts">
|
| 21 | + import type { |
| 22 | + BitmapCoordinatesRenderingScope, |
| 23 | + CanvasRenderingTarget2D, |
| 24 | + } from 'fancy-canvas'; |
21 | 25 | import {Chart, CustomSeries} from 'svelte-lightweight-charts';
|
22 | 26 | import {
|
23 | 27 | CustomData,
|
|
33 | 37 | ICustomSeriesPaneRenderer,
|
34 | 38 | PriceToCoordinateConverter,
|
35 | 39 | LineData,
|
| 40 | + IChartApi, |
36 | 41 | } from 'lightweight-charts';
|
37 |
| - import { |
38 |
| - BitmapCoordinatesRenderingScope, |
39 |
| - CanvasRenderingTarget2D, |
40 |
| - } from 'fancy-canvas'; |
41 | 42 | import {onMount} from 'svelte';
|
42 | 43 |
|
43 |
| - let container; |
44 |
| - let chart; |
| 44 | + let container: HTMLElement | null = null; |
| 45 | + let chart: IChartApi | null = null; |
45 | 46 |
|
46 | 47 | const greenStyle: Partial<BrushableAreaStyle> = {
|
47 | 48 | lineColor: 'rgb(4,153,129)',
|
|
69 | 70 |
|
70 | 71 | onMount(
|
71 | 72 | () => {
|
| 73 | + if (chart === null || container === null) { |
| 74 | + return; |
| 75 | + } |
| 76 | +
|
72 | 77 | chart.timeScale().fitContent();
|
73 | 78 |
|
74 | 79 | interface MouseState {
|
|
84 | 89 | };
|
85 | 90 |
|
86 | 91 | function determinePaneXLogical(mouseX: number): Logical | null {
|
| 92 | + if (chart === null || container === null) { |
| 93 | + return null; |
| 94 | + } |
| 95 | +
|
87 | 96 | const chartBox = container.getBoundingClientRect();
|
88 | 97 | const x = mouseX - chartBox.left - chart.priceScale('left').width();
|
89 | 98 | if (x < 0 || x > chart.timeScale().width()) return null;
|
|
118 | 127 | },
|
119 | 128 | ],
|
120 | 129 | ...fadeStyle,
|
121 |
| - } as Partial<BrushableAreaSeriesOptions>; |
| 130 | + } as unknown as Partial<BrushableAreaSeriesOptions>; |
122 | 131 | }
|
123 | 132 | });
|
124 | 133 |
|
|
145 | 154 | /**
|
146 | 155 | * BrushableArea Series Data
|
147 | 156 | */
|
148 |
| - export interface BrushableAreaData extends CustomData { |
| 157 | + interface BrushableAreaData extends CustomData { |
149 | 158 | value: number;
|
150 | 159 | }
|
151 | 160 |
|
|
185 | 194 | TData,
|
186 | 195 | BrushableAreaSeriesOptions
|
187 | 196 | > {
|
188 |
| - _renderer: BrushableAreaSeriesRenderer<TData>; |
189 |
| -
|
190 |
| - constructor() { |
191 |
| - this._renderer = new BrushableAreaSeriesRenderer(); |
192 |
| - } |
| 197 | + _renderer: BrushableAreaSeriesRenderer<TData> = new BrushableAreaSeriesRenderer(); |
193 | 198 |
|
194 | 199 | priceValueBuilder(plotRow: TData): CustomSeriesPricePlotValues {
|
195 | 200 | return [plotRow.value];
|
|
220 | 225 | y: number;
|
221 | 226 | }
|
222 | 227 |
|
223 |
| - export class BrushableAreaSeriesRenderer<TData extends BrushableAreaData> implements ICustomSeriesPaneRenderer { |
| 228 | + class BrushableAreaSeriesRenderer<TData extends BrushableAreaData> implements ICustomSeriesPaneRenderer { |
224 | 229 | _data: PaneRendererCustomData<Time, TData> | null = null;
|
225 | 230 | _options: BrushableAreaSeriesOptions | null = null;
|
226 | 231 |
|
|
0 commit comments