feat(dashboard): assign default color based on cloudscape design

packages/core-util/src/index.ts

@@ -1,2 +1,4 @@
 export { getSiteWiseClient } from './sdks/sitewise';
 export { getIotEventsClient } from './sdks/events';
+export { colorPalette } from './sdks/colorPalette';
+export { assignDefaultColor } from './sdks/assignDefaultColors';

packages/core-util/src/sdks/assignDefaultColors.ts

@@ -0,0 +1,11 @@
+import { colorPalette } from './colorPalette';
+
+export const assignDefaultColor: <T extends { color?: string }>(colorableItem: T, colorIndexOffset?: number) => T = (
+  colorableItem,
+  colorIndexOffset = 0
+) => {
+  return {
+    ...colorableItem,
+    color: colorableItem.color || colorPalette[colorIndexOffset % colorPalette.length],
+  };
+};

packages/core-util/src/sdks/colorPalette.ts

@@ -0,0 +1,19 @@
+// color palette copied from https://cloudscape.design/foundation/visual-foundation/data-vis-colors/
+export const colorPalette = [
+  '#688ae8',
+  '#c33d69',
+  '#2ea597',
+  '#8456ce',
+  '#e07941',
+  '#3759ce',
+  '#962249',
+  '#096f64',
+  '#6237a7',
+  '#a84401',
+  '#273ea5',
+  '#780d35',
+  '#03524a',
+  '#4a238b',
+  '#7e3103',
+  '#1b2b88',
+];

packages/dashboard/src/customization/widgets/utils/assignDefaultStyleSettings.ts

@@ -1,14 +1,15 @@
-import { colorPalette } from '~/util/colorPalette';
 import type { StyleSettingsMap } from '@iot-app-kit/core';
 import type { SiteWiseAssetQuery } from '@iot-app-kit/source-iotsitewise';
+import { v4 as uuid } from 'uuid';
 import type { QueryWidget } from '../types';
+import { assignDefaultColor } from '@iot-app-kit/core-util';
 
-const assignDefaultRefId = (siteWiseAssetQuery: SiteWiseAssetQuery) => ({
+const assignDefaultRefId = (siteWiseAssetQuery: SiteWiseAssetQuery, getId: () => string = uuid) => ({
   assets: siteWiseAssetQuery.assets.map(({ properties, ...others }) => ({
     ...others,
     properties: properties.map((propertyQuery) => ({
       ...propertyQuery,
-      refId: propertyQuery.refId || propertyQuery.propertyId,
+      refId: propertyQuery.refId || getId(),
     })),
   })),
 });
@@ -17,17 +18,20 @@ const assignDefaultColors = (
   styleSettings: StyleSettingsMap,
   siteWiseAssetQuery: SiteWiseAssetQuery,
   colorIndexOffset = 0
-): StyleSettingsMap =>
-  siteWiseAssetQuery.assets.reduce((acc, n) => {
-    n.properties.forEach(({ refId }, index) => {
-      if (refId && !styleSettings[refId]) {
-        acc[refId] = {
-          color: colorPalette[index + (colorIndexOffset % colorPalette.length)],
-        };
-      }
-    });
+): StyleSettingsMap => {
+  const properties = siteWiseAssetQuery.assets.flatMap((asset) =>
+    asset.properties.map(({ refId }) => ({
+      refId,
+    }))
+  );
+
+  return properties.reduce((acc: StyleSettingsMap, { refId }, index) => {
+    if (refId && !styleSettings[refId]) {
+      acc[refId] = assignDefaultColor({}, index + colorIndexOffset);
+    }
     return acc;
-  }, {} as StyleSettingsMap);
+  }, {});
+};
 
 export const assignDefaultStyles = (widget: QueryWidget): QueryWidget => {
   const siteWiseAssetQuery = widget.properties.queryConfig.query;

packages/react-components/src/hooks/utils/bindStylesToDataStreams.spec.ts

@@ -1,7 +1,7 @@
-import { it, expect } from '@jest/globals';
+import { expect, it } from '@jest/globals';
 import { bindStylesToDataStreams } from './bindStylesToDataStreams';
-import { colorPalette } from './colorPalette';
 import type { DataStream } from '@iot-app-kit/core';
+import { colorPalette } from '@iot-app-kit/core-util';
 
 export const DATA_STREAM: DataStream = {
   id: 'some-id',

packages/react-components/src/hooks/utils/bindStylesToDataStreams.ts

@@ -1,5 +1,5 @@
-import { colorPalette } from './colorPalette';
-import type { StyleSettingsMap, DataStream } from '@iot-app-kit/core';
+import { assignDefaultColor as assignColor } from '@iot-app-kit/core-util';
+import type { DataStream, StyleSettingsMap } from '@iot-app-kit/core';
 
 const assignDefaultColor = ({
   dataStream,
@@ -15,10 +15,7 @@ const assignDefaultColor = ({
 
   // Only provide default if one is not already present in the data stream, and none is specified in the associated style settings.
   if (dataStream.color == null && !hasAssociatedColor) {
-    return {
-      ...dataStream,
-      color: colorPalette[index % colorPalette.length],
-    };
+    return assignColor(dataStream, index);
   }
   return dataStream;
 };