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.1.0 to 0.2.0
@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () { | ||
| }; | ||
| import { callOrGetValue } from '@datalith/util'; | ||
| import { max } from 'd3-array'; | ||
@@ -35,5 +36,6 @@ import { geoNaturalEarth1 } from 'd3-geo'; | ||
| var DEFAULT_COLOR = '#000000'; | ||
| var DEFAULT_VALUE = 10; | ||
| var VisualElement = function (_a) { | ||
| var datum = _a.datum, stroke = _a.stroke, fill = _a.fill, tooltip = _a.tooltip, Element = _a.render; | ||
| var color = (datum && datum.z) || DEFAULT_COLOR; | ||
| var datum = _a.datum, colorAccessor = _a.color, stroke = _a.stroke, fill = _a.fill, tooltip = _a.tooltip, Element = _a.render; | ||
| var color = callOrGetValue(colorAccessor, datum); | ||
| var style = { | ||
@@ -51,10 +53,13 @@ fill: fill ? color : 'transparent', | ||
| GridMap.prototype.getFeatureIdToValues = function (data, featureIdToDatum) { | ||
| var featureCollection = this.props.featureCollection; | ||
| 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) { return isPointInsidePolygon([d.v[0], d.v[1]], flatGeometry(f.geometry)); }); | ||
| 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(), res.y]); | ||
| featureIdToValuesFlat.push([f.id.toString(), callOrGetValue(value, res)]); | ||
| } | ||
@@ -70,3 +75,3 @@ }); | ||
| GridMap.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, tooltip = _a.tooltip, data = _a.data, featureCollection = _a.featureCollection, _b = _a.projection, projection = _b === void 0 ? geoNaturalEarth1() : _b, width = _a.width, _c = _a.side, side = _c === void 0 ? 5 : _c, height = _a.height, stroke = _a.stroke, fill = _a.fill, customRender = _a.customRender; | ||
| 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(); | ||
@@ -83,3 +88,3 @@ var featureIdToValues = this.getFeatureIdToValues(data, featureIdToDatum); | ||
| var yScale = scaleLinear() | ||
| .domain([0, max(gridMapData, function (d) { return Math.sqrt(d.value); })]) | ||
| .domain([0, max(gridMapData, function (d, i) { return Math.sqrt(callOrGetValue(value, d, i)); })]) | ||
| .range([1, side * 0.5]); | ||
@@ -93,8 +98,10 @@ // DEBUG | ||
| var datum = featureIdToDatum.get(d.featureId); | ||
| var value = yScale(Math.sqrt(d.value)); | ||
| var defaultRender = function (props) { return React.createElement("circle", __assign({ cx: d.x, cy: d.y, r: value }, props)); }; | ||
| var dimension = yScale(Math.sqrt(callOrGetValue(value, d))); | ||
| var defaultRender = function (props) { return React.createElement("circle", __assign({ cx: d.x, cy: d.y, r: dimension }, props)); }; | ||
| var render = customRender | ||
| ? function (props) { return customRender({ x: d.x, y: d.y, i: d.i, j: d.j, value: value, datum: datum }, props); } | ||
| ? function (props) { | ||
| return customRender({ x: d.x, y: d.y, i: d.i, j: d.j, value: dimension, datum: datum }, props); | ||
| } | ||
| : defaultRender; | ||
| return (React.createElement(VisualElement, { datum: datum, key: i, fill: fill, stroke: stroke, tooltip: tooltip, render: render })); | ||
| return (React.createElement(VisualElement, { datum: datum, color: color, key: i, fill: fill, stroke: stroke, tooltip: tooltip, render: render })); | ||
| }))), | ||
@@ -104,4 +111,7 @@ React.createElement(Tooltip, { html: true }))); | ||
| GridMap.defaultProps = { | ||
| value: DEFAULT_VALUE, | ||
| color: DEFAULT_COLOR, | ||
| coords: function (d) { return d; }, | ||
| fill: true, | ||
| stroke: false, | ||
| fill: true, | ||
| side: 5, | ||
@@ -108,0 +118,0 @@ projection: geoNaturalEarth1(), |
@@ -14,2 +14,13 @@ var __extends = (this && this.__extends) || (function () { | ||
| })(); | ||
| var __assign = (this && this.__assign) || function () { | ||
| __assign = Object.assign || function(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
| t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| import { geoAlbersUsa } from 'd3-geo'; | ||
@@ -28,5 +39,5 @@ import * as React from 'react'; | ||
| GridMapUs.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, tooltip = _a.tooltip, data = _a.data, _b = _a.projection, projection = _b === void 0 ? geoAlbersUsa() : _b, width = _a.width, side = _a.side, height = _a.height, stroke = _a.stroke, fill = _a.fill, customRender = _a.customRender; | ||
| return (React.createElement(GridMap, { className: className, width: width, height: height, side: side, data: data, featureCollection: usAtlas, projection: projection, stroke: stroke, fill: fill, customRender: customRender, tooltip: tooltip })); | ||
| return React.createElement(GridMap, __assign({}, this.props, { featureCollection: usAtlas, projection: geoAlbersUsa() })); | ||
| }; | ||
| GridMapUs.defaultProps = GridMap.defaultProps; | ||
| return GridMapUs; | ||
@@ -33,0 +44,0 @@ }(React.Component)); |
@@ -14,2 +14,13 @@ var __extends = (this && this.__extends) || (function () { | ||
| })(); | ||
| var __assign = (this && this.__assign) || function () { | ||
| __assign = Object.assign || function(t) { | ||
| for (var s, i = 1, n = arguments.length; i < n; i++) { | ||
| s = arguments[i]; | ||
| for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) | ||
| t[p] = s[p]; | ||
| } | ||
| return t; | ||
| }; | ||
| return __assign.apply(this, arguments); | ||
| }; | ||
| import * as React from 'react'; | ||
@@ -27,5 +38,5 @@ import { feature } from 'topojson'; | ||
| GridMapWorld.prototype.render = function () { | ||
| var _a = this.props, className = _a.className, tooltip = _a.tooltip, data = _a.data, projection = _a.projection, width = _a.width, side = _a.side, height = _a.height, stroke = _a.stroke, fill = _a.fill, customRender = _a.customRender; | ||
| return (React.createElement(GridMap, { className: className, width: width, height: height, side: side, data: data, featureCollection: worldAtlas, projection: projection, stroke: stroke, fill: fill, customRender: customRender, tooltip: tooltip })); | ||
| return React.createElement(GridMap, __assign({}, this.props, { featureCollection: worldAtlas })); | ||
| }; | ||
| GridMapWorld.defaultProps = GridMap.defaultProps; | ||
| return GridMapWorld; | ||
@@ -32,0 +43,0 @@ }(React.Component)); |
@@ -1,2 +0,2 @@ | ||
| import { Datumdatalith } from '@datalith/util'; | ||
| import { Color, Coords, Datum, Value } from '@datalith/util'; | ||
| import { GeoProjection } from 'd3-geo'; | ||
@@ -12,19 +12,22 @@ import { FeatureCollection } from 'geojson'; | ||
| height: number; | ||
| /** | ||
| * Data has to be defined like this: | ||
| * * `Array<{ v: [number, number], y: number, z?: string }>` | ||
| */ | ||
| data: Datumdatalith[]; | ||
| /** Data array */ | ||
| data: Datum[]; | ||
| /** Value Accessor */ | ||
| value: Value; | ||
| /** Color Accessor */ | ||
| color: Color; | ||
| /** Coords Accessor */ | ||
| coords: Coords; | ||
| /** GeoJson */ | ||
| featureCollection: FeatureCollection; | ||
| /** GeoProjection */ | ||
| projection?: GeoProjection; | ||
| projection: GeoProjection; | ||
| /** Grid cell dimension */ | ||
| side?: number; | ||
| side: number; | ||
| /** Whether to add the fill color */ | ||
| fill?: boolean; | ||
| fill: boolean; | ||
| /** Whether to add the stroke color */ | ||
| stroke?: boolean; | ||
| stroke: boolean; | ||
| /** Return HTML or text as a string to show on element mouseover */ | ||
| tooltip?: (d: Datumdatalith & number) => string; | ||
| tooltip?: (d: Datum) => string; | ||
| /** Return custom element to render as data point */ | ||
@@ -37,14 +40,9 @@ customRender?: (d: { | ||
| value: number; | ||
| datum?: Datumdatalith; | ||
| datum?: Datum; | ||
| }, props: any) => JSX.Element; | ||
| } | ||
| export declare class GridMap extends React.Component<GridMapProps> { | ||
| static defaultProps: { | ||
| stroke: boolean; | ||
| fill: boolean; | ||
| side: number; | ||
| projection: GeoProjection; | ||
| }; | ||
| getFeatureIdToValues(data: Datumdatalith[], featureIdToDatum: Map<string, Datumdatalith>): Map<string, number>; | ||
| static defaultProps: Partial<GridMapProps>; | ||
| getFeatureIdToValues(data: Datum[], featureIdToDatum: Map<string, Datum>): Map<string, number>; | ||
| render(): JSX.Element; | ||
| } |
@@ -7,4 +7,5 @@ import * as React from 'react'; | ||
| export declare class GridMapUs extends React.Component<GridMapUsProps> { | ||
| static defaultProps: Partial<GridMapProps>; | ||
| render(): JSX.Element; | ||
| } | ||
| export {}; |
@@ -7,4 +7,5 @@ import * as React from 'react'; | ||
| export declare class GridMapWorld extends React.Component<GridMapWorldProps> { | ||
| static defaultProps: Partial<GridMapProps>; | ||
| render(): JSX.Element; | ||
| } | ||
| export {}; |
| { | ||
| "name": "@datalith/gridmap", | ||
| "version": "0.1.0", | ||
| "version": "0.2.0", | ||
| "description": "datalith gridmap", | ||
@@ -33,3 +33,3 @@ "main": "dist/index.js", | ||
| "dependencies": { | ||
| "@datalith/util": "^0.1.0", | ||
| "@datalith/util": "^0.2.0", | ||
| "d3-array": "^2.1.0", | ||
@@ -62,3 +62,3 @@ "d3-geo": "^1.11.3", | ||
| }, | ||
| "gitHead": "07098e2da1dcddb3b6b03dd8e8b1bf00c4a1bdc4" | ||
| "gitHead": "0105e6e2ec377fea191acb01fa842d7758ce200f" | ||
| } |
| # @datalith/gridmap | ||
| ``` | ||
| ```sh | ||
| yarn add @datalith/gridmap | ||
@@ -13,13 +13,13 @@ ``` | ||
| | :-------------------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | <pre><code>string</code></pre> | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | <pre><code>number</code></pre> | Width of the SVG | | ||
| | <b>height \*</b> | | <pre><code>number</code></pre> | Height of the SVG | | ||
| | <b>data \*</b> | | <pre><code>Array<{<br> v: [number, number],<br> y?: number,<br> z?: string <br>}><br>Array\<string\></code></pre> | Array of data | | ||
| | <b>featureCollection \*</b> | | <pre><code>FeatureCollection</code></pre> | GeoJson object | | ||
| | projection | <pre><code>geoNaturalEarth1()</code></pre> | <pre><code>GeoProjection</code></pre> | D3 GeoProjection to map coordinates | | ||
| | customRender | <pre><code>props => <circle cx={d.x} cy={d.y} r={value} {...props} /> </code></pre> | <pre><code>(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element</code></pre> | Return custom element to render as data point | | ||
| | side | <pre><code>5</code></pre> | <pre><code>number</code></pre> | Grid cell dimension | | ||
| | fill | <pre><code>true</code></pre> | <pre><code>boolean</code></pre> | Whether to add the fill color | | ||
| | stroke | <pre><code>false</code></pre> | <pre><code>boolean</code></pre> | Whether to add the stroke color | | ||
| | tooltip | | <pre><code>(datum) => string</code></pre> | Return HTML or text as a string to show on element mouseover | | ||
| | 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 | | ||
@@ -30,12 +30,12 @@ # \<GridMapUs \/> | ||
| | :--------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | <pre><code>string</code></pre> | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | <pre><code>number</code></pre> | Width of the SVG | | ||
| | <b>height \*</b> | | <pre><code>number</code></pre> | Height of the SVG | | ||
| | <b>data \*</b> | | <pre><code>Array<{<br> v: [number, number],<br> y?: number,<br> z?: string <br>}><br>Array\<string\></code></pre> | Array of data | | ||
| | projection | <pre><code>geoAlbersUsa()</code></pre> | <pre><code>GeoProjection</code></pre> | D3 GeoProjection to map coordinates | | ||
| | customRender | <pre><code>props => <circle cx={d.x} cy={d.y} r={value} {...props} /> </code></pre> | <pre><code>(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element</code></pre> | Return custom element to render as data point | | ||
| | side | <pre><code>5</code></pre> | <pre><code>number</code></pre> | Grid cell dimension | | ||
| | fill | <pre><code>true</code></pre> | <pre><code>boolean</code></pre> | Whether to add the fill color | | ||
| | stroke | <pre><code>false</code></pre> | <pre><code>boolean</code></pre> | Whether to add the stroke color | | ||
| | tooltip | | <pre><code>(datum) => string</code></pre> | Return HTML or text as a string to show on element mouseover | | ||
| | 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 | | ||
@@ -46,11 +46,11 @@ # \<GridMapWorld \/> | ||
| | :--------------- | :---------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | ||
| | className | | <pre><code>string</code></pre> | Custom css classes to pass to the SVG | | ||
| | <b>width \*</b> | | <pre><code>number</code></pre> | Width of the SVG | | ||
| | <b>height \*</b> | | <pre><code>number</code></pre> | Height of the SVG | | ||
| | <b>data \*</b> | | <pre><code>Array<{<br> v: [number, number],<br> y?: number,<br> z?: string <br>}><br>Array\<string\></code></pre> | Array of data | | ||
| | projection | <pre><code>geoNaturalEarth1()</code></pre> | <pre><code>GeoProjection</code></pre> | D3 GeoProjection to map coordinates | | ||
| | customRender | <pre><code>props => <circle cx={d.x} cy={d.y} r={value} {...props} /> </code></pre> | <pre><code>(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element</code></pre> | Return custom element to render as data point | | ||
| | side | <pre><code>5</code></pre> | <pre><code>number</code></pre> | Grid cell dimension | | ||
| | fill | <pre><code>true</code></pre> | <pre><code>boolean</code></pre> | Whether to add the fill color | | ||
| | stroke | <pre><code>false</code></pre> | <pre><code>boolean</code></pre> | Whether to add the stroke color | | ||
| | tooltip | | <pre><code>(datum) => string</code></pre> | Return HTML or text as a string to show on element mouseover | | ||
| | 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 | |
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
- Lines of code
- increased by0.29%
11239
Worsened metrics
- Total package byte prevSize
- decreased by-0.08%
921086
Dependency changes
+ Added@datalith/util@0.2.0(transitive)
- Removed@datalith/util@0.1.0(transitive)
Updated@datalith/util@^0.2.0