Pillar
- Area
-
- {ranges.map((range) => (
-
-
+ <>
{range}
+
+
);
};
@@ -115,82 +141,60 @@ 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 ChartRows = ({ data }) => data?.map((pillar, pillarIndex) => {
+ const pillarName = pillar.pillar;
+ const pillarSpan = pillar.values.length;
const pillarAcronym = pillarName
.split(' ')
.map((word) => word[0])
.join('');
- const areaIndex = pillar && pillar[1].findIndex((el) => el === area);
-
return (
-
+
+ {isMobile ? (
+ Pillar
+ Area
+
+ {ranges.map((range) => (
+
+
+ ))}
+ {range}
+
+
- ))}
- {Object.keys(parsedData).map((area) => createRow(parsedData[area], area, pillars, disabled_bubbles_areas))}
+ ) : (
+
+
+ )}
- {pillarIndex + 1}. {pillarName}
-
- {areaIndex === 0 && (
-
-
1 && '8px solid #E8E8E8',
- borderRight: 'none',
- height: '100%'
- }}
- />
-
- )}
-
- {pillarAcronym} {areaIndex + 1}. {area}
+
+ {pillarIndex + 1}. {pillarName}
+
+
- {dataRow.map((el, i) => {
- const countriesBubbles = disabled_bubbles_areas.includes(area)
- ? []
- : el.map((result) => ({
- value: COMPANIES_MARKET_CAP_GROUPS[result.market_cap_group],
- 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 (
-
- {ForceLayoutBubbleChart(countriesBubbles, uniqueKey)}
+
+ {pillar.values.map(({ area, values: areaValues }, areaIndex) => (
+ <>
+
+
+);
+
+Item.propTypes = {
+ title: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ children: PropTypes.node,
+ onOpen: PropTypes.func.isRequired,
+ isOpen: PropTypes.bool,
+ icon: PropTypes.string.isRequired
+};
+Item.defaultProps = {
+ className: '',
+ children: null,
+ isOpen: false
+};
+
+const ResultItem = ({ result, i }) => {
+ const [isOpen, setIsOpen] = useState(false);
+ {
+ const color = Object.values(SCORE_RANGES)[i];
+ const title = `${result.length} countries`;
+
+ return (
+
+
+ );
+ }
+};
+
+const ChartMobile = ({ data }) => {
+ const [openPillars, setOpenPillars] = useState([]);
+ const [openAreas, setOpenAreas] = useState([]);
+
+ const handleOpenAreas = (key) => {
+ setOpenAreas((prevState) => {
+ if (prevState.includes(key)) {
+ return prevState.filter((area) => area !== key);
+ }
+ return [...prevState, key];
+ });
+ };
+
+ const handleOpenPillars = (key) => {
+ if (openPillars.includes(key)) {
+ setOpenPillars((prevState) => prevState.filter((pillar) => pillar !== key));
+ setOpenAreas((prevState) => prevState.filter((area) => !area.includes(`${key}.`)));
+ return;
+ }
+ setOpenPillars((prevState) => [...prevState, key]);
+ };
+
+ return (
+
+ {pillarAcronym} {areaIndex + 1}. {area}
- );
- })}
-
+ {areaValues.map((areaValuesResult, i) => {
+ const countriesBubbles = areaValuesResult.map((result) => ({
+ value: COMPANIES_MARKET_CAP_GROUPS[result.market_cap_group],
+ 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}-${areaIndex}-${i}`;
+ return (
+
+ {ForceLayoutBubbleChart(countriesBubbles, uniqueKey)}
+
+ );
+ })}
+
+ ))}
+
);
-};
-BubbleChart.defaultProps = {
- disabled_bubbles_areas: []
-};
+});
BubbleChart.propTypes = {
results: PropTypes.arrayOf(
@@ -203,7 +207,6 @@ BubbleChart.propTypes = {
result: PropTypes.string.isRequired,
pillar: PropTypes.string.isRequired
})
- ).isRequired,
- disabled_bubbles_areas: PropTypes.arrayOf(PropTypes.string)
+ ).isRequired
};
export default BubbleChart;
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js b/app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js
index ccf6cdc5e..ce1b2bf0a 100644
--- a/app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js
+++ b/app/javascript/components/tpi/charts/ascor-bubble/SingleCell.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { range } from 'd3-array';
import { select } from 'd3-selection';
import * as d3 from 'd3-force';
+import { SCORE_RANGES } from './constants';
const SingleCell = ({
width,
@@ -20,7 +21,7 @@ const SingleCell = ({
const nodes = range(data.length).map(function (index) {
return {
- color: data[index].color,
+ color: SCORE_RANGES[data[index].result],
tooltipContent: data[index].tooltipContent,
path: data[index].path,
radius: data[index].value,
@@ -30,8 +31,8 @@ const SingleCell = ({
const simulation = () => {
d3.forceSimulation(nodes)
- .force('charge', d3.forceManyBody().strength(60))
- .force('y', d3.forceY().strength(0.45).y(0))
+ .force('charge', d3.forceManyBody().strength(10))
+ .force('y', d3.forceY().strength(0.3).y(0))
.force(
'collision',
d3.forceCollide().radius(function (d) {
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/ChartMobile.js b/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/ChartMobile.js
new file mode 100644
index 000000000..d663829cd
--- /dev/null
+++ b/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/ChartMobile.js
@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import chevronIcon from 'images/icons/white-chevron-down.svg';
+import chevronIconBlack from 'images/icon_chevron_dark/chevron_down_black-1.svg';
+import { SCORE_RANGES } from '../constants';
+
+const Item = ({ title, children, className, isOpen, onOpen, icon }) => (
+
+ {title}
+ 
+
+
+ {children}
+
+ setIsOpen((prevState) => !prevState)}
+ >
+
+ {!isOpen && {title}}
+
+
+ {isOpen && (
+ -
+ {result.length ? (
+ result.map((country) => (
+
- {country.country_name} + )) + ) : ( +
- No countries + )} +
+
+ );
+};
+
+ChartMobile.propTypes = {
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ pillar: PropTypes.string,
+ values: PropTypes.arrayOf(
+ PropTypes.shape({
+ area: PropTypes.string,
+ values: PropTypes.array
+ })
+ )
+ })
+ )
+};
+
+ChartMobile.defaultProps = {
+ data: []
+};
+
+export default ChartMobile;
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/index.js b/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/index.js
new file mode 100644
index 000000000..dc8cbf4b0
--- /dev/null
+++ b/app/javascript/components/tpi/charts/ascor-bubble/chart-mobile/index.js
@@ -0,0 +1,3 @@
+import ChartMobile from './ChartMobile';
+
+export default ChartMobile;
diff --git a/app/javascript/components/tpi/charts/ascor-bubble/constants.js b/app/javascript/components/tpi/charts/ascor-bubble/constants.js
index 8ec9dfb14..f31d301d6 100644
--- a/app/javascript/components/tpi/charts/ascor-bubble/constants.js
+++ b/app/javascript/components/tpi/charts/ascor-bubble/constants.js
@@ -1,14 +1,7 @@
-export const SCORE_RANGES = [
- {
- value: 'No',
- color: '#F26E6E'
- },
- {
- value: 'Partial',
- color: '#F9A400'
- },
- {
- value: 'Yes',
- color: '#17B091'
- }
-];
+export const SCORE_RANGES = {
+ No: '#F26E6E',
+ Partial: '#F9A400',
+ Yes: '#17B091'
+};
+
+export const VALUES = { No: [], Partial: [], Yes: [] };
-
+ {data.map((pillar) => (
+
- handleOpenPillars(pillar.pillar)}
+ icon={chevronIcon}
+ >
+
-
+ {pillar.values.map((area, areaIndex) => {
+ const pillarAcronym = pillar.pillar
+ .split(' ')
+ .map((word) => word[0])
+ .join('');
+ const title = `${pillarAcronym} ${areaIndex + 1}. ${area.area}`;
+ return (
+
- handleOpenAreas(`${pillar.pillar}.${area.area}`)}
+ icon={chevronIconBlack}
+ >
+
-
+ {area.values.map((result, i) => (
+
+ ))} +
+ );
+ })}
+
+ ))}
+ - handleOpenAreas(`${pillar.pillar}.${area.area}`)}
+ icon={chevronIconBlack}
+ >
+