Frontend: Refactors Rate bar chart to D3

frontend/playwright-tests/depression.nightly.spec.ts

@@ -3,26 +3,55 @@ import { test } from '@playwright/test'
 test('Depression Flow', async ({ page }) => {
   await page.goto('/exploredata?mls=1.depression-3.00&group1=All')
   await page
-    .getByLabel(
-      'Map showing Depression in the United States : including data from 50 states/territories'
-    )
-    .getByRole('img')
-  await page.getByRole('button', { name: 'Expand state/territory rate' }).click();
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Depression in the United' })
+    .click()
+  await page
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Ages 18+' })
+    .click()
+  await page
+    .getByRole('button', { name: 'Rates over time', exact: true })
+    .click()
+  await page
+    .getByRole('heading', { name: 'Depression cases over time in' })
+    .click()
   await page
-    .getByLabel(
-      'Bar Chart showing Depression in the United States, by Race and Ethnicity'
-    )
-    .getByRole('img')
+    .locator('#rates-over-time')
+    .getByRole('heading', { name: 'Ages 18+' })
     .click()
+  await page.getByText('cases per 100k adults →').click()
+  await page.getByText('time →').click()
+  await page
+    .locator('#rates-over-time')
+    .getByText('Note. (NH) indicates ‘Non-')
+    .click()
+  await page.getByRole('button', { name: 'Rate chart' }).click()
+  await page
+    .locator('#rate-chart')
+    .getByRole('heading', { name: 'Depression in the United' })
+    .click()
+  await page
+    .locator('#rate-chart')
+    .getByRole('heading', { name: 'Ages 18+' })
+    .click()
+  await page.locator('#rate-chart').getByText('All').click()
+  await page.locator('#rate-chart').getByText('race and ethnicity').click()
+  await page.locator('#rate-chart').getByText('cases per 100k adults').click()
   await page.getByRole('button', { name: 'Unknown demographic map' }).click()
+  await page.getByText('No unknown values for race').click()
+  await page.getByRole('button', { name: 'Data table' }).click()
+  await page
+    .getByRole('heading', { name: 'Summary for depression in the' })
+    .click()
   await page
-    .getByRole('heading', {
-      name: 'Share of total adult depression cases with unknown race and ethnicity in the United States',
-    })
+    .getByRole('figure', { name: 'Summary for depression in the' })
+    .locator('h4')
     .click()
+  await page.getByRole('columnheader', { name: 'Race and Ethnicity' }).click()
   await page
-    .getByText(
-      'No unknown values for race and ethnicity reported in this dataset at the state/t'
-    )
+    .getByRole('columnheader', { name: 'Cases of depression per 100k' })
     .click()
+  await page.getByRole('columnheader', { name: 'Share of total adult' }).click()
+  await page.getByRole('columnheader', { name: 'Population share' }).click()
 })

frontend/playwright-tests/diabetes.ci.spec.ts

@@ -42,7 +42,7 @@ test('Diabetes County', async ({ page }) => {
     .locator('#rate-map')
     .getByRole('heading', { name: 'Ages 18+' })
     .click()
-  await page.getByLabel('Legend for rate map').getByRole('img').click()
+  await page.getByLabel('Legend for rate map').click()
   await page.locator('li').filter({ hasText: 'Denver County' }).click()
   await page
     .locator('#rate-chart')

frontend/playwright-tests/modals.ci.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test.setTimeout(120000);
+test.setTimeout(120000)
 
 test('Topic Info Modal from Sidebar', async ({ page }) => {
   // Compare Topics Page Loads
   await page.goto(
     '/exploredata?mls=1.incarceration-3.poverty-5.13&mlp=comparevars&dt1=prison',
-    { waitUntil: 'commit' }
+    { waitUntil: 'commit' },
   )
 
   // Clicking topic info modal button launched modal
@@ -27,24 +27,29 @@ test('Topic Info Modal from Sidebar', async ({ page }) => {
 
 test.describe('Topic Info Modal from Map Legend', () => {
   test('Topic Info Modal from Map Legend', async ({ page }) => {
-    await page.goto('/', { waitUntil: 'commit' });    
-    await page.locator('#landingPageCTA').click();
-    const reportSection = await page.getByRole('heading', { name: 'Uninsurance in FL' }).locator('..');
-    await reportSection.locator('text=Explore this report').click();
-    await page.locator('#rate-map').getByRole('button', { name: 'Click for more info on uninsured people' }).click();
-  });
-});
+    await page.goto('/', { waitUntil: 'commit' })
+    await page.locator('#landingPageCTA').click()
+    const reportSection = await page
+      .getByRole('heading', { name: 'Uninsurance in FL' })
+      .locator('..')
+    await reportSection.locator('text=Explore this report').click()
+    await page
+      .locator('#rate-map')
+      .getByRole('button', { name: 'Click for more info on uninsured people' })
+      .click()
+  })
+})
 
 test('Multiple Maps 1 (Left Side)', async ({ page }) => {
   // Compare Topics Page With Multimap Open Loads
   await page.goto(
     '/exploredata?mls=1.incarceration-3.poverty-5.13&mlp=comparevars&dt1=prison&multiple-maps=true',
-    { waitUntil: 'commit' }
+    { waitUntil: 'commit' },
   )
   await expect(
     page.getByRole('heading', {
       name: 'Prison incarceration in Georgia across all race and ethnicity groups',
-    })
+    }),
   ).toBeVisible()
 
   // CLOSE IT
@@ -56,21 +61,21 @@ test('Multiple Maps 2 (Right Side)', async ({ page }) => {
   // Compare Topics Page Loads
   await page.goto(
     '/exploredata?mls=1.incarceration-3.poverty-5.13&mlp=comparevars&dt1=prison',
-    { waitUntil: 'commit' }
+    { waitUntil: 'commit' },
   )
 
   // Clicking right side multiple maps button launches POVERTY multimap modal
   await page
     .locator('#rate-map2')
     .getByLabel(
-      'Launch multiple maps view with side-by-side maps of each race and ethnicity group'
+      'Launch multiple maps view with side-by-side maps of each race and ethnicity group',
     )
     .click()
   await expect(page).toHaveURL(/.*multiple-maps2=true/)
   await expect(
     page.getByRole('heading', {
       name: 'People below the poverty line in Georgia across all race and ethnicity groups',
-    })
+    }),
   ).toBeVisible()
 
   // CLOSE IT

frontend/playwright-tests/voter_participation.spec.ts

@@ -23,7 +23,7 @@ test('Voter Participation Flow', async ({ page }) => {
     .locator('#rate-chart')
     .getByRole('heading', { name: 'U.S. citizens, Ages 18+' })
     .click()
-  await page.getByLabel('Bar Chart showing Voter').getByRole('img').click()
+  await page.getByLabel('Bar Chart showing Voter').click()
   await page.getByRole('heading', { name: 'Share of all voter' }).click()
   await page.getByText('No unknown values for race').click()
   await page

frontend/src/cards/SimpleBarChartCard.tsx → frontend/src/cards/RateBarChartCard.tsx

@@ -1,5 +1,5 @@
-import { addComparisonAllsRowToIntersectionalData } from '../charts/simpleBarHelperFunctions'
-import { SimpleHorizontalBarChart } from '../charts/SimpleHorizontalBarChart'
+import { addComparisonAllsRowToIntersectionalData } from '../charts/rateBarChart/helpers'
+import { RateBarChart } from '../charts/rateBarChart/Index'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import type { DataTypeConfig, MetricId } from '../data/config/MetricConfigTypes'
 import { isPctType } from '../data/config/MetricConfigUtils'
@@ -35,8 +35,7 @@ import MissingDataAlert from './ui/MissingDataAlert'
 /* minimize layout shift */
 const PRELOAD_HEIGHT = 668
 
-interface SimpleBarChartCardProps {
-  key?: string
+interface RateBarChartCardProps {
   demographicType: DemographicType
   dataTypeConfig: DataTypeConfig
   fips: Fips
@@ -46,16 +45,7 @@ interface SimpleBarChartCardProps {
 
 // This wrapper ensures the proper key is set to create a new instance when
 // required rather than relying on the card caller.
-export default function SimpleBarChartCard(props: SimpleBarChartCardProps) {
-  return (
-    <SimpleBarChartCardWithKey
-      key={props.dataTypeConfig.dataTypeId + props.demographicType}
-      {...props}
-    />
-  )
-}
-
-function SimpleBarChartCardWithKey(props: SimpleBarChartCardProps) {
+export default function RateBarChartCard(props: RateBarChartCardProps) {
   const rateConfig =
     props.dataTypeConfig.metrics?.per100k ??
     props.dataTypeConfig.metrics?.pct_rate ??
@@ -185,11 +175,10 @@ function SimpleBarChartCardWithKey(props: SimpleBarChartCardProps) {
             ) : (
               <>
                 <ChartTitle title={chartTitle} subtitle={subtitle} />
-
-                <SimpleHorizontalBarChart
+                <RateBarChart
                   data={data}
                   demographicType={props.demographicType}
-                  metric={rateConfig}
+                  metricConfig={rateConfig}
                   filename={filename}
                   usePercentSuffix={isPctType(rateConfig.type)}
                   fips={props.fips}

frontend/src/charts/rateBarChart/BarChartTooltip.tsx

@@ -0,0 +1,28 @@
+export interface BarChartTooltipData {
+  x: number
+  y: number
+  content: string
+}
+
+interface BarChartTooltipProps {
+  data: BarChartTooltipData | null
+}
+
+export default function BarChartTooltip({ data }: BarChartTooltipProps) {
+  if (!data) return null
+  const clickIsLeftHalfOfScreen = data.x < window.innerWidth / 2
+  return (
+    <div
+      className='bg-white text-altBlack rounded-sm p-3 text-title absolute cursor-help z-top shadow-raised opacity-95 smMd:whitespace-nowrap'
+      style={{
+        left: `${data.x}px`,
+        top: `${data.y}px`,
+        transform: clickIsLeftHalfOfScreen
+          ? 'translate(0, 5%)'
+          : 'translate(-100%, 5%)',
+      }}
+    >
+      {data.content}
+    </div>
+  )
+}

frontend/src/charts/rateBarChart/EndOfBarLabel.tsx

@@ -0,0 +1,32 @@
+import type { MetricConfig } from '../../data/config/MetricConfigTypes'
+import { formatValue } from './helpers'
+
+interface EndOfBarLabelProps {
+  metricConfig: MetricConfig
+  d: Record<string, any>
+  shouldLabelBeInside: boolean
+  barWidth: number
+  yScale: any
+  barLabelColor: string
+  isTinyAndUp: boolean
+}
+
+export default function EndOfBarLabel(props: EndOfBarLabelProps) {
+  return (
+    <text
+      x={props.shouldLabelBeInside ? props.barWidth - 5 : props.barWidth + 5}
+      y={props.yScale.bandwidth() / 2}
+      dy='1.3em'
+      textAnchor={props.shouldLabelBeInside ? 'end' : 'start'}
+      className={`text-smallest ${props.barLabelColor}`}
+      aria-hidden='true'
+      tabIndex={-1}
+    >
+      {formatValue(
+        props.d[props.metricConfig.metricId],
+        props.metricConfig,
+        props.isTinyAndUp,
+      )}
+    </text>
+  )
+}