Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(vx-geo): convert to docgen #704

Merged
merged 1 commit into from
May 22, 2020
Merged

docs(vx-geo): convert to docgen #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/vx-demo/src/components/PackageList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export default function PackageList({
{!compact && <p>Radial layout for matrix relationships</p>}
</li>
<li className={cx(emphasizePackage === 'geo' && 'emphasize')}>
<a href="/static/docs/vx-geo.html">@vx/geo</a>
<a href="/docs/geo">@vx/geo</a>
{!compact && <p>Geographic projections</p>}
</li>
<li className={cx(emphasizePackage === 'heatmap' && 'emphasize')}>
Expand Down
36 changes: 36 additions & 0 deletions packages/vx-demo/src/pages/docs/Geo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react';
import GeoReadme from '!!raw-loader!../../../../vx-geo/Readme.md';
import Graticule from '../../../../vx-geo/src/graticule/Graticule';
import Albers from '../../../../vx-geo/src/projections/Albers';
import AlbersUsa from '../../../../vx-geo/src/projections/AlbersUsa';
import CustomProjection from '../../../../vx-geo/src/projections/CustomProjection';
import EqualEarth from '../../../../vx-geo/src/projections/EqualEarth';
import Mercator from '../../../../vx-geo/src/projections/Mercator';
import NaturalEarth from '../../../../vx-geo/src/projections/NaturalEarth';
import Orthographic from '../../../../vx-geo/src/projections/Orthographic';
import Projection from '../../../../vx-geo/src/projections/Projection';
import DocPage from '../../components/DocPage';
import { DocGenInfo } from '../../types';

const components = [
// @ts-ignore
Projection.__docgenInfo,
// @ts-ignore
Graticule.__docgenInfo,
// @ts-ignore
Albers.__docgenInfo,
// @ts-ignore
AlbersUsa.__docgenInfo,
// @ts-ignore
CustomProjection.__docgenInfo,
// @ts-ignore
EqualEarth.__docgenInfo,
// @ts-ignore
Mercator.__docgenInfo,
// @ts-ignore
NaturalEarth.__docgenInfo,
// @ts-ignore
Orthographic.__docgenInfo,
] as DocGenInfo[];

export default () => <DocPage components={components} readme={GeoReadme} vxPackage="geo" />;
118 changes: 0 additions & 118 deletions packages/vx-demo/src/static/docs/vx-geo.html
View file
Open in desktop

This file was deleted.

129 changes: 5 additions & 124 deletions packages/vx-geo/Readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,133 +4,14 @@
<img src="https://img.shields.io/npm/dm/@vx/geo.svg?style=flat-square" />
</a>

The `@vx/geo` package provides `react` components for rendering common and custom geographic
projections. `<Projection />` can be used to render preset projections
(`projection='orthographic' | 'albers' | 'albersUsa' | 'mercator' | 'naturalEarth' | 'equalEarth'`)
along with configurable `<Graticule />`s lines. Convenience projections such as `<Mercator />` are
also exported, along with `<CustomProjection />` and `<Graticule />` for full customization.

## Installation

```
npm install --save @vx/geo
```


## Components



- [Graticule](#graticule-)
- [Albers](#albers-)
- [AlbersUsa](#albersusa-)
- [CustomProjection](#customprojection-)
- [EqualEarth](#equalearth-)
- [Mercator](#mercator-)
- [NaturalEarth](#naturalearth-)
- [Orthographic](#orthographic-)
- [Projection](#projection-)

## API



<h3 id="graticule-">&lt;Graticule /&gt;</h3>



<a id="#Graticule__children" name="Graticule__children" href="#Graticule__children">#</a> *Graticule*.**children**&lt;func&gt;

<a id="#Graticule__extent" name="Graticule__extent" href="#Graticule__extent">#</a> *Graticule*.**extent**&lt;arrayOf[object Object]&gt;

<a id="#Graticule__extentMajor" name="Graticule__extentMajor" href="#Graticule__extentMajor">#</a> *Graticule*.**extentMajor**&lt;arrayOf[object Object]&gt;

<a id="#Graticule__extentMinor" name="Graticule__extentMinor" href="#Graticule__extentMinor">#</a> *Graticule*.**extentMinor**&lt;arrayOf[object Object]&gt;

<a id="#Graticule__graticule" name="Graticule__graticule" href="#Graticule__graticule">#</a> *Graticule*.**graticule**&lt;func&gt;

<a id="#Graticule__lines" name="Graticule__lines" href="#Graticule__lines">#</a> *Graticule*.**lines**&lt;func&gt;

<a id="#Graticule__outline" name="Graticule__outline" href="#Graticule__outline">#</a> *Graticule*.**outline**&lt;func&gt;

<a id="#Graticule__precision" name="Graticule__precision" href="#Graticule__precision">#</a> *Graticule*.**precision**&lt;number&gt;

<a id="#Graticule__step" name="Graticule__step" href="#Graticule__step">#</a> *Graticule*.**step**&lt;arrayOf[object Object]&gt;

<a id="#Graticule__stepMajor" name="Graticule__stepMajor" href="#Graticule__stepMajor">#</a> *Graticule*.**stepMajor**&lt;arrayOf[object Object]&gt;

<a id="#Graticule__stepMinor" name="Graticule__stepMinor" href="#Graticule__stepMinor">#</a> *Graticule*.**stepMinor**&lt;arrayOf[object Object]&gt;

<h3 id="albers-">&lt;Albers /&gt;</h3>

All props pass through to `<Projection projection="albers" {...props} />`


<h3 id="albersusa-">&lt;AlbersUsa /&gt;</h3>

All props pass through to `<Projection projection="albersUsa" {...props} />`


<h3 id="customprojection-">&lt;CustomProjection /&gt;</h3>

All props pass through to `<Projection projection={customProjection} {...props} />`


<h3 id="equalearth-">&lt;EqualEarth /&gt;</h3>

All props pass through to `<Projection projection="equalEarth" {...props} />`


<h3 id="mercator-">&lt;Mercator /&gt;</h3>

All props pass through to `<Projection projection="mercator" {...props} />`


<h3 id="naturalearth-">&lt;NaturalEarth /&gt;</h3>

All props pass through to `<Projection projection="naturalEarth" {...props} />`


<h3 id="orthographic-">&lt;Orthographic /&gt;</h3>

All props pass through to `<Projection projection="orthographic" {...props} />`


<h3 id="projection-">&lt;Projection /&gt;</h3>

Component for all projections.

<a id="#Projection__center" name="Projection__center" href="#Projection__center">#</a> *Projection*.**center**&lt;array&gt;

<a id="#Projection__centroid" name="Projection__centroid" href="#Projection__centroid">#</a> *Projection*.**centroid**&lt;func&gt;

<a id="#Projection__children" name="Projection__children" href="#Projection__children">#</a> *Projection*.**children**&lt;func&gt;

<a id="#Projection__className" name="Projection__className" href="#Projection__className">#</a> *Projection*.**className**&lt;string&gt;

<a id="#Projection__clipAngle" name="Projection__clipAngle" href="#Projection__clipAngle">#</a> *Projection*.**clipAngle**&lt;number&gt;

<a id="#Projection__clipExtent" name="Projection__clipExtent" href="#Projection__clipExtent">#</a> *Projection*.**clipExtent**&lt;array&gt;

<a id="#Projection__data" name="Projection__data" href="#Projection__data">#</a> *Projection*.**data**&lt;array&gt; `required`

<a id="#Projection__fitExtent" name="Projection__fitExtent" href="#Projection__fitExtent">#</a> *Projection*.**fitExtent**&lt;array&gt;

<a id="#Projection__fitSize" name="Projection__fitSize" href="#Projection__fitSize">#</a> *Projection*.**fitSize**&lt;array&gt;

<a id="#Projection__graticule" name="Projection__graticule" href="#Projection__graticule">#</a> *Projection*.**graticule**&lt;object&gt;

<a id="#Projection__graticuleLines" name="Projection__graticuleLines" href="#Projection__graticuleLines">#</a> *Projection*.**graticuleLines**&lt;object&gt;

<a id="#Projection__graticuleOutline" name="Projection__graticuleOutline" href="#Projection__graticuleOutline">#</a> *Projection*.**graticuleOutline**&lt;object&gt;

<a id="#Projection__innerRef" name="Projection__innerRef" href="#Projection__innerRef">#</a> *Projection*.**innerRef**&lt;union(func|object)&gt;

<a id="#Projection__pointRadius" name="Projection__pointRadius" href="#Projection__pointRadius">#</a> *Projection*.**pointRadius**&lt;number&gt;

<a id="#Projection__precision" name="Projection__precision" href="#Projection__precision">#</a> *Projection*.**precision**&lt;number&gt;

<a id="#Projection__projection" name="Projection__projection" href="#Projection__projection">#</a> *Projection*.**projection**&lt;union(string|func)&gt; <table><tr><td><strong>Default</strong></td><td>'mercator'</td></td></table>

<a id="#Projection__projectionFunc" name="Projection__projectionFunc" href="#Projection__projectionFunc">#</a> *Projection*.**projectionFunc**&lt;func&gt;

<a id="#Projection__rotate" name="Projection__rotate" href="#Projection__rotate">#</a> *Projection*.**rotate**&lt;array&gt;

<a id="#Projection__scale" name="Projection__scale" href="#Projection__scale">#</a> *Projection*.**scale**&lt;number&gt;

<a id="#Projection__translate" name="Projection__translate" href="#Projection__translate">#</a> *Projection*.**translate**&lt;array&gt;
Loading