fix(react-component): updating the calculateTimeStamp method to use

echarts's for obtaining timestamp of click

packages/dashboard/src/customization/widgets/barChart/component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { BarChart } from '@iot-app-kit/react-components';
+import { BarChart, Chart, getConfigValue } from '@iot-app-kit/react-components';
 
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
@@ -16,6 +16,7 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
   const chartSize = useChartSize(widget);
+  const showEcharts = getConfigValue('useEcharts');
 
   const {
     queryConfig,
@@ -33,6 +34,27 @@ const BarChartWidgetComponent: React.FC<BarChartWidget> = (widget) => {
   const aggregation = getAggregation(queryConfig);
 
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
+  const grid = useSelector((state: DashboardState) => state.grid);
+  const size = { width: grid.cellSize * widget.width, height: grid.cellSize * widget.height };
+
+  if (showEcharts) {
+    return (
+      <Chart
+        defaultVisualizationType='bar'
+        key={key}
+        queries={queries}
+        viewport={viewport}
+        gestures={readOnly}
+        axis={axis}
+        aggregationType={aggregateToString(aggregation)}
+        styleSettings={styleSettings}
+        thresholds={thresholds}
+        thresholdSettings={thresholdSettings}
+        significantDigits={significantDigits}
+        size={size}
+      />
+    );
+  }
 
   return (
     <BarChart

packages/dashboard/src/customization/widgets/scatterChart/component.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { ScatterChart } from '@iot-app-kit/react-components';
+import { Chart, getConfigValue, ScatterChart } from '@iot-app-kit/react-components';
 
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
@@ -16,7 +16,7 @@ const ScatterChartWidgetComponent: React.FC<ScatterChartWidget> = (widget) => {
   const readOnly = useSelector((state: DashboardState) => state.readOnly);
   const dashboardSignificantDigits = useSelector((state: DashboardState) => state.significantDigits);
   const chartSize = useChartSize(widget);
-
+  const showEcharts = getConfigValue('useEcharts');
   const {
     queryConfig,
     styleSettings,
@@ -32,7 +32,27 @@ const ScatterChartWidgetComponent: React.FC<ScatterChartWidget> = (widget) => {
   const aggregation = getAggregation(queryConfig);
 
   const significantDigits = widgetSignificantDigits ?? dashboardSignificantDigits;
+  const grid = useSelector((state: DashboardState) => state.grid);
+  const size = { width: grid.cellSize * widget.width, height: grid.cellSize * widget.height };
 
+  if (showEcharts) {
+    return (
+      <Chart
+        defaultVisualizationType='bar'
+        key={key}
+        queries={queries}
+        viewport={viewport}
+        gestures={readOnly}
+        axis={axis}
+        aggregationType={aggregateToString(aggregation)}
+        styleSettings={styleSettings}
+        thresholds={thresholds}
+        thresholdSettings={thresholdSettings}
+        significantDigits={significantDigits}
+        size={size}
+      />
+    );
+  }
   return (
     <ScatterChart
       chartSize={chartSize}

packages/react-components/playwright.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 10000,
-    toMatchSnapshot: { maxDiffPixels: 50 },
+    toMatchSnapshot: { maxDiffPixelRatio: 0.02 },
   },
   /* Run tests in files in parallel */
   fullyParallel: true,

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

@@ -24,6 +24,7 @@ import './chart.css';
 import { useXAxis } from './hooks/useXAxis';
 import { useContextMenu } from './hooks/useContextMenu';
 import { useViewportToMS } from './hooks/useViewportToMS';
+import { DEFAULT_CHART_VISUALIZATION } from './eChartsConstants';
 
 /**
  * Developer Notes:
@@ -83,14 +84,15 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
 
   // this will handle all the Trend Cursors operations
   const { onContextMenuClickHandler, trendCursors, hotKeyHandlers } = useTrendCursors({
-    ref,
+    chartRef,
     initialGraphic: options.graphic,
     size: { width: chartWidth, height },
     series,
     chartId,
     viewportInMs,
     groupId: options.groupId,
     onContextMenu: handleContextMenu,
+    visualization: options.defaultVisualizationType ?? DEFAULT_CHART_VISUALIZATION,
   });
 
   const menuOptionClickHandler = ({ action }: { action: Action; e: React.MouseEvent }) => {

packages/react-components/src/components/chart/converters/convertOptions.ts

@@ -26,10 +26,6 @@ export const convertOptions = (options: ConvertChartOptions): EChartsOption => {
     dataZoom: gestures ? DEFAULT_DATA_ZOOM : undefined,
     legend: convertLegend(legend),
     tooltip: convertTooltip(significantDigits),
-    // TODO: test the below values to have a smooth transition especially with 10 seconds viewport these are placeholder values
-    animationEasing: 'linear',
-    animationEasingUpdate: 'linear',
-    animationDurationUpdate: 1500,
     toolbox: DEFAULT_TOOL_BOX,
   };
 };

packages/react-components/src/components/chart/converters/convertSeriesAndYAxis.ts

@@ -1,11 +1,11 @@
 import { useMemo } from 'react';
 import { DataPoint, DataStream, Threshold } from '@iot-app-kit/core';
-import { SeriesOption, YAXisComponentOption } from 'echarts';
+import { BarSeriesOption, SeriesOption, YAXisComponentOption } from 'echarts';
 
 import maxBy from 'lodash.maxby';
 import minBy from 'lodash.minby';
 
-import { ChartAxisOptions, ChartStyleSettingsOptions, YAxisLegendOption } from '../types';
+import { ChartAxisOptions, ChartStyleSettingsOptions, Visualization, YAxisLegendOption } from '../types';
 import { convertDataPoint } from './convertDataPoint';
 import { StyleSettingsMap, getChartStyleSettingsFromMap } from './convertStyles';
 import { convertYAxis as convertChartYAxis } from './convertAxis';
@@ -32,21 +32,25 @@ const convertStep = (
   visualizationType: Required<Pick<ChartStyleSettingsOptions, 'visualizationType'>>['visualizationType']
 ) => {
   if (!stepTypes.includes(visualizationType)) return false;
-
-  let step;
   switch (visualizationType) {
     case 'step-start':
-      step = 'start';
-      break;
+      return 'start';
     case 'step-end':
-      step = 'end';
-      break;
+      return 'end';
     case 'step-middle':
-      step = 'middle';
-      break;
+      return 'middle';
+    default:
+      return false;
   }
+};
 
-  return step;
+const addVisualizationSpecificOptions = (visualizationType: Visualization, series: SeriesOption) => {
+  switch (visualizationType) {
+    case 'bar':
+      return { ...series, barGap: '0%', barWidth: '10%', barCategoryGap: '0%' } as BarSeriesOption;
+    default:
+      return series;
+  }
 };
 
 const convertSeries = (
@@ -66,7 +70,7 @@ const convertSeries = (
   const scaledSymbolSize = emphasis === 'emphasize' ? symbolSize + EMPHASIZE_SCALE_CONSTANT : symbolSize;
   const scaledLineThickness = emphasis === 'emphasize' ? lineThickness + EMPHASIZE_SCALE_CONSTANT : lineThickness;
 
-  return {
+  const genericSeries = {
     id,
     name: name,
     data: data.map(convertDataPoint),
@@ -85,6 +89,8 @@ const convertSeries = (
       opacity,
     },
   } as SeriesOption;
+
+  return addVisualizationSpecificOptions(visualizationType, genericSeries);
 };
 
 const convertYAxis = ({ color, yAxis }: ChartStyleSettingsOptions): YAXisComponentOption | undefined =>

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

@@ -64,6 +64,10 @@ export const DEFAULT_TOOL_BOX: ToolboxComponentOption = {
   top: 10,
   right: 10,
 };
+
+export const DEFAULT_X_AXIS_ID = 'default-x-Axis';
+
+export const DEFAULT_CHART_VISUALIZATION = 'line' as const;
 // this is the chart live mode refresh rate, this should be inline with the animation props
 // https://echarts.apache.org/en/option.html#animation
 // packages/react-components/src/components/chart/converters , line 30
@@ -85,7 +89,7 @@ export const TREND_CURSOR_HEADER_BACKGROUND_COLOR = 'black';
 export const TREND_CURSOR_CLOSE_BUTTON_Y_OFFSET = TREND_CURSOR_HEADER_OFFSET + 3;
 export const TREND_CURSOR_CLOSE_BUTTON_X_OFFSET = 45;
 
-export const Y_AXIS_INTERPOLATED_VALUE_PRECISION = 2;
+export const DEFAULT_PRECISION = 4;
 export const TREND_CURSOR_MARKER_RADIUS = 5;
 export const TREND_CURSOR_DELETE_BUTTON_HEIGHT = 10;
 

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

@@ -8,14 +8,15 @@ import { handleViewport } from '../utils/handleViewport';
 import { DEBUG_TREND_CURSORS } from '../eChartsConstants';
 
 const useTrendCursors = ({
-  ref,
+  chartRef,
   size,
   series,
   chartId,
   viewportInMs,
   groupId,
   onContextMenu,
   initialGraphic,
+  visualization,
 }: UseTrendCursorsProps) => {
   if (DEBUG_TREND_CURSORS) {
     // for debugging purposes
@@ -28,30 +29,30 @@ const useTrendCursors = ({
 
   // hook for handling all user events
   const { onContextMenuClickHandler } = useTrendCursorsEvents({
-    ref,
+    chartRef,
     graphic,
     size,
     isInCursorAddMode,
     setGraphic,
-    viewportInMs,
     series,
     isInSyncMode,
     groupId,
     onContextMenu,
+    visualization,
   });
 
   // for handling the resize of chart
-  handleResize({ series, size, graphic, setGraphic, viewportInMs, ref });
+  handleResize({ series, size, graphic, setGraphic, chartRef, visualization });
 
   // handling the trend cursor sync mode
-  handleSync({ ref, isInSyncMode, graphic, setGraphic, viewportInMs, series, size, groupId });
+  handleSync({ chartRef, isInSyncMode, graphic, setGraphic, series, size, groupId, visualization });
 
   const hotKeyHandlers = {
     commandDown: () => setIsInCursorAddMode(true),
     commandUp: () => setIsInCursorAddMode(false),
   };
 
-  handleViewport({ graphic, setGraphic, viewportInMs, size });
+  handleViewport({ graphic, setGraphic, viewportInMs, size, series, chartRef, visualization });
 
   return { onContextMenuClickHandler, hotKeyHandlers, trendCursors: graphic };
 };