feat(time-sync): useViewport returns a group

docs/useViewport.md

@@ -60,3 +60,6 @@ Type: Object or undefined
 
 A function which you pass a viewport to set the current viewport group to. When called, the viewport group will update and all consumers of the viewport group will immediately receive the updated viewport provided.
 
+### `group: string`
+
+An identifier representing the viewport shared amongst widget in the same TimeSync group. It is equal to the group passed into the parent TimeSync component (if provided) or will be a random UUID assigned by the TimeSync component.

packages/react-components/src/components/time-sync/index.tsx

@@ -7,10 +7,12 @@ import type { Viewport } from '@iot-app-kit/core';
 export interface IViewportContext {
   viewport?: Viewport;
   setViewport(viewport: Viewport): void;
+  group: string;
 }
 
 export const ViewportContext = createContext<IViewportContext>({
   setViewport: () => {},
+  group: uuid(),
 });
 
 export interface TimeSyncProps {
@@ -55,6 +57,7 @@ export const TimeSync: React.FC<TimeSyncProps> = ({ group, initialViewport, chil
       value={{
         setViewport: updateViewportGroup,
         viewport,
+        group: group || autoGeneratedGroup.current,
       }}
     >
       {children}

packages/react-components/src/components/time-sync/time-sync.spec.tsx

@@ -83,3 +83,33 @@ it('provides viewport through useViewport', () => {
 
   expect(screen.queryByText(JSON.stringify(viewport))).not.toBeNull();
 });
+
+it('provides given viewport group name', () => {
+  const GROUP = 'some-group';
+
+  const ViewportUser = () => {
+    const { group } = useViewport();
+    expect(group).toBe(GROUP);
+    return <>{group}</>;
+  };
+
+  render(
+    <TimeSync group={GROUP}>
+      <ViewportUser />
+    </TimeSync>
+  );
+});
+
+it('provides autogenerated viewport group name', () => {
+  const ViewportUser = () => {
+    const { group } = useViewport();
+    expect(group).toBeString();
+    return <>{group}</>;
+  };
+
+  render(
+    <TimeSync>
+      <ViewportUser />
+    </TimeSync>
+  );
+});

packages/react-components/stories/chart/chart.stories.tsx

@@ -2,7 +2,26 @@ import React from 'react';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { MOCK_TIME_SERIES_DATA_QUERY, MOCK_TIME_SERIES_DATA_AGGREGATED_QUERY, VIEWPORT } from './mock-data';
 // Should be part of the public API, i.e. exported from src
-import { LineChart, ScatterChart, BarChart, StatusTimeline, WebglContext } from '../../src';
+import { LineChart, ScatterChart, BarChart, StatusTimeline, WebglContext, TimeSync, useViewport } from '../../src';
+
+const ViewportConsumer = () => {
+  const { viewport, setViewport } = useViewport();
+
+  const chooseRandomViewport = () => {
+    setViewport({
+      start: new Date(new Date(1900, 0, 0).getTime() + 1000000000000 * Math.random()),
+      end: new Date(new Date(2000, 0, 0).getTime() + 1000000000000 * Math.random()),
+    });
+  };
+
+  return (
+    <div>
+      Current viewport:
+      <code>{JSON.stringify(viewport)}</code>
+      <button onClick={chooseRandomViewport}>Choose random viewport</button>
+    </div>
+  );
+};
 
 export default {
   title: 'Widgets/Charts',
@@ -24,6 +43,19 @@ export const LineChartExample: ComponentStory<typeof LineChart> = () => {
   );
 };
 
+export const MultipleLineChartExample: ComponentStory<typeof LineChart> = () => {
+  return (
+    <div id='story-container' style={{ width: '500px', height: '300px' }}>
+      <TimeSync>
+        <LineChart queries={[MOCK_TIME_SERIES_DATA_QUERY]} />
+        <LineChart queries={[MOCK_TIME_SERIES_DATA_QUERY]} />
+        <ViewportConsumer />
+      </TimeSync>
+      <WebglContext />
+    </div>
+  );
+};
+
 export const ScatterChartExample: ComponentStory<typeof ScatterChart> = () => {
   return (
     <div id='story-container' style={{ width: '500px', height: '300px' }}>