Add more feautre

Add following features: Customize the no. of ticks Add axis label for all the chart Add color legend for interval chart Customize the color of the values Add suffix and prefix on the tick values Add min and max date for all line charts
UNDP-Data · Jan 3, 2025 · 555bbbb · 555bbbb
1 parent 77e9b04
commit 555bbbb
Show file tree

Hide file tree

Showing 61 changed files with 1,261 additions and 436 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@undp-data/undp-visualization-library",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/Graph.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/Graph.tsx
@@ -56,6 +56,9 @@ interface Props {
   resetSelectionOnDoubleClick: boolean;
   tooltipBackgroundStyle: CSSObject;
   detailsOnClick?: string;
+  xAxisTitle?: string;
+  noOfTicks: number;
+  valueColor?: string;
 }
 
 export function Graph(props: Props) {
@@ -95,13 +98,16 @@ export function Graph(props: Props) {
     resetSelectionOnDoubleClick,
     tooltipBackgroundStyle,
     detailsOnClick,
+    xAxisTitle,
+    valueColor,
+    noOfTicks,
   } = props;
   const [mouseOverData, setMouseOverData] = useState<any>(undefined);
   const [eventX, setEventX] = useState<number | undefined>(undefined);
   const [eventY, setEventY] = useState<number | undefined>(undefined);
   const [mouseClickData, setMouseClickData] = useState<any>(undefined);
   const margin = {
-    top: topMargin,
+    top: xAxisTitle ? topMargin + 25 : topMargin,
     bottom: bottomMargin,
     left: leftMargin,
     right: rightMargin,
@@ -176,7 +182,7 @@ export function Graph(props: Props) {
         : graphHeight,
     ])
     .paddingInner(barPadding);
-  const xTicks = x.ticks(5);
+  const xTicks = x.ticks(noOfTicks);
 
   return (
     <>
@@ -192,7 +198,7 @@ export function Graph(props: Props) {
                   <line
                     x1={x(d)}
                     x2={x(d)}
-                    y1={0 - margin.top}
+                    y1={0 - topMargin}
                     y2={graphHeight + margin.bottom + margin.top}
                     style={{
                       stroke:
@@ -204,7 +210,7 @@ export function Graph(props: Props) {
                   />
                   <text
                     x={x(d)}
-                    y={0 - margin.top}
+                    y={0 - topMargin}
                     textAnchor='start'
                     fontSize={12}
                     dy={10}
@@ -219,11 +225,29 @@ export function Graph(props: Props) {
                       fill: UNDPColorModule[mode || 'light'].grays['gray-500'],
                     }}
                   >
-                    {numberFormattingFunction(d, '', '')}
+                    {numberFormattingFunction(d, prefix, suffix)}
                   </text>
                 </g>
               ))
             : null}
+          {xAxisTitle ? (
+            <text
+              transform={`translate(${graphWidth / 2}, ${0 - margin.top})`}
+              style={{
+                fill: UNDPColorModule[mode || 'light'].grays['gray-700'],
+                fontFamily: rtl
+                  ? language === 'he'
+                    ? 'Noto Sans Hebrew, sans-serif'
+                    : 'Noto Sans Arabic, sans-serif'
+                  : 'ProximaNova, proxima-nova, Helvetica Neue, Roboto, sans-serif',
+              }}
+              textAnchor='middle'
+              dy={15}
+              fontSize={12}
+            >
+              {xAxisTitle}
+            </text>
+          ) : null}
           <AnimatePresence>
             {groupedData[indx].values.map(d => (
               <motion.g
@@ -342,9 +366,10 @@ export function Graph(props: Props) {
                     y={0}
                     style={{
                       fill:
-                        barColor.length > 1
+                        valueColor ||
+                        (barColor.length > 1
                           ? UNDPColorModule[mode || 'light'].grays['gray-600']
-                          : barColor[0],
+                          : barColor[0]),
                       fontSize: '0.875rem',
                       textAnchor: d.size
                         ? d.size < 0
@@ -365,11 +390,7 @@ export function Graph(props: Props) {
                     dy={5}
                     transition={{ duration: 0.5 }}
                   >
-                    {numberFormattingFunction(
-                      d.size,
-                      prefix || '',
-                      suffix || '',
-                    )}
+                    {numberFormattingFunction(d.size, prefix, suffix)}
                   </motion.text>
                 ) : null}
               </motion.g>

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/index.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedBarChart/index.tsx
@@ -70,6 +70,9 @@ interface Props {
   resetSelectionOnDoubleClick?: boolean;
   tooltipBackgroundStyle?: CSSObject;
   detailsOnClick?: string;
+  xAxisTitle?: string;
+  noOfTicks?: number;
+  valueColor?: string;
 }
 
 export function AnimatedHorizontalBarChart(props: Props) {
@@ -130,6 +133,9 @@ export function AnimatedHorizontalBarChart(props: Props) {
       padding: '0.5rem',
     },
     detailsOnClick,
+    xAxisTitle,
+    noOfTicks = 5,
+    valueColor,
   } = props;
 
   const [svgWidth, setSvgWidth] = useState(0);
@@ -384,6 +390,9 @@ export function AnimatedHorizontalBarChart(props: Props) {
                   resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}
                   tooltipBackgroundStyle={tooltipBackgroundStyle}
                   detailsOnClick={detailsOnClick}
+                  xAxisTitle={xAxisTitle}
+                  noOfTicks={noOfTicks}
+                  valueColor={valueColor}
                 />
               ) : null}
             </div>

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedGroupedBarGraph/Graph.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedGroupedBarGraph/Graph.tsx
@@ -53,6 +53,9 @@ interface Props {
   resetSelectionOnDoubleClick: boolean;
   tooltipBackgroundStyle: CSSObject;
   detailsOnClick?: string;
+  xAxisTitle?: string;
+  noOfTicks: number;
+  valueColor?: string;
 }
 
 export function Graph(props: Props) {
@@ -88,6 +91,9 @@ export function Graph(props: Props) {
     resetSelectionOnDoubleClick,
     tooltipBackgroundStyle,
     detailsOnClick,
+    xAxisTitle,
+    valueColor,
+    noOfTicks,
   } = props;
 
   const dataFormatted = sortBy(
@@ -117,7 +123,7 @@ export function Graph(props: Props) {
   );
 
   const margin = {
-    top: topMargin,
+    top: xAxisTitle ? topMargin + 25 : topMargin,
     bottom: bottomMargin,
     left: leftMargin,
     right: rightMargin,
@@ -161,7 +167,7 @@ export function Graph(props: Props) {
     .domain(data[0].size.map((_d, i) => `${i}`))
     .range([0, y.bandwidth()])
     .paddingInner(0.1);
-  const xTicks = x.ticks(5);
+  const xTicks = x.ticks(noOfTicks);
   return (
     <>
       <svg
@@ -173,27 +179,11 @@ export function Graph(props: Props) {
           {showTicks
             ? xTicks.map((d, i) => (
                 <g key={i}>
-                  <text
-                    x={x(d)}
-                    y={-12.5}
-                    style={{
-                      fill: UNDPColorModule[mode || 'light'].grays['gray-500'],
-                      fontFamily: rtl
-                        ? language === 'he'
-                          ? 'Noto Sans Hebrew, sans-serif'
-                          : 'Noto Sans Arabic, sans-serif'
-                        : 'ProximaNova, proxima-nova, Helvetica Neue, Roboto, sans-serif',
-                    }}
-                    textAnchor='middle'
-                    fontSize={12}
-                  >
-                    {numberFormattingFunction(d, '', '')}
-                  </text>
                   <line
                     x1={x(d)}
                     x2={x(d)}
-                    y1={-2.5}
-                    y2={graphHeight + margin.bottom}
+                    y1={0 - topMargin}
+                    y2={graphHeight + margin.bottom + margin.top}
                     style={{
                       stroke:
                         UNDPColorModule[mode || 'light'].grays['gray-500'],
@@ -202,9 +192,46 @@ export function Graph(props: Props) {
                     strokeDasharray='4,8'
                     opacity={d === 0 ? 0 : 1}
                   />
+                  <text
+                    x={x(d)}
+                    y={0 - topMargin}
+                    textAnchor='start'
+                    fontSize={12}
+                    dy={10}
+                    dx={3}
+                    opacity={d === 0 ? 0 : 1}
+                    style={{
+                      fontFamily: rtl
+                        ? language === 'he'
+                          ? 'Noto Sans Hebrew, sans-serif'
+                          : 'Noto Sans Arabic, sans-serif'
+                        : 'ProximaNova, proxima-nova, Helvetica Neue, Roboto, sans-serif',
+                      fill: UNDPColorModule[mode || 'light'].grays['gray-500'],
+                    }}
+                  >
+                    {numberFormattingFunction(d, prefix, suffix)}
+                  </text>
                 </g>
               ))
             : null}
+          {xAxisTitle ? (
+            <text
+              transform={`translate(${graphWidth / 2}, ${0 - margin.top})`}
+              style={{
+                fill: UNDPColorModule[mode || 'light'].grays['gray-700'],
+                fontFamily: rtl
+                  ? language === 'he'
+                    ? 'Noto Sans Hebrew, sans-serif'
+                    : 'Noto Sans Arabic, sans-serif'
+                  : 'ProximaNova, proxima-nova, Helvetica Neue, Roboto, sans-serif',
+              }}
+              textAnchor='middle'
+              dy={15}
+              fontSize={12}
+            >
+              {xAxisTitle}
+            </text>
+          ) : null}
           <AnimatePresence>
             {groupedData[indx].values.map((d, i) => {
               return (
@@ -282,7 +309,7 @@ export function Graph(props: Props) {
                             subBarScale.bandwidth() / 2
                           }
                           style={{
-                            fill: barColors[j],
+                            fill: valueColor || barColors[j],
                             fontSize: '0.875rem',
                             textAnchor: el
                               ? el < 0
@@ -302,11 +329,7 @@ export function Graph(props: Props) {
                           }}
                           transition={{ duration: 0.5 }}
                         >
-                          {numberFormattingFunction(
-                            el,
-                            prefix || '',
-                            suffix || '',
-                          )}
+                          {numberFormattingFunction(el, prefix, suffix)}
                         </motion.text>
                       ) : null}
                     </motion.g>

diff --git a/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedGroupedBarGraph/index.tsx b/src/Components/Graphs/BarGraph/HorizontalBarGraph/AnimatedGroupedBarGraph/index.tsx
@@ -65,6 +65,9 @@ interface Props {
   resetSelectionOnDoubleClick?: boolean;
   tooltipBackgroundStyle?: CSSObject;
   detailsOnClick?: string;
+  xAxisTitle?: string;
+  noOfTicks?: number;
+  valueColor?: string;
 }
 
 export function AnimatedHorizontalGroupedBarGraph(props: Props) {
@@ -120,6 +123,9 @@ export function AnimatedHorizontalGroupedBarGraph(props: Props) {
       padding: '0.5rem',
     },
     detailsOnClick,
+    xAxisTitle,
+    noOfTicks = 5,
+    valueColor,
   } = props;
   const [svgWidth, setSvgWidth] = useState(0);
   const [svgHeight, setSvgHeight] = useState(0);
@@ -338,6 +344,9 @@ export function AnimatedHorizontalGroupedBarGraph(props: Props) {
                   resetSelectionOnDoubleClick={resetSelectionOnDoubleClick}
                   tooltipBackgroundStyle={tooltipBackgroundStyle}
                   detailsOnClick={detailsOnClick}
+                  xAxisTitle={xAxisTitle}
+                  noOfTicks={noOfTicks}
+                  valueColor={valueColor}
                 />
               ) : null}
             </div>