Update framework tutorials for v5

tradingview · Jan 30, 2025 · 49a7e0a · 49a7e0a
1 parent 146da59
commit 49a7e0a
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 310 deletions.
diff --git a/website/tutorials/vuejs/assets/composition-api.vue b/website/tutorials/vuejs/assets/composition-api.vue
@@ -7,7 +7,15 @@ import {
 	defineExpose,
 	defineProps,
 } from 'vue';
-import { createChart } from 'lightweight-charts';
+import {
+	createChart,
+	LineSeries,
+	AreaSeries,
+	BarSeries,
+	CandlestickSeries,
+	HistogramSeries,
+	BaselineSeries,
+} from 'lightweight-charts';
 
 const props = defineProps({
 	type: {
@@ -36,9 +44,22 @@ const props = defineProps({
 	},
 });
 
-// Function to get the correct series constructor name for current series type.
-function getChartSeriesConstructorName(type) {
-	return `add${type.charAt(0).toUpperCase() + type.slice(1)}Series`;
+function getChartSeriesDefinition(type) {
+	switch (type.toLowerCase()) {
+		case 'line':
+			return LineSeries;
+		case 'area':
+			return AreaSeries;
+		case 'bar':
+			return BarSeries;
+		case 'candlestick':
+			return CandlestickSeries;
+		case 'histogram':
+			return HistogramSeries;
+		case 'baseline':
+			return BaselineSeries;
+	}
+	return LineSeries;
 }
 
 // Lightweight Charts™ instances are stored as normal JS variables
@@ -68,8 +89,8 @@ const resizeHandler = () => {
 
 // Creates the chart series and sets the data.
 const addSeriesAndData = props => {
-	const seriesConstructor = getChartSeriesConstructorName(props.type);
-	series = chart[seriesConstructor](props.seriesOptions);
+	const seriesDefinition = getChartSeriesDefinition(props.type);
+	series = chart.addSeries(seriesDefinition, props.seriesOptions);
 	series.setData(props.data);
 };
 

diff --git a/website/tutorials/vuejs/assets/options-api.vue b/website/tutorials/vuejs/assets/options-api.vue
@@ -1,20 +1,41 @@
 <script>
-import { createChart } from 'lightweight-charts';
+import {
+	createChart,
+	LineSeries,
+	AreaSeries,
+	BarSeries,
+	CandlestickSeries,
+	HistogramSeries,
+	BaselineSeries,
+} from 'lightweight-charts';
 
 // Lightweight Chart instances are stored as normal JS variables
 // If you need to use a ref then it is recommended that you use `shallowRef` instead
 let series;
 let chart;
 
-// Function to get the correct series constructor name for current series type.
-function getChartSeriesConstructorName(type) {
-	return `add${type.charAt(0).toUpperCase() + type.slice(1)}Series`;
+function getChartSeriesDefinition(type) {
+	switch (type.toLowerCase()) {
+		case 'line':
+			return LineSeries;
+		case 'area':
+			return AreaSeries;
+		case 'bar':
+			return BarSeries;
+		case 'candlestick':
+			return CandlestickSeries;
+		case 'histogram':
+			return HistogramSeries;
+		case 'baseline':
+			return BaselineSeries;
+	}
+	return LineSeries;
 }
 
 // Creates the chart series and sets the data.
 const addSeriesAndData = (type, seriesOptions, data) => {
-	const seriesConstructor = getChartSeriesConstructorName(type);
-	series = chart[seriesConstructor](seriesOptions);
+	const seriesDefinition = getChartSeriesDefinition(type);
+	series = chart.addSeries(seriesDefinition, seriesOptions);
 	series.setData(data);
 };
 

diff --git a/website/tutorials/vuejs/assets/web-component.js b/website/tutorials/vuejs/assets/web-component.js
@@ -6,18 +6,41 @@
  * chart colours as required.
  */
 import { defineCustomElement } from 'vue/dist/vue.esm-bundler';
-import { createChart, ColorType } from 'lightweight-charts';
+import {
+	createChart,
+	ColorType,
+	LineSeries,
+	AreaSeries,
+	BarSeries,
+	CandlestickSeries,
+	HistogramSeries,
+	BaselineSeries,
+} from 'lightweight-charts';
 import { themeColors } from '../../../theme-colors';
 
 let series;
 let chart;
 
-function getChartSeriesConstructorName(type) {
-	return `add${type.charAt(0).toUpperCase() + type.slice(1)}Series`;
+function getChartSeriesDefinition(type) {
+	switch (type) {
+		case 'line':
+			return LineSeries;
+		case 'area':
+			return AreaSeries;
+		case 'candlestick':
+			return CandlestickSeries;
+		case 'baseline':
+			return BaselineSeries;
+		case 'bar':
+			return BarSeries;
+		case 'histogram':
+			return HistogramSeries;
+	}
+	throw new Error(`${type} is an unsupported series type`);
 }
 
 const addSeriesAndData = (type, seriesOptions, data) => {
-	series = chart[getChartSeriesConstructorName(type)](seriesOptions);
+	series = chart.addSeries(getChartSeriesDefinition(type), seriesOptions);
 	series.setData(data);
 };