Merge pull request #1551 from tradingview/add-more-examples-and-demos

Move demo examples from JSfiddle onto documentation site

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

@@ -33,7 +33,7 @@ export function removeUnwantedLines(originalString) {
 }
 
 const EnhancedCodeBlock = props => {
-	const { chart, replaceThemeConstants, hideableCode, chartOnly, iframeStyle, replaceTabs = true, ...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';
@@ -48,19 +48,19 @@ const EnhancedCodeBlock = props => {
 	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',
+				},
+			],
+		},
 	],
 };
 

website/theme-colors.js

@@ -3,6 +3,10 @@ export const themeColors = {
 		CHART_BACKGROUND_COLOR: 'black',
 		CHART_BACKGROUND_RGB_COLOR: '0, 0, 0',
 		LINE_LINE_COLOR: '#2962FF',
+		LINE_LINE2_COLOR: 'rgb(225, 87, 90)',
+		LINE_LINE3_COLOR: 'rgb(242, 142, 44)',
+		LINE_LINE4_COLOR: 'rgb(164, 89, 209)',
+		LINE_LINE5_COLOR: 'rgb(27, 156, 133)',
 		AREA_TOP_COLOR: '#2962FF',
 		AREA_BOTTOM_COLOR: 'rgba(41, 98, 255, 0.28)',
 		BAR_UP_COLOR: '#26a69a',
@@ -20,6 +24,10 @@ export const themeColors = {
 		CHART_BACKGROUND_COLOR: 'white',
 		CHART_BACKGROUND_RGB_COLOR: '255, 255, 255',
 		LINE_LINE_COLOR: '#2962FF',
+		LINE_LINE2_COLOR: 'rgb(225, 87, 90)',
+		LINE_LINE3_COLOR: 'rgb(242, 142, 44)',
+		LINE_LINE4_COLOR: 'rgb(164, 89, 209)',
+		LINE_LINE5_COLOR: 'rgb(27, 156, 133)',
 		AREA_TOP_COLOR: '#2962FF',
 		AREA_BOTTOM_COLOR: 'rgba(41, 98, 255, 0.28)',
 		BAR_UP_COLOR: '#26a69a',

website/tutorials/demos/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	globals: {
+		document: false,
+		createChart: false,
+	},
+};

website/tutorials/demos/compare-multiple-series.js

@@ -0,0 +1,57 @@
+// remove-start
+// Lightweight Charts™ Example: Compare multiple series
+// https://tradingview.github.io/lightweight-charts/tutorials/how_to/compare-multiple-series
+
+// remove-end
+// hide-start
+let randomFactor = 25 + Math.random() * 25;
+const samplePoint = i =>
+	i *
+		(0.5 +
+			Math.sin(i / 10) * 0.2 +
+			Math.sin(i / 20) * 0.4 +
+			Math.sin(i / randomFactor) * 0.8 +
+			Math.sin(i / 500) * 0.5) +
+	200;
+
+function generateLineData(numberOfPoints = 500) {
+	randomFactor = 25 + Math.random() * 25;
+	const res = [];
+	const date = new Date(Date.UTC(2018, 0, 1, 12, 0, 0, 0));
+	for (let i = 0; i < numberOfPoints; ++i) {
+		const time = (date.getTime() / 1000);
+		const value = samplePoint(i);
+		res.push({
+			time,
+			value,
+		});
+
+		date.setUTCDate(date.getUTCDate() + 1);
+	}
+
+	return res;
+}
+// hide-end
+const chartOptions = {
+	layout: {
+		textColor: CHART_TEXT_COLOR,
+		background: { type: 'solid', color: CHART_BACKGROUND_COLOR },
+	},
+};
+// remove-line
+/** @type {import('lightweight-charts').IChartApi} */
+const chart = createChart(document.getElementById('container'), chartOptions);
+
+const lineSeriesOne = chart.addLineSeries({ color: LINE_LINE_COLOR });
+const lineSeriesTwo = chart.addLineSeries({ color: LINE_LINE2_COLOR });
+const lineSeriesThree = chart.addLineSeries({ color: LINE_LINE3_COLOR });
+
+const lineSeriesOneData = generateLineData();
+const lineSeriesTwoData = generateLineData();
+const lineSeriesThreeData = generateLineData();
+
+lineSeriesOne.setData(lineSeriesOneData);
+lineSeriesTwo.setData(lineSeriesTwoData);
+lineSeriesThree.setData(lineSeriesThreeData);
+
+chart.timeScale().fitContent();

website/tutorials/demos/compare-multiple-series.mdx

@@ -0,0 +1,34 @@
+---
+title: Compare multiple series
+sidebar_label: Compare multiple series
+description:
+  An example of how to compare multiple series on a single price scale
+pagination_prev: null
+pagination_next: null
+keywords:
+  - compare
+  - series
+---
+
+This Multi-Series Comparison Example illustrates how an assortment of data
+series can be integrated into a single chart for comparisons. Simply use the
+charting API to create multiple series (such as `addLineSeries`).
+
+If you would like an unique price scales for each individual series,
+particularly when dealing with data series with divergent value ranges, then
+take a look at the [Two Price Scales Example](../how_to/two-price-scales.mdx).
+
+import UsageGuidePartial from '../_usage-guide-partial.mdx';
+import CodeBlock from '@theme/CodeBlock';
+import code from '!!raw-loader!./compare-multiple-series.js';
+
+<CodeBlock
+  replaceThemeConstants
+  chart
+  className="language-js"
+  hideableCode
+  chartOnTop
+  codeUsage={<UsageGuidePartial />}
+>
+	{code}
+</CodeBlock>