react-chartjs

#react-chartjs-README.md

react-chartjs tests

Nothing special, just playing around with react-chartjs and jspm.

.gitignore

bundle*
jspm_packages

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },
  bundles: {
    "bundle.js": [
      "index.js",
      "github:jspm/nodelibs-events@0.1.1",
      "npm:react-dom@0.14.5",
      "npm:chart.js@1.0.2",
      "npm:react-chartjs@0.6.0",
      "npm:react@0.14.5",
      "npm:babel-runtime@5.8.34/helpers/get",
      "npm:babel-runtime@5.8.34/helpers/inherits",
      "npm:babel-runtime@5.8.34/helpers/class-call-check",
      "npm:babel-runtime@5.8.34/helpers/create-class",
      "npm:chart.js@1.0.2/Chart",
      "github:jspm/nodelibs-events@0.1.1/index",
      "npm:react-chartjs@0.6.0/index",
      "npm:react@0.14.5/react",
      "npm:react-dom@0.14.5/index",
      "npm:babel-runtime@5.8.34/core-js/object/get-own-property-descriptor",
      "npm:babel-runtime@5.8.34/core-js/object/set-prototype-of",
      "npm:babel-runtime@5.8.34/core-js/object/create",
      "npm:babel-runtime@5.8.34/core-js/object/define-property",
      "npm:events@1.0.2",
      "npm:react-chartjs@0.6.0/lib/core",
      "npm:react-chartjs@0.6.0/lib/doughnut",
      "npm:react-chartjs@0.6.0/lib/bar",
      "npm:react-chartjs@0.6.0/lib/line",
      "npm:react-chartjs@0.6.0/lib/polar-area",
      "npm:react-chartjs@0.6.0/lib/pie",
      "npm:react@0.14.5/lib/React",
      "npm:react-chartjs@0.6.0/lib/radar",
      "npm:core-js@1.2.6/library/fn/object/get-own-property-descriptor",
      "npm:react@0.14.5/lib/ReactDOM",
      "npm:core-js@1.2.6/library/fn/object/set-prototype-of",
      "npm:core-js@1.2.6/library/fn/object/create",
      "npm:core-js@1.2.6/library/fn/object/define-property",
      "npm:events@1.0.2/events",
      "npm:react@0.14.5/lib/Object.assign",
      "npm:core-js@1.2.6/library/modules/$",
      "npm:react@0.14.5/lib/ReactCurrentOwner",
      "npm:react@0.14.5/lib/ReactVersion",
      "npm:fbjs@0.6.0/lib/ExecutionEnvironment",
      "npm:react@0.14.5/lib/ReactPerf",
      "github:jspm/nodelibs-process@0.1.2",
      "npm:react@0.14.5/lib/ReactIsomorphic",
      "npm:react@0.14.5/lib/ReactDOMServer",
      "npm:react@0.14.5/lib/deprecated",
      "npm:core-js@1.2.6/library/modules/es6.object.get-own-property-descriptor",
      "npm:react@0.14.5/lib/ReactDOMTextComponent",
      "npm:react@0.14.5/lib/ReactDefaultInjection",
      "npm:react@0.14.5/lib/ReactInstanceHandles",
      "npm:react@0.14.5/lib/ReactMount",
      "npm:react@0.14.5/lib/ReactReconciler",
      "npm:react@0.14.5/lib/ReactUpdates",
      "npm:react@0.14.5/lib/findDOMNode",
      "npm:react@0.14.5/lib/renderSubtreeIntoContainer",
      "npm:fbjs@0.6.0/lib/warning",
      "npm:core-js@1.2.6/library/modules/$.core",
      "npm:core-js@1.2.6/library/modules/es6.object.set-prototype-of",
      "npm:react@0.14.5/lib/escapeTextContentForBrowser",
      "npm:react@0.14.5/lib/ClientReactRootIndex",
      "npm:react@0.14.5/lib/ServerReactRootIndex",
      "npm:react@0.14.5/lib/ReactRootIndex",
      "npm:react@0.14.5/lib/ReactDOMFeatureFlags",
      "npm:react@0.14.5/lib/ReactEmptyComponentRegistry",
      "npm:react@0.14.5/lib/ReactInstanceMap",
      "npm:react@0.14.5/lib/shouldUpdateReactComponent",
      "npm:fbjs@0.6.0/lib/emptyFunction",
      "github:jspm/nodelibs-process@0.1.2/index",
      "npm:fbjs@0.6.0/lib/invariant",
      "npm:fbjs@0.6.0/lib/emptyObject",
      "npm:react@0.14.5/lib/ReactChildren",
      "npm:react@0.14.5/lib/ReactComponent",
      "npm:react@0.14.5/lib/ReactClass",
      "npm:react@0.14.5/lib/ReactElement",
      "npm:react@0.14.5/lib/ReactDOMFactories",
      "npm:react@0.14.5/lib/ReactElementValidator",
      "npm:react@0.14.5/lib/ReactPropTypes",
      "npm:react@0.14.5/lib/onlyChild",
      "npm:react@0.14.5/lib/ReactServerRendering",
      "npm:core-js@1.2.6/library/modules/$.to-iobject",
      "npm:react@0.14.5/lib/DOMChildrenOperations",
      "npm:core-js@1.2.6/library/modules/$.object-sap",
      "npm:react@0.14.5/lib/DOMPropertyOperations",
      "npm:react@0.14.5/lib/ReactComponentBrowserEnvironment",
      "npm:react@0.14.5/lib/setTextContent",
      "npm:react@0.14.5/lib/validateDOMNesting",
      "npm:react@0.14.5/lib/BeforeInputEventPlugin",
      "npm:react@0.14.5/lib/ChangeEventPlugin",
      "npm:react@0.14.5/lib/DefaultEventPluginOrder",
      "npm:react@0.14.5/lib/EnterLeaveEventPlugin",
      "npm:react@0.14.5/lib/HTMLDOMPropertyConfig",
      "npm:react@0.14.5/lib/ReactBrowserComponentMixin",
      "npm:react@0.14.5/lib/ReactDOMComponent",
      "npm:react@0.14.5/lib/ReactDefaultBatchingStrategy",
      "npm:react@0.14.5/lib/ReactEventListener",
      "npm:react@0.14.5/lib/ReactInjection",
      "npm:react@0.14.5/lib/ReactReconcileTransaction",
      "npm:react@0.14.5/lib/SelectEventPlugin",
      "npm:react@0.14.5/lib/SimpleEventPlugin",
      "npm:react@0.14.5/lib/SVGDOMPropertyConfig",
      "npm:react@0.14.5/lib/ReactDefaultPerf",
      "npm:react@0.14.5/lib/DOMProperty",
      "npm:react@0.14.5/lib/ReactBrowserEventEmitter",
      "npm:react@0.14.5/lib/ReactMarkupChecksum",
      "npm:react@0.14.5/lib/ReactUpdateQueue",
      "npm:fbjs@0.6.0/lib/containsNode",
      "npm:react@0.14.5/lib/instantiateReactComponent",
      "npm:react@0.14.5/lib/setInnerHTML",
      "npm:react@0.14.5/lib/CallbackQueue",
      "npm:react@0.14.5/lib/ReactRef",
      "npm:react@0.14.5/lib/PooledClass",
      "npm:react@0.14.5/lib/Transaction",
      "npm:core-js@1.2.6/library/modules/$.export",
      "npm:core-js@1.2.6/library/modules/$.set-proto",
      "npm:fbjs@0.6.0/lib/keyOf",
      "npm:fbjs@0.6.0/lib/mapObject",
      "npm:react@0.14.5/lib/getIteratorFn",
      "npm:react@0.14.5/lib/ReactServerBatchingStrategy",
      "npm:core-js@1.2.6/library/modules/$.defined",
      "npm:core-js@1.2.6/library/modules/$.fails",
      "npm:react@0.14.5/lib/getEventTarget",
      "npm:react@0.14.5/lib/isTextInputElement",
      "npm:react@0.14.5/lib/ReactDOMButton",
      "npm:fbjs@0.6.0/lib/shallowEqual",
      "npm:fbjs@0.6.0/lib/getUnboundedScrollPosition",
      "npm:fbjs@0.6.0/lib/getActiveElement",
      "npm:react@0.14.5/lib/getEventCharCode",
      "npm:react@0.14.5/lib/ViewportMetrics",
      "npm:react@0.14.5/lib/adler32",
      "npm:react@0.14.5/lib/ReactPropTypeLocationNames",
      "npm:react@0.14.5/lib/canDefineProperty",
      "npm:process@0.11.2",
      "npm:react@0.14.5/lib/ReactPropTypeLocations",
      "npm:react@0.14.5/lib/traverseAllChildren",
      "npm:react@0.14.5/lib/ReactNoopUpdateQueue",
      "npm:fbjs@0.6.0/lib/keyMirror",
      "npm:core-js@1.2.6/library/modules/$.iobject",
      "npm:react@0.14.5/lib/ReactServerRenderingTransaction",
      "npm:react@0.14.5/lib/Danger",
      "npm:react@0.14.5/lib/ReactMultiChildUpdateTypes",
      "npm:react@0.14.5/lib/quoteAttributeValueForBrowser",
      "npm:react@0.14.5/lib/ReactDOMIDOperations",
      "npm:react@0.14.5/lib/EventConstants",
      "npm:react@0.14.5/lib/EventPropagators",
      "npm:react@0.14.5/lib/SyntheticInputEvent",
      "npm:react@0.14.5/lib/SyntheticCompositionEvent",
      "npm:react@0.14.5/lib/FallbackCompositionState",
      "npm:react@0.14.5/lib/EventPluginHub",
      "npm:react@0.14.5/lib/SyntheticEvent",
      "npm:react@0.14.5/lib/isEventSupported",
      "npm:react@0.14.5/lib/SyntheticMouseEvent",
      "npm:react@0.14.5/lib/AutoFocusUtils",
      "npm:react@0.14.5/lib/CSSPropertyOperations",
      "npm:react@0.14.5/lib/ReactDOMInput",
      "npm:react@0.14.5/lib/ReactDOMOption",
      "npm:react@0.14.5/lib/ReactDOMSelect",
      "npm:react@0.14.5/lib/ReactDOMTextarea",
      "npm:react@0.14.5/lib/ReactMultiChild",
      "npm:fbjs@0.6.0/lib/EventListener",
      "npm:react@0.14.5/lib/ReactComponentEnvironment",
      "npm:react@0.14.5/lib/ReactEmptyComponent",
      "npm:react@0.14.5/lib/ReactNativeComponent",
      "npm:react@0.14.5/lib/ReactInputSelection",
      "npm:react@0.14.5/lib/SyntheticClipboardEvent",
      "npm:react@0.14.5/lib/SyntheticFocusEvent",
      "npm:react@0.14.5/lib/SyntheticKeyboardEvent",
      "npm:react@0.14.5/lib/SyntheticDragEvent",
      "npm:react@0.14.5/lib/SyntheticTouchEvent",
      "npm:react@0.14.5/lib/SyntheticUIEvent",
      "npm:react@0.14.5/lib/SyntheticWheelEvent",
      "npm:react@0.14.5/lib/ReactDefaultPerfAnalysis",
      "npm:fbjs@0.6.0/lib/performanceNow",
      "npm:react@0.14.5/lib/EventPluginRegistry",
      "npm:react@0.14.5/lib/ReactEventEmitterMixin",
      "npm:fbjs@0.6.0/lib/isTextNode",
      "npm:react@0.14.5/lib/ReactOwner",
      "npm:react@0.14.5/lib/ReactCompositeComponent",
      "npm:core-js@1.2.6/library/modules/$.global",
      "npm:core-js@1.2.6/library/modules/$.is-object",
      "npm:core-js@1.2.6/library/modules/$.ctx",
      "npm:core-js@1.2.6/library/modules/$.an-object",
      "npm:process@0.11.2/browser",
      "npm:core-js@1.2.6/library/modules/$.cof",
      "npm:react@0.14.5/lib/forEachAccumulated",
      "npm:react@0.14.5/lib/getEventModifierState",
      "npm:fbjs@0.6.0/lib/focusNode",
      "npm:react@0.14.5/lib/CSSProperty",
      "npm:fbjs@0.6.0/lib/memoizeStringOnly",
      "npm:fbjs@0.6.0/lib/isNode",
      "npm:react@0.14.5/lib/ReactErrorUtils",
      "npm:fbjs@0.6.0/lib/createNodesFromMarkup",
      "npm:react@0.14.5/lib/accumulateInto",
      "npm:fbjs@0.6.0/lib/getMarkupWrap",
      "npm:react@0.14.5/lib/getTextContentAccessor",
      "npm:react@0.14.5/lib/EventPluginUtils",
      "npm:fbjs@0.6.0/lib/camelizeStyleName",
      "npm:react@0.14.5/lib/LinkedValueUtils",
      "npm:fbjs@0.6.0/lib/hyphenateStyleName",
      "npm:react@0.14.5/lib/dangerousStyleValue",
      "npm:react@0.14.5/lib/ReactChildReconciler",
      "npm:react@0.14.5/lib/flattenChildren",
      "npm:react@0.14.5/lib/ReactDOMSelection",
      "npm:react@0.14.5/lib/getEventKey",
      "npm:core-js@1.2.6/library/modules/$.a-function",
      "npm:fbjs@0.6.0/lib/performance",
      "npm:react@0.14.5/lib/getNodeForCharacterOffset",
      "npm:fbjs@0.6.0/lib/hyphenate",
      "npm:fbjs@0.6.0/lib/camelize",
      "npm:fbjs@0.6.0/lib/createArrayFromMixed",
      "npm:fbjs@0.6.0/lib/toArray"
    ]
  },

  map: {
    "babel": "npm:babel-core@5.8.34",
    "babel-runtime": "npm:babel-runtime@5.8.34",
    "chart.js": "npm:chart.js@1.0.2",
    "core-js": "npm:core-js@1.2.6",
    "events": "github:jspm/nodelibs-events@0.1.1",
    "react": "npm:react@0.14.5",
    "react-chartjs": "npm:react-chartjs@0.6.0",
    "react-dom": "npm:react-dom@0.14.5",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.3.0"
    },
    "github:jspm/nodelibs-buffer@0.1.0": {
      "buffer": "npm:buffer@3.6.0"
    },
    "github:jspm/nodelibs-domain@0.1.0": {
      "domain-browser": "npm:domain-browser@1.1.7"
    },
    "github:jspm/nodelibs-events@0.1.1": {
      "events": "npm:events@1.0.2"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.2"
    },
    "github:jspm/nodelibs-stream@0.1.0": {
      "stream-browserify": "npm:stream-browserify@1.0.0"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "npm:amdefine@1.0.0": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "module": "github:jspm/nodelibs-module@0.1.0",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:asap@2.0.3": {
      "domain": "github:jspm/nodelibs-domain@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:assert@1.3.0": {
      "util": "npm:util@0.10.3"
    },
    "npm:babel-runtime@5.8.34": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:buffer@3.6.0": {
      "base64-js": "npm:base64-js@0.0.8",
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "ieee754": "npm:ieee754@1.1.6",
      "isarray": "npm:isarray@1.0.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:chart.js@1.0.2": {
      "child_process": "github:jspm/nodelibs-child_process@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    },
    "npm:core-js@1.2.6": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    },
    "npm:core-util-is@1.0.2": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0"
    },
    "npm:domain-browser@1.1.7": {
      "events": "github:jspm/nodelibs-events@0.1.1"
    },
    "npm:envify@3.4.0": {
      "jstransform": "npm:jstransform@10.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "through": "npm:through@2.3.8"
    },
    "npm:esprima-fb@13001.1001.0-dev-harmony-fb": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:fbjs@0.6.0": {
      "core-js": "npm:core-js@1.2.6",
      "loose-envify": "npm:loose-envify@1.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "promise": "npm:promise@7.1.1",
      "ua-parser-js": "npm:ua-parser-js@0.7.10",
      "whatwg-fetch": "npm:whatwg-fetch@0.9.0"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:jstransform@10.1.0": {
      "base62": "npm:base62@0.1.1",
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "esprima-fb": "npm:esprima-fb@13001.1001.0-dev-harmony-fb",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "source-map": "npm:source-map@0.1.31"
    },
    "npm:loose-envify@1.1.0": {
      "js-tokens": "npm:js-tokens@1.0.2",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "stream": "github:jspm/nodelibs-stream@0.1.0",
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:path-browserify@0.0.0": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:process@0.11.2": {
      "assert": "github:jspm/nodelibs-assert@0.1.0"
    },
    "npm:promise@7.1.1": {
      "asap": "npm:asap@2.0.3",
      "fs": "github:jspm/nodelibs-fs@0.1.2"
    },
    "npm:react-chartjs@0.6.0": {
      "chart.js": "npm:chart.js@1.0.2",
      "react": "npm:react@0.14.5"
    },
    "npm:react-dom@0.14.5": {
      "react": "npm:react@0.14.5"
    },
    "npm:react@0.14.5": {
      "envify": "npm:envify@3.4.0",
      "fbjs": "npm:fbjs@0.6.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:readable-stream@1.1.13": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "core-util-is": "npm:core-util-is@1.0.2",
      "events": "github:jspm/nodelibs-events@0.1.1",
      "inherits": "npm:inherits@2.0.1",
      "isarray": "npm:isarray@0.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "stream-browserify": "npm:stream-browserify@1.0.0",
      "string_decoder": "npm:string_decoder@0.10.31"
    },
    "npm:source-map@0.1.31": {
      "amdefine": "npm:amdefine@1.0.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:stream-browserify@1.0.0": {
      "events": "github:jspm/nodelibs-events@0.1.1",
      "inherits": "npm:inherits@2.0.1",
      "readable-stream": "npm:readable-stream@1.1.13"
    },
    "npm:string_decoder@0.10.31": {
      "buffer": "github:jspm/nodelibs-buffer@0.1.0"
    },
    "npm:through@2.3.8": {
      "process": "github:jspm/nodelibs-process@0.1.2",
      "stream": "github:jspm/nodelibs-stream@0.1.0"
    },
    "npm:ua-parser-js@0.7.10": {
      "systemjs-json": "github:systemjs/plugin-json@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2"
    }
  }
});

index.html

<!doctype html>
<html>
  <head>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('index.js');
    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

index.js

import EventEmitter from 'events';
import React from 'react';
import ReactDOM from 'react-dom';
import Chart from 'chart.js';
import * as chartjs from 'react-chartjs';

Chart.defaults.global.responsive = true;

class MyChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: this.range(this.props.N),
      y: this.randomPoints(this.props.N)
    };

    this.update = this.update.bind(this);
  }

  range(N) {
    let points = [];
    for (let i = 0; i < N; i++) {
      points.push(i);
    }
    return points;
  }

  randomPoints(N) {
    let points = [];
    for (let i = 0; i < N; i++) {
      points.push(Math.random() * 1000);
    }
    return points;
  }

  componentDidMount() {
    window.setInterval(this.update, 1);
  }

  update() {
    let newY = this.randomPoints(this.props.N);

    this.setState({
      y: newY
    });
  }

  render() {
    let options = {
      animation: false,
      showTooltips: false,
      showLabels: false,
      bezierCurve: false,
      pointDot: false,
      datasetFill: false
    };

    let data = {
      labels: this.state.x,
      datasets: [{
        label: null,
        strokeColor: '#f4c63d',
        data: this.state.y
      }]
    };

    return <chartjs.Line data={data} options={options} />;
  }
}

MyChart.propTypes = {
  N: React.PropTypes.number.isRequired
};

const chart = <MyChart N={2048} />;
ReactDOM.render(chart, document.querySelector('#container'));

package.json

{
  "jspm": {
    "dependencies": {
      "chart.js": "npm:chart.js@^1.0.2",
      "events": "github:jspm/nodelibs-events@^0.1.1",
      "react": "npm:react@^0.14.5",
      "react-chartjs": "npm:react-chartjs@^0.6.0",
      "react-dom": "npm:react-dom@^0.14.5"
    },
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  },
  "devDependencies": {
    "jspm": "^0.16.19"
  }
}