Merge pull request #135 from uber/legends-update

Support the missing orientation on the legends
uber · Sep 1, 2016 · 4c72518 · 4c72518
2 parents 826f0b1 + c45c4a1
commit 4c72518
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 59 deletions.
diff --git a/src/example/legends/continuous-color.js b/src/example/legends/continuous-color.js
@@ -32,7 +32,6 @@ export default class Example extends React.Component {
   render() {
     return (
       <ContinuousColorLegend
-        height={200}
         width={300}
         startTitle="100"
         midTitle="150"

diff --git a/src/example/legends/horizontal-discrete-color.js b/src/example/legends/horizontal-discrete-color.js
@@ -0,0 +1,42 @@
+// Copyright (c) 2016 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+import {DiscreteColorLegend} from '../../';
+
+const ITEMS = [
+  'Options',
+  'Buttons',
+  'Select boxes',
+  'Date inputs',
+  'Password inputs',
+  'Forms',
+  'Other'
+];
+
+export default function DiscreteColorExample() {
+  return (
+    <DiscreteColorLegend
+      orientation="horizontal"
+      width={300}
+      items={ITEMS}
+    />
+  );
+}
diff --git a/src/example/legends/discrete-color.js → ...xample/legends/vertical-discrete-color.js b/src/example/legends/discrete-color.js → ...xample/legends/vertical-discrete-color.js
diff --git a/src/example/main.js b/src/example/main.js
@@ -40,31 +40,35 @@ import StaticCrosshair from './plot/static-crosshair';
 import DynamicCrosshair from './plot/dynamic-crosshair';
 import SyncedCharts from './plot/synced-charts';
 import TimeChart from './plot/time-chart';
-
 import SimpleTreemap from './treemap/simple-treemap';
 import TreemapExample from './treemap/dynamic-treemap';
-
 import StaticTable from './table/static-table';
 import DynamicTable from './table/dynamic-table';
-
 import SimpleRadialChart from './radial-chart/simple-radial-chart';
-
 import CustomRadiusRadialChart from './radial-chart/custom-radius-radial-chart';
-
-import DiscreteColorLegendExample from './legends/discrete-color';
-import SearchableDiscreteColorLegendExample
-  from './legends/searchable-discrete-color';
-
+import VerticalDiscreteColorLegendExample from './legends/vertical-discrete-color';
+import HorizontalDiscreteColorLegendExample from './legends/horizontal-discrete-color';
+import SearchableDiscreteColorLegendExample from './legends/searchable-discrete-color';
 import ContinuousColorLegendExample from './legends/continuous-color';
 import ContinuousSizeLegendExample from './legends/continuous-size';
-
 import {isReactDOMSupported} from '../lib/utils/react-utils';
 
 const examples = (
   <main>
-    <header>react-vis</header>
-    <article>
-      <h1>Chart</h1>
+    <header>
+      <div className="header-contents">
+        <a className="header-logo" href="#">react-vis</a>
+        <nav>
+          <li><a href="#plots">Plots</a></li>
+          <li><a href="#radial-charts">Radial Charts</a></li>
+          <li><a href="#treemaps">Treemaps</a></li>
+          <li><a href="#tables">Tables</a></li>
+          <li><a href="#legends">Legends</a></li>
+        </nav>
+      </div>
+    </header>
+    <article id="plots">
+      <h1>Plots</h1>
       <section>
         <ComplexChart />
       </section>
@@ -142,7 +146,8 @@ const examples = (
         <h3>Time Chart</h3>
         <TimeChart />
       </section>
-
+    </article>
+    <article id="radial-charts">
       <h1>Radial Chart</h1>
       <section>
         <h3>Simple Radial Chart</h3>
@@ -153,7 +158,8 @@ const examples = (
         <h3>Custom Radius</h3>
         <CustomRadiusRadialChart />
       </section>
-
+    </article>
+    <article id="treemaps">
       <h1>Treemap</h1>
       <section>
         <h3>Simple Treemap</h3>
@@ -163,7 +169,8 @@ const examples = (
         <h3>Animated Treemap</h3>
         <TreemapExample />
       </section>
-
+    </article>
+    <article id="tables">
       <h1>Table</h1>
       <section>
         <h3>Static Table</h3>
@@ -174,21 +181,30 @@ const examples = (
         <p>Updates each 5 seconds</p>
         <DynamicTable />
       </section>
+    </article>
+    <article id="legends">
       <h1>Legends</h1>
+      <h2>Discrete color legend</h2>
+      <section>
+        <h3>Vertical legend</h3>
+        <VerticalDiscreteColorLegendExample />
+      </section>
       <section>
-        <h3>Discrete color legend</h3>
-        <DiscreteColorLegendExample />
+        <h3>Horizontal legend</h3>
+        <HorizontalDiscreteColorLegendExample />
       </section>
       <section>
         <h3>Discrete color legend with search</h3>
         <SearchableDiscreteColorLegendExample />
       </section>
+      <h2>Continuous color legend</h2>
       <section>
-        <h3>Continuous color legend</h3>
+        <h3>Default legend</h3>
         <ContinuousColorLegendExample />
       </section>
+      <h2>Continuous size legend</h2>
       <section>
-        <h3>Continuous size legend</h3>
+        <h3>Default legend</h3>
         <ContinuousSizeLegendExample />
       </section>
     </article>

diff --git a/src/example/main.scss b/src/example/main.scss
@@ -1,5 +1,4 @@
 @import url(https://fonts.googleapis.com/css?family=Sintony:400,700);
-
 @import "../main";
 
 body {
@@ -23,22 +22,66 @@ h2 {
   margin: 15px 0;
 }
 
+main {
+  padding: 40px 0;
+}
+
 header {
-  background: #333;
-  color: #fff;
-  font-size: 30px;
-  text-align: center;
+  background: #f0f0f0;
+  border-bottom: #e1e1e1 1px solid;
   line-height: 40px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+
+.header-contents {
+  min-width: 650px;
+  max-width: 1200px;
+  margin: 0 auto;
+  overflow: hidden;
 }
 
+.header-logo {
+  float: left;
+  font-size: 20px;
+  color: #000000;
+  text-decoration: none;
+}
+
+nav {
+  display: inline-block;
+  font-size: 16px;
+  list-style-type: none;
+  margin: 0;
+  float: right;
+  padding: 0;
+  font-weight: 400;
+  li {
+    padding: 0;
+    display: inline-block;
+  }
+  a {
+    color: #494949;
+    display: block;
+    padding: 0 15px;
+    text-decoration: none;
+    transition: all 0.2s;
+    &:hover {
+      background: #E5E5E4;
+      color: #1C1B1B;
+    }
+  }
+}
 
 article {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: flex-start;
-  margin: 20px auto;
-  padding: 0 20px;
+  margin: 0 auto;
+  padding: 30px 20px 0;
   min-width: 650px;
   max-width: 1200px;
 
@@ -50,6 +93,7 @@ article {
     width: 400px;
     flex-basis: 400px;
     flex-grow: 1;
+    margin: 0 0 40px;
   }
 }
 
@@ -66,7 +110,7 @@ article {
   &:hover {
     background: #FF9833;
   }
-  animation: shake 5s 1s cubic-bezier(.36,.07,.19,.97) both infinite;
+  animation: shake 5s 1s cubic-bezier(.36, .07, .19, .97) both infinite;
   transform: translate3d(0, 0, 0);
 }
 

diff --git a/src/example/plot/dynamic-crosshair.js b/src/example/plot/dynamic-crosshair.js
@@ -29,19 +29,28 @@ import {
   LineSeries,
   Crosshair} from '../../';
 
+const DATA = [
+  [
+    {x: 1, y: 10},
+    {x: 2, y: 7},
+    {x: 3, y: 15}
+  ],
+  [
+    {x: 1, y: 20},
+    {x: 2, y: 5},
+    {x: 3, y: 15}
+  ]
+];
+
 export default class DynamicCrosshair extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       crosshairValues: []
     };
-    this._crosshairValues = [];
 
     this._onMouseLeave = this._onMouseLeave.bind(this);
-    this._onNearestXs = [
-      this._onNearestX.bind(this, 0),
-      this._onNearestX.bind(this, 1)
-    ];
+    this._onNearestX = this._onNearestX.bind(this);
   }
 
   /**
@@ -50,19 +59,16 @@ export default class DynamicCrosshair extends React.Component {
    * @param {Object} value Selected value.
    * @private
    */
-  _onNearestX(seriesIndex, value) {
-    this._crosshairValues = this._crosshairValues.concat();
-    this._crosshairValues[seriesIndex] = value;
-    this.setState({crosshairValues: this._crosshairValues});
+  _onNearestX(value, {index}) {
+    this.setState({crosshairValues: DATA.map(d => d[index])});
   }
 
   /**
    * Event handler for onMouseLeave.
    * @private
    */
   _onMouseLeave() {
-    this._crosshairValues = [];
-    this.setState({crosshairValues: this._crosshairValues});
+    this.setState({crosshairValues: []});
   }
 
   render() {
@@ -76,19 +82,10 @@ export default class DynamicCrosshair extends React.Component {
         <XAxis />
         <YAxis />
         <LineSeries
-          onNearestX={this._onNearestXs[0]}
-          data={[
-            {x: 1, y: 10},
-            {x: 2, y: 7},
-            {x: 3, y: 15}
-          ]}/>
+          onNearestX={this._onNearestX}
+          data={DATA[0]}/>
         <LineSeries
-          onNearestX={this._onNearestXs[1]}
-          data={[
-            {x: 1, y: 20},
-            {x: 2, y: 5},
-            {x: 3, y: 15}
-          ]}/>
+          data={DATA[1]}/>
         <Crosshair values={this.state.crosshairValues}/>
       </XYPlot>
     );

diff --git a/src/lib/legends/discrete-color-legend-item.js b/src/lib/legends/discrete-color-legend-item.js
@@ -24,15 +24,16 @@ const propTypes = {
   title: React.PropTypes.string.isRequired,
   color: React.PropTypes.string.isRequired,
   disabled: React.PropTypes.bool,
-  onClick: React.PropTypes.func
+  onClick: React.PropTypes.func,
+  orientation: React.PropTypes.oneOf(['vertical', 'horizontal']).isRequired
 };
 
 const defaultProps = {
   disabled: false
 };
 
-function DiscreteColorLegendItem({onClick, title, color, disabled}) {
-  let className = 'rv-discrete-color-legend-item';
+function DiscreteColorLegendItem({onClick, title, color, disabled, orientation}) {
+  let className = `rv-discrete-color-legend-item ${orientation}`;
   if (disabled) {
     className += ' disabled';
   }

diff --git a/src/lib/legends/discrete-color-legend.js b/src/lib/legends/discrete-color-legend.js
@@ -35,11 +35,13 @@ const propTypes = {
   ).isRequired,
   onItemClick: React.PropTypes.func,
   height: React.PropTypes.number,
-  width: React.PropTypes.number
+  width: React.PropTypes.number,
+  orientation: React.PropTypes.oneOf(['vertical', 'horizontal'])
 };
 
 const defaultProps = {
-  colors: DISCRETE_COLOR_RANGE
+  colors: DISCRETE_COLOR_RANGE,
+  orientation: 'vertical'
 };
 
 function fillItemsWithDefaults(items) {
@@ -55,13 +57,14 @@ function fillItemsWithDefaults(items) {
 }
 
 function DiscreteColorLegend({items: initialItems, width, height,
-  onItemClick}) {
+  onItemClick, orientation}) {
   const updatedItems = fillItemsWithDefaults(initialItems);
   return (
-    <div className="rv-discrete-color-legend" style={{width, height}}>
+    <div className={`rv-discrete-color-legend ${orientation}`} style={{width, height}}>
       {updatedItems.map((item, i) =>
         <DiscreteColorLegendItem
           {...item}
+          orientation={orientation}
           key={i}
           onClick={onItemClick ?
             () => onItemClick(initialItems[i], i) :