dce-reactkit 1.0.20 → 2.0.2

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

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;