Fixed setting empty data to series (#267)

src/api/chart-api.ts

@@ -194,7 +194,7 @@ export class ChartApi implements IChartApi, DataUpdatesConsumer<SeriesType> {
 		const timeScaleUpdate = update.timeScaleUpdate;
 		model.updateTimeScale(timeScaleUpdate.index, timeScaleUpdate.changes, timeScaleUpdate.marks, true);
 		timeScaleUpdate.seriesUpdates.forEach((value: SeriesUpdatePacket, key: Series) => {
-			key.setData(value.update);
+			key.updateData(value.update);
 		});
 		model.updateTimeScaleBaseIndex(0 as TimePointIndex);
 		this._seriesMap.delete(seriesObj);
@@ -207,7 +207,7 @@ export class ChartApi implements IChartApi, DataUpdatesConsumer<SeriesType> {
 		const timeScaleUpdate = update.timeScaleUpdate;
 		model.updateTimeScale(timeScaleUpdate.index, timeScaleUpdate.changes, timeScaleUpdate.marks, true);
 		timeScaleUpdate.seriesUpdates.forEach((value: SeriesUpdatePacket, key: Series) => {
-			key.setData(value.update);
+			key.updateData(value.update);
 		});
 		model.updateTimeScaleBaseIndex(0 as TimePointIndex);
 	}

src/api/data-layer.ts

@@ -258,8 +258,8 @@ export class DataLayer {
 	}
 
 	public setSeriesData<TSeriesType extends SeriesType>(series: Series<TSeriesType>, data: SeriesDataItemTypeMap[TSeriesType][]): UpdatePacket {
-		// palette will be filled inside _setNewPoints
-		series.palette().clear();
+		series.clearData();
+
 		convertStringsToBusinessDays(data);
 		this._pointDataByTimePoint.forEach((value: TimePointData) => value.mapping.delete(series));
 		const timeConverter = selectTimeConverter(data);

src/model/series.ts

@@ -243,16 +243,23 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		this.model().updateSource(this);
 	}
 
-	public setData(data: ReadonlyArray<PlotRow<Bar['time'], Bar['value']>>): void {
+	public clearData(): void {
 		this._data.clear();
+		this._palette.clear();
+
+		// we must either re-create pane view on clear data
+		// or clear all caches inside pane views
+		// but currently we can't separate update/append last bar and full data replacement (update vs setData) in pane views invalidation
+		// so let's just re-create all views
+		this._recreatePaneViews();
+	}
+
+	public updateData(data: ReadonlyArray<PlotRow<Bar['time'], Bar['value']>>): void {
 		this._data.bars().merge(data);
 		this._recalculateMarkers();
 
-		// we must either re-create pane view on full data replacement
-		// or clear all caches inside pane view
-		// but currently we can't separate update/append last bar and full data replacement (update vs setData)
-		// so let's re-create all views
-		this._recreatePaneViews();
+		this._paneView.update('data');
+		this._markersPaneView.update('data');
 
 		const sourcePane = this.model().paneForSource(this);
 		this.model().recalculatePane(sourcePane);
@@ -294,20 +301,6 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		}
 	}
 
-	public updateData(data: ReadonlyArray<PlotRow<Bar['time'], Bar['value']>>): void {
-		this._data.bars().merge(data);
-		this._recalculateMarkers();
-
-		this._paneView.update('data');
-		this._markersPaneView.update('data');
-
-		const sourcePane = this.model().paneForSource(this);
-		this.model().recalculatePane(sourcePane);
-		this.model().updateSource(this);
-		this.model().updateCrosshair();
-		this.model().lightUpdate();
-	}
-
 	public palette(): Palette {
 		return this._palette;
 	}

tests/e2e/graphics/test-cases/series/set-empty-data-to-histogram.js

@@ -0,0 +1,41 @@
+function generateData() {
+	var res = [];
+	var time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (var i = 0; i < 30; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function generateColoredData() {
+	var data = generateData();
+	data.forEach((item, index) => {
+		item.color = index % 2 === 0 ? 'rgba(0, 150, 136, 0.8)' : 'rgba(255,82,82, 0.8)';
+	});
+
+	return data;
+}
+
+// eslint-disable-next-line no-unused-vars
+function runTestCase(container) {
+	var chart = LightweightCharts.createChart(container);
+
+	var areaSeries = chart.addAreaSeries();
+	var volumeSeries = chart.addHistogramSeries();
+
+	areaSeries.setData(generateData());
+
+	volumeSeries.setData(generateColoredData());
+
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			volumeSeries.setData([]);
+			resolve();
+		}, 1000);
+	});
+}

tests/unittests/data-layer.spec.ts

@@ -19,6 +19,7 @@ function createSeriesMock<T extends SeriesType = 'Line'>(seriesType?: T): Series
 		data: () => data,
 		palette: () => new Palette(),
 		seriesType: () => seriesType || 'Line',
+		clearData: () => data.clear(),
 	} as Series<T>;
 }