<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="10 10 24 24">
<defs>
<linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
<stop offset="0" stop-color="red">
<animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite" />
</stop>
<stop offset="1" stop-color="yellow">
<animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="10 10 24 24">
<defs>
<linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
<stop offset="0" stop-color="red">
<animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite" />
</stop>
<stop offset="0.5" stop-color="yellow">
<animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite" />
</stop>
</linearGradient>
</defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>
const average = arr => arr.reduce((acc, n) => acc + n, 0) / arr.length;
const extractValues = (group, item, key) => item[key].forEach(n => ((group.values[n.id] ||= { id: n.id, name: n.name })[key] ||= []).push(n.value));
const result = Object
.values(arr
.flatMap(n => n.properties.groups)
.reduce((acc, n) => (
acc[n.id] ||= {
id: n.id,
name: n.name,
wellBeing: [],
values: {},
},
acc[n.id].wellBeing.push(n['well-being']),
extractValues(acc[n.id], n, 'needs'),
extractValues(acc[n.id], n, 'provision'),
acc
), {}))
.map(n => ({
id: n.id,
name: n.name,
value: average(n.wellBeing),
values: Object.values(n.values).map(m => (
m.needs = average(m.needs),
m.provision = average(m.provision),
m
))
}));
const data = arr.reduce((acc, c) => {
c.properties.groups.forEach((group) => {
if (! acc.hasOwnProperty(group.id)) acc[group.id] = [];
acc[group.id].push(group["well-being"]);
});
return acc;
}, {});
/*
{
0: [0.9, 0.8, 0.8],
1: [0.5, 0.3, 0.1],
2: [0.4, 0.8, 0.6]
} */
const avg = {};
for (let id in data) {
avg[id] = data[id].reduce((acc, c) => acc + c) / data[id].length;
}
console.log(avg); /*
{
0: 0.8333333333333334,
1: 0.3,
2: 0.6000000000000001 // 0.1 + 0.2 !== 0.3
} */
const averages = Array.from(
arr
.flatMap(v => v.properties.groups)
.reduce((acc, {id, 'well-being': value}) => {
const [count, total] = acc.get(id) ?? [0, 0];
acc.set(id, [count + 1, total + value]);
return acc;
}, new Map())
.entries(),
([id, [count, total]]) => ({id, average: total / count}),
);
console.log(averages);onClick={this.AddMarker.bind(this)}onClick={e => this.AddMarker(e)}
state = {
markers: [],
maxMarkersNum: 666,
}
onClick = ({ latlng }) => {
this.setState(({ markers, maxMarkersNum }) => ({
markers: markers.length >= maxMarkersNum
? []
: [ ...markers, latlng ],
}));
}<Map onClick={this.onClick}>
{this.state.markers.map(n => <Marker position={n} />)}
</Map>