Move CardRenderer.jsx and legend header to subdirectory

frontend/src/components/dashboard/dashboard.css

@@ -38,7 +38,7 @@
   overflow: hidden;
 }
 
-.DashCard .Card-outer {
+.Card-outer {
     overflow: hidden;
     width: 100%;
     height: 100%;

frontend/src/css/query_builder.css

@@ -227,7 +227,7 @@
     font-weight: 200;
 }
 
-.Visualization .Card-outer {
+.Card-outer {
     width: 100%;
     height: 100%;
     display: flex;

frontend/src/dashboard/components/DashCard.jsx

@@ -41,6 +41,7 @@ export default class DashCard extends Component {
                 this.props.dashcard.series.map(this.props.fetchCardData)
             );
         } catch (error) {
+            console.error("DashCard error", error)
             this.setState({ error });
         }
     }

frontend/src/visualizations/AreaChart.jsx

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from "react";
 
 import { MinColumnsError, MinRowsError } from "./errors";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 export default class AreaChart extends Component {
     static displayName = "Area";

frontend/src/visualizations/BarChart.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
+import LegendHeader from "./components/LegendHeader.jsx"
 
 import { MinColumnsError } from "./errors";
 
 export default class BarChart extends Component {
     static displayName = "Bar";
-    static identifier = "bar-old";
+    static identifier = "bar";
     static iconName = "bar";
 
+    static noHeader = true;
+
     static isSensible(cols, rows) {
         return cols.length > 1;
     }
@@ -18,8 +21,12 @@ export default class BarChart extends Component {
     }
 
     render() {
+        let { card, series, onAddSeries } = this.props;
         return (
-            <CardRenderer className="flex-full" {...this.props} chartType="bar" />
+            <div className="flex flex-full flex-column p2">
+                <LegendHeader card={card} series={series} onAddSeries={onAddSeries} />
+                    <CardRenderer className="flex-full" {...this.props} chartType="bar" />
+            </div>
         );
     }
 }

frontend/src/visualizations/LineChart.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 import { MinColumnsError, MinRowsError } from "./errors";
 

frontend/src/visualizations/NewBarChart.jsx

 import React, { Component, PropTypes } from "react";
 
 import ExplicitSize from "metabase/components/ExplicitSize.jsx";
-import Icon from "metabase/components/Icon.jsx";
 
 import { Bar } from "react-chartjs";
 
+import LegendHeader from "./components/LegendHeader.jsx"
+
 import { MinColumnsError } from "./errors";
 
 import { formatValue } from "metabase/lib/formatting";
@@ -63,7 +64,7 @@ function mergeSeries(series) {
 
 export default class NewBarChart extends Component {
     static displayName = "Bar (chart.js)";
-    static identifier = "bar";
+    static identifier = "bar-new";
     static iconName = "bar";
 
     static noHeader = true;
@@ -80,36 +81,11 @@ export default class NewBarChart extends Component {
         series: []
     };
 
-    renderLegendItem(card, index) {
-        return (
-            <span key={index} className="h3 mr2 mb1 text-bold flex align-center">
-                <span className="inline-block circular" style={{width: 13, height: 13, backgroundColor: COLORS[index % COLORS.length]}} />
-                <span className="ml1">{card.name}</span>
-            </span>
-        )
-    }
-
     render() {
-        let { card, series } = this.props;
-
-        let headers = [];
-        headers.push(this.renderLegendItem(card, 0));
-        for (let [index, s] of series.entries()) {
-            headers.push(this.renderLegendItem(s.card, index + 1));
-        }
-
-        if (this.props.onAddSeries) {
-            headers.push(
-                <a className="h3 mr2 mb1 cursor-pointer flex align-center text-brand-hover" style={{ pointerEvents: "all" }} onClick={this.props.onAddSeries}>
-                    <Icon className="circular bordered border-brand text-brand" style={{ padding: "0.25em" }} name="add" width={12} height={12} />
-                    <span className="ml1">Add data</span>
-                </a>
-            );
-        }
-
+        let { card, series, onAddSeries } = this.props;
         return (
             <div className="flex flex-full flex-column px4 py2">
-                <div className="Card-title my1 flex flex-no-shrink flex-row flex-wrap">{headers}</div>
+                <LegendHeader card={card} series={series} onAddSeries={onAddSeries} />
                 <BarChart className="flex-full" {...this.props} />
             </div>
         );

frontend/src/visualizations/PieChart.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 import { MinColumnsError } from "./errors";
 

frontend/src/visualizations/PinMap.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 import { hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
 

frontend/src/visualizations/USStateMap.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 import { isString } from "metabase/lib/schema_metadata";
 

frontend/src/visualizations/WorldMap.jsx

 import React, { Component, PropTypes } from "react";
 
-import CardRenderer from "./CardRenderer.jsx";
+import CardRenderer from "./components/CardRenderer.jsx";
 
 import { isString } from "metabase/lib/schema_metadata";
 

frontend/src/visualizations/CardRenderer.jsx → frontend/src/visualizations/components/CardRenderer.jsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 
 import ExplicitSize from "metabase/components/ExplicitSize.jsx";
 
-import * as charting from '../card/card.charting';
+import * as charting from "metabase/card/card.charting";
 
 import { getSettingsForVisualization, setLatitudeAndLongitude } from "metabase/lib/visualization_settings";
 

frontend/src/visualizations/components/LegendHeader.jsx

+import React, { Component, PropTypes } from "react";
+
+import Icon from "metabase/components/Icon.jsx";
+
+const COLORS = ["#4A90E2", "#84BB4C", "#F9CF48", "#ED6E6E", "#885AB1"];
+
+const LegendHeader = ({ card, series, onAddSeries }) =>
+    <div className="Card-title my1 flex flex-no-shrink flex-row flex-wrap">
+        <LegendItem card={card} index={0} />
+        { series && series.map((s, index) =>
+            <LegendItem key={index} card={s.card} index={index + 1} />
+        )}
+        { onAddSeries &&
+            <AddSeriesItem onAddSeries={onAddSeries} />
+        }
+    </div>
+
+const LegendItem = ({ card, index }) =>
+    <span key={index} className="h3 mr2 mb1 text-bold flex align-center">
+        <span className="inline-block circular" style={{width: 13, height: 13, margin: 4, marginRight: 8, backgroundColor: COLORS[index % COLORS.length]}} />
+        <span>{card.name}</span>
+    </span>
+
+const AddSeriesItem = ({ onAddSeries }) =>
+    <a className="h3 mr2 mb1 cursor-pointer flex align-center text-brand-hover" style={{ pointerEvents: "all" }} onClick={onAddSeries}>
+        <span className="circular bordered border-brand flex layout-centered" style={{ width: 20, height: 20, marginRight: 8 }}>
+            <Icon className="text-brand" name="add" width={12} height={12} />
+        </span>
+        <span>Add data</span>
+    </a>
+
+export default LegendHeader;