Skip to content

GitLab

Commit 33d24773 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '248-summary-pie-charts' into 'master' 

Summary pie charts

Closes #248

See merge request genesys-pgr/genesys-ui!256
parents 56bf1abe 2d7212b8
Hide whitespace changes
Inline Side-by-side
locales/en/common.json
View file @ 33d24773
......@@ -92,12 +92,14 @@
"lastUpdated": "Last updated",
"lastUpdatedBy": "Last updated by {{who}}",
"loading": "Loading {{what}}",
"missing": "Not specified",
"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",
......
src/crop/ui/DisplayPage.tsx
View file @ 33d24773
......@@ -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 >
}
......
src/geo/ui/CountryDisplayPage.tsx
View file @ 33d24773
......@@ -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 &&
''
......
src/institutes/ui/DisplayPage.tsx
View file @ 33d24773
......@@ -15,14 +15,13 @@ import MapLayer from 'model/genesys/MapTileLayer';
// UI
import PageLayout, { MainSection, PageContents, PageSection } from 'ui/layout/PageLayout';
import GridContainer from 'ui/layout/GridContainer';
import PropertiesCard from 'ui/common/PropertiesCard.tsx';
import ContentHeader from 'ui/common/heading/ContentHeader';
import LocationMap from 'ui/common/LocationMap';
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';
......@@ -206,68 +205,39 @@ class DisplayPage extends React.Component<IDisplayPageProps, any> {
<GridContainer className="mb-15">
{ cropShortNameOverview && cropShortNameOverview.terms && cropShortNameOverview.terms.length > 0 &&
<PropertiesCard
<PieChartCard
title={ t('institutes.public.p.display.representedCrops') }
propertiesList={ cropShortNameOverview.terms.map((term) => ({title: term.term, value: term.count})) }
small propertyItemProps={ { numeric: true } }
terms={ cropShortNameOverview.terms }
missing={ cropShortNameOverview.missing }
total={ cropShortNameOverview.total }
/>
}
{ 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>
......
src/ui/common/pie-chart/PieChartCard.tsx 0 → 100644
View file @ 33d24773
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);
src/ui/common/pie-chart/Slice.tsx
View file @ 33d24773
......@@ -50,12 +50,16 @@ class Slice extends React.Component<ISliceProps, any> {
}
public componentDidMount() {
this.draw();
this.draw(this.props);
}
private draw = () => {
public componentWillReceiveProps(nextProps) {
this.draw(nextProps);
}
private draw = (props) => {
const { radius, holeRadius, startAngle, angle } = this.props;
const { radius, holeRadius, startAngle, angle } = props;
const path = [];
// Get angle points
......
src/ui/common/pie-chart/index.tsx
View file @ 33d24773
......@@ -8,12 +8,26 @@ interface IPieProps extends React.ClassAttributes<any> {
data: Array<{value: number, label: any}>;
strokeColor?: string;
strokeWidth?: string;
total: number;
missing: number;
maxTerms?: number;
t: any;
}
const colors = [ [237, 194, 64], [175, 216, 248], [203, 75, 75], [77, 167, 77], [148, 64, 237]];
class Pie extends React.Component<IPieProps, any> {
private svgRef: any;
public state = {
radius: 100,
holeRadius: 80,
};
constructor(props) {
super(props);
this.svgRef = React.createRef();
}
private getColor = (index) => {
const rgb = colors[index % colors.length];
......@@ -26,18 +40,34 @@ class Pie extends React.Component<IPieProps, any> {
return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
}
public componentDidMount() {
if (window && this.svgRef.current) {
const diameter = Math.min(this.svgRef.current.parentElement.clientWidth, this.svgRef.current.clientHeight);
const radius = Math.floor(diameter / 2);
const holeRadius = Math.floor(radius * 0.8);
// console.log(`PieChart diameter=${diameter} radius=${radius} holeRadius=${holeRadius}`);
this.setState({ ...this.state, radius, holeRadius });
}
}
public render() {
const { radius = 100, holeRadius = 80, strokeColor = '#fff', strokeWidth = 1, data, t } = this.props;
const { radius: originalRadius = 100, holeRadius: originalHoleRadius = 80, strokeColor = '#fff', strokeWidth = 1, total, missing, maxTerms, t } = this.props;
const { radius = originalRadius, holeRadius = originalHoleRadius} = this.state;
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 (
<div ref={ this.svgRef }>
<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 (
......@@ -56,6 +86,7 @@ class Pie extends React.Component<IPieProps, any> {
);
}) }
</svg>
</div>
);
}
}
......
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