Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@antonio-goncalves/react-regional-data-display-test
Advanced tools
@antonio-goncalves/react-regional-data-display-test - npm Package Compare versions
Comparing version 1.0.3 to 1.0.4
@@ -9,2 +9,5 @@ # Changelog | ||
| ## [1.0.4] - 2022-10-12 | ||
| - Added testing | ||
| ## [1.0.3] - 2022-10-11 | ||
@@ -11,0 +14,0 @@ - Added blank target to the source |
@@ -121,3 +121,3 @@ var $8zHUo$reactjsxruntime = require("react/jsx-runtime"); | ||
| }, ()=>{ | ||
| this.props.onChange(value); | ||
| this.props.onChange?.(value); | ||
| }); | ||
@@ -194,6 +194,6 @@ } | ||
| onMouseLeave: ()=>{ | ||
| onMouseOver(); | ||
| onMouseOver?.(); | ||
| }, | ||
| onMouseEnter: ()=>{ | ||
| onMouseOver(scaleInterval); | ||
| onMouseOver?.(scaleInterval); | ||
| }, | ||
@@ -265,4 +265,2 @@ style: { | ||
| this.map = null; | ||
| ///@ts-ignore | ||
| window.map = this; | ||
| this.getFeatureFromRegion = this.getFeatureFromRegion.bind(this); | ||
@@ -282,2 +280,6 @@ this.onScaleIntervalOver = this.onScaleIntervalOver.bind(this); | ||
| } | ||
| checkProps() { | ||
| const { mapBoxToken: mapBoxToken , regionsData: regionsData , regions: regions , scale: scale , unit: unit } = this.props; | ||
| return !!mapBoxToken && !!regionsData && !!regions && !!scale && !!unit; | ||
| } | ||
| componentWillUnmount() { | ||
@@ -288,2 +290,3 @@ this.map?.remove(); | ||
| componentDidMount() { | ||
| if (!this.checkProps()) return; | ||
| if (this.ref.current === null) return; | ||
@@ -360,2 +363,3 @@ const { lng: lng , lat: lat , zoom: zoom } = this.state; | ||
| componentDidUpdate(prevProps, prevState, snapshot) { | ||
| if (!this.checkProps()) return; | ||
| if (prevProps.center !== this.props.center) this.setState(this.props.center, ()=>{ | ||
@@ -399,2 +403,3 @@ if (this.map === null) return; | ||
| shouldComponentUpdate(nextProps, nextState, nextContext) { | ||
| if (!this.checkProps()) return false; | ||
| if (this.state.hoveredRegionIds !== nextState.hoveredRegionIds) this.setMapHover(false); | ||
@@ -530,2 +535,3 @@ return true; | ||
| render() { | ||
| if (!this.checkProps()) return null; | ||
| return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", { | ||
@@ -532,0 +538,0 @@ children: [ |
@@ -110,3 +110,3 @@ import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs, Fragment as $hgUW1$Fragment} from "react/jsx-runtime"; | ||
| }, ()=>{ | ||
| this.props.onChange(value); | ||
| this.props.onChange?.(value); | ||
| }); | ||
@@ -183,6 +183,6 @@ } | ||
| onMouseLeave: ()=>{ | ||
| onMouseOver(); | ||
| onMouseOver?.(); | ||
| }, | ||
| onMouseEnter: ()=>{ | ||
| onMouseOver(scaleInterval); | ||
| onMouseOver?.(scaleInterval); | ||
| }, | ||
@@ -254,4 +254,2 @@ style: { | ||
| this.map = null; | ||
| ///@ts-ignore | ||
| window.map = this; | ||
| this.getFeatureFromRegion = this.getFeatureFromRegion.bind(this); | ||
@@ -271,2 +269,6 @@ this.onScaleIntervalOver = this.onScaleIntervalOver.bind(this); | ||
| } | ||
| checkProps() { | ||
| const { mapBoxToken: mapBoxToken , regionsData: regionsData , regions: regions , scale: scale , unit: unit } = this.props; | ||
| return !!mapBoxToken && !!regionsData && !!regions && !!scale && !!unit; | ||
| } | ||
| componentWillUnmount() { | ||
@@ -277,2 +279,3 @@ this.map?.remove(); | ||
| componentDidMount() { | ||
| if (!this.checkProps()) return; | ||
| if (this.ref.current === null) return; | ||
@@ -349,2 +352,3 @@ const { lng: lng , lat: lat , zoom: zoom } = this.state; | ||
| componentDidUpdate(prevProps, prevState, snapshot) { | ||
| if (!this.checkProps()) return; | ||
| if (prevProps.center !== this.props.center) this.setState(this.props.center, ()=>{ | ||
@@ -388,2 +392,3 @@ if (this.map === null) return; | ||
| shouldComponentUpdate(nextProps, nextState, nextContext) { | ||
| if (!this.checkProps()) return false; | ||
| if (this.state.hoveredRegionIds !== nextState.hoveredRegionIds) this.setMapHover(false); | ||
@@ -519,2 +524,3 @@ return true; | ||
| render() { | ||
| if (!this.checkProps()) return null; | ||
| return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", { | ||
@@ -521,0 +527,0 @@ children: [ |
@@ -97,3 +97,3 @@ import { Feature, GeoJsonProperties, Geometry, FeatureCollection } from "geojson"; | ||
| timeBetweenJumps?: number; | ||
| onChange: (value: number) => void; | ||
| onChange?: (value: number) => void; | ||
| className?: string; | ||
@@ -123,3 +123,3 @@ style?: React.CSSProperties; | ||
| unit: Unit; | ||
| onMouseOver: (value?: ScaleInterval) => void; | ||
| onMouseOver?: (value?: ScaleInterval) => void; | ||
| } | ||
@@ -162,2 +162,3 @@ export interface ScaleInterval { | ||
| constructor(props: RegionsMapProps | Readonly<RegionsMapProps>); | ||
| checkProps(): boolean; | ||
| componentWillUnmount(): void; | ||
@@ -177,3 +178,3 @@ componentDidMount(): void; | ||
| onScaleIntervalOver(scaleInterval?: ScaleInterval): void; | ||
| render(): JSX.Element; | ||
| render(): JSX.Element | null; | ||
| } | ||
@@ -180,0 +181,0 @@ export const ReactRegionalDataDisplay: FunctionComponent<RegionalDataDisplayProps>; |
| { | ||
| "name": "@antonio-goncalves/react-regional-data-display-test", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "source": "src/index.ts", |
219
README.md
| # React Regional Data Display | ||
| React component based on [mapbox](https://www.mapbox.com/) providing an easy way to show regional data with support for different data sets, dates and geographical locations. | ||
| React component based on [mapbox](https://www.mapbox.com/) used to display quantitative data of geographical regions with support for multiples data sets and dates. | ||
@@ -11,9 +11,64 @@ # Install | ||
| # Usage | ||
| Usage example using data provided by [Eurostats](https://ec.europa.eu/eurostat). | ||
| ```tsx | ||
| import * as React from "react"; | ||
| import {ReactRegionalDataDisplay} from "@antonio-goncalves/react-regional-data-display"; | ||
| import '@antonio-goncalves/react-regional-data-display/dist/main.css' | ||
| import useSWR from 'swr' | ||
| import axios from 'axios' | ||
| const center = { | ||
| lng: 13.9612, | ||
| lat: 57.1004, | ||
| zoom: 2.36 | ||
| } | ||
| const fetcher =( url:string )=> axios.get(url).then(res => res.data) | ||
| const MAPBOX_TOKEN="your-token"; | ||
| export function DataDisplayWithData(){ | ||
| const { data:dataSets, error:dataSetsError } = useSWR('https://preview.antonio-goncalves.com/api/dataSets?ids=gdp,populationDensity', fetcher) | ||
| 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) | ||
| if(dataSetsError || regionsError){ | ||
| const errors = [] | ||
| if(dataSetsError){ | ||
| errors.push(<p style={{color:"red"}}>Error when fetching data sets: {dataSetsError.message}</p>) | ||
| } | ||
| if(regionsError){ | ||
| errors.push(<p style={{color:"red"}}>Error when fetching regions: {regionsError.message}</p>) | ||
| } | ||
| return <> | ||
| {errors.map((el,i)=>( | ||
| el | ||
| ))} | ||
| </> | ||
| } | ||
| return ( | ||
| <ReactRegionalDataDisplay | ||
| dataSets={dataSets} | ||
| regions={regions} | ||
| mapBoxToken={MAPBOX_TOKEN} | ||
| center={center} | ||
| /> | ||
| ) | ||
| } | ||
| ``` | ||
| # Components | ||
| React component provided by this library. | ||
| ## ReactRegionalDataDisplay | ||
| Main component providing the map visualizer, data set and date selection. | ||
| Main component providing the map visualizer, data info, data set and date selection. | ||
@@ -24,23 +79,23 @@ ### Properties | ||
| |-----------------------|------------------|-------------|---------------------------|----------------------------------------------------------------------------------------------------------------| | ||
| | dataSets | DataSet[] | no | | Data sets containing values for each region. | | ||
| | regions | Region[] | no | | GeoJSON data of regions that should be included on the map | | ||
| | center | Center | yes | {<br/> zoom:1,<br/> lng:0,<br/> lat:0<br/>} | Map position and zoom | | ||
| | mapBoxToken | string | no | | Access token required to use mapbox | | ||
| | mapHeight | string or number | yes | 500 | Height of the map | | ||
| | mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor | | ||
| | onDataSetChange | (dataSetId:string)=>void| yes | | Fired when a new data set is selected | | ||
| | className | string | yes | | Custom class for the container | | ||
| | sliderClassName | string | yes | | Custom class for the slider element | | ||
| | dropdownClassName | string | yes | | Custom class for the dropdown element | | ||
| | placeholderClassName | string | yes | | Custom class for the placeholder text | | ||
| | mapContainerClassName | string | yes | | Custom class for map container | | ||
| | style | object | yes | | Custom style for the container | | ||
| | sliderStyle | object | yes | | Custom style for the slider element | | ||
| | dropdownStyle | object | yes | | Custom style for the dropdown element | | ||
| | placeholderStyle | object | yes | | Custom style for the placeholder text | | ||
| | mapContainerStyle | object | yes | | Custom style for map container | | ||
| | dataSets | DataSet[] | no | | Data sets available on the component. | | ||
| | regions | Region[] | no | | GeoJSON data of regions available on the map. | | ||
| | center | Center | yes | {<br/> zoom:1,<br/> lng:0,<br/> lat:0<br/>} | Center position and zoom. | | ||
| | mapBoxToken | string | no | | Access token required to use mapbox. | | ||
| | mapHeight | string or number | yes | 500 | Height of the map, use a number of "px" or a sring for a css value. | | ||
| | mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor. | | ||
| | onDataSetChange | (dataSetId:string)=>void| yes | | Fired when a new data set is selected. | | ||
| | className | string | yes | | Custom class for the container. | | ||
| | sliderClassName | string | yes | | Custom class for the slider element. | | ||
| | dropdownClassName | string | yes | | Custom class for the dropdown element. | | ||
| | placeholderClassName | string | yes | | Custom class for the placeholder text. | | ||
| | mapContainerClassName | string | yes | | Custom class for map container. | | ||
| | style | object | yes | | Custom style for the container. | | ||
| | sliderStyle | object | yes | | Custom style for the slider element. | | ||
| | dropdownStyle | object | yes | | Custom style for the dropdown element. | | ||
| | placeholderStyle | object | yes | | Custom style for the placeholder text. | | ||
| | mapContainerStyle | object | yes | | Custom style for map container. | | ||
| ## RegionsMap | ||
| Map component used on this project | ||
| Map component used on this project, can be used as a standalone component if date and data set selection is not required. | ||
@@ -51,14 +106,14 @@ ### Properties | ||
| |----------------|----------------------|--------|---------------|----------------------------------------------------------------------------------------------------------------| | ||
| | regionsData | RegionData[] or null | no | | Data value for each region | | ||
| | regions | Region[] | no | | GeoJSON data of regions that should be included on the map | | ||
| | center | Center | yes | {<br/> zoom:1,<br/> lng:0,<br/> lat:0<br/>} | Map position and zoom | | ||
| | mapBoxToken | string | no | | Access token required to use mapbox | | ||
| | mapHeight | string or number | yes | 500 | Height of the map | | ||
| | mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor | | ||
| | scale | Scale | no | | Scale used by the map | | ||
| | footnotes | Footnote[] | yes | | Footnotes texts used by data points | | ||
| | unit | Unit | no | | Unit of the data showed on the map | | ||
| | dropdownClassName | string | yes | | Custom class for the dropdown element | | ||
| | mapContainerClassName | string | yes | | Custom class for the map container | | ||
| | mapContainerStyle | object | yes | | Custom style for the map container | | ||
| | regionsData | RegionData[] or null | no | | Data value for each region. | | ||
| | regions | Region[] | no | | GeoJSON data of regions available on the map. | | ||
| | center | Center | yes | {<br/> zoom:1,<br/> lng:0,<br/> lat:0<br/>} | Center position and zoom. | | ||
| | mapBoxToken | string | no | | Access token required to use mapbox. | | ||
| | mapHeight | string or number | yes | 500 | Height of the map, use a number of "px" or a sring for a css value. | | ||
| | mapBoxOptions | object | yes | | Extra [options](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) passed to the mapbox constructor. | | ||
| | scale | Scale | no | | Scale used by the map. | | ||
| | footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. | | ||
| | unit | Unit | no | | Unit of the data showed on the map. | | ||
| | dropdownClassName | string | yes | | Custom class for the dropdown element. | | ||
| | mapContainerClassName | string | yes | | Custom class for the map container. | | ||
| | mapContainerStyle | object | yes | | Custom style for the map container. | | ||
@@ -73,9 +128,9 @@ ## Scale | ||
| |-------------|---------|--------|---------------|--------------------------------------| | ||
| | value | DataScale | no | | Numeric intervals and colors | | ||
| | unit | Unit | no | | Unit showed on the label | | ||
| | onMouseOver | (value?: ScaleInterval)=>void | no | | Mouse over event for each scale area | | ||
| | value | DataScale | no | | Numeric intervals and colors. | | ||
| | unit | Unit | no | | Unit showed on the label. | | ||
| | onMouseOver | (value?: ScaleInterval)=>void | no | | Mouse over event for each scale area. | | ||
| ## Slider | ||
| Animated slider used for date selection | ||
| Animated slider used for date selection. | ||
@@ -86,39 +141,39 @@ ### Properties | ||
| |-------------|-----------------------|-------------|---------------|------------------------------------------------------------| | ||
| | value | number | no | | Current selection of the scale | | ||
| | values | SliderValue[] | no | | Available values | | ||
| | timeBetweenJumps | number | yes | 1000 | Time in ms between between selection when in animated mode | | ||
| | onChange | (value: number)=>void | no | | Current selection of the scale | | ||
| | className | string | yes | | Custom class for the slider | | ||
| | onMouseOver | object | yes | | Custom style for the slider | | ||
| | value | number | no | | Current selection of the scale. | | ||
| | values | SliderValue[] | no | | Available values. | | ||
| | timeBetweenJumps | number | yes | 1000 | Time in ms between between selection when in animated mode is enabled. | | ||
| | onChange | (value: number)=>void | no | | Event when fired when the value changes | | ||
| | className | string | yes | | Custom class for the slider. | | ||
| | style | object | yes | | Custom style for the slider. | | ||
| # Structures | ||
| Data structures used on this project | ||
| Data structures used on this project. | ||
| ## DataSet | ||
| Object describing a data set | ||
| Object describing a data set. | ||
| | Name | Type | Is Optional | Default Value | Description | | ||
| |-------------|---------------|-------------|---------------|-----------------------------------------------------------------------| | ||
| | id | string | no | | Id of the data set | | ||
| | name | string | no | | Name of the data set | | ||
| | description | string | no | | Description of the data set | | ||
| | center | Center | no | | Position and zoom of the map (overrides "center" property of the map) | | ||
| | source | DataSetSource | no | | Source of the data | | ||
| | dates | DataSetDates | no | | Dates of the data set | | ||
| | unit | Unit | no | | Unit of the data set | | ||
| | scale | DataScale | no | | Scale info for the data set | | ||
| | data | RegionData[] or null | no | | Data value for each region | | ||
| | footnotes | Footnote[] | yes | | Footnotes texts used by data points | | ||
| | id | string | no | | Id of the data set. | | ||
| | name | string | no | | Name of the data set. | | ||
| | description | string | no | | Description of the data set. | | ||
| | center | Center | no | | Position and zoom of the map (overrides "center" property of the map). | | ||
| | source | DataSetSource | no | | Source of the data. | | ||
| | dates | DataSetDates | no | | Dates of the data set. | | ||
| | unit | Unit | no | | Unit of the data set. | | ||
| | scale | DataScale | no | | Scale info for the data set. | | ||
| | data | RegionData[] or null | no | | Data values for each region. | | ||
| | footnotes | Footnote[] | yes | | Footnotes texts available to be used by data points. | | ||
| ## Center | ||
| Object describing the position of the map | ||
| Object describing the center position and zoom on the map. | ||
| | Name | Type | Is Optional | Default Value | Description | | ||
| |------|--------|-------------|----------------------|-----------------| | ||
| | lat | number | no | | Latitude value | | ||
| | lng | number | no | | Longitude value | | ||
| | zoom | number | no | | [Zoom level](https://docs.mapbox.com/help/glossary/zoom-level/) | | ||
| | lat | number | no | | Latitude value. | | ||
| | lng | number | no | | Longitude value. | | ||
| | zoom | number | no | | [Zoom level](https://docs.mapbox.com/help/glossary/zoom-level/). | | ||
@@ -131,4 +186,4 @@ ## DataSetSource | ||
| |------|--------|-------------|----------------------|-----------------------------------------------------------------| | ||
| | name | string | no | | Name of the source | | ||
| | url | string | no | | Url of the source | | ||
| | name | string | no | | Name of the source. | | ||
| | url | string | no | | Url of the source. | | ||
@@ -141,4 +196,4 @@ ## DataSetDates | ||
| |------------|----------|-------------|----------------------|------------------------------------------------------------------------------------------| | ||
| | format | string | no | | [Format](https://momentjs.com/docs/#/parsing/string-format/) on how to display the dates | | ||
| | timestamps | number[] | no | | Values of the timestamps in ms | | ||
| | format | string | no | | [Format](https://momentjs.com/docs/#/parsing/string-format/) on how to display the dates. | | ||
| | timestamps | number[] | no | | Values of the timestamps in ms. | | ||
@@ -152,4 +207,4 @@ | ||
| |--------|--------|-------------|----------------------|----------------------| | ||
| | name | string | no | | Name of the unit | | ||
| | symbol | string | no | | Symbol of the unit | | ||
| | name | string | no | | Name of the unit. | | ||
| | symbol | string | no | | Symbol of the unit. | | ||
@@ -162,5 +217,5 @@ ## DataScale | ||
| |------------|----------|-------------|----------------------|--------------------------| | ||
| | startValue | number | no | | First value of the scale | | ||
| | steps | number[] | no | | Values for each step | | ||
| | colors | string[] | no | | Color of each step | | ||
| | startValue | number | no | | First value of the scale. | | ||
| | steps | number[] | no | | Values for each step. | | ||
| | colors | string[] | no | | Color of each step. | | ||
@@ -174,9 +229,9 @@ | ||
| |---------------|----------|-------------|----------------------|----------------------| | ||
| | dateTimestamp | number | no | | Date of the data | | ||
| | id | string | no | | Id of the region | | ||
| | value | number | no | | Data point value | | ||
| | footnoteIds | string[] | yes | | Ids of the footnotes | | ||
| | dateTimestamp | number | no | | Date of the data. | | ||
| | id | string | no | | Id of the region. | | ||
| | value | number | no | | Numeric value of the data. | | ||
| | footnoteIds | string[] | yes | | Ids of the footnotes. | | ||
| ## FootNote | ||
| ## Footnote | ||
@@ -187,4 +242,4 @@ Object describing footnotes available | ||
| |-------------|----------|-------------|----------------------|----------------------------| | ||
| | id | string | no | | Id of the footnote | | ||
| | value | string | no | | Text value of the footnote | | ||
| | id | string | no | | Id of the footnote. | | ||
| | value | string | no | | Text value of the footnote. | | ||
@@ -198,5 +253,5 @@ | ||
| |---------|---------|-------------|----------------------|------------------------| | ||
| | id | string | no | | Id of the region | | ||
| | name | string | no | | name of the region | | ||
| | geoJSON | GeoJSON | no | | Contours of the region | | ||
| | id | string | no | | Id of the region. | | ||
| | name | string | no | | name of the region. | | ||
| | geoJSON | GeoJSON | no | | Contours of the region. | | ||
@@ -208,4 +263,4 @@ | ||
| |---------|---------|-------------|----------------------|------------------------| | ||
| | label | string | no | | Label of the value | | ||
| | value | number | no | | Numeric value | | ||
| | label | string | no | | Label of the value. | | ||
| | value | number | no | | Numeric value. | | ||
@@ -216,6 +271,6 @@ ## ScaleInterval | ||
| |----------|--------|-------------|----------------------|-------------------| | ||
| | minValue | number | no | | Minimum value | | ||
| | maxValue | number | no | | Maximum value | | ||
| | color | string | no | | Color of the area | | ||
| | minValue | number | no | | Minimum value. | | ||
| | maxValue | number | no | | Maximum value. | | ||
| | color | string | no | | Color of the area. | | ||
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.33%
315184
- Lines of code
- increased by0.79%
1661
- Number of lines in readme file
- increased by26.44%
263
No dependency changes