Merge pull request #232 from wearepal/bugfix

snapshot tool - added bar chart functionality
wearepal · Dec 19, 2023 · 56646e2 · 56646e2
2 parents c4aa930 + 1d09dc3
commit 56646e2
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 7 deletions.
diff --git a/app/javascript/projects/analysis_panel.tsx b/app/javascript/projects/analysis_panel.tsx
@@ -7,7 +7,6 @@ import { GenerateChart } from './analysis_panel_tools/charts'
 import './analysis_panel.css'
 import { getArea } from 'ol/sphere'
 import { fromExtent } from 'ol/geom/Polygon'
-import { set } from 'lodash'
 
 export type ChartType = "pie" | "hist" | "bar" | "kde"
 
@@ -39,7 +38,7 @@ const ChartSelection = ({ SourceType, ChartTypeSelected, SetChartType }: ChartSe
 
     const options = [
         { value: "pie", label: "Pie chart", icon: "fa-chart-pie", disabled: false },
-        { value: "bar", label: "Bar chart", icon: "fa-chart-bar", disabled: true },
+        { value: "bar", label: "Bar chart", icon: "fa-chart-bar", disabled: false },
         { value: "hist", label: "Histogram", icon: "fa-chart-bar", disabled: false },
     ].filter(option => (typeArray as string[]).includes(option.value))
 

diff --git a/app/javascript/projects/analysis_panel_tools/charts/bar.tsx b/app/javascript/projects/analysis_panel_tools/charts/bar.tsx
@@ -8,15 +8,86 @@ interface BarChartProps {
 }
 export const GenerateBarChart = ({ chartData }: BarChartProps) => {
 
-    const [h, w, m, bar_pad] = [400, 400, { top: 30, bottom: 10, left: 10, right: 10 }, 0.5]
-    const [bounds_w, bounds_h] = [(w - m.right - m.left), (h - m.top, m.bottom)]
+    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 }))
+    const data = Array.from(chartData.count, ([name, value]) => ({ name, value })).sort((a, b) => b.value - a.value).slice(0, 5)
+
+    const xScale = d3
+        .scaleLinear()
+        .domain([0, Math.max(...data.map(d => d.value))])
+        .range([0, bounds_w])
+
+    const yScale = d3
+        .scaleBand()
+        .range([0, bounds_h])
+        .domain(data.map(d => d.name))
+        .padding(bar_pad)
+
+    const rects = data.map((d, i) => {
+        const color = chartData.colors?.get(d.name) ?? [0,0,0]
+        const y = yScale(d.name)
+        if (y === undefined) { return null }
+
+        return (
+            <g key={i}>
+                <rect
+                    x={0}
+                    y={y}
+                    width={xScale(d.value)}
+                    height={yScale.bandwidth()}
+                    stroke="lightgrey"
+                    fill={`rgb(${color[0]}, ${color[1]}, ${color[2]})`}
+                    strokeWidth={1}
+                    rx={1}
+                />
+            </g>
+        )
+    })
+
+    const grid = xScale.ticks(5).map((d, i) => (
+        <g key={i}>
+            <line
+                x1={xScale(d)}
+                x2={xScale(d)}
+                y1={0}
+                y2={bounds_h}
+                stroke="#e0e0e0"
+                strokeWidth={1}
+            />
+            <text
+                x={xScale(d)}
+                y={bounds_h + 15}
+                fontSize={10}
+                textAnchor="middle"
+                fill="black"
+            >
+                {d}
+            </text>
+        </g>
+    ))
 
     return (
         <div>
-            {/* <svg width={w} height={h}>
-            </svg> */}
+            <svg width={w} height={h}>
+                <g
+                width={bounds_h}
+                height={bounds_w}
+                transform={`translate(${[m.left, m.top].join(",")})`}
+                >
+                    {grid}
+                    {rects}
+                    <text
+                        x={bounds_w / 2}
+                        y={bounds_h + m.bottom}
+                        fontSize={12}
+                        textAnchor="middle"
+                        fill="black"
+                    >
+                    Area (km²)
+                    </text>
+                </g>
+            </svg>
         </div>
     )
 }