Commit 2d7212b8 authored by Matija Obreza's avatar Matija Obreza
Browse files

PieChart: Auto-size pie chart

- based on available parent element content area size
parent d947a2a1
......@@ -92,7 +92,7 @@
"lastUpdated": "Last updated",
"lastUpdatedBy": "Last updated by {{who}}",
"loading": "Loading {{what}}",
"missing": "Missing",
"missing": "Not specified",
"modified": "Modified",
"name": "Name",
"newVersionAvailable": "New version available",
......
......@@ -15,7 +15,6 @@ 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';
......@@ -206,10 +205,11 @@ 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 }
/>
}
......
......@@ -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
......
......@@ -17,6 +17,17 @@ interface IPieProps extends React.ClassAttributes<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];
......@@ -29,9 +40,21 @@ 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, total, missing, maxTerms, 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;
......@@ -39,6 +62,7 @@ class Pie extends React.Component<IPieProps, any> {
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 }>
{ dataToRender.filter((sliceData) => !!sliceData.value).map((sliceData, sliceIndex) => {
......@@ -62,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