4031: Updates layout and production tab

greensomes · greensomes · commit a31b3de479cd · 2025-07-03T08:32:40.000-04:00
diff --git a/src/components/content-partials/MonthlyFactSheet.mdx b/src/components/content-partials/MonthlyFactSheet.mdx
@@ -0,0 +1,3 @@
+### Monthly Fact Sheet
+
+[Fact sheet](/fact-sheet) summarizing disbursements, revenue, and production data by month on federal and Native American lands.
diff --git a/src/components/data-viz/StackedBarChart/StackedBarChart2.js b/src/components/data-viz/StackedBarChart/StackedBarChart2.js
@@ -43,6 +43,8 @@ const StackedBarChart2 = ({ data, ...options }) => {
     legendHeaders: []
   })
 
+  const hideLegend = options.hideLegend || false
+
   const [collapsed, setCollapsed] = useState(collapsedLegend || false)
   const title = options.title || ''
   const buttonValue = collapsed ? 'Show details' : 'Hide details'
@@ -396,7 +398,7 @@ const StackedBarChart2 = ({ data, ...options }) => {
   return (
     <>
       {title && <ChartTitle compact={options.compact}>{title}</ChartTitle>}
-      <svg width="100%" height="200" viewBox={`0 0 ${ viewBoxWidth } ${ viewBoxHeight }`} pointerEvents="none">
+      <svg width="100%" height="225" viewBox={`0 0 ${ viewBoxWidth } ${ viewBoxHeight }`} pointerEvents="none">
         <title>{svgTitle}</title>
         <Translate>
           <MaxExtent
@@ -446,23 +448,35 @@ const StackedBarChart2 = ({ data, ...options }) => {
             {...bottomAxis.size} />
         </Translate>
       </svg>
-      { collapsibleLegend && <LegendButton variant='text' onClick={ () => setCollapsed(!collapsed) }>{buttonValue}</LegendButton> }
-      <Collapse in={!collapsed}>
-        <Legend
-          data={dataset.legendData}
-          activeNode={activeNode}
-          legendHeaders={legendHeaders(legendHeader)}
-          legendFormat={legendFormat}
-          legendReverse={false}
-          legendTotal={true}
-          xAxis={xAxis}
-          yAxis={yAxis}
-          xDomain={xDomain}
-          colorScale={legendColorScale}
-          yOrderBy={yOrderBy}
-          yGroupBy={yGroupBy}
-        />
-      </Collapse>
+      { !hideLegend && (
+        <>
+          {collapsibleLegend && (
+            <LegendButton
+              variant='text'
+              onClick={() => setCollapsed(!collapsed)}
+            >
+              {buttonValue}
+            </LegendButton>
+          )}
+
+          <Collapse in={!collapsed}>
+            <Legend
+              data={dataset.legendData}
+              activeNode={activeNode}
+              legendHeaders={legendHeaders(legendHeader)}
+              legendFormat={legendFormat}
+              legendReverse={false}
+              legendTotal={true}
+              xAxis={xAxis}
+              yAxis={yAxis}
+              xDomain={xDomain}
+              colorScale={legendColorScale}
+              yOrderBy={yOrderBy}
+              yGroupBy={yGroupBy}
+            />
+          </Collapse>
+        </>
+      )}
     </>
   )
 }
diff --git a/src/components/sections/ComparisonTable/ComparisonTable.js b/src/components/sections/ComparisonTable/ComparisonTable.js
@@ -20,6 +20,9 @@ import PercentDifference from '../../utils/PercentDifference'
 import { DataFilterContext } from '../../../stores/data-filter-store'
 import { DATA_FILTER_CONSTANTS as DFC } from '../../../constants'
 import ChartTitle from '../../data-viz/ChartTitle'
+import GlossaryTerm from '../../GlossaryTerm/GlossaryTerm'
+import Rect from '../../../components/data-viz/svg/Rect'
+import * as d3 from 'd3'
 
 const useStyles = makeStyles(theme => ({
   comparisonTable: {
@@ -28,10 +31,7 @@ const useStyles = makeStyles(theme => ({
     },
   },
   comparisonTableContent: {
-    height: '210px',
-    [theme.breakpoints.down('sm')]: {
-      height: 'auto'
-    }
+    marginBottom: '1em'
   },
   tableCellRoot: {
     fontSize: '1rem',
@@ -55,7 +55,7 @@ const ComparisonTable = forwardRef((props, ref) => {
 
   const classes = useStyles()
   const theme = useTheme()
-  const matchesSmDown = useMediaQuery(theme.breakpoints.down('sm'))
+  const matchesSmDown = true;//useMediaQuery(theme.breakpoints.down('sm'))
 
   // //console.debug('ComparisonTable props: ', props)
 
@@ -110,6 +110,7 @@ const ComparisonTable = forwardRef((props, ref) => {
   // Text output
   const month = (monthly === DFC.MONTHLY_CAPITALIZED && selectedItem.month) && selectedItem.month.substring(0, 3)
   const previousYearText = `${ periodAbbr } ${ previousYear }`
+  const currentYearText = `${ periodAbbr } ${ currentYear }`
   const changeText = 'Change'
 
   // grouped data
@@ -160,14 +161,11 @@ const ComparisonTable = forwardRef((props, ref) => {
 
     return newObj
   })
-  // //console.debug('comparisonData :', comparisonData)
+
   comparisonData.sort((a, b) => yOrderBy.indexOf(a.previous[yGroupBy]) - yOrderBy.indexOf(b.previous[yGroupBy]))
 
   const cData = comparisonData.slice().sort((a, b) => yOrderBy.indexOf(a.key) - yOrderBy.indexOf(b.key))
 
-  // console.log('comparisonData: ', comparisonData)
-  // console.log('cData: ', cData)
-
   // get previous/current year totals
   const previousYearTotals = comparisonData.map(item => item.previous.sum)
   const previousYearTotal = previousYearTotals.reduce((acc, item) => acc + item)
@@ -212,8 +210,31 @@ const ComparisonTable = forwardRef((props, ref) => {
       return utils.formatToDollarInt(sum)
     }
   }
-  // //console.debug("Comparison CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCdata ", cData)
-  // //console.debug("Comparison "+currentYearTotal+" && "+previousYearTotal+" && "+currentYearTotal +"!== 0 && " + previousYearTotal +" !== 0")
+
+  const primaryColor = '#37253c'
+  const secondaryColor = '#c4d99b'
+
+  // color Scale
+  const color = (flipColorRange = false, scaleLinear = false) => {
+    let color
+
+    if (scaleLinear) {
+      color = d3.scaleLinear()
+        .domain([0, yOrderBy.length > 0 ? yOrderBy.length - 1 : 0 || 4])
+        .range(flipColorRange ? [secondaryColor, primaryColor] : [primaryColor, secondaryColor])
+    }
+    else {
+      const colorDomain = flipColorRange
+        ? [yOrderBy.length > 0 ? yOrderBy.length - 1 : 0 || 4, 0]
+        : [0, yOrderBy.length > 0 ? yOrderBy.length - 1 : 0 || 4]
+      color = d3.scaleSequential(d3.interpolateViridis)
+        .domain(colorDomain)
+    }
+    return color
+  }
+
+  const colorScale = color(true)
+
   return (
     <Box ref={ref}>
       {comparisonTitle && <ChartTitle compact={false}>{comparisonTitle}</ChartTitle>}
@@ -229,6 +250,13 @@ const ComparisonTable = forwardRef((props, ref) => {
                   <Box fontWeight="bold" style={{ textTransform: 'capitalize' }}>{yGroupBy}</Box>
                 </TableCell>
               }
+              <TableCell component="th" align="right" classes={{ root: classes.tableCellRoot, head: classes.tableCellHead }}>
+                <Box fontWeight="bold">
+                  {month
+                    ? `${ month } ${ currentYear } ${ (dataType === DFC.PRODUCTION) ? unitText : '' }`
+                    : `${ currentYearText } ${ comparisonText } ${ (dataType === DFC.PRODUCTION) ? unitText : '' }`}
+                </Box>
+              </TableCell>
               <TableCell component="th" align="right" classes={{ root: classes.tableCellRoot, head: classes.tableCellHead }}>
                 <Box fontWeight="bold">
                   {month
@@ -238,18 +266,31 @@ const ComparisonTable = forwardRef((props, ref) => {
               </TableCell>
               <TableCell component="th" align="right" classes={{ root: classes.tableCellRoot, head: classes.tableCellHead }}>
                 <Box fontWeight="bold">{changeText}</Box>
-                {/* <Box fontSize="14px">{changeAdditionalText}</Box> */}
               </TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             { cData && cData.map((item, index) => (
               <TableRow key={`tr__${ index }`}>
-                {matchesSmDown &&
-                  <TableCell classes={{ root: classes.tableCellRoot }}>
-                    <Box fontSize="16px">{item.key || ''}</Box>
-                  </TableCell>
-                }
+                <TableCell classes={{ root: classes.tableCellRoot }}>
+                  <Rect
+                    width={20}
+                    height={20}
+                    title={item.key}
+                    styles={{ fill: colorScale(index), marginTop: 0, marginRight: '1rem' }}
+                  />
+                  <GlossaryTerm
+                    termKey={item.key}
+                    isInTable={true}
+                    style={{ whiteSpace: 'inherit' }}>
+                    { item.key }
+                  </GlossaryTerm>
+                </TableCell>
+                <TableCell align="right" classes={{ root: classes.tableCellRoot }}>
+                  <Box>
+                    {(item.current && item.current.sum !== 0) ? formatSum(item.current.sum) : '-' }
+                  </Box>
+                </TableCell>
                 <TableCell align="right" classes={{ root: classes.tableCellRoot }}>
                   <Box>
                     {(item.previous && item.previous.sum !== 0) ? formatSum(item.previous.sum) : '-' }
@@ -273,6 +314,11 @@ const ComparisonTable = forwardRef((props, ref) => {
               {matchesSmDown &&
                 <TableCell classes={{ root: classes.tableCellRoot }}></TableCell>
               }
+              <TableCell align="right" classes={{ root: classes.tableCellRoot }}>
+                <Box fontWeight="bold">
+                  {currentYearTotal !== 0 ? formatSum(currentYearTotal) : '-'}
+                </Box>
+              </TableCell>
               <TableCell align="right" classes={{ root: classes.tableCellRoot }}>
                 <Box fontWeight="bold">
                   {previousYearTotal !== 0 ? formatSum(previousYearTotal) : '-'}
@@ -298,6 +344,8 @@ const ComparisonTable = forwardRef((props, ref) => {
   )
 })
 
+ComparisonTable.displayName = 'ComparisonTable'
+
 export default ComparisonTable
 
 ComparisonTable.propTypes = {
diff --git a/src/components/sections/Explore/Explore.js b/src/components/sections/Explore/Explore.js
@@ -16,7 +16,8 @@ const useStyles = makeStyles(theme => ({
     borderBottom: '2px solid #cde3c3',
     marginBottom: '1em',
     paddingBottom: '.41667rem',
-  }
+    marginTop: '0 !important'
+  },
 }))
 
 /**
@@ -31,21 +32,19 @@ const Explore = props => {
   return (
     <Box component="section" className={classes.root}>
       <Box className={classes.contentHeader}>
-        <Typography variant="h3" className={classes.h3Bar}>
+        <Typography variant="h3" 
+        className={`${classes.h3Bar}`}>
           Explore {props.title}
         </Typography>
         <Typography variant="body1">
           {props.info}
         </Typography>
       </Box>
       <Grid container spacing={0}>
-        <Grid item md={4} className={classes.exploreContent}>
+        <Grid item md={6} className={classes.exploreContent}>
           {props.contentLeft}
         </Grid>
-        <Grid item md={4} className={classes.exploreContent}>
-          {props.contentCenter}
-        </Grid>
-        <Grid item md={4} className={classes.exploreContent}>
+        <Grid item md={6} className={classes.exploreContent}>
           {props.contentRight}
         </Grid>
         <Grid item md={12}>
diff --git a/src/components/sections/Explore/ExploreProduction.js b/src/components/sections/Explore/ExploreProduction.js
@@ -20,33 +20,30 @@ const ExploreProduction = props => {
             mt={0}>
             Query production data
           </Link>
-        </>
-      }
-      contentCenter={
-        <>
           <Link
             href="/how-revenue-works#the-production-process"
             linkType="HowWorks"
             mt={0}>
             How production works
           </Link>
+        </>
+      }
+      contentRight={
+        <>
           <Link
             href="/data-by-state-offshore-region"
             linkType="Location"
             mt={0}>
             Data by state and offshore region
           </Link>
-
+          <Link
+            href="/downloads/#Production"
+            linkType="DownloadData"
+            mt={0}>
+            Downloads and documentation
+          </Link>
         </>
       }
-      contentRight={
-        <Link
-          href="/downloads/#Production"
-          linkType="DownloadData"
-          mt={0}>
-          Downloads and documentation
-        </Link>
-      }
     />
   )
 }
diff --git a/src/components/sections/TotalProduction/TotalProduction.js b/src/components/sections/TotalProduction/TotalProduction.js
@@ -188,7 +188,6 @@ const TotalProduction = props => {
       }
       else if (period === DFC.PERIOD_CALENDAR_YEAR) {
         const maxDate = data.total_monthly_calendar_production.filter(row => row.month === 12).pop()
-        console.debug('DWGH _------------')
 
         comparisonData = data.total_monthly_calendar_production.filter(row => row.product === product)
         chartData = data.total_monthly_calendar_production.filter(row => row.product === product && row.year === maxDate.year)
@@ -199,12 +198,10 @@ const TotalProduction = props => {
 
 	  const minDate = new Date(maxDate.replace(/-/g, '/') + ' 00:00:00')
 	  minDate.setFullYear(minDate.getFullYear() - 1)
-	      // console.debug("MD------", minDate)
         chartData = data.total_monthly_last_twelve_production.filter(row => row.product === product && new Date(row.period_date) >= minDate)
       }
 
       xGroups = chartData.filter(row => row.product === product).reduce((g, row, i) => {
-        // console.log('xGroup g, row: ', g, row)
         const r = g
         const year = row.period_date.substring(0, 4)
         const months = g[year] || []
@@ -224,7 +221,6 @@ const TotalProduction = props => {
       }
 
       legendHeaders = (headers, row) => {
-        // console.log('legendHeaders: ', headers, row)
         const dateArr = formatDate(headers[1])
         const year = dateArr[0]
         const date = new Date(dateArr[0], dateArr[1], dateArr[2])
@@ -290,7 +286,7 @@ const TotalProduction = props => {
               maxFiscalYear={maxFiscalYear}
               maxCalendarYear={maxCalendarYear} />
           </Grid>
-          <Grid item xs={12} md={7}>
+          <Grid item xs={12} md={12}>
             <StackedBarChart2
               key={`tpsbc__${ monthly }${ period }${ product }${ dataType }`}
 	            title={[commodity, ' ', <GlossaryTerm termKey={unitAbbrev}>{unitAbbrev}</GlossaryTerm>]}
@@ -316,12 +312,13 @@ const TotalProduction = props => {
               legendHeaders={legendHeaders}
               handleBarHover={d => handleBarHover(d)}
               svgTitle={svgTitle}
+              hideLegend={true}
             />
-            <Box fontStyle="italic" textAlign="left" fontSize="h6.fontSize">
-              <Link href='/downloads/production-by-month/'>Source file</Link>
-            </Box>
           </Grid>
-          <Grid item xs={12} md={5}>
+          <Grid item 
+            xs={12} 
+            md={12}
+            style={{ paddingBottom: 0 }}>
             <ComparisonTable
               key={`ct__${ monthly }${ period }${ product }`}
               ref={productionComparison}
@@ -331,6 +328,12 @@ const TotalProduction = props => {
               monthRange={monthRange}
             />
           </Grid>
+          <Grid item xs={12} md={12}
+            style={{ paddingBottom: 0, paddingTop: 0 }}>
+            <Box fontStyle="italic" textAlign="left" fontSize="h6.fontSize" m={0}>
+              <Link href='/downloads/production-by-month/'>Source file</Link>
+            </Box>
+          </Grid>
         </Grid>
       </>
     )
diff --git a/src/pages/index.mdx b/src/pages/index.mdx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+### Monthly Fact Sheet`
	`2`	`+`
	`3`	`+[Fact sheet](/fact-sheet) summarizing disbursements, revenue, and production data by month on federal and Native American lands.`