Rename 'Add Data' to 'Edit Data', add 'x' to remove series

frontend/src/dashboard/components/AddSeriesModal.jsx

@@ -37,7 +37,7 @@ export default class AddSeriesModal extends Component {
             badCards: {}
         };
 
-        _.bindAll(this, "onSearchChange", "onDone", "filteredCards")
+        _.bindAll(this, "onSearchChange", "onDone", "filteredCards", "onRemoveSeries")
     }
 
     static propTypes = {
@@ -107,6 +107,10 @@ export default class AddSeriesModal extends Component {
         }
     }
 
+    onRemoveSeries(card) {
+        this.setState({ series: this.state.series.filter(c => c.id !== card.id) });
+    }
+
     onDone() {
         this.props.setDashCardAttributes({
             id: this.props.dashcard.id,
@@ -189,13 +193,14 @@ export default class AddSeriesModal extends Component {
         return (
             <div className="absolute top left bottom right flex">
                 <div className="flex flex-column flex-full">
-                    <div className="flex-no-shrink h3 pl4 pt4 pb1 text-bold">Add data</div>
+                    <div className="flex-no-shrink h3 pl4 pt4 pb1 text-bold">Edit data</div>
                     <div className="flex-full mx1 relative">
                         <Visualization
                             className="absolute top left bottom right"
                             series={series}
                             isDashboard={true}
                             isMultiseries={true}
+                            onRemoveSeries={this.onRemoveSeries}
                         />
                         { this.state.state &&
                             <div className="absolute top left bottom right flex layout-centered" style={{ backgroundColor: "rgba(255,255,255,0.80)" }}>

frontend/src/visualizations/components/LegendHeader.jsx

@@ -41,7 +41,7 @@ export default class LegendHeader extends Component {
     }
 
     render() {
-        const { series, hovered, onAddSeries, extraActions, onHoverChange } = this.props;
+        const { series, hovered, onAddSeries, onRemoveSeries, extraActions, onHoverChange } = this.props;
         const showDots = series.length > 1;
         const isNarrow = this.state.width < 150;
         const showTitles = !showDots || !isNarrow;
@@ -50,9 +50,10 @@ export default class LegendHeader extends Component {
         let colors = getCardColors(series[0].card);
         return (
             <div  className={cx(styles.LegendHeader, "Card-title m1 flex flex-no-shrink flex-row align-center")}>
-                { series.map((s, index) =>
-                    <LegendItem key={index} card={s.card} index={index} color={colors[index % colors.length]} showDots={showDots} showTitles={showTitles} muted={hoveredSeriesIndex != null && index !== hoveredSeriesIndex} onHoverChange={onHoverChange} />
-                )}
+                { series.map((s, index) => [
+                    <LegendItem key={index} card={s.card} index={index} color={colors[index % colors.length]} showDots={showDots} showTitles={showTitles} muted={hoveredSeriesIndex != null && index !== hoveredSeriesIndex} onHoverChange={onHoverChange} />,
+                    onRemoveSeries && index > 0 && <Icon className="text-grey-2 flex-no-shrink mr1 cursor-pointer" name="close" width={12} height={12} onClick={() => onRemoveSeries(s.card)} />
+                ])}
                 { onAddSeries &&
                     <span className="DashCard-actions flex-no-shrink">
                         <AddSeriesItem onAddSeries={onAddSeries} showTitles={!isNarrow} />
@@ -110,7 +111,7 @@ const AddSeriesItem = ({ onAddSeries, showTitles }) =>
         <span className="flex-no-shrink circular bordered border-brand flex layout-centered" style={{ width: 20, height: 20, marginRight: 8 }}>
             <Icon className="text-brand" name="add" width={10} height={10} />
         </span>
-        { showTitles && <span className="flex-no-shrink">Add data</span> }
+        { showTitles && <span className="flex-no-shrink">Edit data</span> }
     </a>
 
 export default LegendHeader;

frontend/src/visualizations/components/LineAreaBarChart.jsx

@@ -116,7 +116,7 @@ export default class LineAreaBarChart extends Component {
     }
 
     render() {
-        let { hovered, isDashboard, onAddSeries, extraActions, allowSplitAxis } = this.props;
+        let { hovered, isDashboard, onAddSeries, onRemoveSeries, extraActions, allowSplitAxis } = this.props;
         let { series, isMultiseries } = this.state;
 
         const chartType = this.constructor.identifier;
@@ -127,6 +127,7 @@ export default class LineAreaBarChart extends Component {
                     <LegendHeader
                         series={series}
                         onAddSeries={isMultiseries ? undefined : onAddSeries}
+                        onRemoveSeries={onRemoveSeries}
                         extraActions={extraActions}
                         hovered={hovered}
                         onHoverChange={this.props.onHoverChange}