Layout paths values and params on cards

kausaltech · Oct 29, 2024 · dfdbbba · dfdbbba
1 parent 7deb668
commit dfdbbba
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 31 deletions.
diff --git a/components/paths/ActionParameters.tsx b/components/paths/ActionParameters.tsx
@@ -17,13 +17,18 @@ const Parameters = styled.div`
 
 const ActionParameters = (props: { parameters: ParameterInterface[] }) => {
   const { parameters } = props;
+  console.log('parameters', parameters);
   if (!parameters) {
     return null;
   }
   // Separate mandatory on/off parameter with standard id
-  const actionParameterSwitch = parameters.find(
+  const actionParameterSwitchParameter = parameters.find(
     (param) => param.node && param.id === `${param.node.id}.enabled`
-  ) as (ParameterInterface & { __typename: 'BoolParameterType' }) | null;
+  );
+  const actionParameterSwitch = {
+    ...actionParameterSwitchParameter,
+    __typename: 'EnableParameterType',
+  } as ParameterInterface;
   const actionOtherParameters = parameters.filter(
     (param) => param.id !== actionParameterSwitch?.id
   );

diff --git a/components/paths/CategoryCard.tsx b/components/paths/CategoryCard.tsx
@@ -67,6 +67,27 @@ const Identifier = styled.span`
   color: ${(props) => props.theme.textColor.tertiary};
 `;
 
+const Values = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 10px;
+`;
+
+const TotalValue = styled.div`
+  flex: 100% 0 0;
+`;
+
+const SubValue = styled.div`
+  flex: 45% 1 0;
+`;
+
+const ParametersWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 45% 1 0;
+  align-items: flex-end;
+`;
+
 const PathsContentLoader = (props) => {
   const theme = useTheme();
   return (
@@ -130,6 +151,7 @@ type Emissions = {
   total: { value: number | null; label: string | null };
   indirect: { value: number | null; label: string | null };
   direct: { value: number | null; label: string | null };
+  goal: { value: number | null; label: string | null };
 };
 
 const PathsBasicNodeContent = (props: PathsBasicNodeContentProps) => {
@@ -140,6 +162,7 @@ const PathsBasicNodeContent = (props: PathsBasicNodeContentProps) => {
     total: { value: null, label: null },
     indirect: { value: null, label: null },
     direct: { value: null, label: null },
+    goal: { value: null, label: null },
   });
 
   const [unit, setUnit] = useState<string | null>(null);
@@ -155,6 +178,8 @@ const PathsBasicNodeContent = (props: PathsBasicNodeContentProps) => {
         label: getScopeLabel(nodeMetric, 'indirect'),
       },
       direct: { value: direct, label: getScopeLabel(nodeMetric, 'direct') },
+      // TODO: handle having goals
+      goal: { value: null, label: null },
     });
     setUnit(nodeMetric.getUnit());
     onLoaded(categoryId, indirect + direct);
@@ -164,42 +189,38 @@ const PathsBasicNodeContent = (props: PathsBasicNodeContentProps) => {
 
   return (
     <CardContentBlock>
-      <div>
+      <Values>
         {emissions.total.value ? (
-          <div>
+          <TotalValue>
             <HighlightValue
               displayValue={emissions.total.value.toPrecision(3) || ''}
               header={`${emissions.total.label} (${yearRange[1]})`}
               unit={unit || ''}
               size="md"
             />
-          </div>
+          </TotalValue>
         ) : null}
         {emissions.direct.value ? (
-          <div>
+          <SubValue>
             <HighlightValue
               displayValue={emissions.direct.value.toPrecision(3)}
               header={emissions.direct.label || ''}
               unit={unit || ''}
               size="sm"
             />
-          </div>
-        ) : (
-          <div />
-        )}
+          </SubValue>
+        ) : null}
         {emissions.indirect.value ? (
-          <div>
+          <SubValue>
             <HighlightValue
               displayValue={emissions.indirect.value.toPrecision(3)}
               header={emissions.direct.label || ''}
               unit={unit || ''}
               size="sm"
             />
-          </div>
-        ) : (
-          <div />
-        )}
-      </div>
+          </SubValue>
+        ) : null}
+      </Values>
     </CardContentBlock>
   );
 };
@@ -227,15 +248,23 @@ const PathsActionNodeContent = (props: PathsActionNodeContentProps) => {
 
   return (
     <CardContentBlock>
-      <HighlightValue
-        displayValue={pathsAction.isEnabled() ? beautifyValue(impact) : '-'}
-        header={`${t('impact')} ${yearRange[1]}`}
-        unit={pathsAction.getUnit() || ''}
-        size="md"
-        muted={refetching || !pathsAction.isEnabled()}
-        mutedReason={!pathsAction.isEnabled() ? 'Not included in scenario' : ''}
-      />
-      <ActionParameters parameters={node.parameters} />
+      <Values>
+        <SubValue>
+          <HighlightValue
+            displayValue={pathsAction.isEnabled() ? beautifyValue(impact) : '-'}
+            header={`${t('impact')} ${yearRange[1]}`}
+            unit={pathsAction.getUnit() || ''}
+            size="md"
+            muted={refetching || !pathsAction.isEnabled()}
+            mutedReason={
+              !pathsAction.isEnabled() ? 'Not included in scenario' : ''
+            }
+          />
+        </SubValue>
+        <ParametersWrapper>
+          <ActionParameters parameters={node.parameters} />
+        </ParametersWrapper>
+      </Values>
     </CardContentBlock>
   );
 };
@@ -270,6 +299,7 @@ const PathsNodeContent = React.memo((props: PathsNodeContentProps) => {
     return <div>Error: {error.message}</div>; // Handle error appropriately
   }
   if (data) {
+    console.log(data);
     if (data.node.__typename === 'ActionNode') {
       return (
         <PathsActionNodeContent

diff --git a/components/paths/ParameterWidget.tsx b/components/paths/ParameterWidget.tsx
@@ -4,6 +4,7 @@ import Button from 'components/common/Button';
 import Icon from 'components/common/Icon';
 import { useTranslations } from 'next-intl';
 import { getTrackBackground, Range } from 'react-range';
+import { Tooltip } from 'react-tooltip';
 import styled, { useTheme } from 'styled-components';
 
 import { ParameterInterface } from '@/common/__generated__/paths/graphql';
@@ -195,10 +196,17 @@ type BoolWidgetProps = {
   handleChange: (opts: { parameterId: string; boolValue: boolean }) => void;
   loading: boolean;
   WidgetWrapper: typeof WidgetWrapper;
+  hideLabel?: boolean;
 };
 
 export const BoolWidget = (props: BoolWidgetProps) => {
-  const { parameter, handleChange, loading, WidgetWrapper } = props;
+  const {
+    parameter,
+    handleChange,
+    loading,
+    WidgetWrapper,
+    hideLabel = false,
+  } = props;
   const { id, boolValue, isCustomized, isCustomizable } = parameter;
   const t = useTranslations();
 
@@ -219,11 +227,16 @@ export const BoolWidget = (props: BoolWidgetProps) => {
         }
         disabled={!isCustomizable || loading}
         style={{ transform: 'scale(1.5)' }}
+        data-tooltip-id="my-tooltip"
+        data-tooltip-content={parameter.description || label}
       />
-      <label className="form-check-label" htmlFor={id!}>
-        {label}
-        {isCustomized ? '*' : ''}
-      </label>
+      {!hideLabel && (
+        <label className="form-check-label" htmlFor={id!}>
+          {label}
+          {isCustomized ? '*' : ''}
+        </label>
+      )}
+      {hideLabel && <Tooltip id="my-tooltip" />}
     </WidgetWrapper>
   );
 };
@@ -285,6 +298,17 @@ const ParameterWidget = (props: ParameterWidgetProps) => {
         />
       );
 
+    case 'EnableParameterType':
+      return (
+        <BoolWidget
+          parameter={parameter}
+          handleChange={handleUserSelection}
+          loading={mutationLoading}
+          WidgetWrapper={props.WidgetWrapper ?? WidgetWrapper}
+          hideLabel={true}
+        />
+      );
+
     default:
       return null;
   }

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react-select": "^5.4.0",
     "react-sizeme": "^3.0.2",
     "react-sparklines": "^1.7.0",
+    "react-tooltip": "^5.28.0",
     "reactstrap": "9.2.1",
     "sass": "^1.51.0",
     "styled-components": "^6.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -10039,7 +10039,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.0, classnames@npm:^2.2.3, classnames@npm:^2.2.6":
+"classnames@npm:^2.2.0, classnames@npm:^2.2.3, classnames@npm:^2.2.6, classnames@npm:^2.3.0":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -16944,6 +16944,7 @@ __metadata:
     react-select: ^5.4.0
     react-sizeme: ^3.0.2
     react-sparklines: ^1.7.0
+    react-tooltip: ^5.28.0
     reactstrap: 9.2.1
     regenerator-runtime: ^0.13.9
     sass: ^1.51.0
@@ -20609,6 +20610,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-tooltip@npm:^5.28.0":
+  version: 5.28.0
+  resolution: "react-tooltip@npm:5.28.0"
+  dependencies:
+    "@floating-ui/dom": ^1.6.1
+    classnames: ^2.3.0
+  peerDependencies:
+    react: ">=16.14.0"
+    react-dom: ">=16.14.0"
+  checksum: 4d1efae0fbd39ec7f1414bb325582cca2f7541a8d464b61bf3a7c5e119821868aa2d47c28509e7ea3cca844a9655feb56fc466def0edaa8db07ce427146ef3b0
+  languageName: node
+  linkType: hard
+
 "react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.2":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"