add uncommited UI changes

uwcirg · Dec 30, 2024 · 9cbf3fd · 9cbf3fd
1 parent 71325d4
commit 9cbf3fd
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 15 deletions.
diff --git a/src/ui-client/src/components/Visualize/Age.tsx b/src/ui-client/src/components/Visualize/Age.tsx
@@ -51,8 +51,11 @@ export class Age extends React.PureComponent<Props, State> {
     const del = useDelay ? delay : 0;
     const w = width > this.maxWidth ? this.maxWidth : width;
 
-    if (!counts) return <div className="visualization-no-data-container">No data available</div>;
-    let data = Object.entries(counts??{})
+    if (!counts || !Object.keys(counts).length)
+      return (
+        <div className="visualization-no-data-container">No data available</div>
+      );
+    let data = Object.entries(counts ?? {})
       .map(([key, value]) => ({ key, value }))
       .sort((a, b) => (a.value > b.value ? 0 : 1));
     const len = data.length;

diff --git a/src/ui-client/src/components/Visualize/Binary.tsx b/src/ui-client/src/components/Visualize/Binary.tsx
@@ -54,21 +54,21 @@ export class Binary extends React.PureComponent<Props> {
             <Row >
                 <div className="visualization-ataglance-column visualization-ataglance-left" style={{ height, width: colWidth }}>
                     <ResponsiveContainer>
-                        <BarChart data={leftBars} barCategoryGap={2} layout={'vertical'} margin={{top: 50, right: 0, left: 120, bottom: 50}}>
+                        <BarChart data={leftBars} barCategoryGap={1} layout={'vertical'} margin={{top: 50, right: 0, left: 20, bottom: 50}}>
                             <XAxis type="number" hide={true} axisLine={false} />
                             <Bar barSize={1} dataKey="dummyValue" isAnimationActive={false}>
                                 <LabelList dataKey="label" position="insideBottomRight" offset={2}/>
                             </Bar>
                             <Bar animationBegin={delay} barSize={config.barSize} dataKey="value" isAnimationActive={true} >
                                 {leftBars.map((d: BinarySplit) => <Cell key={d.label} className={d.label} fill={d.color} />)}
-                                <LabelList dataKey="value" formatter={this.formatNegativeNumber} position="insideRight"/>
+                                <LabelList dataKey="value" formatter={this.formatNegativeNumber} position="center"/>
                             </Bar>
                         </BarChart>
                     </ResponsiveContainer>
                 </div>
                 <div className="visualization-ataglance-column visualization-ataglance-right" style={{ height, width: colWidth }}>
                     <ResponsiveContainer>
-                        <BarChart data={rightBars} barCategoryGap={2} layout={'vertical'} margin={{top: 50, right: 120, left: 0, bottom: 50}}>
+                        <BarChart data={rightBars} barCategoryGap={1} layout={'vertical'} margin={{top: 50, right: 20, left: 0, bottom: 50}}>
                             <XAxis type="number" hide={true} axisLine={false} />
                             <Bar barSize={1} dataKey="dummyValue" isAnimationActive={false}>
                                 <LabelList dataKey="label" position="insideBottomLeft" offset={2}/>

diff --git a/src/ui-client/src/components/Visualize/Gender.tsx b/src/ui-client/src/components/Visualize/Gender.tsx
@@ -51,8 +51,11 @@ export class Gender extends React.PureComponent<Props, State> {
     const del = useDelay ? delay : 0;
     const w = width > this.maxWidth ? this.maxWidth : width;
 
-    if (!counts) return <div className="visualization-no-data-container">No data available</div>;
-    let data = Object.entries(counts??{})
+    if (!counts || !Object.keys(counts).length)
+      return (
+        <div className="visualization-no-data-container">No data available</div>
+      );
+    let data = Object.entries(counts ?? {})
       .map(([key, value]) => ({ key, value }))
       .sort((a, b) => (a.value > b.value ? 0 : 1));
     const len = data.length;
@@ -89,7 +92,7 @@ export class Gender extends React.PureComponent<Props, State> {
               margin={{ top: 30, right: 30, left: 10, bottom: 5 }}
               layout="vertical"
             >
-              <XAxis type="number" allowDecimals={false} hide={true}/>
+              <XAxis type="number" allowDecimals={false} hide={true} />
               <YAxis dataKey="key" type="category" interval={0} width={150} />
               <Bar
                 animationBegin={del}
@@ -129,7 +132,7 @@ export class Gender extends React.PureComponent<Props, State> {
       mab: "nonbinary/other (assigned male at birth)",
     }[String(val).toLowerCase().replace(/[-_]/g, "")];
     if (displayValue) return displayValue;
-    return val?.replace(/[-_]/g, " ")??"other";
+    return val?.replace(/[-_]/g, " ") ?? "other";
   };
 
   private color = (i: number, colors: string[]): string => {

diff --git a/src/ui-client/src/components/Visualize/Race.tsx b/src/ui-client/src/components/Visualize/Race.tsx
@@ -51,8 +51,11 @@ export class Race extends React.PureComponent<Props, State> {
     const del = useDelay ? delay : 0;
     const w = width > this.maxWidth ? this.maxWidth : width;
 
-    if (!counts) return <div className="visualization-no-data-container">No data available</div>;
-    let data = Object.entries(counts??{})
+    if (!counts || !Object.keys(counts).length)
+      return (
+        <div className="visualization-no-data-container">No data available</div>
+      );
+    let data = Object.entries(counts ?? {})
       .map(([key, value]) => ({ key, value }))
       .sort((a, b) => (a.value > b.value ? 0 : 1));
     const len = data.length;

diff --git a/src/ui-client/src/components/Visualize/Sex.tsx b/src/ui-client/src/components/Visualize/Sex.tsx
@@ -51,8 +51,11 @@ export class Sex extends React.PureComponent<Props, State> {
     const del = useDelay ? delay : 0;
     const w = width > this.maxWidth ? this.maxWidth : width;
 
-    if (!counts) return <div className="visualization-no-data-container">No data available</div>;
-    let data = Object.entries(counts??{})
+    if (!counts || !Object.keys(counts).length)
+      return (
+        <div className="visualization-no-data-container">No data available</div>
+      );
+    let data = Object.entries(counts ?? {})
       .map(([key, value]) => ({ key, value }))
       .sort((a, b) => (a.value > b.value ? 0 : 1));
     const len = data.length;

diff --git a/src/ui-client/src/styles/custom.css b/src/ui-client/src/styles/custom.css
@@ -141,7 +141,7 @@ button.concept-search-roots-dropdown-toggle.dropdown-toggle.btn.btn-secondary:ho
     color: #777;
     margin-top: 24px;
 }
-.visualization-sex-column .recharts-label-list tspan,
-.visualization-gender-column .recharts-label-list tspan {
+.visualization-sex-column .recharts-label-list text tspan:first-of-type,
+.visualization-gender-column .recharts-label-list text tspan:first-of-type {
     text-transform: capitalize;
 }