@tidepool/viz
Version:
Tidepool data visualization for diabetes device data.
729 lines (334 loc) • 24.2 kB
HTML
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Introduction · GitBook</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.2">
<link rel="stylesheet" href="gitbook/style.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="docs/StartHere.html" />
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter active" data-level="1.1" data-path="./">
<a href="./">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" data-path="docs/StartHere.html">
<a href="docs/StartHere.html">
@tidepool/viz developer guide
</a>
<ul class="articles">
<li class="chapter " data-level="1.2.1" data-path="docs/Background.html">
<a href="docs/Background.html">
background
</a>
</li>
<li class="chapter " data-level="1.2.2" data-path="docs/FeatureOverview.html">
<a href="docs/FeatureOverview.html">
overview of features
</a>
</li>
<li class="chapter " data-level="1.2.3" data-path="docs/Architecture.html">
<a href="docs/Architecture.html">
planned architecture
</a>
</li>
<li class="chapter " data-level="1.2.4" data-path="docs/DirectoryStructure.html">
<a href="docs/DirectoryStructure.html">
app & directory structure
</a>
</li>
<li class="chapter " data-level="1.2.5" data-path="docs/CodeStyle.html">
<a href="docs/CodeStyle.html">
code style
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3" data-path="docs/views/">
<a href="docs/views/">
per-view documentation
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="src/components/settings/">
<a href="src/components/settings/">
Device Settings view
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="docs/views/Trends.html">
<a href="docs/views/Trends.html">
Trends view
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.4" data-path="docs/Storybook.html">
<a href="docs/Storybook.html">
use of React Storybook
</a>
</li>
<li class="chapter " data-level="1.5" data-path="docs/deps/">
<a href="docs/deps/">
usage of dependencies
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="docs/deps/D3.html">
<a href="docs/deps/D3.html">
D3
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="docs/deps/GSAP.html">
<a href="docs/deps/GSAP.html">
GSAP
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="docs/deps/Moment.html">
<a href="docs/deps/Moment.html">
Moment
</a>
</li>
<li class="chapter " data-level="1.5.4" data-path="docs/deps/React.html">
<a href="docs/deps/React.html">
React
</a>
</li>
<li class="chapter " data-level="1.5.5" data-path="docs/deps/ReactMotion.html">
<a href="docs/deps/ReactMotion.html">
React Motion
</a>
</li>
<li class="chapter " data-level="1.5.6" data-path="docs/deps/Redux.html">
<a href="docs/deps/Redux.html">
Redux
</a>
</li>
<li class="chapter " data-level="1.5.7" data-path="docs/deps/Webpack.html">
<a href="docs/deps/Webpack.html">
webpack
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="src/utils/">
<a href="src/utils/">
utilities
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="src/utils/apidocs/">
<a href="src/utils/apidocs/">
API docs for utilities
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1.1" data-path="src/utils/apidocs/basal.html">
<a href="src/utils/apidocs/basal.html">
basal
</a>
</li>
<li class="chapter " data-level="1.6.1.2" data-path="src/utils/apidocs/bloodglucose.html">
<a href="src/utils/apidocs/bloodglucose.html">
blood glucose
</a>
</li>
<li class="chapter " data-level="1.6.1.3" data-path="src/utils/apidocs/bolus.html">
<a href="src/utils/apidocs/bolus.html">
bolus
</a>
</li>
<li class="chapter " data-level="1.6.1.4" data-path="src/utils/apidocs/datetime.html">
<a href="src/utils/apidocs/datetime.html">
datetime
</a>
</li>
<li class="chapter " data-level="1.6.1.5" data-path="src/utils/apidocs/format.html">
<a href="src/utils/apidocs/format.html">
format
</a>
</li>
<li class="chapter " data-level="1.6.1.6" data-path="src/utils/apidocs/misc.html">
<a href="src/utils/apidocs/misc.html">
misc
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="docs/misc/">
<a href="docs/misc/">
misc
</a>
<ul class="articles">
<li class="chapter " data-level="1.7.1" data-path="docs/misc/CommonProps.html">
<a href="docs/misc/CommonProps.html">
Common props
</a>
</li>
<li class="chapter " data-level="1.7.2" data-path="docs/misc/Docs.html">
<a href="docs/misc/Docs.html">
Docs setup & publishing
</a>
</li>
<li class="chapter " data-level="1.7.3" data-path="docs/misc/TimeRenderingModes.html">
<a href="docs/misc/TimeRenderingModes.html">
Time-rendering modes
</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href="." >Introduction</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<p><a href="https://travis-ci.org/tidepool-org/viz" target="_blank"><img src="https://img.shields.io/travis/tidepool-org/viz/master.svg" alt="Build Status"></a></p>
<h1 id="tidepoolviz">@tidepool/viz</h1>
<p>Tidepool data visualization for diabetes device data.</p>
<p>This README is focused on just the nuts & bolts of getting the code in this repository ready to develop locally in <a href="https://github.com/tidepool-org/blip" title="GitHub: blip" target="_blank">blip</a> or with <a href="https://getstorybook.io/" title="React Storybook" target="_blank">React Storybook</a>. For more detailed information about the code in this repository, please see the <a href="docs/StartHere.html">developer guide</a>.</p>
<h4 id="table-of-contents">Table of contents</h4>
<ul>
<li><a href="#getting-started">Getting started</a></li>
<li><a href="#development">Development</a><ul>
<li><a href="#running-locally-with-blip">Running locally with blip</a></li>
<li><a href="#running-locally-in-react-storybook">Running locally in React Storybook</a></li>
<li><a href="#running-the-tests">Running the tests</a></li>
<li><a href="#running-the-linter">Running the linter</a></li>
</ul>
</li>
<li><a href="#production">Production</a><ul>
<li><a href="#publishing-examples-to-github-pages-with-react-storybook">Publishing examples</a></li>
<li><a href="#building-and-publishing-to-npm">Publishing to npm</a></li>
</ul>
</li>
</ul>
<hr>
<h2 id="getting-started">Getting started</h2>
<p>After cloning this repository to your local machine, first make sure that you have at least node <code>6.x</code> and npm <code>4.x</code> installed. If you have a different major version of node installed, consider using <a href="https://github.com/creationix/nvm" title="GitHub: Node Version Manager" target="_blank">nvm</a> to manage and switch between multiple node (& npm) installations. If you have npm <code>3.x</code> installed (as it is by default with node <code>6.x</code>), then you can update to the latest npm <code>4.x</code> with <code>npm install -g npm@4</code>.</p>
<p>It's not an absolute requirement, but it is preferable to have <a href="https://yarnpkg.com" title="Yarn" target="_blank">Yarn</a> installed, as it provides dependency management features above and beyond what npm provides. Just follow <a href="https://yarnpkg.com/en/docs/install" title="Yarn installation instructions" target="_blank">Yarn's installation instructions</a> (hint: for Mac users with Homebrew installed, it's just <code>brew install yarn</code>).</p>
<p>Once your environment is setup with node <code>6.x</code> and npm <code>3.x</code> install the dependencies with Yarn:</p>
<pre><code class="lang-bash">$ yarn install
</code></pre>
<p>Or with npm if you're choosing not to use Yarn:</p>
<pre><code class="lang-bash">$ npm install
</code></pre>
<h2 id="development">Development</h2>
<h3 id="running-locally-with-blip">Running locally with blip</h3>
<p>To work on code in this repository within <a href="https://github.com/tidepool-org/blip" title="Tidepool on GitHub: blip" target="_blank">blip</a>, first do the following from your local blip repository (assuming blip/ and viz/ are sister directories):</p>
<pre><code class="lang-bash">$ npm link ../viz/
</code></pre>
<p>In this repository, start the build in watch mode:</p>
<pre><code class="lang-bash">$ npm start
</code></pre>
<p>Finally, back in your local blip repository, follow <a href="http://developer.tidepool.io/blip/#running-locally" title="Blip README: running locally" target="_blank">the instructions for starting blip locally</a>.</p>
<h3 id="running-locally-in-react-storybook">Running locally in React Storybook</h3>
<p>If you're working at the component or view level outside of blip, you can work on component and view rendering code with <a href="https://github.com/kadirahq/react-storybook" title="GitHub: react-storybook" target="_blank">React Storybook</a>.</p>
<p>If you're working on the diabetes data model rendering components, run:</p>
<pre><code class="lang-bash">$ npm run typestories
</code></pre>
<p>If you're working on any other components or views, run:</p>
<pre><code class="lang-bash">$ npm run stories
</code></pre>
<p>For more about the use of React Storybook in this repo, see <a href="http://developer.tidepool.io/viz/Storybook.html" title="@tidepool/viz docs: React Storybook" target="_blank">use of React Storybook</a>.</p>
<h3 id="running-the-tests">Running the tests</h3>
<p>To run the unit tests in <a href="http://phantomjs.org/" title="PhantomJS" target="_blank">PhantomJS</a> (as they run on <a href="https://travis-ci.org/" title="Travis CI" target="_blank">Travis CI</a>):</p>
<pre><code class="lang-bash">$ npm <span class="hljs-built_in">test</span>
</code></pre>
<p>To have the tests run continuously with source and test code changes rebundled as you work:</p>
<pre><code class="lang-bash">$ npm run <span class="hljs-built_in">test</span>-watch
</code></pre>
<p>To run the unit tests in your local Chrome browser (recommended for Tidepool developers before merging or publishing a release):</p>
<pre><code class="lang-bash">$ npm run browser-tests
</code></pre>
<h3 id="running-the-linter">Running the linter</h3>
<p>To run the code linter from the command line:</p>
<pre><code class="lang-bash">$ npm run lint
</code></pre>
<p>Generally speaking, Tidepool developers configure linting to run continuously in their text editor of choice, and we recommend this approach for development. You can easily find instructions online for running ESLint continuously in all of the popular text editors—SublimeText, Atom, Visual Studio Code, etc.</p>
<h2 id="production">Production</h2>
<h3 id="publishing-examples-to-github-pages-with-react-storybook">Publishing examples to GitHub Pages with React Storybook</h3>
<p>See <a href="docs/misc/Docs.html#publishing">the publishing section</a> of the docs on docs.</p>
<h3 id="building-and-publishing-to-npm">Building and publishing to <code>npm</code></h3>
<p>When a new feature(s) is/are complete (i.e., branch is synchronized with master, reviewed with a sign-off from another developer), it's time to publish the package to npm! Since this is one of our most recently created repositories, any member of the "developers" team in the <code>@tidepool</code> npm organization will be able to publish the package using his or her npm login. Steps to publishing are as follows:</p>
<ol>
<li>create a tag on the approved pull request using the <code>mversion</code> tool with the <code>-m</code> option to auto-commit the version bump and tag (e.g., <code>$ mversion patch -m</code> for a patch version bump)</li>
<li>push the new commit and tag to the GitHub remote with <code>$ git push origin <branch-name></code> and <code>$ git push origin --tags</code></li>
<li>check that the tag build has passed on <a href="https://travis-ci.org/tidepool-org/viz" target="_blank">TravisCI</a></li>
<li><code>$ npm whoami</code> to check if you are logged in as yourself; if you are, skip to 7.</li>
<li>if you are logged in as <code>tidepool-robot</code>, log out with <code>$ npm logout</code></li>
<li>then log in as yourself with <code>$ npm login</code></li>
<li>publish the new version with <code>$ npm publish</code>; before the <em>actual</em> publish happens, the <code>yarn</code> install, linter, tests, and packaging webpack build will run since we have set those up through the <code>prepare</code> and <code>prepublishOnly</code> npm hooks in the package.json</li>
<li>merge the approved pull request to master</li>
<li>remember to bump the version appropriately in the package.json for the app (e.g., blip) requiring <code>@tidepool/viz</code> as a dependency!</li>
</ol>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="docs/StartHere.html" class="navigation navigation-next navigation-unique" aria-label="Next page: @tidepool/viz developer guide">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Introduction","level":"1.1","depth":1,"next":{"title":"@tidepool/viz developer guide","level":"1.2","depth":1,"path":"docs/StartHere.md","ref":"docs/StartHere.md","articles":[{"title":"background","level":"1.2.1","depth":2,"path":"docs/Background.md","ref":"docs/Background.md","articles":[]},{"title":"overview of features","level":"1.2.2","depth":2,"path":"docs/FeatureOverview.md","ref":"docs/FeatureOverview.md","articles":[]},{"title":"planned architecture","level":"1.2.3","depth":2,"path":"docs/Architecture.md","ref":"docs/Architecture.md","articles":[]},{"title":"app & directory structure","level":"1.2.4","depth":2,"path":"docs/DirectoryStructure.md","ref":"docs/DirectoryStructure.md","articles":[]},{"title":"code style","level":"1.2.5","depth":2,"path":"docs/CodeStyle.md","ref":"docs/CodeStyle.md","articles":[]}]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"README.md","mtime":"2017-05-30T14:36:05.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-05-31T15:26:30.892Z"},"basePath":".","book":{"language":""}});
});
</script>
</div>
<script src="gitbook/gitbook.js"></script>
<script src="gitbook/theme.js"></script>
<script src="gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="gitbook/gitbook-plugin-search/search.js"></script>
<script src="gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
<script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>