Commit 556d7146 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov

Merge branch '331-crop-details-page-overviews' into 'master'

Crop details page: Overviews

Closes #331

See merge request genesys-pgr/genesys-ui!346
parents ebc471c1 65a402c7
......@@ -3,11 +3,13 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import withStyles from '@material-ui/core/styles/withStyles';
import * as _ from 'lodash';
// Actions
import { loadCropDetails } from 'crop/actions/public';
import { relinkAccessions } from 'crop/actions/admin';
import { applyFilters } from 'accessions/actions/public';
import { applyFilters, applyOverviewFilters } from 'accessions/actions/public';
import { showSnackbar } from 'actions/snackbar';
// Models
import Crop from 'model/genesys/Crop';
......@@ -55,6 +57,8 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
classes?: any;
applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
relinkAccessions: (shortName: string) => void;
applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void;
showSnackbar: (snack: string) => void;
}
class DisplayPage extends React.Component<IDisplayPageProps, any> {
......@@ -83,6 +87,34 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
relinkAccessions(shortName);
}
private addTerm = (property, term) => {
const { applyOverviewFilters, showSnackbar, shortName } = this.props;
const updatedFilter: AccessionFilter = { crop: [ shortName ] };
switch (property) {
case 'institute.code':
case 'institute.country.code3':
case 'taxonomy.genus':
case 'taxonomy.genusSpecies':
_.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter((x) => x != null));
break;
default:
_.set(updatedFilter, property, term);
}
showSnackbar('common.snackbar.applyingFilters');
applyOverviewFilters(updatedFilter);
}
private renderLinkToOverview = (property) => (term) => {
return (
<a onClick={ () => this.addTerm(property, term.term) }>
<Number value={ term.count }/>
</a>
);
}
public render() {
const { cropDetails, error, shortName, classes, t } = this.props;
const crop = cropDetails;
......@@ -132,6 +164,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['institute.code'].terms }
missing={ crop.overview['institute.code'].missing }
total={ crop.overview['institute.code'].total }
valueHandler={ this.renderLinkToOverview('institute.code') }
/>
}
......@@ -141,6 +174,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['institute.country.code3'].terms }
missing={ crop.overview['institute.country.code3'].missing }
total={ crop.overview['institute.country.code3'].total }
valueHandler={ this.renderLinkToOverview('institute.country.code3') }
/>
}
......@@ -150,6 +184,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['taxonomy.genus'].terms }
missing={ crop.overview['taxonomy.genus'].missing }
total={ crop.overview['taxonomy.genus'].total }
valueHandler={ this.renderLinkToOverview('taxonomy.genus') }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
......@@ -160,6 +195,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ crop.overview['taxonomy.genusSpecies'].terms }
missing={ crop.overview['taxonomy.genusSpecies'].missing }
total={ crop.overview['taxonomy.genusSpecies'].total }
valueHandler={ this.renderLinkToOverview('taxonomy.genusSpecies') }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
/>
}
......@@ -187,6 +223,8 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
loadCropDetails,
applyFilters,
relinkAccessions,
applyOverviewFilters,
showSnackbar,
}, dispatch);
......
......@@ -2,10 +2,12 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import * as _ from 'lodash';
// Actions
import { loadCountryDetails } from 'geo/actions/public';
import { applyFilters } from 'accessions/actions/public';
import { applyFilters, applyOverviewFilters } from 'accessions/actions/public';
import { showSnackbar } from 'actions/snackbar';
// Model
import CountryDetails from 'model/geo/CountryDetails';
......@@ -34,6 +36,8 @@ interface ICountryDisplayPageProps extends React.ClassAttributes<any> {
loadCountryDetails: (isoCode: string) => void;
applyFilters: (filters: string | AccessionFilter, page?: IPageRequest) => any;
mapLayers: MapLayer[];
applyOverviewFilters: (filters: string | AccessionFilter, page?: IPageRequest) => void;
showSnackbar: (snack: string) => void;
}
class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
......@@ -79,9 +83,34 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
this.props.applyFilters(filter);
}
private addTerm = (property, term) => {
const { applyOverviewFilters, showSnackbar, details } = this.props;
const updatedFilter: AccessionFilter = {
countryOfOrigin: { code3: [details.code3] },
};
_.set(
updatedFilter,
property,
_.concat(_.get(updatedFilter, property), term).filter((x) => x != null),
);
showSnackbar('common.snackbar.applyingFilters');
applyOverviewFilters(updatedFilter);
}
private renderLinkToOverview = (property) => (term) => {
return (
<a onClick={ () => this.addTerm(property, term.term) }>
<Number value={ term.count }/>
</a>
);
}
public render() {
const {details, isoCode, mapLayers, t} = this.props;
const stillLoading: boolean = (! details || details.code3 !== isoCode);
console.log(this.renderLinkToOverview);
let mlsStatusOverview;
let taxonomyGenusSpeciesOverview;
......@@ -120,6 +149,7 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
terms={ taxonomyGenusSpeciesOverview.terms }
missing={ taxonomyGenusSpeciesOverview.missing }
total={ taxonomyGenusSpeciesOverview.total }
valueHandler={ this.renderLinkToOverview('taxonomy.genusSpecies') }
/>
}
{ mlsStatusOverview && mlsStatusOverview.terms && mlsStatusOverview.terms.length > 0 &&
......@@ -206,6 +236,8 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => bindActionCreators({
loadCountryDetails,
applyFilters,
applyOverviewFilters,
showSnackbar,
}, dispatch);
......
......@@ -4,10 +4,12 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
import { Link } from 'react-router-dom';
import * as _ from 'lodash';
// Actions
import { loadInstitute } from 'institutes/actions/public';
import { applyFilters, applyOverviewFilters } from 'accessions/actions/public';
import { showSnackbar } from 'actions/snackbar';
// Models
import FaoInstituteDetails from 'model/genesys/InstituteDetails';
......@@ -65,6 +67,7 @@ interface IDisplayPageProps extends React.ClassAttributes<any> {
userRoles: string[];
mapLayers: MapLayer[];
apiUrl: string;
showSnackbar: (snack: string) => void;
}
......@@ -122,6 +125,35 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
this.setState({authenticated});
}
private addTerm = (property, term) => {
const { applyOverviewFilters, showSnackbar, institute } = this.props;
const updatedFilter: AccessionFilter = {
institute: { code: [institute.details.code] },
};
switch (property) {
case 'crop':
case 'taxonomy.genus':
case 'taxonomy.genusSpecies':
_.set(updatedFilter, property, _.concat(_.get(updatedFilter, property), term).filter((x) => x != null));
break;
default:
_.set(updatedFilter, property, term);
}
showSnackbar('common.snackbar.applyingFilters');
applyOverviewFilters(updatedFilter);
}
private renderLinkToOverview = (property) => (term) => {
return (
<a onClick={ () => this.addTerm(property, term.term) }>
<Number value={ term.count }/>
</a>
);
}
public render() {
const { error, loading, institute, code, userRoles, mapLayers, classes, apiUrl, t } = this.props;
const slug: string = this.state.authenticated ? 'download-authenticated' : 'download-anonymous';
......@@ -244,6 +276,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
terms={ cropShortNameOverview.terms }
missing={ cropShortNameOverview.missing }
total={ cropShortNameOverview.total }
valueHandler={ this.renderLinkToOverview('crop') }
/>
}
......@@ -263,6 +296,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
missing={ taxonomyGenusOverview.missing }
total={ taxonomyGenusOverview.total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
valueHandler={ this.renderLinkToOverview('taxonomy.genus') }
/>
}
......@@ -273,6 +307,7 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
missing={ taxonomyGenusSpeciesOverview.missing }
total={ taxonomyGenusSpeciesOverview.total }
propertyItemProps={ {classes: {propertiesRowLabel: classes.italicProperties} } }
valueHandler={ this.renderLinkToOverview('taxonomy.genusSpecies') }
/>
}
......@@ -342,6 +377,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
loadInstitute,
applyFilters,
applyOverviewFilters,
showSnackbar,
}, dispatch);
......
......@@ -10,7 +10,7 @@ interface IPieChartCardProps extends React.ClassAttributes<any> {
total: number;
missing?: number;
propertyItemProps?: any;
valueHandler?: any;
t: any;
}
......@@ -18,14 +18,21 @@ class PieChartCard extends React.Component<IPieChartCardProps> {
public render() {
const {title, maxTerms = 5, terms, total, missing = 0, propertyItemProps, t} = this.props;
const {title, maxTerms = 5, terms, total, missing = 0, propertyItemProps, t, valueHandler} = this.props;
if (!total || !terms) {
return null;
}
const topXTerms = terms.slice(0, maxTerms).map((term) => ({title: term.term, value: term.count}));
const other = total - missing - topXTerms.map((term) => term.value).reduce((cur, val) => cur + val);
const topXTerms = terms.slice(0, maxTerms).map((term) => ({
title: term.term,
value: valueHandler ? valueHandler(term) : term.count,
}));
const topXTermsAmount = terms
.slice(0, maxTerms)
.map((term) => term.count)
.reduce((cur, val) => cur + val);
const other = total - missing - topXTermsAmount;
return (
<PropertiesCard
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment