Use custom function for number formatting

app/index.html

@@ -19,7 +19,7 @@
     <script src="/bower_components/react/react.js"></script>
     <script src="/bower_components/react-router/build/global/ReactRouter.js"></script>
     <script src="/bower_components/lodash/lodash.js"></script>
-    <script src="/js/date.js"></script>
+    <script src="/js/format.js"></script>
     <script src="/js/http.js"></script>
     <script src="/js/colors.js"></script>
     <script src="/js/svground.js"></script>

app/js/format.js

@@ -17,3 +17,13 @@ function formatDate(ts, showYear) {
         return month +' '+ day;
     }
 }
+
+function formatNumber(num) {
+    x = (''+ num).split('.');
+    x1 = x[0];
+    x2 = x.length > 1 ? '.' + x[1] : '';
+    while (/(\d+)(\d{3})/.test(x1)) {
+        x1 = x1.replace(/(\d+)(\d{3})/, '$1,$2');
+    }
+    return x1 + x2;
+}

app/jsx/charts/bar_chart.jsx

@@ -209,7 +209,7 @@ var Bar = React.createClass({
     calculateLabelPosition: function() {
         var val = this.props.value,
             offset = this.props.offset,
-            label = this.props.item + ': ' + numberFormat(val),
+            label = this.props.item + ': ' + formatNumber(val),
             labelWidth = textWidth(label),
             labelOffsetWidth = labelWidth + 2*this.labelPaddingH,
             labelX;
@@ -247,7 +247,7 @@ var Bar = React.createClass({
     },
 
     render: function() {
-        var label = this.props.item ? (this.props.item + ': ' + numberFormat(this.props.value)) : '',
+        var label = this.props.item ? (this.props.item + ': ' + formatNumber(this.props.value)) : '',
             labelWidth = textWidth(label),
             labelOuterWidth = (labelWidth == 0 ? 0 : labelWidth + 2*this.labelPaddingH),
             barX = (this.state.lastBarX && this.state.lastBarX !== this.props.x

app/jsx/charts/charts.jsx

@@ -9,11 +9,6 @@ var SVGChartMixin = {
 var fontFamily = 'Helvetica Neue, Helvetica, sans-serif',
     fontSize = 16;
 
-function numberFormat(num) {
-    // FIXME: Not supported in IE10- and Safari
-    return Intl.NumberFormat().format(num);
-}
-
 function textWidth(str) {
     var svg = document.createElementNS('http://www.w3.org/2000/svg', "svg");
         text = document.createElementNS('http://www.w3.org/2000/svg', "text");

app/jsx/charts/stacked_area_chart.jsx

@@ -179,7 +179,7 @@ var StackedAreaChart = React.createClass({
             return (
                 <StackedArea key={'area-'+ i}
                     item={item} i={i}
-                    d={roundPathCorners(this.buildPathD(path), 4)}
+                    d={roundPathCorners(this.buildPathD(path), 3)}
                     color={Colors[i]}
                     onMouseOver={this.handleFocusIn.bind(this, i)} />
             );