dce-reactkit 1.0.20 → 2.0.0

package/src-old/components/Card.js

@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import {
-  Card as BootstrapCard,
-  CardHeader,
-  CardBody,
-  CardTitle,
-  CardSubtitle,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-class Card extends Component {
-  render() {
-    // Extract properties
-    const {
-      title,
-      subtitle,
-      children,
-      ...props
-    } = this.props;
-
-    return (
-      <BootstrapCard {...props}>
-        {title && (
-          <CardHeader>
-            <CardTitle className="mb-0">
-              {title}
-            </CardTitle>
-            {subtitle && (
-              <CardSubtitle className="mt-1">
-                {subtitle}
-              </CardSubtitle>
-            )}
-          </CardHeader>
-        )}
-        <CardBody>
-          {children}
-        </CardBody>
-      </BootstrapCard>
-    );
-  }
-}
-
-Card.propTypes = {
-  /* The title of the card */
-  title: PropTypes.string,
-  /* The subtitle of the card */
-  subtitle: PropTypes.string,
-  /* Children/body of the card */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-Card.defaultProps = {
-  title: null,
-  subtitle: null,
-};
-
-export default Card;

package/src-old/components/Chart/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 './Holder';
-
-// Import default colors
-import colors from './colors';
-
-// Import helpers
-import csvToString from '../../common/csvToString';
-
-class BarChart extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      color,
-      width,
-      height,
-      nameLabel,
-      nameUnit,
-      valueLabel,
-      valueUnit,
-      data,
-      horizontal,
-      noTooltipOnHover,
-      noDownload,
-      showLegend,
-    } = this.props;
-
-    let { csvContents } = this.props;
-    if (!noDownload && !csvContents) {
-      const nameField = `${nameLabel}${nameUnit ? ' (' + nameUnit + ')' : ''}`;
-      const valueField = `${valueLabel}${valueUnit ? ' (' + valueUnit + ')' : ''}`;
-      const csv = {
-        fields: [nameField, valueField],
-        data: data.map((datum) => {
-          return [datum.name, datum.value];
-        }),
-      };
-      csvContents = csvToString(csv);
-    }
-
-    return (
-      <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}
-      >
-        <ResponsiveContainer
-          width="100%"
-          height="100%"
-        >
-          <BarChartRechart
-            data={data.map((datum) => {
-              return {
-                name: datum.name,
-                [valueLabel]: datum.value,
-              };
-            })}
-            layout={horizontal ? 'vertical' : 'horizontal'}
-          >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis
-              type={horizontal ? 'number' : 'category'}
-              dataKey={horizontal ? null : 'name'}
-            />
-            <YAxis
-              type={horizontal ? 'category' : 'number'}
-              dataKey={horizontal ? 'name' : null}
-            />
-            {!noTooltipOnHover && (
-              <Tooltip />
-            )}
-            {showLegend && (
-              <Legend />
-            )}
-            <Bar dataKey={valueLabel} fill={color} />
-          </BarChartRechart>
-        </ResponsiveContainer>
-      </Holder>
-    );
-  }
-}
-
-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 = {
-  title: null,
-  color: colors.defaultBlue,
-  width: '100%',
-  height: '500px',
-  nameLabel: 'Name',
-  nameUnit: null,
-  valueLabel: 'Value',
-  valueUnit: null,
-  horizontal: false,
-  noTooltipOnHover: false,
-  showLegend: false,
-  noDownload: false,
-  csvContents: null,
-};
-
-export default BarChart;

package/src-old/components/Chart/Donut.js

@@ -1,160 +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 './Holder';
-
-// Import default colors
-import colors from './colors';
-
-// Import helpers
-import csvToString from '../../common/csvToString';
-
-class DonutChart extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      color,
-      width,
-      height,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend,
-    } = this.props;
-
-    let csvContents;
-    if (!noDownload) {
-      const csv = {
-        fields: ['Name', 'Value'],
-        data: data.map((datum) => {
-          return [datum.name, datum.value];
-        }),
-      };
-      csvContents = csvToString(csv);
-    }
-
-    return (
-      <Holder
-        title={title}
-        width={width}
-        height={height}
-        csvContents={csvContents}
-      >
-        <ResponsiveContainer
-          width="100%"
-          height="100%"
-        >
-          <PieChart>
-            {showLegend && (
-              <Legend />
-            )}
-            <Pie
-              data={data}
-              dataKey="value"
-              innerRadius="60%"
-              outerRadius="100%"
-              fill={color}
-            >
-              {
-                data.map((item, index) => {
-                  let itemColor = (
-                    item.color
-                      ? item.color
-                      : color
-                  );
-                  if (itemColor === 'assortment') {
-                    itemColor = colors.assortment[
-                      index % colors.assortment.length
-                    ];
-                    // Don't let two adjacent slices have 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 (
-                    <Cell
-                      key={genUUID()}
-                      fill={itemColor}
-                    />
-                  );
-                })
-              }
-            </Pie>
-            {!noTooltipOnHover && (
-              <Tooltip />
-            )}
-          </PieChart>
-        </ResponsiveContainer>
-      </Holder>
-    );
-  }
-}
-
-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 = {
-  title: null,
-  color: 'assortment',
-  width: '100%',
-  height: '500px',
-  noTooltipOnHover: false,
-  showLegend: false,
-  noDownload: false,
-};
-
-export default DonutChart;

package/src-old/components/Chart/Histogram.js

@@ -1,189 +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 './colors';
-
-// Import helpers
-import csvToString from '../../common/csvToString';
-
-class Histogram extends Component {
-  render() {
-    // Deconstruct props
-    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`)
-    );
-    const bucketWidth = (endValue - startValue) / numBuckets;
-    for (let i = 0; i < numBuckets; i++) {
-      const bucketStart = startValue + bucketWidth * i;
-      const bucketEnd = startValue + bucketWidth * (i + 1);
-
-      // 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);
-      }
-      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 the last bucket, allow value to equal the end value
-        const lastBucket = (i === buckets.length - 1);
-        if (
-          value >= buckets[i].start
-          && (lastBucket ? value <= buckets[i].end : value < buckets[i].end)
-        ) {
-          // Found the correct bucket!
-          buckets[i].value += 1;
-          break;
-        }
-      }
-    });
-
-    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);
-    }
-
-    return (
-      <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 = {
-  title: null,
-  color: colors.defaultBlue,
-  width: '100%',
-  height: '500px',
-  startValue: 0,
-  endValue: null,
-  numBuckets: 10,
-  numDecimals: 1,
-  bucketLabel: 'Bucket',
-  bucketUnit: null,
-  valueLabel: 'Num in Bucket',
-  valueUnit: null,
-  noTooltipOnHover: false,
-  showLegend: false,
-  noDownload: false,
-};
-
-export default Histogram;