Dox & api minor tweaks

Author: emeeks

src/components/MinimapXYFrame.js

@@ -38,10 +38,11 @@ class MinimapXYFrame extends React.Component {
       canvasLines,
       canvasPoints,
       canvasSummaries,
-      minimap
+      minimap,
+      axes,
+      margin
     } = this.props
     const miniDefaults = {
-      title: "",
       position: [0, 0],
       size: [size[0], size[1] * 0.25],
       xAccessor: xAccessor,
@@ -67,7 +68,9 @@ class MinimapXYFrame extends React.Component {
       summaryRenderMode,
       canvasLines,
       canvasPoints,
-      canvasSummaries
+      canvasSummaries,
+      axes,
+      margin
     }
 
     const combinedOptions = { ...miniDefaults, ...minimap }

src/components/constants/frame_props.js

@@ -357,7 +357,6 @@ export const networkframeproptypes = {
   nodeStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   edgeStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   customNodeIcon: PropTypes.func,
-  zoomToFit: PropTypes.bool,
   edgeType: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   filterRenderedNodes: PropTypes.func
 }

src/components/svg/frameFunctions.js

@@ -81,7 +81,8 @@ type ORFrameAxisGeneratorTypes = {
   rScaleType: Function,
   pieceType: Object,
   rExtent: Array<number>,
-  data: Array<Object>
+  data: Array<Object>,
+  maxColumnValues?: number
 }
 
 function roundToTenth(number: number) {

src/docs/components/DonutChartRaw.js

@@ -8,7 +8,7 @@ const data2 = [15, 8, 5, 10]
 
 export default state => {
   const donutSettings = {
-    size: [400, 400],
+    size: [600, 400],
     data: state.changeData ? data2 : data,
     projection: "radial",
     style: (d, i) => ({

src/docs/components/GenericChartsRaw.js

@@ -64,6 +64,5 @@ export const genericNetworkChart = (
     })}
     edgeType={edgeType}
     nodeSizeAccessor={d => d.degree + 2}
-    zoomToFit={true}
   />
 )

src/docs/components/NetworkFrameDocs.js

@@ -420,7 +420,6 @@ export default class NetworkFrameDocs extends React.Component {
             ${
               this.state.annotations === "on" ? "annotations={annotations}" : ""
             }
-            zoomToFit={true}
             nodeLabels={true}
             hoverAnnotation={true}
             annotationSettings={{

src/docs/components/Networks.js

@@ -1,12 +1,6 @@
 import React from "react"
 import DocumentComponent from "../layout/DocumentComponent"
-import {
-  basic,
-  withCustomSimulation,
-  bubbleChart,
-  multiFoci,
-  changeSimulationMode
-} from "./NetworksRaw"
+import { bubbleChart } from "./NetworksRaw"
 
 const components = []
 // Add your component proptype data here
@@ -33,47 +27,6 @@ export default class Networks extends React.Component {
 
   render() {
     const examples = []
-    examples.push({
-      name: "Basic",
-      demo: basic,
-      source: `<NetworkFrame
-    edges={data}
-    networkType={{
-      type: "force",
-      iterations: 1000,
-      forceManyBody: -250,
-      distanceMax: 500,
-      edgeStrength: 2
-    }}
-    nodeSizeAccessor={2}
-    edgeStyle={{ stroke: "darkred" }}
-    nodeIDAccessor="name"
-  />`
-    })
-
-    examples.push({
-      name: "Custom Simulation",
-      demo: withCustomSimulation,
-      source: `const customSimulation = forceSimulation().force(
-  "charge",
-  forceManyBody()
-    .distanceMax(500)
-    .strength(-100)
-)
-      
-      <NetworkFrame
-    edges={data}
-    networkType={{
-      type: "force",
-      iterations: 500,
-      simulation: customSimulation,
-      edgeStrength: 2
-    }}
-    nodeSizeAccessor={2}
-    edgeStyle={{ stroke: "darkred" }}
-    nodeIDAccessor="name"
-  />`
-    })
 
     examples.push({
       name: "Bubble Chart",
@@ -97,48 +50,6 @@ export default class Networks extends React.Component {
   />`
     })
 
-    examples.push({
-      name: "Multi Foci Chart",
-      demo: multiFoci,
-      source: `const multiFociSimulation = forceSimulation()
-  .force("collide", forceCollide().radius(d => d.r))
-  .force("x", forceX(d => d.fociX))
-  .force("y", forceY(d => d.fociY))
-  
-  <NetworkFrame
-    nodes={multiFociNodes}
-    networkType={{
-      type: "force",
-      iterations: 300,
-      simulation: multiFociSimulation,
-      zoom: false
-    }}
-    nodeSizeAccessor={d => d.r}
-    nodeStyle={d => ({ stroke: "darkred", fill: d.color })}
-    nodeIDAccessor="name"
-  />`
-    })
-
-    examples.push({
-      name: "Change Modes",
-      demo: changeSimulationMode(this.state.mode, this.changeMode),
-      source: `<NetworkFrame
-      nodes={combinedFociNodes}
-      networkType={{
-        type: "force",
-        iterations: 500,
-        simulation:
-          mode === "combined"
-            ? bubbleSimulation
-            : multiFociSimulation,
-        zoom: false
-      }}
-      nodeSizeAccessor={d => d.r}
-      nodeStyle={d => ({ stroke: "darkred", fill: d.color })}
-      nodeIDAccessor="name"
-    />`
-    })
-
     return (
       <DocumentComponent
         name="Networks"

src/docs/components/NetworksRaw.js

@@ -60,7 +60,7 @@ const multiFociSimulationForCombined = forceSimulation()
 
 const multiFociNodes = [...Array(500)].map((d, i) => ({
   name: `Node ${i}`,
-  r: Math.random() * 5 + 5 - i % 4,
+  r: Math.random() * 5 + 5 - (i % 4),
   fociX: (i % 2) * 200 + 200,
   fociY: Math.floor((i % 4) / 2) * 200 + 200,
   color: colors[i % 4]
@@ -100,11 +100,12 @@ export const withCustomSimulation = (
 export const bubbleChart = (
   <NetworkFrame
     nodes={bunchaNodes}
+    size={[400, 900]}
     networkType={{
       type: "force",
       iterations: 400,
       simulation: bubbleSimulation,
-      zoom: false
+      zoom: true
     }}
     nodeSizeAccessor={d => d.r}
     nodeStyle={{ stroke: "darkred" }}

src/docs/components/Process.js

@@ -83,13 +83,7 @@ const networkPossibilities = [
     networkType: { type: "wordcloud", textAccessor: d => d.id },
     nodeSizeAccessor: d => nodeScale(d.input + d.output),
     edges: undefined
-  },
-  {
-    networkType: "force",
-    zoomToFit: true,
-    nodeSizeAccessor: d => nodeScale(d.input + d.output)
-  }
-]
+  }]
 
 const formatter = d => (d > 1000 ? `${parseInt(d / 1000)}k` : d)
 

src/docs/components/ProcessViz.js

@@ -71,8 +71,7 @@ const processNodes = [
       projection: true,
       oPadding: true,
       dynamicColumnWidth: true,
-      pixelColumnWidth: true,
-      zoomToFit: true
+      pixelColumnWidth: true
     }
   },
   {
@@ -259,20 +258,20 @@ export default class ProcessViz extends React.Component {
                           {k === "nodes" || k === "edges"
                             ? "these data tend to be circular"
                             : typeof frameSettings[k] === "function"
-                              ? `${frameSettings[k]}`
-                              : JSON.stringify(
-                                  frameSettings[k],
-                                  (key, value) => {
-                                    if (typeof value === "function") {
-                                      return `${value}`
-                                    }
+                            ? `${frameSettings[k]}`
+                            : JSON.stringify(
+                                frameSettings[k],
+                                (key, value) => {
+                                  if (typeof value === "function") {
+                                    return `${value}`
+                                  }
 
-                                    return key === "nodes" || key === "edges"
-                                      ? ""
-                                      : value
-                                  },
-                                  " "
-                                )}
+                                  return key === "nodes" || key === "edges"
+                                    ? ""
+                                    : value
+                                },
+                                " "
+                              )}
                         </PrismCode>
                       </pre>
                     </div>