@imerss/inat-components 1.1.2 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/PUBLISH.md +13 -0
- package/README.md +12 -0
- package/dist/index.d.ts +86 -83
- package/dist/index.js +280 -395
- package/dist/standalone.min.js +3 -0
- package/package.json +17 -5
- package/public/standalone.html +55 -0
- package/rollup.config.js +15 -4
- package/src/__shared/api/common-taxa.ts +3 -3
- package/src/__shared/api/favourites.ts +3 -3
- package/src/__shared/api/recent-observations.ts +3 -3
- package/src/__shared/api/summary.ts +1 -0
- package/src/__shared/constants.ts +3 -2
- package/src/__shared/index.ts +1 -1
- package/src/__shared/typings.ts +49 -57
- package/src/__shared/utils/configUtils.ts +7 -7
- package/src/__shared/utils/dateUtils.ts +1 -1
- package/src/components/common-taxa/common-taxa.tsx +22 -57
- package/src/components/error/error.tsx +1 -1
- package/src/components/favourites/favourites.tsx +23 -58
- package/src/components/hooks/hooks.tsx +20 -10
- package/src/components/loader/loader.tsx +1 -1
- package/src/components/observation/observation.tsx +1 -1
- package/src/components/recent-observations/recent-observations.tsx +24 -58
- package/src/components/summary/ObserverList.tsx +3 -3
- package/src/components/summary/summary.tsx +53 -54
- package/src/components/tabs/tabs.tsx +41 -26
- package/src/components/taxon-panel/taxon-panel.tsx +75 -96
- package/src/components/year-dropdown/year-dropdown.tsx +11 -7
- package/src/hooks/useLoadSourceData.ts +81 -0
- package/src/index.ts +1 -1
- package/src/types/index.d.ts +17 -0
- package/src/types/standalone.d.ts +6 -0
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import React, { useCallback, useState, useEffect } from 'react';
|
|
2
|
+
import React, { useCallback, useState, useEffect, useMemo } from 'react';
|
|
3
3
|
import fetch$1 from 'isomorphic-unfetch';
|
|
4
4
|
import { format } from 'date-fns';
|
|
5
5
|
import LoadingSpinner from 'react-spinners/MoonLoader.js';
|
|
@@ -31,6 +31,18 @@ var __assign = function() {
|
|
|
31
31
|
return __assign.apply(this, arguments);
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
+
function __rest(s, e) {
|
|
35
|
+
var t = {};
|
|
36
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
37
|
+
t[p] = s[p];
|
|
38
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
39
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
40
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
41
|
+
t[p[i]] = s[p[i]];
|
|
42
|
+
}
|
|
43
|
+
return t;
|
|
44
|
+
}
|
|
45
|
+
|
|
34
46
|
function __awaiter(thisArg, _arguments, P, generator) {
|
|
35
47
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
36
48
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -70,7 +82,8 @@ function __generator(thisArg, body) {
|
|
|
70
82
|
}
|
|
71
83
|
|
|
72
84
|
var BASE_API_URL = 'https://api.inaturalist.org';
|
|
73
|
-
var
|
|
85
|
+
var NUM_RESULTS = 100;
|
|
86
|
+
var DEFAULT_NUM_YEARS = 10;
|
|
74
87
|
var BASE_URL = "https://www.inaturalist.org"; // /people/name_here
|
|
75
88
|
var ERROR_LOG_FILENAME = "inat-components-error.log";
|
|
76
89
|
var DEFAULT_ITEM_WIDTH = 150;
|
|
@@ -78,20 +91,21 @@ var DEFAULT_ITEM_WIDTH = 150;
|
|
|
78
91
|
var constants = /*#__PURE__*/Object.freeze({
|
|
79
92
|
__proto__: null,
|
|
80
93
|
BASE_API_URL: BASE_API_URL,
|
|
81
|
-
|
|
94
|
+
NUM_RESULTS: NUM_RESULTS,
|
|
95
|
+
DEFAULT_NUM_YEARS: DEFAULT_NUM_YEARS,
|
|
82
96
|
BASE_URL: BASE_URL,
|
|
83
97
|
ERROR_LOG_FILENAME: ERROR_LOG_FILENAME,
|
|
84
98
|
DEFAULT_ITEM_WIDTH: DEFAULT_ITEM_WIDTH
|
|
85
99
|
});
|
|
86
100
|
|
|
87
101
|
var getCommonTaxa = function (_a) {
|
|
88
|
-
var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId,
|
|
102
|
+
var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
|
|
89
103
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
90
104
|
var url, response, resp, sortedTaxa;
|
|
91
105
|
return __generator(this, function (_b) {
|
|
92
106
|
switch (_b.label) {
|
|
93
107
|
case 0:
|
|
94
|
-
url = "".concat(BASE_API_URL, "/v1/observations/species_counts?verifiable=true&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(
|
|
108
|
+
url = "".concat(BASE_API_URL, "/v1/observations/species_counts?verifiable=true&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(numResults);
|
|
95
109
|
if (year !== "all") {
|
|
96
110
|
url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
|
|
97
111
|
}
|
|
@@ -134,13 +148,13 @@ var getCommonTaxa = function (_a) {
|
|
|
134
148
|
};
|
|
135
149
|
|
|
136
150
|
var getFavourites = function (_a) {
|
|
137
|
-
var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId,
|
|
151
|
+
var year = _a.year, taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
|
|
138
152
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
139
153
|
var url, response, resp, sortedTaxa;
|
|
140
154
|
return __generator(this, function (_b) {
|
|
141
155
|
switch (_b.label) {
|
|
142
156
|
case 0:
|
|
143
|
-
url = "".concat(BASE_API_URL, "/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(
|
|
157
|
+
url = "".concat(BASE_API_URL, "/v1/observations?verifiable=true&order_by=votes&order=desc&page=1&spam=false&place_id=").concat(placeId, "&taxon_id=").concat(taxonId, "&locale=en-US&per_page=").concat(numResults);
|
|
144
158
|
if (year !== "all") {
|
|
145
159
|
url += "&d1=".concat(year, "-01-01&d2=").concat(year, "-12-31");
|
|
146
160
|
}
|
|
@@ -177,13 +191,13 @@ var getFavourites = function (_a) {
|
|
|
177
191
|
};
|
|
178
192
|
|
|
179
193
|
var getRecentObservations = function (_a) {
|
|
180
|
-
var taxonId = _a.taxonId, placeId = _a.placeId,
|
|
194
|
+
var taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults;
|
|
181
195
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
182
196
|
var url, response, obs;
|
|
183
197
|
return __generator(this, function (_b) {
|
|
184
198
|
switch (_b.label) {
|
|
185
199
|
case 0:
|
|
186
|
-
url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=").concat(
|
|
200
|
+
url = "".concat(BASE_API_URL, "/v1/observations?photos=true&per_page=").concat(numResults, "&taxon_id=").concat(taxonId, "&place_id=").concat(placeId, "&order=desc&order_by=observed_on");
|
|
187
201
|
return [4 /*yield*/, fetch$1(url)];
|
|
188
202
|
case 1:
|
|
189
203
|
response = _b.sent();
|
|
@@ -304,12 +318,6 @@ var getSeasonalityData = function (taxonId, placeId, year) { return __awaiter(vo
|
|
|
304
318
|
});
|
|
305
319
|
}); };
|
|
306
320
|
|
|
307
|
-
var DataSource;
|
|
308
|
-
(function (DataSource) {
|
|
309
|
-
DataSource["autoLoad"] = "autoLoad";
|
|
310
|
-
DataSource["dataProp"] = "dataProp";
|
|
311
|
-
DataSource["url"] = "url";
|
|
312
|
-
})(DataSource || (DataSource = {}));
|
|
313
321
|
var Feature;
|
|
314
322
|
(function (Feature) {
|
|
315
323
|
Feature["commonTaxa"] = "commonTaxa";
|
|
@@ -317,35 +325,32 @@ var Feature;
|
|
|
317
325
|
Feature["recentObservations"] = "recentObservations";
|
|
318
326
|
Feature["stats"] = "stats";
|
|
319
327
|
})(Feature || (Feature = {}));
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
Tab["favourites"] = "favourites";
|
|
326
|
-
Tab["stats"] = "stats";
|
|
327
|
-
})(Tab || (Tab = {}));
|
|
328
|
+
var DataSourceEnum;
|
|
329
|
+
(function (DataSourceEnum) {
|
|
330
|
+
DataSourceEnum["autoLoad"] = "autoLoad";
|
|
331
|
+
DataSourceEnum["url"] = "url";
|
|
332
|
+
})(DataSourceEnum || (DataSourceEnum = {}));
|
|
328
333
|
|
|
329
334
|
/*
|
|
330
335
|
* Note that right now the source filenames aren't configurable.
|
|
331
336
|
*/
|
|
332
|
-
var getSourceFile = function (api,
|
|
333
|
-
if (!
|
|
337
|
+
var getSourceFile = function (api, taxon, place, year) {
|
|
338
|
+
if (!taxon || !place) {
|
|
334
339
|
return '';
|
|
335
340
|
}
|
|
336
341
|
var yearStr = year === "all" ? "allyears" : year;
|
|
337
342
|
var filename = "";
|
|
338
343
|
if (api === Feature.recentObservations) {
|
|
339
|
-
filename = "".concat(
|
|
344
|
+
filename = "".concat(taxon.str, "-").concat(place.str, "-recent.json");
|
|
340
345
|
}
|
|
341
346
|
else if (api === Feature.commonTaxa) {
|
|
342
|
-
filename = "".concat(
|
|
347
|
+
filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-commonTaxa.json");
|
|
343
348
|
}
|
|
344
349
|
else if (api === Feature.favourites) {
|
|
345
|
-
filename = "".concat(
|
|
350
|
+
filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-favourites.json");
|
|
346
351
|
}
|
|
347
352
|
else if (api === Feature.stats) {
|
|
348
|
-
filename = "".concat(
|
|
353
|
+
filename = "".concat(taxon.str, "-").concat(place.str, "-").concat(yearStr, "-stats.json");
|
|
349
354
|
}
|
|
350
355
|
return filename;
|
|
351
356
|
};
|
|
@@ -393,16 +398,16 @@ function styleInject(css, ref) {
|
|
|
393
398
|
}
|
|
394
399
|
}
|
|
395
400
|
|
|
396
|
-
var css_248z$
|
|
397
|
-
var styles$
|
|
398
|
-
styleInject(css_248z$
|
|
401
|
+
var css_248z$4 = ".observation-module_obs__-5hGT {\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n text-align: center;\n transition: all 0.15s ease-in-out;\n}\n.observation-module_obs__-5hGT:hover {\n background-color: #e1e1e1;\n}\n\n.observation-module_obs__-5hGT h3 {\n margin: 0;\n}\n\n.observation-module_image__BBTP8 {\n max-width: 100%;\n max-height: 100%;\n}";
|
|
402
|
+
var styles$4 = {"obs":"observation-module_obs__-5hGT","image":"observation-module_image__BBTP8"};
|
|
403
|
+
styleInject(css_248z$4);
|
|
399
404
|
|
|
400
405
|
var Observation = function (_a) {
|
|
401
406
|
var imageUrl = _a.imageUrl, linkUrl = _a.linkUrl, itemWidth = _a.itemWidth, children = _a.children;
|
|
402
407
|
var gotoObservation = useCallback(function () {
|
|
403
408
|
window.open(linkUrl);
|
|
404
409
|
}, [linkUrl]);
|
|
405
|
-
return (jsxs("article", __assign({ className: styles$
|
|
410
|
+
return (jsxs("article", __assign({ className: styles$4.obs, onClick: gotoObservation }, { children: [jsx("div", { style: {
|
|
406
411
|
width: itemWidth,
|
|
407
412
|
height: itemWidth,
|
|
408
413
|
overflow: "hidden",
|
|
@@ -413,275 +418,194 @@ var Observation = function (_a) {
|
|
|
413
418
|
} }), children] })));
|
|
414
419
|
};
|
|
415
420
|
|
|
416
|
-
var css_248z$
|
|
417
|
-
var styles$
|
|
418
|
-
styleInject(css_248z$
|
|
421
|
+
var css_248z$3 = ".general-module_page__ziNB9 {\n padding: 80px 10px 10px;\n margin: 0 auto;\n max-width: 1100px;\n}\n.general-module_page__ziNB9 h1 {\n border-bottom: 1px solid #efefef;\n padding-bottom: 2px;\n margin-bottom: 25px;\n}\n\n.general-module_panel__WjWzy {\n position: relative;\n}\n\n.general-module_grid__VwNiL {\n display: grid;\n width: 100%;\n grid-gap: 8px;\n text-align: center;\n}\n\n.general-module_obsLabel__9R-PO {\n padding: 10px 20px;\n}\n.general-module_obsLabel__9R-PO a {\n text-decoration: none;\n color: #336699;\n}\n.general-module_obsLabel__9R-PO a:hover {\n text-decoration: underline;\n}\n\n.general-module_loader__gBvfF {\n position: absolute;\n top: 50px;\n left: 0;\n right: 0;\n z-index: 1;\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.general-module_loaderBg__URuj7 {\n position: absolute;\n background-color: #cccccc;\n padding: 20px;\n width: 100px;\n border-radius: 10px;\n height: 100%;\n opacity: 0.8;\n}\n\n.general-module_count__Gnr8W {\n background-color: #efefef;\n color: #666666;\n padding: 2px 8px;\n margin-top: 6px;\n display: inline-block;\n border-radius: 3px;\n font-weight: bold;\n font-size: 18px;\n}\n\n.general-module_tabDesc__zOFiV {\n font-size: 14px;\n margin-bottom: 20px;\n}";
|
|
422
|
+
var styles$3 = {"page":"general-module_page__ziNB9","panel":"general-module_panel__WjWzy","grid":"general-module_grid__VwNiL","obsLabel":"general-module_obsLabel__9R-PO","loader":"general-module_loader__gBvfF","loaderBg":"general-module_loaderBg__URuj7","count":"general-module_count__Gnr8W","tabDesc":"general-module_tabDesc__zOFiV"};
|
|
423
|
+
styleInject(css_248z$3);
|
|
419
424
|
|
|
420
425
|
var Loader = function (_a) {
|
|
421
426
|
var loading = _a.loading;
|
|
422
|
-
var loaderClasses = styles$
|
|
427
|
+
var loaderClasses = styles$3.loader;
|
|
423
428
|
// if (loading) {
|
|
424
429
|
// loaderClasses += ` ${styles.loading}`;
|
|
425
430
|
// }
|
|
426
431
|
if (!loading) {
|
|
427
432
|
return null;
|
|
428
433
|
}
|
|
429
|
-
return (jsxs("div", __assign({ className: loaderClasses }, { children: [jsx("div", { className: styles$
|
|
434
|
+
return (jsxs("div", __assign({ className: loaderClasses }, { children: [jsx("div", { className: styles$3.loaderBg }), jsx(LoadingSpinner, { color: "#000000" })] })));
|
|
430
435
|
};
|
|
431
436
|
|
|
432
437
|
var NoResults = function () {
|
|
433
438
|
return (jsx("p", { children: "No results found." }));
|
|
434
439
|
};
|
|
435
440
|
|
|
441
|
+
/**
|
|
442
|
+
* This hook handles loading the iNat data from whatever source has been specified (DataSource):
|
|
443
|
+
* nothing needs to be done.
|
|
444
|
+
* - "autoLoad": the user is developing locally and wants to just ping iNat directly for the source
|
|
445
|
+
* - "url": the user has generated the data sources at a URL somewhere via @imerss/inat-component-utils
|
|
446
|
+
*/
|
|
447
|
+
var useLoadSourceData = function (_a) {
|
|
448
|
+
var taxonId = _a.taxonId, placeId = _a.placeId, numResults = _a.numResults, source = _a.source, dataUrl = _a.dataUrl, year = _a.year, action = _a.action, _b = _a.isSummaryData, isSummaryData = _b === void 0 ? false : _b;
|
|
449
|
+
var _c = useState(false), loading = _c[0], setLoading = _c[1];
|
|
450
|
+
var _d = useState([]), results = _d[0], setResults = _d[1];
|
|
451
|
+
useEffect(function () {
|
|
452
|
+
if (source === DataSourceEnum.autoLoad) {
|
|
453
|
+
if (!taxonId) {
|
|
454
|
+
console.error("Please supply a `taxonId` prop for the `autoLoad` source prop option.");
|
|
455
|
+
return;
|
|
456
|
+
}
|
|
457
|
+
if (!placeId) {
|
|
458
|
+
console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
|
|
459
|
+
return;
|
|
460
|
+
}
|
|
461
|
+
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
462
|
+
var obs;
|
|
463
|
+
return __generator(this, function (_a) {
|
|
464
|
+
switch (_a.label) {
|
|
465
|
+
case 0:
|
|
466
|
+
setLoading(true);
|
|
467
|
+
return [4 /*yield*/, action({ taxonId: taxonId, placeId: placeId, numResults: numResults, year: year })];
|
|
468
|
+
case 1:
|
|
469
|
+
obs = _a.sent();
|
|
470
|
+
setResults(obs.results);
|
|
471
|
+
setLoading(false);
|
|
472
|
+
return [2 /*return*/];
|
|
473
|
+
}
|
|
474
|
+
});
|
|
475
|
+
}); })();
|
|
476
|
+
}
|
|
477
|
+
if (source === DataSourceEnum.url) {
|
|
478
|
+
if (!dataUrl) {
|
|
479
|
+
console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
|
|
480
|
+
return;
|
|
481
|
+
}
|
|
482
|
+
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
483
|
+
var obs, json;
|
|
484
|
+
return __generator(this, function (_a) {
|
|
485
|
+
switch (_a.label) {
|
|
486
|
+
case 0:
|
|
487
|
+
setLoading(true);
|
|
488
|
+
return [4 /*yield*/, fetch(dataUrl)];
|
|
489
|
+
case 1:
|
|
490
|
+
obs = _a.sent();
|
|
491
|
+
return [4 /*yield*/, obs.json()];
|
|
492
|
+
case 2:
|
|
493
|
+
json = _a.sent();
|
|
494
|
+
// hack workaround. Better solution would have been to standardize the JSON structure at the top-level
|
|
495
|
+
if (isSummaryData) {
|
|
496
|
+
setResults(json);
|
|
497
|
+
}
|
|
498
|
+
else {
|
|
499
|
+
setResults(json.results);
|
|
500
|
+
}
|
|
501
|
+
setLoading(false);
|
|
502
|
+
return [2 /*return*/];
|
|
503
|
+
}
|
|
504
|
+
});
|
|
505
|
+
}); })();
|
|
506
|
+
}
|
|
507
|
+
}, [source, dataUrl, taxonId, placeId, year, numResults, isSummaryData]);
|
|
508
|
+
return {
|
|
509
|
+
loading: loading,
|
|
510
|
+
results: results
|
|
511
|
+
};
|
|
512
|
+
};
|
|
513
|
+
|
|
436
514
|
var RecentObservationLabel = function (obs) {
|
|
437
515
|
var _a, _b, _c;
|
|
438
|
-
return (jsxs("div", __assign({ className: styles$
|
|
516
|
+
return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = obs.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: obs.taxonCommonName || obs.taxonName })), jsx("div", __assign({ className: (_b = obs.classes) === null || _b === void 0 ? void 0 : _b.observationLabelDate }, { children: formatDate(obs.obsDate) })), jsx("div", __assign({ className: (_c = obs.classes) === null || _c === void 0 ? void 0 : _c.observationLabelName }, { children: jsx("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.observerUsername), target: "_blank", rel: "noreferrer", onClick: function (e) { return e.stopPropagation(); } }, { children: obs.observerUsername })) }))] })));
|
|
439
517
|
};
|
|
440
518
|
var RecentObservations = function (_a) {
|
|
441
|
-
var taxonId = _a.taxonId, placeId = _a.placeId,
|
|
442
|
-
var _e =
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
return;
|
|
451
|
-
}
|
|
452
|
-
if (!placeId) {
|
|
453
|
-
console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
|
|
454
|
-
return;
|
|
455
|
-
}
|
|
456
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
457
|
-
var obs;
|
|
458
|
-
return __generator(this, function (_a) {
|
|
459
|
-
switch (_a.label) {
|
|
460
|
-
case 0:
|
|
461
|
-
setLoading(true);
|
|
462
|
-
return [4 /*yield*/, getRecentObservations({ taxonId: taxonId, placeId: placeId, perPage: perPage })];
|
|
463
|
-
case 1:
|
|
464
|
-
obs = _a.sent();
|
|
465
|
-
setObservations(obs.results);
|
|
466
|
-
setLoading(false);
|
|
467
|
-
return [2 /*return*/];
|
|
468
|
-
}
|
|
469
|
-
});
|
|
470
|
-
}); })();
|
|
471
|
-
}, [source, taxonId, placeId, perPage]);
|
|
472
|
-
useEffect(function () {
|
|
473
|
-
if (source !== DataSource.url) {
|
|
474
|
-
return;
|
|
475
|
-
}
|
|
476
|
-
if (!dataUrl) {
|
|
477
|
-
console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
|
|
478
|
-
return;
|
|
479
|
-
}
|
|
480
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
481
|
-
var obs, json;
|
|
482
|
-
return __generator(this, function (_a) {
|
|
483
|
-
switch (_a.label) {
|
|
484
|
-
case 0:
|
|
485
|
-
setLoading(true);
|
|
486
|
-
return [4 /*yield*/, fetch(dataUrl)];
|
|
487
|
-
case 1:
|
|
488
|
-
obs = _a.sent();
|
|
489
|
-
return [4 /*yield*/, obs.json()];
|
|
490
|
-
case 2:
|
|
491
|
-
json = _a.sent();
|
|
492
|
-
setObservations(json.results);
|
|
493
|
-
setLoading(false);
|
|
494
|
-
return [2 /*return*/];
|
|
495
|
-
}
|
|
496
|
-
});
|
|
497
|
-
}); })();
|
|
498
|
-
}, [source, dataUrl]);
|
|
519
|
+
var taxonId = _a.taxonId, placeId = _a.placeId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, generalClasses = _a.generalClasses, tabDesc = _a.tabDesc, _b = _a.source, source = _b === void 0 ? DataSourceEnum.autoLoad : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? DEFAULT_ITEM_WIDTH : _d;
|
|
520
|
+
var _e = useLoadSourceData({
|
|
521
|
+
taxonId: taxonId,
|
|
522
|
+
placeId: placeId,
|
|
523
|
+
numResults: numResults,
|
|
524
|
+
dataUrl: dataUrl,
|
|
525
|
+
source: source,
|
|
526
|
+
action: getRecentObservations
|
|
527
|
+
}), loading = _e.loading, observations = _e.results;
|
|
499
528
|
var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
|
|
500
529
|
var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : RecentObservationLabel;
|
|
501
|
-
var componentClasses = styles$
|
|
530
|
+
var componentClasses = styles$3.panel;
|
|
502
531
|
if (className) {
|
|
503
532
|
componentClasses += " ".concat(className);
|
|
504
533
|
}
|
|
505
|
-
var descClasses = styles$
|
|
506
|
-
if (
|
|
507
|
-
descClasses += " ".concat(
|
|
534
|
+
var descClasses = styles$3.tabDesc;
|
|
535
|
+
if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
|
|
536
|
+
descClasses += " ".concat(generalClasses.tabDesc);
|
|
508
537
|
}
|
|
509
|
-
return (jsxs("div", __assign({ className: componentClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$
|
|
510
|
-
};
|
|
511
|
-
|
|
512
|
-
var css_248z$3 = "/*\n * Replace this with your own classes\n *\n * e.g.\n * .container {\n * }\n*/\n";
|
|
513
|
-
var styles$3 = {};
|
|
514
|
-
styleInject(css_248z$3);
|
|
515
|
-
|
|
516
|
-
var Error = function (props) {
|
|
517
|
-
return (jsx("div", __assign({ className: styles$3['container'] }, { children: jsx("h1", { children: "Welcome to Error!" }) })));
|
|
538
|
+
return (jsxs("div", __assign({ className: componentClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), jsxs("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: [!loading && observations.length === 0 && jsx(NoResults, {}), observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); })] }))] })));
|
|
518
539
|
};
|
|
519
540
|
|
|
520
541
|
var CommonTaxaLabel = function (data) {
|
|
521
|
-
var _a;
|
|
522
|
-
return (jsxs("div", __assign({ className: styles$
|
|
542
|
+
var _a, _b;
|
|
543
|
+
return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("label", __assign({ className: "".concat(((_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationCount) || '', " ").concat(styles$3.count) }, { children: numberWithCommas(data.obsCount) }))] })));
|
|
523
544
|
};
|
|
524
545
|
var CommonTaxa = function (_a) {
|
|
525
|
-
var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, _b = _a.
|
|
526
|
-
var _d =
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
}
|
|
536
|
-
if (!placeId) {
|
|
537
|
-
console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
|
|
538
|
-
return;
|
|
539
|
-
}
|
|
540
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
541
|
-
var resp;
|
|
542
|
-
return __generator(this, function (_a) {
|
|
543
|
-
switch (_a.label) {
|
|
544
|
-
case 0:
|
|
545
|
-
setLoading(true);
|
|
546
|
-
return [4 /*yield*/, getCommonTaxa({ taxonId: taxonId, placeId: placeId, year: year, perPage: perPage })];
|
|
547
|
-
case 1:
|
|
548
|
-
resp = _a.sent();
|
|
549
|
-
setTaxa(resp.results);
|
|
550
|
-
setLoading(false);
|
|
551
|
-
return [2 /*return*/];
|
|
552
|
-
}
|
|
553
|
-
});
|
|
554
|
-
}); })();
|
|
555
|
-
}, [source, year, placeId, taxonId, perPage]);
|
|
556
|
-
useEffect(function () {
|
|
557
|
-
if (source !== DataSource.url) {
|
|
558
|
-
return;
|
|
559
|
-
}
|
|
560
|
-
if (!dataUrl) {
|
|
561
|
-
console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
|
|
562
|
-
return;
|
|
563
|
-
}
|
|
564
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
565
|
-
var obs, json;
|
|
566
|
-
return __generator(this, function (_a) {
|
|
567
|
-
switch (_a.label) {
|
|
568
|
-
case 0:
|
|
569
|
-
setLoading(true);
|
|
570
|
-
return [4 /*yield*/, fetch(dataUrl)];
|
|
571
|
-
case 1:
|
|
572
|
-
obs = _a.sent();
|
|
573
|
-
return [4 /*yield*/, obs.json()];
|
|
574
|
-
case 2:
|
|
575
|
-
json = _a.sent();
|
|
576
|
-
setTaxa(json.results);
|
|
577
|
-
setLoading(false);
|
|
578
|
-
return [2 /*return*/];
|
|
579
|
-
}
|
|
580
|
-
});
|
|
581
|
-
}); })();
|
|
582
|
-
}, [source, dataUrl]);
|
|
546
|
+
var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, _b = _a.numResults, numResults = _b === void 0 ? NUM_RESULTS : _b, _c = _a.itemWidth, itemWidth = _c === void 0 ? DEFAULT_ITEM_WIDTH : _c, dataUrl = _a.dataUrl, components = _a.components, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc;
|
|
547
|
+
var _d = useLoadSourceData({
|
|
548
|
+
taxonId: taxonId,
|
|
549
|
+
placeId: placeId,
|
|
550
|
+
numResults: numResults,
|
|
551
|
+
dataUrl: dataUrl,
|
|
552
|
+
source: source,
|
|
553
|
+
year: year,
|
|
554
|
+
action: getCommonTaxa
|
|
555
|
+
}), loading = _d.loading, taxa = _d.results;
|
|
583
556
|
var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
|
|
584
557
|
var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : CommonTaxaLabel;
|
|
585
|
-
|
|
586
|
-
var elClasses = styles$4.panel;
|
|
558
|
+
var elClasses = styles$3.panel;
|
|
587
559
|
if (className) {
|
|
588
560
|
elClasses += " ".concat(className);
|
|
589
561
|
}
|
|
590
|
-
var descClasses = styles$
|
|
591
|
-
if (
|
|
592
|
-
descClasses += " ".concat(
|
|
562
|
+
var descClasses = styles$3.tabDesc;
|
|
563
|
+
if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
|
|
564
|
+
descClasses += " ".concat(generalClasses.tabDesc);
|
|
593
565
|
}
|
|
594
|
-
return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$
|
|
566
|
+
return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && taxa.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: taxa.map(function (data) { return (jsx(Observation, __assign({ imageUrl: data.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: "".concat(BASE_URL, "/").concat(data.id) }, { children: jsx(Label, __assign({}, data, { classes: generalClasses })) }), data.id)); }) }))] })));
|
|
595
567
|
};
|
|
596
568
|
|
|
597
569
|
var FavouritesLabel = function (data) {
|
|
598
|
-
var _a, _b, _c;
|
|
599
|
-
return (jsxs("div", __assign({ className: styles$
|
|
570
|
+
var _a, _b, _c, _d;
|
|
571
|
+
return (jsxs("div", __assign({ className: styles$3.obsLabel }, { children: [jsx("h3", __assign({ className: (_a = data.classes) === null || _a === void 0 ? void 0 : _a.observationLabelTitle }, { children: data.taxonCommonName || data.taxonName })), jsx("div", __assign({ className: (_b = data.classes) === null || _b === void 0 ? void 0 : _b.observationLabelTitle }, { children: data.observerUsername })), jsx("div", __assign({ className: (_c = data.classes) === null || _c === void 0 ? void 0 : _c.observationLabelDate }, { children: formatDate(data.obsDate) })), jsx("label", __assign({ className: "".concat(((_d = data.classes) === null || _d === void 0 ? void 0 : _d.observationCount) || '', " ").concat(styles$3.count) }, { children: data.numFaves }))] })));
|
|
600
572
|
};
|
|
601
573
|
var Favourites = function (_a) {
|
|
602
|
-
var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId,
|
|
603
|
-
var _d =
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
}
|
|
613
|
-
if (!placeId) {
|
|
614
|
-
console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
|
|
615
|
-
return;
|
|
616
|
-
}
|
|
617
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
618
|
-
var resp;
|
|
619
|
-
return __generator(this, function (_a) {
|
|
620
|
-
switch (_a.label) {
|
|
621
|
-
case 0:
|
|
622
|
-
setLoading(true);
|
|
623
|
-
return [4 /*yield*/, getFavourites({ taxonId: taxonId, placeId: placeId, year: year, perPage: perPage })];
|
|
624
|
-
case 1:
|
|
625
|
-
resp = _a.sent();
|
|
626
|
-
setObservations(resp.results);
|
|
627
|
-
setLoading(false);
|
|
628
|
-
return [2 /*return*/];
|
|
629
|
-
}
|
|
630
|
-
});
|
|
631
|
-
}); })();
|
|
632
|
-
}, [source, year, placeId, taxonId, perPage]);
|
|
633
|
-
useEffect(function () {
|
|
634
|
-
if (source !== DataSource.url) {
|
|
635
|
-
return;
|
|
636
|
-
}
|
|
637
|
-
if (!dataUrl) {
|
|
638
|
-
console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
|
|
639
|
-
return;
|
|
640
|
-
}
|
|
641
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
642
|
-
var obs, json;
|
|
643
|
-
return __generator(this, function (_a) {
|
|
644
|
-
switch (_a.label) {
|
|
645
|
-
case 0:
|
|
646
|
-
setLoading(true);
|
|
647
|
-
return [4 /*yield*/, fetch(dataUrl)];
|
|
648
|
-
case 1:
|
|
649
|
-
obs = _a.sent();
|
|
650
|
-
return [4 /*yield*/, obs.json()];
|
|
651
|
-
case 2:
|
|
652
|
-
json = _a.sent();
|
|
653
|
-
setObservations(json.results);
|
|
654
|
-
setLoading(false);
|
|
655
|
-
return [2 /*return*/];
|
|
656
|
-
}
|
|
657
|
-
});
|
|
658
|
-
}); })();
|
|
659
|
-
}, [source, dataUrl]);
|
|
574
|
+
var year = _a.year, source = _a.source, taxonId = _a.taxonId, placeId = _a.placeId, dataUrl = _a.dataUrl, components = _a.components, className = _a.className, tabDesc = _a.tabDesc, generalClasses = _a.generalClasses, _b = _a.itemWidth, itemWidth = _b === void 0 ? DEFAULT_ITEM_WIDTH : _b, _c = _a.numResults, numResults = _c === void 0 ? NUM_RESULTS : _c;
|
|
575
|
+
var _d = useLoadSourceData({
|
|
576
|
+
year: year,
|
|
577
|
+
taxonId: taxonId,
|
|
578
|
+
placeId: placeId,
|
|
579
|
+
numResults: numResults,
|
|
580
|
+
dataUrl: dataUrl,
|
|
581
|
+
source: source,
|
|
582
|
+
action: getFavourites
|
|
583
|
+
}), loading = _d.loading, observations = _d.results;
|
|
660
584
|
var Load = (components === null || components === void 0 ? void 0 : components.loader) ? components.loader : Loader;
|
|
661
585
|
var Label = (components === null || components === void 0 ? void 0 : components.label) ? components.label : FavouritesLabel;
|
|
662
|
-
var elClasses = styles$
|
|
586
|
+
var elClasses = styles$3.panel;
|
|
663
587
|
if (className) {
|
|
664
588
|
elClasses += " ".concat(className);
|
|
665
589
|
}
|
|
666
|
-
var descClasses = styles$
|
|
667
|
-
if (
|
|
668
|
-
descClasses += " ".concat(
|
|
590
|
+
var descClasses = styles$3.tabDesc;
|
|
591
|
+
if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
|
|
592
|
+
descClasses += " ".concat(generalClasses.tabDesc);
|
|
669
593
|
}
|
|
670
|
-
return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$
|
|
594
|
+
return (jsxs("div", __assign({ className: elClasses }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Load, { loading: loading }), !loading && observations.length === 0 && jsx(NoResults, {}), jsx("div", __assign({ className: styles$3.grid, style: { gridTemplateColumns: "repeat(auto-fit, minmax(".concat(itemWidth, "px, 1fr))") } }, { children: observations.map(function (obs) { return (jsx(Observation, __assign({ imageUrl: obs.imageUrl.replace(/square/, "medium"), itemWidth: itemWidth, linkUrl: obs.obsUrl }, { children: jsx(Label, __assign({}, obs, { classes: generalClasses })) }), obs.id)); }) }))] })));
|
|
671
595
|
};
|
|
672
596
|
|
|
673
|
-
var css_248z$2 = ".summary-module_summaryPage__NMmsj {\n position: relative
|
|
597
|
+
var css_248z$2 = ".summary-module_summaryPage__NMmsj {\n position: relative;\n}\n.summary-module_summaryPage__NMmsj section {\n display: flex;\n}\n\n.summary-module_top__TKW0j {\n list-style-type: none;\n margin: 0;\n padding: 0;\n}\n.summary-module_top__TKW0j .summary-module_avatar__16ZeD, .summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n margin-right: 10px;\n border-radius: 20px;\n width: 40px;\n height: 40px;\n}\n.summary-module_top__TKW0j .summary-module_noAvatar__OsMWn {\n display: inline-block;\n background-color: #efefef;\n}\n.summary-module_top__TKW0j h3 {\n flex: 1;\n color: black;\n}\n.summary-module_top__TKW0j label {\n flex: 0;\n background-color: #efefef;\n color: #666666;\n padding: 2px 8px;\n margin-top: 6px;\n border-radius: 3px;\n font-weight: bold;\n font-size: 16px;\n}\n.summary-module_top__TKW0j li {\n border-radius: 3px;\n}\n.summary-module_top__TKW0j li a {\n display: flex;\n align-items: center;\n text-decoration: none;\n}\n.summary-module_top__TKW0j li:hover {\n background-color: #efefef;\n}\n\n.summary-module_countSummary__Xc2Kd {\n list-style-type: none;\n line-height: 28px;\n font-size: 16px;\n padding: 0;\n margin: 0 0 30px;\n}\n\n.summary-module_seasonalityBlock__BL8L- {\n flex: 3;\n}\n\n.summary-module_observersBlock__0wnbm {\n flex: 1;\n margin-left: 40px;\n margin-bottom: -40px;\n}\n\n@media screen and (max-width: 800px) {\n .summary-module_summaryPage__NMmsj section {\n display: block;\n }\n .summary-module_seasonalityBlock__BL8L- {\n height: 250px;\n margin-bottom: 80px;\n }\n .summary-module_observersBlock__0wnbm {\n margin-left: 0;\n }\n}";
|
|
674
598
|
var styles$2 = {"summaryPage":"summary-module_summaryPage__NMmsj","top":"summary-module_top__TKW0j","avatar":"summary-module_avatar__16ZeD","noAvatar":"summary-module_noAvatar__OsMWn","countSummary":"summary-module_countSummary__Xc2Kd","seasonalityBlock":"summary-module_seasonalityBlock__BL8L-","observersBlock":"summary-module_observersBlock__0wnbm"};
|
|
675
599
|
styleInject(css_248z$2);
|
|
676
600
|
|
|
677
601
|
var ObserverList = function (_a) {
|
|
678
|
-
var observers = _a.observers, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
602
|
+
var observers = _a.observers, generalClasses = _a.generalClasses, _b = _a.className, className = _b === void 0 ? '' : _b;
|
|
679
603
|
var classes = styles$2.top;
|
|
680
604
|
if (className) {
|
|
681
605
|
classes += " ".concat(className);
|
|
682
606
|
}
|
|
683
607
|
return (jsx("ul", __assign({ className: classes }, { children: observers.map(function (obs) { return (jsx("li", { children: jsxs("a", __assign({ href: "".concat(BASE_URL, "/people/").concat(obs.userName), target: "_blank", rel: "noreferrer" }, { children: [obs.iconUrl ? jsx("img", { src: obs.iconUrl || "", className: styles$2.avatar, alt: "User icon" }) :
|
|
684
|
-
jsx("div", { className: styles$2.noAvatar }), jsx("h3", { children: obs.userName }), jsx("label", { children: numberWithCommas(obs.numObservations) })] })) }, obs.id)); }) })));
|
|
608
|
+
jsx("div", { className: styles$2.noAvatar }), jsx("h3", { children: obs.userName }), jsx("label", __assign({ className: generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.observationCount }, { children: numberWithCommas(obs.numObservations) }))] })) }, obs.id)); }) })));
|
|
685
609
|
};
|
|
686
610
|
|
|
687
611
|
var SeasonalityGraph = function (_a) {
|
|
@@ -713,89 +637,58 @@ var SeasonalityGraph = function (_a) {
|
|
|
713
637
|
|
|
714
638
|
var Summary = function (_a) {
|
|
715
639
|
var _b, _c, _d;
|
|
716
|
-
var source = _a.source
|
|
717
|
-
var _e =
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
console.error("Please supply a `placeId` prop for the `autoLoad` source prop option.");
|
|
729
|
-
return;
|
|
730
|
-
}
|
|
731
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
732
|
-
var data;
|
|
733
|
-
return __generator(this, function (_a) {
|
|
734
|
-
switch (_a.label) {
|
|
735
|
-
case 0:
|
|
736
|
-
setLoading(true);
|
|
737
|
-
return [4 /*yield*/, getSummary({ taxonId: taxonId, placeId: placeId, year: year })];
|
|
738
|
-
case 1:
|
|
739
|
-
data = _a.sent();
|
|
740
|
-
setSummaryData(data);
|
|
741
|
-
setLoading(false);
|
|
742
|
-
return [2 /*return*/];
|
|
743
|
-
}
|
|
744
|
-
});
|
|
745
|
-
}); })();
|
|
746
|
-
}, [source, year, placeId, taxonId]);
|
|
747
|
-
useEffect(function () {
|
|
748
|
-
if (source !== DataSource.url) {
|
|
749
|
-
return;
|
|
750
|
-
}
|
|
751
|
-
if (!dataUrl) {
|
|
752
|
-
console.error("Please supply a `dataUrl` prop for the `url` source prop option.");
|
|
753
|
-
return;
|
|
754
|
-
}
|
|
755
|
-
(function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
756
|
-
var obs, json;
|
|
640
|
+
var source = _a.source, dataUrl = _a.dataUrl, taxonId = _a.taxonId, placeId = _a.placeId, year = _a.year, generalClasses = _a.generalClasses, className = _a.className, tabDesc = _a.tabDesc, observersListClass = _a.observersListClass, statsCountSummaryClass = _a.statsCountSummaryClass;
|
|
641
|
+
var _e = useLoadSourceData({
|
|
642
|
+
year: year,
|
|
643
|
+
taxonId: taxonId,
|
|
644
|
+
placeId: placeId,
|
|
645
|
+
dataUrl: dataUrl,
|
|
646
|
+
source: source,
|
|
647
|
+
isSummaryData: true,
|
|
648
|
+
// shim to standardize the response from the `action` method with a top-level `results` property. This
|
|
649
|
+
// just lets the useLoadSourceData hook work for all tab components
|
|
650
|
+
action: function (data) { return __awaiter(void 0, void 0, void 0, function () {
|
|
651
|
+
var results;
|
|
757
652
|
return __generator(this, function (_a) {
|
|
758
653
|
switch (_a.label) {
|
|
759
|
-
case 0:
|
|
760
|
-
setLoading(true);
|
|
761
|
-
return [4 /*yield*/, fetch(dataUrl)];
|
|
654
|
+
case 0: return [4 /*yield*/, getSummary(data)];
|
|
762
655
|
case 1:
|
|
763
|
-
|
|
764
|
-
return [
|
|
765
|
-
case 2:
|
|
766
|
-
json = _a.sent();
|
|
767
|
-
setSummaryData(json);
|
|
768
|
-
setLoading(false);
|
|
769
|
-
return [2 /*return*/];
|
|
656
|
+
results = _a.sent();
|
|
657
|
+
return [2 /*return*/, { results: results }];
|
|
770
658
|
}
|
|
771
659
|
});
|
|
772
|
-
}); }
|
|
773
|
-
},
|
|
660
|
+
}); }
|
|
661
|
+
}), loading = _e.loading, summaryData = _e.results;
|
|
774
662
|
var countSummaryClasses = styles$2.countSummary;
|
|
775
|
-
if (
|
|
776
|
-
countSummaryClasses += " ".concat(
|
|
663
|
+
if (statsCountSummaryClass) {
|
|
664
|
+
countSummaryClasses += " ".concat(statsCountSummaryClass);
|
|
777
665
|
}
|
|
778
666
|
var descClasses = styles$2.tabDesc;
|
|
779
|
-
if (
|
|
780
|
-
descClasses += " ".concat(
|
|
667
|
+
if (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabDesc) {
|
|
668
|
+
descClasses += " ".concat(generalClasses.tabDesc);
|
|
669
|
+
}
|
|
670
|
+
var classList = styles$2.summaryPage;
|
|
671
|
+
if (className) {
|
|
672
|
+
classList += " ".concat(className);
|
|
781
673
|
}
|
|
782
|
-
return (jsxs("div", __assign({ className:
|
|
674
|
+
return (jsxs("div", __assign({ className: classList }, { children: [tabDesc && jsx("p", __assign({ className: descClasses }, { children: tabDesc })), jsx(Loader, { loading: loading }), jsxs("ul", __assign({ className: countSummaryClasses }, { children: [jsxs("li", { children: ["Total number of observers: ", jsx("b", { children: ((_b = summaryData.observers) === null || _b === void 0 ? void 0 : _b.totalCount) ? numberWithCommas(summaryData.observers.totalCount) : "" })] }), jsxs("li", { children: ["Total number of observations: ", jsx("b", { children: ((_c = summaryData.observations) === null || _c === void 0 ? void 0 : _c.totalCount) ? numberWithCommas(summaryData.observations.totalCount) : "" })] })] })), jsxs("section", { children: [jsxs("div", __assign({ className: styles$2.seasonalityBlock }, { children: [jsx("h1", { children: "Seasonality" }), summaryData.seasonalityData && jsx(SeasonalityGraph, { data: summaryData.seasonalityData.monthOfYear })] })), jsxs("div", __assign({ className: styles$2.observersBlock }, { children: [jsx("h1", { children: "Top observers" }), ((_d = summaryData.observers) === null || _d === void 0 ? void 0 : _d.top) && (jsx(ObserverList, { observers: summaryData.observers.top, className: observersListClass, generalClasses: generalClasses }))] }))] })] })));
|
|
783
675
|
};
|
|
784
676
|
|
|
785
|
-
var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n font-size: 18px
|
|
677
|
+
var css_248z$1 = ".year-dropdown-module_dropdown__iD9sj {\n font-size: 18px;\n}";
|
|
786
678
|
var styles$1 = {"dropdown":"year-dropdown-module_dropdown__iD9sj"};
|
|
787
679
|
styleInject(css_248z$1);
|
|
788
680
|
|
|
789
681
|
var Years = function (_a) {
|
|
790
|
-
var value = _a.value, onChange = _a.onChange, className = _a.className;
|
|
791
|
-
var
|
|
682
|
+
var value = _a.value, onChange = _a.onChange, numYears = _a.numYears, className = _a.className;
|
|
683
|
+
var _b = useState([]), years = _b[0], setYears = _b[1];
|
|
684
|
+
useEffect(function () {
|
|
792
685
|
var currentYear = getCurrentYear();
|
|
793
686
|
var years = [];
|
|
794
|
-
for (var i = currentYear; i
|
|
687
|
+
for (var i = currentYear; i > currentYear - numYears; i--) {
|
|
795
688
|
years.push(i);
|
|
796
689
|
}
|
|
797
|
-
|
|
798
|
-
}
|
|
690
|
+
setYears(years);
|
|
691
|
+
}, [numYears]);
|
|
799
692
|
var classes = styles$1.dropdown;
|
|
800
693
|
if (className) {
|
|
801
694
|
classes += " ".concat(className);
|
|
@@ -803,16 +696,16 @@ var Years = function (_a) {
|
|
|
803
696
|
return (jsxs("select", __assign({ className: classes, onChange: function (e) { return onChange(e.target.value); }, defaultValue: value }, { children: [jsx("option", __assign({ value: "all" }, { children: "All years" })), years.map(function (year) { return jsx("option", __assign({ value: year }, { children: year }), year); })] })));
|
|
804
697
|
};
|
|
805
698
|
|
|
806
|
-
var css_248z = ".tabs-module_tabs__UMeM9 {\n display: flex;\n flex-direction: row;\n list-style: none;\n font-size: 18px;\n padding: 0;\n margin-bottom: 30px
|
|
699
|
+
var css_248z = ".tabs-module_tabs__UMeM9 {\n display: flex;\n flex-direction: row;\n list-style: none;\n font-size: 18px;\n padding: 0;\n margin-bottom: 30px;\n}\n.tabs-module_tabs__UMeM9 li {\n margin: 0 20px;\n padding: 4px 20px;\n cursor: pointer;\n color: #999999;\n transition: all 0.2s ease-in-out;\n}\n.tabs-module_tabs__UMeM9 li.tabs-module_selected__SVr0E, .tabs-module_tabs__UMeM9 li:hover {\n border-bottom: 5px solid #0099cc;\n color: black;\n}\n\n@media screen and (max-width: 600px) {\n .tabs-module_tabs__UMeM9 li {\n margin: 0 5px;\n padding: 4px 6px;\n }\n}";
|
|
807
700
|
var styles = {"tabs":"tabs-module_tabs__UMeM9","selected":"tabs-module_selected__SVr0E"};
|
|
808
701
|
styleInject(css_248z);
|
|
809
702
|
|
|
810
703
|
var _a;
|
|
811
704
|
var defaultTitles = (_a = {},
|
|
812
|
-
_a[
|
|
813
|
-
_a[
|
|
814
|
-
_a[
|
|
815
|
-
_a[
|
|
705
|
+
_a[Feature.recentObservations] = "Recent",
|
|
706
|
+
_a[Feature.commonTaxa] = "Most common",
|
|
707
|
+
_a[Feature.favourites] = "Most favourited",
|
|
708
|
+
_a[Feature.stats] = "General stats",
|
|
816
709
|
_a);
|
|
817
710
|
var useFeatureTitles = function (features) {
|
|
818
711
|
var _a = useState(defaultTitles), titles = _a[0], setTitles = _a[1];
|
|
@@ -820,14 +713,22 @@ var useFeatureTitles = function (features) {
|
|
|
820
713
|
var _a;
|
|
821
714
|
var _b, _c, _d, _e;
|
|
822
715
|
setTitles((_a = {},
|
|
823
|
-
_a[
|
|
824
|
-
_a[
|
|
825
|
-
_a[
|
|
826
|
-
_a[
|
|
716
|
+
_a[Feature.recentObservations] = ((_b = features.recentObservations) === null || _b === void 0 ? void 0 : _b.title) || defaultTitles[Feature.recentObservations],
|
|
717
|
+
_a[Feature.commonTaxa] = ((_c = features.commonTaxa) === null || _c === void 0 ? void 0 : _c.title) || defaultTitles[Feature.commonTaxa],
|
|
718
|
+
_a[Feature.favourites] = ((_d = features.favourites) === null || _d === void 0 ? void 0 : _d.title) || defaultTitles[Feature.favourites],
|
|
719
|
+
_a[Feature.stats] = ((_e = features.stats) === null || _e === void 0 ? void 0 : _e.title) || defaultTitles[Feature.stats],
|
|
827
720
|
_a));
|
|
828
721
|
}, [features]);
|
|
829
722
|
return titles;
|
|
830
723
|
};
|
|
724
|
+
var convertFeaturesToObj = function (features) {
|
|
725
|
+
var featuresObj = {};
|
|
726
|
+
features.forEach(function (row) {
|
|
727
|
+
var feature = row.feature, other = __rest(row, ["feature"]);
|
|
728
|
+
featuresObj[feature] = other;
|
|
729
|
+
});
|
|
730
|
+
return featuresObj;
|
|
731
|
+
};
|
|
831
732
|
|
|
832
733
|
var Tabs = function (_a) {
|
|
833
734
|
var selectedTab = _a.selectedTab, onChangeTab = _a.onChangeTab, features = _a.features, className = _a.className;
|
|
@@ -836,90 +737,74 @@ var Tabs = function (_a) {
|
|
|
836
737
|
if (className) {
|
|
837
738
|
classes += " ".concat(className);
|
|
838
739
|
}
|
|
839
|
-
|
|
740
|
+
var items = features.map(function (item) {
|
|
741
|
+
if (item.feature == Feature.recentObservations) {
|
|
742
|
+
return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.recentObservations); }, className: selectedTab === Feature.recentObservations ? styles.selected : "" }, { children: titles[Feature.recentObservations] }), Feature.recentObservations));
|
|
743
|
+
}
|
|
744
|
+
else if (item.feature == Feature.commonTaxa) {
|
|
745
|
+
return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.commonTaxa); }, className: selectedTab === Feature.commonTaxa ? styles.selected : "" }, { children: titles[Feature.commonTaxa] }), Feature.commonTaxa));
|
|
746
|
+
}
|
|
747
|
+
else if (item.feature == Feature.favourites) {
|
|
748
|
+
return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.favourites); }, className: selectedTab === Feature.favourites ? styles.selected : "" }, { children: titles[Feature.favourites] }), Feature.favourites));
|
|
749
|
+
}
|
|
750
|
+
else if (item.feature == Feature.stats) {
|
|
751
|
+
return (jsx("li", __assign({ onClick: function () { return onChangeTab(Feature.stats); }, className: selectedTab === Feature.stats ? styles.selected : "" }, { children: titles[Feature.stats] }), Feature.stats));
|
|
752
|
+
}
|
|
753
|
+
// possibly a user has included something wacky
|
|
754
|
+
return undefined;
|
|
755
|
+
});
|
|
756
|
+
return (jsx("ul", __assign({ className: classes }, { children: items })));
|
|
840
757
|
};
|
|
841
758
|
|
|
842
759
|
var TaxonPanel = function (_a) {
|
|
843
|
-
var
|
|
844
|
-
var
|
|
845
|
-
var _c = useState(
|
|
846
|
-
var
|
|
847
|
-
var
|
|
848
|
-
|
|
849
|
-
|
|
760
|
+
var _b;
|
|
761
|
+
var taxon = _a.taxon, place = _a.place, features = _a.features, dataSource = _a.dataSource, dataSourceBaseUrl = _a.dataSourceBaseUrl, itemWidth = _a.itemWidth, generalClasses = _a.generalClasses;
|
|
762
|
+
var _c = useState(features[0].feature), tab = _c[0], setTab = _c[1];
|
|
763
|
+
var _d = useState("all"), year = _d[0], setYear = _d[1];
|
|
764
|
+
var featuresObj = useMemo(function () {
|
|
765
|
+
return convertFeaturesToObj(features);
|
|
766
|
+
}, [features]);
|
|
767
|
+
var titles = useFeatureTitles(featuresObj);
|
|
768
|
+
var getProps = function (feature) {
|
|
769
|
+
var _a, _b, _c;
|
|
770
|
+
var props = {
|
|
771
|
+
source: dataSource,
|
|
772
|
+
itemWidth: itemWidth,
|
|
773
|
+
tabDesc: (_a = featuresObj[feature]) === null || _a === void 0 ? void 0 : _a.desc,
|
|
774
|
+
generalClasses: generalClasses,
|
|
775
|
+
className: (_b = featuresObj[feature]) === null || _b === void 0 ? void 0 : _b.className
|
|
776
|
+
};
|
|
777
|
+
if (dataSource === DataSourceEnum.url) {
|
|
778
|
+
props.dataUrl = dataSourceBaseUrl + '/' + getSourceFile(feature, taxon, place, year);
|
|
779
|
+
}
|
|
780
|
+
else {
|
|
781
|
+
props.placeId = place.id;
|
|
782
|
+
props.taxonId = taxon.id;
|
|
783
|
+
}
|
|
784
|
+
if (feature !== Feature.stats) {
|
|
785
|
+
props.numResults = (_c = featuresObj[feature]) === null || _c === void 0 ? void 0 : _c.numResults;
|
|
786
|
+
}
|
|
787
|
+
if (feature !== Feature.recentObservations) {
|
|
788
|
+
props.year = year;
|
|
789
|
+
}
|
|
790
|
+
return props;
|
|
791
|
+
};
|
|
850
792
|
var getCurrentTab = function () {
|
|
793
|
+
var _a, _b;
|
|
851
794
|
switch (tab) {
|
|
852
|
-
case
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
props.dataUrl = baseUrl + '/' + getSourceFile(Feature.recentObservations, taxonInfo, placeInfo);
|
|
861
|
-
}
|
|
862
|
-
else {
|
|
863
|
-
props.placeId = placeId;
|
|
864
|
-
props.taxonId = taxonId;
|
|
865
|
-
}
|
|
866
|
-
return (jsx(RecentObservations, __assign({}, props)));
|
|
867
|
-
}
|
|
868
|
-
case Tab.commonTaxa: {
|
|
869
|
-
var props = {
|
|
870
|
-
classes: classes,
|
|
871
|
-
source: dataSource,
|
|
872
|
-
itemWidth: itemWidth,
|
|
873
|
-
year: year,
|
|
874
|
-
tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.mostCommonDesc
|
|
875
|
-
};
|
|
876
|
-
if (dataSource === DataSource.url) {
|
|
877
|
-
props.dataUrl = baseUrl + '/' + getSourceFile(Feature.commonTaxa, taxonInfo, placeInfo, year);
|
|
878
|
-
}
|
|
879
|
-
else {
|
|
880
|
-
props.placeId = placeId;
|
|
881
|
-
props.taxonId = taxonId;
|
|
882
|
-
}
|
|
883
|
-
return (jsx(CommonTaxa, __assign({}, props)));
|
|
884
|
-
}
|
|
885
|
-
case Tab.favourites: {
|
|
886
|
-
var props = {
|
|
887
|
-
classes: classes,
|
|
888
|
-
itemWidth: itemWidth,
|
|
889
|
-
source: dataSource,
|
|
890
|
-
year: year,
|
|
891
|
-
tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.mostFavouritedDesc
|
|
892
|
-
};
|
|
893
|
-
if (dataSource === DataSource.url) {
|
|
894
|
-
props.dataUrl = baseUrl + '/' + getSourceFile(Feature.favourites, taxonInfo, placeInfo, year);
|
|
895
|
-
}
|
|
896
|
-
else {
|
|
897
|
-
props.placeId = placeId;
|
|
898
|
-
props.taxonId = taxonId;
|
|
899
|
-
}
|
|
900
|
-
return (jsx(Favourites, __assign({}, props)));
|
|
901
|
-
}
|
|
902
|
-
case Tab.stats: {
|
|
903
|
-
var props = {
|
|
904
|
-
classes: classes,
|
|
905
|
-
source: dataSource,
|
|
906
|
-
year: year,
|
|
907
|
-
tabDesc: tabDescs === null || tabDescs === void 0 ? void 0 : tabDescs.generalStatsDesc
|
|
908
|
-
};
|
|
909
|
-
if (dataSource === DataSource.url) {
|
|
910
|
-
props.dataUrl = baseUrl + '/' + getSourceFile(Feature.stats, taxonInfo, placeInfo, year);
|
|
911
|
-
}
|
|
912
|
-
else {
|
|
913
|
-
props.placeId = placeId;
|
|
914
|
-
props.taxonId = taxonId;
|
|
915
|
-
}
|
|
916
|
-
return jsx(Summary, __assign({}, props));
|
|
917
|
-
}
|
|
795
|
+
case Feature.recentObservations:
|
|
796
|
+
return jsx(RecentObservations, __assign({}, getProps(Feature.recentObservations)));
|
|
797
|
+
case Feature.commonTaxa:
|
|
798
|
+
return jsx(CommonTaxa, __assign({}, getProps(Feature.commonTaxa)));
|
|
799
|
+
case Feature.favourites:
|
|
800
|
+
return jsx(Favourites, __assign({}, getProps(Feature.favourites)));
|
|
801
|
+
case Feature.stats:
|
|
802
|
+
return (jsx(Summary, __assign({}, getProps(Feature.stats), { observersListClass: (_a = featuresObj[Feature.stats]) === null || _a === void 0 ? void 0 : _a.observersListClass, statsCountSummaryClass: (_b = featuresObj[Feature.stats]) === null || _b === void 0 ? void 0 : _b.statsCountSummaryClass })));
|
|
918
803
|
}
|
|
919
804
|
};
|
|
920
|
-
var tabsClass = (
|
|
921
|
-
var yearDropdownClass = (
|
|
922
|
-
return (jsxs("div", __assign({ className: styles$
|
|
805
|
+
var tabsClass = (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.tabsElement) || '';
|
|
806
|
+
var yearDropdownClass = (generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.yearsDropdown) || '';
|
|
807
|
+
return (jsxs("div", __assign({ className: styles$3.page }, { children: [features.length > 1 && jsx(Tabs, { selectedTab: tab, onChangeTab: setTab, features: features, className: tabsClass }), jsxs("div", { children: [tab !== Feature.recentObservations && (jsx("div", __assign({ style: { float: "right" }, className: yearDropdownClass }, { children: jsx(Years, { value: year, numYears: ((_b = featuresObj[tab]) === null || _b === void 0 ? void 0 : _b.numYears) || DEFAULT_NUM_YEARS, onChange: setYear }) }))), jsx("h1", __assign({ className: generalClasses === null || generalClasses === void 0 ? void 0 : generalClasses.pageHeadings }, { children: titles[tab] }))] }), getCurrentTab()] })));
|
|
923
808
|
};
|
|
924
809
|
|
|
925
|
-
export { constants as C, CommonTaxa, CommonTaxaLabel,
|
|
810
|
+
export { constants as C, CommonTaxa, CommonTaxaLabel, DataSourceEnum, Favourites, FavouritesLabel, Feature, Observation, RecentObservationLabel, RecentObservations, SeasonalityGraph, Summary, TaxonPanel as default, formatDate, getCommonTaxa, getCurrentYear, getFavourites, getObservationSummary, getObserverSummary, getRecentObservations, getSeasonalityData, getSourceFile, getSummary, numberWithCommas };
|