Improving the style of the strain results bar and radar charts

cannlytics · Jan 8, 2025 · 220e7a9 · 220e7a9
1 parent a3eac84
commit 220e7a9
Show file tree

Hide file tree

Showing 7 changed files with 957 additions and 52 deletions.
diff --git a/website/assets/css/cannlytics.scss b/website/assets/css/cannlytics.scss
@@ -1056,23 +1056,33 @@ body.dark .product-card:hover {
 }
 
 /* Cannabinoids Chart CSS */
-
-#cannabinoidChart {
-  font-family: 'Open Sans', sans-serif;
-  font-size: 11px;
-  font-weight: 300;
-  fill: #242424;
-  text-align: center;
-  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
-}
-.legend {
-  font-family: 'Raleway', sans-serif;
-  fill: #333333;
-}
-.tooltip {
-  fill: #333333;
-}
-.radar-chart-wrapper {
-  margin: 20px auto;
-  max-width: 800px;
-}
+.bar-tooltip {
+  position: absolute;
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  opacity: 0;
+}
+
+// #cannabinoidChart {
+//   font-family: 'Open Sans', sans-serif;
+//   font-size: 11px;
+//   font-weight: 300;
+//   fill: #242424;
+//   text-align: center;
+//   text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
+// }
+// .legend {
+//   font-family: 'Raleway', sans-serif;
+//   fill: #333333;
+// }
+// .tooltip {
+//   fill: #333333;
+// }
+// .radar-chart-wrapper {
+//   margin: 20px auto;
+//   max-width: 800px;
+// }
diff --git a/website/assets/js/strains/RadarChart.js b/website/assets/js/strains/RadarChart.js
@@ -69,7 +69,7 @@ export function RadarChart(id, data, options) {
 	/////////////////////////////////////////////////////////
 
 	//Filter for the outside glow
-	var filter = g.append('defs').append('filter').attr('id','glow'),
+	var filter = g.append('defs').append('filter').attr('id',`glow-${id}`),
 		feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'),
 		feMerge = filter.append('feMerge'),
 		feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'),
@@ -92,7 +92,7 @@ export function RadarChart(id, data, options) {
 		.style("fill", "#CDCDCD")
 		.style("stroke", "#CDCDCD")
 		.style("fill-opacity", cfg.opacityCircles)
-		.style("filter" , "url(#glow)");
+		.style("filter" , `url(#glow-${id})`);
 
 	//Text indicating at what % each level is
 	axisGrid.selectAll(".axisLabel")
@@ -188,7 +188,7 @@ export function RadarChart(id, data, options) {
 		.style("stroke-width", cfg.strokeWidth + "px")
 		.style("stroke", function(d,i) { return cfg.color(i); })
 		.style("fill", "none")
-		.style("filter" , "url(#glow)");		
+		.style("filter" , `url(#glow-${id})`);		
 
 	//Append the circles
 	blobWrapper.selectAll(".radarCircle")

diff --git a/website/assets/js/strains/cannabinoidsChart.js b/website/assets/js/strains/cannabinoidsChart.js
@@ -26,12 +26,15 @@ export function renderCannabinoidChart(strainData) {
         width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
         height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
 
+  // FIXME: Specify the `maxValue` based on the data.
+  const maxValue = 0.3;
+
   // Configure the radar chart options
   const radarChartOptions = {
     w: width,
     h: height,
     margin: margin,
-    maxValue: 0.05,           // Typical max percentage for cannabinoids
+    maxValue: maxValue,           // Typical max percentage for cannabinoids
     levels: 5,               // Number of circles in the radar
     roundStrokes: true,      // Make the shape smoother
     color: d3.scale.ordinal().range(['#2E8B57']),  // Sea Green color