Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
33d24773
Commit
33d24773
authored
Mar 15, 2019
by
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
Changes
7
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
PieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
PieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
&&
<
P
roperties
Card
<
P
ieChart
Card
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
)
=>
{
{
data
ToRender
.
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
>
);
}
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment