Charts

CONTRIBUTING.md

@@ -68,6 +68,7 @@ describe('MyNewComponent', () => {
 - Components should use start case e.g.:
   - "MyComponent"
   - "AnotherComponentHere.jsx"
+- We hang the `_lucidIsPrivate` boolean off our component definitions to indicate that the component isn't intended for external consumption yet.
 
 ## Tests
 

gulp/docs.js

@@ -36,10 +36,10 @@ function findParentNodeIdentifier(path) {
 }
 
 function getDocsForPath(definitionPath, name) {
-	return reactDocgen.parse('', function (ast, recast) {
+	return reactDocgen.parse('', function (/* ast, recast */) {
 		return definitionPath;
 	}, reactDocgen.defaultHandlers.concat([
-		function (documentation, definition) {
+		function (documentation /*, definition */) {
 			documentation.set('displayName', name);
 		}
 	]));
@@ -73,9 +73,8 @@ module.exports = {
 
 				var componentName = extractComponentName(file);
 
-				console.log('Docgen parsing %s...', file);
-
 				var definitionMap;
+				var isPrivateComponent = false
 				var exportIdentiferName;
 				var componentSource = fs.readFileSync(file)
 				var docs = reactDocgen.parse(
@@ -86,6 +85,10 @@ module.exports = {
 						recast.visit(ast, {
 							visitObjectExpression: function (path) {
 								_.forEach(path.get('properties').value, function (property) {
+									if (property.key.name === '_lucidIsPrivate') {
+										isPrivateComponent = true;
+									}
+
 									if (property.key.name === 'render') {
 										var identifier = findParentNodeIdentifier(path);
 										if (identifier) {
@@ -104,14 +107,15 @@ module.exports = {
 					},
 					// Handlers, a series of functions through which the documentation is
 					// built up.
-					reactDocgen.defaultHandlers.concat(function (documentation, definition) {
+					reactDocgen.defaultHandlers.concat(function (documentation /*, definition */) {
 						// TODO: determine composition from the `import` statements See
 						// existing handlers for examples:
 						// https://github.com/reactjs/react-docgen/blob/dca8ec9d57b4833f7ddb3164bedf4d74578eee1e/src/handlers/propTypeCompositionHandler.js
 						var childComponentDocs = _.map(_.reject(_.keys(definitionMap), _.partial(_.isEqual, exportIdentiferName)), function (childComponentId) {
 							return getDocsForPath(definitionMap[childComponentId], childComponentId);
 						});
 						documentation.set('childComponents', childComponentDocs);
+						documentation.set('isPrivateComponent', isPrivateComponent);
 					})
 				);
 

package.json

@@ -13,8 +13,8 @@
     "docs-upload": "gulp docs-upload",
     "preversion": "rm -rf dist && gulp preversion",
     "postversion": "gulp docs-upload",
-    "test": "rm -rf dist && gulp test",
-    "test-tdd": "rm -rf dist && gulp test-tdd"
+    "test": "rm -rf dist && TZ=UTC gulp test",
+    "test-tdd": "rm -rf dist && TZ=UTC gulp test-tdd"
   },
   "keywords": [
     "component",
@@ -29,6 +29,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "classnames": "^2.2.3",
+    "d3-scale": "^0.6.4",
+    "d3-shape": "^0.6.0",
+    "d3-time": "^0.2.5",
+    "d3-time-format": "^0.3.2",
     "lodash": "^4.11.0",
     "react-addons-css-transition-group": "^0.14.0",
     "reselect": "^2.5.1"

src/components/Axis/Axis.jsx

@@ -0,0 +1,172 @@
+import _ from 'lodash';
+import React from 'react';
+import { lucidClassNames } from '../../util/style-helpers';
+import { discreteTicks } from '../../util/chart-helpers';
+import { createClass } from '../../util/component-types';
+
+const cx = lucidClassNames.bind('&-Axis');
+
+const {
+	string,
+	array,
+	func,
+	number,
+	oneOf,
+} = React.PropTypes;
+
+/**
+ * {"categories": ["visualizations", "chart primitives"]}
+ *
+ * Axes and allies
+ *
+ * This component is a very close sister to `d3.avg.axis` and most of the logic
+ * was ported from d3.
+ */
+const Axis = createClass({
+	displayName: 'Axis',
+
+	_lucidIsPrivate: true,
+
+	propTypes: {
+		/**
+		 * Appended to the component-specific class names set on the root element.
+		 */
+		className: string,
+		/**
+		 * Must be a D3 scale.
+		 */
+		scale: func.isRequired,
+		/**
+		 * Size of the ticks for each discrete tick mark.
+		 */
+		innerTickSize: number,
+		/**
+		 * Size of the tick marks found at the beginning and end of the axis. It's
+		 * common to set this to `0` to remove them.
+		 */
+		outerTickSize: number,
+		/**
+		 * An optional function that can format ticks. Generally this shouldn't be
+		 * needed since d3 has very good default formatters for most data.
+		 *
+		 * Signature: `(tick) => {}`
+		 */
+		tickFormat: func,
+		/**
+		 * If you need fine grained control over the axis ticks, you can pass them
+		 * in this array.
+		 */
+		ticks: array,
+		/**
+		 * Determines the spacing between each tick and its text.
+		 */
+		tickPadding: number,
+		/**
+		 * Determines the orientation of the ticks. `left` and `right` will
+		 * generate a vertical axis, whereas `top` and `bottom` will generate a
+		 * horizontal axis.
+		 */
+		orient: oneOf(['top', 'bottom', 'left', 'right']),
+		/**
+		 * Control the number of ticks displayed.
+		 *
+		 * If the scale is time based or linear, this number acts a "hint" per the
+		 * default behavior of D3. If it's an ordinal scale, this number is treated
+		 * as an absolute number of ticks to display and is powered by our own
+		 * utility function `discreteTicks`.
+		 */
+		tickCount: number,
+	},
+
+	getDefaultProps() {
+		return {
+			innerTickSize: 6, // same as d3
+			outerTickSize: 6, // same as d3
+			tickPadding: 3, // same as d3
+			orient: 'bottom',
+			tickCount: null,
+		};
+	},
+
+	render() {
+		const {
+			scale,
+			className,
+			orient,
+			tickCount,
+			ticks = scale.ticks
+				? scale.ticks(tickCount)
+				: discreteTicks(scale.domain(), tickCount), // ordinal scales don't have `ticks` but they do have `domains`
+			innerTickSize,
+			outerTickSize,
+			tickFormat = scale.tickFormat ? scale.tickFormat() : _.identity,
+			tickPadding,
+			...passThroughs,
+		} = this.props;
+
+		const tickSpacing = Math.max(innerTickSize, 0) + tickPadding;
+
+		// Domain
+		const range = scale.range();
+		const sign = orient === 'top' || orient === 'left' ? -1 : 1;
+		const isH = orient === 'top' || orient === 'bottom'; // is horizontal
+
+		let scaleNormalized = scale;
+
+		// Only band scales have `bandwidth`, this conditional helps center the
+		// ticks on the bands
+		if (scale.bandwidth) {
+			const bandModifier = scale.bandwidth() / 2;
+			scaleNormalized = (d) => scale(d) + bandModifier;
+		}
+
+		return (
+			<g
+				{...passThroughs}
+				className={cx(className, '&')}
+			>
+			{isH ? (
+				<path
+					className={cx('&-domain')}
+					d={`M${range[0]},${sign * outerTickSize}V0H${range[1]}V${sign * outerTickSize}`}
+				/>
+			) : (
+				<path
+					className={cx('&-domain')}
+					d={`M${sign * outerTickSize},${range[0]}H0V${range[1]}H${sign * outerTickSize}`}
+				/>
+			)}
+				{_.map(ticks, (tick) =>
+					<g
+						key={tick}
+						transform={`translate(${isH ? scaleNormalized(tick) : 0}, ${isH ? 0 : scaleNormalized(tick)})`}
+					>
+						<line
+							className={cx('&-tick')}
+							x2={isH ? 0 : sign * innerTickSize}
+							y2={isH ? sign * innerTickSize : 0}
+						/>
+						<text
+							className={cx('&-tick-text')}
+							x={isH ? 0 : sign * tickSpacing}
+							y={isH ? sign * tickSpacing : 0}
+							dy={isH
+								? sign < 0 ? '0em' : '.71em' // magic d3 number
+								: '.32em' // magic d3 number
+							}
+							style={{
+								textAnchor: isH
+									? 'middle'
+									: sign < 0 ? 'end' : 'start'
+							}}
+						>
+							{tickFormat(tick)}
+						</text>
+					</g>
+				)}
+			</g>
+		);
+	}
+});
+
+export default Axis;

src/components/Axis/Axis.less

@@ -0,0 +1,13 @@
+.lucid-Axis {
+	&-tick-text {
+		font: @font-chart;
+		fill: @color-textColor;
+	}
+
+	&-domain,
+	&-tick {
+		fill: none;
+		stroke: @color-gray;
+		shape-rendering: crispEdges;
+	}
+}

src/components/Axis/Axis.spec.js

@@ -0,0 +1,13 @@
+import d3Scale from 'd3-scale';
+import { common } from '../../util/generic-tests';
+
+import Axis from './Axis';
+
+describe('Axis', () => {
+	common(Axis, {
+		exemptFunctionProps: ['scale', 'tickFormat'],
+		getDefaultProps: () => ({
+			scale: d3Scale.scaleLinear(),
+		})
+	});
+});

src/components/Axis/examples/2.bottom.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import d3Scale from 'd3-scale';
+
+import Axis from '../Axis';
+
+const margin = {right: 20, left: 20};
+const width = 400;
+const height = 50;
+const innerWidth = width - margin.right - margin.left;
+const x = d3Scale.scaleLinear()
+	.domain([0, 100000])
+	.range([0, innerWidth]);
+
+export default React.createClass({
+	render() {
+		return (
+			<svg width={width} height={height}>
+				<g transform={`translate(${margin.left}, ${height / 2})`}>
+					<Axis
+						scale={x}
+						orient='bottom'
+						ticks={x.ticks(5)}
+					/>
+				</g>
+			</svg>
+		);
+	}
+});

src/components/Axis/examples/3.top.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import d3Scale from 'd3-scale';
+
+import Axis from '../Axis';
+
+const margin = {right: 20, left: 20};
+const width = 400;
+const height = 50;
+const innerWidth = width - margin.right - margin.left;
+const x = d3Scale.scaleLinear()
+	.domain([0, 100000])
+	.range([0, innerWidth]);
+
+export default React.createClass({
+	render() {
+		return (
+			<svg width={width} height={height}>
+				<g transform={`translate(${margin.left}, ${height / 2})`}>
+					<Axis
+						scale={x}
+						orient='top'
+						ticks={x.ticks(5)}
+					/>
+				</g>
+			</svg>
+		);
+	}
+});

src/components/Axis/examples/4.left.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import d3Scale from 'd3-scale';
+
+import Axis from '../Axis';
+
+const margin = {top: 10, bottom: 10};
+const width = 50;
+const height = 200;
+const innerHeight = height - margin.top - margin.bottom;
+const y = d3Scale.scaleLinear()
+	.domain([0, 100000])
+	.range([innerHeight, 0]);
+
+export default React.createClass({
+	render() {
+		return (
+			<svg width={width} height={height}>
+				<g transform={`translate(${width - 1}, ${margin.top})`}>
+					<Axis scale={y} orient='left' />
+				</g>
+			</svg>
+		);
+	}
+});

src/components/Axis/examples/5.right.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import d3Scale from 'd3-scale';
+
+import Axis from '../Axis';
+
+const margin = {top: 10, bottom: 10};
+const width = 50;
+const height = 200;
+const innerHeight = height - margin.top - margin.bottom;
+const y = d3Scale.scaleLinear()
+	.domain([0, 100000])
+	.range([innerHeight, 0]);
+
+export default React.createClass({
+	render() {
+		return (
+			<svg width={width} height={height}>
+				<g transform={`translate(0, ${margin.top})`}>
+					<Axis scale={y} orient='right' />
+				</g>
+			</svg>
+		);
+	}
+});