Skip to content

Commit

Permalink
CORE-4993: add sdg request view
Browse files Browse the repository at this point in the history
  • Loading branch information
@ekachxaidze98
ekachxaidze98 committed Dec 25, 2024
1 parent 4e464da commit 4569b5f
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 102 deletions.
25 changes: 25 additions & 0 deletions components/upload/assets/sdgLoad.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions components/video/video.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from 'react'

const Video = ({ src, title, className = '', tag: Tag = 'div' }) => (
<Tag className={`embed-responsive embed-responsive-16by9 ${className}`}>
<iframe
className="embed-responsive-object"
src={src}
title={title}
referrerPolicy="origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
allowFullScreen
/>
</Tag>
)

export default Video
2 changes: 2 additions & 0 deletions csp.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ const config = {
'raw.githubusercontent.com:*',
'*.googletagmanager.com',
],
// Add frame-src to allow YouTube
'frame-src': [SELF, 'https://www.youtube.com', 'https://*.youtube.com'],
}

if (process.env.NODE_ENV !== 'production') {
Expand Down
239 changes: 137 additions & 102 deletions templates/sdg/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { classNames } from '@oacore/design/lib/utils'
import { Popover } from '@oacore/design'
import { Button } from '@oacore/design/lib/elements'

import DashboardHeader from '../../components/dashboard-header'
import texts from '../../texts/sdg/sdg.yml'
Expand Down Expand Up @@ -40,12 +41,15 @@ import underWaterH from '../../components/upload/assets/belowWaterH.svg'
import landH from '../../components/upload/assets/landH.svg'
import peaceH from '../../components/upload/assets/peaceH.svg'
import goalH from '../../components/upload/assets/goalH.svg'
import sdgLoad from '../../components/upload/assets/sdgLoad.svg'
import styles from './styles.module.css'
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'
import Markdown from '../../components/markdown'
import Video from '../../components/video/video'

const sdgTypes = [
{
Expand Down Expand Up @@ -285,116 +289,147 @@ const SdgPageTemplate = observer(
className={classNames.use(styles.container).join(className)}
{...restProps}
>
<DashboardHeader title={texts.title} description={texts.description} />
<div className={styles.pickerWrapper}>
<span className={styles.dateTitle}>Include records from</span>
<DateRangePicker onDateChange={handleDateChange} />
</div>
<ChartToggler
handleToggle={handleToggle}
toggle={toggle}
sdgTypes={sdgTypes}
updatedSdgTypes={updatedSdgTypes}
data={data}
sdgYearDataLoading={sdgYearDataLoading}
visibleColumns={visibleColumns}
activeTab={activeTab}
setActiveTab={setActiveTab}
checkBillingType={checkBillingType}
/>
{activeTab === 'yearly' && (
<div className={styles.sdgIcons}>
{updatedSdgTypes.map((sdg, index) => (
<div key={sdg.id} className={styles.sdgIcon}>
{/* eslint-disable-next-line react/button-has-type */}
<button
onClick={() => toggleColumn(sdg.id, index)}
disabled={checkBillingType && index > 2}
>
<img
className={classNames.use(styles.sdgImg, {
[styles.sdgImgMain]: sdg.id === 'all',
})}
src={sdg.icon}
alt={sdg.id}
/>
{checkBillingType && index > 2 ? (
<Popover
className={styles.popover}
placement="top"
content="Become Supporting or Sustaining member to see all information."
{sdgYearData.data ? (
<>
<DashboardHeader
title={texts.title}
description={texts.description}
/>
<div className={styles.pickerWrapper}>
<span className={styles.dateTitle}>Include records from</span>
<DateRangePicker onDateChange={handleDateChange} />
</div>
<ChartToggler
handleToggle={handleToggle}
toggle={toggle}
sdgTypes={sdgTypes}
updatedSdgTypes={updatedSdgTypes}
data={data}
sdgYearDataLoading={sdgYearDataLoading}
visibleColumns={visibleColumns}
activeTab={activeTab}
setActiveTab={setActiveTab}
checkBillingType={checkBillingType}
/>
{activeTab === 'yearly' && (
<div className={styles.sdgIcons}>
{updatedSdgTypes.map((sdg, index) => (
<div key={sdg.id} className={styles.sdgIcon}>
{/* eslint-disable-next-line react/button-has-type */}
<button
onClick={() => toggleColumn(sdg.id, index)}
disabled={checkBillingType && index > 2}
>
<div
className={classNames.use(styles.sdgBody, {
[styles.activeSdgBody]: visibleColumns.includes(
sdg.id
),
[styles.blurEffect]: checkBillingType && index > 2,
<img
className={classNames.use(styles.sdgImg, {
[styles.sdgImgMain]: sdg.id === 'all',
})}
>
<span
className={classNames.use(styles.sdgCount, {
[styles.activeSdgCount]: visibleColumns.includes(
src={sdg.icon}
alt={sdg.id}
/>
{checkBillingType && index > 2 ? (
<Popover
className={styles.popover}
placement="top"
content="Become Supporting or Sustaining member to see all information."
>
<div
className={classNames.use(styles.sdgBody, {
[styles.activeSdgBody]: visibleColumns.includes(
sdg.id
),
[styles.blurEffect]:
checkBillingType && index > 2,
})}
>
<span
className={classNames.use(styles.sdgCount, {
[styles.activeSdgCount]:
visibleColumns.includes(sdg.id),
})}
>
{formatNumber(sdg.outputCount)}
</span>
<p
className={classNames.use(styles.sdgDescription, {
[styles.activeSdgDescription]:
visibleColumns.includes(sdg.id),
})}
>
outputs
</p>
</div>
</Popover>
) : (
<div
className={classNames.use(styles.sdgBody, {
[styles.activeSdgBody]: visibleColumns.includes(
sdg.id
),
})}
>
{formatNumber(sdg.outputCount)}
</span>
<p
className={classNames.use(styles.sdgDescription, {
[styles.activeSdgDescription]:
visibleColumns.includes(sdg.id),
})}
>
outputs
</p>
</div>
</Popover>
) : (
<div
className={classNames.use(styles.sdgBody, {
[styles.activeSdgBody]: visibleColumns.includes(sdg.id),
})}
>
<span
className={classNames.use(styles.sdgCount, {
[styles.activeSdgCount]: visibleColumns.includes(
sdg.id
),
})}
>
{formatNumber(sdg.outputCount)}
</span>
<p
className={classNames.use(styles.sdgDescription, {
[styles.activeSdgDescription]:
visibleColumns.includes(sdg.id),
})}
>
outputs
</p>
</div>
)}
</button>
<span
className={classNames.use(styles.sdgCount, {
[styles.activeSdgCount]: visibleColumns.includes(
sdg.id
),
})}
>
{formatNumber(sdg.outputCount)}
</span>
<p
className={classNames.use(styles.sdgDescription, {
[styles.activeSdgDescription]:
visibleColumns.includes(sdg.id),
})}
>
outputs
</p>
</div>
)}
</button>
</div>
))}
</div>
)}
<SdgTable
visibleColumns={visibleColumns}
sdgUrl={sdgUrl}
getSdgTableData={getSdgTableData}
sdgTableList={sdgTableList}
sdgTableDataLoading={sdgTableDataLoading}
sdgTypes={sdgTypes}
articleAdditionalData={articleAdditionalData}
articleAdditionalDataLoading={articleAdditionalDataLoading}
outputCount={outputCount}
startDate={dateRange.startDate}
endDate={dateRange.endDate}
checkBillingType={checkBillingType}
/>
</>
) : (
<>
<DashboardHeader
title={texts.noSdg.title}
description={texts.noSdg.description}
/>
<div className={styles.sdgSuggestionWrapper}>
<div className={styles.sdgInnerSuggestionWrapper}>
<img src={sdgLoad} alt="sdgLoad" />
<Markdown className={styles.sdgSuggestionDescription}>
{texts.sdgSuggestion.description}
</Markdown>
<Button variant="contained">Generate SDG report</Button>
</div>
))}
</div>
<Video
src="https://www.youtube.com/embed/_r16dXOGdWA"
title="sdg labels"
tag="p"
className={styles.videoWrapper}
/>
</div>
</>
)}
<SdgTable
visibleColumns={visibleColumns}
sdgUrl={sdgUrl}
getSdgTableData={getSdgTableData}
sdgTableList={sdgTableList}
sdgTableDataLoading={sdgTableDataLoading}
sdgTypes={sdgTypes}
articleAdditionalData={articleAdditionalData}
articleAdditionalDataLoading={articleAdditionalDataLoading}
outputCount={outputCount}
startDate={dateRange.startDate}
endDate={dateRange.endDate}
checkBillingType={checkBillingType}
/>
</Tag>
)
}
Expand Down
35 changes: 35 additions & 0 deletions templates/sdg/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,3 +411,38 @@
font-size: 14px;
color: #424242;
}

.sdg-suggestion-wrapper {
background: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
display: flex;
padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px 0;
}

.sdg-inner-suggestion-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 44px 0;
}

.sdg-suggestion-description {
max-width: 493px;
text-align: center;
margin: 30px 0 24px;
}

.video-wrapper {
width: 968px;
height: 541px;
}

.video-wrapper iframe {
width: 100%;
height: 100%;
}
Loading

0 comments on commit 4569b5f

Please sign in to comment.