faster number formatting; #2103
Costa Tsaousis (ktsaou) committed
Apr 19, 2017 at 21:53 UTC
fe949b89370333e066d8776e1d46585e285c8f47
2 files changed
+83
-24
web/dashboard.js
+82
-23
@@ -733,6 +733,59 @@ var NETDATA = window.NETDATA || {};
733
NETDATA.errorLast.datetime = 0;
734
};
735
736
+ // ----------------------------------------------------------------------------------------------------------------
737
+ // fast numbers formating
738
+
739
+ NETDATA.fastNumberFormat = {
740
+ formatters_fixed: [],
741
+ formatters_zero_based: [],
742
+
743
+ get: function(min, max) {
744
+ var key = max;
745
+ if(min == max) {
746
+ if(typeof this.formatters_fixed[key] == 'undefined')
747
+ this.formatters_fixed[key] = new Intl.NumberFormat(undefined, {
748
+ // style: 'decimal',
749
+ // minimumIntegerDigits: 1,
750
+ // minimumSignificantDigits: 1,
751
+ // maximumSignificantDigits: 1,
752
+ useGrouping: true,
753
+ minimumFractionDigits: min,
754
+ maximumFractionDigits: max
755
+ });
756
+
757
+ return this.formatters_fixed[key];
758
+ }
759
+ else if(min == 0) {
760
+ if(typeof this.formatters_zero_based[key] == 'undefined')
761
+ this.formatters_zero_based[key] = new Intl.NumberFormat(undefined, {
762
+ // style: 'decimal',
763
+ // minimumIntegerDigits: 1,
764
+ // minimumSignificantDigits: 1,
765
+ // maximumSignificantDigits: 1,
766
+ useGrouping: true,
767
+ minimumFractionDigits: min,
768
+ maximumFractionDigits: max
769
+ });
770
+
771
+ return this.formatters_zero_based[key];
772
+ }
773
+ else {
774
+ // this is never used
775
+ // it is added just for completeness
776
+ return new Intl.NumberFormat(undefined, {
777
+ // style: 'decimal',
778
+ // minimumIntegerDigits: 1,
779
+ // minimumSignificantDigits: 1,
780
+ // maximumSignificantDigits: 1,
781
+ useGrouping: true,
782
+ minimumFractionDigits: min,
783
+ maximumFractionDigits: max
784
+ });
785
+ }
786
+ }
787
+ };
788
+
789
// ----------------------------------------------------------------------------------------------------------------
790
// commonMin & commonMax
791
@@ -2248,6 +2301,7 @@ var NETDATA = window.NETDATA || {};
2301
var __legendFormatValueChartDecimalsLastMin = undefined;
2302
var __legendFormatValueChartDecimalsLastMax = undefined;
2303
var __legendFormatValueChartDecimals = -1;
2304
+ var __intlNumberFormat = null;
2305
this.legendFormatValueDecimalsFromMinMax = function(min, max) {
2306
if(min === __legendFormatValueChartDecimalsLastMin && max === __legendFormatValueChartDecimalsLastMax)
2307
return;
@@ -2255,13 +2309,18 @@ var NETDATA = window.NETDATA || {};
2309
__legendFormatValueChartDecimalsLastMin = min;
2310
__legendFormatValueChartDecimalsLastMax = max;
2311
2312
+ var old = __legendFormatValueChartDecimals;
2313
+
2314
if(this.data !== null && this.data.min === this.data.max)
2315
+ // it is a fixed number, let the visualizer decide based on the value
2316
__legendFormatValueChartDecimals = -1;
2317
2318
else if(this.value_decimal_detail !== -1)
2319
+ // there is an override
2320
__legendFormatValueChartDecimals = this.value_decimal_detail;
2321
2322
else {
2323
+ // ok, let's calculate the proper number of decimal points
2324
var delta;
2325
2326
if (min === max)
@@ -2275,39 +2334,39 @@ var NETDATA = window.NETDATA || {};
2334
else if (delta > 0.1) __legendFormatValueChartDecimals = 2;
2335
else __legendFormatValueChartDecimals = 4;
2336
}
2337
+
2338
+ if(__legendFormatValueChartDecimals != old) {
2339
+ if(__legendFormatValueChartDecimals < 0)
2340
+ __intlNumberFormat = null;
2341
+ else
2342
+ __intlNumberFormat = NETDATA.fastNumberFormat.get(
2343
+ __legendFormatValueChartDecimals,
2344
+ __legendFormatValueChartDecimals
2345
+ );
2346
+ }
2347
};
2348
2349
this.legendFormatValue = function(value) {
2350
if(typeof value !== 'number') return '-';
2351
2283
- var dmin, dmax;
2284
-
2285
- if(__legendFormatValueChartDecimals < 0) {
2286
- dmin = 0;
2287
- var abs = value;
2288
- if(abs > 1000) dmax = 0;
2289
- else if(abs > 10 ) dmax = 1;
2290
- else if(abs > 1) dmax = 2;
2291
- else if(abs > 0.1) dmax = 2;
2292
- else dmax = 4;
2293
- }
2294
- else {
2295
- dmin = dmax = __legendFormatValueChartDecimals;
2296
- }
2352
+ if(__intlNumberFormat !== null)
2353
+ return __intlNumberFormat.format(value);
2354
2355
+ var dmin, dmax;
2356
if(this.value_decimal_detail !== -1) {
2357
dmin = dmax = this.value_decimal_detail;
2358
}
2359
+ else {
2360
+ dmin = 0;
2361
+ var abs = (value < 0) ? -value : value;
2362
+ if (abs > 1000) dmax = 0;
2363
+ else if (abs > 10) dmax = 1;
2364
+ else if (abs > 1) dmax = 2;
2365
+ else if (abs > 0.1) dmax = 2;
2366
+ else dmax = 4;
2367
+ }
2368
2302
- return value.toLocaleString(undefined, {
2303
- // style: 'decimal',
2304
- // minimumIntegerDigits: 1,
2305
- // minimumSignificantDigits: 1,
2306
- // maximumSignificantDigits: 1,
2307
- useGrouping: true,
2308
- minimumFractionDigits: dmin,
2309
- maximumFractionDigits: dmax
2310
- });
2369
+ return NETDATA.fastNumberFormat.get(dmin, dmax).format(value);
2370
};
2371
2372
this.legendSetLabelValue = function(label, value) {
web/index.html
+1
-1
@@ -3523,4 +3523,4 @@
3523
</div>
3524
</body>
3525
</html>
3526
-<script type="text/javascript" src="dashboard.js?v20170402-1"></script>
3526
+<script type="text/javascript" src="dashboard.js?v20170419-1"></script>