From a0048d0ac59f8c7d149b22f64ee76874b9c9c065 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 2 Jun 2024 22:16:33 -0500
Subject: [PATCH] better bullbe sizing for mobile
---
src/components/BeeswarmChart.vue | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index c8b2a17..edf30bd 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -193,7 +193,7 @@ function createBeeswarmChart() {
// Get dynamic dimensions to draw chart
const containerWidth = document.getElementById('beeswarm-chart-container').offsetWidth;
- const containerHeight = window.innerWidth <= 700 ? window.innerHeight * 0.66 : 600;
+ const containerHeight = window.innerWidth <= 700 ? window.innerHeight * 0.5 : 600;
const margin = window.innerWidth <= 700 ? { top: 30, right: 10, bottom: 20, left: 10 } : { top: 40, right: 20, bottom: 40, left: 40 };
const width = containerWidth - margin.left - margin.right;
const height = containerHeight - margin.top - margin.bottom;
@@ -214,7 +214,7 @@ function createBeeswarmChart() {
// Set radius based on evidence value
const radiusScale = d3.scaleLinear()
.domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
- .range(window.innerWidth <= 700 ? [10, 40] : [10, 70]);
+ .range(window.innerWidth <= 700 ? [8, 30] : [10, 70]);
const yAxis = svg.append('g')
.attr("transform", "translate(50, 0)")
@@ -293,7 +293,7 @@ function updateChart() {
// Set the radius scale based on evidence value
const radiusScale = d3.scaleLinear()
.domain([d3.min(data.value, d => d.evidence_val), d3.max(data.value, d => d.evidence_val)])
- .range([10, 70]);
+ .range(window.innerWidth <= 700 ? [10, 40] : [10, 70]);
// Filter data based on active categories
const activeCategories = Object.keys(isChecked.value).filter(category => isChecked.value[category]);
--
GitLab