Add value range to circle chart

Vizzuality · Nov 22, 2024 · 0046520 · 0046520
1 parent 76e3aef
commit 0046520
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 43 deletions.
diff --git a/app/assets/images/tpi/sectors-bubble-chart-legend.svg b/app/assets/images/tpi/sectors-bubble-chart-legend.svg
diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss
@@ -217,19 +217,20 @@ $legend-image-width: 60px;
 }
 
 .bubble-chart__legend-image {
-  width: 60px;
+  width: 64px;
+  height: 67px;
 }
 
 .bubble-chart__legend-titles-container {
   position: absolute;
   color: $dark;
   left: calc(#{$legend-image-width} + 6px);
-  top: -7.5px;
+  top: -10px;
 }
 
 .bubble-chart__legend-title {
   font-size: 12px;
-  line-height: 15px;
+  line-height: 13px;
   font-family: $font-family-regular;
   // margin: 2px 0;
   display: block;

diff --git a/app/javascript/components/tpi/charts/bubble/Chart.js b/app/javascript/components/tpi/charts/bubble/Chart.js
@@ -4,17 +4,16 @@ import legendImage from 'images/tpi/sectors-bubble-chart-legend.svg';
 import SingleCell from './SingleCell';
 import hoverIcon from 'images/icons/hover-cursor.svg';
 
-const SCALE = 1;
-
 // radius of bubbles
-const COMPANIES_MARKET_CAP_GROUPS = {
-  '50-70': 10 * SCALE,
-  '11-50': 5 * SCALE,
-  '1-10': 3 * SCALE
-};
+const COMPANIES_MARKET_CAP_GROUPS = [
+  '100+',
+  '51-100',
+  '11-50',
+  '1-10'
+];
 
 const SINGLE_CELL_SVG_WIDTH = 144;
-const SINGLE_CELL_SVG_HEIGHT = 60;
+const SINGLE_CELL_SVG_HEIGHT = 62;
 
 const LEVELS_COLORS = [
   '#86A9F9',
@@ -109,7 +108,7 @@ const BubbleChart = ({ levels, sectors }) => {
 
   const levelsSignature = levels && Object.keys(levels[Object.keys(levels)[0]]);
 
-  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 120;
+  const GRID_HEIGHT = parsedData.length * SINGLE_CELL_SVG_HEIGHT + 100;
 
   return (
     <div className="is-hidden-touch">
@@ -137,7 +136,7 @@ const BubbleChart = ({ levels, sectors }) => {
               alt="Bubble size description"
             />
             <div className="bubble-chart__legend-titles-container">
-              {Object.keys(COMPANIES_MARKET_CAP_GROUPS).map(
+              {COMPANIES_MARKET_CAP_GROUPS.map(
                 (companySize, i) => (
                   <span
                     key={`${companySize}-${i}`}
@@ -187,22 +186,6 @@ const BubbleChart = ({ levels, sectors }) => {
             key={dataRow.sector}
           />
         ))}
-        {/* <div className='bubble-chart__grid' style={{ position: "initial", display: "flex" }}>
-          {levelsSignature.map((dataRow) => (
-            <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1010" viewBox="0 0 2 1010" fill="none">
-              <line
-                x1="1"
-                y1="0.984375"
-                x2="1"
-                y2="1009.34"
-                stroke="#D8D8D8"
-              // strokeLinecap="round"
-              // strokeLinejoin="round"
-                strokeDasharray="2 8"
-              />
-            </svg>
-          ))}
-        </div> */}
       </div>
     </div>
   );

diff --git a/app/javascript/components/tpi/charts/bubble/SingleCell.js b/app/javascript/components/tpi/charts/bubble/SingleCell.js
@@ -17,9 +17,15 @@ import {
   arrow
 } from '@floating-ui/react';
 
+/** Circle radios for each value range */
+const RANGE = [12, 18, 24, 30];
+/** Value ranges */
+const DOMAIN = [11, 51, 101];
+
 const SingleCell = ({ width, height, data, uniqueKey }) => {
-  const radiusScale = scaleThreshold().domain([10, 50]).range([14, 22, 29]);
-  const radius = radiusScale(data.value);
+  const VALUE = data.value;
+  const radiusScale = scaleThreshold().domain(DOMAIN).range(RANGE);
+  const radius = radiusScale(VALUE);
 
   const [isOpen, setIsOpen] = useState(false);
   const arrowRef = useRef(null);
@@ -51,13 +57,13 @@ const SingleCell = ({ width, height, data, uniqueKey }) => {
 
   const headingId = useId();
 
-  if (!data.value) {
+  if (!VALUE) {
     return null;
   }
 
   return (
     <Fragment>
-      <svg id={uniqueKey} width="100%" height="100%" viewBox={`0 0 ${width} ${height}`}>
+      <svg id={uniqueKey} width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
         <g
           ref={refs.setReference}
           {...getReferenceProps()}
@@ -66,7 +72,7 @@ const SingleCell = ({ width, height, data, uniqueKey }) => {
         >
           <circle r={radius} fill={data.color} />
           <text textAnchor="middle" alignmentBaseline="central" fill="white" fontWeight={700} fontSize="14px">
-            {data.value}
+            {VALUE}
           </text>
         </g>
       </svg>
@@ -82,7 +88,7 @@ const SingleCell = ({ width, height, data, uniqueKey }) => {
         >
           <h4>{data.tooltipContent.title}</h4>
           <h3 className="bubble-chart_tooltip_header">{data.tooltipContent.level}</h3>
-          <p>{data.value} {data.value === 1 ? 'company' : 'companies'}</p>
+          <p>{VALUE} {VALUE === 1 ? 'company' : 'companies'}</p>
           <ol className="bubble-chart_tooltip_text">
             {data.tooltipContent.companies.map(company => (
               <li className="bubble-chart_tooltip_list_item" key={company.name}>