fix(react-components): fix binding styles in useTimeSeriesData hook

awslabs · Mar 28, 2023 · c1c0125 · c1c0125
1 parent 42f8896
commit c1c0125
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.spec.ts b/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.spec.ts
@@ -175,3 +175,26 @@ it('returns thresholds from time series data provider', () => {
 
   expect(timeSeriesData.thresholds).toEqual([THRESHOLD]);
 });
+
+it('update datastream styles when styles change', () => {
+  const DATA_STREAM: DataStream = { refId: 'ref-id', id: 'abc', data: [], resolution: 0, name: 'my-name' };
+  const TIME_SERIES_DATA: TimeSeriesData = {
+    dataStreams: [DATA_STREAM],
+    viewport: { duration: '5m' },
+    annotations: {},
+  };
+
+  const queries = [mockTimeSeriesDataQuery([TIME_SERIES_DATA])];
+  let styles = { 'ref-id': { color: 'red' } };
+  const { rerender, result } = renderHook(() =>
+    useTimeSeriesData({
+      queries,
+      viewport: { duration: '5m' },
+      styles,
+    })
+  );
+  styles = { 'ref-id': { color: 'green' } };
+  rerender();
+
+  expect(result.current.dataStreams[0]).toEqual(expect.objectContaining({ color: 'green' }));
+});
diff --git a/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts b/packages/react-components/src/hooks/useTimeSeriesData/useTimeSeriesData.ts
@@ -61,13 +61,8 @@ export const useTimeSeriesData = ({
           const timeSeriesData = combineTimeSeriesData(timeSeriesDataCollection, viewport);
 
           setTimeSeriesData({
+            ...timeSeriesData,
             viewport,
-            annotations: timeSeriesData.annotations,
-            dataStreams: bindStylesToDataStreams({
-              dataStreams: timeSeriesData.dataStreams,
-              styleSettings: styles,
-              assignDefaultColors: false,
-            }),
           });
         },
       });
@@ -94,5 +89,11 @@ export const useTimeSeriesData = ({
     prevViewport.current = viewport;
   }, [viewport]);
 
-  return { dataStreams: timeSeriesData?.dataStreams || [], thresholds: getThresholds(timeSeriesData?.annotations) };
+  const styledDataStreams = bindStylesToDataStreams({
+    dataStreams: timeSeriesData?.dataStreams || [],
+    styleSettings: styles,
+    assignDefaultColors: false,
+  });
+
+  return { dataStreams: styledDataStreams, thresholds: getThresholds(timeSeriesData?.annotations) };
 };