Skip to content

Commit

Permalink
Merge pull request #312 from data-mermaid/nick/M552-update-bleaching-…
Browse files Browse the repository at this point in the history 
…card

[M552] Update bleaching card
  • Loading branch information
@tienhoah
tienhoah authored Sep 18, 2023
2 parents 66b9d44 + c468f11 commit 1f5e196
Show file tree
Hide file tree
Showing 13 changed files with 352 additions and 248 deletions.
6 changes: 4 additions & 2 deletions src/components/AutocompleteFilter.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/no-array-index-key */

import PropTypes from 'prop-types'
import React from 'react'
import TextField from '@material-ui/core/TextField'
Expand Down Expand Up @@ -70,10 +72,10 @@ const AutocompleteFilter = ({

return (
<div>
{parts.map(part => {
{parts.map((part, index) => {
return (
<span
key={`dropdown-filter-list-${part.text}`}
key={`dropdown-filter-list-${part.text}-${index}`}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
Expand Down
13 changes: 5 additions & 8 deletions src/components/CardChartContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { histogramContentPropType, pieChartContentPropType } from '../lib/mermai

const CardChartContent = ({
chartType,
protocolName,
sampleUnit,
pieChartContent,
isPrivatePolicy,
title,
Expand All @@ -20,7 +20,7 @@ const CardChartContent = ({
<BarChart chartContent={histogramContent} />
) : (
<PieChart
protocolName={protocolName}
sampleUnit={sampleUnit}
chartContent={pieChartContent}
isPrivatePolicy={isPrivatePolicy}
title={title}
Expand All @@ -32,17 +32,14 @@ const CardChartContent = ({

CardChartContent.propTypes = {
chartType: PropTypes.string.isRequired,
protocolName: PropTypes.string,
title: PropTypes.string,
isPrivatePolicy: PropTypes.bool,
sampleUnit: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
isPrivatePolicy: PropTypes.bool.isRequired,
pieChartContent: pieChartContentPropType,
histogramContent: histogramContentPropType,
}

CardChartContent.defaultProps = {
protocolName: undefined,
title: undefined,
isPrivatePolicy: undefined,
pieChartContent: [],
histogramContent: [],
}
Expand Down
60 changes: 32 additions & 28 deletions src/components/DownloadDataModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ import ContactIcon from '@material-ui/icons/Email'
import CloudDownloadIcon from '@material-ui/icons/CloudDownload'

import { DialogText, DialogTitle, MermaidButton } from '../styles/MermaidStyledComponents'
import { protocolMethods, pluralizedProtocols } from '../constants/transect-protocols'
import {
sampleUnitTitles,
pluralizedSampleUnits,
BLEACHING_PROPERTY_COLONIES_BLEACHED,
} from '../constants/sample-unit-information'
import MermaidDashboardTooltip from './MermaidDashboardTooltip'
import { siteDetailPropType, sitesPropType } from '../lib/mermaidDataPropTypes'

Expand All @@ -42,31 +46,31 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
const mediaMin1281 = useMediaQuery('(min-width:1281px)')
const [open, setOpen] = useState(false)

const availableProtocols = useMemo(() => {
const availableSampleUnits = useMemo(() => {
const allSites = sites.map(site => site[1]).flat()
const allProtocols = allSites.map(site => Object.keys(site.protocols)).flat()
const allSampleUnits = allSites.map(site => Object.keys(site.protocols)).flat()

const uniqueAvailableProtocol = [...new Set(allProtocols)].filter(
// Both keys 'colonies_bleached' and 'quadrat_benthic_percent' are part of Bleaching protocol.
// this filter is based on the setup in transect-protocol.js as 'quadrat_benthic_percent' is used to determined as Bleaching.
const uniqueAvailableSampleUnits = [...new Set(allSampleUnits)].filter(
// Both keys 'colonies_bleached' and 'quadrat_benthic_percent' are part of Bleaching sample unit.
// this filter is based on the setup in sample-unit-information.js as 'quadrat_benthic_percent' is used to determined as Bleaching.

protocols => protocols !== 'colonies_bleached',
sampleUnitType => sampleUnitType !== BLEACHING_PROPERTY_COLONIES_BLEACHED,
)

return uniqueAvailableProtocol.reduce((accumulator, protocol) => {
const protocolMethod = protocolMethods[protocol]
return uniqueAvailableSampleUnits.reduce((accumulator, sampleUnit) => {
const sampleUnitTitle = sampleUnitTitles[sampleUnit]

if (protocolMethod) {
const protocolDataPolicy =
protocolMethod === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${protocol}`
if (sampleUnitTitle) {
const sampleUnitDataPolicy =
sampleUnitTitle === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${sampleUnit}`

const protocolInfo = {
method: protocolMethod,
policy: currentSelectedSite[protocolDataPolicy],
protocol,
const sampleUnitInfo = {
method: sampleUnitTitle,
policy: currentSelectedSite[sampleUnitDataPolicy],
sampleUnit,
}

accumulator.push(protocolInfo)
accumulator.push(sampleUnitInfo)
}

return accumulator
Expand All @@ -79,9 +83,9 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
setOpen(false)
}

const handleDownloadCSV = protocol => {
const protocolToDownload = pluralizedProtocols[protocol]
const downloadCSVApi = `${process.env.REACT_APP_MERMAID_API_URL}/v1/projects/${currentSelectedSite.project_id}/${protocolToDownload}/sampleevents/csv/`
const handleDownloadCSV = sampleUnit => {
const sampleUnitToDownload = pluralizedSampleUnits[sampleUnit]
const downloadCSVApi = `${process.env.REACT_APP_MERMAID_API_URL}/v1/projects/${currentSelectedSite.project_id}/${sampleUnitToDownload}/sampleevents/csv/`

window.open(downloadCSVApi)
}
Expand All @@ -101,12 +105,12 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
</MermaidButton>
)

const downloadCSVButton = protocol => (
const downloadCSVButton = sampleUnit => (
<MermaidButton
size="small"
variant="contained"
color="primary"
onClick={() => handleDownloadCSV(protocol)}
onClick={() => handleDownloadCSV(sampleUnit)}
>
<CloudDownloadIconWrapper />
<Box fontWeight="fontWeightMedium">Download CSV</Box>
Expand Down Expand Up @@ -137,13 +141,13 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
</TableRow>
</TableHeadWrapper>
<TableBody>
{availableProtocols.map(row => (
<TableRow key={row.method}>
<TableCellWrapper>{row.method}</TableCellWrapper>
<TableCellWrapper>{row.policy}</TableCellWrapper>
{availableSampleUnits.map(({ method, policy, sampleUnit }) => (
<TableRow key={method}>
<TableCellWrapper>{method}</TableCellWrapper>
<TableCellWrapper>{policy}</TableCellWrapper>
<TableCellWrapper>
{row.policy === 'public' || row.policy === 'public summary'
? downloadCSVButton(row.protocol)
{policy === 'public' || policy === 'public summary'
? downloadCSVButton(sampleUnit)
: contactAdminsButton}
</TableCellWrapper>
</TableRow>
Expand Down
38 changes: 21 additions & 17 deletions src/components/InformationCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import CardChartContent from './CardChartContent'
import CartTextContent from './CardTextContent'
import LiveCoralCoverModal from './LiveCoralCoverModal'

import ProtocolChartSubHeading from './ProtocolChartSubHeading'
import SampleUnitChartSubHeading from './SampleUnitChartSubHeading'
import {
benthicPitPropType,
bleachingPropType,
Expand Down Expand Up @@ -45,13 +45,13 @@ const cardStyle = makeStyles(theme => ({
}))

const InformationCard = ({
bleachingProtocolSubItems,
bleachingSampleUnitSubItems,
dataPolicy,
histogramContent,
isFiltering,
isPrivatePolicy,
protocol,
protocolName,
sampleUnitProperties,
sampleUnit,
title,
type,
pieChartContent,
Expand All @@ -65,14 +65,14 @@ const InformationCard = ({

const modalToggleHandler = () => setModalStage(!modalStageOpen)

const pieChartProtocolSubHeadingItem = type === 'pieChart' && (
const pieChartSubHeadingItem = type === 'pieChart' && (
<Box>
<Typography m={1}>Data sharing: {dataPolicy}</Typography>
<ProtocolChartSubHeading
protocolName={protocolName}
protocolProperties={protocol}
<SampleUnitChartSubHeading
sampleUnit={sampleUnit}
sampleUnitProperties={sampleUnitProperties}
isPrivatePolicy={isPrivatePolicy}
bleachingProtocolSubItems={bleachingProtocolSubItems}
bleachingSampleUnitSubItems={bleachingSampleUnitSubItems}
projectFishFamilies={projectFishFamilies}
/>
</Box>
Expand All @@ -84,7 +84,7 @@ const InformationCard = ({
) : (
<CardChartContent
chartType={type}
protocolName={protocolName}
sampleUnit={sampleUnit}
pieChartContent={pieChartContent}
isPrivatePolicy={isPrivatePolicy}
title={title}
Expand All @@ -106,7 +106,7 @@ const InformationCard = ({
/>
)}
</Box>
{pieChartProtocolSubHeadingItem}
{pieChartSubHeadingItem}
</Box>
</Box>
{contentItem}
Expand All @@ -119,28 +119,32 @@ const InformationCard = ({
}

InformationCard.propTypes = {
bleachingProtocolSubItems: bleachingPropType,
bleachingSampleUnitSubItems: bleachingPropType,
dataPolicy: PropTypes.string,
histogramContent: histogramContentPropType,
isFiltering: PropTypes.bool,
isPrivatePolicy: PropTypes.bool,
pieChartContent: pieChartContentPropType,
projectFishFamilies: PropTypes.arrayOf(PropTypes.string),
protocol: PropTypes.oneOfType([fishbeltPropType, benthicPitPropType, bleachingPropType]),
protocolName: PropTypes.string,
sampleUnitProperties: PropTypes.oneOfType([
fishbeltPropType,
benthicPitPropType,
bleachingPropType,
]),
sampleUnit: PropTypes.string,
textContent: textContentPropType,
title: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
}

InformationCard.defaultProps = {
bleachingProtocolSubItems: {},
bleachingSampleUnitSubItems: {},
histogramContent: [],
pieChartContent: [],
projectFishFamilies: [],
textContent: {},
protocol: {},
protocolName: '',
sampleUnitProperties: {},
sampleUnit: '',
dataPolicy: '',
isFiltering: false,
isPrivatePolicy: false,
Expand Down
26 changes: 13 additions & 13 deletions src/components/MermaidDash.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,16 +164,16 @@ class MermaidDash extends Component {
return sampleEvents
}, [])

const sampleEventProtocols = sampleEventsFromSites.map(({ protocols }) => protocols)
const sampleUnitProtocols = sampleEventsFromSites.map(({ protocols }) => protocols)

setHistogram(this.histogramCount(sampleEventProtocols, histogram))
setHistogram(this.histogramCount(sampleUnitProtocols, histogram))

const countryCount = this.getCount(sampleEventsFromSites, 'country_id')
const projectCount = this.getCount(sampleEventsFromSites, 'project_id')
const yearCount = this.getCount(sampleEventsFromSites, 'sample_date')
const uniqueSiteCount = updatedSites.length
const transectCount = this.getTransectCount(sampleEventProtocols)
const averageCoralCoverageCount = this.getAverageCoralCoverage(sampleEventProtocols)
const transectCount = this.getTransectCount(sampleUnitProtocols)
const averageCoralCoverageCount = this.getAverageCoralCoverage(sampleUnitProtocols)

if (prevMetricCountriesCount !== countryCount) {
metrics[0].count = countryCount
Expand Down Expand Up @@ -384,8 +384,8 @@ class MermaidDash extends Component {
return new Set(result).size
}

getTransectCount = protocols => {
const protocolCount = protocols
getTransectCount = sampleUnits => {
const sampleUnitCount = sampleUnits
.map(({ beltfish, benthicpit, benthiclit, habitatcomplexity, colonies_bleached }) => {
const beltfishCount = beltfish ? beltfish.sample_unit_count : 0
const benthicPitCount = benthicpit ? benthicpit.sample_unit_count : 0
Expand All @@ -403,11 +403,11 @@ class MermaidDash extends Component {
})
.reduce((acc, val) => acc + val, 0)

return protocolCount
return sampleUnitCount
}

getSampleEventBenthicHardCoralAverages = protocols => {
return protocols.map(({ benthiclit, benthicpit, benthicpqt }) => {
getSampleEventBenthicHardCoralAverages = sampleUnits => {
return sampleUnits.map(({ benthiclit, benthicpit, benthicpqt }) => {
const benthicLITCover = benthiclit && benthiclit.percent_cover_by_benthic_category_avg
const benthicPITCover = benthicpit && benthicpit.percent_cover_by_benthic_category_avg
const benthicPQTCover = benthicpqt && benthicpqt.percent_cover_by_benthic_category_avg
Expand All @@ -434,8 +434,8 @@ class MermaidDash extends Component {
})
}

getAverageCoralCoverage = protocols => {
const benthicHardCoralAverages = this.getSampleEventBenthicHardCoralAverages(protocols)
getAverageCoralCoverage = sampleUnits => {
const benthicHardCoralAverages = this.getSampleEventBenthicHardCoralAverages(sampleUnits)
const filteredBenthicHardCoralAverages = benthicHardCoralAverages.filter(val => val !== null)
const sumOfHardCoralAverages = filteredBenthicHardCoralAverages.reduce(
(acc, val) => acc + val,
Expand Down Expand Up @@ -517,8 +517,8 @@ class MermaidDash extends Component {

zoomToSiteHandler = zoomToSiteOption => this.setState({ zoomToSite: zoomToSiteOption })

histogramCount = (protocols, histogramData) => {
const benthicHardCoralCount = this.getSampleEventBenthicHardCoralAverages(protocols)
histogramCount = (sampleUnits, histogramData) => {
const benthicHardCoralCount = this.getSampleEventBenthicHardCoralAverages(sampleUnits)

return histogramData.map(({ x }) => {
let count = 0
Expand Down
20 changes: 9 additions & 11 deletions src/components/PieChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'
import styled, { css } from 'styled-components/macro'

import PropTypes from 'prop-types'
import {
privateColorScale,
benthicAttributeColors,
fishBeltAttributeColors,
} from '../constants/attribute-colors'
import { privateColorScale } from '../constants/attribute-colors'
import { pieChartContentPropType } from '../lib/mermaidDataPropTypes'
import {
FISHBELT_SAMPLE_UNIT,
sampleUnitAttributeColors,
} from '../constants/sample-unit-information'

const ChartWrapper = styled('div')`
width: 100%;
Expand Down Expand Up @@ -43,7 +43,7 @@ const SvgWrapper = styled('svg')`
`}
`

const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
const PieChart = ({ sampleUnit, chartContent, isPrivatePolicy, title }) => {
const mediaMin600 = useMediaQuery('(min-width:600px)')
const mediaMax600 = useMediaQuery('(max-width:600px)')
const mediaMax960 = useMediaQuery('(max-width:960px')
Expand All @@ -53,10 +53,8 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
const mediaMin600_Max960 = mediaMax960 && mediaMin600
const mediaMin960_Max1280 = mediaMax1280 && mediaMin960

const attributeColors =
protocolName === 'beltfish' ? fishBeltAttributeColors : benthicAttributeColors
const attributeCollection = chartContent.map(({ x, y }) => y !== 0 && x)
const filteredAttributeCollection = attributeColors.filter(({ name }) =>
const filteredAttributeCollection = sampleUnitAttributeColors[sampleUnit].filter(({ name }) =>
attributeCollection.includes(name),
)
const attributeColorScale = filteredAttributeCollection.map(({ color }) => color)
Expand All @@ -66,7 +64,7 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
return { x: name, y: foundAttribute.y }
})

const labelUnit = protocolName === 'beltfish' ? 'kg/ha' : '%'
const labelUnit = sampleUnit === FISHBELT_SAMPLE_UNIT ? 'kg/ha' : '%'
const legendData = contentData
.filter(({ y }) => y > 0)
.map(({ x }) => ({ name: x, symbol: { type: 'square' } }))
Expand Down Expand Up @@ -187,7 +185,7 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
PieChart.propTypes = {
chartContent: pieChartContentPropType.isRequired,
isPrivatePolicy: PropTypes.bool,
protocolName: PropTypes.string.isRequired,
sampleUnit: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}

Expand Down
Loading

0 comments on commit 1f5e196

Please sign in to comment.