dce-reactkit 1.0.18 → 2.0.0

package/Scatter.js

@@ -1,162 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import rechart components
-import { ResponsiveContainer, ScatterChart, Scatter as ScatterLib, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
-
-// Import helpers
-import csvToString from './common/csvToString';
-
-// Import other components
-import Holder from './common/chart/Holder';
-
-// Import default colors
-import colors from './common/chart/colors';
-
-/* Scatter Chart Component */
-class Scatter extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      xLabel,
-      xUnit,
-      yLabel,
-      yUnit,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend,
-      seriesName
-    } = this.props;
-
-    // Generate csv contents if we have a download button
-    let csvContents;
-    if (!noDownload) {
-      // Create x and y column labels dynamically
-      const xField = `${xLabel}${xUnit ? ' (' + xUnit + ')' : ''}`;
-      const yField = `${yLabel}${yUnit ? ' (' + yUnit + ')' : ''}`;
-      // Create the csv content object
-      const csv = {
-        fields: [xField, yField],
-        data: data.map(datum => {
-          return [datum.x, datum.y];
-        })
-      };
-      // Create the csv string
-      csvContents = csvToString(csv);
-    }
-
-    // Render the component
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        xLabel: xLabel,
-        xUnit: xUnit,
-        yLabel: yLabel,
-        yUnit: yUnit,
-        width: width,
-        height: height,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          ScatterChart,
-          null,
-          React.createElement(CartesianGrid, null),
-          React.createElement(YAxis, {
-            dataKey: 'y',
-            type: 'number',
-            name: yLabel
-          }),
-          React.createElement(XAxis, {
-            dataKey: 'x',
-            type: 'number',
-            name: xLabel
-          }),
-          !noTooltipOnHover && React.createElement(Tooltip, {
-            cursor: {
-              strokeDasharray: '3 3'
-            }
-          }),
-          showLegend && React.createElement(Legend, null),
-          React.createElement(ScatterLib, {
-            name: seriesName,
-            data: data,
-            fill: color
-          })
-        )
-      )
-    );
-  }
-}
-
-Scatter.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // CSS color (#123456 or 'white') for the points
-  color: PropTypes.string,
-  // Width ('100%' or 50)
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Height ('100%' or 50)
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Label for the x axis
-  xLabel: PropTypes.string,
-  // Unit for the x axis
-  xUnit: PropTypes.string,
-  // Label for the y axis
-  yLabel: PropTypes.string,
-  // Unit for the y axis
-  yUnit: PropTypes.string,
-  // Array of data objects
-  data: PropTypes.arrayOf(PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number
-  })).isRequired,
-  // If true, no tooltip is shown when hovering over a point
-  noTooltipOnHover: PropTypes.bool,
-  // If true, no download button is shown
-  noDownload: PropTypes.bool,
-  // Name of the series (included and required for legend)
-  seriesName: PropTypes.string,
-  // If true, legend is included
-  showLegend: PropTypes.bool
-};
-
-Scatter.defaultProps = {
-  // Chart has no title by default
-  title: null,
-  // Scatter dots are neutral blue by default
-  color: colors.defaultBlue,
-  // Chart takes up full width of parent by default
-  width: '100%',
-  // Chart's height is 500px by default
-  height: '500px',
-  // Label for x axis is 'x-axis' by default
-  xLabel: 'x-axis',
-  // X axis has no unit by default
-  xUnit: null,
-  // Label for y axis is 'y-axis' by default
-  yLabel: 'y-axis',
-  // Y axis has no unit by default
-  yUnit: null,
-  // Scatter series is 'Chart' by default (for the legend)
-  seriesName: 'Chart',
-  // Tooltips are displayed by default
-  noTooltipOnHover: false,
-  // Download button is added by default
-  noDownload: false,
-  // No legend is included by default
-  showLegend: false
-};
-
-export default Scatter;

package/common/chart/Holder/index.js

@@ -1,182 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import other components
-import DownloadButton from '../../../DownloadButton';
-
-// Import custom styles
-import './style.css';
-
-/* Holder Component */
-class Holder extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      xLabel,
-      xUnit,
-      yLabel,
-      yUnit,
-      width,
-      height,
-      csvContents,
-      children
-    } = this.props;
-
-    // Calculate dimensions of the holder
-    // > Chart height depends on if the title is included
-    const chartHeight = `calc(${height}${title ? ' - 2.5em' : ''}${xLabel ? ' - 1.5em' : ''})`;
-    // > Chart width depends on if there is a y axis label
-    const chartWidth = `calc(${width}${yLabel ? ' - 1.5em' : ''})`;
-
-    // The many parts of this component look like this:
-    // |""""""""""""""""""""""""""""""""""""""""""|
-    // |           Chart title [Download]         | <- title content
-    // """"""""""""""""""""""""""""""""""""""""""""
-    // |"""""|""""""""""""""""""""""""""""""""""""|
-    // |  Y  |                                    |
-    // |  L  |                                    |
-    // |  A  |                                    |
-    // |  B  |             Chart Here             | <- top content
-    // |  E  |                                    |
-    // |  L  |                                    |
-    // |     |                                    |
-    // """"""""""""""""""""""""""""""""""""""""""""
-    // |""""""""""""""""""""""""""""""""""""""""""|
-    // |                  X LABEL                 | <- bottom content
-    // """"""""""""""""""""""""""""""""""""""""""""
-
-    // Create the title content (if there's a tite)
-    const titleContent = title ? React.createElement(
-      'div',
-      {
-        style: {
-          height: '2.5em'
-        }
-      },
-      React.createElement(
-        'h4',
-        { className: 'text-center' },
-        title,
-        csvContents && React.createElement(DownloadButton, {
-          text: 'CSV',
-          filename: `${title}.csv`,
-          contents: csvContents,
-          marginLeft: '5px'
-        })
-      )
-    ) : null;
-
-    // Create the top content
-    // (includes the y-axis label and the chart, side by side)
-    const topContent = React.createElement(
-      'div',
-      null,
-      yLabel && React.createElement(
-        'div',
-        {
-          className: 'y-label-container',
-          style: {
-            height: chartHeight
-          }
-        },
-        React.createElement(
-          'div',
-          {
-            style: {
-              width: chartHeight
-            },
-            className: 'y-label-text label-text'
-          },
-          yLabel,
-          yUnit && React.createElement(
-            'span',
-            { className: 'unit' },
-            '(',
-            yUnit,
-            ')'
-          )
-        )
-      ),
-      React.createElement(
-        'div',
-        {
-          className: 'd-inline-block',
-          style: {
-            width: chartWidth,
-            height: chartHeight
-          }
-        },
-        children
-      )
-    );
-
-    // Create the bottom if there's an x label
-    // (includes the x label below the chart)
-    const bottomContent = xLabel ? React.createElement(
-      'div',
-      { className: 'x-label-text label-text' },
-      xLabel,
-      xUnit && React.createElement(
-        'span',
-        { className: 'unit' },
-        '(',
-        xUnit,
-        ')'
-      )
-    ) : null;
-
-    // Put all the pieces together into one component
-    return React.createElement(
-      'div',
-      { className: 'mb-4' },
-      React.createElement(
-        'div',
-        {
-          className: 'outer-container',
-          style: {
-            width,
-            height
-          }
-        },
-        titleContent,
-        topContent,
-        bottomContent
-      )
-    );
-  }
-}
-
-Holder.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Label of the x axis
-  xLabel: PropTypes.string,
-  // Units on the x axis
-  xUnit: PropTypes.string,
-  // Label of the y axis
-  yLabel: PropTypes.string,
-  // Units on the y axis
-  yUnit: PropTypes.string,
-  // Width of the chart (does not include the title)
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // Height of the chart (does not include the title)
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  // The chart object (should be set to fill 100% width an height)
-  children: PropTypes.node.isRequired,
-  // File contents to download
-  csvContents: PropTypes.string
-};
-
-Holder.defaultProps = {
-  title: null,
-  xLabel: null,
-  xUnit: null,
-  yLabel: null,
-  yUnit: null,
-  width: '100%',
-  height: '500px',
-  csvContents: null
-};
-
-export default Holder;

package/common/chart/Holder/style.css

@@ -1,41 +0,0 @@
-/* the outermost container of the holder */
-.outer-container {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-/* container for the y label - automatically moves to the left of the chart */
-.y-label-container {
-  display: inline-block;
-  width: 1.5em;
-  float: left;
-}
-
-/* text of the y label - text is centered, vertical, and rotated */
-.y-label-text {
-  display: inline-block;
-  height: 1.5em;
-  float: left;
-  transform: rotate(90deg);
-  transform-origin: 0.75em;
-  text-align: center;
-}
-
-/* text of the x label - text is centered */
-.x-label-text {
-  height: 1.5em;
-  text-align: center;
-}
-
-/* styles shared between both x and y labels - bold, slightly larger text*/
-.label-text {
-  font-size: 1.1em;
-  font-weight: bold;
-}
-
-/* axis unit style */
-.unit {
-  margin-left: 5px;
-  font-style: italic;
-  font-weight: normal;
-}

package/common/chart/colors.js

@@ -1,12 +0,0 @@
-/* Default colors for use in charts, etc */
-export default {
-  // A pretty neutral blue to use as a default color
-  defaultBlue: '#419bf7',
-
-  // A simple assortment of 14 colors
-  assortment: [
-  // First 10:
-  '#ec4f6a', '#f19542', '#f6c353', '#61cbcc', '#419bf7', '#005392', '#7d5297', '#d261ab', '#7edfcf', '#5eac88',
-  // Last 4:
-  '#f4ce63', '#929000', '#5e5e5e', '#008e00']
-};

package/common/csvToString.js

@@ -1,23 +0,0 @@
-import CSVParser from 'papaparse';
-
-/**
- * Function for turning a csv object into a csv string
- * @param {string[]} [csv.fields] - an array of field names. These will be used
- *   generate the header row of the csv
- * @param {string[][]} [csv.data] - an array of csv rows, where each row is an
- *   array of strings that correspond to the cells of the row
- * @return {string} the csv file contents
- */
-export default (csv => {
-  return CSVParser.unparse(csv);
-});
-
-// Example:
-// const fields = ['Name', 'Age'];
-// const data = [['Divardo', '19'], ['Calicci', '22']];
-// const csv = { fields, data}
-//
-// Calling csvToString(csv) results in the following csv file:
-// Name, Age
-// Divardo, 19
-// Calicci, 22

package/common/isFloat.js

@@ -1,14 +0,0 @@
-/**
- * Returns true if a string is a float (not an integer)
- * @param {string} str - the string to check
- * @return {boolean} whether or not the string represents a float
- */
-export default (str => {
-  const match = String(str).match(/^-?\d*(\.\d+)?$/);
-  // If no matches at all, this is not a float
-  if (!match || match.length < 2) {
-    return false;
-  }
-  // We found a match. Make sure it's a float
-  return !!match[1];
-});

package/common/isInteger.js

@@ -1,24 +0,0 @@
-import isFloat from './isFloat';
-
-/**
- * Returns true if the string is an integer
- * @param {string} str - the string to check
- * @return {boolean} whether or not the string represents an integer
- */
-export default (str => {
-  // Attempt to match
-  const matchSucceeded = String(str).match(/^-{0,1}\d+$/);
-  if (matchSucceeded) {
-    return true;
-  }
-
-  // Allow integers of form '1.'
-  const newStr = str.endsWith('.') ? `${str}0` : str;
-
-  // If no match, check if string represents an integer with decimals but all
-  // of which are zeroes
-  if (isFloat(newStr)) {
-    return parseFloat(newStr) % 1 === 0;
-  }
-  return false;
-});

package/common/math.js

@@ -1,21 +0,0 @@
-import _ from 'lodash-arithmetic';
-
-/* Simple object with high-precision mathematical functions */
-export default {
-  // Adds a + b
-  add: (a, b) => {
-    return _.add(a, b);
-  },
-  // Subtracts b from a
-  sub: (a, b) => {
-    return _.subtract(a, b);
-  },
-  // Multiplies a * b
-  mult: (a, b) => {
-    return _.multiply(a, b);
-  },
-  // Divides a / b
-  div: (a, b) => {
-    return _.divide(a, b);
-  }
-};

package/common/validators.js

@@ -1,18 +0,0 @@
-import Validator from 'validator';
-
-/* Simple object of built-in text validators */
-export default {
-  // Validates emails
-  email: Validator.isEmail,
-  // Validates 8-digit numbers (HUIDs)
-  eightDigit: datum => {
-    if (!Number.isNaN(parseFloat(datum))) {
-      return false;
-    }
-    return String(datum).length === 8;
-  },
-  // Validates numbers
-  number: datum => {
-    return !Number.isNaN(parseFloat(datum));
-  }
-};

package/glyph/Adjust.js

@@ -1,13 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAdjust } from '@fortawesome/free-solid-svg-icons';
-
-class Adjust extends Component {
-  render() {
-    return React.createElement(FontAwesomeIcon, _extends({ icon: faAdjust }, this.props));
-  }
-}
-
-export default Adjust;

package/glyph/Angle.js

@@ -1,44 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleUp, faAngleDown, faAngleRight, faAngleLeft } from '@fortawesome/free-solid-svg-icons';
-
-/* use direction="up|down|left|right" (default is "right")
- */
-
-class Angle extends Component {
-  render() {
-    // Extract props
-    const _props = this.props,
-          {
-      direction
-    } = _props,
-          props = _objectWithoutProperties(_props, ['direction']);
-
-    switch (direction) {
-      case 'up':
-        return React.createElement(FontAwesomeIcon, _extends({ icon: faAngleUp }, props));
-      case 'down':
-        return React.createElement(FontAwesomeIcon, _extends({ icon: faAngleDown }, props));
-      case 'left':
-        return React.createElement(FontAwesomeIcon, _extends({ icon: faAngleLeft }, props));
-      default:
-        return React.createElement(FontAwesomeIcon, _extends({ icon: faAngleRight }, props));
-    }
-  }
-}
-
-Angle.propTypes = {
-  /* Direction of the angle */
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right'])
-};
-
-Angle.defaultProps = {
-  direction: 'right'
-};
-
-export default Angle;

package/glyph/Archive.js

@@ -1,13 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArchive } from '@fortawesome/free-solid-svg-icons';
-
-class Archive extends Component {
-  render() {
-    return React.createElement(FontAwesomeIcon, _extends({ icon: faArchive }, this.props));
-  }
-}
-
-export default Archive;

package/glyph/Arrow.js

@@ -1,49 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowUp, faArrowDown, faArrowRight, faArrowLeft, faArrowCircleUp, faArrowCircleDown, faArrowCircleRight, faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons';
-
-/* use direction="up|down|left|right" (default is "right")
- * add circled prop to put the chevron in a circle bubble
- */
-
-class Arrow extends Component {
-  render() {
-    // Extract props
-    const _props = this.props,
-          {
-      circled,
-      direction
-    } = _props,
-          props = _objectWithoutProperties(_props, ['circled', 'direction']);
-
-    if (circled) {
-      switch (direction) {
-        case 'up':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowCircleUp }, props));
-        case 'down':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowCircleDown }, props));
-        case 'left':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowCircleLeft }, props));
-        default:
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowCircleRight }, props));
-      }
-    } else {
-      switch (direction) {
-        case 'up':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowUp }, props));
-        case 'down':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowDown }, props));
-        case 'left':
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowLeft }, props));
-        default:
-          return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowRight }, props));
-      }
-    }
-  }
-}
-
-export default Arrow;

package/glyph/ArrowsHorizontal.js

@@ -1,13 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons';
-
-class ArrowsHorizontal extends Component {
-  render() {
-    return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowsAltH }, this.props));
-  }
-}
-
-export default ArrowsHorizontal;

package/glyph/ArrowsVertical.js

@@ -1,13 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowsAltV } from '@fortawesome/free-solid-svg-icons';
-
-class ArrowsVertical extends Component {
-  render() {
-    return React.createElement(FontAwesomeIcon, _extends({ icon: faArrowsAltV }, this.props));
-  }
-}
-
-export default ArrowsVertical;

package/glyph/Award.js

@@ -1,13 +0,0 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAward } from '@fortawesome/free-solid-svg-icons';
-
-class Award extends Component {
-  render() {
-    return React.createElement(FontAwesomeIcon, _extends({ icon: faAward }, this.props));
-  }
-}
-
-export default Award;