Compare commits
10 Commits
main
...
openspendi
| Author | SHA1 | Date | |
|---|---|---|---|
|
66710c7324 | ||
|
|
26309f646b | ||
|
5f1d8151f5 | ||
|
|
188706e02d | ||
|
|
5deddeb164 | ||
|
|
c14372f229 | ||
|
|
b9ec9db9e5 | ||
|
|
a1170e9239 | ||
|
|
299477a717 | ||
|
|
5e72711629 |
5
examples/learn/next.config.js
Normal file
5
examples/learn/next.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
const nextConfig = {
|
||||
swcMinify: false
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
@ -7,13 +7,21 @@ import { Mermaid } from '@portaljs/core';
|
||||
// to handle import statements. Instead, you must include components in scope
|
||||
// here.
|
||||
const components = {
|
||||
Table: dynamic(() => import('@portaljs/components').then(mod => mod.Table)),
|
||||
Catalog: dynamic(() => import('@portaljs/components').then(mod => mod.Catalog)),
|
||||
Table: dynamic(() => import('@portaljs/components').then((mod) => mod.Table)),
|
||||
Catalog: dynamic(() =>
|
||||
import('@portaljs/components').then((mod) => mod.Catalog)
|
||||
),
|
||||
mermaid: Mermaid,
|
||||
Vega: dynamic(() => import('@portaljs/components').then(mod => mod.Vega)),
|
||||
VegaLite: dynamic(() => import('@portaljs/components').then(mod => mod.VegaLite)),
|
||||
LineChart: dynamic(() => import('@portaljs/components').then(mod => mod.LineChart)),
|
||||
FlatUiTable: dynamic(() => import('@portaljs/components').then(mod => mod.FlatUiTable)),
|
||||
Vega: dynamic(() => import('@portaljs/components').then((mod) => mod.Vega)),
|
||||
VegaLite: dynamic(() =>
|
||||
import('@portaljs/components').then((mod) => mod.VegaLite)
|
||||
),
|
||||
LineChart: dynamic(() =>
|
||||
import('@portaljs/components').then((mod) => mod.LineChart)
|
||||
),
|
||||
FlatUiTable: dynamic(() =>
|
||||
import('@portaljs/components').then((mod) => mod.FlatUiTable)
|
||||
),
|
||||
} as any;
|
||||
|
||||
export default function DRD({ source }: { source: any }) {
|
||||
|
||||
@ -15,6 +15,17 @@ helps to bring this data to life. It maps out the city's annual spending across
|
||||
the education slice has grown noticeably over the years, indicating Frankfurt's intention to prioritize this space.
|
||||
The city's commitment to education is abundantly clear.
|
||||
|
||||
<Map data="https://openlayers.org/data/vector/ecoregions.json" />
|
||||
|
||||
<OpenLayers
|
||||
layers={[
|
||||
{
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
name: 'Teste',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<VegaLite
|
||||
spec={{
|
||||
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
|
||||
@ -156,8 +167,8 @@ the key to a prosperous future.
|
||||
title: '',
|
||||
field: 'label',
|
||||
scale: {
|
||||
domain: ["Education"],
|
||||
range: ['#64b5f6']
|
||||
domain: ['Education'],
|
||||
range: ['#64b5f6'],
|
||||
},
|
||||
},
|
||||
tooltip: [
|
||||
@ -189,4 +200,3 @@ Frankfurt is a city that's recognized the power of education, and it's using tha
|
||||
One can only hope that more cities follow suit.
|
||||
|
||||
[^1]: https://worldpopulationreview.com/world-cities/frankfurt-population
|
||||
|
||||
|
||||
309
examples/openspending/package-lock.json
generated
309
examples/openspending/package-lock.json
generated
@ -1971,6 +1971,40 @@
|
||||
"@lit-labs/ssr-dom-shim": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/jsonlint-lines-primitives": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
|
||||
"integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-style-spec": {
|
||||
"version": "13.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
|
||||
"integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
|
||||
"dependencies": {
|
||||
"@mapbox/jsonlint-lines-primitives": "~2.0.2",
|
||||
"@mapbox/point-geometry": "^0.1.0",
|
||||
"@mapbox/unitbezier": "^0.0.0",
|
||||
"csscolorparser": "~1.0.2",
|
||||
"json-stringify-pretty-compact": "^2.0.0",
|
||||
"minimist": "^1.2.6",
|
||||
"rw": "^1.3.3",
|
||||
"sort-object": "^0.3.2"
|
||||
},
|
||||
"bin": {
|
||||
"gl-style-composite": "bin/gl-style-composite.js",
|
||||
"gl-style-format": "bin/gl-style-format.js",
|
||||
"gl-style-migrate": "bin/gl-style-migrate.js",
|
||||
"gl-style-validate": "bin/gl-style-validate.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@mapbox/mapbox-gl-style-spec/node_modules/json-stringify-pretty-compact": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
|
||||
"integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
|
||||
},
|
||||
"node_modules/@mapbox/node-pre-gyp": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz",
|
||||
@ -2020,6 +2054,16 @@
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
|
||||
},
|
||||
"node_modules/@mapbox/point-geometry": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
|
||||
"integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
|
||||
},
|
||||
"node_modules/@mapbox/unitbezier": {
|
||||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
|
||||
"integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
|
||||
},
|
||||
"node_modules/@mdx-js/mdx": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-2.3.0.tgz",
|
||||
@ -2657,6 +2701,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-6.11.0.tgz",
|
||||
"integrity": "sha512-AanzbulOHljrku1NGfafxdpTCfw2ENaWzH01N2vqQM+cUFbk868Cgh0xylz0JIM9BoKbfI++bdD6EYX0Q/UTEw=="
|
||||
},
|
||||
"node_modules/@petamoriken/float16": {
|
||||
"version": "3.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.1.tgz",
|
||||
"integrity": "sha512-oj3dU9kuMy8AqrreIboVh3KCJGSQO5T+dJ8JQFl369961jTWvPLP1GIlLy0FVoWehXLoI9BXygu/yzuNiIHBlg=="
|
||||
},
|
||||
"node_modules/@pkgr/utils": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.4.1.tgz",
|
||||
@ -2676,6 +2725,14 @@
|
||||
"url": "https://opencollective.com/unts"
|
||||
}
|
||||
},
|
||||
"node_modules/@planet/maps": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@planet/maps/-/maps-8.1.0.tgz",
|
||||
"integrity": "sha512-THvbooWXFZYyjSdoqi6MFNqnjrfnO5Oev1tKh6ORjxFru0N69gZwUfEduRjg99VNklmaAk2BPaCatgKs5qr0XA==",
|
||||
"dependencies": {
|
||||
"react-reconciler": "^0.29.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@portaljs/ckan": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@portaljs/ckan/-/ckan-0.0.2.tgz",
|
||||
@ -2692,21 +2749,25 @@
|
||||
},
|
||||
"node_modules/@portaljs/components": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@portaljs/components/-/components-0.1.12.tgz",
|
||||
"integrity": "sha512-p7I7uOJYXo+jZgVJfgGW2RtjT02wpjsSiGb+QgQCdIdh7E1e9LKIWMx7wnaRqB1eS3Z+yxaYtG3+0tQEqyxNoQ==",
|
||||
"resolved": "file:../../packages/components/portaljs-components-0.1.12.tgz",
|
||||
"integrity": "sha512-Cr+RQ7tkbIqtBNq5D8zeZEB2dOejxD0V78l/I4AbdjYI8jvQ4Evx6APEfhPs3im6LDEGrT28LslVTZJ6luslnw==",
|
||||
"dependencies": {
|
||||
"@githubocto/flat-ui": "^0.14.1",
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@planet/maps": "^8.1.0",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"chroma-js": "^2.4.2",
|
||||
"flexsearch": "0.7.21",
|
||||
"leaflet": "^1.9.4",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"ol": "^7.4.0",
|
||||
"papaparse": "^5.4.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.43.9",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-query": "^3.39.3",
|
||||
"react-vega": "^7.6.0",
|
||||
"rollup-plugin-re": "^1.0.7",
|
||||
"vega": "5.25.0",
|
||||
"vega-lite": "5.1.0",
|
||||
"vitest": "^0.31.4"
|
||||
@ -2909,6 +2970,16 @@
|
||||
"resolved": "https://registry.npmjs.org/@reach/observe-rect/-/observe-rect-1.2.0.tgz",
|
||||
"integrity": "sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ=="
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rushstack/eslint-patch": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz",
|
||||
@ -4424,6 +4495,11 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/chroma-js": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
|
||||
"integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
|
||||
},
|
||||
"node_modules/clean-set": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/clean-set/-/clean-set-1.1.2.tgz",
|
||||
@ -4735,6 +4811,11 @@
|
||||
"resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
|
||||
"integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
|
||||
},
|
||||
"node_modules/csscolorparser": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
|
||||
"integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
|
||||
},
|
||||
"node_modules/cssesc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
|
||||
@ -5858,6 +5939,11 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/earcut": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
|
||||
"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
|
||||
},
|
||||
"node_modules/ecdsa-sig-formatter": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
|
||||
@ -7155,6 +7241,39 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/geotiff": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
|
||||
"integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
|
||||
"dependencies": {
|
||||
"@petamoriken/float16": "^3.4.7",
|
||||
"lerc": "^3.0.0",
|
||||
"pako": "^2.0.4",
|
||||
"parse-headers": "^2.0.2",
|
||||
"quick-lru": "^6.1.1",
|
||||
"web-worker": "^1.2.0",
|
||||
"xml-utils": "^1.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.19"
|
||||
}
|
||||
},
|
||||
"node_modules/geotiff/node_modules/pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
|
||||
},
|
||||
"node_modules/geotiff/node_modules/quick-lru": {
|
||||
"version": "6.1.1",
|
||||
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
|
||||
"integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
@ -7831,9 +7950,7 @@
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"optional": true,
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.2.4",
|
||||
@ -8784,6 +8901,16 @@
|
||||
"resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
|
||||
"integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"node_modules/lerc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
|
||||
"integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
|
||||
},
|
||||
"node_modules/levn": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
|
||||
@ -8956,14 +9083,6 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.16.0",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.16.0.tgz",
|
||||
"integrity": "sha512-c4BEos3y6G2qO0B9X7K0FVLOPT9uGrjYwYRLFmDqyl5YMboUviyecnXWp94fJTSMwPw2/sf+CEYt5AGpmklkkQ==",
|
||||
"dependencies": {
|
||||
"vlq": "^0.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
@ -9023,6 +9142,11 @@
|
||||
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/mapbox-to-css-font": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
|
||||
"integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
|
||||
},
|
||||
"node_modules/markdown-extensions": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-1.1.1.tgz",
|
||||
@ -11492,6 +11616,32 @@
|
||||
"node": ">= 14"
|
||||
}
|
||||
},
|
||||
"node_modules/ol": {
|
||||
"version": "7.4.0",
|
||||
"resolved": "https://registry.npmjs.org/ol/-/ol-7.4.0.tgz",
|
||||
"integrity": "sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==",
|
||||
"dependencies": {
|
||||
"earcut": "^2.2.3",
|
||||
"geotiff": "^2.0.7",
|
||||
"ol-mapbox-style": "^10.1.0",
|
||||
"pbf": "3.2.1",
|
||||
"rbush": "^3.0.1"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/openlayers"
|
||||
}
|
||||
},
|
||||
"node_modules/ol-mapbox-style": {
|
||||
"version": "10.6.0",
|
||||
"resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz",
|
||||
"integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==",
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-style-spec": "^13.23.1",
|
||||
"mapbox-to-css-font": "^2.4.1",
|
||||
"ol": "^7.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/once": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
||||
@ -11638,6 +11788,11 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-headers": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
|
||||
"integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
@ -11735,6 +11890,18 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/pbf": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
|
||||
"integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
|
||||
"dependencies": {
|
||||
"ieee754": "^1.1.12",
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"pbf": "bin/pbf"
|
||||
}
|
||||
},
|
||||
"node_modules/pend": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
|
||||
@ -12055,6 +12222,11 @@
|
||||
"url": "https://github.com/sponsors/wooorm"
|
||||
}
|
||||
},
|
||||
"node_modules/protocol-buffers-schema": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
|
||||
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
@ -12173,6 +12345,19 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/quickselect": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
|
||||
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
|
||||
},
|
||||
"node_modules/rbush": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
|
||||
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
|
||||
"dependencies": {
|
||||
"quickselect": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||
@ -12221,6 +12406,19 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-markdown": {
|
||||
"version": "8.0.7",
|
||||
"resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
|
||||
@ -12290,6 +12488,21 @@
|
||||
"react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-reconciler": {
|
||||
"version": "0.29.0",
|
||||
"resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
|
||||
"integrity": "sha512-wa0fGj7Zht1EYMRhKWwoo1H9GApxYLBuhoAuXN0TlltESAjDssB+Apf0T/DngVqaMyPypDmabL37vw/2aRM98Q==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
|
||||
@ -12828,6 +13041,14 @@
|
||||
"url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-protobuf-schema": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
|
||||
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
|
||||
"dependencies": {
|
||||
"protocol-buffers-schema": "^3.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/retext": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/retext/-/retext-8.1.0.tgz",
|
||||
@ -12949,28 +13170,6 @@
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-plugin-re": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-re/-/rollup-plugin-re-1.0.7.tgz",
|
||||
"integrity": "sha512-TyFf3QaV/eJ/50k4wp5BM0SodGy0Idq0uOgvA1q3gHRwgXLPVX5y3CRKkBuHzKTZPC9CTZX7igKw5UvgjDls8w==",
|
||||
"dependencies": {
|
||||
"magic-string": "^0.16.0",
|
||||
"rollup-pluginutils": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-pluginutils": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
|
||||
"integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
|
||||
"dependencies": {
|
||||
"estree-walker": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup-pluginutils/node_modules/estree-walker": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
|
||||
"integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w=="
|
||||
},
|
||||
"node_modules/rtl-css-js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
|
||||
@ -13314,6 +13513,34 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/sort-asc": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
|
||||
"integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sort-desc": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
|
||||
"integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sort-object": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
|
||||
"integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
|
||||
"dependencies": {
|
||||
"sort-asc": "^0.1.0",
|
||||
"sort-desc": "^0.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map": {
|
||||
"version": "0.5.7",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
|
||||
@ -15964,11 +16191,6 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/vlq": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
|
||||
"integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow=="
|
||||
},
|
||||
"node_modules/warning": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
|
||||
@ -16173,6 +16395,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/xml-utils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz",
|
||||
"integrity": "sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw=="
|
||||
},
|
||||
"node_modules/xtend": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { AppProps } from 'next/app';
|
||||
import './styles.css';
|
||||
import '@portaljs/components/styles.css';
|
||||
import { NextSeo } from 'next-seo';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
@ -4,7 +4,12 @@ import { GetStaticProps } from 'next';
|
||||
import Layout from '../../components/_shared/Layout';
|
||||
import { formatDate } from '@/utils/formatDate';
|
||||
import parse from '../../lib/markdown';
|
||||
import DataRichDocument from '../../components/DataRichDocument';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const DataRichDocument = dynamic(
|
||||
() => import('../../components/DataRichDocument'),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function Page({ source, meta }) {
|
||||
return (
|
||||
@ -46,7 +51,10 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const mddb = await clientPromise;
|
||||
let allDocuments = await mddb.getFiles({ extensions: ['mdx'], folder: 'stories' });
|
||||
let allDocuments = await mddb.getFiles({
|
||||
extensions: ['mdx'],
|
||||
folder: 'stories',
|
||||
});
|
||||
|
||||
const paths = allDocuments
|
||||
.filter((page) => page.metadata?.isDraft !== true)
|
||||
|
||||
1000
package-lock.json
generated
1000
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
packages/components/.storybook/preview-head.html
Normal file
10
packages/components/.storybook/preview-head.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!--
|
||||
This is necessary for Leaflet maps to work.
|
||||
-->
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
/>
|
||||
@ -1,6 +1,7 @@
|
||||
import 'tailwindcss/tailwind.css'
|
||||
import '../src/index.css'
|
||||
|
||||
|
||||
import type { Preview } from '@storybook/react';
|
||||
|
||||
const preview: Preview = {
|
||||
|
||||
@ -12,12 +12,14 @@
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "npm run storybook",
|
||||
"build": "tsc && vite build && npm run build-tailwind",
|
||||
"example": "vite",
|
||||
"build": "tsc && vite build && npm run build-tailwind && npm run fix-leaflet",
|
||||
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"build-tailwind": "NODE_ENV=production npx tailwindcss -o ./dist/styles.css --minify",
|
||||
"prepare": "npm run build"
|
||||
"build-tailwind": "NODE_ENV=production npx tailwindcss --postcss -c tailwind.config.js -i src/index.css -o ./dist/styles.css --minify",
|
||||
"prepare": "npm run build",
|
||||
"fix-leaflet": "node ./scripts/fix-leaflet.cjs"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.2.0",
|
||||
@ -26,16 +28,20 @@
|
||||
"dependencies": {
|
||||
"@githubocto/flat-ui": "^0.14.1",
|
||||
"@heroicons/react": "^2.0.17",
|
||||
"@planet/maps": "^8.1.0",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"chroma-js": "^2.4.2",
|
||||
"flexsearch": "0.7.21",
|
||||
"leaflet": "^1.9.4",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"ol": "^7.4.0",
|
||||
"papaparse": "^5.4.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.43.9",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-query": "^3.39.3",
|
||||
"react-vega": "^7.6.0",
|
||||
"rollup-plugin-re": "^1.0.7",
|
||||
"vega": "5.25.0",
|
||||
"vega-lite": "5.1.0",
|
||||
"vitest": "^0.31.4"
|
||||
@ -48,13 +54,16 @@
|
||||
"@storybook/react": "^7.0.7",
|
||||
"@storybook/react-vite": "^7.0.7",
|
||||
"@storybook/testing-library": "^0.0.14-next.2",
|
||||
"@swc/core": "^1.3.68",
|
||||
"@types/flexsearch": "^0.7.3",
|
||||
"@types/leaflet": "^1.9.3",
|
||||
"@types/papaparse": "^5.3.7",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"@vitejs/plugin-react-swc": "^3.3.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.38.0",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
@ -62,12 +71,15 @@
|
||||
"eslint-plugin-storybook": "^0.6.11",
|
||||
"json": "^11.0.0",
|
||||
"postcss": "^8.4.23",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-import-url": "^7.2.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"storybook": "^7.0.7",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.3.2",
|
||||
"vite-plugin-dts": "^2.3.0"
|
||||
"vite-plugin-dts": "^2.3.0",
|
||||
"vite-plugin-swc-only": "^0.1.18"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
BIN
packages/components/portaljs-components-0.1.12.tgz
Normal file
BIN
packages/components/portaljs-components-0.1.12.tgz
Normal file
Binary file not shown.
@ -1,6 +1,9 @@
|
||||
console.log('PostCSS')
|
||||
|
||||
export default {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
6
packages/components/scripts/fix-leaflet.cjs
Normal file
6
packages/components/scripts/fix-leaflet.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const leafletPath = path.join(require.resolve('leaflet'), '../')
|
||||
|
||||
fs.cpSync(`${leafletPath}images`,'./dist/images', { recursive: true });
|
||||
139
packages/components/src/components/Map.tsx
Normal file
139
packages/components/src/components/Map.tsx
Normal file
@ -0,0 +1,139 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
import loadData from '../lib/loadData';
|
||||
import chroma from 'chroma-js';
|
||||
import {
|
||||
MapContainer,
|
||||
TileLayer,
|
||||
GeoJSON as GeoJSONLayer,
|
||||
} from 'react-leaflet';
|
||||
|
||||
import * as L from 'leaflet';
|
||||
|
||||
export type MapProps = {
|
||||
data: string | GeoJSON.GeoJSON;
|
||||
title?: string;
|
||||
colorScale?: {
|
||||
starting: string;
|
||||
ending: string;
|
||||
};
|
||||
center?: { latitude: number | undefined; longitude: number | undefined };
|
||||
zoom?: number;
|
||||
tooltip?: {
|
||||
prop: string;
|
||||
};
|
||||
};
|
||||
|
||||
export function Map({
|
||||
data,
|
||||
title = '',
|
||||
colorScale = { starting: 'blue', ending: 'red' },
|
||||
center = { latitude: 45, longitude: 45 },
|
||||
zoom = 2,
|
||||
tooltip = {
|
||||
prop: '',
|
||||
},
|
||||
}: MapProps) {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
// By default, assumes data is an Array...
|
||||
const [geoJsonData, setGeoJsonData] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// If data is string, assume it's a URL
|
||||
if (typeof data === 'string') {
|
||||
setIsLoading(true);
|
||||
|
||||
loadData(data).then((res: any) => {
|
||||
const geoJsonObject = JSON.parse(res);
|
||||
|
||||
const colorScaleAr = chroma
|
||||
.scale([colorScale.starting, colorScale.ending])
|
||||
.mode('lch')
|
||||
.colors(geoJsonObject.features.length);
|
||||
|
||||
geoJsonObject.features.forEach((feature, i) => {
|
||||
if (feature.color === undefined) {
|
||||
feature.color = colorScaleAr[i];
|
||||
}
|
||||
});
|
||||
|
||||
setGeoJsonData(geoJsonObject);
|
||||
setIsLoading(false);
|
||||
});
|
||||
} else {
|
||||
setGeoJsonData(data);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const onEachFeature = (feature, layer) => {
|
||||
const geometryType = feature.type;
|
||||
|
||||
if (tooltip.prop)
|
||||
layer.bindTooltip(feature.properties[tooltip.prop], {
|
||||
direction: 'center',
|
||||
});
|
||||
|
||||
layer.on({
|
||||
mouseover: (event) => {
|
||||
if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
|
||||
event.target.setStyle({
|
||||
fillColor: '#B85042',
|
||||
});
|
||||
}
|
||||
},
|
||||
mouseout: (event) => {
|
||||
if (['Polygon', 'MultiPolygon'].includes(geometryType)) {
|
||||
event.target.setStyle({
|
||||
fillColor: '#A7BEAE',
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return isLoading || !geoJsonData ? (
|
||||
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : (
|
||||
<MapContainer
|
||||
center={[center.latitude, center.longitude]}
|
||||
zoom={zoom}
|
||||
scrollWheelZoom={false}
|
||||
className="h-80 w-full"
|
||||
// @ts-ignore
|
||||
whenReady={(map: any) => {
|
||||
map.target.scrollWheelZoom.enable();
|
||||
|
||||
var info = new L.Control() as any;
|
||||
|
||||
info.onAdd = function () {
|
||||
this._div = L.DomUtil.create('div', 'info');
|
||||
this.update();
|
||||
return this._div;
|
||||
};
|
||||
|
||||
info.update = function () {
|
||||
this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
|
||||
};
|
||||
|
||||
if (title) info.addTo(map.target);
|
||||
|
||||
setTimeout(() => map.target.invalidateSize(), 5000);
|
||||
}}
|
||||
>
|
||||
<GeoJSONLayer
|
||||
data={geoJsonData}
|
||||
style={(geoJsonFeature: any) => {
|
||||
return { color: geoJsonFeature?.color };
|
||||
}}
|
||||
onEachFeature={onEachFeature}
|
||||
/>
|
||||
<TileLayer
|
||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
</MapContainer>
|
||||
);
|
||||
}
|
||||
84
packages/components/src/components/OpenLayers/Controls.jsx
Normal file
84
packages/components/src/components/OpenLayers/Controls.jsx
Normal file
@ -0,0 +1,84 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
export const Controls = ({ children }) => {
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
|
||||
import { FullScreen, Zoom } from 'ol/control';
|
||||
import { MapContext } from './Map';
|
||||
|
||||
export const FullScreenControl = () => {
|
||||
const { map } = useContext(MapContext);
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
let fullScreenControl = new FullScreen({
|
||||
className: 'ml-1 flex flex-col w-8 items-center mt-2',
|
||||
activeClassName:
|
||||
'w-full inline-flex justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
|
||||
inactiveClassName:
|
||||
'inline-flex w-full justify-center items-center rounded-t-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
|
||||
});
|
||||
let zoomControl = new Zoom({
|
||||
className: 'ml-1 flex flex-col w-8 items-center',
|
||||
zoomInClassName:
|
||||
'inline-flex w-full justify-center items-center bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
|
||||
zoomOutClassName:
|
||||
'inline-flex w-full justify-center items-center rounded-b-md bg-white px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 text-sm',
|
||||
});
|
||||
map.controls.push(fullScreenControl);
|
||||
map.controls.push(zoomControl);
|
||||
|
||||
return () => {
|
||||
map.controls.remove(zoomControl);
|
||||
map.controls.remove(fullScreenControl);
|
||||
};
|
||||
}, [map]);
|
||||
return null;
|
||||
};
|
||||
|
||||
//build a list of checkboxes in react
|
||||
|
||||
export const ListOfCheckboxes = ({ layers, shownLayers, setShownLayers }) => {
|
||||
//layers is an array of url and name
|
||||
function addLayer(layer) {
|
||||
setShownLayers([...shownLayers, layer.url]);
|
||||
}
|
||||
|
||||
function removeLayer(layer) {
|
||||
setShownLayers(shownLayers.filter((l) => l !== layer.url));
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="mb-4 font-semibold text-gray-900 ">Layers</h3>
|
||||
<ul className="w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg ">
|
||||
{layers.map((layer, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="w-full border-b border-gray-200 rounded-t-lg "
|
||||
>
|
||||
<div className="flex items-center pl-3">
|
||||
<input
|
||||
id={layer.name}
|
||||
type="checkbox"
|
||||
defaultChecked={shownLayers.includes(layer.url)}
|
||||
onClick={() =>
|
||||
shownLayers.includes(layer.url)
|
||||
? removeLayer(layer)
|
||||
: addLayer(layer)
|
||||
}
|
||||
value={true}
|
||||
className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2 "
|
||||
></input>
|
||||
<label
|
||||
htmlFor={layer.name}
|
||||
className="w-full py-3 ml-2 text-sm font-medium text-gray-90"
|
||||
>
|
||||
{layer.name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import HeatMap from 'ol/layer/Heatmap';
|
||||
import { MapContext } from './Map';
|
||||
const HeatMapLayer = ({ source, style, zIndex = 0 }) => {
|
||||
const { map } = useContext(MapContext);
|
||||
const [heatMapLayer, setHeatMapLayer] = useState(null);
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
let heatMapLayer = new HeatMap({
|
||||
source,
|
||||
style,
|
||||
blur: parseInt(5, 10),
|
||||
radius: parseInt(5, 10),
|
||||
});
|
||||
map.addLayer(heatMapLayer);
|
||||
setHeatMapLayer(heatMapLayer);
|
||||
heatMapLayer.setZIndex(zIndex);
|
||||
return () => {
|
||||
if (map) {
|
||||
map.removeLayer(heatMapLayer);
|
||||
}
|
||||
};
|
||||
}, [map]);
|
||||
useEffect(() => {
|
||||
heatMapLayer && heatMapLayer.setZIndex(zIndex);
|
||||
}, [zIndex]);
|
||||
return null;
|
||||
};
|
||||
export default HeatMapLayer;
|
||||
4
packages/components/src/components/OpenLayers/Layers.jsx
Normal file
4
packages/components/src/components/OpenLayers/Layers.jsx
Normal file
@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
export const Layers = ({ children }) => {
|
||||
return <div>{children}</div>;
|
||||
};
|
||||
50
packages/components/src/components/OpenLayers/Map.jsx
Normal file
50
packages/components/src/components/OpenLayers/Map.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import * as ol from 'ol';
|
||||
|
||||
export const MapContext = new React.createContext();
|
||||
|
||||
const Map = ({ children, zoom, center, setSelected }) => {
|
||||
const mapRef = useRef();
|
||||
const [map, setMap] = useState(null);
|
||||
// on component mount
|
||||
useEffect(() => {
|
||||
let options = {
|
||||
view: new ol.View({ zoom, center }),
|
||||
layers: [],
|
||||
controls: [],
|
||||
overlays: [],
|
||||
};
|
||||
let mapObject = new ol.Map(options);
|
||||
mapObject.setTarget(mapRef.current);
|
||||
setMap(mapObject);
|
||||
return () => mapObject.setTarget(undefined);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
if (setSelected !== null) {
|
||||
let selected = null;
|
||||
map.on('pointermove', function (e) {
|
||||
map.forEachFeatureAtPixel(e.pixel, function (f) {
|
||||
selected = f;
|
||||
return true;
|
||||
});
|
||||
if (selected) {
|
||||
setSelected(selected);
|
||||
} else {
|
||||
setSelected(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [map]);
|
||||
return (
|
||||
<MapContext.Provider value={{ map }}>
|
||||
<div ref={mapRef} className="w-full" style={{height: '500px'}}>
|
||||
{children}
|
||||
</div>
|
||||
</MapContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
136
packages/components/src/components/OpenLayers/OpenLayers.tsx
Normal file
136
packages/components/src/components/OpenLayers/OpenLayers.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import Map from './Map';
|
||||
import { Layers } from './Layers';
|
||||
import { Fill, Icon, Style } from 'ol/style';
|
||||
import * as olSource from 'ol/source';
|
||||
import TileLayer from './TileLayer';
|
||||
import { fromLonLat } from 'ol/proj';
|
||||
import VectorLayer from './VectorLayer';
|
||||
import { Vector as VectorSource } from 'ol/source';
|
||||
import GeoJSON from 'ol/format/GeoJSON';
|
||||
import KML from 'ol/format/KML';
|
||||
import { colors } from './colors';
|
||||
import { FullScreenControl, Controls, ListOfCheckboxes } from './Controls';
|
||||
import HeatMapLayer from './HeatMapLayer';
|
||||
|
||||
function osm() {
|
||||
return new olSource.OSM();
|
||||
}
|
||||
|
||||
const formats = {
|
||||
geojson: new GeoJSON(),
|
||||
kml: new KML(),
|
||||
};
|
||||
|
||||
interface OpenLayersProps {
|
||||
layers: {
|
||||
url: string;
|
||||
name?: string;
|
||||
format?: string;
|
||||
heatmap?: boolean;
|
||||
}[];
|
||||
center?: [number, number];
|
||||
zoom?: number;
|
||||
popup?: (selected: any) => JSX.Element;
|
||||
}
|
||||
|
||||
export default function OpenLayers({
|
||||
layers,
|
||||
center = [0, 0],
|
||||
zoom = 1,
|
||||
popup,
|
||||
}: OpenLayersProps) {
|
||||
const [shownLayers, setShownLayers] = useState(
|
||||
layers.map((layer) => layer.url)
|
||||
);
|
||||
const [selected, setSelected] = useState(null);
|
||||
const [style, setStyle] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const style = new Style({
|
||||
fill: new Fill({
|
||||
color: '#eeeeee',
|
||||
}),
|
||||
image: new Icon({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
width: 18,
|
||||
height: 28,
|
||||
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Google_Maps_icon_%282020%29.svg/418px-Google_Maps_icon_%282020%29.svg.png?20200218211225',
|
||||
}),
|
||||
});
|
||||
setStyle(style);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Map
|
||||
center={fromLonLat(center)}
|
||||
zoom={zoom}
|
||||
setSelected={popup ? setSelected : null}
|
||||
>
|
||||
<Layers>
|
||||
<TileLayer source={osm()} zIndex={0} />
|
||||
{layers.map((layer, index) =>
|
||||
!layer.heatmap ? (
|
||||
<VectorLayer
|
||||
key={index}
|
||||
zIndex={shownLayers.includes(layer.url) ? 1 : -1}
|
||||
source={
|
||||
new VectorSource({
|
||||
url: layer.url,
|
||||
format: layer.format
|
||||
? formats[layer.format]
|
||||
: new GeoJSON(),
|
||||
})
|
||||
}
|
||||
style={function (feature) {
|
||||
const id = feature.getId();
|
||||
const color = feature.get('COLOR') || colors[id % 1302].hex;
|
||||
style.getFill().setColor(color);
|
||||
return style;
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<HeatMapLayer
|
||||
key={index}
|
||||
zIndex={shownLayers.includes(layer.url) ? 1 : -1}
|
||||
source={
|
||||
new VectorSource({
|
||||
url: layer.url,
|
||||
format: layer.format
|
||||
? formats[layer.format]
|
||||
: new GeoJSON(),
|
||||
})
|
||||
}
|
||||
style={function (feature) {
|
||||
const color =
|
||||
feature.get('COLOR') || colors[feature.ol_uid % 1302].hex;
|
||||
style.getFill().setColor(color);
|
||||
return style;
|
||||
}}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</Layers>
|
||||
{/* add a floating pane that will output the ListOfCheckboxes component using tailwind*/}
|
||||
<div className="absolute bottom-0 right-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
|
||||
<ListOfCheckboxes
|
||||
layers={layers}
|
||||
shownLayers={shownLayers}
|
||||
setShownLayers={setShownLayers}
|
||||
/>
|
||||
</div>
|
||||
{popup && selected && (
|
||||
<div className="absolute bottom-0 left-0 m-4 p-4 z-50 bg-white rounded-lg shadow-xl">
|
||||
{popup(selected)}
|
||||
</div>
|
||||
)}
|
||||
<Controls>
|
||||
<FullScreenControl />
|
||||
</Controls>
|
||||
</Map>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
packages/components/src/components/OpenLayers/TileLayer.jsx
Normal file
23
packages/components/src/components/OpenLayers/TileLayer.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { useContext, useEffect } from 'react';
|
||||
import OLTileLayer from 'ol/layer/Tile';
|
||||
import { MapContext } from './Map';
|
||||
const TileLayer = ({ source, zIndex = 0 }) => {
|
||||
const { map } = useContext(MapContext);
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
let tileLayer = new OLTileLayer({
|
||||
source,
|
||||
zIndex,
|
||||
});
|
||||
map.addLayer(tileLayer);
|
||||
tileLayer.setZIndex(zIndex);
|
||||
return () => {
|
||||
if (map) {
|
||||
map.removeLayer(tileLayer);
|
||||
}
|
||||
};
|
||||
}, [map]);
|
||||
return null;
|
||||
};
|
||||
export default TileLayer;
|
||||
@ -0,0 +1,33 @@
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import OLVectorLayer from 'ol/layer/Vector';
|
||||
import { MapContext } from './Map';
|
||||
const VectorLayer = ({ source, style, zIndex = 0 }) => {
|
||||
const { map } = useContext(MapContext);
|
||||
const [vectorLayer, setVectorLayer] = useState(null);
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
let vectorLayer = new OLVectorLayer({
|
||||
source,
|
||||
style,
|
||||
});
|
||||
const vectorSource = vectorLayer.getSource();
|
||||
vectorSource.on('featuresloadend', function () {
|
||||
vectorSource.getFeatures().forEach((feature, index) => {
|
||||
feature.setId(index);
|
||||
});
|
||||
});
|
||||
map.addLayer(vectorLayer);
|
||||
setVectorLayer(vectorLayer);
|
||||
vectorLayer.setZIndex(zIndex);
|
||||
return () => {
|
||||
if (map) {
|
||||
map.removeLayer(vectorLayer);
|
||||
}
|
||||
};
|
||||
}, [map]);
|
||||
useEffect(() => {
|
||||
vectorLayer && vectorLayer.setZIndex(zIndex);
|
||||
}, [zIndex]);
|
||||
return null;
|
||||
};
|
||||
export default VectorLayer;
|
||||
5210
packages/components/src/components/OpenLayers/colors.js
Normal file
5210
packages/components/src/components/OpenLayers/colors.js
Normal file
File diff suppressed because it is too large
Load Diff
6
packages/components/src/include.css
Normal file
6
packages/components/src/include.css
Normal file
@ -0,0 +1,6 @@
|
||||
/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
|
||||
@layer base {
|
||||
svg[tw^='animate-pulse w-12'] {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Temporary fix for a size issue with FlatUiTable loading indicator on Firefox */
|
||||
@layer base {
|
||||
svg[tw^='animate-pulse w-12'] {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "leaflet";
|
||||
@import "include";
|
||||
@import "tailwindcss/utilities";
|
||||
|
||||
|
||||
@ -4,3 +4,5 @@ export * from "./components/LineChart";
|
||||
export * from "./components/Vega";
|
||||
export * from "./components/VegaLite";
|
||||
export * from "./components/FlatUiTable";
|
||||
export * from './components/OpenLayers/OpenLayers';
|
||||
export * from "./components/Map";
|
||||
|
||||
171
packages/components/src/types/GeoJSON.tsx
Normal file
171
packages/components/src/types/GeoJSON.tsx
Normal file
@ -0,0 +1,171 @@
|
||||
/**
|
||||
* Typescript types for the GeoJSON RFC7946 specification. This is not fully RFC-compliant due to lack of support for
|
||||
* ranged number data types.
|
||||
*
|
||||
* See https://tools.ietf.org/html/rfc7946
|
||||
*/
|
||||
export declare namespace GeoJSON {
|
||||
/**
|
||||
* Inside this document, the term "geometry type" refers to seven case-sensitive strings: "Point", "MultiPoint",
|
||||
* "LineString", "MultiLineString", "Polygon", "MultiPolygon", and "GeometryCollection".
|
||||
*/
|
||||
export type Geometry = Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon
|
||||
| GeometryCollection;
|
||||
export type GeometryType = Geometry["type"];
|
||||
|
||||
/**
|
||||
* ...the term "GeoJSON types" refers to nine case-sensitive strings: "Feature", "FeatureCollection", and the
|
||||
* geometry types listed above.
|
||||
*/
|
||||
export type GeoJson = Geometry | Feature | FeatureCollection;
|
||||
export type GeoJsonType = GeoJson["type"];
|
||||
|
||||
// types
|
||||
|
||||
/**
|
||||
* A position is an array of numbers. There MUST be two or more elements. The first two elements are longitude and
|
||||
* latitude, or easting and northing, precisely in that order and using decimal numbers. Altitude or elevation MAY
|
||||
* be included as an optional third element.
|
||||
*
|
||||
* Implementations SHOULD NOT extend positions beyond three elements because the semantics of extra elements are
|
||||
* unspecified and ambiguous.
|
||||
*/
|
||||
export type Position = [longitude: number, latitude: number, elevation?: number]
|
||||
|
||||
export type Record = { [key in string | number]: unknown };
|
||||
|
||||
/**
|
||||
* Properties inherit to all GeoJSON types
|
||||
*/
|
||||
export interface GeometryBase extends Record {
|
||||
/**
|
||||
* A GeoJSON object MAY have a member named "bbox" to include information on the coordinate range for its
|
||||
* Geometries, Features, or FeatureCollections. The value of the bbox member MUST be an array of length 2*n
|
||||
* where n is the number of dimensions represented in the contained geometries, with all axes of the most
|
||||
* southwesterly point followed by all axes of the more northeasterly point. The axes order of a bbox follows
|
||||
* the axes order of geometries.
|
||||
*/
|
||||
bbox?: number[];
|
||||
|
||||
/**
|
||||
* A GeoJSON object MAY have other members.
|
||||
*
|
||||
* Members not described in this specification ("foreign members") MAY be used in a GeoJSON document. Note that
|
||||
* support for foreign members can vary across implementations, and no normative processing model for foreign
|
||||
* members is defined.
|
||||
*/
|
||||
}
|
||||
|
||||
// geometry types
|
||||
|
||||
export interface Point extends GeometryBase {
|
||||
type: "Point";
|
||||
/**
|
||||
* For type "Point", the "coordinates" member is a single position.
|
||||
*/
|
||||
coordinates: Position;
|
||||
}
|
||||
|
||||
export interface MultiPoint extends GeometryBase {
|
||||
type: "MultiPoint";
|
||||
/**
|
||||
* For type "MultiPoint", the "coordinates" member is an array of positions.
|
||||
*/
|
||||
coordinates: Position[];
|
||||
}
|
||||
|
||||
export interface LineString extends GeometryBase {
|
||||
type: "LineString";
|
||||
/**
|
||||
* For type "LineString", the "coordinates" member is an array of two or more positions.
|
||||
*/
|
||||
coordinates: { 0: Position, 1: Position } & Position[]
|
||||
}
|
||||
|
||||
export interface MultiLineString extends GeometryBase {
|
||||
type: "MultiLineString";
|
||||
/**
|
||||
* For type "MultiLineString", the "coordinates" member is an array of LineString coordinate arrays.
|
||||
*/
|
||||
coordinates: LineString["coordinates"][];
|
||||
}
|
||||
|
||||
/**
|
||||
* To specify a constraint specific to Polygons, it is useful to introduce the concept of a linear ring:
|
||||
* - A linear ring is a closed LineString with four or more positions.
|
||||
* - The first and last positions are equivalent, and they MUST contain identical values; their representation
|
||||
* SHOULD also be identical.
|
||||
* - A linear ring is the boundary of a surface or the boundary of a hole in a surface.
|
||||
* - A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are
|
||||
* counterclockwise, and holes are clockwise.
|
||||
*/
|
||||
export type LinearRing = { 0: Position, 1: Position, 2: Position, 3: Position } & Position[];
|
||||
|
||||
export interface Polygon extends GeometryBase {
|
||||
type: "Polygon";
|
||||
/**
|
||||
* For type "Polygon", the "coordinates" member MUST be an array of linear ring coordinate arrays.
|
||||
*
|
||||
* For Polygons with more than one of these rings, the first MUST be the exterior ring, and any others MUST be
|
||||
* interior rings. The exterior ring bounds the surface, and the interior rings (if present) bound holes within
|
||||
* the surface.
|
||||
*/
|
||||
coordinates: LinearRing[];
|
||||
}
|
||||
|
||||
export interface MultiPolygon extends GeometryBase {
|
||||
type: "MultiPolygon";
|
||||
/**
|
||||
* For type "MultiPolygon", the "coordinates" member is an array of Polygon coordinate arrays.
|
||||
*/
|
||||
coordinates: Polygon["coordinates"][];
|
||||
}
|
||||
|
||||
export interface GeometryCollection {
|
||||
/**
|
||||
* A GeoJSON object with type "GeometryCollection" is a Geometry object.
|
||||
*/
|
||||
type: "GeometryCollection";
|
||||
/**
|
||||
* A GeometryCollection has a member with the name "geometries". The value of "geometries" is an array. Each
|
||||
* element of this array is a GeoJSON Geometry object. It is possible for this array to be empty.
|
||||
*/
|
||||
geometries: Geometry[];
|
||||
}
|
||||
|
||||
// GeoJSON types
|
||||
|
||||
export interface Feature {
|
||||
/**
|
||||
* A Feature object has a "type" member with the value "Feature".
|
||||
*/
|
||||
type: "Feature";
|
||||
/**
|
||||
* If a Feature has a commonly used identifier, that identifier SHOULD be included as a member of the Feature object
|
||||
* with the name "id", and the value of this member is either a JSON string or number.
|
||||
*/
|
||||
id?: string | number;
|
||||
/**
|
||||
* A Feature object has a member with the name "geometry". The value of the geometry member SHALL be either a
|
||||
* Geometry object as defined above or, in the case that the Feature is unlocated, a JSON null value.
|
||||
*/
|
||||
geometry: Geometry | null;
|
||||
/**
|
||||
* A Feature object has a member with the name "properties". The value of the properties member is an object
|
||||
* (any JSON object or a JSON null value).
|
||||
*/
|
||||
properties: Record | null;
|
||||
}
|
||||
|
||||
export interface FeatureCollection {
|
||||
/**
|
||||
* A GeoJSON object with the type "FeatureCollection" is a FeatureCollection object.
|
||||
*/
|
||||
type: "FeatureCollection";
|
||||
/**
|
||||
* A FeatureCollection object has a member with the name "features". The value of "features" is a JSON array. Each
|
||||
* element of the array is a Feature object as defined above. It is possible for this array to be empty.
|
||||
*/
|
||||
features: Feature[];
|
||||
}
|
||||
}
|
||||
55
packages/components/stories/Map.stories.ts
Normal file
55
packages/components/stories/Map.stories.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Map, MapProps } from '../src/components/Map';
|
||||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
|
||||
const meta: Meta = {
|
||||
title: 'Components/Map',
|
||||
component: Map,
|
||||
tags: ['autodocs'],
|
||||
argTypes: {
|
||||
data: {
|
||||
description:
|
||||
'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object',
|
||||
},
|
||||
title: {
|
||||
description: 'Title to display on the map. Optional.',
|
||||
},
|
||||
center: {
|
||||
description: 'Initial coordinates of the center of the map',
|
||||
},
|
||||
zoom: {
|
||||
description: 'Zoom level',
|
||||
},
|
||||
tooltip: {
|
||||
description: 'Tooltip settings'
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<MapProps>;
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
|
||||
export const GeoJSONPolygons: Story = {
|
||||
name: 'GeoJSON polygons map',
|
||||
args: {
|
||||
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
||||
title: 'Seas and Oceans Map',
|
||||
center: { latitude: 45, longitude: 0 },
|
||||
zoom: 2,
|
||||
tooltip: { prop: 'name' },
|
||||
},
|
||||
};
|
||||
|
||||
export const GeoJSONPoints: Story = {
|
||||
name: 'GeoJSON points map',
|
||||
args: {
|
||||
data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
||||
title: 'Roads in York',
|
||||
center: { latitude: 53.9614, longitude: -1.0739 },
|
||||
zoom: 12,
|
||||
tooltip: { prop: 'Location' },
|
||||
},
|
||||
};
|
||||
136
packages/components/stories/OpenLayers.stories.tsx
Normal file
136
packages/components/stories/OpenLayers.stories.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import OpenLayers from '../src/components/OpenLayers/OpenLayers';
|
||||
|
||||
const meta: Meta = {
|
||||
title: 'Components/OpenLayers',
|
||||
component: OpenLayers,
|
||||
argTypes: {
|
||||
layers: {
|
||||
description: 'Layers to be added to the map',
|
||||
control: {
|
||||
type: 'array',
|
||||
},
|
||||
},
|
||||
center: {
|
||||
description: 'Center of the map',
|
||||
defaultValue: [0, 0],
|
||||
control: {
|
||||
type: 'array',
|
||||
},
|
||||
},
|
||||
zoom: {
|
||||
description: 'Zoom level of the map',
|
||||
defaultValue: 1,
|
||||
control: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<any>;
|
||||
|
||||
export const Secondary: Story = {
|
||||
name: 'Map with OpenLayers',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
name: 'Ecoregions',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const Primary: Story = {
|
||||
name: 'Map with OpenLayers 2',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
||||
name: 'Marine regions',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const MapWithPopover: Story = {
|
||||
name: 'Map with popup',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
name: 'Ecoregions',
|
||||
},
|
||||
],
|
||||
popup: (feature: any) => {
|
||||
return (
|
||||
<div className="flex flex-col gap-y-1" style={{ color: 'red' }}>
|
||||
<span className="font-bold">Biome name</span>
|
||||
<span className="text-sm">{feature.values_.BIOME_NAME}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Third: Story = {
|
||||
name: 'Map with two layers',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
|
||||
name: 'Marine regions',
|
||||
},
|
||||
{
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
name: 'Ecoregions',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomCenter: Story = {
|
||||
name: 'Map with custom center and zoom',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
name: 'Ecoregions',
|
||||
},
|
||||
],
|
||||
center: [-15, 20],
|
||||
zoom: 4,
|
||||
},
|
||||
};
|
||||
|
||||
export const PointsOnMap: Story = {
|
||||
name: 'Map with points on',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
|
||||
name: 'E-Scooter Parking Bays',
|
||||
},
|
||||
],
|
||||
center: [-1.055429957881787, 53.963900188025301],
|
||||
zoom: 12,
|
||||
},
|
||||
};
|
||||
|
||||
export const KMLFile: Story = {
|
||||
name: 'Map with KML File',
|
||||
args: {
|
||||
layers: [
|
||||
{
|
||||
url: 'https://openlayers.org/en/latest/examples/data/kml/2012_Earthquakes_Mag5.kml',
|
||||
name: '2012 Earthquakes M5+',
|
||||
format: 'kml',
|
||||
heatmap: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -1,8 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
theme: {},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
@ -1,29 +1,15 @@
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'node:path'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import dts from 'vite-plugin-dts'
|
||||
import tailwindcss from 'tailwindcss'
|
||||
import { UserConfigExport } from 'vite'
|
||||
import replace from "rollup-plugin-re"
|
||||
import react from '@vitejs/plugin-react-swc';
|
||||
import path from 'node:path';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import dts from 'vite-plugin-dts';
|
||||
import tailwindcss from 'tailwindcss';
|
||||
import { UserConfigExport } from 'vite';
|
||||
import replace from 'rollup-plugin-re';
|
||||
|
||||
const app = async (): Promise<UserConfigExport> => {
|
||||
return defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
replace({
|
||||
patterns: [
|
||||
{
|
||||
match: /js-sha256/,
|
||||
test: `eval("require('crypto')")`,
|
||||
replace: `require('crypto')`,
|
||||
},
|
||||
{
|
||||
match: /js-sha256/,
|
||||
test: `eval("require('buffer').Buffer")`,
|
||||
replace: `require('buffer').Buffer`,
|
||||
},
|
||||
],
|
||||
}),
|
||||
dts({
|
||||
insertTypesEntry: true,
|
||||
}),
|
||||
@ -34,6 +20,7 @@ const app = async (): Promise<UserConfigExport> => {
|
||||
},
|
||||
},
|
||||
build: {
|
||||
target: 'es2020',
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, 'src/index.ts'),
|
||||
name: 'components',
|
||||
@ -41,12 +28,27 @@ const app = async (): Promise<UserConfigExport> => {
|
||||
fileName: (format) => `components.${format}.js`,
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['react', 'react-dom', 'tailwindcss', 'vega-lite', 'vega', 'react-vega'],
|
||||
external: [
|
||||
'react',
|
||||
'ol-mapbox-style',
|
||||
'react-dom',
|
||||
'tailwindcss',
|
||||
'vega-lite',
|
||||
'vega',
|
||||
'react-vega',
|
||||
'ol',
|
||||
'leaflet'
|
||||
],
|
||||
output: {
|
||||
manualChunks: undefined,
|
||||
globals: {
|
||||
react: 'React',
|
||||
ol: 'ol',
|
||||
'ol-mapbox-style': 'ol-mapbox-style',
|
||||
'react-vega': 'react-vega',
|
||||
'react-dom': 'ReactDOM',
|
||||
tailwindcss: 'tailwindcss',
|
||||
leaflet: 'leaflet'
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -55,7 +57,7 @@ const app = async (): Promise<UserConfigExport> => {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
},
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
// https://vitejs.dev/config/
|
||||
export default app
|
||||
export default app;
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
// vite.config.ts
|
||||
import react from "file:///home/urutu-branco/Projetos/portaljs/node_modules/@vitejs/plugin-react-swc/index.mjs";
|
||||
import path from "node:path";
|
||||
import { defineConfig } from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vitest/dist/config.js";
|
||||
import dts from "file:///home/urutu-branco/Projetos/portaljs/node_modules/vite-plugin-dts/dist/index.mjs";
|
||||
import tailwindcss from "file:///home/urutu-branco/Projetos/portaljs/node_modules/tailwindcss/lib/index.js";
|
||||
var __vite_injected_original_dirname = "/home/urutu-branco/Projetos/portaljs/packages/components";
|
||||
var app = async () => {
|
||||
return defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
dts({
|
||||
insertTypesEntry: true
|
||||
})
|
||||
],
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [tailwindcss]
|
||||
}
|
||||
},
|
||||
build: {
|
||||
target: "es2020",
|
||||
lib: {
|
||||
entry: path.resolve(__vite_injected_original_dirname, "src/index.ts"),
|
||||
name: "components",
|
||||
formats: ["es", "umd"],
|
||||
fileName: (format) => `components.${format}.js`
|
||||
},
|
||||
rollupOptions: {
|
||||
external: [
|
||||
"react",
|
||||
"ol-mapbox-style",
|
||||
"react-dom",
|
||||
"tailwindcss",
|
||||
"vega-lite",
|
||||
"vega",
|
||||
"react-vega",
|
||||
"ol",
|
||||
"ol/dom.js"
|
||||
],
|
||||
output: {
|
||||
manualChunks: void 0,
|
||||
globals: {
|
||||
react: "React",
|
||||
ol: "ol",
|
||||
"ol/dom.js": "ol/dom.js",
|
||||
"react-vega": "react-vega",
|
||||
"react-dom": "ReactDOM",
|
||||
tailwindcss: "tailwindcss"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom"
|
||||
}
|
||||
});
|
||||
};
|
||||
var vite_config_default = app;
|
||||
export {
|
||||
vite_config_default as default
|
||||
};
|
||||
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS91cnV0dS1icmFuY28vUHJvamV0b3MvcG9ydGFsanMvcGFja2FnZXMvY29tcG9uZW50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL2hvbWUvdXJ1dHUtYnJhbmNvL1Byb2pldG9zL3BvcnRhbGpzL3BhY2thZ2VzL2NvbXBvbmVudHMvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgcmVhY3QgZnJvbSAnQHZpdGVqcy9wbHVnaW4tcmVhY3Qtc3djJztcbmltcG9ydCBwYXRoIGZyb20gJ25vZGU6cGF0aCc7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlc3QvY29uZmlnJztcbmltcG9ydCBkdHMgZnJvbSAndml0ZS1wbHVnaW4tZHRzJztcbmltcG9ydCB0YWlsd2luZGNzcyBmcm9tICd0YWlsd2luZGNzcyc7XG5pbXBvcnQgeyBVc2VyQ29uZmlnRXhwb3J0IH0gZnJvbSAndml0ZSc7XG5pbXBvcnQgcmVwbGFjZSBmcm9tICdyb2xsdXAtcGx1Z2luLXJlJztcblxuY29uc3QgYXBwID0gYXN5bmMgKCk6IFByb21pc2U8VXNlckNvbmZpZ0V4cG9ydD4gPT4ge1xuICByZXR1cm4gZGVmaW5lQ29uZmlnKHtcbiAgICBwbHVnaW5zOiBbXG4gICAgICByZWFjdCgpLFxuICAgICAgZHRzKHtcbiAgICAgICAgaW5zZXJ0VHlwZXNFbnRyeTogdHJ1ZSxcbiAgICAgIH0pLFxuICAgIF0sXG4gICAgY3NzOiB7XG4gICAgICBwb3N0Y3NzOiB7XG4gICAgICAgIHBsdWdpbnM6IFt0YWlsd2luZGNzc10sXG4gICAgICB9LFxuICAgIH0sXG4gICAgYnVpbGQ6IHtcbiAgICAgIHRhcmdldDogJ2VzMjAyMCcsXG4gICAgICBsaWI6IHtcbiAgICAgICAgZW50cnk6IHBhdGgucmVzb2x2ZShfX2Rpcm5hbWUsICdzcmMvaW5kZXgudHMnKSxcbiAgICAgICAgbmFtZTogJ2NvbXBvbmVudHMnLFxuICAgICAgICBmb3JtYXRzOiBbJ2VzJywgJ3VtZCddLFxuICAgICAgICBmaWxlTmFtZTogKGZvcm1hdCkgPT4gYGNvbXBvbmVudHMuJHtmb3JtYXR9LmpzYCxcbiAgICAgIH0sXG4gICAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICAgIGV4dGVybmFsOiBbXG4gICAgICAgICAgJ3JlYWN0JyxcbiAgICAgICAgICAnb2wtbWFwYm94LXN0eWxlJyxcbiAgICAgICAgICAncmVhY3QtZG9tJyxcbiAgICAgICAgICAndGFpbHdpbmRjc3MnLFxuICAgICAgICAgICd2ZWdhLWxpdGUnLFxuICAgICAgICAgICd2ZWdhJyxcbiAgICAgICAgICAncmVhY3QtdmVnYScsXG4gICAgICAgICAgJ29sJyxcbiAgICAgICAgICAnb2wvZG9tLmpzJyxcbiAgICAgICAgXSxcbiAgICAgICAgb3V0cHV0OiB7XG4gICAgICAgICAgbWFudWFsQ2h1bmtzOiB1bmRlZmluZWQsXG4gICAgICAgICAgZ2xvYmFsczoge1xuICAgICAgICAgICAgcmVhY3Q6ICdSZWFjdCcsXG4gICAgICAgICAgICBvbDogJ29sJyxcbiAgICAgICAgICAgICdvbC9kb20uanMnOiAnb2wvZG9tLmpzJyxcbiAgICAgICAgICAgICdyZWFjdC12ZWdhJzogJ3JlYWN0LXZlZ2EnLFxuICAgICAgICAgICAgJ3JlYWN0LWRvbSc6ICdSZWFjdERPTScsXG4gICAgICAgICAgICB0YWlsd2luZGNzczogJ3RhaWx3aW5kY3NzJyxcbiAgICAgICAgICB9LFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIHRlc3Q6IHtcbiAgICAgIGdsb2JhbHM6IHRydWUsXG4gICAgICBlbnZpcm9ubWVudDogJ2pzZG9tJyxcbiAgICB9LFxuICB9KTtcbn07XG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgYXBwO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUEwVixPQUFPLFdBQVc7QUFDNVcsT0FBTyxVQUFVO0FBQ2pCLFNBQVMsb0JBQW9CO0FBQzdCLE9BQU8sU0FBUztBQUNoQixPQUFPLGlCQUFpQjtBQUp4QixJQUFNLG1DQUFtQztBQVF6QyxJQUFNLE1BQU0sWUFBdUM7QUFDakQsU0FBTyxhQUFhO0FBQUEsSUFDbEIsU0FBUztBQUFBLE1BQ1AsTUFBTTtBQUFBLE1BQ04sSUFBSTtBQUFBLFFBQ0Ysa0JBQWtCO0FBQUEsTUFDcEIsQ0FBQztBQUFBLElBQ0g7QUFBQSxJQUNBLEtBQUs7QUFBQSxNQUNILFNBQVM7QUFBQSxRQUNQLFNBQVMsQ0FBQyxXQUFXO0FBQUEsTUFDdkI7QUFBQSxJQUNGO0FBQUEsSUFDQSxPQUFPO0FBQUEsTUFDTCxRQUFRO0FBQUEsTUFDUixLQUFLO0FBQUEsUUFDSCxPQUFPLEtBQUssUUFBUSxrQ0FBVyxjQUFjO0FBQUEsUUFDN0MsTUFBTTtBQUFBLFFBQ04sU0FBUyxDQUFDLE1BQU0sS0FBSztBQUFBLFFBQ3JCLFVBQVUsQ0FBQyxXQUFXLGNBQWM7QUFBQSxNQUN0QztBQUFBLE1BQ0EsZUFBZTtBQUFBLFFBQ2IsVUFBVTtBQUFBLFVBQ1I7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFVBQ0E7QUFBQSxVQUNBO0FBQUEsVUFDQTtBQUFBLFFBQ0Y7QUFBQSxRQUNBLFFBQVE7QUFBQSxVQUNOLGNBQWM7QUFBQSxVQUNkLFNBQVM7QUFBQSxZQUNQLE9BQU87QUFBQSxZQUNQLElBQUk7QUFBQSxZQUNKLGFBQWE7QUFBQSxZQUNiLGNBQWM7QUFBQSxZQUNkLGFBQWE7QUFBQSxZQUNiLGFBQWE7QUFBQSxVQUNmO0FBQUEsUUFDRjtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFDQSxNQUFNO0FBQUEsTUFDSixTQUFTO0FBQUEsTUFDVCxhQUFhO0FBQUEsSUFDZjtBQUFBLEVBQ0YsQ0FBQztBQUNIO0FBRUEsSUFBTyxzQkFBUTsiLAogICJuYW1lcyI6IFtdCn0K
|
||||
Loading…
x
Reference in New Issue
Block a user