Merge branch 'master' into v5

.puppeteerrc.js

@@ -9,6 +9,7 @@ module.exports = {
 	 * can reliably find the installed chrome binary
 	 */
 	cacheDirectory: join(__dirname, 'node_modules', '.cache', 'puppeteer'),
+	downloadBaseUrl: 'https://storage.googleapis.com/chrome-for-testing-public',
 	experiments: {
 		/**
 		 * This can also be configured / overridden with the

plugin-examples/src/plugins/trend-line/trend-line.ts

@@ -48,8 +48,10 @@ class TrendLinePaneRenderer implements ISeriesPrimitivePaneRenderer {
 			ctx.moveTo(x1Scaled, y1Scaled);
 			ctx.lineTo(x2Scaled, y2Scaled);
 			ctx.stroke();
-			this._drawTextLabel(scope, this._text1, x1Scaled, y1Scaled, true);
-			this._drawTextLabel(scope, this._text2, x2Scaled, y2Scaled, false);
+			if (this._options.showLabels) {
+				this._drawTextLabel(scope, this._text1, x1Scaled, y1Scaled, true);
+				this._drawTextLabel(scope, this._text2, x2Scaled, y2Scaled, false);
+			}
 		});
 	}
 

src/helpers/color.ts

@@ -195,11 +195,11 @@ function normalizeRgbComponent<T extends RedComponent | GreenComponent | BlueCom
 }
 
 function normalizeAlphaComponent(component: AlphaComponent): AlphaComponent {
-	return (!(component <= 0) && !(component > 0) ? 0 as AlphaComponent :
-		component < 0 ? 0 as AlphaComponent :
-			component > 1 ? 1 as AlphaComponent :
-				// limit the precision of all numbers to at most 4 digits in fractional part
-				Math.round(component * 10000) / 10000) as AlphaComponent;
+	if (component <= 0 || component > 1) {
+		return Math.min(Math.max(component, 0), 1) as AlphaComponent;
+	}
+	// limit the precision of all numbers to at most 4 digits in fractional part
+	return Math.round(component * 10000) / 10000 as AlphaComponent;
 }
 
 /**
@@ -236,8 +236,8 @@ const rgbRe = /^rgb\(\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*\)$
  * @example
  * rgba(255,234,245,0.1)
  */
-const rgbaRe = /^rgba\(\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*,\s*(-?[\d]{0,10}(?:\.\d+)?)\s*\)$/;
 
+const rgbaRe = /^rgba\(\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*,\s*(-?\d{1,10})\s*,\s*(-?\d*\.?\d+)\s*\)$/;
 function colorStringToRgba(colorString: string): Rgba {
 	colorString = colorString.toLowerCase();
 

src/model/price-scale.ts

@@ -946,7 +946,7 @@ export class PriceScale {
 					const margins = autoScaleInfo.margins();
 					if (margins !== null) {
 						marginAbove = Math.max(marginAbove, margins.above);
-						marginBelow = Math.max(marginAbove, margins.below);
+						marginBelow = Math.max(marginBelow, margins.below);
 					}
 				}
 			}

src/renderers/series-markers-utils.ts

@@ -38,3 +38,13 @@ export interface BitmapShapeItemCoordinates {
 	y: number;
 	pixelRatio: number;
 }
+
+export function calculateAdjustedMargin(margin: number, hasSide: boolean, hasInBar: boolean): number {
+	if (hasSide) {
+		return margin;
+	} else if (hasInBar) {
+		return Math.ceil(margin / 2);
+	}
+
+	return 0;
+}

src/views/pane/series-markers-pane-view.ts

@@ -7,7 +7,7 @@ import { IChartModelBase } from '../../model/chart-model';
 import { Coordinate } from '../../model/coordinate';
 import { PriceScale } from '../../model/price-scale';
 import { ISeries } from '../../model/series';
-import { InternalSeriesMarker } from '../../model/series-markers';
+import { InternalSeriesMarker, SeriesMarkerPosition } from '../../model/series-markers';
 import { SeriesType } from '../../model/series-options';
 import { TimePointIndex, visibleTimedValues } from '../../model/time-data';
 import { ITimeScale } from '../../model/time-scale';
@@ -18,6 +18,7 @@ import {
 	SeriesMarkersRenderer,
 } from '../../renderers/series-markers-renderer';
 import {
+	calculateAdjustedMargin,
 	calculateShapeHeight,
 	shapeMargin as calculateShapeMargin,
 } from '../../renderers/series-markers-utils';
@@ -33,6 +34,8 @@ interface Offsets {
 	belowBar: number;
 }
 
+type MarkerPositions = Record<SeriesMarkerPosition, boolean>;
+
 // eslint-disable-next-line max-params
 function fillSizeAndY(
 	rendererItem: SeriesMarkerRendererDataItem,
@@ -94,7 +97,7 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView {
 	private _autoScaleMarginsInvalidated: boolean = true;
 
 	private _autoScaleMargins: AutoScaleMargins | null = null;
-
+	private _markersPositions: MarkerPositions | null = null;
 	private _renderer: SeriesMarkersRenderer = new SeriesMarkersRenderer();
 
 	public constructor(series: ISeries<SeriesType>, model: IChartModelBase) {
@@ -111,6 +114,7 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView {
 		this._autoScaleMarginsInvalidated = true;
 		if (updateType === 'data') {
 			this._dataInvalidated = true;
+			this._markersPositions = null;
 		}
 	}
 
@@ -135,10 +139,12 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView {
 			if (this._series.indexedMarkers().length > 0) {
 				const barSpacing = this._model.timeScale().barSpacing();
 				const shapeMargin = calculateShapeMargin(barSpacing);
-				const marginsAboveAndBelow = calculateShapeHeight(barSpacing) * 1.5 + shapeMargin * 2;
+				const marginValue = calculateShapeHeight(barSpacing) * 1.5 + shapeMargin * 2;
+				const positions = this._getMarkerPositions();
+
 				this._autoScaleMargins = {
-					above: marginsAboveAndBelow as Coordinate,
-					below: marginsAboveAndBelow as Coordinate,
+					above: calculateAdjustedMargin(marginValue, positions.aboveBar, positions.inBar),
+					below: calculateAdjustedMargin(marginValue, positions.belowBar, positions.inBar),
 				};
 			} else {
 				this._autoScaleMargins = null;
@@ -150,6 +156,25 @@ export class SeriesMarkersPaneView implements IUpdatablePaneView {
 		return this._autoScaleMargins;
 	}
 
+	protected _getMarkerPositions(): MarkerPositions {
+		if (this._markersPositions === null) {
+			this._markersPositions = this._series.indexedMarkers().reduce(
+				(acc: MarkerPositions, marker: InternalSeriesMarker<TimePointIndex>) => {
+					if (!acc[marker.position]) {
+						acc[marker.position] = true;
+					}
+					return acc;
+				},
+				{
+					inBar: false,
+					aboveBar: false,
+					belowBar: false,
+				}
+			);
+		}
+		return this._markersPositions;
+	}
+
 	protected _makeValid(): void {
 		const priceScale = this._series.priceScale();
 		const timeScale = this._model.timeScale();

tests/e2e/graphics/test-cases/series-markers/series-markers-all-above.js

@@ -0,0 +1,30 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 30; ++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);
+
+	const mainSeries = chart.addHistogramSeries();
+
+	const data = generateData();
+	mainSeries.setData(data);
+
+	const markers = [
+		{ time: data[0].time, position: 'aboveBar', color: 'red', shape: 'arrowUp' },
+		{ time: data[1].time, position: 'aboveBar', color: 'red', shape: 'arrowUp' },
+
+	];
+
+	mainSeries.setMarkers(markers);
+}

tests/e2e/graphics/test-cases/series-markers/series-markers-all-below.js

@@ -0,0 +1,29 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 30; ++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);
+
+	const mainSeries = chart.addHistogramSeries();
+
+	const data = generateData();
+	mainSeries.setData(data);
+
+	const markers = [
+		{ time: data[data.length - 3].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
+		{ time: data[data.length - 2].time, position: 'belowBar', color: 'red', shape: 'arrowUp' },
+	];
+
+	mainSeries.setMarkers(markers);
+}

tests/e2e/graphics/test-cases/series-markers/series-markers-all-inbar.js

@@ -0,0 +1,29 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 30; ++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);
+
+	const mainSeries = chart.addHistogramSeries();
+
+	const data = generateData();
+	mainSeries.setData(data);
+
+	const markers = [
+		{ time: data[data.length - 3].time, position: 'inBar', color: 'red', shape: 'arrowUp' },
+		{ time: data[data.length - 2].time, position: 'inBar', color: 'red', shape: 'arrowUp' },
+	];
+
+	mainSeries.setMarkers(markers);
+}

website/.eslintrc.js

@@ -3,6 +3,10 @@ module.exports = {
 		CHART_BACKGROUND_COLOR: true,
 		CHART_BACKGROUND_RGB_COLOR: true,
 		LINE_LINE_COLOR: true,
+		LINE_LINE2_COLOR: true,
+		LINE_LINE3_COLOR: true,
+		LINE_LINE4_COLOR: true,
+		LINE_LINE5_COLOR: true,
 		AREA_TOP_COLOR: true,
 		AREA_BOTTOM_COLOR: true,
 		BAR_UP_COLOR: true,

website/plugins/enhanced-codeblock/theme/CodeBlock/index.jsx

@@ -24,12 +24,16 @@ export function replaceThemeConstantStrings(originalString, isDarkTheme) {
 	return result;
 }
 
+export function replaceTabsString(string) {
+	return string.replace(/\t/g, '    ');
+}
+
 export function removeUnwantedLines(originalString) {
 	return originalString.replace(new RegExp(/\/\/ delete-start[\w\W]*?\/\/ delete-end/, 'gm'), '');
 }
 
 const EnhancedCodeBlock = props => {
-	const { chart, replaceThemeConstants, hideableCode, chartOnly, iframeStyle, ...rest } = props;
+	const { chart, replaceThemeConstants, hideableCode, chartOnly, chartOnTop = false, iframeStyle, replaceTabs = true, codeUsage, ...rest } = props;
 	let { children } = props;
 	const { colorMode } = useColorMode();
 	const isDarkTheme = colorMode === 'dark';
@@ -38,22 +42,25 @@ const EnhancedCodeBlock = props => {
 	if (replaceThemeConstants && typeof children === 'string') {
 		children = replaceThemeConstantStrings(children, isDarkTheme);
 	}
+	if (replaceTabs && typeof children === 'string') {
+		children = replaceTabsString(children);
+	}
 	children = removeUnwantedLines(children);
 
 	if (chart || hideableCode) {
-		return (
-			<>
-				{hideableCode && <>
-					<input
-						id={uniqueId}
-						type="checkbox"
-						className="toggle-hidden-lines"
-					/>
-					<label className="toggle-label" htmlFor={uniqueId}>Show all code</label></>}
-				{!chartOnly && <CodeBlock {...rest}>{children}</CodeBlock>}
-				{chart && <BrowserOnly fallback={<div className={styles.iframe}>&nbsp;</div>}>{() => <Chart script={children} iframeStyle={iframeStyle} />}</BrowserOnly>}
-			</>
-		);
+		const codeBlockSection = !chartOnly && <CodeBlock {...rest}>{children}</CodeBlock>;
+		const chartSection = chart && <BrowserOnly fallback={<div className={styles.iframe}>&nbsp;</div>}>{() => <Chart script={children} iframeStyle={iframeStyle} />}</BrowserOnly>;
+		const hideCodeToggle = (hideableCode && <>
+			<input
+				id={uniqueId}
+				type="checkbox"
+				className="toggle-hidden-lines"
+			/>
+			<label className="toggle-label" htmlFor={uniqueId}>Show all code</label></>);
+		if (chartOnTop) {
+			return <>{chartSection}{codeUsage}{hideCodeToggle}{codeBlockSection}</>;
+		}
+		return <>{codeUsage}{hideCodeToggle}{codeBlockSection}{chartSection}</>;
 	}
 
 	return <CodeBlock {...rest}>{children}</CodeBlock>;

website/sidebars-tutorials.js

@@ -41,13 +41,21 @@ const sidebars = {
 			],
 		},
 		{
-			'How To / Examples': [
+			'How To': [
 				{
 					type: 'autogenerated',
 					dirName: 'how_to',
 				},
 			],
 		},
+		{
+			'Examples / Demos': [
+				{
+					type: 'autogenerated',
+					dirName: 'demos',
+				},
+			],
+		},
 	],
 };