diff --git a/packages/vx-demo/src/components/PackageList.tsx b/packages/vx-demo/src/components/PackageList.tsx index 4b4f1a02a..4d0c4e1b5 100644 --- a/packages/vx-demo/src/components/PackageList.tsx +++ b/packages/vx-demo/src/components/PackageList.tsx @@ -43,7 +43,7 @@ export default function PackageList({ {!compact &&

Keys for reading your visual encodings

}
  • - @vx/marker + @vx/marker {!compact &&

    Annotation lines with text

    }
  • @@ -84,7 +84,7 @@ export default function PackageList({ {!compact &&

    Multiple layouts for hierarchical or nested data

    }
  • - @vx/network + @vx/network {!compact &&

    Visualize nodes and links between them

    }
  • diff --git a/packages/vx-demo/src/pages/docs/Marker.tsx b/packages/vx-demo/src/pages/docs/Marker.tsx new file mode 100644 index 000000000..b503a7469 --- /dev/null +++ b/packages/vx-demo/src/pages/docs/Marker.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import MarkerReadme from '!!raw-loader!../../../../vx-marker/Readme.md'; +import Marker from '../../../../vx-marker/src/markers/Marker'; +import DocPage from '../../components/DocPage'; +import { DocGenInfo } from '../../types'; + +const components = [ + // @ts-ignore + Marker.__docgenInfo, +] as DocGenInfo[]; + +export default () => ; diff --git a/packages/vx-demo/src/pages/docs/Network.tsx b/packages/vx-demo/src/pages/docs/Network.tsx new file mode 100644 index 000000000..fe542bb13 --- /dev/null +++ b/packages/vx-demo/src/pages/docs/Network.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import NetworkReadme from '!!raw-loader!../../../../vx-network/Readme.md'; +import Graph from '../../../../vx-network/src/Graph'; +import Nodes from '../../../../vx-network/src/Nodes'; +import Links from '../../../../vx-network/src/Links'; +import DefaultNode from '../../../../vx-network/src/DefaultNode'; +import DefaultLink from '../../../../vx-network/src/DefaultLink'; +import DocPage from '../../components/DocPage'; +import { DocGenInfo } from '../../types'; + +const components = [Graph, Nodes, Links, DefaultNode, DefaultLink].map( + c => + // @ts-ignore + c.__docgenInfo, +) as DocGenInfo[]; + +export default () => ; diff --git a/packages/vx-demo/src/static/docs/vx-marker.html b/packages/vx-demo/src/static/docs/vx-marker.html deleted file mode 100644 index ddb8c13a5..000000000 --- a/packages/vx-demo/src/static/docs/vx-marker.html +++ /dev/null @@ -1,86 +0,0 @@ - - - - - -
    -
    -
    - - - Star -
    -
    -
    -
    -
    - -
    -
    -

    @vx/marker

    -

    - -

    -

    A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph.

    -

    Example

    -

    marker example

    -
    <Marker
-  from={markerFrom}
-  to={markerTo}
-  stroke={'white'}
-  label={'deploy'}
-  labelStroke={'none'}
-  labelDx={6}
-  labelDy={15}
-/>
-
    -

    Installation

    -
    npm install --save @vx/marker
-

    Components

    - -

    API

    -

    <Marker />

    - - - -

    # Marker.className<string>

    -

    # Marker.from<object>

    -

    # Marker.label<union(string|func)>

    -

    # Marker.labelAnchor<string>
    Default'left'

    -

    # Marker.labelDx<number>
    Default0

    -

    # Marker.labelDy<number>
    Default0

    -

    # Marker.labelFill<string>

    -

    # Marker.labelFontSize<union(string|number)>
    Default10

    -

    # Marker.labelPaintOrder<string>
    Default'stroke'

    -

    # Marker.labelStroke<string>
    Default'white'

    -

    # Marker.labelStrokeWidth<union(string|number)>
    Default3

    -

    # Marker.left<number>
    Default0

    -

    # Marker.stroke<string>
    Default'magenta'

    -

    # Marker.strokeDasharray<string>

    -

    # Marker.strokeWidth<number>
    Default2

    -

    # Marker.to<object>

    -

    # Marker.top<number>
    Default0

    -

    # Marker.transform<string>

    - -
    -
    - - \ No newline at end of file diff --git a/packages/vx-demo/src/static/docs/vx-network.html b/packages/vx-demo/src/static/docs/vx-network.html deleted file mode 100644 index 98830a4db..000000000 --- a/packages/vx-demo/src/static/docs/vx-network.html +++ /dev/null @@ -1,104 +0,0 @@ - - - - - -
    -
    -
    - - - Star -
    -
    -
    -
    -
    - -
    -
    -

    @vx/network

    -

    - -

    -

    A simple package to represent a network graph.

    -

    Example Usage

    -
    import { Graph, DefaultLink, DefaultNode } from '@vx/network';
-const nodes = [{ x: 50, y: 20 }, { x: 200, y: 300 }, { x: 300, y: 40 }];
-
-const dataSample = {
-  nodes,
-  links: [
-    { source: nodes[0], target: nodes[1] },
-    { source: nodes[1], target: nodes[2] },
-    { source: nodes[2], target: nodes[0] }
-  ]
-};
-
-const MyGraph = () => (
-  <Graph graph={dataSample} linkComponent={DefaultLink} nodeComponent={DefaultNode} />
-);
-
    -

    Installation

    -
    npm install --save @vx/network
-

    Components

    - -

    API

    -

    <DefaultLink />

    - - - -

    # DefaultLink.link<object>

    -

    <DefaultNode />

    - - - - -

    <Graph />

    - - - -

    # Graph.graph<object>

    -

    # Graph.linkComponent<any>
    DefaultDefaultLink

    -

    # Graph.nodeComponent<any>
    DefaultDefaultNode

    -

    <Links />

    - - - -

    # Links.className<string>

    -

    # Links.linkComponent<any>

    -

    # Links.links<array>

    -

    <Nodes />

    - - - -

    # Nodes.className<string>

    -

    # Nodes.nodeComponent<any>

    -

    # Nodes.nodes<array>

    - -
    -
    - - \ No newline at end of file diff --git a/packages/vx-marker/Readme.md b/packages/vx-marker/Readme.md index 8a499706b..ed40f4644 100644 --- a/packages/vx-marker/Readme.md +++ b/packages/vx-marker/Readme.md @@ -4,7 +4,8 @@ -A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph. +A Marker is a line with a piece of text attached to it. It's great for highlighting locations in +your graph. ## Example @@ -22,60 +23,8 @@ A Marker is a line with a piece of text attached to it. It's great for highlight /> ``` - ## Installation ``` npm install --save @vx/marker ``` - - -## Components - - - - - [Marker](#marker-) - -## API - - - -

    <Marker />

    - - - -# *Marker*.**className**<string> - -# *Marker*.**from**<object> - -# *Marker*.**label**<union(string|func)> - -# *Marker*.**labelAnchor**<string>
    Default'left'
    - -# *Marker*.**labelDx**<number>
    Default0
    - -# *Marker*.**labelDy**<number>
    Default0
    - -# *Marker*.**labelFill**<string> - -# *Marker*.**labelFontSize**<union(string|number)>
    Default10
    - -# *Marker*.**labelPaintOrder**<string>
    Default'stroke'
    - -# *Marker*.**labelStroke**<string>
    Default'white'
    - -# *Marker*.**labelStrokeWidth**<union(string|number)>
    Default3
    - -# *Marker*.**left**<number>
    Default0
    - -# *Marker*.**stroke**<string>
    Default'magenta'
    - -# *Marker*.**strokeDasharray**<string> - -# *Marker*.**strokeWidth**<number>
    Default2
    - -# *Marker*.**to**<object> - -# *Marker*.**top**<number>
    Default0
    - -# *Marker*.**transform**<string> diff --git a/packages/vx-marker/docs/api.md b/packages/vx-marker/docs/api.md deleted file mode 100644 index de9701544..000000000 --- a/packages/vx-marker/docs/api.md +++ /dev/null @@ -1,39 +0,0 @@ -

    <Marker />

    - - - -# *Marker*.**className**<string> - -# *Marker*.**from**<object> - -# *Marker*.**label**<union(string|func)> - -# *Marker*.**labelAnchor**<string>
    Default'left'
    - -# *Marker*.**labelDx**<number>
    Default0
    - -# *Marker*.**labelDy**<number>
    Default0
    - -# *Marker*.**labelFill**<string> - -# *Marker*.**labelFontSize**<union(string|number)>
    Default10
    - -# *Marker*.**labelPaintOrder**<string>
    Default'stroke'
    - -# *Marker*.**labelStroke**<string>
    Default'white'
    - -# *Marker*.**labelStrokeWidth**<union(string|number)>
    Default3
    - -# *Marker*.**left**<number>
    Default0
    - -# *Marker*.**stroke**<string>
    Default'magenta'
    - -# *Marker*.**strokeDasharray**<string> - -# *Marker*.**strokeWidth**<number>
    Default2
    - -# *Marker*.**to**<object> - -# *Marker*.**top**<number>
    Default0
    - -# *Marker*.**transform**<string> diff --git a/packages/vx-marker/docs/description.md b/packages/vx-marker/docs/description.md deleted file mode 100644 index 7dbb8a0e3..000000000 --- a/packages/vx-marker/docs/description.md +++ /dev/null @@ -1,23 +0,0 @@ -# @vx/marker - - - - - -A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph. - -## Example - -![marker example](http://i.imgur.com/vbW3Ysa.png) - -```js - -``` diff --git a/packages/vx-marker/docs/docs.md b/packages/vx-marker/docs/docs.md deleted file mode 100644 index 8a499706b..000000000 --- a/packages/vx-marker/docs/docs.md +++ /dev/null @@ -1,81 +0,0 @@ -# @vx/marker - - - - - -A Marker is a line with a piece of text attached to it. It's great for highlighting locations in your graph. - -## Example - -![marker example](http://i.imgur.com/vbW3Ysa.png) - -```js - -``` - - -## Installation - -``` -npm install --save @vx/marker -``` - - -## Components - - - - - [Marker](#marker-) - -## API - - - -

    <Marker />

    - - - -# *Marker*.**className**<string> - -# *Marker*.**from**<object> - -# *Marker*.**label**<union(string|func)> - -# *Marker*.**labelAnchor**<string>
    Default'left'
    - -# *Marker*.**labelDx**<number>
    Default0
    - -# *Marker*.**labelDy**<number>
    Default0
    - -# *Marker*.**labelFill**<string> - -# *Marker*.**labelFontSize**<union(string|number)>
    Default10
    - -# *Marker*.**labelPaintOrder**<string>
    Default'stroke'
    - -# *Marker*.**labelStroke**<string>
    Default'white'
    - -# *Marker*.**labelStrokeWidth**<union(string|number)>
    Default3
    - -# *Marker*.**left**<number>
    Default0
    - -# *Marker*.**stroke**<string>
    Default'magenta'
    - -# *Marker*.**strokeDasharray**<string> - -# *Marker*.**strokeWidth**<number>
    Default2
    - -# *Marker*.**to**<object> - -# *Marker*.**top**<number>
    Default0
    - -# *Marker*.**transform**<string> diff --git a/packages/vx-marker/docs/install.md b/packages/vx-marker/docs/install.md deleted file mode 100644 index 90bae883f..000000000 --- a/packages/vx-marker/docs/install.md +++ /dev/null @@ -1,5 +0,0 @@ -## Installation - -``` -npm install --save @vx/marker -``` diff --git a/packages/vx-marker/package.json b/packages/vx-marker/package.json index cf85eade2..545967429 100644 --- a/packages/vx-marker/package.json +++ b/packages/vx-marker/package.json @@ -10,9 +10,6 @@ "lib", "esm" ], - "scripts": { - "docs": "cd ./docs && ../../../node_modules/.bin/react-docgen ../src/markers | ../../../scripts/buildDocs.sh" - }, "repository": { "type": "git", "url": "git+https://github.com/hshoff/vx.git" diff --git a/packages/vx-network/Readme.md b/packages/vx-network/Readme.md index 830f611dc..fd9441bb7 100644 --- a/packages/vx-network/Readme.md +++ b/packages/vx-network/Readme.md @@ -4,21 +4,25 @@ -A simple package to represent a network graph. +A simple package to visualize a network or graph layout. Does not currently handle network layout. ## Example Usage ```js import { Graph, DefaultLink, DefaultNode } from '@vx/network'; -const nodes = [{ x: 50, y: 20 }, { x: 200, y: 300 }, { x: 300, y: 40 }]; +const nodes = [ + { x: 50, y: 20 }, + { x: 200, y: 300 }, + { x: 300, y: 40 }, +]; const dataSample = { nodes, links: [ { source: nodes[0], target: nodes[1] }, { source: nodes[1], target: nodes[2] }, - { source: nodes[2], target: nodes[0] } - ] + { source: nodes[2], target: nodes[0] }, + ], }; const MyGraph = () => ( @@ -26,65 +30,8 @@ const MyGraph = () => ( ); ``` - ## Installation ``` npm install --save @vx/network ``` - - -## Components - - - - - [DefaultLink](#defaultlink-) - - [DefaultNode](#defaultnode-) - - [Graph](#graph-) - - [Links](#links-) - - [Nodes](#nodes-) - -## API - - - -

    <DefaultLink />

    - - - -# *DefaultLink*.**link**<object> - -

    <DefaultNode />

    - - - - -

    <Graph />

    - - - -# *Graph*.**graph**<object> - -# *Graph*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Graph*.**nodeComponent**<any>
    DefaultDefaultNode
    - -

    <Links />

    - - - -# *Links*.**className**<string> - -# *Links*.**linkComponent**<any> - -# *Links*.**links**<array> - -

    <Nodes />

    - - - -# *Nodes*.**className**<string> - -# *Nodes*.**nodeComponent**<any> - -# *Nodes*.**nodes**<array> diff --git a/packages/vx-network/docs/api.md b/packages/vx-network/docs/api.md deleted file mode 100644 index 6c69acefd..000000000 --- a/packages/vx-network/docs/api.md +++ /dev/null @@ -1,40 +0,0 @@ -

    <DefaultLink />

    - - - -# *DefaultLink*.**link**<object> - -

    <DefaultNode />

    - - - - -

    <Graph />

    - - - -# *Graph*.**graph**<object> - -# *Graph*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Graph*.**nodeComponent**<any>
    DefaultDefaultNode
    - -

    <Links />

    - - - -# *Links*.**className**<string> - -# *Links*.**linkComponent**<any> - -# *Links*.**links**<array> - -

    <Nodes />

    - - - -# *Nodes*.**className**<string> - -# *Nodes*.**nodeComponent**<any> - -# *Nodes*.**nodes**<array> diff --git a/packages/vx-network/docs/description.md b/packages/vx-network/docs/description.md deleted file mode 100644 index 29f9e899d..000000000 --- a/packages/vx-network/docs/description.md +++ /dev/null @@ -1,27 +0,0 @@ -# @vx/network - - - - - -A simple package to represent a network graph. - -## Example Usage - -```js -import { Graph, DefaultLink, DefaultNode } from '@vx/network'; -const nodes = [{ x: 50, y: 20 }, { x: 200, y: 300 }, { x: 300, y: 40 }]; - -const dataSample = { - nodes, - links: [ - { source: nodes[0], target: nodes[1] }, - { source: nodes[1], target: nodes[2] }, - { source: nodes[2], target: nodes[0] } - ] -}; - -const MyGraph = () => ( - -); -``` diff --git a/packages/vx-network/docs/docs.md b/packages/vx-network/docs/docs.md deleted file mode 100644 index 830f611dc..000000000 --- a/packages/vx-network/docs/docs.md +++ /dev/null @@ -1,90 +0,0 @@ -# @vx/network - - - - - -A simple package to represent a network graph. - -## Example Usage - -```js -import { Graph, DefaultLink, DefaultNode } from '@vx/network'; -const nodes = [{ x: 50, y: 20 }, { x: 200, y: 300 }, { x: 300, y: 40 }]; - -const dataSample = { - nodes, - links: [ - { source: nodes[0], target: nodes[1] }, - { source: nodes[1], target: nodes[2] }, - { source: nodes[2], target: nodes[0] } - ] -}; - -const MyGraph = () => ( - -); -``` - - -## Installation - -``` -npm install --save @vx/network -``` - - -## Components - - - - - [DefaultLink](#defaultlink-) - - [DefaultNode](#defaultnode-) - - [Graph](#graph-) - - [Links](#links-) - - [Nodes](#nodes-) - -## API - - - -

    <DefaultLink />

    - - - -# *DefaultLink*.**link**<object> - -

    <DefaultNode />

    - - - - -

    <Graph />

    - - - -# *Graph*.**graph**<object> - -# *Graph*.**linkComponent**<any>
    DefaultDefaultLink
    - -# *Graph*.**nodeComponent**<any>
    DefaultDefaultNode
    - -

    <Links />

    - - - -# *Links*.**className**<string> - -# *Links*.**linkComponent**<any> - -# *Links*.**links**<array> - -

    <Nodes />

    - - - -# *Nodes*.**className**<string> - -# *Nodes*.**nodeComponent**<any> - -# *Nodes*.**nodes**<array> diff --git a/packages/vx-network/docs/install.md b/packages/vx-network/docs/install.md deleted file mode 100644 index 02f7e6f25..000000000 --- a/packages/vx-network/docs/install.md +++ /dev/null @@ -1,5 +0,0 @@ -## Installation - -``` -npm install --save @vx/network -``` diff --git a/packages/vx-network/package.json b/packages/vx-network/package.json index bec0fa884..f0ed35c70 100644 --- a/packages/vx-network/package.json +++ b/packages/vx-network/package.json @@ -11,9 +11,6 @@ "lib", "esm" ], - "scripts": { - "docs": "cd ./docs && ../../../node_modules/.bin/react-docgen --exclude index.js ../src | ../../../scripts/buildDocs.sh" - }, "keywords": [ "vx", "data", diff --git a/packages/vx-network/src/DefaultNode.tsx b/packages/vx-network/src/DefaultNode.tsx index 135034525..6e46490d0 100644 --- a/packages/vx-network/src/DefaultNode.tsx +++ b/packages/vx-network/src/DefaultNode.tsx @@ -1,5 +1,14 @@ import React from 'react'; -export default function DefaultNode() { - return ; +export type NodeProps = { + cx?: number; + cy?: number; +}; + +export default function DefaultNode({ + r = 15, + fill = '#21DfFD', + ...rest +}: NodeProps & Omit, keyof NodeProps>) { + return ; }