View ElementQuery.js
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import isNumber from 'lodash/isNumber';
import elementResizeDetector from 'element-resize-detector';
let erd;
if (__CLIENT__) {
erd = elementResizeDetector({
strategy: 'scroll'
View getXRange.js
getXrange(data) {
const xRange = this.props.xRange
let max = -Infinity
let min = Infinity
if (xRange.max) {
max = xRange.max
if (xRange.min) {
min = xRange.min
if (xRange.pivotNumber) {

Some reading before it:

How to cancel a bunch of requests?

var requestManager = new RequestManager();
var request1 = myApi.get('/resource1');
var request2 = myApi.get('/resource2');

requestManager.addAll([request1, request2]);

Cached API client with decorator

This approach has some really cool benefits:

  • The API class stays as a small and clean unit
  • Easy to use other caching techniques. Even multiple are supported simultaneously
  • Explicit code

Http Client


Number Formatter: how to use

// some pre-made formatters
var myFormatFn = NumberFormatter.PERCENT; // check NumberFormatter.js for more
myFormatFn(0.54122); // '54.1%'
myFormatFn('0.54122'); // '54.1%'

var formatter = new NumberFormatter();

Date Formatter: how to use

var formatter = new DateFormatter();

// get a formatting callback(date) -> string
var myChartSettings = {
    tickFormatter: formatter.createCallbackUsing(DateFormatter.FULL_HOUR)