Add feature to add year on multiline chart

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.3.16",
+  "version": "2.3.17",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",

package.json

@@ -90,6 +90,7 @@ interface Props {
   customLayers: CustomLayerDataType[];
   naLabel: string;
   showHighlightedLinesLabels: boolean;
+  showDateOnHover: boolean;
 }
 
 interface FormattedDataType {
@@ -140,6 +141,7 @@ export function Graph(props: Props) {
     naLabel,
     customLayers,
     showHighlightedLinesLabels,
+    showDateOnHover,
   } = props;
   const svgRef = useRef(null);
   const isInView = useInView(svgRef, {
@@ -575,23 +577,41 @@ export function Graph(props: Props) {
               </motion.g>
             ))}
             {mouseOverData ? (
-              <text
-                y={y(mouseOverData.y) - 8}
-                x={x(mouseOverData.date)}
-                className={cn('graph-value text-sm font-bold', classNames?.graphObjectValues)}
-                style={{
-                  fill:
-                    data.filter(el => el.color).length === 0
-                      ? lineColors[0]
-                      : !mouseOverData.color
-                        ? Colors.gray
-                        : lineColors[colorDomain.indexOf(mouseOverData.color)],
-                  textAnchor: 'middle',
-                  ...(styles?.graphObjectValues || {}),
-                }}
-              >
-                {numberFormattingFunction(mouseOverData.y, naLabel, precision, prefix, suffix)}
-              </text>
+              <>
+                <text
+                  y={y(mouseOverData.y) - 8}
+                  x={x(mouseOverData.date)}
+                  className={cn('graph-value text-sm font-bold', classNames?.graphObjectValues)}
+                  style={{
+                    fill:
+                      data.filter(el => el.color).length === 0
+                        ? lineColors[0]
+                        : !mouseOverData.color
+                          ? Colors.gray
+                          : lineColors[colorDomain.indexOf(mouseOverData.color)],
+                    textAnchor: 'middle',
+                    ...(styles?.graphObjectValues || {}),
+                  }}
+                >
+                  {numberFormattingFunction(mouseOverData.y, naLabel, precision, prefix, suffix)}
+                </text>
+                {showDateOnHover && (
+                  <text
+                    y={y(mouseOverData.y) + 20}
+                    x={x(mouseOverData.date)}
+                    className={cn(
+                      'graph-value text-sm fill-primary-gray-500 dark:fill-primary-gray-400',
+                      classNames?.graphObjectValues,
+                    )}
+                    style={{
+                      textAnchor: 'middle',
+                      ...(styles?.graphObjectValues || {}),
+                    }}
+                  >
+                    {format(new Date(mouseOverData.date), dateFormat || 'yyyy')}
+                  </text>
+                )}
+              </>
             ) : null}
           </motion.g>
           {dataFormatted

src/Components/Graphs/LineCharts/MultiLineAltChart/Graph.tsx

@@ -113,6 +113,8 @@ interface Props {
   showColorScale?: boolean;
   /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
   showNAColor?: boolean;
+  /** Toggle visibility of year labels on hover. */
+  showDateOnHover?: boolean;
   /** Defines how “NA” values should be displayed/labelled in the graph */
   naLabel?: string;
   /** Data points to highlight. Use the label value from data to highlight the data point */
@@ -212,6 +214,7 @@ export function MultiLineAltChart(props: Props) {
     precision = 2,
     customLayers = [],
     naLabel = 'NA',
+    showDateOnHover = false,
   } = props;
 
   const [svgWidth, setSvgWidth] = useState(0);
@@ -339,6 +342,7 @@ export function MultiLineAltChart(props: Props) {
             precision={precision}
             customLayers={customLayers}
             naLabel={naLabel}
+            showDateOnHover={showDateOnHover}
           />
         ) : null}
       </GraphArea>

src/Components/Graphs/LineCharts/MultiLineAltChart/index.tsx

@@ -185,6 +185,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
     graphDownload: { table: { defaultValue: { summary: 'false' } } },
     highlightedLines: { control: 'text' },
     dataDownload: { table: { defaultValue: { summary: 'false' } } },
+    showDateOnHover: { control: 'boolean', table: { defaultValue: { summary: 'false' } } },
 
     // Interactions and Callbacks
     onSeriesMouseOver: { action: 'seriesMouseOver' },