add relative gradient option to the baseline series

.size-limit.js

@@ -79,15 +79,15 @@ export default [
 		path: 'dist/lightweight-charts.production.mjs',
 		import: '{ BaselineSeries }',
 		ignore: ['fancy-canvas'],
-		limit: '3.2 KB',
+		limit: '4.00 KB',
 		brotli: true,
 	},
 	{
 		name: 'Series: AreaSeries',
 		path: 'dist/lightweight-charts.production.mjs',
 		import: '{ AreaSeries }',
 		ignore: ['fancy-canvas'],
-		limit: '3.2 KB',
+		limit: '4.00 KB',
 		brotli: true,
 	},
 	{

src/model/series-options.ts

@@ -251,6 +251,14 @@ export interface AreaStyleOptions {
 	 */
 	bottomColor: string;
 
+	/**
+	 * Gradient is relative to the base value and the currently visible range.
+	 * If it is false, the gradient is relative to the top and bottom of the chart.
+	 *
+	 * @defaultValue `false`
+	 */
+	relativeGradient: boolean;
+
 	/**
 	 * Invert the filled area. Fills the area above the line if set to true.
 	 *
@@ -375,7 +383,13 @@ export interface BaselineStyleOptions {
 	 * @defaultValue `{ type: 'price', price: 0 }`
 	 */
 	baseValue: BaseValueType;
-
+	/**
+	 * Gradient is relative to the base value and the currently visible range.
+	 * If it is false, the gradient is relative to the top and bottom of the chart.
+	 *
+	 * @defaultValue `false`
+	 */
+	relativeGradient: boolean;
 	/**
 	 * The first color of the top area.
 	 *

src/model/series/area-pane-view.ts

@@ -28,13 +28,28 @@ export class SeriesAreaPaneView extends LinePaneViewBase<'Area', AreaFillItem &
 
 	protected _prepareRendererData(): void {
 		const options = this._series.options();
+		if (this._itemsVisibleRange === null || this._items.length === 0) {
+			return;
+		}
+		let topCoordinate;
 
+		if (options.relativeGradient) {
+			topCoordinate = this._items[this._itemsVisibleRange.from].y;
+
+			for (let i = this._itemsVisibleRange.from; i < this._itemsVisibleRange.to; i++) {
+				const item = this._items[i];
+				if (item.y < topCoordinate) {
+					topCoordinate = item.y;
+				}
+			}
+		}
 		this._areaRenderer.setData({
 			lineType: options.lineType,
 			items: this._items,
 			lineStyle: options.lineStyle,
 			lineWidth: options.lineWidth,
 			baseLevelCoordinate: null,
+			topCoordinate,
 			invertFilledArea: options.invertFilledArea,
 			visibleRange: this._itemsVisibleRange,
 			barWidth: this._model.timeScale().barSpacing(),

src/model/series/area-series.ts

@@ -11,6 +11,7 @@ export const areaStyleDefaults: AreaStyleOptions = {
 	topColor: 'rgba( 46, 220, 135, 0.4)',
 	bottomColor: 'rgba( 40, 221, 100, 0)',
 	invertFilledArea: false,
+	relativeGradient: false,
 	lineColor: '#33D778',
 	lineStyle: LineStyle.Solid,
 	lineWidth: 3,

src/model/series/baseline-pane-view.ts

@@ -33,34 +33,52 @@ export class SeriesBaselinePaneView extends LinePaneViewBase<'Baseline', Baselin
 		}
 
 		const options = this._series.options();
-
 		const baseLevelCoordinate = this._series.priceScale().priceToCoordinate(options.baseValue.price, firstValue.value);
 		const barWidth = this._model.timeScale().barSpacing();
 
+		if (this._itemsVisibleRange === null || this._items.length === 0) {
+			return;
+		}
+		let topCoordinate;
+		let bottomCoordinate;
+
+		if (options.relativeGradient) {
+			topCoordinate = this._items[this._itemsVisibleRange.from].y;
+			bottomCoordinate = this._items[this._itemsVisibleRange.from].y;
+
+			for (let i = this._itemsVisibleRange.from; i < this._itemsVisibleRange.to; i++) {
+				const item = this._items[i];
+				if (item.y < topCoordinate) {
+					topCoordinate = item.y;
+				}
+				if (item.y > bottomCoordinate) {
+					bottomCoordinate = item.y;
+				}
+			}
+		}
+
 		this._baselineAreaRenderer.setData({
 			items: this._items,
-
 			lineWidth: options.lineWidth,
 			lineStyle: options.lineStyle,
 			lineType: options.lineType,
-
 			baseLevelCoordinate,
+			topCoordinate,
+			bottomCoordinate,
 			invertFilledArea: false,
-
 			visibleRange: this._itemsVisibleRange,
 			barWidth,
 		});
 
 		this._baselineLineRenderer.setData({
 			items: this._items,
-
 			lineWidth: options.lineWidth,
 			lineStyle: options.lineStyle,
 			lineType: options.lineVisible ? options.lineType : undefined,
 			pointMarkersRadius: options.pointMarkersVisible ? (options.pointMarkersRadius || options.lineWidth / 2 + 2) : undefined,
-
 			baseLevelCoordinate,
-
+			topCoordinate,
+			bottomCoordinate,
 			visibleRange: this._itemsVisibleRange,
 			barWidth,
 		});

src/model/series/baseline-series.ts

@@ -12,7 +12,7 @@ export const baselineStyleDefaults: BaselineStyleOptions = {
 		type: 'price',
 		price: 0,
 	},
-
+	relativeGradient: false,
 	topFillColor1: 'rgba(38, 166, 154, 0.28)',
 	topFillColor2: 'rgba(38, 166, 154, 0.05)',
 	topLineColor: 'rgba(38, 166, 154, 1)',

src/renderers/area-renderer.ts

@@ -8,6 +8,7 @@ import { GradientStyleCache } from './gradient-style-cache';
 
 export type AreaFillItem = AreaFillItemBase & AreaFillColorerStyle;
 export interface PaneRendererAreaData extends PaneRendererAreaDataBase<AreaFillItem> {
+	topCoordinate?: Coordinate;
 }
 
 export class PaneRendererArea extends PaneRendererAreaBase<PaneRendererAreaData> {
@@ -21,7 +22,8 @@ export class PaneRendererArea extends PaneRendererAreaBase<PaneRendererAreaData>
 				topColor2: '',
 				bottomColor1: '',
 				bottomColor2: item.bottomColor,
-				bottom: renderingScope.bitmapSize.height as Coordinate,
+				topCoordinate: this._data?.topCoordinate ?? 0 as Coordinate,
+				bottomCoordinate: renderingScope.bitmapSize.height as Coordinate,
 			}
 		);
 	}

src/renderers/baseline-renderer-area.ts

@@ -8,6 +8,8 @@ import { GradientStyleCache } from './gradient-style-cache';
 
 export type BaselineFillItem = AreaFillItemBase & BaselineFillColorerStyle;
 export interface PaneRendererBaselineData extends PaneRendererAreaDataBase<BaselineFillItem> {
+	topCoordinate?: Coordinate;
+	bottomCoordinate?: Coordinate;
 }
 export class PaneRendererBaselineArea extends PaneRendererAreaBase<PaneRendererBaselineData> {
 	private readonly _fillCache: GradientStyleCache = new GradientStyleCache();
@@ -23,8 +25,9 @@ export class PaneRendererBaselineArea extends PaneRendererAreaBase<PaneRendererB
 				topColor2: item.topFillColor2,
 				bottomColor1: item.bottomFillColor1,
 				bottomColor2: item.bottomFillColor2,
-				bottom: renderingScope.bitmapSize.height as Coordinate,
 				baseLevelCoordinate: data.baseLevelCoordinate,
+				topCoordinate: data.topCoordinate ?? 0 as Coordinate,
+				bottomCoordinate: data.bottomCoordinate ?? renderingScope.bitmapSize.height as Coordinate,
 			}
 		);
 	}

src/renderers/baseline-renderer-line.ts

@@ -9,6 +9,8 @@ import { LineItemBase as LineStrokeItemBase, PaneRendererLineBase, PaneRendererL
 export type BaselineStrokeItem = LineStrokeItemBase & BaselineStrokeColorerStyle;
 export interface PaneRendererBaselineLineData extends PaneRendererLineDataBase<BaselineStrokeItem> {
 	baseLevelCoordinate: Coordinate;
+	topCoordinate?: Coordinate;
+	bottomCoordinate?: Coordinate;
 }
 
 export class PaneRendererBaselineLine extends PaneRendererLineBase<PaneRendererBaselineLineData> {
@@ -25,8 +27,9 @@ export class PaneRendererBaselineLine extends PaneRendererLineBase<PaneRendererB
 				topColor2: item.topLineColor,
 				bottomColor1: item.bottomLineColor,
 				bottomColor2: item.bottomLineColor,
-				bottom: renderingScope.bitmapSize.height as Coordinate,
 				baseLevelCoordinate: data.baseLevelCoordinate,
+				topCoordinate: data.topCoordinate ?? 0 as Coordinate,
+				bottomCoordinate: data.bottomCoordinate ?? renderingScope.bitmapSize.height as Coordinate,
 			}
 		);
 	}

src/renderers/gradient-style-cache.ts

@@ -10,7 +10,8 @@ export interface GradientCacheParams {
 	bottomColor1: string;
 	bottomColor2: string;
 	baseLevelCoordinate?: Coordinate | null;
-	bottom: Coordinate;
+	topCoordinate: Coordinate;
+	bottomCoordinate: Coordinate;
 }
 
 export class GradientStyleCache {
@@ -19,7 +20,10 @@ export class GradientStyleCache {
 
 	public get(scope: BitmapCoordinatesRenderingScope, params: GradientCacheParams): CanvasGradient {
 		const cachedParams = this._params;
-		const { topColor1, topColor2, bottomColor1, bottomColor2, bottom, baseLevelCoordinate } = params;
+		const {
+			topColor1, topColor2, bottomColor1, bottomColor2,
+			baseLevelCoordinate, topCoordinate, bottomCoordinate,
+		} = params;
 
 		if (
 			this._cachedValue === undefined ||
@@ -29,18 +33,23 @@ export class GradientStyleCache {
 			cachedParams.bottomColor1 !== bottomColor1 ||
 			cachedParams.bottomColor2 !== bottomColor2 ||
 			cachedParams.baseLevelCoordinate !== baseLevelCoordinate ||
-			cachedParams.bottom !== bottom
+			cachedParams.topCoordinate !== topCoordinate ||
+			cachedParams.bottomCoordinate !== bottomCoordinate
 		) {
-			const gradient = scope.context.createLinearGradient(0, 0, 0, bottom);
+			const { verticalPixelRatio } = scope;
+			const top = (topCoordinate) * verticalPixelRatio;
+			const bottom = (bottomCoordinate) * verticalPixelRatio;
+			const baseline = (baseLevelCoordinate ?? 0) * verticalPixelRatio;
+			const gradient = scope.context.createLinearGradient(0, top, 0, bottom);
 
 			gradient.addColorStop(0, topColor1);
+			if (baseLevelCoordinate !== null && baseLevelCoordinate !== undefined) {
+				const range = bottom - top;
+				const baselineRatio = clamp(((baseline - top) / range), 0, 1);
 
-			if (baseLevelCoordinate != null) {
-				const baselinePercent = clamp(baseLevelCoordinate * scope.verticalPixelRatio / bottom, 0, 1);
-				gradient.addColorStop(baselinePercent, topColor2);
-				gradient.addColorStop(baselinePercent, bottomColor1);
+				gradient.addColorStop(baselineRatio, topColor2);
+				gradient.addColorStop(baselineRatio, bottomColor1);
 			}
-
 			gradient.addColorStop(1, bottomColor2);
 
 			this._cachedValue = gradient;

tests/e2e/graphics/test-cases/series/area-relative-gradient-inverted.js

@@ -0,0 +1,24 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
+
+	const mainSeries = chart.addSeries(LightweightCharts.AreaSeries, {
+		relativeGradient: true,
+		invertFilledArea: true,
+	});
+
+	mainSeries.setData(generateData());
+}

tests/e2e/graphics/test-cases/series/area-relative-gradient.js

@@ -0,0 +1,23 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
+
+	const mainSeries = chart.addSeries(LightweightCharts.AreaSeries, {
+		relativeGradient: true,
+	});
+
+	mainSeries.setData(generateData());
+}

tests/e2e/graphics/test-cases/series/baseline-relative-gradient.js

@@ -0,0 +1,43 @@
+function generateBar(i, target) {
+	const step = (i % 20) / 5000;
+	const base = i / 5;
+	target.value = base * (1 - step);
+
+	if ((i % 10) > 4) {
+		target.topFillColor1 = 'red';
+		target.topFillColor2 = 'rgba(255, 0, 0, 0)';
+	}
+
+	if ((i % 10) > 6) {
+		target.bottomFillColor1 = 'yellow';
+		target.bottomFillColor2 = 'rgba(255, 255, 0, 0)';
+	}
+
+	if ((i % 10) > 5) {
+		target.topLineColor = 'blue';
+		target.bottomLineColor = 'green';
+	}
+}
+
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		const item = {
+			time: time.getTime() / 1000,
+		};
+		time.setUTCDate(time.getUTCDate() + 1);
+
+		generateBar(i, item);
+		res.push(item);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, { layout: { attributionLogo: false } });
+
+	const mainSeries = chart.addSeries(LightweightCharts.BaselineSeries, { baseValue: { type: 'price', price: 88 }, relativeGradient: true });
+
+	mainSeries.setData(generateData());
+}