From ffe1813a7f5a08cdb6aad1f8b3b2d40bc442d4ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= Date: Fri, 22 Nov 2024 11:28:35 +0100 Subject: [PATCH] Add value to circle chart range - companies chart --- .../tpi/sectors-bubble-chart-legend.svg | 18 +++++----- app/assets/stylesheets/tpi/_bubble-chart.scss | 8 ++--- .../components/tpi/charts/bubble/Chart.js | 35 +++++-------------- .../tpi/charts/bubble/SingleCell.js | 18 ++++++---- db/structure.sql | 16 ++++----- 5 files changed, 41 insertions(+), 54 deletions(-) diff --git a/app/assets/images/tpi/sectors-bubble-chart-legend.svg b/app/assets/images/tpi/sectors-bubble-chart-legend.svg index dbb387ebc..4c1dedfda 100644 --- a/app/assets/images/tpi/sectors-bubble-chart-legend.svg +++ b/app/assets/images/tpi/sectors-bubble-chart-legend.svg @@ -1,8 +1,10 @@ - - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/app/assets/stylesheets/tpi/_bubble-chart.scss b/app/assets/stylesheets/tpi/_bubble-chart.scss index 56e86e56f..6d0c1ffe0 100644 --- a/app/assets/stylesheets/tpi/_bubble-chart.scss +++ b/app/assets/stylesheets/tpi/_bubble-chart.scss @@ -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; } diff --git a/app/javascript/components/tpi/charts/bubble/Chart.js b/app/javascript/components/tpi/charts/bubble/Chart.js index 16127caf5..9f11dcaee 100644 --- 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 (
@@ -137,7 +136,7 @@ const BubbleChart = ({ levels, sectors }) => { alt="Bubble size description" />
- {Object.keys(COMPANIES_MARKET_CAP_GROUPS).map( + {COMPANIES_MARKET_CAP_GROUPS.map( (companySize, i) => ( { key={dataRow.sector} /> ))} - {/*
- {levelsSignature.map((dataRow) => ( - - - - ))} -
*/}
); diff --git a/app/javascript/components/tpi/charts/bubble/SingleCell.js b/app/javascript/components/tpi/charts/bubble/SingleCell.js index 766db80ae..13fc7cf87 100644 --- 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 ( - + { > - {data.value} + {VALUE} @@ -82,7 +88,7 @@ const SingleCell = ({ width, height, data, uniqueKey }) => { >

{data.tooltipContent.title}

{data.tooltipContent.level}

-

{data.value} {data.value === 1 ? 'company' : 'companies'}

+

{VALUE} {VALUE === 1 ? 'company' : 'companies'}

    {data.tooltipContent.companies.map(company => (
  1. diff --git a/db/structure.sql b/db/structure.sql index 5767c6c7c..4fa9f8292 100644 --- a/db/structure.sql +++ b/db/structure.sql @@ -1,6 +1,7 @@ SET statement_timeout = 0; SET lock_timeout = 0; SET idle_in_transaction_session_timeout = 0; +SET transaction_timeout = 0; SET client_encoding = 'UTF8'; SET standard_conforming_strings = on; SELECT pg_catalog.set_config('search_path', '', false); @@ -9,13 +10,6 @@ SET xmloption = content; SET client_min_messages = warning; SET row_security = off; --- --- Name: public; Type: SCHEMA; Schema: -; Owner: - --- - --- *not* creating schema, since initdb creates it - - -- -- Name: pg_trgm; Type: EXTENSION; Schema: -; Owner: - -- @@ -92,6 +86,8 @@ CREATE FUNCTION public.target_tsv_trigger() RETURNS trigger SET default_tablespace = ''; +SET default_table_access_method = heap; + -- -- Name: active_admin_comments; Type: TABLE; Schema: public; Owner: - -- @@ -3605,21 +3601,21 @@ CREATE UNIQUE INDEX index_tpi_sectors_on_slug ON public.tpi_sectors USING btree -- Name: legislations tsvectorupdate; Type: TRIGGER; Schema: public; Owner: - -- -CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.legislations FOR EACH ROW EXECUTE PROCEDURE public.legislation_tsv_trigger(); +CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.legislations FOR EACH ROW EXECUTE FUNCTION public.legislation_tsv_trigger(); -- -- Name: litigations tsvectorupdate; Type: TRIGGER; Schema: public; Owner: - -- -CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.litigations FOR EACH ROW EXECUTE PROCEDURE public.litigation_tsv_trigger(); +CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.litigations FOR EACH ROW EXECUTE FUNCTION public.litigation_tsv_trigger(); -- -- Name: targets tsvectorupdate; Type: TRIGGER; Schema: public; Owner: - -- -CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.targets FOR EACH ROW EXECUTE PROCEDURE public.target_tsv_trigger(); +CREATE TRIGGER tsvectorupdate BEFORE INSERT OR UPDATE ON public.targets FOR EACH ROW EXECUTE FUNCTION public.target_tsv_trigger(); --