[DEV-10065] Update below-chart fonts (#1797)

* Update fonts for bottom elements * Remove config.fontSize option from chart, map, dashboard and data-bite * Remove mobile table fonts
CDCgov · Dec 24, 2024 · 009715f · 009715f
1 parent ffc9280
commit 009715f
Show file tree

Hide file tree

Showing 41 changed files with 294 additions and 246 deletions.
diff --git a/packages/chart/index.html b/packages/chart/index.html
@@ -45,7 +45,7 @@
   -->
 
     <!-- GENERIC CHART TYPES -->
-    <div class="react-container" data-config="/examples/private/demographic_standard.json"></div>
+    <div class="react-container" data-config="/examples/trends-nhsn.json"></div>
     <div class="react-container" data-config="/examples/cases-year.json"></div>
     <!-- <div class="react-container" data-config="/examples/test.json"></div> -->
     <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->

diff --git a/packages/chart/src/_stories/Chart.tooltip.stories.tsx b/packages/chart/src/_stories/Chart.tooltip.stories.tsx
@@ -22,7 +22,6 @@ export const Additional_Tooltip: Story = {
       showDownloadMediaButton: false,
       theme: 'theme-orange',
       animate: false,
-      fontSize: 'medium',
       lineDatapointStyle: 'hover',
       barHasBorder: 'false',
       isLollipopChart: false,

diff --git a/packages/chart/src/components/Annotations/components/AnnotationDraggable.tsx b/packages/chart/src/components/Annotations/components/AnnotationDraggable.tsx
@@ -23,7 +23,7 @@ import { HtmlLabel, CircleSubject, EditableAnnotation, Connector, Annotation as
 import { Drag } from '@visx/drag'
 import { MarkerArrow } from '@visx/marker'
 import { LinePath } from '@visx/shape'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { fontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 // styles
 import './AnnotationDraggable.styles.css'
@@ -134,7 +134,7 @@ const Annotations = ({ xScale, yScale, xScaleAnnotation, xMax, svgRef, onDragSta
                   </p>
                 </>
               )}
-              <div style={{ fontSize: fontSizes[config.fontSize] }} dangerouslySetInnerHTML={sanitizedData()} />
+              <div style={{ fontSize: fontSize }} dangerouslySetInnerHTML={sanitizedData()} />
             </div>
           </HtmlLabel>
           {annotation.connectionType === 'line' && (

diff --git a/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx b/packages/chart/src/components/Annotations/components/AnnotationDropdown.tsx
@@ -3,13 +3,13 @@ import ConfigContext from '../../../ConfigContext'
 import './AnnotationDropdown.styles.css'
 import Icon from '@cdc/core/components/ui/Icon'
 import Annotation from '..'
-import { fontSizes } from '@cdc/core/helpers/cove/fontSettings'
+import { fontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 const AnnotationDropdown = () => {
   const { currentViewport: viewport, config } = useContext(ConfigContext)
   const [expanded, setExpanded] = useState(false)
 
-  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSizes[config?.fontSize]}px`
+  const titleFontSize = ['sm', 'xs', 'xxs'].includes(viewport) ? '13px' : `${fontSize}px`
 
   const {
     config: { annotations }

diff --git a/packages/chart/src/components/Axis/Categorical.Axis.tsx b/packages/chart/src/components/Axis/Categorical.Axis.tsx
@@ -95,7 +95,7 @@ const CategoricalYAxis = ({ yMax, leftSize, max, xMax }) => {
           barStacks.map(barStack =>
             barStack.bars.map(bar => {
               const isLastIndex = config.yAxis.categories.length - 1 === barStack.index
-              const textSize = fontSize[config.fontSize] / 1.3
+              const textSize = fontSize / 1.3
               const textColor = chroma(bar.color).luminance() < 0.4 ? '#fff' : '#000'
               const textWidth = getTextWidth(bar.key, `normal ${textSize}px sans-serif`)
               const displayText = Number(textWidth) < bar.width && bar.height > textSize

diff --git a/packages/chart/src/components/BarChart/components/BarChart.Horizontal.tsx b/packages/chart/src/components/BarChart/components/BarChart.Horizontal.tsx
@@ -136,7 +136,7 @@ export const BarChartHorizontal = () => {
                   const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  const textWidth = getTextWidth(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  const textWidth = getTextWidth(barDefaultLabel, `normal ${fontSize}px sans-serif`)
                   const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position

diff --git a/packages/chart/src/components/BarChart/components/BarChart.StackedHorizontal.tsx b/packages/chart/src/components/BarChart/components/BarChart.StackedHorizontal.tsx
@@ -69,7 +69,7 @@ const BarChartStackedHorizontal = () => {
                 const yAxisTooltip = config.runtime.yAxis.label
                   ? `${config.runtime.yAxis.label}: ${yAxisValue}`
                   : yAxisValue
-                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>

diff --git a/packages/chart/src/components/DeviationBar.jsx b/packages/chart/src/components/DeviationBar.jsx
@@ -7,6 +7,7 @@ import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import useIntersectionObserver from '../hooks/useIntersectionObserver'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
+import { fontSize } from '@cdc/core/helpers/cove/fontSettings'
 
 export default function DeviationBar({ height, xScale }) {
   const {
@@ -30,7 +31,6 @@ export default function DeviationBar({ height, xScale }) {
       : roundingStyle === 'finger'
       ? '15px'
       : '0px'
-  const fontSize = { small: 16, medium: 18, large: 20 }
   const isRounded = config.barStyle === 'rounded'
   const target = Number(config.xAxis.target)
   const seriesKey = config.series[0].dataKey
@@ -65,7 +65,7 @@ export default function DeviationBar({ height, xScale }) {
       const firstBarValue = data[0][seriesKey]
       const barPosition = firstBarValue < target ? 'left' : 'right'
       const label = `${config.xAxis.targetLabel} ${formatNumber(config.xAxis.target || 0, 'left')}`
-      const labelWidth = getTextWidth(label, `bold ${fontSize[config.fontSize]}px sans-serif`)
+      const labelWidth = getTextWidth(label, `bold ${fontSize}px sans-serif`)
       let labelY = config.isLollipopChart ? lollipopBarHeight / 2 : Number(config.barHeight) / 2
       let paddingX = 0
       let labelX = 0
@@ -165,10 +165,7 @@ export default function DeviationBar({ height, xScale }) {
           config.heights.horizontal = totalheight
 
           // text,labels postiions
-          const textWidth = getTextWidth(
-            formatNumber(barValue, 'left'),
-            `normal ${fontSize[config.fontSize]}px sans-serif`
-          )
+          const textWidth = getTextWidth(formatNumber(barValue, 'left'), `normal ${fontSize}px sans-serif`)
           const textFits = textWidth < barWidth - 6
           const textX = barBaseX
           const textY = barY + barHeight / 2

diff --git a/packages/chart/src/components/EditorPanel/components/Panels/Panel.Visual.tsx b/packages/chart/src/components/EditorPanel/components/Panels/Panel.Visual.tsx
@@ -136,13 +136,6 @@ const PanelVisual: FC<PanelProps> = props => {
             />
           </fieldset>
         )}
-        <Select
-          value={config.fontSize}
-          fieldName='fontSize'
-          label='Font Size'
-          updateField={updateField}
-          options={['small', 'medium', 'large']}
-        />
         {visHasBarBorders() && (
           <Select
             value={config.barHasBorder}