Skip to content

Commit

Permalink
Clean up and refactor (spotify#59)
Browse files Browse the repository at this point in the history 
* Add prettier & eslint code style rules

* Remove legacy code and evaluate any todos

* Only send valid XYPlot props to children. Resolves spotify#22

* Check against master list of scaleTypes

* Implement invertX and invertY scale

* Alphabetically sort props displayed on docs

* Update documentation for x and y axis labels and titles

* Clean up code and todos

* includeXZero and includeYZero props + test
  • Loading branch information
Kris Salvador authored May 1, 2018
1 parent f7f6e5e commit 9dfd64b
Show file tree
Hide file tree
Showing 21 changed files with 853 additions and 528 deletions.
89 changes: 48 additions & 41 deletions docs/src/ComponentDocs.js
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,63 @@
import React from 'react';
import ReactDOM from 'react-dom';
import _ from 'lodash';
import remark from 'remark';
import remarkReact from 'remark-react';
import React from "react";
import ReactDOM from "react-dom";
import _ from "lodash";
import remark from "remark";
import remarkReact from "remark-react";

export default class ComponentDocs extends React.Component {
render() {
const {name, propDocs, children} = this.props;
const { name, propDocs, children } = this.props;
const sortedProps = _(_.get(propDocs, "props"))
.toPairs()
.sortBy(0)
.fromPairs()
.value();

return <div className="container-fluid component-docs">
<div className="row">
<h2>{name}</h2>
</div>

{propDocs.description ?
return (
<div className="container-fluid component-docs">
<div className="row">
<p className="component-description">
{renderMarkdown(propDocs.description)}
</p>
<h2>{name}</h2>
</div>
: null
}

<div className="row prop-docs">
<h4>{name} props:</h4>
{_.map(_.get(propDocs, 'props'), (propInfo, propKey) => {
return <div key={propKey} className="prop-doc">
<strong>{propKey}</strong>: {_.get(propInfo, 'type.name', 'unknown')}
{propInfo.description ? <br/> : null}
{propInfo.description ?
<span className="prop-description">
{renderMarkdown(propInfo.description)}
</span>
: null}
{propDocs.description ? (
<div className="row">
<p className="component-description">
{renderMarkdown(propDocs.description)}
</p>
</div>
) : null}

{propInfo.defaultValue ?
<div className="prop-default">
default value: <code>{propInfo.defaultValue.value}</code>
<div className="row prop-docs">
<h4>{name} props:</h4>
{_.map(sortedProps, (propInfo, propKey) => {
return (
<div key={propKey} className="prop-doc">
<strong>{propKey}</strong>:{" "}
{_.get(propInfo, "type.name", "unknown")}
{propInfo.description ? <br /> : null}
{propInfo.description ? (
<span className="prop-description">
{renderMarkdown(propInfo.description)}
</span>
) : null}
{propInfo.defaultValue ? (
<div className="prop-default">
default value: <code>{propInfo.defaultValue.value}</code>
</div>
) : null}
</div>
: null}
</div>
})}
</div>
);
})}
</div>

{children}
</div>
{children}
</div>
);
}
}

function renderMarkdown(markdownText = '') {
function renderMarkdown(markdownText = "") {
return remark()
.use(remarkReact)
.processSync(markdownText)
.contents;
}
.processSync(markdownText).contents;
}
148 changes: 105 additions & 43 deletions docs/src/docs/XAxisLabels/propDocs.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,117 +59,179 @@
}
],
"props": {
"xScale": {
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"onMouseEnterLabel": {
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"onMouseMoveLabel": {
"height": {
"type": {
"name": "func"
"name": "number"
},
"required": false,
"description": ""
},
"onMouseLeaveLabel": {
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"height": {
"description": "",
"defaultValue": {
"value": "250",
"computed": false
}
},
"position": {
"type": {
"name": "string"
},
"required": false,
"description": "",
"defaultValue": {
"value": "\"bottom\"",
"computed": false
}
},
"placement": {
"type": {
"name": "string"
},
"required": false,
"description": "Placement of labels in regards to the x axis. Accepted options are \"above\" or \"below\"",
"defaultValue": {
"value": "undefined",
"computed": true
}
},
"xScale": {
"type": {
"name": "func"
},
"required": false,
"description": "D3 scale for X axis - provided by XYPlot"
},
"spacingTop": {
"type": {
"name": "number"
},
"required": false,
"description": "Spacing - provided by XYPlot"
},
"spacingBottom": {
"type": {
"name": "number"
},
"required": false,
"description": "Spacing - provided by XYPlot"
},
"distance": {
"type": {
"name": "number"
},
"required": false,
"description": "Label distance from X Axis",
"defaultValue": {
"value": "4",
"computed": false
}
},
"nice": {
"defaultValue": {
"value": "true",
"computed": false
}
},
"tickCount": {
"type": {
"name": "number"
},
"required": false,
"description": "Number of ticks on axis",
"defaultValue": {
"value": "10",
"computed": false
}
},
"ticks": {
"type": {
"name": "array"
},
"required": false,
"description": "Custom ticks to display",
"defaultValue": {
"value": "null",
"computed": false
}
},
"labelClassName": {
"labelStyle": {
"type": {
"name": "object"
},
"required": false,
"description": "Object declaring styles for label.\n\nDisclaimer: labelStyle will merge its defaults with the given labelStyle prop\nin order to ensure that our collision library measureText is able to calculate the\nsmallest amount of possible collissions along the axis. It's therefore dependent on\nfontFamily, size and fontStyle to always be passed in. If you're looking to have a centralized\nstylesheet, we suggest creating a styled label component that wraps XAxisLabels with your preferred styles.",
"defaultValue": {
"value": "\"\"",
"value": "{\n fontFamily: \"Helvetica, sans-serif\",\n fontSize: \"14px\",\n lineHeight: 1,\n textAnchor: \"middle\"\n}",
"computed": false
}
},
"labelStyle": {
"labelClassName": {
"type": {
"name": "string"
},
"required": false,
"description": "",
"defaultValue": {
"value": "{\n fontFamily: \"Helvetica, sans-serif\",\n fontSize: \"14px\",\n lineHeight: 1,\n textAnchor: \"middle\"\n}",
"value": "\"\"",
"computed": false
}
},
"format": {
"type": {
"name": "string"
},
"required": false,
"description": "Format to use for the labels\n\nFor example, given labels with real numbers one can pass in 0.[0] to round to the first significant digit",
"defaultValue": {
"value": "undefined",
"computed": true
}
},
"formats": {
"type": {
"name": "array"
},
"required": false,
"description": "Formats to use for the labels in priority order. XAxisLabels will try to be smart about which format\nto use that keeps the labels distinct and provides the least amount of collisions when rendered.\n\nFor example, given labels with real numbers one can pass in 0.[0] to round to the first significant digit",
"defaultValue": {
"value": "undefined",
"computed": true
}
},
"labels": {
"type": {
"name": "array"
},
"required": false,
"description": "Custom labels provided. Note that each object in the array has to be of shape\n`{\n value,\n text,\n height,\n width\n}`\nvalue - value you'd like this label to be aligned with\ntext - text you'd like displayed\nheight - height of the given label\nwidth - width of the given label",
"defaultValue": {
"value": "undefined",
"computed": true
}
},
"spacingTop": {
"nice": {
"type": {
"name": "bool"
},
"required": false,
"description": "Round ticks to capture extent of given x and y Domain",
"defaultValue": {
"value": "0",
"value": "true",
"computed": false
}
},
"spacingBottom": {
"defaultValue": {
"value": "0",
"computed": false
}
"onMouseEnterLabel": {
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"onMouseMoveLabel": {
"type": {
"name": "func"
},
"required": false,
"description": ""
},
"onMouseLeaveLabel": {
"type": {
"name": "func"
},
"required": false,
"description": ""
}
}
}
Loading

0 comments on commit 9dfd64b

Please sign in to comment.