665 changed the timeline years display

client/CHANGELOG.md

@@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file.
 
 ### Changed
 
+- Changed labeling for timeline data ([#665](https://github.com/project-lux/lux-frontend/issues/665)).
+
 ### Fixed
 
 ### Removed

client/src/features/timeline/Graph.tsx

@@ -87,13 +87,19 @@ const Graph: React.FC<IProps> = ({
   }
 
   useEffect(() => {
+    const showEras = TimelineParser.showYearEra(yearsArray)
     setGraphData(
       yearsArray.map((year) => {
         const barData = timelineData.hasOwnProperty(year)
           ? timelineData[year]
           : { total: 0 }
+        let yearLabel = year
+        // If any of the years are negative, set the year, display the era (BCE/CE) in the label
+        if (showEras) {
+          yearLabel = TimelineParser.getYearWithLabel(year)
+        }
         return {
-          year: TimelineParser.getYearWithLabel(year),
+          year: yearLabel,
           yearKey: year,
           ...barData,
         }

client/src/features/timeline/List.tsx

@@ -63,6 +63,7 @@ const List: React.FC<IProps> = ({
     setDisplayLength(displayLength - unitLength)
   }
 
+  const showEras = TimelineParser.showYearEra(yearsArray)
   return (
     <React.Fragment>
       <dl data-testid="timeline-list-container">
@@ -71,7 +72,7 @@ const List: React.FC<IProps> = ({
             <HoverableRow>
               <Col xs={12} sm={12} md={6} lg={12} xl={6}>
                 <StyledDt data-testid={`${year}-label`}>
-                  {TimelineParser.getYearWithLabel(year)}
+                  {showEras ? TimelineParser.getYearWithLabel(year) : year}
                 </StyledDt>
               </Col>
               <StyledResponsiveCol xs={12} sm={12} md={6} lg={12} xl={6}>

client/src/lib/parse/timeline/TimelineParser.ts

@@ -25,6 +25,21 @@ export default class TimelineParser {
     return year.includes('-') ? `${year.substring(1)} B.C.E.` : `${year} C.E.`
   }
 
+  /**
+   * Determines if any of the years are in the BCE era
+   * @param {Array<string>} years; the array of years to check
+   * @returns {boolean}
+   */
+  static showYearEra(years: Array<string>): boolean {
+    if (
+      parseInt(years[0], 10) < 0 ||
+      parseInt(years[years.length - 1], 10) < 0
+    ) {
+      return true
+    }
+    return false
+  }
+
   /**
    * Returns the year from the date string provided
    * @param {string} facetValue; the date provided by the data as a string