From 804145610e80c6d1f5b83230dd4b6541037fc86a Mon Sep 17 00:00:00 2001
From: barbara-chaves <barbarabarcellos90@gmail.com>
Date: Wed, 4 Oct 2023 12:58:25 +0200
Subject: [PATCH 1/3] Create countries bubble chart

---
 app/assets/stylesheets/tpi/_bubble-chart.scss |  51 +++++
 .../tpi/charts/country-bubble/Chart.js        | 201 ++++++++++++++++++
 .../country-bubble/CompaniesAccordion.js      | 160 ++++++++++++++
 .../tpi/charts/country-bubble/SingleCell.js   | 109 ++++++++++
 .../tpi/charts/country-bubble/constants.js    |  18 ++
 .../tpi/charts/country-bubble/index.js        |   4 +
 app/views/tpi/ascor/_bubble_chart.html.erb    |   7 +-
 7 files changed, 548 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/components/tpi/charts/country-bubble/Chart.js
 create mode 100644 app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js
 create mode 100644 app/javascript/components/tpi/charts/country-bubble/SingleCell.js
 create mode 100644 app/javascript/components/tpi/charts/country-bubble/constants.js
 create mode 100644 app/javascript/components/tpi/charts/country-bubble/index.js

diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss
index f5b1e6b70..b290bdca1 100644
--- a/app/assets/stylesheets/tpi/_bubble-chart.scss
+++ b/app/assets/stylesheets/tpi/_bubble-chart.scss
@@ -62,6 +62,28 @@ $legend-image-width: 60px;
   }
 }
 
+.bubble-chart__cell-country {
+  position: relative;
+  height: $cell-height-banks;
+  display: flex;
+  align-items: center;
+  border-right: calc(#{$tape-height / 2}) dashed $tape-color;
+
+  & > *:first-child {
+    margin: auto;
+    z-index: 1;
+  }
+
+  &::before {
+    background-color: $tape-color;
+    content: "";
+    position: absolute;
+    top: calc(50% - #{$tape-height / 2});
+    height: $tape-height;
+    width: calc(100% + #{$tape-height / 2});
+  }
+}
+
 .bubble-chart_circle {
   circle:hover {
     stroke-width: 14;
@@ -69,6 +91,13 @@ $legend-image-width: 60px;
   }
 }
 
+.bubble-chart_circle_country {
+  circle:hover {
+    stroke-width: 3;
+    stroke: $black!important;
+  }
+}
+
 .bubble-tip {
   font-size: 14px;
   padding: 10px;
@@ -172,6 +201,28 @@ $legend-image-width: 60px;
   }
 }
 
+.bubble-chart__level-country {
+  border-right: calc(#{$tape-height / 2}) dotted $tape-color;
+  position: relative;
+  padding-left: 20px;
+  height: 100%;
+}
+
+.bubble-chart__level-title-country {
+  height: 100%;
+  font-family: $font-family-bold;
+  font-size: 16px;
+  color: $black;
+}
+
+.bubble-chart__level-area-country {
+  font-family: $font-family-bold;
+  font-size: 16px;
+  color: $black;
+  text-align: end;
+  margin-right: 14px;
+}
+
 .bubble-chart__container--banks {
   .bubble-chart__level-title {
     font-family: $font-family-bold;
diff --git a/app/javascript/components/tpi/charts/country-bubble/Chart.js b/app/javascript/components/tpi/charts/country-bubble/Chart.js
new file mode 100644
index 000000000..05d741adf
--- /dev/null
+++ b/app/javascript/components/tpi/charts/country-bubble/Chart.js
@@ -0,0 +1,201 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import SingleCell from './SingleCell';
+
+import { SCORE_RANGES } from './constants';
+
+const SINGLE_CELL_SVG_WIDTH = 120;
+const SINGLE_CELL_SVG_HEIGHT = 100;
+
+let tooltip = null;
+
+const BubbleChart = ({ results, disabled_bubbles_areas }) => {
+  const tooltipEl = '<div id="bubble-chart-tooltip" class="bubble-tip" hidden style="position:absolute;"></div>';
+  useEffect(() => {
+    document.body.insertAdjacentHTML('beforeend', tooltipEl);
+    tooltip = document.getElementById('bubble-chart-tooltip');
+  }, []);
+  const ranges = SCORE_RANGES.map((range) => range.value);
+
+  const parsedData = {};
+  const pillars = {};
+
+  results.forEach((result) => {
+    if (parsedData[result.area] === undefined) {
+      parsedData[result.area] = Array.from({ length: ranges.length }, () => []);
+    }
+    const rangeIndex = SCORE_RANGES.findIndex(
+      (range) => result.result === range.value
+    );
+    if (rangeIndex >= 0) {
+      parsedData[result.area][rangeIndex].push({
+        ...result,
+        color: SCORE_RANGES[rangeIndex].color
+      });
+    } else {
+      console.error('WRONG INDEX', result);
+    }
+    if (pillars[result.pillar] === undefined) {
+      pillars[result.pillar] = [result.area];
+    } else {
+      pillars[result.pillar] = pillars[result.pillar].includes(result.area)
+        ? pillars[result.pillar]
+        : [...pillars[result.pillar], result.area];
+    }
+  });
+
+  return (
+    <div
+      className="bubble-chart__container bubble-chart__container is-hidden-touch"
+      style={{ gridTemplateColumns: '0.5fr 0.5fr 1.5fr 1fr 1fr 1fr' }}
+    >
+      <div className="bubble-chart__level-title-country">Pillar</div>
+      <div className="bubble-chart__level-title-country">Area</div>
+      <div />
+      {ranges.map((range) => (
+        <div className="bubble-chart__level-country" key={range}>
+          <div className="bubble-chart__level-title-country">{range}</div>
+        </div>
+      ))}
+      {Object.keys(parsedData).map((area) => createRow(parsedData[area], area, pillars, disabled_bubbles_areas))}
+    </div>
+  );
+};
+
+const ForceLayoutBubbleChart = (countriesBubbles, uniqueKey) => {
+  const handleBubbleClick = (country) => window.open(country.path, '_blank');
+
+  return (
+    <SingleCell
+      width={SINGLE_CELL_SVG_WIDTH}
+      height={SINGLE_CELL_SVG_HEIGHT}
+      uniqueKey={uniqueKey}
+      handleNodeClick={handleBubbleClick}
+      showTooltip={showTooltip}
+      hideTooltip={hideTooltip}
+      data={countriesBubbles.length && countriesBubbles}
+    />
+  );
+};
+
+const getTooltipText = ({ tooltipContent }) => {
+  if (tooltipContent) {
+    return `
+     <div class="bubble-tip-header">${tooltipContent.header}</div>
+     <div class="bubble-tip-text">${tooltipContent.value}</div>
+    `;
+  }
+  return '';
+};
+
+const showTooltip = (node, u) => {
+  const bubble = u._groups[0][node.index];
+
+  tooltip.innerHTML = getTooltipText(node);
+  tooltip.removeAttribute('hidden');
+  const bubbleBoundingRect = bubble.getBoundingClientRect();
+  const topOffset = bubbleBoundingRect.top - tooltip.offsetHeight + window.scrollY;
+  const leftOffset = bubbleBoundingRect.left
+    + (bubbleBoundingRect.width - tooltip.offsetWidth) / 2
+    + window.scrollX;
+
+  tooltip.style.left = `${leftOffset}px`;
+  tooltip.style.top = `${topOffset}px`;
+};
+
+const hideTooltip = () => {
+  tooltip.setAttribute('hidden', true);
+};
+
+const createRow = (dataRow, area, pillars, disabled_bubbles_areas) => {
+  const pillarEntries = Object.entries(pillars);
+
+  const pillarIndex = pillarEntries.findIndex(([, value]) => value.includes(area));
+  const pillar = pillarEntries[pillarIndex];
+
+  const pillarSpan = pillar && pillar[1].length;
+  const pillarName = pillar[0];
+  const pillarAcronym = pillarName
+    .split(' ')
+    .map((word) => word[0])
+    .join('');
+
+  const areaIndex = pillar && pillar[1].findIndex((el) => el === area);
+
+  return (
+    <React.Fragment key={Math.random()}>
+      <div
+        className="bubble-chart__level-area-country"
+        style={{
+          gridRow: `span ${pillarSpan}`,
+          display: areaIndex === 0 ? 'block' : 'none'
+        }}
+      >
+        {pillarIndex + 1}.&nbsp;{pillarName}
+      </div>
+      {areaIndex === 0 && (
+        <div
+          style={{
+            gridRow: `span ${pillarSpan}`,
+            height: '100%',
+            padding: '46px 0 46px'
+          }}
+        >
+          <div
+            style={{
+              border: pillarSpan > 1 && '8px solid #E8E8E8',
+              borderRight: 'none',
+              height: '100%'
+            }}
+          />
+        </div>
+      )}
+      <div className="bubble-chart__level-area-country">
+        {pillarAcronym} {areaIndex + 1}. {area}
+      </div>
+      {dataRow.map((el, i) => {
+        const countriesBubbles = disabled_bubbles_areas.includes(area)
+          ? []
+          : el.map((result) => ({
+            value: 10,
+            tooltipContent: {
+              header: result.country_name,
+              value: result.result
+            },
+            path: result.country_path,
+            color: result.color,
+            result: result.result
+          }));
+
+        // Remove special characters from the key to be able to use d3-select as it uses querySelector
+        const cleanKey = area.replace(/[^a-zA-Z\-_:.]/g, '');
+        const uniqueKey = `${cleanKey}-${el.length}-${i}`;
+
+        return (
+          <div className="bubble-chart__cell-country" key={uniqueKey}>
+            {ForceLayoutBubbleChart(countriesBubbles, uniqueKey)}
+          </div>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+BubbleChart.defaultProps = {
+  disabled_bubbles_areas: []
+};
+
+BubbleChart.propTypes = {
+  results: PropTypes.arrayOf(
+    PropTypes.shape({
+      area: PropTypes.string.isRequired,
+      market_cap_group: PropTypes.string.isRequired,
+      country_id: PropTypes.number.isRequired,
+      country_path: PropTypes.string.isRequired,
+      country_name: PropTypes.string.isRequired,
+      result: PropTypes.string.isRequired,
+      pillar: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
+};
+export default BubbleChart;
diff --git a/app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js b/app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js
new file mode 100644
index 000000000..ead12348c
--- /dev/null
+++ b/app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js
@@ -0,0 +1,160 @@
+import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import Select, { components } from 'react-select';
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
+import cx from 'classnames';
+
+import chevronDownIconBlack from 'images/icon_chevron_dark/chevron_down_black-1.svg';
+import chevronUpIconBlack from 'images/icon_chevron_dark/chevron-up.svg';
+
+import { SCORE_RANGES } from './constants';
+
+const blueDarkColor = '#2E3152';
+const secondaryColor = '#828397';
+
+const customSelectTheme = theme => ({
+  ...theme,
+  colors: {
+    ...theme.colors,
+    primary50: 'inherit'
+  }
+});
+
+const customSelectStyles = {
+  option: (provided, state) => ({
+    ...provided,
+    color: state.isSelected ? blueDarkColor : secondaryColor,
+    backgroundColor: state.isSelected ? 'inherit' : 'inherit',
+    fontWeight: state.isSelected ? '800' : 'normal'
+  }),
+  control: (provided) => ({
+    ...provided,
+    border: '1px solid',
+    boxShadow: '1px solid #2E3152',
+    borderRadius: 0
+  }),
+  indicatorSeparator: () => ({
+    display: 'none'
+  }),
+  menu: (provided) => ({
+    ...provided,
+    margin: 0,
+    borderRadius: 0
+  }),
+  container: (provided) => ({
+    ...provided,
+    margin: '0 0.75rem 1.2rem'
+  })
+};
+
+const DropdownIndicator = (props) => (
+  <components.DropdownIndicator {...props}>
+    <img src={props.selectProps.menuIsOpen ? chevronUpIconBlack : chevronDownIconBlack} alt="Accordion toggle" />
+  </components.DropdownIndicator>
+);
+
+DropdownIndicator.propTypes = {
+  selectProps: PropTypes.object.isRequired
+};
+
+const CompaniesAccordion = ({ results, disabled_bubbles_areas }) => {
+  const areas = uniq(results.map(r => r.area));
+  const selectOptions = areas.map((level) => ({label: level, value: level}));
+  const [openItems, setOpenItems] = useState([]);
+  const [activeOption, setActiveOption] = useState(selectOptions[0]);
+
+  const ranges = SCORE_RANGES.map((range) => `${range.min}-${range.max}%`);
+
+  const parsedData = {};
+  results.forEach((result) => {
+    if (parsedData[result.area] === undefined) {
+      parsedData[result.area] = Array.from({ length: ranges.length }, () => []);
+    }
+    const rangeIndex = SCORE_RANGES.findIndex((range) => result.percentage >= range.min && result.percentage <= range.max);
+    if (rangeIndex >= 0) {
+      parsedData[result.area][rangeIndex].push({
+        ...result,
+        color: SCORE_RANGES[rangeIndex].color
+      });
+    } else {
+      console.error('WRONG INDEX', result);
+    }
+  });
+
+  const activeArea = disabled_bubbles_areas.includes(activeOption.value)
+    ? Array.from({ length: ranges.length }, () => [])
+    : parsedData[activeOption.value];
+
+  function setOpenItemByIndex(index) {
+    setOpenItems(openItems.includes(index) ? openItems.filter(i => i !== index) : [...openItems, index]);
+  }
+
+  return (
+    <div className="mobile_bubble-chart__container is-hidden-desktop">
+      <Select
+        options={selectOptions}
+        value={activeOption}
+        className="is-hidden-desktop"
+        onChange={(e) => { setActiveOption(e); }}
+        isSearchable={false}
+        styles={customSelectStyles}
+        components={{DropdownIndicator}}
+        theme={customSelectTheme}
+      />
+
+      <div className="accordions-list">
+        {SCORE_RANGES.map((range, i) => (
+          <div
+            key={`chart-item-list-${i}`}
+            className={cx('item-list', { open: openItems.includes(i) })}
+            style={{
+              background: range.color
+            }}
+          >
+            <div className="item-header" onClick={() => setOpenItemByIndex(i)}>
+              <div className="item-title">
+                <div>Score Range</div>
+                <div>{activeArea[i].length} {activeArea[i].length === 1 ? 'bank' : 'banks'}</div>
+              </div>
+              <div className="sector-subtitle">{range.min}-{range.max}%</div>
+            </div>
+            <div className="item-body">
+              <hr />
+              {activeArea[i].length === 0 && <div className="no-companies">No banks</div>}
+              {activeArea[i].length > 0 && (
+                <ul className="companies-list">
+                  {sortBy(activeArea[i], 'bank_name').map((bank, index) => (
+                    <li
+                      key={`chart-companies-${index}`}
+                      onClick={() => { window.location.href = bank.bank_path; }}
+                    >
+                      {bank.bank_name}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CompaniesAccordion.defaultProps = {
+  disabled_bubbles_areas: []
+};
+
+CompaniesAccordion.propTypes = {
+  results: PropTypes.arrayOf(PropTypes.shape({
+    area: PropTypes.string.isRequired,
+    market_cap_group: PropTypes.string.isRequired,
+    percentage: PropTypes.number.isRequired,
+    bank_id: PropTypes.number.isRequired,
+    bank_name: PropTypes.string.isRequired,
+    bank_path: PropTypes.string.isRequired
+  })).isRequired,
+  disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
+};
+export default CompaniesAccordion;
diff --git a/app/javascript/components/tpi/charts/country-bubble/SingleCell.js b/app/javascript/components/tpi/charts/country-bubble/SingleCell.js
new file mode 100644
index 000000000..e1b71bb7c
--- /dev/null
+++ b/app/javascript/components/tpi/charts/country-bubble/SingleCell.js
@@ -0,0 +1,109 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { range } from 'd3-array';
+import { select } from 'd3-selection';
+import * as d3 from 'd3-force';
+
+import { partialGradient } from './constants';
+
+const SingleCell = ({
+  width,
+  height,
+  handleNodeClick,
+  data,
+  uniqueKey,
+  showTooltip,
+  hideTooltip
+}) => {
+  const computizedKey = uniqueKey.split(' ').join('_');
+  const key = `${computizedKey.replace(/[&]/g, '_')}-${(
+    Math.random() * 100
+  ).toFixed()}`;
+
+  const nodes = range(data.length).map(function (index) {
+    return {
+      color: data[index].color,
+      tooltipContent: data[index].tooltipContent,
+      path: data[index].path,
+      radius: data[index].value,
+      value: data[index].result
+    };
+  });
+
+  const simulation = () => {
+    d3.forceSimulation(nodes)
+      .force('charge', d3.forceManyBody().strength(60))
+      .force('y', d3.forceY().strength(0.45).y(0))
+      .force(
+        'collision',
+        d3.forceCollide().radius(function (d) {
+          return d.radius + 1;
+        })
+      )
+      .on('tick', ticked);
+  };
+
+  const ticked = () => {
+    const u = select(`#${key}`).select('g').selectAll('circle').data(nodes);
+
+    u.enter()
+      .append('circle')
+      .attr('r', (d) => d.radius)
+      .style('fill', (d) => (d.value === 'Partial' ? 'url(#partial-gradient)' : d.color))
+      .style('stroke', (d) => d.color)
+      .merge(u)
+      .attr('cx', (d) => d.x)
+      .attr('cy', (d) => d.y)
+      .on('mouseover', (d) => showTooltip(d, u))
+      .on('mouseout', hideTooltip)
+      .on('click', (d) => handleNodeClick(d));
+
+    u.exit().remove();
+  };
+
+  simulation();
+
+  return (
+    <Fragment>
+      <svg
+        id={key}
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${width} ${height}`}
+      >
+        <defs>
+          <pattern
+            id="partial-gradient"
+            patternUnits="userSpaceOnUse"
+            width="2"
+            height="8"
+            patternTransform="rotate(90)"
+          >
+            <rect
+              width="1"
+              height="8"
+              transform="translate(0,0)"
+              fill={partialGradient.color}
+            />
+          </pattern>
+        </defs>
+        <g
+          className="bubble-chart_circle_country"
+          transform={`translate(${width / 2}, ${height / 2})`}
+        />
+      </svg>
+    </Fragment>
+  );
+};
+
+SingleCell.propTypes = {
+  showTooltip: PropTypes.func.isRequired,
+  hideTooltip: PropTypes.func.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  handleNodeClick: PropTypes.func.isRequired,
+  data: PropTypes.oneOfType([PropTypes.number, PropTypes.array]).isRequired,
+  uniqueKey: PropTypes.string.isRequired
+};
+
+export default SingleCell;
diff --git a/app/javascript/components/tpi/charts/country-bubble/constants.js b/app/javascript/components/tpi/charts/country-bubble/constants.js
new file mode 100644
index 000000000..58180c0e9
--- /dev/null
+++ b/app/javascript/components/tpi/charts/country-bubble/constants.js
@@ -0,0 +1,18 @@
+export const SCORE_RANGES = [
+  {
+    value: 'No',
+    color: '#F26E6E'
+  },
+  {
+    value: 'Partial',
+    color: '#17B091'
+  },
+  {
+    value: 'Yes',
+    color: '#17B091'
+  }
+];
+
+export const partialGradient = {
+  color: SCORE_RANGES[1].color
+};
diff --git a/app/javascript/components/tpi/charts/country-bubble/index.js b/app/javascript/components/tpi/charts/country-bubble/index.js
new file mode 100644
index 000000000..8b9f31d85
--- /dev/null
+++ b/app/javascript/components/tpi/charts/country-bubble/index.js
@@ -0,0 +1,4 @@
+import Chart from './Chart';
+import CompaniesAccordion from './CompaniesAccordion';
+
+export {Chart, CompaniesAccordion};
diff --git a/app/views/tpi/ascor/_bubble_chart.html.erb b/app/views/tpi/ascor/_bubble_chart.html.erb
index 5e58746c1..6cc7ba17e 100644
--- a/app/views/tpi/ascor/_bubble_chart.html.erb
+++ b/app/views/tpi/ascor/_bubble_chart.html.erb
@@ -1,3 +1,6 @@
 <!-- TODO: React components need to be replaced!!! -->
-<%#= react_component('charts/bank-bubble/Chart', { results: @ascor_assessment_results }) %>
-<%#= react_component('charts/bank-bubble/CompaniesAccordion', { results: @ascor_assessment_results }) %>
\ No newline at end of file
+<%#= react_component('charts/country-bubble/Chart', { results: @ascor_assessment_results }) %>
+<%= react_component('charts/country-bubble/Chart', {
+  results: @ascor_assessment_results,
+  # disabled_bubbles_areas: BankAssessmentIndicator.area.where(is_placeholder: true).pluck(:text)
+}) %>
\ No newline at end of file

From d7230fb11e67b3964d821ea30bebdfa9144d68bc Mon Sep 17 00:00:00 2001
From: martintomas <martintomas.it@gmail.com>
Date: Thu, 5 Oct 2023 09:50:39 +0200
Subject: [PATCH 2/3] refactoring: removing TODOs and renaming ascor bubble
 chart folder

---
 .../charts/{country-bubble => ascor-bubble}/Chart.js |  0
 .../CompaniesAccordion.js                            |  0
 .../{country-bubble => ascor-bubble}/SingleCell.js   |  0
 .../{country-bubble => ascor-bubble}/constants.js    |  0
 .../charts/{country-bubble => ascor-bubble}/index.js |  0
 app/views/tpi/ascor/_bubble_chart.html.erb           |  7 +------
 app/views/tpi/ascor/index.html.erb                   |  2 --
 spec/system/public/tpi/ascor_spec.rb                 | 12 ++++++++++++
 8 files changed, 13 insertions(+), 8 deletions(-)
 rename app/javascript/components/tpi/charts/{country-bubble => ascor-bubble}/Chart.js (100%)
 rename app/javascript/components/tpi/charts/{country-bubble => ascor-bubble}/CompaniesAccordion.js (100%)
 rename app/javascript/components/tpi/charts/{country-bubble => ascor-bubble}/SingleCell.js (100%)
 rename app/javascript/components/tpi/charts/{country-bubble => ascor-bubble}/constants.js (100%)
 rename app/javascript/components/tpi/charts/{country-bubble => ascor-bubble}/index.js (100%)

diff --git a/app/javascript/components/tpi/charts/country-bubble/Chart.js b/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
similarity index 100%
rename from app/javascript/components/tpi/charts/country-bubble/Chart.js
rename to app/javascript/components/tpi/charts/ascor-bubble/Chart.js
diff --git a/app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js b/app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js
similarity index 100%
rename from app/javascript/components/tpi/charts/country-bubble/CompaniesAccordion.js
rename to app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js
diff --git a/app/javascript/components/tpi/charts/country-bubble/SingleCell.js b/app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js
similarity index 100%
rename from app/javascript/components/tpi/charts/country-bubble/SingleCell.js
rename to app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js
diff --git a/app/javascript/components/tpi/charts/country-bubble/constants.js b/app/javascript/components/tpi/charts/ascor-bubble/constants.js
similarity index 100%
rename from app/javascript/components/tpi/charts/country-bubble/constants.js
rename to app/javascript/components/tpi/charts/ascor-bubble/constants.js
diff --git a/app/javascript/components/tpi/charts/country-bubble/index.js b/app/javascript/components/tpi/charts/ascor-bubble/index.js
similarity index 100%
rename from app/javascript/components/tpi/charts/country-bubble/index.js
rename to app/javascript/components/tpi/charts/ascor-bubble/index.js
diff --git a/app/views/tpi/ascor/_bubble_chart.html.erb b/app/views/tpi/ascor/_bubble_chart.html.erb
index 6cc7ba17e..24452203d 100644
--- a/app/views/tpi/ascor/_bubble_chart.html.erb
+++ b/app/views/tpi/ascor/_bubble_chart.html.erb
@@ -1,6 +1 @@
-<!-- TODO: React components need to be replaced!!! -->
-<%#= react_component('charts/country-bubble/Chart', { results: @ascor_assessment_results }) %>
-<%= react_component('charts/country-bubble/Chart', {
-  results: @ascor_assessment_results,
-  # disabled_bubbles_areas: BankAssessmentIndicator.area.where(is_placeholder: true).pluck(:text)
-}) %>
\ No newline at end of file
+<%= react_component('charts/ascor-bubble/Chart', { results: @ascor_assessment_results }) %>
\ No newline at end of file
diff --git a/app/views/tpi/ascor/index.html.erb b/app/views/tpi/ascor/index.html.erb
index e416e0222..5b703755e 100644
--- a/app/views/tpi/ascor/index.html.erb
+++ b/app/views/tpi/ascor/index.html.erb
@@ -31,8 +31,6 @@
     </div>
   </div>
 
-  <!-- TODO: Finalise bubble chart section -->
-  <!-- All React components code (even mobile one) goes into tpi/ascor/bubble_chart partial -->
   <section class="container">
     <div class="bubble-chart-header">
       <h2 class="is-size-4">
diff --git a/spec/system/public/tpi/ascor_spec.rb b/spec/system/public/tpi/ascor_spec.rb
index 2c9861847..aebca44f9 100644
--- a/spec/system/public/tpi/ascor_spec.rb
+++ b/spec/system/public/tpi/ascor_spec.rb
@@ -9,6 +9,18 @@
     it 'loads the page' do
       expect(page).to have_text('All countries')
     end
+
+    it 'loads bubble chart' do
+      within '.bubble-chart__container' do
+        expect(page).to have_text('1. Emissions Pathways')
+        expect(page).to have_text('2. Climate Policies')
+        expect(page).to have_text('3. Climate Finance')
+
+        expect(page).to have_text('EP 1. Emissions Trends')
+        expect(page).to have_text('CP 1. Climate Legislation')
+        expect(page).to have_text('CF 1. International Climate Finance')
+      end
+    end
   end
 
   describe 'single country page' do

From 6e09a32526428025323e528ca6ce51a68c3673d6 Mon Sep 17 00:00:00 2001
From: barbara-chaves <barbarabarcellos90@gmail.com>
Date: Thu, 5 Oct 2023 12:00:42 +0200
Subject: [PATCH 3/3] Review fixes

---
 .../tpi/charts/ascor-bubble/Chart.js          |  11 +-
 .../charts/ascor-bubble/CompaniesAccordion.js | 160 ------------------
 .../tpi/charts/ascor-bubble/index.js          |   3 +-
 3 files changed, 11 insertions(+), 163 deletions(-)
 delete mode 100644 app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js

diff --git a/app/javascript/components/tpi/charts/ascor-bubble/Chart.js b/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
index 05d741adf..d51d11df6 100644
--- a/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
+++ b/app/javascript/components/tpi/charts/ascor-bubble/Chart.js
@@ -4,6 +4,15 @@ import SingleCell from './SingleCell';
 
 import { SCORE_RANGES } from './constants';
 
+const SCALE = 1.25;
+
+// radius of bubbles
+const COMPANIES_MARKET_CAP_GROUPS = {
+  large: 10 * SCALE,
+  medium: 5 * SCALE,
+  small: 3 * SCALE
+};
+
 const SINGLE_CELL_SVG_WIDTH = 120;
 const SINGLE_CELL_SVG_HEIGHT = 100;
 
@@ -157,7 +166,7 @@ const createRow = (dataRow, area, pillars, disabled_bubbles_areas) => {
         const countriesBubbles = disabled_bubbles_areas.includes(area)
           ? []
           : el.map((result) => ({
-            value: 10,
+            value: COMPANIES_MARKET_CAP_GROUPS[result.market_cap_group],
             tooltipContent: {
               header: result.country_name,
               value: result.result
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js b/app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js
deleted file mode 100644
index ead12348c..000000000
--- a/app/javascript/components/tpi/charts/ascor-bubble/CompaniesAccordion.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, {useState} from 'react';
-import PropTypes from 'prop-types';
-import Select, { components } from 'react-select';
-import uniq from 'lodash/uniq';
-import sortBy from 'lodash/sortBy';
-import cx from 'classnames';
-
-import chevronDownIconBlack from 'images/icon_chevron_dark/chevron_down_black-1.svg';
-import chevronUpIconBlack from 'images/icon_chevron_dark/chevron-up.svg';
-
-import { SCORE_RANGES } from './constants';
-
-const blueDarkColor = '#2E3152';
-const secondaryColor = '#828397';
-
-const customSelectTheme = theme => ({
-  ...theme,
-  colors: {
-    ...theme.colors,
-    primary50: 'inherit'
-  }
-});
-
-const customSelectStyles = {
-  option: (provided, state) => ({
-    ...provided,
-    color: state.isSelected ? blueDarkColor : secondaryColor,
-    backgroundColor: state.isSelected ? 'inherit' : 'inherit',
-    fontWeight: state.isSelected ? '800' : 'normal'
-  }),
-  control: (provided) => ({
-    ...provided,
-    border: '1px solid',
-    boxShadow: '1px solid #2E3152',
-    borderRadius: 0
-  }),
-  indicatorSeparator: () => ({
-    display: 'none'
-  }),
-  menu: (provided) => ({
-    ...provided,
-    margin: 0,
-    borderRadius: 0
-  }),
-  container: (provided) => ({
-    ...provided,
-    margin: '0 0.75rem 1.2rem'
-  })
-};
-
-const DropdownIndicator = (props) => (
-  <components.DropdownIndicator {...props}>
-    <img src={props.selectProps.menuIsOpen ? chevronUpIconBlack : chevronDownIconBlack} alt="Accordion toggle" />
-  </components.DropdownIndicator>
-);
-
-DropdownIndicator.propTypes = {
-  selectProps: PropTypes.object.isRequired
-};
-
-const CompaniesAccordion = ({ results, disabled_bubbles_areas }) => {
-  const areas = uniq(results.map(r => r.area));
-  const selectOptions = areas.map((level) => ({label: level, value: level}));
-  const [openItems, setOpenItems] = useState([]);
-  const [activeOption, setActiveOption] = useState(selectOptions[0]);
-
-  const ranges = SCORE_RANGES.map((range) => `${range.min}-${range.max}%`);
-
-  const parsedData = {};
-  results.forEach((result) => {
-    if (parsedData[result.area] === undefined) {
-      parsedData[result.area] = Array.from({ length: ranges.length }, () => []);
-    }
-    const rangeIndex = SCORE_RANGES.findIndex((range) => result.percentage >= range.min && result.percentage <= range.max);
-    if (rangeIndex >= 0) {
-      parsedData[result.area][rangeIndex].push({
-        ...result,
-        color: SCORE_RANGES[rangeIndex].color
-      });
-    } else {
-      console.error('WRONG INDEX', result);
-    }
-  });
-
-  const activeArea = disabled_bubbles_areas.includes(activeOption.value)
-    ? Array.from({ length: ranges.length }, () => [])
-    : parsedData[activeOption.value];
-
-  function setOpenItemByIndex(index) {
-    setOpenItems(openItems.includes(index) ? openItems.filter(i => i !== index) : [...openItems, index]);
-  }
-
-  return (
-    <div className="mobile_bubble-chart__container is-hidden-desktop">
-      <Select
-        options={selectOptions}
-        value={activeOption}
-        className="is-hidden-desktop"
-        onChange={(e) => { setActiveOption(e); }}
-        isSearchable={false}
-        styles={customSelectStyles}
-        components={{DropdownIndicator}}
-        theme={customSelectTheme}
-      />
-
-      <div className="accordions-list">
-        {SCORE_RANGES.map((range, i) => (
-          <div
-            key={`chart-item-list-${i}`}
-            className={cx('item-list', { open: openItems.includes(i) })}
-            style={{
-              background: range.color
-            }}
-          >
-            <div className="item-header" onClick={() => setOpenItemByIndex(i)}>
-              <div className="item-title">
-                <div>Score Range</div>
-                <div>{activeArea[i].length} {activeArea[i].length === 1 ? 'bank' : 'banks'}</div>
-              </div>
-              <div className="sector-subtitle">{range.min}-{range.max}%</div>
-            </div>
-            <div className="item-body">
-              <hr />
-              {activeArea[i].length === 0 && <div className="no-companies">No banks</div>}
-              {activeArea[i].length > 0 && (
-                <ul className="companies-list">
-                  {sortBy(activeArea[i], 'bank_name').map((bank, index) => (
-                    <li
-                      key={`chart-companies-${index}`}
-                      onClick={() => { window.location.href = bank.bank_path; }}
-                    >
-                      {bank.bank_name}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-CompaniesAccordion.defaultProps = {
-  disabled_bubbles_areas: []
-};
-
-CompaniesAccordion.propTypes = {
-  results: PropTypes.arrayOf(PropTypes.shape({
-    area: PropTypes.string.isRequired,
-    market_cap_group: PropTypes.string.isRequired,
-    percentage: PropTypes.number.isRequired,
-    bank_id: PropTypes.number.isRequired,
-    bank_name: PropTypes.string.isRequired,
-    bank_path: PropTypes.string.isRequired
-  })).isRequired,
-  disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
-};
-export default CompaniesAccordion;
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/index.js b/app/javascript/components/tpi/charts/ascor-bubble/index.js
index 8b9f31d85..9ec02597f 100644
--- a/app/javascript/components/tpi/charts/ascor-bubble/index.js
+++ b/app/javascript/components/tpi/charts/ascor-bubble/index.js
@@ -1,4 +1,3 @@
 import Chart from './Chart';
-import CompaniesAccordion from './CompaniesAccordion';
 
-export {Chart, CompaniesAccordion};
+export { Chart };