{"_id":"@antonio-goncalves/react-regional-data-display","name":"@antonio-goncalves/react-regional-data-display","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@antonio-goncalves/react-regional-data-display","version":"1.0.0","description":"React components based on [mapbox](https://www.mapbox.com/) used to display quantitative data of geographical regions with support for multiples data sets and dates.","source":"src/index.ts","main":"dist/main.js","module":"dist/module.js","css":"dist/main.css","types":"dist/types.d.ts","scripts":{"prepublishOnly":"rm -rf dist && npm run build","watch":"parcel watch","build":"rm -rf dist && parcel build","test":"jest","dev":"parcel dev/index.html","clean":"rm -rf dist .parcel-cache node_modules"},"homepage":"https://www.github.com/antonio-goncalves/react-regional-data-display","repository":{"type":"git","url":"git+https://github.com/antonio-goncalves/react-regional-data-display.git"},"bugs":{"url":"https://www.github.com/antonio-goncalves/react-regional-data-display/issues"},"publishConfig":{"access":"public"},"targets":{"main":{"source":"src/index.ts"},"module":{"source":"src/index.ts"},"types":{"source":"src/index.ts"},"css":{"source":"src/main.scss"}},"jest":{"testEnvironment":"jsdom","automock":false,"resetMocks":false,"moduleNameMapper":{"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":"/__mocks__/fileMock.js","\\.(css|less)$":"identity-obj-proxy"}},"author":"","license":"MIT","devDependencies":{"@babel/preset-env":"^7.18.10","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@parcel/packager-ts":"^2.7.0","@parcel/transformer-sass":"^2.7.0","@parcel/transformer-typescript-types":"^2.7.0","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.4.0","@types/geojson":"^7946.0.10","@types/lodash":"^4.14.185","@types/mapbox-gl":"^2.7.5","@types/node":"^18.7.15","@types/react":"^18.0.17","@types/react-slider":"^1.3.1","@types/react-test-renderer":"^18.0.0","@types/styled-components":"^5.1.26","babel-jest":"^28.1.3","buffer":"^6.0.3","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","parcel":"^2.7.0","parcel-transformer-ts-css-modules":"^1.0.14","process":"^0.11.10","react-test-renderer":"^18.2.0","ts-jest":"^28.0.7","typescript":"~4.7.4","typescript-plugin-css-modules":"^3.4.0","axios":"^1.1.2","swr":"^1.3.0","@release-it/keep-a-changelog":"^3.1.0","release-it":"^15.4.3"},"peerDependencies":{"classnames":"^2.0.0","lodash":"^4.0.0","mapbox-gl":"^2.10.0","moment":"^2.29.4","prop-types":"^15.8.1","rc-slider":"^10.0.1","react":"^17.0.2 || ^18.2.0","react-dom":"^17.0.2 || ^18.2.0","react-slider":"^2.0.3"},"gitHead":"99dd9560b33904ef759e1fa505ade2fdebb02d7b","_id":"@antonio-goncalves/react-regional-data-display@1.0.0","_nodeVersion":"16.17.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-6BJPMl1jBV9BepkMmgZmkQG42lzDV4ORMSdZ3FF5j88TqxmxkPgqmf+/eZHQNMjNLWkHvxcYRu3Zvcqy+VXrGQ==","shasum":"051cf036f40f666952ab4663253fb808dfff0076","tarball":"https://registry.npmjs.org/@antonio-goncalves/react-regional-data-display/-/react-regional-data-display-1.0.0.tgz","fileCount":17,"unpackedSize":316331,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCStxODIKEY8NZKF0g4wSs3oFlK30EiZb2sbOoiHt5LAIhAKRE4BmxZ5xahrgsNVQz1YwCA6J+17GGLLClrWamvVRN"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRz+RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpceQ/+MNjB0mhGbLZZ7jeXd8D7tECtXIFpjS5Oixie1hnmXgE5Vj8R\r\nOYnv9wKuCvSrQqiIaTjUv9CHG7ESY1Zxn0o8tR0hpzMHiG7BaxHfoJfntCLs\r\n6Ktv2hkNkwZe59K0j4SdBcV13qLpS4j0aA/7dS3AZWbDNIa57metdMwouZ+n\r\nzWG2ESwoNI5Lv9qC62SGPXFHQMnQgushvSdUFSvq7x6uB0W0N4nKPk6qwT9n\r\n2guOZaPwFSZweIV2482nrlH6tivgKBL7um76OyNDlQFsRhiro3D6vlwNDE4H\r\nSdkOFdsuET7d+oXNbDzdpAp1gTw4LMNCG1+DO6eRR7rRXyiMsWokUgWW+Ius\r\nbBC/0w2uF0NcQ5bGp6Tn+5DgS8AXMjupaWxgeRlaJ5vkKv9KX8eSfuTkegqQ\r\nCB5a/LV9mtrkq1vH7MGyuBkUNKk3qNuw4NC7bLXsJi+9oV2njHUEOaSm7xz3\r\nQhKuiP4/cEBGMdiBRzPQy8iziOODNr+Bv+xhYZtpTMEJ3hUJ53x7xKy3iLnJ\r\nLrjeA5aX72uz1U/Lh+PALqrLsi+4GMnspZocO9bYSMO+fnZ+Afhgeqw4Sc9Y\r\nt4uPNWyfSm++ETyxLhUtvoN9WuFwuReKnE1DU8g+u4s+LE0Q5+HcOWgLNPeC\r\nUrhiRRpnVN/PGNE3h68xQJEAOJ9wSCS8+W8=\r\n=6FeL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"},"directories":{},"maintainers":[{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-regional-data-display_1.0.0_1665613713297_0.9287970102285934"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-12T22:28:33.128Z","1.0.0":"2022-10-12T22:28:33.502Z","modified":"2022-10-12T22:28:33.631Z"},"maintainers":[{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"}],"description":"React components based on [mapbox](https://www.mapbox.com/) used to display quantitative data of geographical regions with support for multiples data sets and dates.","homepage":"https://www.github.com/antonio-goncalves/react-regional-data-display","repository":{"type":"git","url":"git+https://github.com/antonio-goncalves/react-regional-data-display.git"},"bugs":{"url":"https://www.github.com/antonio-goncalves/react-regional-data-display/issues"},"license":"MIT","readme":"# React Regional Data Display\n\nReact components based on [mapbox](https://www.mapbox.com/) used to display quantitative data of geographical regions with support for multiples data sets and dates.\n\n# Install\n\n```shell\nnpm install @antonio-goncalves/react-regional-data-display\n```\n\n# Usage\n\nUsage example using data provided by [Eurostats](https://ec.europa.eu/eurostat).\n\n```tsx\nimport * as React from \"react\";\nimport {ReactRegionalDataDisplay} from \"@antonio-goncalves/react-regional-data-display\";\nimport '@antonio-goncalves/react-regional-data-display/dist/main.css'\n\nimport useSWR from 'swr'\nimport axios from 'axios'\n\n\nconst center = {\n lng: 13.9612,\n lat: 57.1004,\n zoom: 2.36\n}\n\nconst fetcher =( url:string )=> axios.get(url).then(res => res.data)\n\nconst MAPBOX_TOKEN=\"your-token\";\n\nexport function DataDisplayWithData(){\n const { data:dataSets, error:dataSetsError } = useSWR('https://preview.antonio-goncalves.com/api/dataSets?ids=gdp,populationDensity', fetcher)\n const { data:regions, error:regionsError } = useSWR('https://preview.antonio-goncalves.com/api/regions/eurostatCountries10m?ids=BE,BG,CZ,DK,DE,EE,IE,EL,ES,FR,HR,IT,CY,LV,LT,LU,HU,MT,NL,AT,PL,PT,RO,SI,SK,FI,SE,IS,LI,NO,CH,UK,ME,MK,AL,RS,TR', fetcher)\n\n if(dataSetsError || regionsError){\n const errors = []\n if(dataSetsError){\n errors.push(

Error when fetching data sets: {dataSetsError.message}

)\n }\n if(regionsError){\n errors.push(

Error when fetching regions: {regionsError.message}

)\n }\n return <>\n {errors.map((el,i)=>(\n el\n ))}\n \n }\n\n return (\n \n )\n\n\n}\n```\n\n# Components\n\nReact component provided by this library.\n\n## ReactRegionalDataDisplay\n\nMain component providing the map visualizer, data info, data set and date selection.\n\n### Properties\n\n| Name | Type | Is Optional | Default Value | Description |\n|-----------------------|------------------|-------------|---------------------------|-----------------------------------------------------------------------------------------------------------------|\n| dataSets | DataSet[] | no | | Data sets available on the component. | \n| regions | Region[] | no | | GeoJSON data of regions available on the map. |\n| center | Center | yes | {
   zoom:1,
    lng:0,
    lat:0
} | Center position and zoom. |\n| mapBoxToken | string | no | | Access token required to use mapbox. |\n| mapHeight | string or number | yes | 500 | Height of the map, use a number of \"px\" or a sring for a css value. |\n| mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor. |\n| onDataSetChange | (dataSetId:string)=>void| yes | | Fired when a new data set is selected. |\n| className | string | yes | | Custom class for the container. |\n| sliderClassName | string | yes | | Custom class for the slider element. |\n| dropdownClassName | string | yes | | Custom class for the dropdown element. |\n| placeholderClassName | string | yes | | Custom class for the placeholder text. |\n| mapContainerClassName | string | yes | | Custom class for map container. |\n| style | object | yes | | Custom style for the container. |\n| sliderStyle | object | yes | | Custom style for the slider element. |\n| dropdownStyle | object | yes | | Custom style for the dropdown element. |\n| placeholderStyle | object | yes | | Custom style for the placeholder text. |\n| mapContainerStyle | object | yes | | Custom style for map container. |\n\n## RegionsMap\n\nMap component used on this project, can be used as a standalone component if date and data set selection is not required.\n\n### Properties\n\n| Name | Type | Is Optional | Default Value | Description |\n|----------------|----------------------|--------|---------------|----------------------------------------------------------------------------------------------------------------|\n| regionsData | RegionData[] or null | no | | Data value for each region. | \n| regions | Region[] | no | | GeoJSON data of regions available on the map. |\n| center | Center | yes | {
   zoom:1,
    lng:0,
    lat:0
} | Center position and zoom. |\n| mapBoxToken | string | no | | Access token required to use mapbox. |\n| mapHeight | string or number | yes | 500 | Height of the map, use a number of \"px\" or a sring for a css value. |\n| mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor. |\n| scale | Scale | no | | Scale used by the map. |\n| footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. |\n| unit | Unit | no | | Unit of the data showed on the map. |\n| dropdownClassName | string | yes | | Custom class for the dropdown element. |\n| mapContainerClassName | string | yes | | Custom class for the map container. |\n| mapContainerStyle | object | yes | | Custom style for the map container. |\n\n## Scale\n\nColoured scale used on the map\n\n### Properties \n\n| Name | Type | Is Optional | Default Value | Description |\n|-------------|---------|--------|---------------|--------------------------------------|\n| value | DataScale | no | | Numeric intervals and colors. | \n| unit | Unit | no | | Unit showed on the label. |\n| onMouseOver | (value?: ScaleInterval)=>void | no | | Mouse over event for each scale area. |\n\n## Slider\n\nAnimated slider used for date selection.\n\n### Properties\n\n| Name | Type | Is Optional | Default Value | Description |\n|-------------|-----------------------|-------------|---------------|------------------------------------------------------------|\n| value | number | no | | Current selection of the scale. | \n| values | SliderValue[] | no | | Available values. |\n| timeBetweenJumps | number | yes | 1000 | Time in ms between between selection when in animated mode is enabled. |\n| onChange | (value: number)=>void | no | | Event when fired when the value changes | \n| className | string | yes | | Custom class for the slider. |\n| style | object | yes | | Custom style for the slider. |\n\n# Structures\n\nData structures used on this project.\n\n## DataSet\n\nObject describing a data set.\n\n| Name | Type | Is Optional | Default Value | Description |\n|-------------|---------------|-------------|---------------|-----------------------------------------------------------------------|\n| id | string | no | | Id of the data set. |\n| name | string | no | | Name of the data set. |\n| description | string | no | | Description of the data set. |\n| center | Center | no | | Position and zoom of the map (overrides \"center\" property of the map). |\n| source | DataSetSource | no | | Source of the data. |\n| dates | DataSetDates | no | | Dates of the data set. |\n| unit | Unit | no | | Unit of the data set. |\n| scale | DataScale | no | | Scale info for the data set. |\n| data | RegionData[] or null | no | | Data values for each region. | \n| footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. |\n\n## Center\n\nObject describing the center position and zoom on the map.\n\n| Name | Type | Is Optional | Default Value | Description |\n|------|--------|-------------|----------------------|-----------------|\n| lat | number | no | | Latitude value. |\n| lng | number | no | | Longitude value. |\n| zoom | number | no | | [Zoom level](https://docs.mapbox.com/help/glossary/zoom-level/). |\n\n## DataSetSource\n\nObject describing the source of the data\n\n| Name | Type | Is Optional | Default Value | Description |\n|------|--------|-------------|----------------------|-----------------------------------------------------------------|\n| name | string | no | | Name of the source. |\n| url | string | no | | Url of the source. |\n\n## DataSetDates\n\nObject describing the dates available on the data set\n\n| Name | Type | Is Optional | Default Value | Description |\n|------------|----------|-------------|----------------------|------------------------------------------------------------------------------------------|\n| format | string | no | | [Format](https://momentjs.com/docs/#/parsing/string-format/) on how to display the dates. |\n| timestamps | number[] | no | | Values of the timestamps in ms. |\n\n\n## Unit\n\nObject describing the unit\n\n| Name | Type | Is Optional | Default Value | Description |\n|--------|--------|-------------|----------------------|----------------------|\n| name | string | no | | Name of the unit. |\n| symbol | string | no | | Symbol of the unit. |\n\n## DataScale\n\nObject describing the scale used on the map\n\n| Name | Type | Is Optional | Default Value | Description |\n|------------|----------|-------------|----------------------|--------------------------|\n| startValue | number | no | | First value of the scale. |\n| steps | number[] | no | | Values for each step. |\n| colors | string[] | no | | Color of each step. |\n\n\n## RegionData\n\nObject describing the data for each region\n\n| Name | Type | Is Optional | Default Value | Description |\n|---------------|----------|-------------|----------------------|----------------------|\n| dateTimestamp | number | no | | Date of the data. |\n| id | string | no | | Id of the region. |\n| value | number | no | | Numeric value of the data. |\n| footnoteIds | string[] | yes | | Ids of the footnotes. |\n\n\n## Footnote\n\nObject describing footnotes available\n\n| Name | Type | Is Optional | Default Value | Description |\n|-------------|----------|-------------|----------------------|----------------------------|\n| id | string | no | | Id of the footnote. |\n| value | string | no | | Text value of the footnote. |\n\n\n## Region\n\nObject containing the contours of a region\n\n| Name | Type | Is Optional | Default Value | Description |\n|---------|---------|-------------|----------------------|---------------------------------------------------|\n| id | string | no | | Id of the region. |\n| name | string | no | | name of the region. |\n| geoJSON | GeoJSON | no | | Contours of the region, GeoJSON (type=\"Feature\"). |\n\n\n## SliderValue\n\n| Name | Type | Is Optional | Default Value | Description |\n|---------|---------|-------------|----------------------|------------------------|\n| label | string | no | | Label of the value. |\n| value | number | no | | Numeric value. |\n\n## ScaleInterval\n\n| Name | Type | Is Optional | Default Value | Description |\n|----------|--------|-------------|----------------------|-------------------|\n| minValue | number | no | | Minimum value. |\n| maxValue | number | no | | Maximum value. |\n| color | string | no | | Color of the area. |\n\n\n","readmeFilename":"README.md"}