Skip to content

Commit

Permalink
Move up down markers into a wrapper
Browse files Browse the repository at this point in the history
  • Loading branch information
SlicedSilver committed Dec 9, 2024
1 parent ae602f7 commit 22c1ba6
Show file tree
Hide file tree
Showing 14 changed files with 168 additions and 75 deletions.
2 changes: 1 addition & 1 deletion .size-limit.js
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export default [
{
name: 'Plugin: UpDownMarkersPrimitive',
path: 'dist/lightweight-charts.production.mjs',
import: '{ UpDownMarkersPrimitive }',
import: '{ createUpDownMarkers }',
ignore: ['fancy-canvas'],
limit: '2.50 KB',
},
Expand Down
3 changes: 2 additions & 1 deletion debug/debug-esm.mjs.example
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-env browser */
import {
createChart,
LineSeries,
} from '../dist/lightweight-charts.standalone.development.mjs';

/** @type {HTMLDivElement | null} */
Expand All @@ -17,7 +18,7 @@ const chart = createChart(container, options);
// @ts-ignore expose the chart api for easier debugging
window.chart = chart;

const mainSeries = chart.addLineSeries({
const mainSeries = chart.addSeries(LineSeries, {
priceFormat: {
minMove: 1,
precision: 0,
Expand Down
2 changes: 1 addition & 1 deletion debug/debug-standalone.html.example
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@

const chart = LightweightCharts.createChart(document.getElementById('container'));

const mainSeries = chart.addLineSeries({
const mainSeries = chart.addSeries(LightweightCharts.LineSeries, {
priceFormat: {
minMove: 1,
precision: 0,
Expand Down
3 changes: 2 additions & 1 deletion dts-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"output": {
"sortNodes": true,
"respectPreserveConstEnum": true
}
},
"failOnClass": true
}
]
}
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export { histogramSeries as HistogramSeries } from './model/series/histogram-ser
export { createTextWatermark } from './plugins/text-watermark/primitive';
export { createImageWatermark } from './plugins/image-watermark/primitive';
export { createSeriesMarkers } from './plugins/series-markers/wrapper';
export { UpDownMarkersPrimitive } from './plugins/up-down-markers-plugin/primitive';
export { createUpDownMarkers } from './plugins/up-down-markers-plugin/wrapper';

/**
* Returns the current version as a string. For example `'3.3.0'`.
Expand Down
4 changes: 3 additions & 1 deletion src/plugins/series-markers/wrapper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ export interface ISeriesMarkersPluginApi<HorzScaleItem> extends ISeriesPrimitive
detach: () => void;
}

class SeriesMarkersPrimitiveWrapper<HorzScaleItem> extends SeriesPrimitiveAdapter<HorzScaleItem, unknown, SeriesMarkersPrimitive<HorzScaleItem>> implements ISeriesPrimitiveWrapper<HorzScaleItem>, ISeriesMarkersPluginApi<HorzScaleItem> {
class SeriesMarkersPrimitiveWrapper<HorzScaleItem>
extends SeriesPrimitiveAdapter<HorzScaleItem, unknown, SeriesMarkersPrimitive<HorzScaleItem>>
implements ISeriesPrimitiveWrapper<HorzScaleItem>, ISeriesMarkersPluginApi<HorzScaleItem> {
public constructor(series: ISeriesApi<SeriesType, HorzScaleItem>, primitive: SeriesMarkersPrimitive<HorzScaleItem>, markers?: SeriesMarker<HorzScaleItem>[]) {
super(series, primitive);
if (markers) {
Expand Down
57 changes: 2 additions & 55 deletions src/plugins/up-down-markers-plugin/primitive.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { IChartApiBase } from '../../api/ichart-api';
import { ISeriesApi } from '../../api/iseries-api';
import { SeriesAttachedParameter } from '../../api/iseries-primitive-api';
import { ISeriesPrimitive, SeriesAttachedParameter } from '../../api/iseries-primitive-api';

import { ensureDefined } from '../../helpers/assertions';

Expand All @@ -23,29 +23,10 @@ function isLineData<T>(
return type === 'Line' || type === 'Area';
}

/**
* UpDownMarkersPrimitive class for showing the direction of price changes on the chart.
* This plugin can only be used with Line and Area series types.
* 1. Manual control:
*
* - Use the `setMarkers` method to manually add markers to the chart.
* This will replace any existing markers.
* - Use `clearMarkers` to remove all markers.
*
* 2. Automatic updates:
*
* Use `setData` and `update` from this primitive instead of the those on the series to let the
* primitive handle the creation of price change markers automatically.
*
* - Use `setData` to initialize or replace all data points.
* - Use `update` to modify individual data points. This will automatically
* create markers for price changes on existing data points.
* - The `updateVisibilityDuration` option controls how long markers remain visible.
*/
export class UpDownMarkersPrimitive<
HorzScaleItem,
TData extends SeriesDataItemTypeMap<HorzScaleItem>[UpDownMarkersSupportedSeriesTypes] = SeriesDataItemTypeMap<HorzScaleItem>['Line']
> {
> implements ISeriesPrimitive<HorzScaleItem> {
private _chart: IChartApiBase<HorzScaleItem> | undefined = undefined;
private _series: ISeriesApi<UpDownMarkersSupportedSeriesTypes, HorzScaleItem> | undefined =
undefined;
Expand All @@ -69,10 +50,6 @@ export class UpDownMarkersPrimitive<
};
}

/**
* Applies new options to the plugin.
* @param options - Partial options to apply.
*/
public applyOptions(options: Partial<UpDownMarkersPluginOptions>): void {
this._options = {
...this._options,
Expand All @@ -81,10 +58,6 @@ export class UpDownMarkersPrimitive<
this.requestUpdate();
}

/**
* Manually sets markers on the chart.
* @param markers - Array of SeriesUpDownMarker to set.
*/
public setMarkers(markers: SeriesUpDownMarker<HorzScaleItem>[]): void {
this._markersManager.clearAllMarkers();
const horzBehaviour = this._horzScaleBehavior;
Expand All @@ -96,25 +69,14 @@ export class UpDownMarkersPrimitive<
});
}

/**
* Retrieves the current markers on the chart.
* @returns An array of SeriesUpDownMarker.
*/
public markers(): readonly SeriesUpDownMarker<HorzScaleItem>[] {
return this._markersManager.getMarkers();
}

/**
* Requests an update of the chart.
*/
public requestUpdate(): void {
this._requestUpdate?.();
}

/**
* Attaches the primitive to the chart and series.
* @param params - Parameters for attaching the primitive.
*/
public attached(params: SeriesAttachedParameter<HorzScaleItem>): void {
const {
chart,
Expand Down Expand Up @@ -142,9 +104,6 @@ export class UpDownMarkersPrimitive<
this.requestUpdate();
}

/**
* Detaches the primitive from the chart and series.
*/
public detached(): void {
this._chart = undefined;
this._series = undefined;
Expand All @@ -170,10 +129,6 @@ export class UpDownMarkersPrimitive<
return this._paneViews;
}

/**
* Sets the data for the series and manages data points for marker updates.
* @param data - Array of data points to set.
*/
public setData(data: TData[]): void {
if (!this._series) {
throw new Error('Primitive not attached to series');
Expand All @@ -191,11 +146,6 @@ export class UpDownMarkersPrimitive<
ensureDefined(this._series).setData(data);
}

/**
* Updates a single data point and manages marker updates for existing data points.
* @param data - The data point to update.
* @param historicalUpdate - Optional flag for historical updates.
*/
public update(data: TData, historicalUpdate?: boolean): void {
if (!this._series || !this._horzScaleBehavior) {
throw new Error('Primitive not attached to series');
Expand All @@ -222,9 +172,6 @@ export class UpDownMarkersPrimitive<
ensureDefined(this._series).update(data, historicalUpdate);
}

/**
* Clears all markers from the chart.
*/
public clearMarkers(): void {
this._markersManager.clearAllMarkers();
}
Expand Down
147 changes: 147 additions & 0 deletions src/plugins/up-down-markers-plugin/wrapper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
import { ISeriesApi } from '../../api/iseries-api';

import {
LineData,
SeriesDataItemTypeMap,
WhitespaceData,
} from '../../model/data-consumer';
import { SeriesType } from '../../model/series-options';

import {
ISeriesPrimitiveWrapper,
SeriesPrimitiveAdapter,
} from '../series-primitive-adapter';
import { UpDownMarkersPluginOptions } from './options';
import { UpDownMarkersPrimitive } from './primitive';
import { SeriesUpDownMarker, UpDownMarkersSupportedSeriesTypes } from './types';

/**
* UpDownMarkersPrimitive Plugin for showing the direction of price changes on the chart.
* This plugin can only be used with Line and Area series types.
* 1. Manual control:
*
* - Use the `setMarkers` method to manually add markers to the chart.
* This will replace any existing markers.
* - Use `clearMarkers` to remove all markers.
*
* 2. Automatic updates:
*
* Use `setData` and `update` from this primitive instead of the those on the series to let the
* primitive handle the creation of price change markers automatically.
*
* - Use `setData` to initialize or replace all data points.
* - Use `update` to modify individual data points. This will automatically
* create markers for price changes on existing data points.
* - The `updateVisibilityDuration` option controls how long markers remain visible.
*/
export interface ISeriesUpDownMarkerPluginApi<
HorzScaleItem,
TData extends SeriesDataItemTypeMap<HorzScaleItem>[UpDownMarkersSupportedSeriesTypes] = SeriesDataItemTypeMap<HorzScaleItem>['Line']
> extends ISeriesPrimitiveWrapper<HorzScaleItem> {
/**
* Applies new options to the plugin.
* @param options - Partial options to apply.
*/
applyOptions: (options: Partial<UpDownMarkersPluginOptions>) => void;
/**
* Sets the data for the series and manages data points for marker updates.
* @param data - Array of data points to set.
*/
setData: (data: TData[]) => void;
/**
* Updates a single data point and manages marker updates for existing data points.
* @param data - The data point to update.
* @param historicalUpdate - Optional flag for historical updates.
*/
update: (data: TData, historicalUpdate?: boolean) => void;
/**
* Retrieves the current markers on the chart.
* @returns An array of SeriesUpDownMarker.
*/
markers: () => readonly SeriesUpDownMarker<HorzScaleItem>[];
/**
* Manually sets markers on the chart.
* @param markers - Array of SeriesUpDownMarker to set.
*/
setMarkers: (markers: SeriesUpDownMarker<HorzScaleItem>[]) => void;
/**
* Clears all markers from the chart.
*/
clearMarkers: () => void;
}

class SeriesUpDownMarkerPrimitiveWrapper<HorzScaleItem>
extends SeriesPrimitiveAdapter<
HorzScaleItem,
unknown,
UpDownMarkersPrimitive<HorzScaleItem>
>
implements ISeriesPrimitiveWrapper<HorzScaleItem>, ISeriesUpDownMarkerPluginApi<HorzScaleItem> {
public setData(
data: (LineData<HorzScaleItem> | WhitespaceData<HorzScaleItem>)[]
): void {
return this._primitive.setData(data);
}

public update(
data: LineData<HorzScaleItem> | WhitespaceData<HorzScaleItem>,
historicalUpdate?: boolean
): void {
return this._primitive.update(data, historicalUpdate);
}

public markers(): readonly SeriesUpDownMarker<HorzScaleItem>[] {
return this._primitive.markers();
}

public setMarkers(markers: SeriesUpDownMarker<HorzScaleItem>[]): void {
return this._primitive.setMarkers(markers);
}

public clearMarkers(): void {
return this._primitive.clearMarkers();
}
}

/**
* Creates and attaches the Series Up Down Markers Plugin.
*
* @param series - Series to which attach the Up Down Markers Plugin
* @param options - options for the Up Down Markers Plugin
*
* @returns Api for Series Up Down Marker Plugin. {@link ISeriesUpDownMarkerPluginApi}
*
* @example
* ```js
* import { createUpDownMarkers, createChart, LineSeries } from 'lightweight-charts';
*
* const chart = createChart('container');
* const lineSeries = chart.addSeries(LineSeries);
* const upDownMarkers = createUpDownMarkers(lineSeries, {
* positiveColor: '#22AB94',
* negativeColor: '#F7525F',
* updateVisibilityDuration: 5000,
* });
* // to add some data
* upDownMarkers.setData(
* [
* { time: '2020-02-02', value: 12.34 },
* //... more line series data
* ]
* );
* // ... Update some values
* upDownMarkers.update({ time: '2020-02-02', value: 13.54 }, true);
* // to remove plugin from the series
* upDownMarkers.detach();
* ```
*/
export function createUpDownMarkers<T>(
series: ISeriesApi<SeriesType, T>,
options: Partial<UpDownMarkersPluginOptions> = {}
): ISeriesUpDownMarkerPluginApi<T> {
const wrapper = new SeriesUpDownMarkerPrimitiveWrapper<T>(
series,
new UpDownMarkersPrimitive(options)
);
return wrapper;
}
6 changes: 2 additions & 4 deletions tests/e2e/coverage/test-cases/plugins/image-watermark.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,12 @@ function beforeInteractions(container) {

mainSeries.setData(simpleData());

const imageWatermark = new LightweightCharts.ImageWatermark(imageDataUrl, {
const pane = chart.panes()[0];
LightweightCharts.createImageWatermark(pane, imageDataUrl, {
alpha: 0.5,
padding: 20,
});

const pane = chart.panes()[0];
pane.attachPrimitive(imageWatermark);

return Promise.resolve();
}

Expand Down
3 changes: 1 addition & 2 deletions tests/e2e/coverage/test-cases/plugins/up-down-markers.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,7 @@ function beforeInteractions(container) {
pointMarkersVisible: true,
});

const primitive = new LightweightCharts.UpDownMarkersPrimitive();
series1.attachPrimitive(primitive);
const primitive = LightweightCharts.createUpDownMarkers(series1);
primitive.setData(curve1);

primitive.update({ time: 24, value: 4.3 }, true); // up
Expand Down
3 changes: 1 addition & 2 deletions tests/e2e/graphics/test-cases/plugins/up-down-markers.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,7 @@ function runTestCase(container) {
pointMarkersVisible: true,
});

const primitive = new LightweightCharts.UpDownMarkersPrimitive();
series1.attachPrimitive(primitive);
const primitive = LightweightCharts.createUpDownMarkers(series1);
primitive.setData(curve1);

primitive.update({ time: 24, value: 4.3 }, true); // up
Expand Down
2 changes: 1 addition & 1 deletion website/tutorials/demos/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module.exports = {
document: false,
createChart: false,
createYieldCurveChart: false,
UpDownMarkersPrimitive: false,
createUpDownMarkers: false,
LineSeries: false,
AreaSeries: false,
BarSeries: false,
Expand Down
3 changes: 1 addition & 2 deletions website/tutorials/demos/yield-curve-with-update-markers.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,7 @@ const series1 = chart.addSeries(LineSeries, {
pointMarkersVisible: true,
lineWidth: 2,
});
const priceChangeMarkers = new UpDownMarkersPrimitive();
series1.attachPrimitive(priceChangeMarkers);
const priceChangeMarkers = createUpDownMarkers(series1);
priceChangeMarkers.setData(curve1);

const series2 = chart.addSeries(LineSeries, {
Expand Down
Loading

0 comments on commit 22c1ba6

Please sign in to comment.