From 2be839b8f0752ba4116fc3454b99f324e5ffd98e Mon Sep 17 00:00:00 2001 From: Paul Crossley Date: Thu, 19 Dec 2024 11:38:03 +0000 Subject: [PATCH] fixes to bar chart, format changes to histogram --- .../analysis_panel_tools/charts/bar.tsx | 13 +++++-- .../analysis_panel_tools/charts/histogram.tsx | 37 +++++++++++++------ .../analysis_panel_tools/subsection.ts | 4 +- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/app/javascript/projects/analysis_panel_tools/charts/bar.tsx b/app/javascript/projects/analysis_panel_tools/charts/bar.tsx index 51ef8b06..458ab98c 100644 --- 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 (
- + { textAnchor="middle" fill="black" > - Area (km²) + Area ({units}) diff --git a/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx b/app/javascript/projects/analysis_panel_tools/charts/histogram.tsx index 84705fba..30b620f8 100644 --- 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 }) @@ -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} ); diff --git a/app/javascript/projects/analysis_panel_tools/subsection.ts b/app/javascript/projects/analysis_panel_tools/subsection.ts index 2ccaea97..eabe3e35 100644 --- 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]