fix(react-components): remove data points after a threshold

packages/react-components/src/components/chart/baseChart.tsx

@@ -23,7 +23,7 @@ import { MultiYAxisLegend } from './multiYAxis/multiYAxis';
 import './chart.css';
 import { useContextMenu } from './contextMenu/useContextMenu';
 import { useViewportToMS } from './hooks/useViewportToMS';
-import { DEFAULT_CHART_VISUALIZATION, DEFAULT_TOOLBOX_CONFIG } from './eChartsConstants';
+import { DEFAULT_CHART_VISUALIZATION, DEFAULT_TOOLBOX_CONFIG, PERFORMANCE_MODE_THRESHOLD } from './eChartsConstants';
 import { useDataZoom } from './hooks/useDataZoom';
 import { useViewport } from '../../hooks/useViewport';
 import { getXAxis } from './chartOptions/axes/xAxis';
@@ -59,6 +59,7 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
     dataStreams,
     thresholds: queryThresholds,
     utilizedViewport,
+    visibleData,
   } = useVisualizedDataStreams(queries, viewport);
   const allThresholds = [...queryThresholds, ...(options.thresholds ?? [])];
 
@@ -85,11 +86,13 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
   // calculate style settings for all datastreams
   const [styleSettingsMap] = useChartStyleSettings(dataStreams, options);
 
+  const performanceMode = visibleData.length > PERFORMANCE_MODE_THRESHOLD;
   // adapt datastreams into echarts series and yAxis data
   const { series, yAxis } = useSeriesAndYAxis(dataStreams, {
     styleSettings: styleSettingsMap,
     axis: options.axis,
     thresholds: allThresholds,
+    performanceMode,
   });
 
   const { handleContextMenu, showContextMenu, contextMenuPos, setShowContextMenu } = useContextMenu();

packages/react-components/src/components/chart/chartOptions/seriesAndYAxis/convertSeriesAndYAxis.ts

@@ -58,19 +58,22 @@ const convertSeries = (
     lineThickness,
     emphasis,
     significantDigits,
-  }: ChartStyleSettingsWithDefaults
+  }: ChartStyleSettingsWithDefaults,
+  { performanceMode }: { performanceMode?: boolean }
 ) => {
   const opacity = emphasis === 'de-emphasize' ? DEEMPHASIZE_OPACITY : 1;
   const scaledSymbolSize = emphasis === 'emphasize' ? symbolSize + EMPHASIZE_SCALE_CONSTANT : symbolSize;
   const scaledLineThickness = emphasis === 'emphasize' ? lineThickness + EMPHASIZE_SCALE_CONSTANT : lineThickness;
 
+  const symbolStyle = visualizationType !== 'scatter' && performanceMode ? 'none' : symbol;
+
   const genericSeries = {
     id,
     name: name ?? id,
     data: data.map(convertDataPoint),
     type: convertVisualizationType(visualizationType),
     step: convertStep(visualizationType),
-    symbol,
+    symbol: symbolStyle,
     symbolSize: scaledSymbolSize,
     itemStyle: {
       color: symbolColor ?? color,
@@ -114,15 +117,20 @@ const convertYAxis = ({ color, yAxis }: ChartStyleSettingsOptions): YAXisCompone
 /**
  * converts series and yAxis together using the same style settings
  */
-export const convertSeriesAndYAxis = (styles: ChartStyleSettingsWithDefaults) => (datastream: DataStream) => {
-  const series = convertSeries(datastream, styles);
-  const yAxis = convertYAxis(styles);
-
-  return {
-    series,
-    yAxis,
+export const convertSeriesAndYAxis =
+  (
+    styles: ChartStyleSettingsWithDefaults,
+    { performanceMode }: { performanceMode?: boolean } = { performanceMode: false }
+  ) =>
+  (datastream: DataStream) => {
+    const series = convertSeries(datastream, styles, { performanceMode });
+    const yAxis = convertYAxis(styles);
+
+    return {
+      series,
+      yAxis,
+    };
   };
-};
 
 const addYAxisIndex = <T extends SeriesOption>(series: T, yAxisIndex = 0): T => ({
   ...series,
@@ -176,14 +184,15 @@ export const useSeriesAndYAxis = (
     styleSettings,
     axis,
     thresholds,
-  }: { styleSettings: StyleSettingsMap; thresholds: Threshold[]; axis?: ChartAxisOptions }
+    performanceMode,
+  }: { styleSettings: StyleSettingsMap; thresholds: Threshold[]; axis?: ChartAxisOptions; performanceMode?: boolean }
 ) => {
   const defaultYAxis: YAXisComponentOption[] = [convertChartYAxis(axis)];
   const convertedThresholds = convertThresholds(thresholds);
   const getStyles = getChartStyleSettingsFromMap(styleSettings);
 
   const { series, yAxis } = datastreams
-    .map((datastream) => convertSeriesAndYAxis(getStyles(datastream))(datastream))
+    .map((datastream) => convertSeriesAndYAxis(getStyles(datastream), { performanceMode })(datastream))
     .reduce(reduceSeriesAndYAxis, { series: [], yAxis: defaultYAxis });
 
   if (series.length > 0) {

packages/react-components/src/components/chart/eChartsConstants.ts

@@ -91,3 +91,5 @@ export const ECHARTS_ZOOM_DEBOUNCE_MS = 300;
 
 // legend constants
 export const LEGEND_NAME_MIN_WIDTH_FACTOR = 3.5;
+
+export const PERFORMANCE_MODE_THRESHOLD = 4000;

packages/react-components/src/components/chart/hooks/useVisualizedDataStreams.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { DataStream, TimeSeriesDataQuery, Viewport } from '@iot-app-kit/core';
+import { DataStream, TimeSeriesDataQuery, Viewport, getVisibleData } from '@iot-app-kit/core';
 import { useTimeSeriesData } from '../../../hooks/useTimeSeriesData';
 import { useViewport } from '../../../hooks/useViewport';
 import { DEFAULT_VIEWPORT, StreamType } from '../../../common/constants';
@@ -32,11 +32,14 @@ export const useVisualizedDataStreams = (queries: TimeSeriesDataQuery[], passedI
     [hasError, dataStreamsWithoutAlarms]
   );
 
+  const visibleData = dataStreamsWithoutAlarms.flatMap(({ data }) => getVisibleData(data, utilizedViewport, false));
+
   return {
     hasError,
     isLoading,
     dataStreams: dataStreamsWithoutAlarms,
     thresholds,
     utilizedViewport,
+    visibleData,
   };
 };