Add click on the data Cards view

UNDP-Data · Nov 30, 2024 · 34b3fad · 34b3fad
1 parent c02c576
commit 34b3fad
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 1 deletion.
diff --git a/src/Components/Elements/Modal.tsx b/src/Components/Elements/Modal.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { ReactNode } from 'react';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  rtl?: boolean;
+  children: ReactNode;
+}
+
+export function Modal(props: Props) {
+  const { isOpen, onClose, rtl, children } = props;
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={`undp-viz-modal-overlay${rtl ? ' undp-viz-modal-rtl' : ''}`}
+      onClick={onClose}
+    >
+      <div
+        className='undp-viz-modal-content'
+        onClick={e => e.stopPropagation()}
+      >
+        <button
+          type='button'
+          className='undp-viz-modal-close'
+          onClick={onClose}
+          aria-label='close button'
+        />
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Graphs/DataCards/index.tsx b/src/Components/Graphs/DataCards/index.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable react/no-danger */
@@ -18,6 +20,7 @@ import { UNDPColorModule } from '../../ColorPalette';
 import { string2HTML } from '../../../Utils/string2HTML';
 import { getUniqValue } from '../../../Utils/getUniqValue';
 import { getReactSelectTheme } from '../../../Utils/getReactSelectTheme';
+import { Modal } from '../../Elements/Modal';
 
 export type FilterDataType = {
   column: string;
@@ -56,6 +59,8 @@ interface Props {
   backgroundStyle?: BackgroundStyleDataType;
   backgroundColor?: string | boolean;
   padding?: string;
+  cardBackgroundStyle?: BackgroundStyleDataType;
+  cardDetailView?: string;
 }
 
 const filterByKeys = (jsonArray: any, keys: string[], substring: string) => {
@@ -91,9 +96,12 @@ export function DataCards(props: Props) {
     backgroundStyle,
     backgroundColor,
     padding,
+    cardBackgroundStyle,
+    cardDetailView,
   } = props;
 
   const [cardData, setCardData] = useState(data);
+  const [selectedData, setSelectedData] = useState<any>(undefined);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [filterSettings, setFilterSettings] = useState<
@@ -436,14 +444,17 @@ export function DataCards(props: Props) {
                 <div
                   key={i}
                   style={{
+                    ...(cardBackgroundStyle || {}),
                     backgroundColor:
                       cardBackgroundColor ||
                       UNDPColorModule[mode || 'light'].grays['gray-200'],
-                    cursor: onSeriesMouseClick ? 'pointer' : 'auto',
+                    cursor:
+                      onSeriesMouseClick || cardDetailView ? 'pointer' : 'auto',
                   }}
                   className='undp-viz-data-cards'
                   onClick={() => {
                     if (onSeriesMouseClick) onSeriesMouseClick(d);
+                    if (cardDetailView) setSelectedData(d);
                   }}
                 >
                   <div
@@ -468,6 +479,21 @@ export function DataCards(props: Props) {
           ) : null}
         </div>
       </div>
+      <Modal
+        isOpen={selectedData !== undefined}
+        onClose={() => {
+          setSelectedData(undefined);
+        }}
+      >
+        {cardDetailView ? (
+          <div
+            style={{ margin: 0 }}
+            dangerouslySetInnerHTML={{
+              __html: string2HTML(cardDetailView, selectedData),
+            }}
+          />
+        ) : null}
+      </Modal>
     </div>
   );
 }
diff --git a/src/Schemas/schemaList.tsx b/src/Schemas/schemaList.tsx
@@ -1870,6 +1870,15 @@ export const dataCardListSettingsSchema = {
         border: { type: 'string' },
       },
     },
+    cardBackgroundStyle: {
+      type: 'object',
+      properties: {
+        borderRadius: { type: 'string' },
+        boxShadow: { type: 'string' },
+        border: { type: 'string' },
+      },
+    },
+    cardDetailView: { type: 'string' },
   },
   required: ['cardTemplate'],
 };
@@ -5900,6 +5909,15 @@ export const SettingsSchema = {
       },
     },
     cardMinWidth: { type: 'number' },
+    cardBackgroundStyle: {
+      type: 'object',
+      properties: {
+        borderRadius: { type: 'string' },
+        boxShadow: { type: 'string' },
+        border: { type: 'string' },
+      },
+    },
+    cardDetailView: { type: 'string' },
   },
   type: 'object',
 };
diff --git a/src/Types.tsx b/src/Types.tsx
@@ -704,4 +704,6 @@ export interface GraphSettingsDataType {
   cardMinWidth?: number;
   textBackground?: boolean;
   backgroundStyle?: BackgroundStyleDataType;
+  cardBackgroundStyle?: BackgroundStyleDataType;
+  cardDetailView?: string;
 }
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -839,3 +839,73 @@ input.undp-viz-text-box:focus-visible{
   outline: 0;
   box-shadow: 0 0 4px #0468b1;
 }
+
+.undp-viz-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  -webkit-backdrop-filter: blur(18px);
+  backdrop-filter: blur(18px);
+  background: hsla(0, 0%, 97%, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.undp-viz-modal-content {
+  background: #fff;
+  max-width: 100rem;
+  padding: 4rem 0.75rem 0.75rem;
+  position: relative;
+  width: 90%;
+  overflow-x: auto;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  scrollbar-color: #000 transparent;
+  scrollbar-width: thin;
+}
+
+.undp-viz-modal-content::-webkit-scrollbar {
+  border-radius: 0;
+  height: 5px;
+  width: 5px;
+}
+
+.undp-viz-modal-content::-webkit-scrollbar-track {
+  background: #000;
+  background-clip: padding-box;
+  border: 2px solid #fff;
+}
+
+.undp-viz-modal-content::-webkit-scrollbar-corner {
+  display: none;
+}
+
+.undp-viz-modal-content::-webkit-scrollbar-thumb {
+  background: #000;
+}
+
+.undp-viz-modal-close {
+  position: absolute;
+  background: url(https://design.undp.org/icons/times-circle.svg) no-repeat 0;
+  border: 0;
+  cursor: pointer;
+  font-size: 0;
+  height: 45px;
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  width: 45px;
+}
+
+.undp-viz-modal-rtl .undp-viz-modal-close{
+  left: 0.75rem;
+  right: unset;
+}
+
+.undp-viz-modal-close:focus {
+  outline: none;
+}