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

  map: {
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "chart.js": "npm:[email protected]",
    "core-js": "npm:[email protected]",
    "events": "github:jspm/[email protected]",
    "react": "npm:[email protected]",
    "react-chartjs": "npm:[email protected]",
    "react-dom": "npm:[email protected]",
    "github:jspm/[email protected]": {
      "assert": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "buffer": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "domain-browser": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "events": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "path-browserify": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "stream-browserify": "npm:[email protected]"
    },
    "github:jspm/[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "module": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "domain": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "util": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "base64-js": "npm:[email protected]",
      "child_process": "github:jspm/[email protected]",
      "fs": "github:jspm/[email protected]",
      "ieee754": "npm:[email protected]",
      "isarray": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "child_process": "github:jspm/[email protected]",
      "fs": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "events": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "jstransform": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "through": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "core-js": "npm:[email protected]",
      "loose-envify": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "promise": "npm:[email protected]",
      "ua-parser-js": "npm:[email protected]",
      "whatwg-fetch": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "base62": "npm:[email protected]",
      "buffer": "github:jspm/[email protected]",
      "esprima-fb": "npm:[email protected]",
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "source-map": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "js-tokens": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "stream": "github:jspm/[email protected]",
      "util": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "assert": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "asap": "npm:[email protected]",
      "fs": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "chart.js": "npm:[email protected]",
      "react": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "react": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "envify": "npm:[email protected]",
      "fbjs": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]",
      "core-util-is": "npm:[email protected]",
      "events": "github:jspm/[email protected]",
      "inherits": "npm:[email protected]",
      "isarray": "npm:[email protected]",
      "process": "github:jspm/[email protected]",
      "stream-browserify": "npm:[email protected]",
      "string_decoder": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "amdefine": "npm:[email protected]",
      "fs": "github:jspm/[email protected]",
      "path": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "events": "github:jspm/[email protected]",
      "inherits": "npm:[email protected]",
      "readable-stream": "npm:[email protected]"
    },
    "npm:[email protected]": {
      "buffer": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "process": "github:jspm/[email protected]",
      "stream": "github:jspm/[email protected]"
    },
    "npm:[email protected]": {
      "systemjs-json": "github:systemjs/[email protected]"
    },
    "npm:[email protected]": {
      "inherits": "npm:[email protected]",
      "process": "github:jspm/[email protected]"
    }
  }
});

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"
  }
}