feat: display assetname conditionally in legend #2277

packages/core/src/data-module/types.ts

@@ -106,6 +106,7 @@ export interface DataStream<T extends Primitive = Primitive>
   isLoading?: boolean;
   isRefreshing?: boolean;
   numOutgoingRequests?: number;
+  assetName?: string;
 }
 
 export type DataSource<Query extends DataStreamQuery = AnyDataStreamQuery> = {

packages/dashboard/src/customization/propertiesSections/constants.ts

@@ -75,6 +75,7 @@ export const dropdownConsts = {
   legendDisplaySection: {
     legendDisplaylist: [
       { label: 'Unit', value: 'unit' },
+      { label: 'Asset Name', value: 'asset' },
       { label: 'Maximum Value', value: 'maxValue' },
       { label: 'Minimum Value', value: 'minValue' },
       { label: 'Latest Value', value: 'latestValue' },

packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts

@@ -46,7 +46,17 @@ const useTitle = ({
 
 const toDataStreamIdentifiers = (dataStreams: DataStream[]) =>
   dataStreams.map(
-    ({ id, name, color, refId, dataType, detailedName, unit, data }) => ({
+    ({
+      id,
+      name,
+      color,
+      refId,
+      dataType,
+      detailedName,
+      unit,
+      data,
+      assetName,
+    }) => ({
       id,
       name,
       color,
@@ -55,6 +65,7 @@ const toDataStreamIdentifiers = (dataStreams: DataStream[]) =>
       detailedName,
       unit,
       latestValue: data.at(-1)?.y,
+      assetName,
     })
   );
 
@@ -63,7 +74,17 @@ const toDataStreamMetaData = (
   series: SeriesOption[]
 ) => {
   return datastreams.map(
-    ({ id, name, color, dataType, refId, detailedName, unit, latestValue }) => {
+    ({
+      id,
+      name,
+      color,
+      dataType,
+      refId,
+      detailedName,
+      unit,
+      assetName,
+      latestValue,
+    }) => {
       const foundSeries = series.find(
         ({ id: seriesId }) => seriesId === id
       ) ?? { appKitColor: color };
@@ -76,6 +97,7 @@ const toDataStreamMetaData = (
         dataType,
         detailedName,
         unit,
+        assetName,
         latestValue,
       };
     }

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

@@ -131,6 +131,8 @@ export const REFRESHING_DELAY_MS = 3000;
 
 // legend constants
 export const LEGEND_NAME_MIN_WIDTH_FACTOR = 3.5;
+export const LEGEND_ASSET_NAME_COL_MIN_WIDTH = 100;
+export const LEGEND_ASSET_NAME_COL_MAX_WIDTH = 200;
 
 export const PERFORMANCE_MODE_THRESHOLD = 4000;
 

packages/react-components/src/components/chart/legend/table/columnDefinitions/assetName/assetNameCell.tsx

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { DataStream } from '@iot-app-kit/core';
+import { useVisibleDataStreams } from '../../../../hooks/useVisibleDataStreams';
+import { DataStreamInformation } from '../../types';
+
+export const AssetNameCell = ({ id, assetName }: DataStreamInformation) => {
+  const { isDataStreamHidden } = useVisibleDataStreams();
+
+  const isVisible = useMemo(
+    () => !isDataStreamHidden({ id: id } as DataStream),
+    [isDataStreamHidden, id]
+  );
+
+  return <div className={!isVisible ? 'hidden-legend' : ''}>{assetName}</div>;
+};

packages/react-components/src/components/chart/legend/table/columnDefinitions/assetName/assetNameHeader.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const AssetNameColumnHeader = () => <div>Asset</div>;

packages/react-components/src/components/chart/legend/table/columnDefinitions/assetName/index.ts

@@ -0,0 +1,2 @@
+export * from './assetNameHeader';
+export * from './assetNameCell';

packages/react-components/src/components/chart/legend/table/columnDefinitions/factory.spec.ts

@@ -46,37 +46,45 @@ describe('legend table column definitions', () => {
     );
   });
 
-  it('latest value column is added when latestvalue visible is true', () => {
+  it('asset name and latest value columns are added when asset name and latestvalue visible is true', () => {
     const columnDefinitions = createTableLegendColumnDefinitions({
       trendCursors: [],
       width: 100,
       visibleContent: {
+        asset: true,
         latestValue: true,
       },
       significantDigits: 0,
     });
     expect(columnDefinitions).toEqual(
       expect.arrayContaining([
         expect.toBeObject(),
+        expect.objectContaining({
+          id: 'AssetName',
+        }),
         expect.objectContaining({
           id: 'Latest Value',
         }),
       ])
     );
   });
 
-  it('latest value column is not added when latestvalue visible is false', () => {
+  it('asset name and latest value columns are not added when asset name and latestvalue visibility is false', () => {
     const columnDefinitions = createTableLegendColumnDefinitions({
       trendCursors: [],
       width: 100,
       visibleContent: {
         latestValue: false,
+        asset: false,
       },
       significantDigits: 0,
     });
     expect(columnDefinitions).toEqual(
       expect.arrayContaining([
         expect.toBeObject(),
+        expect.not.objectContaining({
+          id: 'AssetName',
+        }),
         expect.not.objectContaining({
           id: 'Latest Value',
         }),

packages/react-components/src/components/chart/legend/table/columnDefinitions/factory.tsx

@@ -5,9 +5,14 @@ import { DataStreamInformation, TrendCursor } from '../types';
 import { DataStreamCell, DataStreamColumnHeader } from './datastream';
 import { TrendCursorCell, TrendCursorColumnHeader } from './trendCursor';
 import { MaximumColumnHeader, MaximumCell } from './maximumValue';
+import { AssetNameCell, AssetNameColumnHeader } from './assetName';
 import { MinimumColumnHeader, MinimumCell } from './minimumValue';
 import { ChartLegend, ChartOptions } from '../../../types';
 import { LatestValueCell, LatestValueColumnHeader } from './latestValue';
+import {
+  LEGEND_ASSET_NAME_COL_MAX_WIDTH,
+  LEGEND_ASSET_NAME_COL_MIN_WIDTH,
+} from '../../../eChartsConstants';
 
 type LegendTableColumnDefinitions =
   TableProps<DataStreamInformation>['columnDefinitions'];
@@ -35,6 +40,18 @@ const createMaximumColumnDefinition =
       return aValue - bValue;
     },
   });
+
+const createAssetNameColumnDefinition =
+  (): LegendTableColumnDefinitions[1] => ({
+    id: 'AssetName',
+    sortingField: 'assetName',
+    header: <AssetNameColumnHeader />,
+    minWidth: LEGEND_ASSET_NAME_COL_MIN_WIDTH,
+    maxWidth: LEGEND_ASSET_NAME_COL_MAX_WIDTH,
+    cell: (item) => <AssetNameCell {...item} />,
+    isRowHeader: true,
+  });
+
 const createLatestValueColumnDefinition = (
   significantDigits: ChartOptions['significantDigits']
 ): LegendTableColumnDefinitions[1] => ({
@@ -105,6 +122,7 @@ export const createTableLegendColumnDefinitions = ({
 
   return [
     createDataStreamColumnDefinition(width),
+    ...(visibleContent?.asset ? [createAssetNameColumnDefinition()] : []),
     ...(visibleContent?.maxValue ? [createMaximumColumnDefinition()] : []),
     ...(visibleContent?.minValue ? [createMinimumColumnDefinition()] : []),
     ...(visibleContent?.latestValue

packages/react-components/src/components/chart/legend/table/legendTableAdapter.tsx

@@ -15,7 +15,10 @@ const mapDataStreamInformation = ({
   dataStreamMaxes,
   dataStreamMins,
 }: {
-  datastreams: (Pick<DataStream, 'id' | 'color' | 'name' | 'unit'> & {
+  datastreams: (Pick<
+    DataStream,
+    'id' | 'color' | 'name' | 'unit' | 'assetName'
+  > & {
     latestValue: Primitive | undefined;
   })[];
   trendCursorValues: TrendCursorValues[];
@@ -24,7 +27,7 @@ const mapDataStreamInformation = ({
   dataStreamMaxes: MinMaxMap;
   dataStreamMins: MinMaxMap;
 }): DataStreamInformation[] =>
-  datastreams.map(({ id, name, color, unit, latestValue }) => {
+  datastreams.map(({ id, name, color, unit, assetName, latestValue }) => {
     const values = trendCursorValues.reduce<
       DataStreamInformation['trendCursorValues']
     >((valueMap, next) => {
@@ -44,6 +47,7 @@ const mapDataStreamInformation = ({
       id,
       name: dataStreamName,
       color,
+      assetName,
       latestValue,
       trendCursorValues: values,
       maxValue,
@@ -52,7 +56,10 @@ const mapDataStreamInformation = ({
   });
 
 type ChartLegendTableAdapterOptions = ChartLegend & {
-  datastreams: (Pick<DataStream, 'id' | 'color' | 'name' | 'unit'> & {
+  datastreams: (Pick<
+    DataStream,
+    'id' | 'color' | 'name' | 'unit' | 'assetName'
+  > & {
     latestValue: Primitive | undefined;
   })[];
   trendCursorValues: TrendCursorValues[];

packages/react-components/src/components/chart/legend/table/types.ts

@@ -3,7 +3,7 @@ import { DataStream, Primitive } from '@iot-app-kit/core';
 export type TrendCursorValues = { [id in string]?: number };
 export type DataStreamInformation = Pick<
   DataStream,
-  'id' | 'name' | 'color'
+  'id' | 'name' | 'color' | 'assetName'
 > & {
   trendCursorValues: TrendCursorValues;
   latestValue: Primitive | undefined;

packages/source-iotsitewise/src/asset-modules/util/completePropertyStream.spec.ts

@@ -13,6 +13,7 @@ const PROPERTY_STREAM = {
   id: 'alarm-asset-id---input-property-id',
   name: 'inputProperty',
   unit: 'Celsius',
+  assetName: 'NAME',
   resolution: 0,
   refId: undefined,
   isRefreshing: false,

packages/source-iotsitewise/src/asset-modules/util/completePropertyStream.ts

@@ -25,7 +25,8 @@ export const completePropertyStream = ({
   }
 
   const property = modeledDataStreams.find(
-    (property) => property.propertyId === propertyId
+    (property) =>
+      property.propertyId === propertyId && property.assetId === assetId
   );
 
   if (!property) {
@@ -36,6 +37,7 @@ export const completePropertyStream = ({
     ...dataStream,
     name: property.name,
     unit: property.unit,
+    assetName: property.assetName,
     dataType: toDataType(property.dataType),
     associatedStreams: Object.keys(alarms)
       .filter((id) => {