Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add value to circle chart range - companies chart #505

Merged
merged 3 commits into from
Nov 25, 2024
Merged

Add value to circle chart range - companies chart #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ffe1813
Add value to circle chart range - companies chart
barbara-chaves Nov 22, 2024
6fec742
Undo changes in db/structure file
barbara-chaves Nov 22, 2024
92e5969
Undo changes in db/structure file
barbara-chaves Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions app/assets/images/tpi/sectors-bubble-chart-legend.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions app/assets/stylesheets/tpi/_bubble-chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,21 +217,21 @@ $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;
}

Expand Down
35 changes: 9 additions & 26 deletions app/javascript/components/tpi/charts/bubble/Chart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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}`}
Expand Down Expand Up @@ -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>
);
Expand Down
18 changes: 12 additions & 6 deletions app/javascript/components/tpi/charts/bubble/SingleCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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()}
Expand All @@ -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>
Expand All @@ -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}>
Expand Down
2 changes: 0 additions & 2 deletions db/structure.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4181,5 +4181,3 @@ INSERT INTO "schema_migrations" (version) VALUES
('20240206094238'),
('20240527100352'),
('20241115133904');


Loading