dce-reactkit 1.0.20 → 2.0.0

package/lib/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/lib/StackedBar.js

@@ -1,243 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import chart components
-import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
-
-// Import other components
-import Holder from './common/chart/Holder';
-
-// Import default colors
-import colors from './common/chart/colors';
-
-// Import helpers
-import csvToString from './common/csvToString';
-
-/* Stacked Bar Chart Component */
-class StackedBar extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      width,
-      height,
-      valueColors,
-      nameLabel,
-      nameUnit,
-      valuesLabel,
-      valuesUnit,
-      valueLabels,
-      valueUnits,
-      data,
-      horizontal,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Pre-process the values
-    // Collect all the value names
-    let valueNames = {}; // valueName => true
-    data.forEach(datum => {
-      if (datum.values) {
-        Object.keys(datum.values).forEach(valueName => {
-          valueNames[valueName] = true;
-        });
-      }
-    });
-    valueNames = Object.keys(valueNames);
-    // Put together value objects
-    const valueObjects = {}; // valueName => { valueName, label, unit, color }
-    let nextAssortmentColorIndex = 0;
-    valueNames.forEach(valueName => {
-      // Get the color
-      let color;
-      if (colors === 'assortment' || !valueColors[valueName]) {
-        color = colors.assortment[nextAssortmentColorIndex % colors.assortment.length];
-        nextAssortmentColorIndex += 1;
-      } else {
-        color = valueColors[valueName];
-      }
-
-      // Create a value object
-      const valueObject = {
-        valueName,
-        color,
-        label: valueLabels[valueName] || valueName,
-        unit: valueUnits[valueName] || null
-      };
-
-      // Save the value object
-      valueObjects[valueName] = valueObject;
-    });
-
-    // Pre-process the data
-    const newData = []; // Array of { name, valueName: value, ...}
-    data.forEach(datum => {
-      const newDatum = {
-        name: datum.name
-      };
-
-      // Add all values, set the number to zero if it wasn't defined
-      valueNames.forEach(valueName => {
-        newDatum[valueName] = datum.value[valueName] || 0;
-      });
-
-      // Save to newData
-      newData.push(newDatum);
-    });
-
-    // Generate csv contents if they weren't included
-    let { csvContents } = this.props;
-    if (!noDownload && !csvContents) {
-      const fields = [];
-
-      // Create the name column using the label and unit (if it's included)
-      fields.push(`${nameLabel}${nameUnit ? ' (' + nameUnit + ')' : ''}`);
-
-      // Create the value columns using the label and unit (if it's included)
-      valueNames.forEach(valueName => {
-        const valueObject = valueObjects[valueName];
-        fields.push(`${valueObject.label}${valueObject.unit ? ' (' + valueObject.unit + ')' : ''}`);
-      });
-
-      // Build the csv data object
-      const csv = {
-        fields,
-        data: newData.map(datum => {
-          return valueNames.map(valueName => {
-            return datum[valueName];
-          });
-        })
-      };
-
-      // Turn the csv object into a string
-      csvContents = csvToString(csv);
-    }
-
-    // Create the bars
-    const bars = valueNames.map(valueName => {
-      return React.createElement(Bar, {
-        dataKey: valueName,
-        stackId: 'a',
-        fill: valueObjects[valueName].color
-      });
-    });
-
-    // Render the component
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        width: width,
-        height: height,
-        xLabel: horizontal ? valuesLabel : nameLabel,
-        xUnit: horizontal ? valuesUnit : nameUnit,
-        yLabel: horizontal ? nameLabel : valuesLabel,
-        yUnit: horizontal ? nameUnit : valuesUnit,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          BarChart,
-          {
-            data: newData,
-            layout: horizontal ? 'vertical' : 'horizontal'
-          },
-          React.createElement(CartesianGrid, { strokeDasharray: '3 3' }),
-          React.createElement(XAxis, {
-            type: horizontal ? 'number' : 'category',
-            dataKey: horizontal ? null : 'name'
-          }),
-          React.createElement(YAxis, {
-            type: horizontal ? 'category' : 'number',
-            dataKey: horizontal ? 'name' : null
-          }),
-          !noTooltipOnHover && React.createElement(Tooltip, null),
-          showLegend && React.createElement(Legend, null),
-          bars
-        )
-      )
-    );
-  }
-}
-
-StackedBar.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS colors (#123456 or 'white') for each bar (can be overridden)
-  valueColors: PropTypes.objectOf(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 name axis
-  nameLabel: PropTypes.string,
-  // Unit for the name axis
-  nameUnit: PropTypes.string,
-  // The label for the stacked bar axis
-  valuesLabel: PropTypes.string,
-  // The unit for the stcked bar axis
-  valuesUnit: PropTypes.string,
-  // Labels for the values
-  valueLabels: PropTypes.objectOf(PropTypes.string),
-  // Units for the values
-  valueUnits: PropTypes.objectOf(PropTypes.string),
-  // The data/bars
-  data: PropTypes.arrayOf(PropTypes.shape({
-    // Name of the bar
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    // Values of each bar
-    values: PropTypes.object
-  })).isRequired,
-  // If true, bar chart is a horizontal bar chart
-  horizontal: PropTypes.bool,
-  // If true, no tooltip is shown on hover
-  noTooltipOnHover: PropTypes.bool,
-  // If true, legend is included
-  showLegend: PropTypes.bool,
-  // If true, no download button is shown
-  noDownload: PropTypes.bool,
-  // The contents of the csv file to download (auto-generated if not included)
-  csvContents: PropTypes.string
-};
-
-StackedBar.defaultProps = {
-  // No title for chart by default
-  title: null,
-  // By default, we use an assortment of colors, one for each value
-  valueColors: 'assorted',
-  // Chart takes up whole parent width by default
-  width: '100%',
-  // Chart is 500 pixels tall by default
-  height: '500px',
-  // Name axis is labeled 'Name' by default
-  nameLabel: 'Name',
-  // Name axis has no unit by default
-  nameUnit: null,
-  // The stacked bar axis is labeled 'Value' by default
-  valuesLabel: 'Value',
-  // The stacked bar axis has no unit by default
-  valuesUnit: null,
-  // Values are labeled by their property names by default
-  valueLabels: {},
-  // Values have no units by default
-  valueUnits: {},
-  // The bar chart is a vertical bar chart by default
-  horizontal: false,
-  // Tooltips are displayed by defaults
-  noTooltipOnHover: false,
-  // No legend is shown by default
-  showLegend: false,
-  // A download button is added by default
-  noDownload: false,
-  // We auto-generate the csv contents by default
-  csvContents: null
-};
-
-export default StackedBar;

package/lib/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/lib/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/lib/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/lib/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/lib/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];
-});