Center popover triangle, wire up current chart type icon, etc

resources/frontend_client/app/components/popover/popover.css

@@ -31,20 +31,39 @@
 	border-bottom: 10px solid transparent;
 }
 
-/* create a slightly larger arrow for border purposes */
-.PopoverBody--withArrow:before {
+/* create a slightly larger arrow on the top for border purposes */
+.tether-element-attached-top .PopoverBody--withArrow:before {
 	top: -20px;
 	border-bottom-color: #ddd;
 }
 
-/* create a smaller inset arrow */
-.PopoverBody:after {
+/* create a smaller inset arrow on the top */
+.tether-element-attached-top .PopoverBody--withArrow:after {
 	top: -18px;
 	border-bottom-color: #fff;
 }
 
+/* create a slightly larger arrow on the bottom for border purposes */
+.tether-element-attached-bottom .PopoverBody--withArrow:before {
+	bottom: -20px;
+	border-top-color: #ddd;
+}
+
+/* create a smaller inset arrow on the bottom */
+.tether-element-attached-bottom .PopoverBody--withArrow:after {
+	bottom: -18px;
+	border-top-color: #fff;
+}
+
 /* if the tether element is attached right, move our arrows right */
 .tether-target-attached-right .PopoverBody--withArrow:before,
 .tether-target-attached-right .PopoverBody--withArrow:after {
 	right: 12px;
 }
+
+/* if the tether element is attached center, move our arrows to the center */
+.tether-element-attached-center .PopoverBody--withArrow:before,
+.tether-element-attached-center .PopoverBody--withArrow:after {
+	margin-left: 50%;
+	left: -10px;
+}

resources/frontend_client/app/query_builder/visualization.react.js

@@ -24,15 +24,15 @@ export default React.createClass({
     },
 
     visualizationTypeNames: {
-        'scalar': 'Number',
-        'table': 'Table',
-        'line': 'Line',
-        'bar': 'Bar',
-        'pie': 'Pie',
-        'area': 'Area',
-        'state': 'State map',
-        'country': 'Country map',
-        'pin_map': 'Pin map'
+        'scalar':  { displayName: 'Number',      iconName: 'number' },
+        'table':   { displayName: 'Table',       iconName: 'table' },
+        'line':    { displayName: 'Line',        iconName: 'line' },
+        'bar':     { displayName: 'Bar',         iconName: 'bar' },
+        'pie':     { displayName: 'Pie',         iconName: 'pie' },
+        'area':    { displayName: 'Area',        iconName: 'area' },
+        'state':   { displayName: 'State map',   iconName: 'statemap' },
+        'country': { displayName: 'Country map', iconName: 'countrymap' },
+        'pin_map': { displayName: 'Pin map',     iconName: 'pinmap' }
     },
 
     getDefaultProps: function() {
@@ -135,12 +135,13 @@ export default React.createClass({
         var tetherOptions = {
             attachment: 'bottom center',
             targetAttachment: 'top center',
-            targetOffset: '-25px 0'
+            targetOffset: '-15px 0'
         };
+        var currentIconName = this.visualizationTypeNames[this.props.card.display].iconName;
         var chartTypeButton = (
                 <div className="inline-block">
                     <span className="ChartType-button text-brand text-brand-hover shadowed flex layout-centered">
-                        <Icon name="star" width="18px" height="18px"></Icon>
+                        <Icon name={currentIconName} width="30px" height="30px"></Icon>
                     </span>
                 </div>
         );
@@ -156,20 +157,19 @@ export default React.createClass({
                 'ChartType--selected': type === this.props.card.display,
                 'ChartType--notSensible': !this.isSensibleChartDisplay(type),
             });
-            var name = this.visualizationTypeNames[type] || type;
-            console.log(name);
-            var iconName = name.replace(/\s+/g, '').toLowerCase();
+            var displayName = this.visualizationTypeNames[type].displayName;
+            var iconName = this.visualizationTypeNames[type].iconName;
             return (
                 <li className={classes} key={index} onClick={this.setDisplay.bind(null, type)}>
                     <Icon name={iconName} width="24px" height="24px"/>
-                    <span className="ml1">{name}</span>
+                    <span className="ml1">{displayName}</span>
                 </li>
             );
         });
         return (
             <span className="flex align-center">
                 Visualize as
-                <PopoverWithTrigger className="PopoverBody ChartType-popover"
+                <PopoverWithTrigger className="PopoverBody PopoverBody--withArrow ChartType-popover"
                                     tetherOptions={tetherOptions}
                                     triggerElement={chartTypeButton}>
                     <ul className="">