Fix legend font size issue (#33)

neesjanvaneck · Sep 16, 2022 · 925cffa · 925cffa
1 parent 3b664f8
commit 925cffa
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/components/ui/ClusterColorLegend/index.js b/src/components/ui/ClusterColorLegend/index.js
@@ -52,10 +52,12 @@ const ClusterColorLegend = observer(({ showTopClustersOnly, canvasWidth, legendW
 
     ctx.clearRect(0, 0, canvasWidth * visualizationStore.pixelRatio, canvasHeight * visualizationStore.pixelRatio);
 
-    ctx.font = `${12 * visualizationStore.pixelRatio}px ${font}`;
+    ctx.font = `${0.75 * visualizationStore.pixelRatio}rem ${font}`;
     ctx.textBaseline = 'middle';
     ctx.lineWidth = lineWidth * visualizationStore.pixelRatio;
 
+    const letterWidth = ctx.measureText('a');
+    const maxTextLength = Math.floor(((itemWidth - radius - textPadding) * visualizationStore.pixelRatio - 2 * letterWidth.width) / letterWidth.width);
     let hovered;
     legendItems.forEach((item, i) => {
       const itemX = i % 2 === 0 ? 0 : itemWidth;
@@ -72,7 +74,7 @@ const ClusterColorLegend = observer(({ showTopClustersOnly, canvasWidth, legendW
       // Draw text.
       const x = cx + radius + textPadding;
       const y = cy;
-      const textIsHovered = item.value.length > 18 && mouseCoord.length
+      const textIsHovered = item.value.length > maxTextLength && mouseCoord.length
         && mouseCoord[0] > itemX
         && mouseCoord[0] < itemX + itemWidth
         && mouseCoord[1] > itemY
@@ -89,7 +91,7 @@ const ClusterColorLegend = observer(({ showTopClustersOnly, canvasWidth, legendW
           text: item.value,
         };
       }
-      const itemText = trimTextEnd(item.value, 18);
+      const itemText = trimTextEnd(item.value, maxTextLength);
       ctx.fillStyle = uiStore.darkTheme ? color.colorDarkTheme : color.colorLightTheme;
       ctx.fillText(itemText, x * visualizationStore.pixelRatio, y * visualizationStore.pixelRatio);
     });

diff --git a/src/components/ui/LegendPanel/index.js b/src/components/ui/LegendPanel/index.js
@@ -10,7 +10,7 @@ import ScoreColorLegend from 'components/ui/ScoreColorLegend';
 import ScoreOptionsPanel from 'components/ui/ScoreOptionsPanel';
 import * as s from './styles';
 
-const sizeLegendPanelWidth = 76;
+const sizeLegendPanelWidth = 80;
 
 const LegendPanel = observer(() => {
   const configStore = useContext(ConfigStoreContext);

diff --git a/src/components/ui/ScoreColorLegend/index.js b/src/components/ui/ScoreColorLegend/index.js
@@ -61,7 +61,7 @@ const ScoreColorLegend = observer(({
     const scoreRangeDomain = visualizationStore.scoreColorLegendScoreRange.domain();
     tickScale.range([0, colorBarWidth]).domain(scoreRangeDomain);
     ctx.fillStyle = uiStore.darkTheme ? tickConfig.colorDarkTheme : tickConfig.colorLightTheme;
-    ctx.font = `${12 * visualizationStore.pixelRatio}px ${font}`;
+    ctx.font = `${0.75 * visualizationStore.pixelRatio}rem ${font}`;
     ctx.textAlign = 'center';
     const ticks = tickScale.ticks(5);
     _each(ticks, tick => {

diff --git a/src/components/ui/SizeLegend/index.js b/src/components/ui/SizeLegend/index.js
@@ -49,7 +49,7 @@ const SizeLegend = observer(({ canvasWidth, canvasHeight, customFont }) => {
 
   const draw = () => {
     ctx.clearRect(0, 0, canvasWidth * visualizationStore.pixelRatio, canvasHeight * visualizationStore.pixelRatio);
-    ctx.font = `${12 * visualizationStore.pixelRatio}px ${font}`;
+    ctx.font = `${0.75 * visualizationStore.pixelRatio}rem ${font}`;
     ctx.textBaseline = 'middle';
     ctx.lineWidth = lineWidth * visualizationStore.pixelRatio;
     ctx.strokeStyle = uiStore.darkTheme ? color.colorDarkTheme : color.colorLightTheme;