@tidepool/viz 1.38.0 → 1.39.0

package/package.json

@@ -1,161 +1,181 @@
 {
   "name": "@tidepool/viz",
-  "version": "1.38.0",
+  "engines": {
+    "node": "20.8.0"
+  },
+  "packageManager": "yarn@3.6.4",
+  "version": "1.39.0",
   "description": "Tidepool data visualization for diabetes device data.",
   "keywords": [
     "data visualization"
   ],
   "main": "dist/index.js",
   "scripts": {
-    "apidocs": "./node_modules/.bin/jsdoc2md",
-    "browser-tests": "NODE_ENV=test ./node_modules/.bin/karma start --browsers Chrome",
-    "build": "NODE_ENV=production npm run clean && NODE_ENV=production ./node_modules/.bin/webpack --config package.config.js",
-    "build-dev": "npm run clean && NODE_ENV=development  ./node_modules/.bin/webpack --config package.config.js --progress",
+    "apidocs": "yarn jsdoc2md",
+    "browser-tests": "NODE_ENV=test yarn karma start --browsers Chrome",
+    "build": "NODE_ENV=production npm run clean && NODE_ENV=production yarn webpack --config package.config.js",
+    "build-dev": "npm run clean && NODE_ENV=development  yarn webpack --config package.config.js --progress",
     "build-docs": "./update-gh-pages.sh",
-    "build-storybooks": "./node_modules/.bin/build-storybook -c storybook -o web/stories && ./node_modules/.bin/build-storybook -c storybookDatatypes -o web/diabetes-data-stories",
-    "clean": "NODE_ENV=production ./node_modules/.bin/rimraf ./dist/*",
-    "lint": "NODE_ENV=test ./node_modules/.bin/eslint src/ stories/ storiesDatatypes/ test/ *.js",
-    "prepublishOnly": "NODE_ENV=production ./node_modules/.bin/rimraf ./node_modules && yarn install --frozen-lockfile && npm test && NODE_ENV=production npm run build",
+    "build-storybooks": "yarn build-storybook -c storybook -o web/stories && yarn build-storybook -c storybookDatatypes -o web/diabetes-data-stories",
+    "clean": "NODE_ENV=production yarn rimraf ./dist/*",
+    "lint": "NODE_ENV=test yarn eslint src/ stories/ storiesDatatypes/ test/ *.js",
+    "prepublishOnly": "NODE_ENV=production yarn rimraf ./node_modules && yarn install --immutable && npm test && NODE_ENV=production npm run build",
     "pretest": "NODE_ENV=test npm run lint",
-    "serve-docs": "./node_modules/.bin/gitbook serve",
-    "start": "NODE_ENV=development ./node_modules/.bin/webpack --config package.config.js --watch --progress",
-    "stories": "NODE_OPTIONS=\"--max_old_space_size=4096\" NODE_ENV=development ./node_modules/.bin/start-storybook -c storybook -p 8083 -s ./static --ci",
-    "test": "TZ=UTC NODE_ENV=test ./node_modules/karma/bin/karma start",
-    "test-watch": "TZ=UTC NODE_ENV=test ./node_modules/.bin/karma start --no-single-run --reporters=mocha",
-    "typestories": "NODE_ENV=development ./node_modules/.bin/start-storybook -c storybookDatatypes -p 8082 --ci"
+    "serve-docs": "yarn gitbook serve",
+    "start": "NODE_ENV=development yarn webpack --config package.config.js --watch --progress",
+    "stories": "NODE_OPTIONS=\"--max_old_space_size=4096\" NODE_ENV=development yarn sb dev -c storybook -p 8083 --ci",
+    "test": "TZ=UTC NODE_ENV=test yarn karma start",
+    "test-watch": "TZ=UTC NODE_ENV=test DEV_TOOL=inline-source-map yarn karma start --no-single-run --reporters=mocha",
+    "typestories": "NODE_ENV=development yarn sb dev -c storybookDatatypes -p 8082 --ci"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tidepool-org/viz.git"
   },
-  "engines": {
-    "node": ">=10.x",
-    "npm": ">=6.x"
-  },
   "license": "BSD-2-Clause",
   "bugs": {
     "url": "https://github.com/tidepool-org/viz/issues"
   },
+  "files": [
+    "dist",
+    "static-assets"
+  ],
   "homepage": "https://github.com/tidepool-org/viz#readme",
   "dependencies": {
-    "bluebird": "3.5.2",
+    "bluebird": "3.7.2",
     "bows": "1.7.2",
-    "classnames": "2.2.6",
-    "crossfilter2": "1.5.2",
-    "d3-array": "1.2.4",
-    "d3-format": "1.3.2",
-    "d3-scale": "2.1.2",
-    "d3-shape": "1.2.2",
-    "d3-time": "1.0.10",
-    "d3-time-format": "2.1.3",
-    "emotion": "9.2.9",
+    "browserify-zlib": "0.2.0",
+    "buffer": "6.0.3",
+    "classnames": "2.3.2",
+    "crossfilter2": "1.5.4",
+    "d3-array": "3.2.4",
+    "d3-format": "3.1.0",
+    "d3-scale": "4.0.2",
+    "d3-shape": "3.2.0",
+    "d3-time": "3.1.0",
+    "d3-time-format": "4.1.0",
+    "emotion": "11.0.0",
+    "events": "3.3.0",
     "fastest-validator": "0.6.10",
-    "gsap": "2.0.2",
-    "i18next": "11.9.0",
+    "gsap": "3.12.2",
+    "i18next": "23.6.0",
     "intl": "1.2.5",
+    "intl-pluralrules": "2.0.1",
     "lodash": "4.17.21",
     "memorystream": "0.3.1",
     "moment": "2.29.4",
-    "moment-timezone": "0.5.21",
+    "moment-timezone": "0.5.43",
     "parse-svg-path": "0.1.2",
-    "prop-types": "15.6.2",
-    "react": "16.12.0",
+    "pdfkit": "0.13.0",
+    "process": "0.11.10",
+    "prop-types": "15.8.1",
+    "react": "16.14.0",
     "react-clipboard.js": "2.0.16",
-    "react-collapse": "5.0.1",
+    "react-collapse": "5.1.1",
     "react-dimensions": "1.3.1",
-    "react-dom": "16.12.0",
-    "react-markdown": "4.0.3",
+    "react-dom": "16.14.0",
+    "react-markdown": "8.0.7",
     "react-motion": "0.5.2",
-    "react-redux": "7.2.0",
-    "react-select": "2.0.0",
-    "react-sizeme": "2.6.12",
+    "react-redux": "8.1.3",
+    "react-select": "5.7.7",
+    "react-sizeme": "3.0.2",
     "react-transition-group-plus": "0.5.3",
+    "readable-stream": "4.4.2",
     "reductio": "1.0.0",
-    "redux": "3.5.2",
+    "redux": "4.2.1",
     "serialize-svg-path": "0.1.0",
-    "sundial": "1.6.0",
+    "sundial": "1.7.1",
     "svg-to-pdfkit": "0.1.8",
     "text-table": "0.2.0",
     "translate-svg-path": "0.0.1",
+    "util": "0.12.5",
     "victory": "31.3.0",
-    "voilab-pdf-table": "0.4.0"
+    "victory-core": "31.2.0",
+    "voilab-pdf-table": "0.5.1"
   },
   "devDependencies": {
-    "@babel/cli": "7.1.0",
-    "@babel/core": "7.1.0",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/polyfill": "7.0.0",
-    "@babel/preset-env": "7.1.0",
-    "@babel/preset-react": "7.0.0",
-    "@babel/runtime": "7.0.0",
+    "@babel/cli": "7.23.0",
+    "@babel/core": "7.23.0",
+    "@babel/eslint-parser": "7.22.15",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/plugin-transform-modules-commonjs": "7.23.0",
+    "@babel/polyfill": "7.12.1",
+    "@babel/preset-env": "7.23.2",
+    "@babel/preset-react": "7.22.15",
+    "@babel/runtime": "7.23.1",
     "@hot-loader/react-dom": "16.11.0",
-    "@storybook/addon-knobs": "5.0.10",
-    "@storybook/addon-notes": "5.0.10",
-    "@storybook/addon-viewport": "5.0.10",
-    "@storybook/addons": "5.0.10",
-    "@storybook/react": "5.0.10",
+    "@storybook/addon-essentials": "7.5.0",
+    "@storybook/addon-knobs": "7.0.2",
+    "@storybook/addons": "7.5.0",
+    "@storybook/cli": "7.5.0",
+    "@storybook/react": "7.5.0",
+    "@storybook/react-webpack5": "7.5.0",
+    "assert": "2.1.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "9.0.0",
-    "babel-loader": "8.0.2",
-    "babel-plugin-istanbul": "5.0.1",
-    "babel-preset-react-app": "9.1.0",
-    "chai": "4.1.2",
-    "chance": "1.0.16",
-    "chromedriver": "79.0.0",
-    "css-loader": "1.0.0",
+    "babel-loader": "9.1.3",
+    "babel-plugin-istanbul": "6.1.1",
+    "babel-preset-react-app": "10.0.1",
+    "brfs": "2.0.2",
+    "chai": "4.3.10",
+    "chance": "1.1.11",
+    "chromedriver": "119.0.1",
+    "create-react-class": "15.7.0",
+    "css-loader": "6.8.1",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
-    "eslint": "5.6.0",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jsx-a11y": "6.1.1",
-    "eslint-plugin-lodash": "2.7.0",
+    "enzyme-adapter-react-16": "1.15.7",
+    "eslint": "8.51.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-lodash": "7.4.0",
     "eslint-plugin-moment-utc": "1.0.0",
-    "eslint-plugin-react": "7.11.1",
-    "gitbook-cli": "2.3.2",
-    "jsdoc-to-markdown": "4.0.1",
+    "eslint-plugin-react": "7.33.2",
+    "jsdoc-to-markdown": "8.0.0",
     "json-loader": "0.5.7",
-    "jsx-ast-utils": "2.0.1",
-    "karma": "6.3.16",
+    "jsx-ast-utils": "3.3.5",
+    "karma": "6.4.2",
     "karma-chai": "0.1.0",
-    "karma-chrome-launcher": "3.1.0",
-    "karma-coverage": "2.0.1",
+    "karma-chrome-launcher": "3.2.0",
+    "karma-coverage": "2.2.1",
     "karma-intl-shim": "1.0.3",
-    "karma-mocha": "1.3.0",
+    "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sinon": "1.0.5",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "4.0.2",
-    "mocha": "5.2.0",
+    "karma-sourcemap-loader": "0.4.0",
+    "karma-webpack": "5.0.0",
+    "minimist": "1.2.8",
+    "mocha": "10.2.0",
     "object-invariant-test-helper": "0.1.1",
     "optional": "0.1.4",
-    "plotly.js-basic-dist-min": "2.20.0",
-    "postcss": "7.0.2",
-    "postcss-calc": "6.0.1",
-    "postcss-custom-properties": "7.0.0",
-    "postcss-loader": "3.0.0",
-    "react-hot-loader": "4.12.19",
-    "react-test-renderer": "16.12.0",
-    "rimraf": "2.6.2",
-    "sinon": "6.3.3",
-    "style-loader": "0.23.0",
+    "plotly.js-basic-dist-min": "2.26.2",
+    "postcss": "8.4.31",
+    "postcss-calc": "9.0.1",
+    "postcss-custom-properties": "13.3.2",
+    "postcss-loader": "7.3.3",
+    "react-hot-loader": "4.13.1",
+    "react-test-renderer": "16.14.0",
+    "rimraf": "5.0.5",
+    "sinon": "17.0.0",
+    "style-loader": "3.3.3",
     "tidepool-standard-action": "0.1.1",
-    "url-loader": "1.1.1",
-    "webpack": "4.18.0",
-    "webpack-cli": "3.1.0"
+    "transform-loader": "0.2.4",
+    "url-loader": "4.1.1",
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4"
   },
   "peerDependencies": {
     "babel-core": "6.x || ^7.0.0-bridge.0",
     "classnames": "2.x",
-    "lodash": "4.x",
-    "moment-timezone": "0.x",
     "react": "16.x",
     "react-addons-update": "16.x",
     "react-dom": "16.x",
-    "react-redux": "5.x",
-    "redux": "3.x"
+    "react-redux": "8.x",
+    "redux": "4.x"
   },
   "resolutions": {
-    "sundial/moment-timezone": "0.5.21"
+    "highlight.js": "10.4.1",
+    "jackspeak": "2.1.1",
+    "lodash": "4.17.21",
+    "prismjs": "1.29.0"
   }
 }

package/.bookignore

@@ -1,29 +0,0 @@
-**/*.css
-**/*.js
-**/*.sketch
-coverage/
-data/
-dist/
-local/
-node_modules/
-stories/
-stories-datatypes/
-storybook/
-storybook-datatypes/
-test/
-web/
-.babelrc
-.bookignore
-.editorconfig
-.eslintrc
-.gitignore
-.npmignore
-.travis.yml
-karma.conf.js
-LICENSE
-loadtests.js
-package.config.js
-package.json
-update-gh-pages.sh
-webpack.config.js
-yarn.lock

package/.dockerignore

@@ -1,10 +0,0 @@
-.git
-.gitignore
-node_modules
-npm-debug.log
-dist
-local
-_book
-coverage
-web
-*.log

package/.nvmrc

@@ -1 +0,0 @@
-10.14.2

package/.prettierignore

@@ -1 +0,0 @@
-**

package/Dockerfile

@@ -1,47 +0,0 @@
-### Stage 0 - Base image
-FROM node:10.14.2-alpine as base
-WORKDIR /app
-RUN mkdir -p dist node_modules && chown -R node:node .
-
-
-### Stage 1 - Base image for development image to install and configure Chromium for unit tests
-FROM base as developbase
-RUN \
-  echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories \
-  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories \
-  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories \
-  && apk --no-cache  update \
-  && apk --no-cache  upgrade \
-  && apk add --no-cache git fontconfig bash udev ttf-opensans chromium \
-  && rm -rf /var/cache/apk/* /tmp/*
-ENV \
-  CHROME_BIN=/usr/bin/chromium-browser \
-  LIGHTHOUSE_CHROMIUM_PATH=/usr/bin/chromium-browser \
-  NODE_ENV=development
-
-
-### Stage 2 - Create cached `node_modules`
-# Only rebuild layer if `package.json` has changed
-FROM base as dependencies
-RUN apk --no-cache update \
-  && apk --no-cache upgrade \
-  && apk add --no-cache git
-USER node
-COPY package.json .
-# Upgrade to npm6.9.0 to allow installing modules that use alias feature
-RUN npm install npm@6.9.0
-# Ignore scripts during install to prevent `prepare` and `prepublishOnly` from running
-RUN node_modules/.bin/npm install --ignore-scripts
-
-
-### Stage 3 - Development root with Chromium installed for unit tests
-FROM developbase as develop
-WORKDIR /app
-USER node
-# Copy all `node_modules` from dependancies layer
-COPY --chown=node:node --from=dependencies /app/node_modules ./node_modules
-# Copy source files
-COPY --chown=node:node . .
-EXPOSE 8082 8083
-VOLUME ["/app", "/app/node_modules", "/app/dist"]
-CMD ["npm", "start"]

package/SUMMARY.md

@@ -1,32 +0,0 @@
-# Summary
-
-+ [@tidepool/viz developer guide](docs/StartHere.md)
-    + [background](docs/Background.md)
-    + [overview of features](docs/FeatureOverview.md)
-    + [planned architecture](docs/Architecture.md)
-    + [app & directory structure](docs/DirectoryStructure.md)
-    + [code style](docs/CodeStyle.md)
-+ [per-view documentation](docs/views/README.md)
-    + [Device Settings view](src/components/settings/README.md)
-    + [Trends view](docs/views/Trends.md)
-+ [use of React Storybook](docs/Storybook.md)
-+ [usage of dependencies](docs/deps/README.md)
-    + [D3](docs/deps/D3.md)
-    + [GSAP](docs/deps/GSAP.md)
-    + [Moment](docs/deps/Moment.md)
-    + [React](docs/deps/React.md)
-    + [React Motion](docs/deps/ReactMotion.md)
-    + [Redux](docs/deps/Redux.md)
-    + [webpack](docs/deps/Webpack.md)
-+ [utilities](src/utils/README.md)
-    + [API docs for utilities](src/utils/apidocs/README.md)
-        + [basal](src/utils/apidocs/basal.md)
-        + [blood glucose](src/utils/apidocs/bloodglucose.md)
-        + [bolus](src/utils/apidocs/bolus.md)
-        + [datetime](src/utils/apidocs/datetime.md)
-        + [format](src/utils/apidocs/format.md)
-        + [misc](src/utils/apidocs/misc.md)
-+ [misc](docs/misc/README.md)
-    + [Common props](docs/misc/CommonProps.md)
-    + [Docs setup & publishing](docs/misc/Docs.md)
-    + [Time-rendering modes](docs/misc/TimeRenderingModes.md)

package/artifact.sh

@@ -1,6 +0,0 @@
-#!/bin/sh -e
-
-wget -q -O artifact_docker.sh 'https://raw.githubusercontent.com/tidepool-org/tools/master/artifact/artifact.sh'
-chmod +x artifact_docker.sh
-
-./artifact_docker.sh docker

package/babel.config.js

@@ -1,30 +0,0 @@
-module.exports = function babelConfig(api) {
-  const presets = [
-    '@babel/preset-env',
-    '@babel/preset-react',
-    'babel-preset-react-app',
-  ];
-
-  const plugins = [
-    'react-hot-loader/babel',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-transform-modules-commonjs',
-  ];
-
-  const env = api.env();
-
-  if (env === 'test') {
-    plugins.unshift(
-      ['babel-plugin-istanbul', {
-        useInlineSourceMaps: false,
-      }],
-    );
-  }
-
-  api.cache(true);
-
-  return {
-    presets,
-    plugins,
-  };
-};

package/docs/Architecture.md

@@ -1,111 +0,0 @@
-## Architecture
-
-#### Background documents (Tidepool-internal)
-
-- A fairly comprehensive set of notes explaining [the tech debt in tideline](https://docs.google.com/document/d/134kiT-aVvp63WpjBOafd63LyhecEs37T0u6-ChsyUSA/edit)
-- Document used to structure discussion around [goals for the tideline rewrite](https://docs.google.com/document/d/1zACQThnrFmlcvxMIF2g_CnnkQ9A16ilw-JSI6oKgvoA/edit#heading=h.4t4q8lakp971)
-
-### Desiderata for Tidepool visualization code
-
-At a meeting in January 2016, we decided on the following goals for the new visualization code (replacing [tideline](https://github.com/tidepool-org/tideline)). The goal(s) is/are that new visualization code should (eventually):
-
-1. be **_responsive_** if rendered inside a responsive container (i.e., precisely what blip does *not* provide at the moment since it creates a `<div>` with fixed width for the visualization code to be rendered in)
-1. sync visualization state with the URL ("deep linking") so that a copied and shared URL can facilitate conversation among the members of a care team
-1. "page" data in from the server and update itself when new data is received rather than only operate via a single "all you can eat" fetch of a user's entire dataset
-1. be modular in order to enable:
-    - more efficient development by the core team
-    - easier and more efficient contributions from the open-source community
-    - "cleaner" and more testable code
-    - code re-use by commericial and non-commericial third parties
-
-Ambiguous:
-
-   - tablet support
-
-There were also a few desiderata that were discussed but explicitly *rejected*, so the new visualization code should/need **not**:
-
-1. cache data on the client side
-1. support non-Chrome browsers
-
-
-### Proposal for the architecture of Tidepool visualization code
-
-In this document, we attempt to explain the architectural choices made for Tidepool's data visualization code (in this repository) by listing the major problems the code needs to solve along with the solution proposed (or chosen) for each.
-
-#### State management
-
-**Problem:** Effectively manage all the state shared across visualizations (listed below) with a minimum of duplicated code so that feature iteration can proceed as efficiently as possible.
-
-General principle, learned from experience: It is better to think about the Tidepool data visualizations as *one* (meta) interface between a user and a set of diabetes device (+ contextual) data with many different surface manifestations (daily, bgLog, trends, basics, device settings) than to think of it as half a dozen *different* data visualizations (daily, bgLog, etc.)
-
-Another way to phrase this: there is more application state requiring code to manage that is *shared* between all of the separate data views in blip (daily, bgLog, etc.) than there is that is separate. The shared state includes:
-
-- user display preference for blood glucose units (mg/dL or mmol/L)
-- user display preference for target blood glucose range
-- user display preference for timezone
-- the actual diabetes device data, preprocessed as necessary to facilitate data visualization
-- the date(s) that the user is focusing on, including filters for days of the week (Monday, Tuesday, etc.) being focused on, where appropriate
-    + Note that even though each data view presently has a different type of date domain (e.g., twenty-four hours, two weeks, most recent three calendar weeks, etc.), we already currently (attempt to) share state across these domains, making this state largely shared. For example, when a user navigates backwards in time on the trends view in two week chunks by having the (default) "14 day" domain selected and clicking the back arrow, if the user then switches to the daily view, they will presented with the most recent twenty-four hours of data within the current 14-day period of time for the trends view.
-- most (if not all) toggles and open/collapsed sections on all views (basics, trends, etc.), so that the user is not jarred/annoyed/confused by having to constantly reselect such choices when navigating between the views
-
-**Solution:** Use [redux](http://redux.js.org/ 'Redux') to store shared state in a single source of truth and transform this state with pure functions ("reducers") via dispatched actions (one-way data flow).
-
-Note that in the process of slowly and iteratively porting code from [blip](https://github.com/tidepool-org/blip) & [tideline](https://github.com/tidepool-org/tidline) into this repository, we will have stages where we are storing *more* than we would like in the redux state.
-
-For example, at present (November 2016), we are controlling hover state on slices in the CGM trends view via redux. Hover state is by definition ephemeral and not generally the kind of thing that belongs in the single, app-wide source of truth that is the redux store. However, because the components rendering the various parts of the CGM trends view are currently divided between blip and this repository, we are using the redux store as a "bridge" to share state across them more easily (and reduce the number of multi-repository code changes we need to make). As we move more visualization-related code from blip into viz, we should take care to reassess what is in the redux-controlled state and refactor anything that should not be controlled through redux (like hover state for CGM in trends slices) to be controlled through the appropriate container component state.
-
-#### Data preprocessing
-
-Some background documents particular to this problem area (Tidepool-internal):
-
-- [early draft explanation and proposal](https://docs.google.com/document/d/190mj_S9vYKvINPbU7cMajGekebyX6AJ-W6v3P-cCRWI/edit# 'viz data preprocessing') for Web Worker-based preprocessing
-- [more detailed proposal](https://docs.google.com/document/d/14n4OyyTKKfBxz7DzX9DnKST3nVarfae7Fgl9HgG6BlY/edit 'blip & viz data flow') after some prototyping with Web Workers
-
-**Problem:** Minimize the amount of *user* time spent on "expensive" data processing tasks, such as:
-
-- client-side data validation
-    + to filter out data that is perfectly legitimate according to the Tidepool data model (`basal` with zero duration) but is nevertheless not a target for visualization
-    + to filter out legacy or third-party data that is invalid according to the Tidepool data model (to prevent JavaScript runtime crashes that would negatively affect the end-user experience)
-- once-only data preprocessing (may move server-side)
-    + to parse ISO 8601 string Zulu timestamps into hammertimes
-- timezone-sensitive data preprocessing (must be rerun if user changes display timezone preference)
-    + to compute fields like the date and day of week in the local timezone
-    + to computer the number of milliseconds after timezone-determined midnight that the event occurred (necessary for binning data by time of day for trends view)
-
-**Solution:** Perform data preprocessing in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). Experience has taught us that—especially where timestamp parsing and timezone-relative calculations are involved—it is very easy to accidentally cause a user-noticeable performance bottleneck in a JavaScript single-page application (SPA). Using a Web Worker in a separate thread that does not interrupt the responsiveness/interactivity of the SPA allows us "breathing room" to perform potentially expensive calculations. It is also more compatible with an application that updates itself when new user data comes in from the server (i.e., via data paging, real-time push updates, etc.) because the newly arrived data can be processed in the background as it comes in without affecting the end-user's experience.
-
-#### Data filtering
-
-**Problem:** Centralize the logic for translating one date domain type (e.g., twenty-four hours, two weeks, most recent three calendar weeks, etc.) and location (i.e., timestamp(s) defining the edges and/or center) in one place and prevent performance bottlenecks due to executing complex filters (date range & day of week selections) on large datasets.
-
-(Note: the performance bottleneck due to data filtering currently exists (resulting in a poor framerate of < 20 fps) in tideline code on the daily view since the data filtering must be redone many times a second as the user scrolls.)
-
-**Solution:** Define a set of redux actions for setting the date domain, location, and other filters in state and apply the filters with [crossfilter](http://square.github.io/crossfilter/ 'Crossfilter') in the Web Worker (see above) to keep the filtering from affecting the end-user experience as far as possible.
-
-#### Data munging
-
-**Problem:** Centralize the logic for common statistical computations that appear in more than one view such as the basal:bolus ratio, average blood glucose, and time in range. Ensure that gaps in data are handled the same across all visualizations. Ensure that a robust test suite sits behind all statistical computations.
-
-**Solution:** Factor out all statistical computations into utility modules that can easily be imported into a variety of components. Keep these utilities as purely functional and general as possible to allow for ease of test instrumentation as well as options for moving the code if performance on some of these computations becomes a user-facing issue/roadblock. For example, computations could be moved into [reselect](https://github.com/reactjs/reselect), a redux add-on library for computing derived state (with memoization) or into the Web Worker used for data preprocessing and filtering.
-
-#### "Deep linking"
-
-**Problem:** Sync URL with the data visualization state in all the ways that would be useful to an end-user who wishes to share a data view they are currently viewing with another member of their care team.
-
-**Solution:** Once data visualization state is being managed more-or-less completely via redux, enabling "deep linking" should be a relatively simple matter of syncing the URL with the redux state, translating various relevant pieces of state into (sub-)paths in the URL and/or query parameters.
-
-#### Modularity
-
-**Problem:** Empower internal and external developers to develop and iterate quickly on all aspects of data visualizations. This should encompass both the ability to iterate easily on details of low-level rendering (i.e., what shape to draw for an extended bolus) without having to touch other code *and* the ability to build entirely new data "views" parallel to the daily, bgLog, basics, trends, and device settings views currently available by composing existing rendering components for the pieces.
-
-**Solution:** "Componentize" visualization code, adhering to React (and redux) best practices, including:
-
-- only extending the React Component class where the lifecycle methods are necessary, in "container" components
-- keeping rendering logic out of such container components
-- keeping styling out of container components
-- keeping animation logic (i.e., with [react-motion](https://github.com/chenglou/react-motion 'react-motion')) as a distinct layer that sits between container components and low-level rendering components
-- keep complex interface rendering method (e.g., the scrolling interface for the daily view) separate from the low-level rendering of smbgs, cbgs, boluses, basal itnervals, etc. so that:
-    + code for the low-level rendering is reusable across views
-    + the interface rendering method can be iterated on separately or swapped out entirely
-- do actual (i.e., visual) rendering in pure functional components with styling defined in accompanying CSS files (i.e., use CSS modules)
-- refactor CSS continually to keep duplication of styles to a minimum

package/docs/Background.md

@@ -1,39 +0,0 @@
-## Background
-
-This repository represents an incremental rewrite of Tidepool's data visualization code. The first implementation of Tidepool's data visualization can be found in [tideline](https://github.com/tidepool-org/tideline 'GitHub: tideline').
-
-We continue to develop the data visualization code in a separate repository from Tidepool's main web application [blip](https://github.com/tidepool-org/blip 'GitHub: blip') for several reasons:
-
-- separation of concerns: the visualization code has distinct requirements, dependencies, and development practices from the rest of blip
-- potential use by third parties building their own web applications on top of the Tidepool platform but who want to leverage some of the same data visualization components as those used in blip
-
-Historically, tideline was a separate codebase for one additional reason that is no longer a concern for us: we wanted to keep the visualization code "pure" D3 and in particular wanted to only have a React dependency in the blip codebase to avoid forcing the choice of React as a framework on third parties who might want to use our visualization code. In 2013-2014 when React was not yet the juggernaut framework it is today, this made a lot more sense.
-
-Today with [React having the majority of use & interest](http://stateofjs.com/2016/frontend/ 'The State of JavaScript 2016: Front-end frameworks') among front-end JavaScript frameworks, it is much less of a concern. Moreover, experience taught us—the hard way—that there aren't a lot of really good patterns or frameworks for creating consistent, long-term maintainable, and easily testable D3 code[^a]. On the other hand, React was built at least partly with consistency, maintainability, and testability in mind, and there are well-established community best practices to follow in order to achieve these goals. As a result, our rewrite of Tidepool's data visualization code now includes React as a core dependency, and we are shifting from a strategy of using D3 as much as possible to the opposite: we aim to use React as much as possible and only bring in the small modules we need from [the 4.x rearchitected D3](https://github.com/d3/d3/blob/master/CHANGES.md 'Changes in D3 4.0') as individual dependencies—e.g., [d3-scale](https://github.com/d3/d3-scale 'GitHub: d3-scale') and [d3-time](https://github.com/d3/d3-time 'GitHub: d3-time').
-
-### State of the rewrite
-
-#### As of November, 2016...
-
-Blip depends on @tidepool/viz for:
-
-- Device Settings (new implementation)
-- Trends (CGM version as new implementation, BGM version a port of more-or-less equivalent functionality from tideline's code)
-
-Blip still depends on tideline for:
-
-- Basics view
-- Daily view
-- BG Log view
-- data preprocessing (found in ["nurseshark"](https://github.com/tidepool-org/tideline/tree/master/plugins/nurseshark 'GitHub: tideline plugins/nurseshark/') and [the TidelineData constructor](https://github.com/tidepool-org/tideline/blob/master/js/tidelinedata.js 'GitHub: tideline js/tidelinedata.js'))
-
-Blip itself handles:
-
-- most of the visualization state management (e.g., checkbox options for BGM version of Trends view)
-- navigation from view to view and along the time dimension
-
-The eventual goal is for *everything* listed above to be handled by code in this repository. That is, eventually all code for all the data views as well as for the data preprocessing and visualization state management, including the navigation from view to view and along the time dimension will live in this repository.
-
-* * * * *
-
-[^a]: The Miso project's [d3.Chart](http://misoproject.com/d3-chart/ 'Miso Project: d3.Chart') was the most promising attempt at a lightweight "framework" for D3 heavily inspired by [Backbone](http://backbonejs.org/ 'Backbone.js')'s API, but the project's support has unfortunately been sporadic, and it [has not yet been updated to support the 4.x version of D3](https://github.com/misoproject/d3.chart/issues/121 'GitHub: d3.chart issue #121'). Nevertheless, we used d3.Chart in [the tideline version of the Trends view](https://github.com/tidepool-org/tideline/tree/master/plugins/blip/modalday 'GitHub: tideline modalday').