Merge branch 'master' into fix/data-import-templates-cycle

openforis · Oct 12, 2023 · 49851ec · 49851ec
2 parents 4c33bb7 + dc962a6
commit 49851ec
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 26 deletions.
diff --git a/webapp/views/App/views/Home/Dashboard/Dashboard.js b/webapp/views/App/views/Home/Dashboard/Dashboard.js
@@ -54,7 +54,7 @@ const Dashboard = () => {
             )}
             {!isSurveyInfoEmpty && !Survey.isTemplate(surveyInfo) && <RecordsSummary />}
             {activeTab === 'Dashboard' && !isSurveyInfoEmpty && (
-              <div style={{ display: 'flex', justifyContent: 'space-between', gap: '3em', width: '90%' }}>
+              <div className="chart-container">
                 <StorageSummary />
                 <RecordsByUser />
                 {hasSamplingPointData && <SamplingDataChart surveyInfo={surveyInfo} />}

diff --git a/webapp/views/App/views/Home/Dashboard/Dashboard.scss b/webapp/views/App/views/Home/Dashboard/Dashboard.scss
@@ -5,4 +5,13 @@
   grid-auto-rows: minmax(auto, min-content);
   // grid-template-rows: auto auto auto;  
   grid-column-gap: 10px;
+  padding-left: 20px;
+}
+
+.chart-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 3em;
+  width: 90%;
+  margin-top: 20px;
 }
diff --git a/webapp/views/App/views/Home/Dashboard/UserSummary/DailyRecordsByUser.js b/webapp/views/App/views/Home/Dashboard/UserSummary/DailyRecordsByUser.js
@@ -182,7 +182,7 @@ const DailyRecordsByUser = () => {
 
     legend
       .append('rect')
-      .attr('x', width + 10) // Adjusted x position
+      .attr('x', width + 10)
       .attr('y', (d, i) => i * 20)
       .attr('width', 12)
       .attr('height', 12)

diff --git a/webapp/views/App/views/Home/Dashboard/UserSummary/RecordsByUser.js b/webapp/views/App/views/Home/Dashboard/UserSummary/RecordsByUser.js
@@ -7,55 +7,76 @@ const RecordsByUser = () => {
   const ref = useRef()
   const { userCounts } = useContext(RecordsSummaryContext)
 
-  const [totalCount, setTotalCount] = useState(0) // Add this line
+  const [totalCount, setTotalCount] = useState(0)
 
   useEffect(() => {
     const data = userCounts.map((userCount) => parseInt(userCount.count))
     const users = userCounts.map((userCount) => (userCount.owner_name ? userCount.owner_name : userCount.owner_email))
     const newTotalCount = data.reduce((a, b) => a + b, 0)
     setTotalCount(newTotalCount)
 
-    // Select the SVG if it exists, otherwise create a new one
+    const padding = { top: 20, right: 20, bottom: 20, left: 20 }
+
     let svg = d3.select(ref.current).select('svg')
     if (svg.empty()) {
-      svg = d3.select(ref.current).append('svg').attr('width', 500).attr('height', 350)
+      svg = d3
+        .select(ref.current)
+        .append('svg')
+        .attr('width', 500 + padding.left + padding.right)
+        .attr('height', 350 + padding.top + padding.bottom)
     }
-    // Clear the SVG
     svg.selectAll('*').remove()
 
     const xScale = d3
       .scaleLinear()
       .domain([0, Math.max(20, parseInt(d3.max(data)) + parseInt(d3.max(data)) * 0.1)])
-      .range([0, 500])
-    const yScale = d3.scaleBand().domain(users).range([0, 300]).padding(0.1)
+      .range([0 + padding.left, 500 - padding.right])
+    const yScale = d3
+      .scaleBand()
+      .domain(users)
+      .range([0 + padding.top, 300 - padding.bottom])
+      .padding(0.1)
 
     const xAxis = d3.axisBottom(xScale)
-    const yAxis = d3.axisLeft(yScale)
+    const yAxis = d3.axisLeft(yScale).tickFormat(() => '')
+
+    svg.append('g').attr('transform', `translate(0,300)`).call(xAxis)
+    svg.append('g').attr('transform', `translate(${padding.left},${padding.bottom})`).call(yAxis)
 
-    svg.append('g').attr('transform', 'translate(0,300)').call(xAxis)
-    svg.append('g').call(yAxis)
+    const tooltip = d3
+      .select('body')
+      .append('div')
+      .style('position', 'absolute')
+      .style('z-index', '10')
+      .style('visibility', 'hidden')
+      .style('background', '#fff')
+      .style('padding', '5px')
+      .style('border', '1px solid #000')
 
     svg
       .selectAll('rect')
       .data(data)
       .enter()
       .append('rect')
-      .attr('x', 0)
-      .attr('y', (d, i) => yScale(users[i]))
+      .attr('x', padding.left)
+      .attr('y', (d, i) => yScale(users[i]) + padding.top)
       .attr('width', (d) => xScale(d))
       .attr('height', yScale.bandwidth())
-      .attr('fill', '#b3cde3') // Changed the color of the bars to "#b3cde3"
+      .attr('fill', '#b3cde3')
+      .on('mouseover', function (d) {
+        d3.select(this).attr('fill', '#6baed6')
 
-    svg
-      .selectAll('.label')
-      .data(data)
-      .enter()
-      .append('text')
-      .attr('class', 'label')
-      .text((d) => d)
-      .attr('x', (d) => xScale(d) + 10)
-      .attr('y', (d, i) => yScale(users[i]) + yScale.bandwidth() / 2 + 10)
-      .attr('fill', 'black')
+        tooltip.text(d)
+        return tooltip.style('visibility', 'visible')
+      })
+      .on('mousemove', function (event) {
+        return tooltip.style('top', event.pageY - 10 + 'px').style('left', event.pageX + 10 + 'px')
+      })
+      .on('mouseout', function () {
+        d3.select(this).attr('fill', '#b3cde3')
+
+        return tooltip.style('visibility', 'hidden')
+      })
 
     svg.selectAll('.tick').attr('color', 'black')
 
@@ -66,8 +87,8 @@ const RecordsByUser = () => {
       .append('text')
       .attr('class', 'userLabel')
       .text((d) => d)
-      .attr('x', 0)
-      .attr('y', (d) => yScale(d) + yScale.bandwidth() / 2)
+      .attr('x', padding.left)
+      .attr('y', (d) => yScale(d) + yScale.bandwidth() / 2 + padding.top)
       .attr('fill', 'black')
   }, [userCounts])