dce-reactkit 1.0.18 → 2.0.0

package/Bar.js

@@ -1,169 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import rechart components
-import { ResponsiveContainer, BarChart as BarChartRechart, 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';
-
-/* Bar Chart Component */
-class BarChart extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      nameLabel,
-      nameUnit,
-      valueLabel,
-      valueUnit,
-      data,
-      horizontal,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Generate csv contents if they weren't included
-    let { csvContents } = this.props;
-    if (!noDownload && !csvContents) {
-      // Create the name column using the label and unit (if it's included)
-      const nameField = `${nameLabel}${nameUnit ? ' (' + nameUnit + ')' : ''}`;
-      // Create the value column using the label and unit (if it's included)
-      const valueField = `${valueLabel}${valueUnit ? ' (' + valueUnit + ')' : ''}`;
-      // Build the csv data object
-      const csv = {
-        fields: [nameField, valueField],
-        data: data.map(datum => {
-          return [datum.name, datum.value];
-        })
-      };
-      // Turn the csv object into a string
-      csvContents = csvToString(csv);
-    }
-
-    // Render the component
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        width: width,
-        height: height,
-        xLabel: horizontal ? valueLabel : nameLabel,
-        xUnit: horizontal ? valueUnit : nameUnit,
-        yLabel: horizontal ? nameLabel : valueLabel,
-        yUnit: horizontal ? nameUnit : valueUnit,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          BarChartRechart,
-          {
-            data: data.map(datum => {
-              return {
-                name: datum.name,
-                [valueLabel]: datum.value
-              };
-            }),
-            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),
-          React.createElement(Bar, { dataKey: valueLabel, fill: color })
-        )
-      )
-    );
-  }
-}
-
-BarChart.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS color (#123456 or 'white') for bars (can be overridden)
-  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 name axis
-  nameLabel: PropTypes.string,
-  // Unit for the name axis
-  nameUnit: PropTypes.string,
-  // Label for the value axis
-  valueLabel: PropTypes.string,
-  // Unit for the value axis
-  valueUnit: PropTypes.string,
-  // The data/bars
-  data: PropTypes.arrayOf(PropTypes.shape({
-    // Name of the bar
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    // Value of the slice (size)
-    value: PropTypes.number.isRequired,
-    // Color of the slice (overrides props.color)
-    color: PropTypes.string
-  })).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
-};
-
-BarChart.defaultProps = {
-  // No title for chart by default
-  title: null,
-  // Bars are a neutral blue by default
-  color: colors.defaultBlue,
-  // 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 label by default
-  nameUnit: null,
-  // Value axis is labeled 'Value' by default
-  valueLabel: 'Value',
-  // Value axis has no label by default
-  valueUnit: null,
-  // 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 BarChart;

package/Donut.js

@@ -1,145 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import genUUID from 'uuid/v1';
-
-// Import rechart components
-import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Tooltip } 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';
-
-/* Donut Chart Component */
-class DonutChart extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Generate csv contents for the download
-    let csvContents;
-    if (!noDownload) {
-      const csv = {
-        fields: ['Name', 'Value'],
-        data: data.map(datum => {
-          return [datum.name, datum.value];
-        })
-      };
-      csvContents = csvToString(csv);
-    }
-
-    return React.createElement(
-      Holder,
-      {
-        title: title,
-        width: width,
-        height: height,
-        csvContents: csvContents
-      },
-      React.createElement(
-        ResponsiveContainer,
-        {
-          width: '100%',
-          height: '100%'
-        },
-        React.createElement(
-          PieChart,
-          null,
-          showLegend && React.createElement(Legend, null),
-          React.createElement(
-            Pie,
-            {
-              data: data,
-              dataKey: 'value',
-              innerRadius: '60%',
-              outerRadius: '100%',
-              fill: color
-            },
-            data.map((item, index) => {
-              // Get the item's default color
-              let itemColor = item.color ? item.color : color;
-
-              // If individual item doesn't have an override color and we
-              // are using a color assortment, choose the next color
-              if (itemColor === 'assortment' && !item.color) {
-                itemColor = colors.assortment[index % colors.assortment.length];
-                // Don't let two adjacent slices have the same color
-                // (this math ensures that if the first and last slice are
-                // not the same color)
-                if ((data.length - 1) % colors.assortment.length === 0 && index === data.length - 1) {
-                  itemColor = colors.assortment[(index + Math.floor(colors.assortment.length / 2)) % colors.assortment.length];
-                }
-              }
-
-              // Return the cell corresponding to this donut slice
-              return React.createElement(Cell, {
-                key: genUUID(),
-                fill: itemColor
-              });
-            })
-          ),
-          !noTooltipOnHover && React.createElement(Tooltip, null)
-        )
-      )
-    );
-  }
-}
-
-DonutChart.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS color (#123456 or 'white') for slices (can be overridden)
-  // OR 'assortment' for random colors
-  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]),
-  // The data/slices
-  data: PropTypes.arrayOf(PropTypes.shape({
-    // Name of the slice
-    name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    // Value of the slice (size)
-    value: PropTypes.number.isRequired,
-    // Color of the slice (overrides props.color)
-    color: PropTypes.string
-  })).isRequired,
-  // 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
-};
-
-DonutChart.defaultProps = {
-  // Chart has no title by default
-  title: null,
-  // Donut slices get an assortment of colors by default
-  color: 'assortment',
-  // Chart takes up full parent width by default
-  width: '100%',
-  // Chart's height is 500px by default
-  height: '500px',
-  // Tooltips are displayed by default
-  noTooltipOnHover: false,
-  // No legend is included by default
-  showLegend: false,
-  // A download button is added by default
-  noDownload: false
-};
-
-export default DonutChart;

package/DownloadButton.js

@@ -1,81 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import file download button
-import DownloadLink from 'react-download-link';
-
-// Import glyphs
-import Download from './glyph/Download';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/* Download Button Component */
-class DownloadButton extends Component {
-  // Deconstruct props (see propTypes below for detailed information)
-  render() {
-    const {
-      text,
-      filename,
-      contents,
-      large,
-      marginLeft,
-      marginRight,
-      marginTop,
-      marginBottom
-    } = this.props;
-
-    // Render the component
-    return React.createElement(DownloadLink, {
-      filename: filename,
-      exportFile: () => {
-        return contents;
-      },
-      label: React.createElement(
-        'span',
-        null,
-        React.createElement(Download, { className: 'mr-2' }),
-        text
-      ),
-      tagName: 'div',
-      className: `btn btn-dark text-white${large ? ' btn-lg' : ''}`,
-      style: {
-        textDecoration: 'none !important',
-        marginLeft,
-        marginRight,
-        marginTop,
-        marginBottom
-      }
-    });
-  }
-}
-
-DownloadButton.propTypes = {
-  // The title of the button
-  text: PropTypes.string,
-  // The filename of the download (the name the contents are downloaded as)
-  filename: PropTypes.string.isRequired,
-  // The contents of the file
-  contents: PropTypes.string.isRequired,
-  // If true, the button is a bootstrap large button
-  large: PropTypes.bool,
-  // Margins for the button
-  marginLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginRight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-
-DownloadButton.defaultProps = {
-  // Title of the button is 'Download' by default
-  text: 'Download',
-  // Button is a normal sized bootstrap button by default
-  large: false,
-  // Button has no margins by default
-  marginLeft: null,
-  marginRight: null,
-  marginTop: null,
-  marginBottom: null
-};
-
-export default DownloadButton;

package/Histogram.js

@@ -1,193 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import other components
-import BarChart from './Bar';
-
-// Import default colors
-import colors from './common/chart/colors';
-
-// Import helpers
-import csvToString from './common/csvToString';
-
-/* Histogram Chart Component */
-class Histogram extends Component {
-  render() {
-    // Deconstruct props (see propTypes below for detailed information)
-    const {
-      title,
-      color,
-      width,
-      height,
-      startValue,
-      numBuckets,
-      numDecimals,
-      bucketLabel,
-      bucketUnit,
-      valueLabel,
-      valueUnit,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend
-    } = this.props;
-
-    // Choose end value (if none included, use largest value)
-    let { endValue } = this.props;
-    if (endValue === undefined || endValue === null) {
-      endValue = Math.max(...data);
-    }
-
-    // Divide data into buckets
-    const buckets = [];
-    const epsilon = numDecimals === 0 ? 1 : parseFloat(`0.${'0'.repeat(numDecimals - 1)}1`);
-    // Dynamically choose the bucket width
-    const bucketWidth = (endValue - startValue) / numBuckets;
-    // Set up each bucket
-    for (let i = 0; i < numBuckets; i++) {
-      // Define bucket start and end
-      const bucketStart = startValue + bucketWidth * i; // inclusive
-      const bucketEnd = startValue + bucketWidth * (i + 1); // exclusive
-
-      // Generate start/end labels for the bucket
-      const lastBucket = i === numBuckets - 1;
-      let bucketStartName = bucketStart.toFixed(numDecimals);
-      if (bucketStartName === '0.0') {
-        bucketStartName = '0';
-      } else if (bucketStartName.startsWith('0.')) {
-        bucketStartName = bucketStartName.substring(1);
-      }
-      let bucketEndName = lastBucket ? bucketEnd.toFixed(numDecimals) : (parseFloat(bucketEnd.toFixed(numDecimals)) - epsilon).toFixed(numDecimals);
-      if (bucketEndName === '0.0') {
-        bucketEndName = '0';
-      } else if (bucketEndName.startsWith('0.')) {
-        bucketEndName = bucketEndName.substring(1);
-      }
-
-      // Create a bucket object {name, start, end}
-      buckets.push({
-        name: `${bucketStartName}-${bucketEndName}`,
-        start: bucketStart,
-        end: bucketEnd,
-        value: 0
-      });
-    }
-
-    // Put data into buckets
-    data.forEach(value => {
-      for (let i = 0; i < buckets.length; i++) {
-        // If this is the last bucket, allow value to equal the end value
-        // (inclusive)
-        const lastBucket = i === buckets.length - 1;
-
-        // Check if this value falls in this bucket
-        if (value >= buckets[i].start && (lastBucket ? value <= buckets[i].end : value < buckets[i].end)) {
-          // Found the correct bucket! Add another item to this bucket
-          buckets[i].value += 1;
-          break;
-        }
-      }
-    });
-
-    // Generate the downloadable csv if we have a download button
-    let csvContents;
-    if (!noDownload) {
-      const bucketField = `${bucketLabel}${bucketUnit ? ' (' + bucketUnit + ')' : ''}`;
-      const valueField = `${valueLabel}${valueUnit ? ' (' + valueUnit + ')' : ''}`;
-      const csv = {
-        fields: [bucketField, valueField],
-        data: buckets.map(bucket => {
-          return [bucket.name, bucket.value];
-        })
-      };
-      csvContents = csvToString(csv);
-    }
-
-    // Render the component (it's just a bar chart)
-    return React.createElement(BarChart, {
-      title: title,
-      color: color,
-      width: width,
-      height: height,
-      nameLabel: bucketLabel,
-      nameUnit: bucketUnit,
-      valueLabel: valueLabel,
-      valueUnit: valueUnit,
-      noTooltipOnHover: noTooltipOnHover,
-      showLegend: showLegend,
-      noDownload: noDownload,
-      csvContents: csvContents,
-      data: buckets
-    });
-  }
-}
-
-Histogram.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // Default CSS color (#123456 or 'white') for slices (can be overridden)
-  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]),
-  // The lowest value to start at (beginning of first bucket)
-  startValue: PropTypes.number,
-  // The highest value to count (ending of the last bucket)
-  endValue: PropTypes.number,
-  // The number of buckets
-  numBuckets: PropTypes.number,
-  // The number of decimals to display on the bucket axis
-  numDecimals: PropTypes.number,
-  // Label for the bucket axis
-  bucketLabel: PropTypes.string,
-  // Unit for the bucket axis
-  bucketUnit: PropTypes.string,
-  // Label for the value axis
-  valueLabel: PropTypes.string,
-  // Unit for the value axis
-  valueUnit: PropTypes.string,
-  // The numbers to chart in the histogram
-  data: PropTypes.arrayOf(PropTypes.number).isRequired,
-  // 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
-};
-
-Histogram.defaultProps = {
-  // Chart has no title by default
-  title: null,
-  // Bars are neutral blue by default
-  color: colors.defaultBlue,
-  // Chart takes up full parent width by default
-  width: '100%',
-  // Chart's height is 500px by default
-  height: '500px',
-  // First bucket starts at 0 by default
-  startValue: 0,
-  // Last bucket takes on the highest value in the dataset by default
-  endValue: null,
-  // The data is divided into 10 buckets by default
-  numBuckets: 10,
-  // The bucket labels include one decimal
-  numDecimals: 1,
-  // The bucket axis is called 'Bucket' by default
-  bucketLabel: 'Bucket',
-  // The bucket axis has no unit by default
-  bucketUnit: null,
-  // The value axis is called 'Num in Bucket' by default
-  valueLabel: 'Num in Bucket',
-  // The value axis has no unit by default
-  valueUnit: null,
-  // Tooltips are shown by default
-  noTooltipOnHover: false,
-  // No legend is included by default
-  showLegend: false,
-  // A download button is included by default
-  noDownload: false
-};
-
-export default Histogram;