Merge pull request #1116 from metabase/misc_fixes

Misc frontend fixes

frontend/app/card/card.charting.js

@@ -388,21 +388,15 @@ function applyChartTooltips(dcjsChart, card, cols) {
 
         chart.selectAll('rect.bar,circle.dot,g.pie-slice path,circle.bubble,g.row rect')
             .call(tip)
-            .on('mouseover.tip', function(x) {
+            .on('mouseover.tip', function(slice) {
                 tip.show.apply(tip, arguments);
                 if (card.display === "pie") {
-                    var arc = d3.svg.arc()
-                        .outerRadius(chart.radius()).innerRadius(x.innerRadius)
-                        .padAngle(x.padAngle).startAngle(x.startAngle).endAngle(x.endAngle);
-                    var centroid = arc.centroid();
-                    var pieRect = this.parentNode.parentNode.getBoundingClientRect();
-                    var pieCenter = [pieRect.left + chart.radius(), pieRect.top + chart.radius()];
                     var tooltip = d3.select('.ChartTooltip');
-                    var tooltipRect = tooltip[0][0].getBoundingClientRect();
-                    var tooltipOffset = [-tooltipRect.width / 2, -tooltipRect.height - 20];
+                    let tooltipOffset = getTooltipOffset(tooltip);
+                    let sliceCentroid = getPieSliceCentroid(this, slice);
                     tooltip.style({
-                        top: pieCenter[1] + tooltipOffset[1] + centroid[1] + "px",
-                        left: pieCenter[0] + tooltipOffset[0] + centroid[0] + "px",
+                        top: tooltipOffset.y + sliceCentroid.y + "px",
+                        left: tooltipOffset.x + sliceCentroid.x + "px",
                         "pointer-events": "none" // d3-tip forces "pointer-events: all" which cases flickering when the tooltip is under the cursor
                     });
                 }
@@ -413,6 +407,32 @@ function applyChartTooltips(dcjsChart, card, cols) {
     });
 }
 
+function getPieSliceCentroid(element, slice) {
+    var parent = element.parentNode.parentNode;
+    var radius = parent.getBoundingClientRect().height / 2;
+    var innerRadius = 0;
+
+    var centroid = d3.svg.arc()
+        .outerRadius(radius).innerRadius(innerRadius)
+        .padAngle(slice.padAngle).startAngle(slice.startAngle).endAngle(slice.endAngle)
+        .centroid();
+
+    var pieRect = parent.getBoundingClientRect();
+
+    return {
+        x: pieRect.left + radius + centroid[0],
+        y: pieRect.top + radius + centroid[1]
+    };
+}
+
+function getTooltipOffset(tooltip) {
+    var tooltipRect = tooltip[0][0].getBoundingClientRect();
+    return {
+        x: -tooltipRect.width / 2,
+        y: -tooltipRect.height - 30
+    };
+}
+
 function lineAndBarOnRender(dcjsChart, card) {
     // once chart has rendered and we can access the SVG, do customizations to axis labels / etc that you can't do through dc.js
     var svg = dcjsChart.svg(),

frontend/app/lib/formatting.js

@@ -30,7 +30,7 @@ export function formatCell(value, column) {
     } else if (typeof value === "string") {
         return value;
     } else if (typeof value === "number") {
-        if (column.special_type === "latitude" || column.special_type === "longitude") {
+        if (column && (column.special_type === "latitude" || column.special_type === "longitude")) {
             return decimalDegreesFormatter(value)
         } else {
             return formatNumber(value);

frontend/app/lib/schema_metadata.js

@@ -389,3 +389,17 @@ export function addValidOperatorsToFields(table) {
     table.breakout_options = getBreakouts(table.fields);
     return table;
 }
+
+export function hasLatitudeAndLongitudeColumns(columnDefs) {
+    let hasLatitude = false;
+    let hasLongitude = false;
+    for (let col of columnDefs) {
+        if (col.special_type === "latitude") {
+            hasLatitude = true;
+        }
+        if (col.special_type === "longitude") {
+            hasLongitude = true;
+        }
+    }
+    return hasLatitude && hasLongitude;
+}

frontend/app/query_builder/QueryVisualizationChart.react.js

 import { CardRenderer } from '../card/card.charting';
 
+import { hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
+
 export default React.createClass({
     displayName: 'QueryVisualizationChart',
     propTypes: {
@@ -54,7 +56,7 @@ export default React.createClass({
             // then lets inform the user that this isn't going to work so they can do something better
             var dataError;
             if (this.props.card.display === "pin_map" &&
-                    !this.hasLatitudeAndLongitudeColumns(this.props.data.cols)) {
+                    !hasLatitudeAndLongitudeColumns(this.props.data.cols)) {
                 dataError = "Bummer.  We can't actually do a pin map for this data because we require both a latitude and longitude column.";
             } else if (this.props.data.columns && this.props.data.columns.length < 2) {
                 dataError = "Doh!  The data from your query doesn't fit the chosen display choice.  This visualization requires at least 2 columns of data.";
@@ -83,6 +85,7 @@ export default React.createClass({
                 var cardIsh = {
                     name: this.props.card.name,
                     display: this.props.card.display,
+                    dataset_query: this.props.card.dataset_query,
                     visualization_settings: vizSettings
                 };
 

frontend/app/query_builder/VisualizationSettings.react.js

 import Icon from "metabase/components/Icon.react";
 import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.react";
 
+import { hasLatitudeAndLongitudeColumns } from "metabase/lib/schema_metadata";
+
 import cx from "classnames";
 
 export default React.createClass({
@@ -53,23 +55,6 @@ export default React.createClass({
         this.refs.colorPopover.toggle();
     },
 
-    hasLatitudeAndLongitudeColumns: function(columnDefs) {
-        var hasLatitude = false,
-            hasLongitude = false;
-        columnDefs.forEach(function(col, index) {
-            if (col.special_type &&
-                    col.special_type === "latitude") {
-                hasLatitude = true;
-
-            } else if (col.special_type &&
-                    col.special_type === "longitude") {
-                hasLongitude = true;
-            }
-        });
-
-        return (hasLatitude && hasLongitude);
-    },
-
     isSensibleChartDisplay: function(display) {
         var data = (this.props.result) ? this.props.result.data : null;
         switch (display) {
@@ -81,7 +66,7 @@ export default React.createClass({
                 return (data && data.rows && data.rows.length === 1 && data.cols && data.cols.length === 1);
             case "pin_map":
                 // when we have a latitude and longitude a pin map is cool
-                return (data && this.hasLatitudeAndLongitudeColumns(data.cols));
+                return (data && hasLatitudeAndLongitudeColumns(data.cols));
             case "line":
             case "area":
                 // if we have 2x2 or more then that's enough to make a line/area chart