Merge pull request #45 from spotify/0.3.0

0.3.0 Release
spotify · Aug 10, 2017 · b86bd48 · b86bd48
2 parents a0fc708 + 6435ad7
commit b86bd48
Show file tree

Hide file tree

Showing 311 changed files with 186,966 additions and 149,740 deletions.
diff --git a/docs/assets/favicon.png b/docs/assets/favicon.png
diff --git a/docs/build/assets/favicon.png b/docs/build/assets/favicon.png
diff --git a/docs/build/bundle.0bf52e4a24a5cd3d7777.js b/docs/build/bundle.0bf52e4a24a5cd3d7777.js
diff --git a/docs/build/bundle.0bf52e4a24a5cd3d7777.js.map b/docs/build/bundle.0bf52e4a24a5cd3d7777.js.map
diff --git a/docs/build/index.html b/docs/build/index.html
@@ -0,0 +1,35 @@
+<!--
+  NOTE: index.html is autogenerated by webpack & html-webpack-plugin.
+  To modify this HTML, make changes to docs/src/index_html.ejs and then run `npm run build`.
+ -->
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Reactochart Docs</title>
+    <!-- Compiled and minified Bootstrap 3.3.6 CSS + Sp-bootstrap 8.0.0 theme CSS -->
+    <link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css"/>
+
+    <link rel="shortcut icon" href="build/assets/favicon.png">
+</head>
+
+<body>
+    <div class="navbar navbar-default" role="navigation">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">
+                    <span class="navbar-logo">Spotify</span>
+                    <span class="navbar-title">Reactochart</span>
+                </a>
+            </div>
+            <div class="collapse navbar-collapse">
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid" id="container">Loading...</div>
+<script type="text/javascript" src="bundle.0bf52e4a24a5cd3d7777.js"></script></body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,35 @@
+<!--
+  NOTE: index.html is autogenerated by webpack & html-webpack-plugin.
+  To modify this HTML, make changes to docs/src/index_html.ejs and then run `npm run build`.
+ -->
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Reactochart Docs</title>
+    <!-- Compiled and minified Bootstrap 3.3.6 CSS + Sp-bootstrap 8.0.0 theme CSS -->
+    <link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/theme/monokai.min.css"/>
+
+    <link rel="shortcut icon" href="build/assets/favicon.png">
+</head>
+
+<body>
+    <div class="navbar navbar-default" role="navigation">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <a class="navbar-brand" href="#">
+                    <span class="navbar-logo">Spotify</span>
+                    <span class="navbar-title">Reactochart</span>
+                </a>
+            </div>
+            <div class="collapse navbar-collapse">
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid" id="container">Loading...</div>
+<script type="text/javascript" src="build/bundle.c7f8d387c8b9dba4f7de.js"></script></body>
+</html>
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -0,0 +1,208 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {HashRouter as Router, Link, Route} from 'react-router-dom';
+
+import * as Docs from './docs';
+import * as Lessons from './lessons';
+import Playground from './Playground';
+
+const lessons = [
+  {name: "Quick Start", path: '/quick-start', Component: Lessons.QuickStartLesson},
+  {name: "XY Plots", path: '/xy-plots', Component: Lessons.XYPlotsLesson},
+  {name: "Getters & Accessors", path: '/getters-and-accessors', Component: Lessons.GettersAndAccessorsLesson},
+  // {name: "Interaction", path: '/interaction', Component: Lessons.InteractionLesson},
+];
+
+const mainComponents = [
+  {name: 'XYPlot', path: '/xy-plot', Component: Docs.XYPlotDocs},
+];
+
+const chartComponents = [
+  {name: 'AreaBarChart', path: '/area-bar-chart', Component: Docs.AreaBarChartDocs},
+  {name: 'AreaChart', path: '/area-chart', Component: Docs.AreaChartDocs},
+  {name: 'AreaHeatmap', path: '/area-heatmap', Component: Docs.AreaHeatmapDocs},
+  {name: 'BarChart', path: '/bar-chart', Component: Docs.BarChartDocs},
+  {name: 'ColorHeatmap', path: '/color-heatmap', Component: Docs.ColorHeatmapDocs},
+  {name: 'FunnelChart', path: '/funnel-chart', Component: Docs.FunnelChartDocs},
+  {name: 'Histogram', path: '/histogram', Component: Docs.HistogramDocs},
+  {name: 'KernelDensityEstimation', path: '/kernel-density-estimation', Component: Docs.KernelDensityEstimationDocs},
+  {name: 'LineChart', path: '/line-chart', Component: Docs.LineChartDocs},
+  {name: 'MarkerLineChart', path: '/marker-line-chart', Component: Docs.MarkerLineChartDocs},
+  {name: 'PieChart', path: '/pie-chart', Component: Docs.PieChartDocs},
+  {name: 'RangeBarChart', path: '/range-bar-chart', Component: Docs.RangeBarChartDocs},
+  {name: 'ScatterPlot', path: '/scatter-plot', Component: Docs.ScatterPlotDocs},
+  {name: 'TreeMap', path: '/tree-map', Component: Docs.TreeMapDocs},
+];
+
+const dataMarkComponents = [
+  {name: 'Bar', path: '/bar', Component: Docs.BarDocs},
+  {name: 'RangeRect', path: '/range-rect', Component: Docs.RangeRectDocs},
+  {name: 'XLine', path: '/x-line', Component: Docs.XLineDocs},
+  {name: 'YLine', path: '/y-line', Component: Docs.YLineDocs},
+];
+
+const axisComponents = [
+  {name: 'XAxis', path: '/x-axis', Component: Docs.XAxisDocs},
+  {name: 'XAxisLabels', path: '/x-axis-labels', Component: Docs.XAxisLabelsDocs},
+  {name: 'XAxisTitle', path: '/x-axis-title', Component: Docs.XAxisTitleDocs},
+  {name: 'XGrid', path: '/x-grid', Component: Docs.XGridDocs},
+  {name: 'XTicks', path: '/x-ticks', Component: Docs.XTicksDocs},
+  {name: 'YAxis', path: '/y-axis', Component: Docs.YAxisDocs},
+  {name: 'YAxisLabels', path: '/y-axis-labels', Component: Docs.YAxisLabelsDocs},
+  {name: 'YAxisTitle', path: '/y-axis-title', Component: Docs.YAxisTitleDocs},
+  {name: 'YGrid', path: '/y-grid', Component: Docs.YGridDocs},
+  {name: 'YTicks', path: '/y-ticks', Component: Docs.YTicksDocs},
+];
+
+const allComponents = lessons
+  .concat(mainComponents)
+  .concat(chartComponents)
+  .concat(dataMarkComponents)
+  .concat(axisComponents);
+
+
+const NavLink = ({label, to}) => {
+  return <Route path={to} exact={true} children={({match}) => (
+    <li className={`example-link ${match ? 'active' : ''}`}>
+      <Link to={to}>{label}</Link>
+    </li>
+  )}/>
+};
+
+const Nav = () => {
+  return <div className="sidebar-nav col-md-2" style={{backgroundColor: '#2E2F33'}}>
+    <h3>Lessons</h3>
+    <ul className="nav-inverse nav-tabs nav-stacked">
+      {lessons.map((lesson, i) => {
+        return <NavLink to={lesson.path} label={lesson.name} key={`lesson-${i}`}/>;
+      })}
+    </ul>
+
+    <h3>Component Docs</h3>
+    <ul className="nav-inverse nav-tabs nav-stacked">
+      {mainComponents.map((component, i) => {
+        return <NavLink to={component.path} label={component.name} key={`chart-component-${i}`}/>;
+      })}
+    </ul>
+
+    <h4>Chart Components</h4>
+    <ul className="nav-inverse nav-tabs nav-stacked">
+      {chartComponents.map((component, i) => {
+        return <NavLink to={component.path} label={component.name} key={`chart-component-${i}`}/>;
+      })}
+    </ul>
+
+    <h4>Data Components</h4>
+    <ul className="nav-inverse nav-tabs nav-stacked">
+      {dataMarkComponents.map((component, i) => {
+        return <NavLink to={component.path} label={component.name} key={`data-component-${i}`}/>;
+      })}
+    </ul>
+
+    <h4>Axis Components</h4>
+    <ul className="nav-inverse nav-tabs nav-stacked">
+      {axisComponents.map((component, i) => {
+        return <NavLink to={component.path} label={component.name} key={`axis-component-${i}`}/>;
+      })}
+    </ul>
+  </div>
+};
+
+export const Home = (props) => (
+  <div className="docs-home">
+    <p>
+      Reactochart is a library of React components for creating charts and graphs, used internally at Spotify.
+      test
+    </p>
+
+    <MultipleXYExample/>
+  </div>
+);
+
+
+export const App = (props) => (
+  <Router>
+    <div className="row docs-home">
+      <Nav />
+      <div className="col-md-10">
+        <Route exact path={'/'} component={Home} />
+        <Route exact path={'/playground'} component={Playground} />
+
+        {allComponents.map((c, i) => (
+          <Route path={c.path} component={c.Component} key={i} />
+        ))}
+      </div>
+    </div>
+  </Router>
+);
+
+import * as Reactochart from '../../src';
+const {
+  XYPlot, XAxis, YAxis, RangeBarChart, LineChart, ScatterPlot, BarChart, MarkerLineChart, ColorHeatmap, AreaHeatmap
+} = Reactochart;
+
+class MultipleXYExample extends React.Component {
+  render() {
+    return <div>
+      <XYPlot domain={{y: [-2, 2], x: [-2, 2]}} scaleType="linear" {...{width: 400, height: 400}}>
+        <XAxis title="Phase" />
+        <YAxis title="Intensity" />
+
+        <RangeBarChart
+          data={_.range(0, 2, .03)}
+          getX={null}
+          getY={d => (Math.sin(d*3) * .7) + 1.2}
+          getYEnd={d => (Math.sin(d*3) * Math.cos(d*3) * .7) + 1.2}
+          barThickness={2}
+          barStyle={{fill: '#3690c0'}}
+        />
+
+        <LineChart
+          data={_.range(-2, 0, .005)}
+          getY={d => Math.pow(Math.abs(Math.sin(d*5)), Math.abs(Math.sin(d*.25))) * 1.8}
+          lineStyle={{stroke: '#02818a', strokeWidth: 3}}
+        />
+
+        <ScatterPlot
+          data={_.range(-2, 0, .05)}
+          getY={d => Math.pow(2, (d + 2) * 1.8) * 0.1}
+          pointSymbol={<rect width={5} height={5} fill="#3690c0" />}
+        />
+
+        <BarChart
+          data={_.range(0, 2, .03)}
+          getY={d => -Math.abs(Math.sin(d*4) * Math.cos(d*3))}
+          barThickness={3}
+          barStyle={{fill: '#67a9cf'}}
+        />
+
+        <MarkerLineChart
+          data={_.range(0, 1.5, .1)}
+          getY={d => Math.cos(d)}
+          lineStyle={{stroke: '#ec7014', strokeWidth: 3}}
+        />
+
+        <ColorHeatmap
+          data={_.flatten(_.range(-2, 0, .1).map(i => _.range(-2, 0, .1).map(j => [i, j])))}
+          getValue={([i, j]) => Math.sin(i * j * 5)}
+          getX={([i, j]) => i}
+          getXEnd={([i, j]) => i + .1}
+          getY={([i, j]) => j}
+          getYEnd={([i, j]) => j + .1}
+          colors={['#d0d1e6', '#016450']}
+          interpolator={'lab'}
+        />
+
+        <AreaHeatmap
+          data={_.flatten(_.range(0, 2, .1).map(i => _.range(-2, -1, .1).map(j => [i, j])))}
+          getArea={([i, j]) => -Math.sin(i * j * 5)}
+          getX={([i, j]) => i}
+          getXEnd={([i, j]) => i + .1}
+          getY={([i, j]) => j}
+          getYEnd={([i, j]) => j + .1}
+          rectStyle={{fill: '#016450'}}
+        />
+      </XYPlot>
+    </div>;
+  }
+}
diff --git a/docs/src/ComponentDocs.js b/docs/src/ComponentDocs.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import _ from 'lodash';
+
+export default class ComponentDocs extends React.Component {
+  render() {
+    const {name, propDocs, children} = this.props;
+
+    return <div className="container-fluid component-docs">
+      <div className="row">
+        <h2>{name}</h2>
+      </div>
+
+      {propDocs.description ?
+        <div className="row">
+          <p className="component-description">{propDocs.description}</p>
+        </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">{propInfo.description}</span>
+              : null}
+
+            {propInfo.defaultValue ?
+              <div className="prop-default">default value: <code>{propInfo.defaultValue.value}</code></div>
+              : null}
+          </div>
+        })}
+
+      </div>
+
+      {children}
+    </div>
+  }
+}
diff --git a/docs/src/ExampleSection.js b/docs/src/ExampleSection.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import _ from 'lodash';
+import * as d3 from 'd3';
+import Playground from 'component-playground';
+
+// import *all* reactochart components/utils - usually you'd import one at a time
+import * as Reactochart from '../../src';
+
+import {randomWalk, randomWalkSeries, randomWalkTimeSeries, removeRandomData} from './data/util';
+window.Reactochart = Reactochart;
+
+export default class ExampleSection extends React.Component {
+  static propTypes = {
+    codeText: React.PropTypes.string,
+    scope: React.PropTypes.object,
+    isExpanded: React.PropTypes.bool,
+    label: React.PropTypes.node,
+    id: React.PropTypes.string,
+    description: React.PropTypes.node,
+    onClick: React.PropTypes.func
+  };
+  static defaultProps = {
+    codeText: "",
+    scope: {},
+    isExpanded: true,
+    label: "Example",
+    id: ""
+  };
+
+  onClick = (e) => {
+    if(this.props.onClick) {
+      this.props.onClick(e, this.props.id);
+    }
+  };
+
+  render() {
+    const {codeText, isExpanded, label, id, description, onClick} = this.props;
+    const scope = {
+      React, ReactDOM, d3, _,
+      randomWalk, randomWalkSeries, randomWalkTimeSeries,
+      // include all Reactochart components in scope
+      ...Reactochart,
+      ...this.props.scope
+    };
+
+    return <div className={`row example ${isExpanded ? 'example-active' : 'example-inactive'}`}>
+      <div className="col-md-12">
+        <h3 className="example-header" onClick={onClick ? this.onClick : _.noop}>
+          {label || id} {isExpanded ? "▼" : "►"}
+        </h3>
+
+        {isExpanded ?
+          <div>
+            {description ?
+              <div className="example-description">
+                {description}
+              </div>
+              : null
+            }
+            <Playground codeText={codeText} scope={scope} noRender={false} />
+          </div>
+          : null
+        }
+      </div>
+    </div>
+  }
+}