dce-reactkit 1.0.20 → 2.0.0

package/src-old/components/Splash/Load/style.css

@@ -1,51 +0,0 @@
-.container {
-  /* Loading splash container */
-  text-align: center;
-  padding-top: 50px;
-  padding-bottom: 50px;
-
-  /* Circle size */
-  font-size: 25px;
-  color: #4aa0b5;
-}
-
-/* Add animation to every circle */
-.circle-1,.circle-2,.circle-3,.circle-4 {
-  animation: pulse 1.5s infinite;
-  -webkit-animation: pulse 1.5s infinite;
-}
-
-/* Delay subsequent circles to give animation movement */
-.circle-2 {
-  animation-delay: 0.1s;
-  -webkit-animation-delay: 0.1s;
-}
-
-.circle-3 {
-  animation-delay: 0.2s;
-  -webkit-animation-delay: 0.2s;
-}
-
-.circle-4 {
-  animation-delay: 0.3s;
-  -webkit-animation-delay: 0.3s;
-}
-
-/* Pulse animation */
-@-webkit-keyframes pulse {
-  0% {
-    transform: scale(0.9);
-    opacity: 1;
-  }
-  80% {
-    transform: scale(0.9);
-  }
-  90% {
-    transform: scale(1.5);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(0.9);
-    opacity: 1;
-  }
-}

package/src-old/components/Stat/General.js

@@ -1,252 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import { ListGroup, ListGroupItem } from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import other components
-import Well from '../Well';
-import TwoCol from '../Layout/TwoCol';
-import Radio from '../Radio';
-
-// Helpers
-import calcAverage from './helpers/calcAverage';
-import calcExtremes from './helpers/calcExtremes';
-import calcMedian from './helpers/calcMedian';
-import calcStdDev from './helpers/calcStdDev';
-
-class General extends Component {
-  constructor(props) {
-    super(props);
-
-    // Deconstruct props
-    const { data } = this.props;
-
-    // Show error if no data
-    if (!data || data.length === 0) {
-      this.state = {
-        error: 'We can\'t calculate these stats because we have no data.',
-      };
-      return;
-    }
-
-    // Calculate stats with and without zeros
-    const dataWithoutZeros = data.filter((x) => {
-      return x !== 0;
-    });
-    const showToggle = dataWithoutZeros.length !== data.length;
-
-    const [
-      statsWithZeros,
-      statsWithoutZeros,
-    ] = [data, dataWithoutZeros].map((currentData) => {
-      const {
-        low,
-        high,
-      } = calcExtremes(currentData);
-      const average = calcAverage(currentData);
-      const stdDev = calcStdDev(currentData);
-      const median = calcMedian(currentData);
-
-      return {
-        low,
-        high,
-        average,
-        stdDev,
-        median,
-        numItems: currentData.length,
-      };
-    });
-
-    this.state = {
-      statsWithZeros,
-      statsWithoutZeros,
-      showToggle,
-      displayingStatsWithZeros: true,
-    };
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      numDecimals,
-    } = this.props;
-
-    // Deconstruct state
-    const {
-      error,
-      showToggle,
-      statsWithZeros,
-      statsWithoutZeros,
-      displayingStatsWithZeros,
-    } = this.state;
-
-    // Display error
-    if (error) {
-      return (
-        <Well>
-          {title && (
-            <h3>{title}</h3>
-          )}
-          <div>
-            {error}
-          </div>
-        </Well>
-      );
-    }
-
-    // Create toggle switch
-    let toggle;
-    if (showToggle) {
-      toggle = (
-        <div className="text-center mb-2">
-          <Radio
-            items={[
-              'Include Zeros',
-              'Exclude Zeros',
-            ]}
-            initialSelectedIndex={0}
-            color="info"
-            onChange={(option, index) => {
-              this.setState({
-                displayingStatsWithZeros: (index === 0),
-              });
-            }}
-          />
-        </div>
-      );
-    }
-
-    // Get current stats
-    const {
-      low,
-      high,
-      average,
-      median,
-      stdDev,
-      numItems,
-    } = (
-      displayingStatsWithZeros
-        ? statsWithZeros
-        : statsWithoutZeros
-    );
-
-    return (
-      <Well>
-        {title && (
-          <h3 className="text-center mb-2">
-            {title}
-          </h3>
-        )}
-        {toggle}
-        <TwoCol>
-          <ListGroup>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>Average:</strong>
-                </div>
-                <div>
-                  {average.toFixed(numDecimals)}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>Median:</strong>
-                </div>
-                <div>
-                  {median.toFixed(numDecimals)}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>Standard Dev:</strong>
-                </div>
-                <div>
-                  {stdDev.toFixed(numDecimals)}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-          </ListGroup>
-          <ListGroup>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>High:</strong>
-                </div>
-                <div>
-                  {high.toFixed(numDecimals)}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>
-                    Low:
-                  </strong>
-                </div>
-                <div>
-                  {low.toFixed(numDecimals)}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-            <ListGroupItem>
-              <TwoCol
-                col1Align="right"
-                col2Align="left"
-              >
-                <div>
-                  <strong>
-                    Num Items:
-                  </strong>
-                </div>
-                <div>
-                  {numItems}
-                </div>
-              </TwoCol>
-            </ListGroupItem>
-          </ListGroup>
-        </TwoCol>
-      </Well>
-    );
-  }
-}
-
-General.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // The data
-  data: PropTypes.arrayOf(PropTypes.number).isRequired,
-  // The number of decimals
-  numDecimals: PropTypes.number,
-};
-
-General.defaultProps = {
-  title: null,
-  numDecimals: 2,
-};
-
-export default General;

package/src-old/components/Stat/helpers/calcAverage.js

@@ -1,20 +0,0 @@
-// Import math
-import math from '../../../common/math';
-
-// Import other helpers
-import calcSum from './calcSum';
-
-export default (data) => {
-  // No data
-  if (
-    !data
-    || data.length === 0
-  ) {
-    return 0;
-  }
-  // Only one element
-  if (data.length === 1) {
-    return data[0];
-  }
-  return math.div(calcSum(data), data.length);
-};

package/src-old/components/Stat/helpers/calcExtremes.js

@@ -1,27 +0,0 @@
-export default (data) => {
-  let low;
-  let lowNonzero;
-  let high;
-  data.forEach((x) => {
-    // Low
-    if (low === undefined || x < low) {
-      low = x;
-    }
-    // Low (nonzero)
-    if (
-      (lowNonzero === undefined || x < lowNonzero)
-      && x !== 0
-    ) {
-      lowNonzero = x;
-    }
-    // High
-    if (high === undefined || x > high) {
-      high = x;
-    }
-  });
-  return {
-    low,
-    lowNonzero,
-    high,
-  };
-};

package/src-old/components/Stat/helpers/calcMedian.js

@@ -1,32 +0,0 @@
-// Import math
-import math from '../../../common/math';
-
-export default (data) => {
-  // No data
-  if (
-    !data
-    || data.length === 0
-  ) {
-    return 0;
-  }
-  // Only one element
-  if (data.length === 1) {
-    return data[0];
-  }
-
-  const sortedData = data;
-  sortedData.sort();
-
-  // Find middle index
-  const middleIndex = Math.floor(math.div(data.length, 2));
-  const evenNumElems = (data.length % 2 === 0);
-
-  return (
-    evenNumElems
-      ? math.div(
-        math.add(sortedData[middleIndex], sortedData[middleIndex - 1]),
-        2
-      )
-      : sortedData[middleIndex]
-  );
-};

package/src-old/components/Stat/helpers/calcStdDev.js

@@ -1,30 +0,0 @@
-// Import math
-import math from '../../../common/math';
-
-// Import other helpers
-import calcAverage from './calcAverage';
-
-export default (data) => {
-  // No data
-  if (
-    !data
-    || data.length <= 1
-  ) {
-    return 0;
-  }
-
-  // Get average
-  const average = calcAverage(data);
-
-  // Get squared diffs
-  const squaredDiffs = data.map((x) => {
-    const diff = math.sub(x, average);
-    return math.mult(diff, diff);
-  });
-
-  // Get average of squared diffs
-  const avgSquaredDiff = calcAverage(squaredDiffs);
-
-  // Get square root of squared diff
-  return Math.sqrt(avgSquaredDiff);
-};

package/src-old/components/Stat/helpers/calcSum.js

@@ -1,8 +0,0 @@
-// Import math
-import math from '../../../common/math';
-
-export default (data) => {
-  return data.reduce((sum, value) => {
-    return math.add(sum, value);
-  }, 0);
-};

package/src-old/components/UserProfile/index.js

@@ -1,151 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import custom styles
-import './style.css';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import other components
-import Alert from '../Alert';
-
-// Import glyphs
-import Envelope from '../../glyphs/Envelope';
-import IdCard from '../../glyphs/IdCard';
-
-class UserProfile extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      user,
-      size,
-      color,
-      marginLeft,
-      marginRight,
-      marginTop,
-      marginBottom,
-    } = this.props;
-
-    // Deconstruct user information
-    const {
-      name,
-      email,
-    } = user;
-    const sisUserId = user.sis_user_id;
-    const avatarURL = user.avatar_url;
-
-    // Dynamically size everything
-    let wellWidth = '250px';
-    let imageHeight = '150px';
-    if (size === 'lg') {
-      wellWidth = '500px';
-      imageHeight = '300px';
-    } else if (size === 'sm') {
-      wellWidth = '200px';
-      imageHeight = '100px';
-    }
-
-    // Set text color to black if color is light
-    const textColor = (
-      color === 'light'
-        ? 'black'
-        : undefined
-    );
-
-    return (
-      <Alert
-        className="profile-well"
-        style={{
-          marginRight,
-          marginLeft,
-          marginTop,
-          marginBottom,
-          width: wellWidth,
-          color: textColor,
-        }}
-        color={color}
-      >
-        <img
-          className="img-fluid profile-image"
-          src={avatarURL}
-          alt={`${name}'s profile`}
-          style={{
-            height: imageHeight,
-          }}
-        />
-        <div>
-          <div>
-            <strong>{name}</strong>
-          </div>
-          <div className="data-container">
-            {email && (
-              <div
-                className="datum-container"
-                title={email}
-              >
-                <div className="icon-container">
-                  <Envelope />
-                </div>
-                {email}
-              </div>
-            )}
-            {sisUserId && (
-              <div
-                className="datum-container"
-                title={sisUserId}
-              >
-                <div className="icon-container">
-                  <IdCard />
-                </div>
-                {sisUserId}
-              </div>
-            )}
-          </div>
-        </div>
-      </Alert>
-    );
-  }
-}
-
-UserProfile.propTypes = {
-  /* Canvas user object */
-  user: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    sis_user_id: PropTypes.string.isRequired,
-    avatar_url: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-  }).isRequired,
-  /* Size of the profile */
-  size: PropTypes.string,
-  /* Bootstrap color of the background of the profile */
-  color: PropTypes.string,
-  /* Margins */
-  marginLeft: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  marginRight: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  marginTop: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  marginBottom: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-};
-
-UserProfile.defaultProps = {
-  size: 'md',
-  color: 'secondary',
-  marginLeft: null,
-  marginRight: null,
-  marginTop: null,
-  marginBottom: null,
-};
-
-export default UserProfile;

package/src-old/components/UserProfile/style.css

@@ -1,33 +0,0 @@
-.profile-well {
-  display: inline-block;
-  overflow: hidden;
-  text-align: center;
-}
-
-.profile-image {
-  -webkit-box-shadow: 5px 5px 19px 0px rgba(207,207,207,1);
-  -moz-box-shadow: 5px 5px 19px 0px rgba(207,207,207,1);
-  box-shadow: 5px 5px 19px 0px rgba(207,207,207,1);
-
-  border-radius: 5px;
-  margin-bottom: 5px;
-}
-
-.data-container {
-  display: inline-block;
-  max-width: 100%;
-}
-
-.datum-container {
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.icon-container {
-  display: inline-block;
-  width: 1.3em;
-  margin-right: 3px;
-  text-align: center;
-}

package/src-old/components/Well.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import other components
-import Alert from './Alert';
-
-class Well extends Component {
-  render() {
-    // Deconstruct properties
-    const { children } = this.props;
-
-    return (
-      <Alert color="secondary">
-        {children}
-      </Alert>
-    );
-  }
-}
-
-Well.propTypes = {
-  /* Children (body) of the well */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-export default Well;