Merge pull request #3423 from OneCommunityGlobal/Yu_adjust_reports_chart_ui

Yu adjust reports chart UI

Author: one-community

src/components/Reports/TotalReport/TotalReportBarGraph.css

@@ -1,11 +1,20 @@
-.svg-container{
+.svg-container {
     width: 500px;
-    height: 350px;
-    margin: 10px 0px;
-    padding: 0px;
-}
-
-.svg-chart{
+    height: 450px;
+    margin: 10px 0;
+    padding: 0;
+  }
+  
+  .svg-chart {
     width: 100%;
     height: 100%;
-}
+  }
+  
+  .bar {
+    transition: opacity 0.2s;
+  }
+  
+  .bar:hover {
+    opacity: 0.7;
+  }
+  

src/components/Reports/TotalReport/TotalReportBarGraph.jsx

@@ -5,93 +5,90 @@ import './TotalReportBarGraph.css';
 function TotalReportBarGraph({ barData, range }) {
   const svgId = `svg-container-${range}`;
 
-  const drawChart = data => {
+  const drawChart = (data) => {
     data.sort((a, b) => (a.label > b.label ? 1 : -1));
-    const maxValue = Number(
-      data.reduce((prev, curr) => (prev.value - curr.value > 0 ? prev : curr)).value,
-    );
-    const margin = { top: 10, right: 8, bottom: 15, left: 20 };
-    const width = 500 - margin.left - margin.right;
-    const height = 300 - margin.top - margin.bottom;
-
-    const svg = d3.select(`#${svgId}`);
+
+    const svgWidth = 500;
+    const svgHeight = 450;             
+    const margin = { top: 10, right: 8, bottom: 100, left: 20 };
+    const width = svgWidth - margin.left - margin.right;
+    const height = svgHeight - margin.top - margin.bottom;
+
+    const maxValue = Math.max(...data.map(d => d.value));
+
+    const svg = d3
+      .select(`#${svgId}`)
+      .attr('width', svgWidth)
+      .attr('height', svgHeight);
+
     svg.selectAll('*').remove();
-    const chart = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
+
+    const chart = svg
+      .append('g')
+      .attr('transform', `translate(${margin.left}, ${margin.top})`);
 
     const xScale = d3
       .scaleBand()
+      .domain(data.map(d => d.label))
       .range([0, width])
-      .domain(data.map(s => s.label))
       .padding(0.4);
 
     const yScale = d3
       .scaleLinear()
-      .range([height, 10])
-      .domain([0, maxValue]);
+      .domain([0, maxValue])
+      .range([height, 0]);
 
     const colorScale = d3
       .scaleLinear()
       .domain([0, maxValue])
       .range(['darksalmon', 'darkslateblue']);
 
+    data.forEach(d => {
+      const x = xScale(d.label);
+      const barHeight = height - yScale(d.value);
+      const y = yScale(d.value);
+
+     
+      chart
+        .append('rect')
+        .attr('x', x)
+        .attr('y', y)
+        .attr('width', xScale.bandwidth())
+        .attr('height', barHeight)
+        .attr('fill', colorScale(d.value));
+
+    
+      const yText =
+        barHeight >= 30
+          ? y + barHeight / 2
+          : 
+            y - 10;
+
+      chart
+        .append('text')
+        .attr('x', x + xScale.bandwidth() / 2)
+        .attr('y', yText)
+        .attr('text-anchor', 'middle')
+        .style('fill', 'white')
+        .style('font-size', '20px')
+        .style('font-weight', 'bold')
+        .text(Number.isNaN(d.value) ? '' : d.value);
+    });
+
+   
     chart
       .append('g')
       .attr('transform', `translate(0, ${height})`)
-      .call(d3.axisBottom(xScale));
-
-    const barGroups = chart
-      .selectAll()
-      .data(data)
-      .enter()
-      .append('g');
-
-    barGroups
-      .append('rect')
-      .attr('class', 'bar')
-      .attr('x', d => xScale(d.label))
-      .attr('y', d => yScale(d.value))
-      .attr('height', d => height - yScale(d.value))
-      .attr('width', xScale.bandwidth())
-      .attr('fill', d => colorScale(d.value))
-      // eslint-disable-next-line no-unused-vars
-      .on('mouseenter', (event, i) => {
-        d3.selectAll('.value').attr('opacity', 0);
-        d3.select(event.currentTarget)
-          .transition()
-          .duration(300)
-          .attr('opacity', 0.6);
-        barGroups
-          .append('text')
-          .attr('class', 'value')
-          .attr('x', d => xScale(d.label) + xScale.bandwidth() / 2)
-          .attr('y', d => yScale(d.value))
-          .attr('text-anchor', 'middle')
-          .text(d => `${d.value}`)
-          .style('fill', 'black');
-
-        if (data[0].months) {
-          barGroups
-            .append('text')
-            .attr('class', 'value')
-            .attr('x', d => xScale(d.label) + xScale.bandwidth() / 2)
-            .attr('y', yScale(0) + 30)
-            .attr('text-anchor', 'middle')
-            .text(d => `${d.months} mos.`)
-            .style('fill', 'black');
-        }
-      })
-      .on('mouseleave', (event) => {
-        d3.selectAll('.value').attr('opacity', 1);
-        d3.select(event.currentTarget)
-          .transition()
-          .duration(300)
-          .attr('opacity', 1);
-        chart.selectAll('.value').remove();
-      });
+      .call(d3.axisBottom(xScale))
+      .selectAll('text')
+      .attr('dy', '1em')
+      .style('text-anchor', 'middle')
+      .style('font-size', '14px')
+      .style('fill', 'black');
   };
 
   useEffect(() => {
-    if (barData.length > 0) {
+    if (barData && barData.length) {
       drawChart(barData);
     }
   }, [barData]);