feat: add min and max lines to histogram

uc-cdis · Jan 25, 2025 · ea6a64a · ea6a64a
1 parent e659116
commit ea6a64a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.jsx b/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.jsx
@@ -139,8 +139,6 @@ const ContinuousCovariates = ({
                 <div className='GWASUI-column'>
                   <InputNumber
                     id='input-minOutlierCutoff'
-                    min={1}
-                    max={10}
                     onChange={onChangeMinOutlierCutoff}
                   />
                 </div>
@@ -150,8 +148,6 @@ const ContinuousCovariates = ({
                 <div className='GWASUI-column'>
                   <InputNumber
                     id='input-maxOutlierCutoff'
-                    min={1}
-                    max={10}
                     onChange={onChangeMaxOutlierCutoff}
                   />
                 </div>

diff --git a/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx b/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx
@@ -84,6 +84,8 @@ const PhenotypeHistogram = ({
     xAxisLegend: selectedContinuousItem.concept_name,
     yAxisLegend: 'Persons',
     useAnimation,
+    minCutoff: selectedContinuousItem.filters?.find(filter => filter.type === '>=')?.value ?? undefined,
+    maxCutoff: selectedContinuousItem.filters?.find(filter => filter.type === '<=')?.value ?? undefined,
   };
   return (
     <React.Fragment>

diff --git a/src/Analysis/SharedUtils/DataViz/Histogram/Histogram.jsx b/src/Analysis/SharedUtils/DataViz/Histogram/Histogram.jsx
@@ -7,6 +7,7 @@ import {
   CartesianGrid,
   Tooltip,
   Label,
+  ReferenceLine,
 } from 'recharts';
 import PropTypes from 'prop-types';
 import './Histogram.css';
@@ -52,8 +53,16 @@ const Histogram = ({
   xAxisLegend,
   yAxisLegend,
   useAnimation,
+  minCutoff,
+  maxCutoff,
 }) => {
   const defaultAnimationTime = 400;
+  const xValues = data.map((d) => d[xAxisDataKey]);
+  const minX = Math.min(minCutoff ?? Infinity, ...xValues);
+  const maxX = Math.max(maxCutoff ?? -Infinity, ...xValues);
+  const padding = (maxX - minX) * 0.10;
+  const xDomain = [minX - padding, maxX + padding];
+
   return (
     <div data-testid='histogram'>
       <BarChart
@@ -64,6 +73,8 @@ const Histogram = ({
       >
         <XAxis
           dataKey={xAxisDataKey}
+          type="number"
+          domain={xDomain}
           minTickGap={50}
           tickFormatter={(tick) => formatNumber(tick)}
         >
@@ -79,6 +90,23 @@ const Histogram = ({
         <Tooltip content={<CustomTooltip />} />
         <CartesianGrid strokeDasharray='3 3' />
         <Bar dataKey={barDataKey} fill={barColor} animationDuration={useAnimation ? defaultAnimationTime : 0} />
+        {/* Add ReferenceLines for min and max cutoffs */}
+        {minCutoff !== undefined && (
+          <ReferenceLine
+            x={minCutoff}
+            stroke="red"
+            strokeDasharray="3 3"
+            label={{ value: 'Min', position: 'top', fill: 'red' }}
+          />
+        )}
+        {maxCutoff !== undefined && (
+          <ReferenceLine
+            x={maxCutoff}
+            stroke="green"
+            strokeDasharray="3 3"
+            label={{ value: 'Max', position: 'top', fill: 'green' }}
+          />
+        )}
       </BarChart>
     </div>
   );
@@ -94,6 +122,8 @@ Histogram.propTypes = {
   xAxisLegend: PropTypes.string,
   yAxisLegend: PropTypes.string,
   useAnimation: PropTypes.bool,
+  minCutoff: PropTypes.number,
+  maxCutoff: PropTypes.number,
 };
 
 Histogram.defaultProps = {
@@ -103,6 +133,8 @@ Histogram.defaultProps = {
   xAxisLegend: null,
   yAxisLegend: null,
   useAnimation: true,
+  minCutoff: undefined,
+  maxCutoff: undefined,
 };
 
 export default Histogram;
diff --git a/src/Analysis/SharedUtils/DataViz/Histogram/Histogram.stories.jsx b/src/Analysis/SharedUtils/DataViz/Histogram/Histogram.stories.jsx
@@ -31,6 +31,8 @@ FirstStepActive.args = {
   xAxisDataKey: 'ageBin',
   barDataKey: 'patients',
   barColor: 'darkblue',
+  minCutoff: 3, // Minimum cutoff value
+  maxCutoff: 4 // Maximum cutoff value
 };
 
 export const SecondStepError = Template.bind({});