feat: Allow to hide bank assessment results at charts

app/admin/bank_assessment_indicators.rb

@@ -12,7 +12,7 @@
 
   data_export_sidebar 'BankAssessmentIndicators', display_name: 'Indicators'
 
-  permit_params :number, :indicator_type, :text, :comment
+  permit_params :number, :indicator_type, :text, :comment, :disable_bubbles_at_chart
 
   show do
     attributes_table do
@@ -21,6 +21,7 @@
       row :indicator_type
       row :text
       row :comment
+      row :disable_bubbles_at_chart
       row :created_at
       row :updated_at
     end
@@ -36,6 +37,7 @@
       f.input :number
       f.input :text
       f.input :comment
+      f.input :disable_bubbles_at_chart
     end
 
     f.actions

app/javascript/components/tpi/charts/bank-bubble/Chart.js

@@ -21,7 +21,7 @@ const SINGLE_CELL_SVG_HEIGHT = 100 * SCALE;
 const tooltipDisclaimer = 'Market cap size';
 let tooltip = null;
 
-const BubbleChart = ({ results }) => {
+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);
@@ -91,7 +91,7 @@ const BubbleChart = ({ results }) => {
           </div>
         </div>
       ))}
-      {Object.keys(parsedData).map((area, index) => createRow(parsedData[area], area, index + 1))}
+      {Object.keys(parsedData).map((area, index) => createRow(parsedData[area], area, index + 1, disabled_bubbles_areas))}
     </div>
   );
 };
@@ -139,13 +139,13 @@ const hideTooltip = () => {
   tooltip.setAttribute('hidden', true);
 };
 
-const createRow = (dataRow, area, index) => (
+const createRow = (dataRow, area, index, disabled_bubbles_areas) => (
   <React.Fragment key={Math.random()}>
     <div className="bubble-chart__row-link">
       {index}.&nbsp;{area}
     </div>
     {dataRow.map((el, i) => {
-      const companiesBubbles = el.map(result => ({
+      const companiesBubbles = disabled_bubbles_areas.includes(area) ? [] : el.map(result => ({
         value: COMPANIES_MARKET_CAP_GROUPS[result.market_cap_group],
         tooltipContent: {
           header: result.bank_name,
@@ -168,6 +168,10 @@ const createRow = (dataRow, area, index) => (
   </React.Fragment>
 );
 
+BubbleChart.defaultProps = {
+  disabled_bubbles_areas: []
+};
+
 BubbleChart.propTypes = {
   results: PropTypes.arrayOf(PropTypes.shape({
     area: PropTypes.string.isRequired,
@@ -176,6 +180,7 @@ BubbleChart.propTypes = {
     bank_id: PropTypes.number.isRequired,
     bank_name: PropTypes.string.isRequired,
     bank_path: PropTypes.string.isRequired
-  })).isRequired
+  })).isRequired,
+  disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
 };
 export default BubbleChart;

app/javascript/components/tpi/charts/bank-bubble/CompaniesAccordion.js

@@ -58,7 +58,7 @@ DropdownIndicator.propTypes = {
   selectProps: PropTypes.object.isRequired
 };
 
-const CompaniesAccordion = ({ results }) => {
+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([]);
@@ -82,7 +82,9 @@ const CompaniesAccordion = ({ results }) => {
     }
   });
 
-  const activeArea = parsedData[activeOption.value];
+  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]);
@@ -113,21 +115,21 @@ const CompaniesAccordion = ({ results }) => {
             <div className="item-header" onClick={() => setOpenItemByIndex(i)}>
               <div className="item-title">
                 <div>Score Range</div>
-                <div>{activeArea[i].length} {activeArea[i].length === 1 ? 'company' : 'companies'}</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 companies</div>}
+              {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((company, index) => (
+                  {sortBy(activeArea[i], 'bank_name').map((bank, index) => (
                     <li
                       key={`chart-companies-${index}`}
-                      onClick={() => { window.location.href = company.bank_path; }}
+                      onClick={() => { window.location.href = bank.bank_path; }}
                     >
-                      {company.bank_name}
+                      {bank.bank_name}
                     </li>
                   ))}
                 </ul>
@@ -141,6 +143,7 @@ const CompaniesAccordion = ({ results }) => {
 };
 
 CompaniesAccordion.defaultProps = {
+  disabled_bubbles_areas: []
 };
 
 CompaniesAccordion.propTypes = {
@@ -151,6 +154,7 @@ CompaniesAccordion.propTypes = {
     bank_id: PropTypes.number.isRequired,
     bank_name: PropTypes.string.isRequired,
     bank_path: PropTypes.string.isRequired
-  })).isRequired
+  })).isRequired,
+  disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
 };
 export default CompaniesAccordion;

app/views/tpi/banks/_index_charts.html.erb

@@ -1,3 +1,9 @@
 <%= react_component('charts/average-bank-score', { dataUrl: average_bank_score_chart_data_tpi_banks_path }) %>
-<%= react_component('charts/bank-bubble/Chart', { results: @results }) %>
-<%= react_component('charts/bank-bubble/CompaniesAccordion', { results: @results }) %>
+<%= react_component('charts/bank-bubble/Chart', {
+  results: @results,
+  disabled_bubbles_areas: BankAssessmentIndicator.area.where(disable_bubbles_at_chart: true).pluck(:text)
+}) %>
+<%= react_component('charts/bank-bubble/CompaniesAccordion', {
+  results: @results,
+  disabled_bubbles_areas: BankAssessmentIndicator.area.where(disable_bubbles_at_chart: true).pluck(:text)
+}) %>

app/views/tpi/banks/index.html.erb

@@ -51,7 +51,7 @@
       </div>
     </div>
     <div class="banks-score-description">
-      Assessed banks alignment across the six areas (% of sub-indicators aligned with)
+      Assessed banks alignment across the ten areas (% of sub-indicators aligned with)
     </div>
 
     <div id="assessment-charts">

db/migrate/20230926075145_add_disable_bubbles_at_graph_to_bank_assessment_indicator.rb

@@ -0,0 +1,6 @@
+class AddDisableBubblesAtGraphToBankAssessmentIndicator < ActiveRecord::Migration[6.1]
+  def change
+    add_column :bank_assessment_indicators, :disable_bubbles_at_chart, :boolean, default: false
+    BankAssessmentIndicator.area.where(number: ["4"]).update_all disable_bubbles_at_chart: true
+  end
+end

db/structure.sql

@@ -321,7 +321,8 @@ CREATE TABLE public.bank_assessment_indicators (
     text text NOT NULL,
     created_at timestamp(6) without time zone NOT NULL,
     updated_at timestamp(6) without time zone NOT NULL,
-    comment text
+    comment text,
+    disable_bubbles_at_chart boolean DEFAULT false
 );
 
 
@@ -3732,6 +3733,7 @@ INSERT INTO "schema_migrations" (version) VALUES
 ('20230622073030'),
 ('20230622093001'),
 ('20230712074753'),
-('20230713121501');
+('20230713121501'),
+('20230926075145');