Skip to content

Commit

Permalink
make comm stats sync with map
Browse files Browse the repository at this point in the history
  • Loading branch information
@secondl1ght
secondl1ght committed Dec 22, 2023
1 parent bdc9ee0 commit ecff8be
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 127 deletions.
2 changes: 2 additions & 0 deletions src/routes/communities/leaderboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,8 @@

<p class="text-center text-sm text-body dark:text-white">
*Data sorted by Up-To-Date, then Total Locations, then Legacy.
<br />
*Leaderboard updated once every 24 hours.
</p>

<div class="mt-10 flex justify-center">
Expand Down
309 changes: 183 additions & 126 deletions src/routes/community/[area]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,25 +144,6 @@
lightning = { destination: community['tips:url'], type: TipType.Url };
}
const latestReport = communityReports[0].tags;
total = latestReport.total_elements;
upToDate = latestReport.up_to_date_elements;
outdated = latestReport.outdated_elements;
legacy = latestReport.legacy_elements;
grade = latestReport.grade;
upToDatePercent = new Intl.NumberFormat('en-US').format(
Number((upToDate / (total / 100)).toFixed(0))
);
outdatedPercent = new Intl.NumberFormat('en-US').format(
Number((outdated / (total / 100)).toFixed(0))
);
legacyPercent = new Intl.NumberFormat('en-US').format(
Number((legacy / (total / 100)).toFixed(0))
);
const rewoundPoly = rewind(community.geo_json, true);
// filter elements within community
Expand Down Expand Up @@ -217,6 +198,187 @@
eventElements = eventElements;
taggers = taggers;
const populateMap = () => {
// add map
map = leaflet.map(mapElement, { attributionControl: false });
// add tiles and basemaps
baseMaps = layers(leaflet, map);
// change broken marker image path in prod
leaflet.Icon.Default.prototype.options.imagePath = '/icons/';
// add OSM attribution
attribution(leaflet, map);
// create marker cluster groups
/* eslint-disable no-undef */
// @ts-expect-error
let markers = L.markerClusterGroup();
/* eslint-enable no-undef */
let upToDateLayer = leaflet.featureGroup.subGroup(markers);
let outdatedLayer = leaflet.featureGroup.subGroup(markers);
let legacyLayer = leaflet.featureGroup.subGroup(markers);
let overlayMaps = {
'Up-To-Date': upToDateLayer,
Outdated: outdatedLayer,
Legacy: legacyLayer
};
leaflet.control.layers(baseMaps, overlayMaps).addTo(map);
// add locate button to map
geolocate(leaflet, map);
// change default icons
changeDefaultIcons(true, leaflet, mapElement, DomEvent);
// get date from 1 year ago to add verified check if survey is current
let verifiedDate = calcVerifiedDate();
// add community area poly to map
if (community.geo_json) {
leaflet.geoJSON(community.geo_json, { style: { fill: false } }).addTo(map);
}
// add elements to map
filteredElements.forEach((element) => {
if (element['deleted_at']) {
return;
}
let icon = element.tags['icon:android'];
let payment = element.tags['payment:uri']
? { type: 'uri', url: element.tags['payment:uri'] }
: element.tags['payment:pouch']
? { type: 'pouch', username: element.tags['payment:pouch'] }
: element.tags['payment:coinos']
? { type: 'coinos', username: element.tags['payment:coinos'] }
: undefined;
let boosted =
element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
? element.tags['boost:expires']
: undefined;
const elementOSM = element['osm_json'];
const lat = latCalc(elementOSM);
const long = longCalc(elementOSM);
let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
let marker = generateMarker(
lat,
long,
divIcon,
elementOSM,
payment,
leaflet,
verifiedDate,
true,
boosted
);
let verified = verifiedArr(elementOSM);
if (verified.length && Date.parse(verified[0]) > verifiedDate) {
upToDateLayer.addLayer(marker);
if (upToDate === undefined) {
upToDate = 1;
} else {
upToDate++;
}
} else {
outdatedLayer.addLayer(marker);
if (outdated === undefined) {
outdated = 1;
} else {
outdated++;
}
}
if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
legacyLayer.addLayer(marker);
if (legacy === undefined) {
legacy = 1;
} else {
legacy++;
}
}
if (total === undefined) {
total = 1;
} else {
total++;
}
});
map.addLayer(markers);
map.addLayer(upToDateLayer);
map.addLayer(outdatedLayer);
map.addLayer(legacyLayer);
map.fitBounds(leaflet.geoJSON(community.geo_json).getBounds());
mapLoaded = true;
};
populateMap();
if (!upToDate) {
upToDate = 0;
}
if (!outdated) {
outdated = 0;
}
if (!legacy) {
legacy = 0;
}
if (!total) {
total = 0;
}
upToDatePercent = new Intl.NumberFormat('en-US').format(
Number((upToDate / (total / 100)).toFixed(0))
);
outdatedPercent = new Intl.NumberFormat('en-US').format(
Number((outdated / (total / 100)).toFixed(0))
);
legacyPercent = new Intl.NumberFormat('en-US').format(
Number((legacy / (total / 100)).toFixed(0))
);
const setGrade = () => {
switch (true) {
case Number(upToDatePercent) >= 95:
grade = 5;
break;
case Number(upToDatePercent) >= 75:
grade = 4;
break;
case Number(upToDatePercent) >= 50:
grade = 3;
break;
case Number(upToDatePercent) >= 25:
grade = 2;
break;
case Number(upToDatePercent) >= 0:
grade = 1;
break;
}
};
setGrade();
const populateCharts = () => {
const chartsReports = [...communityReports].sort(
(a, b) => Date.parse(a['created_at']) - Date.parse(b['created_at'])
Expand Down Expand Up @@ -540,113 +702,6 @@
populateCharts();
const populateMap = () => {
// add map
map = leaflet.map(mapElement, { attributionControl: false });
// add tiles and basemaps
baseMaps = layers(leaflet, map);
// change broken marker image path in prod
leaflet.Icon.Default.prototype.options.imagePath = '/icons/';
// add OSM attribution
attribution(leaflet, map);
// create marker cluster groups
/* eslint-disable no-undef */
// @ts-expect-error
let markers = L.markerClusterGroup();
/* eslint-enable no-undef */
let upToDateLayer = leaflet.featureGroup.subGroup(markers);
let outdatedLayer = leaflet.featureGroup.subGroup(markers);
let legacyLayer = leaflet.featureGroup.subGroup(markers);
let overlayMaps = {
'Up-To-Date': upToDateLayer,
Outdated: outdatedLayer,
Legacy: legacyLayer
};
leaflet.control.layers(baseMaps, overlayMaps).addTo(map);
// add locate button to map
geolocate(leaflet, map);
// change default icons
changeDefaultIcons(true, leaflet, mapElement, DomEvent);
// get date from 1 year ago to add verified check if survey is current
let verifiedDate = calcVerifiedDate();
// add community area poly to map
if (community.geo_json) {
leaflet.geoJSON(community.geo_json, { style: { fill: false } }).addTo(map);
}
// add elements to map
filteredElements.forEach((element) => {
if (element['deleted_at']) {
return;
}
let icon = element.tags['icon:android'];
let payment = element.tags['payment:uri']
? { type: 'uri', url: element.tags['payment:uri'] }
: element.tags['payment:pouch']
? { type: 'pouch', username: element.tags['payment:pouch'] }
: element.tags['payment:coinos']
? { type: 'coinos', username: element.tags['payment:coinos'] }
: undefined;
let boosted =
element.tags['boost:expires'] && Date.parse(element.tags['boost:expires']) > Date.now()
? element.tags['boost:expires']
: undefined;
const elementOSM = element['osm_json'];
const lat = latCalc(elementOSM);
const long = longCalc(elementOSM);
let divIcon = generateIcon(leaflet, icon, boosted ? true : false);
let marker = generateMarker(
lat,
long,
divIcon,
elementOSM,
payment,
leaflet,
verifiedDate,
true,
boosted
);
let verified = verifiedArr(elementOSM);
if (verified.length && Date.parse(verified[0]) > verifiedDate) {
upToDateLayer.addLayer(marker);
} else {
outdatedLayer.addLayer(marker);
}
if (elementOSM.tags && elementOSM.tags['payment:bitcoin']) {
legacyLayer.addLayer(marker);
}
});
map.addLayer(markers);
map.addLayer(upToDateLayer);
map.addLayer(outdatedLayer);
map.addLayer(legacyLayer);
map.fitBounds(leaflet.geoJSON(community.geo_json).getBounds());
mapLoaded = true;
};
populateMap();
dataInitialized = true;
};
Expand Down Expand Up @@ -1368,6 +1423,8 @@
rel="noreferrer"
class="text-link transition-colors hover:text-hover">here</a
>.
<br />
*Chart data updated once every 24 hours.
</p>
</main>

Expand Down
2 changes: 1 addition & 1 deletion src/routes/dashboard/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -709,7 +709,7 @@
/>
</div>
<p class="text-center text-sm text-body dark:text-white md:text-left">
*Data updated every 10 minutes, change based on previous 24 hours.
*Data updated once daily, change based on previous 24 hours.
</p>
</section>

Expand Down

0 comments on commit ecff8be

Please sign in to comment.