Frontend: Refactor DisparityBarChart with Vega into `StackedSharesB…

…arChart` with D3 (#3898)

# Description and Motivation
<!--- bulleted, high level items. use keywords (eg "closes #144" or
"fixes #4323") -->


- closes #3868 
- renames `DisparityBar` to `StackedSharesBar`
- moves some shared piece between RateBar and StackedSharesBar
- renames some existing `100kBar` to `RateBar`


## Has this been tested? How?

tests passing

## Screenshots (if appropriate)


![image](https://github.com/user-attachments/assets/b289f441-3e8c-4ccb-8d61-23fcda7ca852)
<img width="1188" alt="Screenshot 2025-01-08 at 10 35 22 AM"
src="https://github.com/user-attachments/assets/95eb0238-d24a-48e2-90fe-0cbe60156e46"
/>
<img width="942" alt="Screenshot 2025-01-08 at 10 35 59 AM"
src="https://github.com/user-attachments/assets/ce1cecd5-6aa3-418f-8db6-c6a5a12f0436"
/>
<img width="942" alt="Screenshot 2025-01-08 at 10 36 48 AM"
src="https://github.com/user-attachments/assets/b7fd3b72-0fc4-4548-8404-7f97e5061a3a"
/>


## Types of changes

(leave all that apply)

- New content or feature
- Refactor / chore

## New frontend preview link is below in the Netlify comment 😎

frontend/src/cards/RateBarChartCard.tsx

@@ -1,5 +1,5 @@
 import { RateBarChart } from '../charts/rateBarChart/Index'
-import { addComparisonAllsRowToIntersectionalData } from '../charts/rateBarChart/helpers'
+import { addComparisonAllsRowToIntersectionalData } from '../charts/sharedBarChartPieces/helpers'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import type { DataTypeConfig, MetricId } from '../data/config/MetricConfigTypes'
 import { isPctType } from '../data/config/MetricConfigUtils'

frontend/src/cards/DisparityBarChartCard.tsx → frontend/src/cards/StackedSharesBarChartCard.tsx

@@ -1,4 +1,4 @@
-import { DisparityBarChart } from '../charts/disparityBarChart/Index'
+import { StackedBarChart } from '../charts/stackedSharesBarChart/Index'
 import { generateChartTitle, generateSubtitle } from '../charts/utils'
 import type { DataTypeConfig, MetricId } from '../data/config/MetricConfigTypes'
 import { getMetricIdToConfigMap } from '../data/config/MetricConfigUtils'
@@ -20,10 +20,7 @@ import {
   SEX,
 } from '../data/utils/Constants'
 import type { Fips } from '../data/utils/Fips'
-import {
-  shouldShowAltPopCompare,
-  splitIntoKnownsAndUnknowns,
-} from '../data/utils/datasetutils'
+import { splitIntoKnownsAndUnknowns } from '../data/utils/datasetutils'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import { useGuessPreloadHeight } from '../utils/hooks/useGuessPreloadHeight'
 import type { ScrollableHashId } from '../utils/hooks/useStepObserver'
@@ -33,7 +30,7 @@ import CAWPOverlappingRacesAlert from './ui/CAWPOverlappingRacesAlert'
 import MissingDataAlert from './ui/MissingDataAlert'
 import UnknownsAlert from './ui/UnknownsAlert'
 
-interface DisparityBarChartCardProps {
+interface StackedSharesBarChartCardProps {
   key?: string
   demographicType: DemographicType
   dataTypeConfig: DataTypeConfig
@@ -42,20 +39,9 @@ interface DisparityBarChartCardProps {
   className?: string
 }
 
-// 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 DisparityBarChartCard(
-  props: DisparityBarChartCardProps,
+export default function StackedSharesBarChartCard(
+  props: StackedSharesBarChartCardProps,
 ) {
-  return (
-    <DisparityBarChartCardWithKey
-      key={props.dataTypeConfig.dataTypeId + props.demographicType}
-      {...props}
-    />
-  )
-}
-
-function DisparityBarChartCardWithKey(props: DisparityBarChartCardProps) {
   const preloadHeight = useGuessPreloadHeight(
     [700, 1000],
     props.demographicType === SEX,
@@ -68,7 +54,7 @@ function DisparityBarChartCardWithKey(props: DisparityBarChartCardProps) {
     exclude(ALL, NON_HISPANIC),
   )
 
-  // Population Comparison Metric is required for the Disparity Bar Chart.
+  // Population Comparison Metric is required
   // If MetricConfig supports known breakdown metric, prefer this metric.
   const metricIdToConfigMap = getMetricIdToConfigMap([shareConfig])
   const metricIds = Object.keys(metricIdToConfigMap) as MetricId[]
@@ -145,7 +131,8 @@ function DisparityBarChartCardWithKey(props: DisparityBarChartCardProps) {
               <>
                 <ChartTitle title={chartTitle} subtitle={subtitle} />
 
-                <DisparityBarChart
+                <StackedBarChart
+                  fips={props.fips}
                   data={knownData}
                   lightMetric={
                     shareConfig.populationComparisonMetric ?? shareConfig
@@ -156,7 +143,6 @@ function DisparityBarChartCardWithKey(props: DisparityBarChartCardProps) {
                   demographicType={props.demographicType}
                   metricDisplayName={shareConfig.shortLabel}
                   filename={chartTitle}
-                  showAltPopCompare={shouldShowAltPopCompare(props)}
                 />
               </>
             )}