Merge pull request #4141 from OneCommunityGlobal/xinyi_fix_hours_completed_bar_chart

Xinyi - Fix hours completed bar chart

Author: one-community

src/components/TotalOrgSummary/HoursCompleted/HoursCompletedBarChart.jsx

@@ -80,6 +80,7 @@ export default function HoursCompletedBarChart({ isLoading, data, darkMode }) {
     color: ['rgba(76,75,245,255)', 'rgba(0,175,244,255)'],
   }));
   const projectBarInfo = {
+    ifcompare: projectChangePercentage !== undefined && projectChangePercentage !== null,
     amount: projectHours.count,
     percentage: `${(projectPercentage * 100).toFixed(2)}%`,
     change:
@@ -158,16 +159,22 @@ export default function HoursCompletedBarChart({ isLoading, data, darkMode }) {
               100}% of Total Tangible Hours Submitted to Tasks`}
           </span>
           {(() => {
-            const isPositive = data.hoursSubmittedToTasksComparisonPercentage >= 0;
+            const percentage = data.hoursSubmittedToTasksComparisonPercentage;
+
+            if (percentage === undefined || percentage === null) {
+              // No comparison → hide metrics
+              return null;
+            }
+            const isPositive = percentage >= 0;
             let color;
             if (isPositive) {
               color = darkMode ? 'lightgreen' : 'green';
             } else {
               color = 'red';
             }
             const value = isPositive
-              ? `+${(data.hoursSubmittedToTasksComparisonPercentage * 100).toFixed(0)}%`
-              : `${(data.hoursSubmittedToTasksComparisonPercentage * 100).toFixed(0)}%`;
+              ? `+${(percentage * 100).toFixed(0)}%`
+              : `${(percentage * 100).toFixed(0)}%`;
             return <span style={{ color, marginLeft: 8, fontSize: '12px' }}>{value}</span>;
           })()}
         </div>
@@ -177,7 +184,7 @@ export default function HoursCompletedBarChart({ isLoading, data, darkMode }) {
           chartData={chartData.filter(item => item.name === 'Tasks')}
           maxY={maxY}
           tickInterval={tickInterval}
-          renderCustomizedLabel={renderCustomizedLabel}
+          // renderCustomizedLabel={renderCustomizedLabel}
           darkMode={darkMode}
           projectBarInfo={projectBarInfo}
           yAxisLabel="Hours"

src/components/TotalOrgSummary/TinyBarChart.jsx

@@ -43,7 +43,11 @@ function ProjectLabel({ viewBox, info }) {
         <div style={{ color: '#444', fontWeight: 'bold', fontSize: 15 }}>Projects</div>
         <div style={{ color: '#222', fontWeight: 'bold', fontSize: 14 }}>{info.amount}</div>
         <div style={{ color: '#666', fontSize: 10 }}>({info.percentage})</div>
-        <div style={{ color: info.fontcolor, fontSize: 10, fontWeight: 'bold' }}>{info.change}</div>
+        {info.ifcompare && (
+          <div style={{ color: info.fontcolor, fontSize: 10, fontWeight: 'bold' }}>
+            {info.change}
+          </div>
+        )}
       </div>
     </foreignObject>
   );