CORE-4993: fix sdg data passing

components/datePicker/datePicker.jsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+
+import styles from './styles.module.css'
+
+const DateRangePicker = ({ onDateChange }) => {
+  const [startDate, setStartDate] = useState('')
+  const [endDate, setEndDate] = useState('')
+
+  const formatDate = (date) => {
+    const [year, month, day] = date.split(/[-.]/)
+    return `${day}/${month}/${year}`
+  }
+
+  const handleStartDateChange = (event) => {
+    const date = event.target.value
+    setStartDate(date)
+    onDateChange(formatDate(date), formatDate(endDate))
+  }
+
+  const handleEndDateChange = (event) => {
+    const date = event.target.value
+    setEndDate(date)
+    onDateChange(formatDate(startDate), formatDate(date))
+  }
+
+  return (
+    <div className={styles.dateWrapper}>
+      <input
+        type="date"
+        value={startDate}
+        onChange={handleStartDateChange}
+        placeholder="Start Date"
+        className={styles.dateInput}
+        onFocus={(e) => e.target.showPicker()}
+      />
+      <span className={styles.separator}>to</span>
+      <input
+        type="date"
+        value={endDate}
+        onChange={handleEndDateChange}
+        placeholder="End Date"
+        min={startDate}
+        className={styles.dateInput}
+        onFocus={(e) => e.target.showPicker()}
+      />
+    </div>
+  )
+}
+
+export default DateRangePicker

components/datePicker/styles.module.css

@@ -0,0 +1,56 @@
+.date-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 40%;
+  margin-top: 20px;
+  gap: 15px;
+}
+
+.separator {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  color: #424242;
+  letter-spacing: 0.035px;
+}
+
+.date-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 40px;
+  padding: 8px 16px;
+  color: #b75400;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+  appearance: textfield;
+}
+
+.date-input::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.date-input::after {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+  display: block;
+  width: 120px;
+  height: 40px;
+  color: #b75400;
+  content: '';
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 2px;
+}
+
+.date-input[type='date'] {
+  border: none;
+  color-scheme: dark;
+}

templates/sdg/index.jsx

@@ -44,6 +44,7 @@ import SdgTable from './table/sdgTable'
 import { GlobalContext } from '../../store'
 import ChartToggler from './charts/chartToggler'
 import { formatNumber } from '../../utils/helpers'
+import DateRangePicker from '../../components/datePicker/datePicker'
 
 const sdgTypes = [
   {
@@ -191,6 +192,7 @@ const SdgPageTemplate = observer(
     const [toggle, setToggle] = useState(false)
     const [visibleColumns, setVisibleColumns] = useState(['all'])
     const [activeTab, setActiveTab] = useState('yearly')
+    const [dateRange, setDateRange] = useState({ startDate: '', endDate: '' })
 
     const toggleColumn = (id) => {
       setVisibleColumns((prev) =>
@@ -207,22 +209,28 @@ const SdgPageTemplate = observer(
       setToggle(event.target.checked)
     }
 
+    const handleDateChange = (startDate, endDate) => {
+      setDateRange({ startDate, endDate })
+    }
+
     const years =
-      sdgYearData && sdgYearData.length > 0
-        ? Object.keys(sdgYearData[0].yearlyData)
+      sdgYearData.data && Object.values(sdgYearData?.data).length > 0
+        ? Object.keys(Object.values(sdgYearData?.data)[0].yearlyData)
         : []
 
     const data = years.map((year) => {
       const yearData = { name: year }
-      sdgYearData.forEach((sdg) => {
+      Object.values(sdgYearData?.data).forEach((sdg) => {
         yearData[sdg.type] = sdg.yearlyData[year] || 0
       })
       return yearData
     })
 
     const updatedSdgTypes = sdgTypes.map((sdg) => {
-      // eslint-disable-next-line no-shadow
-      const sdgDataItem = sdgYearData.find((data) => data.type === sdg.id)
+      const sdgDataItem = Object.values(sdgYearData?.data || {}).find(
+        // eslint-disable-next-line no-shadow
+        (data) => data.type === sdg.id
+      )
       const yearlyDataSum = sdgDataItem
         ? Object.values(sdgDataItem.yearlyData).reduce(
             (sum, value) => sum + value,
@@ -235,12 +243,18 @@ const SdgPageTemplate = observer(
       }
     })
 
+    // eslint-disable-next-line no-console
+    console.log(dateRange, 'dateRange')
+
     return (
       <Tag
         className={classNames.use(styles.container).join(className)}
         {...restProps}
       >
         <DashboardHeader title={texts.title} description={texts.description} />
+        <div className={styles.pickerWrapper}>
+          <DateRangePicker onDateChange={handleDateChange} />
+        </div>
         <ChartToggler
           handleToggle={handleToggle}
           toggle={toggle}

templates/sdg/styles.module.css

@@ -387,3 +387,10 @@
   padding: 10px;
   background: #fff;
 }
+
+.picker-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}