fix(dashboard): update props passed to kpi and status components base…

…d on new api
awslabs · Mar 28, 2023 · e2023c9 · e2023c9
1 parent 085ab29
commit e2023c9
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 7 deletions.
diff --git a/packages/dashboard/src/customization/widgets/kpi/component.tsx b/packages/dashboard/src/customization/widgets/kpi/component.tsx
@@ -1,18 +1,31 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import pickBy from 'lodash/pickBy';
 import { Kpi } from '@iot-app-kit/react-components';
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { KPIWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
 import { useQueries } from '~/components/dashboard/queryContext';
+import { isDefined } from '~/util/isDefined';
 
 import './component.css';
 
 const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
   const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
 
-  const { queryConfig, styleSettings, thresholds } = widget.properties;
+  const {
+    styleSettings,
+    queryConfig,
+    primaryFont,
+    secondaryFont,
+    showValue,
+    showUnit,
+    showIcon,
+    showName,
+    showTimestamp,
+    thresholds,
+  } = widget.properties;
 
   const { iotSiteWiseQuery } = useQueries();
   const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
@@ -23,7 +36,31 @@ const KPIWidgetComponent: React.FC<KPIWidget> = (widget) => {
   if (shouldShowEmptyState) {
     return <KPIWidgetEmptyStateComponent />;
   }
-  return <Kpi key={key} query={query} viewport={viewport} styles={styleSettings} thresholds={thresholds} />;
+
+  const settings = pickBy(
+    {
+      showName,
+      showIcon,
+      showValue,
+      showUnit,
+      showTimestamp,
+      fontSize: primaryFont.fontSize,
+      color: primaryFont.fontColor,
+      secondaryFontSize: secondaryFont.fontSize,
+    },
+    isDefined
+  );
+
+  return (
+    <Kpi
+      key={key}
+      query={query}
+      viewport={viewport}
+      styles={styleSettings}
+      settings={settings}
+      thresholds={thresholds}
+    />
+  );
 };
 
 const KPIWidgetEmptyStateComponent: React.FC = () => {

diff --git a/packages/dashboard/src/customization/widgets/status/component.tsx b/packages/dashboard/src/customization/widgets/status/component.tsx
@@ -1,17 +1,30 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import pickBy from 'lodash/pickBy';
 import { Status } from '@iot-app-kit/react-components';
 import { computeQueryConfigKey } from '../utils/computeQueryConfigKey';
 import type { DashboardState } from '~/store/state';
 import type { StatusWidget } from '../types';
 import { Box } from '@cloudscape-design/components';
-import './component.css';
 import { useQueries } from '~/components/dashboard/queryContext';
+import { isDefined } from '~/util/isDefined';
+
+import './component.css';
 
 const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
   const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
 
-  const { queryConfig, styleSettings, thresholds } = widget.properties;
+  const {
+    styleSettings,
+    queryConfig,
+    primaryFont,
+    secondaryFont,
+    showValue,
+    showUnit,
+    showIcon,
+    showName,
+    thresholds,
+  } = widget.properties;
 
   const { iotSiteWiseQuery } = useQueries();
   const query = iotSiteWiseQuery && queryConfig.query ? iotSiteWiseQuery?.timeSeriesData(queryConfig.query) : undefined;
@@ -23,7 +36,29 @@ const StatusWidgetComponent: React.FC<StatusWidget> = (widget) => {
     return <StatusWidgetEmptyStateComponent />;
   }
 
-  return <Status key={key} query={query} viewport={viewport} styles={styleSettings} thresholds={thresholds} />;
+  const settings = pickBy(
+    {
+      showName,
+      showIcon,
+      showValue,
+      showUnit,
+      fontSize: primaryFont.fontSize,
+      color: primaryFont.fontColor,
+      secondaryFontSize: secondaryFont.fontSize,
+    },
+    isDefined
+  );
+
+  return (
+    <Status
+      key={key}
+      query={query}
+      viewport={viewport}
+      styles={styleSettings}
+      settings={settings}
+      thresholds={thresholds}
+    />
+  );
 };
 
 const StatusWidgetEmptyStateComponent: React.FC = () => {

diff --git a/packages/react-components/src/components/kpi/kpi.tsx b/packages/react-components/src/components/kpi/kpi.tsx
@@ -18,7 +18,7 @@ export const Kpi = ({
   viewport?: Viewport;
   thresholds?: Threshold[];
   styles?: StyleSettingsMap;
-  settings?: KPISettings;
+  settings?: Partial<KPISettings>;
 }) => {
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,

diff --git a/packages/react-components/src/components/status/status.tsx b/packages/react-components/src/components/status/status.tsx
@@ -25,7 +25,7 @@ export const Status = ({
   viewport?: Viewport;
   thresholds?: Threshold[];
   styles?: StyleSettingsMap;
-  settings?: StatusSettings;
+  settings?: Partial<StatusSettings>;
 }) => {
   const { dataStreams, thresholds: queryThresholds } = useTimeSeriesData({
     viewport: passedInViewport,