Merge pull request #470 from wearepal/units-beta

fixes to bar chart, format changes to histogram
wearepal · Dec 19, 2024 · eafe11b · eafe11b
2 parents 81b23ea + 2be839b
commit eafe11b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 16 deletions.
diff --git a/app/javascript/projects/analysis_panel_tools/charts/bar.tsx b/app/javascript/projects/analysis_panel_tools/charts/bar.tsx
@@ -11,7 +11,14 @@ export const GenerateBarChart = ({ chartData }: BarChartProps) => {
     const [h, w, m, bar_pad] = [300, 300, { top: 30, bottom: 30, left: 10, right: 10 }, 0.5]
     const [bounds_w, bounds_h] = [(w - m.right - m.left), (h - m.top - m.bottom)]
 
-    const data = Array.from(chartData.count, ([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value).slice(0, 5)
+    let units = "km²"
+    const maxCount = Math.max(...Array.from(chartData.count.values()))
+
+    if (maxCount < 0.05){
+        units = "m²"
+    }
+
+    const data = Array.from(chartData.count, ([name, value]) => ({ name, value : units === "m²" ? value * (1000**2) : value })).sort((a, b) => b.value - a.value).slice(0, 5)
 
     const xScale = d3
         .scaleLinear()
@@ -69,7 +76,7 @@ export const GenerateBarChart = ({ chartData }: BarChartProps) => {
 
     return (
         <div>
-            <svg id="bar" width={w} height={h}>
+            <svg id="bar" width={w} height={h} style={{overflow: "unset"}}>
                 <g
                 width={bounds_h}
                 height={bounds_w}
@@ -84,7 +91,7 @@ export const GenerateBarChart = ({ chartData }: BarChartProps) => {
                         textAnchor="middle"
                         fill="black"
                     >
-                    Area (km²)
+                    Area ({units})
                     </text>
                 </g>
             </svg>

diff --git a/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx b/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx
@@ -16,13 +16,20 @@ export const GenerateHistogram = ({ chartData, props, cellArea }: HistogramProps
     const MARGIN = { top: 60, right: 30, bottom: 40, left: 50 }
     const BIN_PADDING = 0
 
-    const data = chartData.count
+
+    const maxCount = Math.max(...Array.from(chartData.count.values()))
+    let units = "km²"
+    if (maxCount < 0.1) units = "m²"
     const cols = chartData.colors
     const { min, max, step } = chartData.numeric_stats ? chartData.numeric_stats : { min: 0, max: 0, step: 0 }
 
     const [width, height] = [400, 300]
     const [boundsWidth, boundsHeight] = [width - MARGIN.right - MARGIN.left, height - MARGIN.top - MARGIN.bottom]
 
+    //const cellCountArr = Array.from(chartData.count.values(), (value) => ((units === "m²" ? value : value * (1000 ** 2)) * cellArea))
+
+    const domMax = Math.max(...Array.from(chartData.count.values()))
+
     const xScale = d3
         .scaleLinear()
         .domain([min, max])
@@ -31,22 +38,27 @@ export const GenerateHistogram = ({ chartData, props, cellArea }: HistogramProps
     const yScale = d3
         .scaleLinear()
         .range([boundsHeight, 0])
-        .domain([0, Math.max(...Array.from(data.values())) * 1.1])
+        .domain([0, units == "km²" ? domMax : domMax * (1000 ** 2)])
+
+    // const yRScale = d3
+    //     .scaleLinear()
+    //     .range([boundsHeight, 0])
+    //     .domain([0, Math.max(...cellCountArr)])
 
-    const rects = Array.from(chartData.count).map((bin, i) => {
+    const rects = Array.from(chartData.count, ([name, value]) => ({ name, value: units === "m²" ? value * (1000 ** 2) : value })).map((bin, i) => {
 
-        let color = cols?.get(bin[0])
+        let color = cols?.get(bin.name)
         color = color ? color : [255, 255, 255, 1]
-        let bin_w = xScale(bin[0] + step) - xScale(bin[0]) - BIN_PADDING
+        let bin_w = xScale(bin.name + step) - xScale(bin.name) - BIN_PADDING
 
         return <rect
             key={i}
             fill={`rgb(${color[0]}, ${color[1]}, ${color[2]})`}
             stroke="lightgrey"
-            x={xScale(bin[0])}
+            x={xScale(bin.name)}
             width={bin_w}
-            y={yScale(bin[1])}
-            height={boundsHeight - yScale(bin[1])}
+            y={yScale(bin.value)}
+            height={boundsHeight - yScale(bin.value)}
         />
     })
 
@@ -60,8 +72,11 @@ export const GenerateHistogram = ({ chartData, props, cellArea }: HistogramProps
             .attr("transform", "translate(0," + boundsHeight + ")")
             .call(xAxisGenerator);
 
-        const yAxisGenerator = d3.axisLeft(yScale);
-        svgElement.append("g").call(yAxisGenerator);
+        const yAxisGenerator = d3.axisLeft(yScale).ticks(4)
+        //const yAxisRightGenerator = d3.axisRight(yRScale).ticks(4)
+        svgElement.append("g").call(yAxisGenerator)
+        //svgElement.append("g").attr("transform", `translate(${boundsWidth}, 0)`).call(yAxisRightGenerator)
+
     }, [xScale, yScale, boundsHeight]);
 
 
@@ -97,7 +112,7 @@ export const GenerateHistogram = ({ chartData, props, cellArea }: HistogramProps
                 fontSize="14px"
                 fill="black"
             >
-                km²
+                {units}
             </text>
         </svg>
     );

diff --git a/app/javascript/projects/analysis_panel_tools/subsection.ts b/app/javascript/projects/analysis_panel_tools/subsection.ts
@@ -181,7 +181,7 @@ export function extentToChartData(colors: Color[] | undefined, model: BooleanTil
 
                 const value = model.labels.get(model.get(x, y)) ? model.labels.get(model.get(x, y)) : "No Data"
                 const count = counts.get(value) || 0
-                counts.set(value, count + cellSize)
+                counts.set(value, count + (cellSize / (1000 ** 2)))
 
 
                 if (colors) {
@@ -195,7 +195,7 @@ export function extentToChartData(colors: Color[] | undefined, model: BooleanTil
 
                 const count = counts.get(value) || 0
 
-                counts.set(value, count + 1)
+                counts.set(value, count + (model instanceof BooleanTileGrid ? (cellSize / (1000 ** 2)) : 1))
 
                 if (colors && model instanceof BooleanTileGrid) {
                     const col_value = colors[value ? 1 : 0]