several fixes

UNDP-Data · Jun 7, 2024 · ad5fb6d · ad5fb6d
1 parent c7c57ac
commit ad5fb6d
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 27 deletions.
diff --git a/src/AllCountries/HorizontalScale.tsx b/src/AllCountries/HorizontalScale.tsx
@@ -16,7 +16,7 @@ export function HorizontalScale(props: Props) {
   const { countryDsa, categories, id, title, svgHeight, chartSource } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const [svgWidth, setSvgWidth] = useState<number | 400>(400);
-  const margin = { top: 20, right: 40, bottom: 20, left: 0 };
+  const margin = { top: 15, right: 10, bottom: 15, left: 10 };
   const value = countryDsa.length > 0 ? countryDsa[0].category : '';
   const colors = UNDPColorModule.sequentialColors.negativeColorsx04
     .slice()
@@ -31,15 +31,10 @@ export function HorizontalScale(props: Props) {
   }, []);
   return (
     <div ref={containerRef} className='chart-container rating'>
-      <h6 className='undp-typography margin-bottom-01'>{title}</h6>
+      <h6 className='undp-typography margin-bottom-04'>{title}</h6>
       {value !== '' && categories.length > 0 ? (
         <>
-          <svg
-            width='100%'
-            height='100%'
-            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-            id={id}
-          >
+          <svg width='100%' viewBox={`0 0 ${svgWidth} ${svgHeight}`} id={id}>
             <g transform={`translate(${margin.left},${margin.top})`}>
               {categories.map((d, i) => (
                 <g key={i} transform={`translate(${i * 120},0)`}>

diff --git a/src/AllCountries/LinearDotComparison.tsx b/src/AllCountries/LinearDotComparison.tsx
@@ -22,7 +22,7 @@ export function LinearDotsComparison(props: Props) {
     props;
   const containerRef = useRef<HTMLDivElement>(null);
   const [svgWidth, setSvgWidth] = useState<number | 400>(400);
-  const margin = { top: 30, right: 10, bottom: 20, left: 10 };
+  const margin = { top: 35, right: 10, bottom: 40, left: 10 };
   const xDomain = extent(data, d => Number(d.value));
   const colors = UNDPColorModule.sequentialColors.negativeColorsx07
     .slice()
@@ -60,15 +60,10 @@ export function LinearDotsComparison(props: Props) {
   }, [svgWidth]);
   return (
     <div ref={containerRef} className='chart-container rating'>
-      <h6 className='undp-typography margin-bottom-08'>{title}</h6>
+      <h6 className='undp-typography margin-bottom-04'>{title}</h6>
       {countryData !== undefined && data.length > 0 ? (
         <>
-          <svg
-            width='100%'
-            height='100%'
-            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
-            id={id}
-          >
+          <svg width='100%' viewBox={`0 0 ${svgWidth} ${svgHeight}`} id={id}>
             <g transform={`translate(${margin.left},${margin.top})`}>
               <rect
                 x={x(1) - 6}

diff --git a/src/AllCountries/StackedBarChartSimple/Graph.tsx b/src/AllCountries/StackedBarChartSimple/Graph.tsx
@@ -15,13 +15,13 @@ interface Props {
 
 export function Graph(props: Props) {
   const { data, sections, id, maxValue, svgWidth } = props;
-  const margin = { top: 20, right: 30, bottom: 50, left: 60 };
-  const graphHeight = 500 - margin.top - margin.bottom;
+  const margin = { top: 20, right: 30, bottom: 20, left: 60 };
+  const graphHeight = 400 - margin.top - margin.bottom;
   const stackedData = stack().keys(sections)(data as any);
-  const y = scaleLinear().domain([0, maxValue]).range([0, graphHeight]).nice();
+  const y = scaleLinear().domain([0, maxValue]).range([0, graphHeight]);
   return (
     <div>
-      <svg width={`${svgWidth}px`} height='470px' id={id}>
+      <svg width={`${svgWidth}px`} height='400px' id={id}>
         <g transform={`translate(${svgWidth / 2 - 210},${margin.top})`}>
           {stackedData.map((d, i) => (
             <g key={i} className='stackedRect'>

diff --git a/src/AllCountries/index.tsx b/src/AllCountries/index.tsx
@@ -220,8 +220,15 @@ export function AllCountries(props: Props) {
           creditors.
         </p>
         <div className='flex-div flex-wrap'>
-          <div style={{ flexBasis: '30%', flexGrow: '1' }}>
-            <div className='stat-card'>
+          <div style={{ flexBasis: '30%', flexGrow: '1', display: 'flex' }}>
+            <div
+              className='stat-card'
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+              }}
+            >
               <h3>{countryStats?.externalGovDebt}</h3>
               <h4>USD</h4>
               <p className='undp-typography'>

diff --git a/src/StackedBarChart/Graph.tsx b/src/StackedBarChart/Graph.tsx
@@ -18,7 +18,7 @@ export function Graph(props: Props) {
   const numberData = data.filter(d => (d as any).Value === 'Number')[0];
   const subgroups = Object.keys(data[0]).slice(2);
   const stackedData = stack().keys(subgroups)(percentageData as any);
-  const y = scaleLinear().domain([0, 100]).range([0, graphHeight]).nice();
+  const y = scaleLinear().domain([0, 100]).range([0, graphHeight]);
   return (
     <div>
       {valueArray.length > 0 ? (
@@ -39,7 +39,7 @@ export function Graph(props: Props) {
                     <>
                       <text
                         textAnchor='end'
-                        className='chartLabel'
+                        className='chartLabelLarge'
                         y={y(d[0][0]) + y(d[0][1] - d[0][0]) / 2}
                         x={110}
                       >

diff --git a/src/StackedBarComposition/Graph.tsx b/src/StackedBarComposition/Graph.tsx
@@ -17,8 +17,7 @@ export function Graph(props: Props) {
   const stackedData = stack().keys(subgroups)([data as any]);
   const y = scaleLinear()
     .domain([0, (data as any).Total])
-    .range([0, graphHeight])
-    .nice();
+    .range([0, graphHeight]);
   return (
     <div>
       {Object.keys(data).length > 0 ? (

diff --git a/src/style.css b/src/style.css
@@ -51,6 +51,9 @@ p.source{
 .chartLabel {
   font-size: 0.875rem;
 }
+.chartLabelLarge {
+  font-size: 1rem; 
+}
 .labelSelected{
   font-size: 1.3rem;
 }
@@ -151,5 +154,4 @@ p.source{
 }
 .not-available{
   font-size: 2rem;
-  font-weight: bold;
 }