Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@datalith/gridmap
Advanced tools
@datalith/gridmap - npm Package Compare versions
Comparing version 0.2.0 to 0.3.0
@@ -29,6 +29,4 @@ var __extends = (this && this.__extends) || (function () { | ||
| import { scaleLinear } from 'd3-scale'; | ||
| import { groupBy, map, sum } from 'lodash'; | ||
| import * as React from 'react'; | ||
| import Tooltip from 'react-tooltip'; | ||
| import { flatGeometry, isPointInsidePolygon } from '../../utils/geometry'; | ||
| import gridMap from '../../utils/gridMap'; | ||
@@ -51,27 +49,4 @@ var DEFAULT_COLOR = '#000000'; | ||
| } | ||
| GridMap.prototype.getFeatureIdToValues = function (data, featureIdToDatum) { | ||
| var _a = this.props, featureCollection = _a.featureCollection, coordsAccessor = _a.coords, value = _a.value; | ||
| var featureIdToValuesFlat = []; | ||
| // get flat featureId to value map and set featureIdToDatum | ||
| featureCollection.features.forEach(function (f) { | ||
| var res = data.find(function (d, i) { | ||
| var coords = callOrGetValue(coordsAccessor, d, i); | ||
| return isPointInsidePolygon([coords[0], coords[1]], flatGeometry(f.geometry)); | ||
| }); | ||
| if (res && f.id) { | ||
| featureIdToDatum.set(f.id.toString(), res); | ||
| featureIdToValuesFlat.push([f.id.toString(), callOrGetValue(value, res)]); | ||
| } | ||
| }); | ||
| // aggregate values with same featureId | ||
| var featureIdToValues = map(groupBy(featureIdToValuesFlat, function (d) { return d[0]; }), function (d, k) { return [ | ||
| k, | ||
| sum(d.map(function (a) { return a[1]; })), | ||
| ]; }); | ||
| return new Map(featureIdToValues); | ||
| }; | ||
| GridMap.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, data = _a.data, value = _a.value, color = _a.color, featureCollection = _a.featureCollection, projection = _a.projection, width = _a.width, side = _a.side, height = _a.height, fill = _a.fill, stroke = _a.stroke, tooltip = _a.tooltip, customRender = _a.customRender; | ||
| var featureIdToDatum = new Map(); | ||
| var featureIdToValues = this.getFeatureIdToValues(data, featureIdToDatum); | ||
| var _a = this.props, className = _a.className, style = _a.style, data = _a.data, coords = _a.coords, value = _a.value, color = _a.color, featureCollection = _a.featureCollection, projection = _a.projection, width = _a.width, side = _a.side, height = _a.height, fill = _a.fill, stroke = _a.stroke, tooltip = _a.tooltip, customRender = _a.customRender; | ||
| var gridMapData = gridMap({ | ||
@@ -82,3 +57,5 @@ width: width, | ||
| projection: projection, | ||
| data: featureIdToValues, | ||
| data: data, | ||
| coords: coords, | ||
| value: value, | ||
| featureCollection: featureCollection, | ||
@@ -93,5 +70,4 @@ }); | ||
| return (React.createElement(React.Fragment, null, | ||
| React.createElement("svg", { className: className, width: width, height: height }, | ||
| React.createElement("svg", { className: className, style: style, width: width, height: height }, | ||
| React.createElement("g", null, gridMapData.map(function (d, i) { | ||
| var datum = featureIdToDatum.get(d.featureId); | ||
| var dimension = yScale(Math.sqrt(callOrGetValue(value, d))); | ||
@@ -101,6 +77,6 @@ var defaultRender = function (props) { return React.createElement("circle", __assign({ cx: d.x, cy: d.y, r: dimension }, props)); }; | ||
| ? function (props) { | ||
| return customRender({ x: d.x, y: d.y, i: d.i, j: d.j, value: dimension, datum: datum }, props); | ||
| return customRender({ x: d.x, y: d.y, i: d.i, j: d.j, value: dimension, datum: d.datum }, props); | ||
| } | ||
| : defaultRender; | ||
| return (React.createElement(VisualElement, { datum: datum, color: color, key: i, fill: fill, stroke: stroke, tooltip: tooltip, render: render })); | ||
| return (React.createElement(VisualElement, { datum: d.datum, color: color, key: i, fill: fill, stroke: stroke, tooltip: tooltip, render: render })); | ||
| }))), | ||
@@ -107,0 +83,0 @@ React.createElement(Tooltip, { html: true }))); |
@@ -8,2 +8,4 @@ import { Color, Coords, Datum, Value } from '@datalith/util'; | ||
| className?: string; | ||
| /** Custom style object to apply to the SVG */ | ||
| style?: React.CSSProperties; | ||
| /** Width of the SVG */ | ||
@@ -45,4 +47,3 @@ width: number; | ||
| static defaultProps: Partial<GridMapProps>; | ||
| getFeatureIdToValues(data: Datum[], featureIdToDatum: Map<string, Datum>): Map<string, number>; | ||
| render(): JSX.Element; | ||
| } |
@@ -1,3 +0,1 @@ | ||
| import { Geometry } from 'geojson'; | ||
| export declare function isPointInsidePolygon(point: [number, number], polygon: number[][]): boolean; | ||
| export declare function flatGeometry(geometry: Geometry): Array<[number, number]>; |
@@ -0,1 +1,2 @@ | ||
| import { Coords, Datum, Value } from '@datalith/util'; | ||
| import { GeoProjection } from 'd3-geo'; | ||
@@ -5,3 +6,5 @@ import { FeatureCollection } from 'geojson'; | ||
| projection: GeoProjection; | ||
| data: Map<string | number, number>; | ||
| data: Datum[]; | ||
| coords: Coords; | ||
| value: Value; | ||
| featureCollection: FeatureCollection; | ||
@@ -14,3 +17,3 @@ isDensity?: boolean; | ||
| } | ||
| export default function gridMap({ projection, data, featureCollection, isDensity, width, height, side, key, }: GridMapConfig): { | ||
| export default function gridMap({ projection, data, coords: coordsAccessor, value: valueAccessor, featureCollection, isDensity, width, height, side, key, }: GridMapConfig): { | ||
| x: number; | ||
@@ -22,3 +25,4 @@ y: number; | ||
| featureId: string; | ||
| datum: any; | ||
| }[]; | ||
| export {}; |
@@ -21,21 +21,2 @@ export function isPointInsidePolygon(point, polygon) { | ||
| } | ||
| export function flatGeometry(geometry) { | ||
| var flattenPolygon = function (coords) { | ||
| return coords.reduce(function (accumulator, currentValue) { | ||
| return accumulator.concat([[0, 0]].concat(currentValue)); | ||
| }); | ||
| }; | ||
| var result = []; | ||
| switch (geometry.type) { | ||
| case 'Polygon': | ||
| result = flattenPolygon(geometry.coordinates); | ||
| break; | ||
| case 'MultiPolygon': | ||
| result = flattenPolygon(geometry.coordinates.map(function (coordinates) { return flattenPolygon(coordinates); })); | ||
| break; | ||
| default: | ||
| throw new Error("Found incompatible 'geometry.type' for GeoJson: Type '" + geometry.type + "' is not supported"); | ||
| } | ||
| return [[0, 0]].concat(result.concat([[0, 0]])); | ||
| } | ||
| //# sourceMappingURL=geometry.js.map |
@@ -0,4 +1,20 @@ | ||
| import { callOrGetValue } from '@datalith/util'; | ||
| import flatten from '@turf/flatten'; | ||
| import { sum } from 'd3-array'; | ||
| import { geoPath } from 'd3-geo'; | ||
| import { isPointInsidePolygon } from './geometry'; | ||
| function getFeatureIdToValues(data, feature, featureIdToValues, featureIdToDatum, coordsAccessor, valueAccessor) { | ||
| var res = data.find(function (d, i) { | ||
| var coords = callOrGetValue(coordsAccessor, d, i); | ||
| var flattened = flatten(feature); | ||
| var polygon = flattened.features[0].geometry.coordinates[0]; | ||
| return isPointInsidePolygon([coords[0], coords[1]], polygon); | ||
| }); | ||
| if (res && feature.id) { | ||
| var featureIdValue = featureIdToValues.get(feature.id.toString()); | ||
| var value = callOrGetValue(valueAccessor, res); | ||
| featureIdToDatum.set(feature.id.toString(), res); | ||
| featureIdToValues.set(feature.id.toString(), featureIdValue ? featureIdValue + value : value); | ||
| } | ||
| } | ||
| var range = function (left, right, inclusive) { | ||
@@ -28,5 +44,7 @@ var range = []; | ||
| export default function gridMap(_a) { | ||
| var projection = _a.projection, data = _a.data, featureCollection = _a.featureCollection, _b = _a.isDensity, isDensity = _b === void 0 ? true : _b, _c = _a.width, width = _c === void 0 ? 1000 : _c, _d = _a.height, height = _d === void 0 ? 1000 : _d, _e = _a.side, side = _e === void 0 ? 5 : _e, _f = _a.key, key = _f === void 0 ? 'id' : _f; | ||
| var projection = _a.projection, data = _a.data, coordsAccessor = _a.coords, valueAccessor = _a.value, featureCollection = _a.featureCollection, _b = _a.isDensity, isDensity = _b === void 0 ? true : _b, _c = _a.width, width = _c === void 0 ? 1000 : _c, _d = _a.height, height = _d === void 0 ? 1000 : _d, _e = _a.side, side = _e === void 0 ? 5 : _e, _f = _a.key, key = _f === void 0 ? 'id' : _f; | ||
| var grid = new Map(); | ||
| var features = featureCollection.features; | ||
| var featureIdToValues = new Map(); | ||
| var featureIdToDatum = new Map(); | ||
| projection.fitSize([width, height], featureCollection); | ||
@@ -41,2 +59,3 @@ var path = geoPath().projection(projection); | ||
| features.map(function (f, i) { | ||
| getFeatureIdToValues(data, f, featureIdToValues, featureIdToDatum, coordsAccessor, valueAccessor); | ||
| var g = f.geometry; | ||
@@ -95,6 +114,6 @@ if (g.type === 'Polygon' || g.type === 'MultiPolygon') { | ||
| if (isDensity) { | ||
| num = sum(keys.map(function (j) { return data.get(j) * area.get(j); })); | ||
| num = sum(keys.map(function (j) { return featureIdToValues.get(j) * area.get(j); })); | ||
| } | ||
| else { | ||
| num = sum(keys.map(function (j) { return data.get(j); })); | ||
| num = sum(keys.map(function (j) { return featureIdToValues.get(j); })); | ||
| } | ||
@@ -118,4 +137,5 @@ var den = sum(keys.map(function (j) { return area.get(j); })); | ||
| featureId: d.featureId, | ||
| datum: featureIdToDatum.get(d.featureId), | ||
| }); }); | ||
| } | ||
| //# sourceMappingURL=gridMap.js.map |
| { | ||
| "name": "@datalith/gridmap", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "description": "datalith gridmap", | ||
@@ -33,3 +33,4 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@datalith/util": "^0.2.0", | ||
| "@datalith/util": "^0.3.0", | ||
| "@turf/flatten": "^5.1.5", | ||
| "d3-array": "^2.1.0", | ||
@@ -62,3 +63,3 @@ "d3-geo": "^1.11.3", | ||
| }, | ||
| "gitHead": "0105e6e2ec377fea191acb01fa842d7758ce200f" | ||
| "gitHead": "1ab7d4432489fccae0fdbe4e2f250753cfc96062" | ||
| } |
@@ -11,44 +11,47 @@ # @datalith/gridmap | ||
| | Name | Default | Type | Description | | ||
| | :-------------------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | <b>featureCollection \*</b> | | `FeatureCollection` | GeoJson object | | ||
| | projection | `geoNaturalEarth1()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} /> ` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | | ||
| | Name | Default | Type | Description | | ||
| | :-------------------------- | :----------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | style | | `React.CSSProperties` | Custom style object to apply to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | <b>featureCollection \*</b> | | `FeatureCollection` | GeoJson object | | ||
| | projection | `geoNaturalEarth1()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} />` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | | ||
| # \<GridMapUs \/> | ||
| | Name | Default | Type | Description | | ||
| | :--------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | projection | `geoAlbersUsa()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} /> ` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | | ||
| | Name | Default | Type | Description | | ||
| | :--------------- | :----------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | style | | `React.CSSProperties` | Custom style object to apply to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | projection | `geoAlbersUsa()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} />` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | | ||
| # \<GridMapWorld \/> | ||
| | Name | Default | Type | Description | | ||
| | :--------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | projection | `geoNaturalEarth1()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} /> ` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | | ||
| | Name | Default | Type | Description | | ||
| | :--------------- | :----------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | `string` | Custom css classes to pass to the SVG | | ||
| | style | | `React.CSSProperties` | Custom style object to apply to the SVG | | ||
| | <b>width \*</b> | | `number` | Width of the SVG | | ||
| | <b>height \*</b> | | `number` | Height of the SVG | | ||
| | <b>data \*</b> | | `Array<Datum>` or `Array<[number, number]>` | Array of data | | ||
| | projection | `geoNaturalEarth1()` | `GeoProjection` | D3 GeoProjection to map coordinates | | ||
| | customRender | `props => <circle cx={d.x} cy={d.y} r={value} {...props} />` | `(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element` | Return custom element to render as data point | | ||
| | side | `5` | `number` | Grid cell dimension | | ||
| | fill | `true` | `boolean` | Whether to add the fill color | | ||
| | stroke | `false` | `boolean` | Whether to add the stroke color | | ||
| | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | |
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
- Number of lines in readme file
- increased by5.56%
57
Worsened metrics
- Total package byte prevSize
- decreased by-0.16%
919569
- Dependency count
- increased by11.11%
10
- Lines of code
- decreased by-0.18%
11219
Dependency changes
+ Added@turf/flatten@^5.1.5
+ Added@datalith/util@0.3.0(transitive)
+ Added@turf/flatten@5.1.5(transitive)
+ Added@turf/helpers@5.1.5(transitive)
+ Added@turf/meta@5.2.0(transitive)
- Removed@datalith/util@0.2.0(transitive)
Updated@datalith/util@^0.3.0