Add styling to the label in dot desity and hybrid maps

Author: mustafasaifee42

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@undp/data-viz",
-  "version": "2.1.7",
+  "version": "2.1.9",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "browser": "./dist/index.umd.js",
@@ -470,7 +470,7 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
-    "@undp/design-system-react": "^1.5.3",
+    "@undp/design-system-react": "^1.5.5",
     "ajv": "^8.17.1",
     "dom-to-svg": "^0.12.2",
     "file-saver": "^2.0.5",

package.json

@@ -1,43 +1,35 @@
-import { A, H3, P } from '@undp/design-system-react/Typography';
 import '@undp/design-system-react/style.css';
 import './styles/styles.css';
+import { DotDensityMap } from './Components/Graphs/Maps/DotDensityMap';
 
 function App() {
   return (
-    <div
-      style={{
-        height: '90vh',
-        maxWidth: '712px',
-        margin: '0 auto',
-        padding: '2rem',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <img width='56' alt='undp-logo' src='/undp-logo-blue.svg' />
-      <H3 style={{ textAlign: 'center', paddingTop: '24px' }}>UNDP Data Visualization Library</H3>
-      <P style={{ textAlign: 'center' }}>
-        This visualization library for react, developed by the United Nations Development Programme,
-        offers various interactive visualizations such as graphs, maps, and animated charts. You can
-        access the documentation{' '}
-        <A href='https://dataviz.design.undp.org/' target='_blank' rel='noreferrer'>
-          here
-        </A>
-        .
-      </P>
-      <P
-        style={{
-          textAlign: 'center',
-        }}
-      >
-        For any feedback or inquiries, please feel free to reach out to us at{' '}
-        <A href='mailto:data@undp.org' target='_blank' rel='noreferrer'>
-          data@undp.org
-        </A>
-      </P>
-    </div>
+    <DotDensityMap
+      data={[
+        {
+          lat: 20,
+          long: 10,
+        },
+        {
+          lat: 25,
+          long: 26,
+        },
+        {
+          lat: 0,
+          long: 0,
+        },
+        {
+          lat: 15,
+          long: 5,
+        },
+        {
+          lat: 10,
+          long: 20,
+        },
+      ]}
+      onSeriesMouseClick={function YJ() {}}
+      onSeriesMouseOver={function YJ() {}}
+    />
   );
 }
 

src/App.tsx

@@ -789,7 +789,7 @@ export function VerticalGraph(props: Props) {
                       className={cn(
                         'graph-value text-sm',
                         !valueColor && barColor.length > 1
-                          ? ' fill-primary-gray-600 dark:fill-primary-gray-300'
+                          ? 'fill-primary-gray-600 dark:fill-primary-gray-300'
                           : '',
                         classNames?.graphObjectValues,
                       )}

src/Components/Graphs/BarGraph/SimpleBarGraph/Graph.tsx

@@ -390,19 +390,34 @@ export function Graph(props: Props) {
                           initial: {
                             opacity: 0,
                             x: !radiusScale ? radius : radiusScale(d.radius || 0),
+                            fill:
+                              data.filter(el => el.color).length === 0
+                                ? colors[0]
+                                : !d.color
+                                  ? Colors.gray
+                                  : colors[colorDomain.indexOf(`${d.color}`)],
                           },
                           whileInView: {
                             opacity: 1,
                             x: !radiusScale ? radius : radiusScale(d.radius || 0),
                             transition: { duration: animate.duration },
+                            fill:
+                              data.filter(el => el.color).length === 0
+                                ? colors[0]
+                                : !d.color
+                                  ? Colors.gray
+                                  : colors[colorDomain.indexOf(`${d.color}`)],
                           },
                         }}
                         initial='initial'
                         animate={isInView ? 'whileInView' : 'initial'}
                         exit={{ opacity: 0, transition: { duration: animate.duration } }}
                         y={0}
-                        className='fill-primary-gray-600 dark:fill-primary-gray-300 text-sm'
-                        style={{ textAnchor: 'start' }}
+                        className={cn('graph-value text-sm', classNames?.graphObjectValues)}
+                        style={{
+                          textAnchor: 'start',
+                          ...(styles?.graphObjectValues || {}),
+                        }}
                         dx={4}
                         dy={5}
                       >

src/Components/Graphs/Maps/DotDensityMap/Graph.tsx

@@ -48,7 +48,7 @@ interface Props {
   /** Color or array of colors for the circle */
   colors?: string | string[];
   /** Domain of colors for the graph */
-  colorDomain: string[];
+  colorDomain?: string[];
   /** Title for the color legend */
   colorLegendTitle?: string;
   /** Color for the areas where data is no available */

src/Components/Graphs/Maps/DotDensityMap/index.tsx

@@ -550,8 +550,12 @@ export function Graph(props: Props) {
                           animate={isInView ? 'whileInView' : 'initial'}
                           exit={{ opacity: 0, transition: { duration: animate.duration } }}
                           y={0}
-                          className='text-sm'
-                          style={{ textAnchor: 'start', fill: labelColor || '#000' }}
+                          className={cn('text-sm', classNames?.graphObjectValues)}
+                          style={{
+                            textAnchor: 'start',
+                            fill: labelColor || '#000',
+                            ...(styles?.graphObjectValues || {}),
+                          }}
                           dx={4}
                           dy={5}
                         >

src/Components/Graphs/Maps/HybridMap/Graph.tsx

@@ -244,7 +244,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
         centerPoint={parseValue(centerPoint)}
         zoomTranslateExtend={parseValue(zoomTranslateExtend)}
         zoomScaleExtend={parseValue(zoomScaleExtend)}
-        colorDomain={parseValue(colorDomain, [2, 4, 6, 8])}
+        colorDomain={parseValue(colorDomain)}
         backgroundColor={
           backgroundColor === 'false' ? false : backgroundColor === 'true' ? true : backgroundColor
         }

src/stories/Graph+Maps+Charts/Maps/DotDensityMap.stories.tsx

@@ -292,7 +292,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
         centerPoint={parseValue(centerPoint)}
         zoomTranslateExtend={parseValue(zoomTranslateExtend)}
         zoomScaleExtend={parseValue(zoomScaleExtend)}
-        colorDomain={parseValue(colorDomain, [2, 4, 6, 8])}
+        colorDomain={parseValue(colorDomain)}
         backgroundColor={
           backgroundColor === 'false' ? false : backgroundColor === 'true' ? true : backgroundColor
         }