Commit d947a2a1 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Summary pie charts

updated maxTerms for PieChart
parent 56bf1abe
......@@ -92,12 +92,14 @@
"lastUpdated": "Last updated",
"lastUpdatedBy": "Last updated by {{who}}",
"loading": "Loading {{what}}",
"missing": "Missing",
"modified": "Modified",
"name": "Name",
"newVersionAvailable": "New version available",
"no": "No",
"noChanges": "No changes yet",
"noValue": "No value",
"other": "Other",
"prettyNumber": "{{value, number}}",
"registered": "Registered",
"sortBy": "Sort By",
......
......@@ -20,7 +20,7 @@ import Loading from 'ui/common/Loading';
import PropertiesCard from 'ui/common/PropertiesCard';
import Number from 'ui/common/Number';
import GridContainer from 'ui/layout/GridContainer';
import PieChart from 'ui/common/pie-chart';
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import ButtonBar from 'ui/common/buttons/ButtonBar';
import Authorize from 'ui/common/authorized/Authorize';
import PageTitle from 'ui/common/PageTitle';
......@@ -114,79 +114,39 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
{ crop.overview &&
<GridContainer className="pb-1rem">
{ crop.overview['institute.code'] && crop.overview['institute.code'].terms &&
<PropertiesCard
<PieChartCard
title={ t('crop.public.p.display.holdingInstitutes') }
propertiesList={ crop.overview['institute.code'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
crop.overview['institute.code'].terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ crop.overview['institute.code'].terms }
missing={ crop.overview['institute.code'].missing }
total={ crop.overview['institute.code'].total }
/>
}
{ crop.overview['institute.country.code3'] && crop.overview['institute.country.code3'].terms &&
<PropertiesCard
<PieChartCard
title={ t('crop.public.p.display.countryOfInstitutes') }
propertiesList={ crop.overview['institute.country.code3'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
crop.overview['institute.country.code3'].terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ crop.overview['institute.country.code3'].terms }
missing={ crop.overview['institute.country.code3'].missing }
total={ crop.overview['institute.country.code3'].total }
/>
}
{ crop.overview['taxonomy.genus'] && crop.overview['taxonomy.genus'].terms &&
<PropertiesCard
<PieChartCard
title={ t('crop.public.p.display.representedGenera') }
propertiesList={ crop.overview['taxonomy.genus'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
crop.overview['taxonomy.genus'].terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ crop.overview['taxonomy.genus'].terms }
missing={ crop.overview['taxonomy.genus'].missing }
total={ crop.overview['taxonomy.genus'].total }
/>
}
{ crop.overview['taxonomy.genusSpecies'] && crop.overview['taxonomy.genusSpecies'].terms &&
<PropertiesCard
<PieChartCard
title={ t('crop.public.p.display.representedSpecies') }
propertiesList={ crop.overview['taxonomy.genusSpecies'].terms.slice(0, 5).map((term) => ({ title: term.term, value: term.count })) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
crop.overview['taxonomy.genusSpecies'].terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ crop.overview['taxonomy.genusSpecies'].terms }
missing={ crop.overview['taxonomy.genusSpecies'].missing }
total={ crop.overview['taxonomy.genusSpecies'].total }
/>
}
</GridContainer >
}
......
......@@ -22,8 +22,7 @@ import LocationMap from 'ui/common/LocationMap';
import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
import PageTitle from 'ui/common/PageTitle';
import PropertiesCard from 'ui/common/PropertiesCard';
import PieChart from 'ui/common/pie-chart';
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import GridContainer from 'ui/layout/GridContainer';
interface ICountryDisplayPageProps extends React.ClassAttributes<any> {
......@@ -114,22 +113,12 @@ class CountryDisplayPage extends React.Component<ICountryDisplayPageProps> {
<GridContainer className="mb-15">
{ taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
<PropertiesCard
<PieChartCard
title={ t('institutes.public.p.display.representedSpecies') }
propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
taxonomyGenusSpeciesOverview.terms.slice(0, 5).map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ taxonomyGenusSpeciesOverview.terms }
missing={ taxonomyGenusSpeciesOverview.missing }
total={ taxonomyGenusSpeciesOverview.total }
/>
}
{ mlsStatusOverview && mlsStatusOverview.terms && mlsStatusOverview.terms.length > 0 &&
''
......
......@@ -22,7 +22,7 @@ import Loading from 'ui/common/Loading';
import Number from 'ui/common/Number';
import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import PieChart from 'ui/common/pie-chart';
import PieChartCard from 'ui/common/pie-chart/PieChartCard';
import PrettyDate from 'ui/common/time/PrettyDate';
import { CountryLink } from 'ui/genesys/Links';
import BarChart from 'ui/common/bar-chart';
......@@ -214,60 +214,30 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
}
{ cropNameOverview && cropNameOverview.terms && cropNameOverview.terms.length > 0 &&
<PropertiesCard
<PieChartCard
title={ t('institutes.public.p.display.representedCropNames') }
propertiesList={ cropNameOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
cropNameOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ cropNameOverview.terms }
missing={ cropNameOverview.missing }
total={ cropNameOverview.total }
/>
}
{ taxonomyGenusOverview && taxonomyGenusOverview.terms && taxonomyGenusOverview.terms.length > 0 &&
<PropertiesCard
<PieChartCard
title={ t('institutes.public.p.display.representedGenera') }
propertiesList={ taxonomyGenusOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
taxonomyGenusOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ taxonomyGenusOverview.terms }
missing={ taxonomyGenusOverview.missing }
total={ taxonomyGenusOverview.total }
/>
}
{ taxonomyGenusSpeciesOverview && taxonomyGenusSpeciesOverview.terms && taxonomyGenusSpeciesOverview.terms.length > 0 &&
<PropertiesCard
<PieChartCard
title={ t('institutes.public.p.display.representedSpecies') }
propertiesList={ taxonomyGenusSpeciesOverview.terms.slice(0, 5).map((term) => ({title: term.term, value: term.count})) }
small propertyItemProps={ { numeric: true } }
>
<PieChart
data={
taxonomyGenusSpeciesOverview.terms.map(
(term) => ({
value: term.count,
label: term.term,
}),
)
}
/>
</PropertiesCard>
terms={ taxonomyGenusSpeciesOverview.terms }
missing={ taxonomyGenusSpeciesOverview.missing }
total={ taxonomyGenusSpeciesOverview.total }
/>
}
</GridContainer>
......
import * as React from 'react';
import {translate} from 'react-i18next';
import PieChart from 'ui/common/pie-chart';
import PropertiesCard from 'ui/common/PropertiesCard';
interface IPieChartCardProps extends React.ClassAttributes<any> {
title: any;
maxTerms?: number;
terms: Array<{term: string, count: any}>;
total: number;
missing?: number;
t: any;
}
class PieChartCard extends React.Component<IPieChartCardProps> {
public render() {
const {title, maxTerms = 5, terms, total, missing = 0, t} = this.props;
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);
return (
<PropertiesCard
title={ title }
propertiesList={ [
...topXTerms,
{title: t('common:label.other'), value: other},
{title: t('common:label.missing'), value: missing},
] }
propertyItemProps={ {numeric: true} }
small
>
<PieChart
data={
terms.map((term) => ({
value: term.count,
label: term.term,
}))
}
missing={ missing }
total={ total }
maxTerms={ maxTerms }
/>
</PropertiesCard>
);
}
}
export default translate()(PieChartCard);
......@@ -8,6 +8,9 @@ interface IPieProps extends React.ClassAttributes<any> {
data: Array<{value: number, label: any}>;
strokeColor?: string;
strokeWidth?: string;
total: number;
missing: number;
maxTerms?: number;
t: any;
}
......@@ -27,17 +30,20 @@ class Pie extends React.Component<IPieProps, any> {
}
public render() {
const { radius = 100, holeRadius = 80, strokeColor = '#fff', strokeWidth = 1, data, t } = this.props;
const { radius = 100, holeRadius = 80, strokeColor = '#fff', strokeWidth = 1, total, missing, maxTerms, t } = this.props;
const diameter = radius * 2;
const data = maxTerms ? this.props.data.slice(0, maxTerms) : this.props.data;
const sum = data.reduce((accumulator, current) => accumulator + current.value, 0);
const other = total - sum - missing;
let startAngle = 270;
const dataToRender = [...data, {label: t('common:label.other'), value: other}, {label: t('common:label.missing'), value: missing}];
return (
<svg width={ diameter } height={ diameter } viewBox={ '0 0 ' + diameter + ' ' + diameter }>
{ data.map((sliceData, sliceIndex) => {
{ dataToRender.filter((sliceData) => !!sliceData.value).map((sliceData, sliceIndex) => {
const nextAngle = startAngle;
const angle = (sliceData.value / sum) * 359.99;
const angle = (sliceData.value / total) * 359.99;
startAngle += angle;
return (
......
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