Merge and parameterize formatValue and formatValueString

frontend/src/card/card.charting.js

@@ -6,7 +6,7 @@ import d3 from 'd3';
 import dc from 'dc';
 import moment from 'moment';
 
-import { formatNumber, formatValueString } from "metabase/lib/formatting";
+import { formatNumber, formatValue } from "metabase/lib/formatting";
 
 import tip from 'd3-tip';
 tip(d3);
@@ -179,7 +179,7 @@ function applyChartTimeseriesXAxis(chart, card, coldefs, data) {
         chart.renderVerticalGridLines(x.gridLine_enabled);
 
         if (coldefs[0] && coldefs[0].unit) {
-            xAxis.tickFormat(d => formatValueString(d, coldefs[0]));
+            xAxis.tickFormat(d => formatValue(d, coldefs[0]));
         } else {
             xAxis.tickFormat(d3.time.format.multi([
                 [".%L",    (d) => d.getMilliseconds()],
@@ -314,7 +314,7 @@ function applyChartOrdinalXAxis(chart, card, coldefs, data, minPixelsPerTick) {
 
             xAxis.tickValues(visibleKeys);
         }
-        xAxis.tickFormat(d => formatValueString(d, coldefs[0]));
+        xAxis.tickFormat(d => formatValue(d, coldefs[0]));
     } else {
         xAxis.ticks(0);
         xAxis.tickFormat('');
@@ -382,7 +382,7 @@ function applyChartTooltips(chart, element, card, cols) {
                     // TODO: this is not the ideal way to calculate the percentage, but it works for now
                     values += " (" + formatNumber((d.endAngle - d.startAngle) / Math.PI * 50) + '%)'
                 }
-                return '<div><span class="ChartTooltip-name">' + formatValueString(d.data.key, cols[0]) + '</span></div>' +
+                return '<div><span class="ChartTooltip-name">' + formatValue(d.data.key, cols[0]) + '</span></div>' +
                     '<div><span class="ChartTooltip-value">' + values + '</span></div>';
             });
 
@@ -766,7 +766,7 @@ export var CardRenderer = {
                         .group(group)
                         .colors(settings.pie.colors)
                         .colorCalculator((d, i) => settings.pie.colors[((i * 5) + Math.floor(i / 5)) % settings.pie.colors.length])
-                        .label(row => formatValueString(row.key, result.cols[0]))
+                        .label(row => formatValue(row.key, result.cols[0]))
                         .title(function(d) {
                             // ghetto rounding to 1 decimal digit since Math.round() doesn't let
                             // you specify a precision and always rounds to int

frontend/src/lib/formatting.js

@@ -26,31 +26,38 @@ export function formatScalar(scalar) {
     }
 }
 
-function formatMajorMinor(major, minor, majorWidth = 3) {
-    return (
-        <span>
-            <span style={{minWidth: majorWidth + "em"}} className="inline-block text-right text-bold">{major}</span>
-            {" - "}
-            <span>{minor}</span>
-        </span>
-    );
+function formatMajorMinor(major, minor, options = {}) {
+    options = { jsx: false, majorWidth: 3, ...options };
+    if (options.jsx) {
+        return (
+            <span>
+                <span style={{minWidth: options.majorWidth + "em"}} className="inline-block text-right text-bold">{major}</span>
+                {" - "}
+                <span>{minor}</span>
+            </span>
+        );
+    } else {
+        return `${major} - ${minor}`;
+    }
 }
 
-export function formatWithUnit(value, unit) {
+export function formatWithUnit(value, unit, options = {}) {
     let m = moment(value);
     switch (unit) {
         case "hour": // 12 AM - January 1, 2015
-            return formatMajorMinor(m.format("h A"), m.format("MMMM D, YYYY"));
+            return formatMajorMinor(m.format("h A"), m.format("MMMM D, YYYY"), options);
         case "day": // January 1, 2015
             return m.format("MMMM D, YYYY");
         case "week": // 1st - 2015
-            return formatMajorMinor(m.format("wo"), m.format("YYYY"));
+            return formatMajorMinor(m.format("wo"), m.format("YYYY"), options);
         case "month": // January 2015
-            return <div><span className="text-bold">{m.format("MMMM")}</span> {m.format("YYYY")}</div>;
+            return options.jsx ?
+                <div><span className="text-bold">{m.format("MMMM")}</span> {m.format("YYYY")}</div> :
+                m.format("MMMM") + " " + m.format("YYYY");
         case "year": // 2015
             return String(value);
         case "quarter": // Q1 - 2015
-            return formatMajorMinor(m.format("[Q]Q"), m.format("YYYY"), 0);
+            return formatMajorMinor(m.format("[Q]Q"), m.format("YYYY"), { ...options, majorWidth: 0 });
         case "hour-of-day": // 12 AM
             return moment().hour(value).format("h A");
         case "day-of-week": // Sunday
@@ -63,11 +70,12 @@ export function formatWithUnit(value, unit) {
     return String(value);
 }
 
-export function formatValue(value, column) {
+export function formatValue(value, column, options = {}) {
+    options = { jsx: false, ...options };
     if (value == undefined) {
         return null
     } else if (column && column.unit != null) {
-        return formatWithUnit(value, column.unit)
+        return formatWithUnit(value, column.unit, options)
     } else if (typeof value === "string") {
         return value;
     } else if (typeof value === "number") {
@@ -84,12 +92,6 @@ export function formatValue(value, column) {
     }
 }
 
-export function formatValueString(value, column) {
-    var e = document.createElement("div");
-    React.render(<div>{formatValue(value, column)}</div>, e);
-    return e.textContent;
-}
-
 export function singularize(...args) {
     return inflection.singularize(...args);
 }

frontend/src/visualizations/NewBarChart.jsx

@@ -7,7 +7,7 @@ import { Bar } from "react-chartjs";
 
 import { MinColumnsError } from "./errors";
 
-import { formatValueString } from "metabase/lib/formatting";
+import { formatValue } from "metabase/lib/formatting";
 
 const COLORS = ["#4A90E2", "#84BB4C", "#F9CF48", "#ED6E6E", "#885AB1"];
 
@@ -34,7 +34,7 @@ function mergeSeries(series) {
         for (let row of rows) {
             if (!labelsMap.has(row[0])) {
                 labelsMap.set(row[0], result.labels.length);
-                result.labels.push(formatValueString(row[0], col));
+                result.labels.push(formatValue(row[0], col));
             }
             data[labelsMap.get(row[0])] = row[1];
         }

frontend/src/visualizations/TableInteractive.jsx

@@ -178,7 +178,7 @@ export default class TableInteractive extends Component {
     }
 
     cellRenderer(cellData, cellDataKey, rowData, rowIndex, columnData, width) {
-        cellData = cellData != null ? formatValue(cellData, this.state.data.cols[cellDataKey]) : null;
+        cellData = cellData != null ? formatValue(cellData, this.state.data.cols[cellDataKey], { jsx: true }) : null;
 
         var key = 'cl'+rowIndex+'_'+cellDataKey;
         if (this.props.cellIsClickableFn(rowIndex, cellDataKey)) {