refactor: increase bar chart race size

Author: arcstur

src/Components/Infographics/BarChartRace/barChartRace.jsx

@@ -28,6 +28,7 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
   const [dataset, setDataset] = useState(null); // Processed data
   const [currentKeyframeState, setCurrentKeyFrameState] = useState(0); // Current keyframe state
   const [downloadPercentage, setDownloadPercentage] = useState(null);
+  const [graphicsPanelHeight, setGraphicsPanelHeight] = useState(getGraphicsPanelHeight());
   const keyframesRef = useRef([]); // Stores all keyframes
   const timeoutRef = useRef(null); // Handles animation timing
   const abortControllerRef = useRef(null);
@@ -72,7 +73,8 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
       };
 
       const width = container.clientWidth;
-      const keyframes = initializeChart(svgRef, dataset, width, title, colorPaletteArray, timeUnit, locale);
+      const maxHeight = graphicsPanelHeight;
+      const keyframes = initializeChart(svgRef, dataset, width, maxHeight, title, colorPaletteArray, timeUnit, locale);
       keyframesRef.current = keyframes;
 
       // Initialize chart with the first keyframe.
@@ -89,8 +91,20 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
         currentSvg.remove();
       }
     };
+  }, [dataset, timeUnit, title, colorPalette, locale, graphicsPanelHeight]);
 
-  }, [dataset, timeUnit, title, colorPalette, locale]);
+  function getGraphicsPanelHeight() {
+    return document.getElementById("graphicsPanel").clientHeight;
+  };
+
+  useEffect(() => {
+    function handleResize() {
+      setGraphicsPanelHeight(getGraphicsPanelHeight());
+    }
+    window.addEventListener('resize', handleResize);
+    // cleanup:
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   const animationDelay = () => {
     return 1000 / speed;
@@ -255,7 +269,7 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
   }
 
   return (
-    <div id="parent-container" className="relative p-4">
+    <div id="parent-container" className="relative p-4" style={{height: "90%"}}>
       <DownloadingAlert/>
       <div id="play-controls" className="flex items-center">
         <button
@@ -274,7 +288,7 @@ const BarChartRace = ({ title, speed, colorPalette, timeUnit, barRaceData, isDow
           onChange={onRangeChange}
         />
       </div>
-      <div id="container"></div>
+      <div id="container" style={{height: "95%"}}></div>
     </div>
   );
 };

src/Components/Infographics/BarChartRace/barChartRaceUtils.js

@@ -5,7 +5,6 @@ import * as d3 from "d3";
 
 // Constants
 export const margin = { top: 16, right: 16, bottom: 16, left: 0 }; // Added padding/margin
-export const barSize = 38;
 export const maxNumberVisible = 12;
 export let color;
 
@@ -14,9 +13,10 @@ let updateBars, updateAxis, updateLabels, updateTicker, x;
 let dateFormatter;
 
 // Function to initialize the chart
-export const initializeChart = (svgRef, dataset, width, title, colorPaletteArray, timeUnit, locale) => {
+export const initializeChart = (svgRef, dataset, width, maxHeight, title, colorPaletteArray, timeUnit, locale) => {
   const chartMarginTop = 30;
   const chartMarginBottom = 12;
+  const barSize = 0.8 * (maxHeight - margin.top - margin.bottom - chartMarginBottom)/maxNumberVisible;
 
    // Create SVG element
   svgRef.current = d3
@@ -75,9 +75,9 @@ export const initializeChart = (svgRef, dataset, width, title, colorPaletteArray
 
   // Initialize update functions
   updateBars = bars(svgRef.current, x, y, prev, next);
-  updateAxis = axis(svgRef.current, x, y, width);
+  updateAxis = axis(svgRef.current, x, y, width, barSize);
   updateLabels = labels(svgRef.current, x, y, prev, next);
-  updateTicker = ticker(svgRef.current, width, keyframes);
+  updateTicker = ticker(svgRef.current, width, keyframes, barSize);
 
   return keyframes;
 }
@@ -97,7 +97,7 @@ export const updateChart = (keyframe, transition) => {
 // Helper functions
 
 // Ticker function
-function ticker(svgRef, width, keyframes) {
+function ticker(svgRef, width, keyframes, barSize) {
   const now = svgRef
     .append("text")
     .style("font", `bold ${barSize}px var(--sans-serif)`)
@@ -198,7 +198,7 @@ function textTween(a, b) {
 }
 
 // Axis function
-function axis(svgRef, x, y, width) {
+function axis(svgRef, x, y, width, barSize) {
   const g = svgRef
     .append("g")
     .attr("transform", `translate(0,${margin.top})`);

src/Pages/Infographics.jsx

@@ -138,7 +138,7 @@ const Infographics = () => {
           <div style={{minHeight: "82vh"}} className="flex-1 border dark:border-gray-800 bg-white dark:bg-gray-600">
             <CodeEditor onCodeChange={handleCodeChange} handleFetchChartData={getChartData} isLoading={isLoading} errorMessage={error}/>
           </div>
-          <div style={{minHeight: "82vh", minWidth: "50%" }} className="flex-1 border dark:border-gray-800 relative overflow-x-auto bg-white dark:bg-gray-600">
+          <div id="graphicsPanel" style={{minHeight: "82vh", minWidth: "50%" }} className="flex-1 border dark:border-gray-800 relative overflow-x-auto bg-white dark:bg-gray-600">
             {isLoading && <Overlay />}
             {error && <div className="flex items-center justify-center mt-7"><ErrorAlert alertText={getContent(error) || error} /></div>}
             {Object.keys(chartData).length < 1 && !error && <div className="flex items-center justify-center mt-7"><InfoAlert alertText={getContent("preview-no-data")} /></div>}