@instructure/quiz-core 17.17.1-rc.2 → 17.17.3-rc.0

package/lib/reporting/components/charts/Distribution/presenter.js

@@ -1,386 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Distribution = exports.starPathData = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = require("prop-types");
-
-var _d3Array = require("d3-array");
-
-var _d3Axis = require("d3-axis");
-
-var _d3Scale = require("d3-scale");
-
-var _d3Selection = require("d3-selection");
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
-var _d3Transition = require("d3-transition");
-
-var _flow = _interopRequireDefault(require("lodash/flow"));
-
-var _dec, _class, _class2, _temp;
-
-var styles = {
-  componentId: 'bIUJn',
-  template: function template(theme) {
-    return "\n\n.bIUJn_fKwc{fill:".concat(theme.barFillColor || 'inherit', "}\n\n.bIUJn_erik{fill:").concat(theme.barStarFillColor || 'inherit', "}\n\n.bIUJn_eIKC{color:").concat(theme.xAxisColor || 'inherit', "}\n\n.bIUJn_cKHw{color:").concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
-  },
-  'bar': 'bIUJn_fKwc',
-  'barStar': 'bIUJn_erik',
-  'xAxis': 'bIUJn_eIKC',
-  'barLabel': 'bIUJn_cKHw'
-};
-// Star path copied from instructure-icons/svg/Solid/star.svg
-// eslint-disable-next-line max-len
-var starPathData = 'M1915.918 737.475c-10.955-33.543-42.014-56.131-77.364-56.131h-612.029l-189.063-582.1v-.112C1026.394 65.588 995.335 43 959.984 43c-35.237 0-66.41 22.588-77.365 56.245L693.443 681.344H81.415c-35.35 0-66.41 22.588-77.365 56.131-10.955 33.544.79 70.137 29.478 91.03l495.247 359.831-189.177 582.212c-10.955 33.657 1.13 70.25 29.817 90.918 14.23 10.278 30.946 15.473 47.66 15.473 16.716 0 33.432-5.195 47.775-15.586l495.134-359.718 495.021 359.718c28.574 20.781 67.087 20.781 95.662.113 28.687-20.668 40.658-57.261 29.703-91.03l-189.176-582.1 495.36-359.83c28.574-20.894 40.433-57.487 29.364-91.03';
-exports.starPathData = starPathData;
-var MARGIN_T = 0;
-var MARGIN_B = 28;
-var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Distribution, _Component);
-
-  var _super = (0, _createSuper2.default)(Distribution);
-
-  function Distribution() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Distribution);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this._isStarred = function (d, i) {
-      return typeof _this.props.starIndex === 'number' && i === _this.props.starIndex;
-    };
-
-    _this._renderStar = function (svg) {
-      if (typeof _this.props.starIndex !== 'number') return;
-      var star = svg.append('path').attr('d', starPathData).classed(styles.barStar, true);
-      var starIndex = _this.props.starIndex;
-      var starX = _this.x(starIndex) + _this.x.bandwidth() / 2;
-      var starY = _this.y(_this.props.visualDistribution[starIndex]) - 30; // scale the star down and position it on the x axis - y axis will be applied by animation
-
-      var xTransform = "translate(".concat(starX, " 0) scale(0.011) translate(-960 0)");
-
-      _this.applyTransition(star, function (rects) {
-        return rects.attr('opacity', 0).attr('transform', "translate(0 ".concat(starY + 20, ") ").concat(xTransform));
-      }, function (rects) {
-        return rects.attr('opacity', 1).attr('transform', "translate(0 ".concat(starY, ") ").concat(xTransform));
-      }, function (transition) {
-        return transition.delay(_this.props.animateDuration).duration(600);
-      });
-    };
-
-    _this.applyTransition = function (selection, initialFunc, finalFunc, transitionFunc) {
-      var identity = function identity(s) {
-        return s;
-      };
-
-      var transition = function transition(s) {
-        return s.transition(_this.getTransition());
-      };
-
-      var applicators = [];
-
-      if (_this.isAnimated()) {
-        applicators.push(initialFunc || identity, transition, transitionFunc || identity);
-      }
-
-      applicators.push(finalFunc || identity);
-      return (0, _flow.default)(applicators)(selection);
-    };
-
-    _this.setChartRef = function (ref) {
-      _this.chart = ref;
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(Distribution, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.__svg = this.createChart(this.chart, this.props);
-      this.updateChart(this.__svg, this.props);
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      this.updateChart(this.__svg, nextProps);
-      return false;
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.removeChart();
-    }
-  }, {
-    key: "isAnimated",
-    value: function isAnimated() {
-      return this.props.animateDelay || this.props.animateDuration;
-    }
-  }, {
-    key: "calculateAxis",
-    value: function calculateAxis(props) {
-      // the x scale is static since it will always represent the BucketCount
-      // percentiles, so we can avoid recalculating it on every update:
-      this.x = (0, _d3Scale.scaleBand)().rangeRound([0, this.width]).paddingInner(props.barPaddingInner).paddingOuter(props.barPaddingOuter).domain((0, _d3Array.range)(props.visualDistribution.length));
-      var highest = (0, _d3Array.max)(props.visualDistribution);
-      this.y = (0, _d3Scale.scaleLinear)().rangeRound([this.height, props.barPaddingTop]).domain([0, highest]);
-      this.xAxis = (0, _d3Axis.axisBottom)(this.x).tickSize([0]).tickValues((0, _d3Array.range)(props.visualDistribution.length));
-      this.props.calculateAxis(this.x, this.y, this.xAxis, this.height);
-    }
-  }, {
-    key: "weightedAvg",
-    value: function weightedAvg(data) {
-      var partitions = data.length - 1;
-      var totalStudents = (0, _d3Array.sum)(data);
-      var avg = data.reduce(function (total, count, index) {
-        // Assumes even weight of scores across distribution
-        var score = index / partitions;
-        return total + score * count;
-      }, 0.0) / totalStudents;
-      var avgPartition = Math.floor(avg * partitions);
-      return {
-        avg: avg,
-        aboveAvg: (0, _d3Array.sum)(data.slice(avgPartition)),
-        belowAvg: (0, _d3Array.sum)(data.slice(0, avgPartition))
-      };
-    }
-  }, {
-    key: "summarizeChart",
-    value: function summarizeChart() {
-      var data = this.props.summaryDistribution || this.props.visualDistribution;
-
-      if (data.length <= 1) {
-        return '';
-      }
-
-      var avgInfo = this.weightedAvg(data);
-
-      if (avgInfo.belowAvg + avgInfo.aboveAvg < 1) {
-        return '';
-      }
-
-      var textForScreenreaders = (0, _formatMessage.default)('{aboveAvg} students scored above or at the average, and {belowAvg} below. ', {
-        aboveAvg: avgInfo.aboveAvg,
-        belowAvg: avgInfo.belowAvg
-      });
-      data.forEach(function (datum, i) {
-        if (datum > 0) {
-          textForScreenreaders += (0, _formatMessage.default)("{\n            count, plural,\n            one {# student scored between {lower, number, percent} and {upper, number, percent}. }\n            other {# students scored between {lower, number, percent} and {upper, number, percent}. }\n          }", {
-            count: datum,
-            lower: i / data.length,
-            upper: (i + 1) / data.length
-          });
-        }
-      });
-      return this.props.summarizeChart(textForScreenreaders);
-    }
-  }, {
-    key: "createChart",
-    value: function createChart(node, props) {
-      // parentNode for IE11
-      var parentWidth = (node.parentElement || node.parentNode || {}).offsetWidth;
-      this.width = props.chartWidth || parentWidth;
-      this.height = props.chartHeight;
-      this.viewportHeight = this.height + MARGIN_T + MARGIN_B;
-      this.calculateAxis(props);
-      var svg = (0, _d3Selection.select)(node).attr('role', 'document').attr('aria-role', 'document').attr('width', '100%').attr('height', '100%').attr('viewBox', "0 0 ".concat(this.width, " ").concat(this.viewportHeight)).attr('preserveAspectRatio', 'xMidYMax').append('g');
-      this.title = Distribution.addTitle(svg, (0, _formatMessage.default)('Score percentiles chart'));
-      svg.append('g').attr('class', styles.xAxis).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', styles.barLabel).attr('y', 9);
-      var clipKey = "clipPath".concat(this.width, "x").concat(this.height);
-      var clipPath = svg.append('clipPath').attr('id', clipKey);
-      clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', this.width).attr('height', this.height);
-      this.barContainer = svg.append('g').attr('class', styles.barContainer).attr('clip-path', "url(#".concat(clipKey, ")"));
-      this.props.createChart(svg, this.width);
-      return svg;
-    }
-  }, {
-    key: "updateChart",
-    value: function updateChart(svg, props) {
-      this.renderBars(this.barContainer, props);
-
-      this._renderStar(this.barContainer);
-
-      this.props.updateChart(svg, this.x, this.y, this.applyTransition, this.barContainer, this.height);
-    }
-  }, {
-    key: "removeChart",
-    value: function removeChart() {
-      if (this.__svg) {
-        this.__svg.remove();
-
-        delete this.__svg;
-      }
-    }
-  }, {
-    key: "renderBars",
-    value: function renderBars(node, props) {
-      this.chartData = props.visualDistribution;
-      var height = this.height;
-      var x = this.x;
-      var y = this.y;
-      var bars = node.selectAll('rect').data(this.chartData);
-      var rects = bars.enter().append('rect').classed(styles.bar, true).classed(styles.barStar, this._isStarred).attr('x', function (d, i) {
-        return x(i);
-      }).attr('width', x.bandwidth());
-      this.applyTransition(rects, function (rects) {
-        return rects.attr('y', height).attr('height', 0);
-      }, function (rects) {
-        return rects.attr('y', y).attr('height', function (d) {
-          return height - y(d);
-        });
-      });
-      bars.exit().remove();
-    }
-  }, {
-    key: "getTransition",
-    value: function getTransition() {
-      this.transition = this.transition || (0, _d3Transition.transition)().delay(this.props.animateDelay || 0).duration(this.props.animateDuration || 0);
-      return this.transition;
-    }
-  }, {
-    key: "renderSummary",
-    value: function renderSummary() {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.summarizeChart());
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          chartWidth = _this$props.chartWidth,
-          chartHeight = _this$props.chartHeight;
-      var viewportHeight = chartHeight + MARGIN_T + MARGIN_B; // IE11 sizes svg elements incorrectly, so we render a canvas element to
-      // layout space for the chart, then position the svg absolute on top of it.
-
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, {
-        as: "div"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          position: 'relative'
-        }
-      }, /*#__PURE__*/_react.default.createElement("canvas", {
-        width: chartWidth,
-        height: viewportHeight,
-        style: {
-          display: 'block',
-          visibility: 'hidden'
-        }
-      }), /*#__PURE__*/_react.default.createElement("svg", {
-        ref: this.setChartRef,
-        style: {
-          position: 'absolute',
-          top: 0,
-          left: 0
-        }
-      }))), this.renderSummary(), this.props.renderTable());
-    }
-  }], [{
-    key: "addTitle",
-    value: function addTitle(svg, title) {
-      return svg.append('title').text(title);
-    }
-  }]);
-  Distribution.displayName = "Distribution";
-  return Distribution;
-}(_react.Component), _class2.displayName = 'Distribution', _class2.propTypes = {
-  animateDelay: _propTypes.PropTypes.number,
-  animateDuration: _propTypes.PropTypes.number,
-  // ESLint thinks these props aren't used but they are via a call chain in componentDidMount
-
-  /* eslint-disable react/no-unused-prop-types */
-  barPaddingInner: _propTypes.PropTypes.number,
-  // Spacing between bars, so each is visible, could be accomplished by borders
-  barPaddingOuter: _propTypes.PropTypes.number,
-  // Spacing between bars, so each is visible, could be accomplished by borders
-  barPaddingTop: _propTypes.PropTypes.number,
-
-  /* eslint-enable react/no-unused-prop-types */
-  chartHeight: _propTypes.PropTypes.number.isRequired,
-  // Height in pixels
-  chartWidth: _propTypes.PropTypes.number,
-
-  /* *
-   * * a fallback minimal distribution for tab-able, keyboard navigable buckets
-   * * typically this will be ~ 10 buckets
-   * */
-  summaryDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node),
-
-  /* *
-   * * A list of score values for each bucket.  Size of this array determines the number of buckets
-   * */
-  visualDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node).isRequired,
-  calculateAxis: _propTypes.PropTypes.func,
-  createChart: _propTypes.PropTypes.func,
-  renderTable: _propTypes.PropTypes.func,
-  summarizeChart: _propTypes.PropTypes.func,
-  updateChart: _propTypes.PropTypes.func,
-  starIndex: _propTypes.PropTypes.number
-}, _class2.defaultProps = {
-  animateDelay: 200,
-  animateDuration: 900,
-  barPaddingInner: 0.25,
-  // Spacing between bars, so each is visible, could be accomplished by borders
-  barPaddingOuter: 0,
-  // Spacing between bars, so each is visible, could be accomplished by borders
-  barPaddingTop: 0,
-  // Spacing between highest bar and top of chart, pixels
-  chartHeight: 200,
-  // Height in pixels
-  chartWidth: null,
-  summaryDistribution: void 0,
-  visualDistribution: [],
-  calculateAxis: Function.prototype,
-  createChart: Function.prototype,
-  renderTable: Function.prototype,
-  summarizeChart: function summarizeChart(textForScreenreaders) {
-    return textForScreenreaders;
-  },
-  updateChart: Function.prototype,
-  starIndex: null
-}, _temp)) || _class);
-/**
- *   A component to render an a11y friendly distribution of scores across users.
- *   Underneath the chart is two accessible features:
- *     1. A keyboard friendly set of min(10, bucketCounts) buckets {0-10%, 10-20%, ..., 90-100%}
- *     with the number of users in that slice
- *     2. A screenreader-only block of content providing a table version of all the data
- *
- *     ```jsx_example
- *      <Distribution
- *        summaryDistribution={Array.from({length: 10}, () => Math.floor(Math.random() * 5))}
- *        visualDistribution={Array.from({length: 101}, () => Math.floor(Math.random() * 5))}
- *      />
- *      ```
- *  **/
-
-exports.Distribution = Distribution;
-var _default = Distribution;
-exports.default = _default;

package/lib/reporting/components/charts/Distribution/theme.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var colors = _ref.colors,
-      typography = _ref.typography;
-  return {
-    barFillColor: colors.electric,
-    barStarFillColor: colors.fire,
-    barLabelColor: colors.textDarkest,
-    barLabelFontFamily: typography.fontFamily,
-    barLabelFontSize: typography.fontSizeXSmall,
-    xAxisColor: colors.textDarkest
-  };
-}

package/lib/reporting/components/charts/Legend/index.js

@@ -1,94 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Legend = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _uiA11yContent = require("@instructure/ui-a11y-content");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _theme = _interopRequireDefault(require("./theme"));
-
-var _dec, _class, _class2, _temp;
-
-var styles = {
-  componentId: 'gafaO',
-  template: function template(theme) {
-    return "\n\n.gafaO_fEOG{border:".concat(theme.containerBorderWidth || 'inherit', " solid ").concat(theme.containerBorderColor || 'inherit', "}\n\n.gafaO_dWcO{margin:0 calc(-1*").concat(theme.seriesContainerRowMargin || 'inherit', ")}\n\n.gafaO_czwp{align-items:center;flex-direction:row;margin:").concat(theme.seriesContainerMargin || 'inherit', "}\n\n.gafaO_fEOG .gafaO_czwp{display:flex}\n\n.gafaO_dWcO .gafaO_czwp{display:inline-flex;padding:0 ").concat(theme.seriesContainerRowMargin || 'inherit', "}\n\n.gafaO_crhW{display:flex;height:1.2rem;margin-right:").concat(theme.seriesSwatchMargin || 'inherit', ";width:1.2rem}\n\n.gafaO_fAPS{flex:1}\n\n.gafaO_eVVT{color:").concat(theme.seriesLabelColor || 'inherit', ";font-family:").concat(theme.seriesLabelFontFamily || 'inherit', ";font-size:").concat(theme.seriesLabelFontSize || 'inherit', ";white-space:nowrap}");
-  },
-  'containerColumn': 'gafaO_fEOG',
-  'containerRow': 'gafaO_dWcO',
-  'seriesContainer': 'gafaO_czwp',
-  'seriesSwatchContainer': 'gafaO_crhW',
-  'seriesSwatch': 'gafaO_fAPS',
-  'seriesLabel': 'gafaO_eVVT'
-};
-var Legend = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Legend, _Component);
-
-  var _super = (0, _createSuper2.default)(Legend);
-
-  function Legend() {
-    (0, _classCallCheck2.default)(this, Legend);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(Legend, [{
-    key: "renderSeries",
-    value: function renderSeries(series, index) {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        key: index,
-        className: styles.seriesContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.seriesSwatchContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.seriesSwatch, series.className])
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.seriesLabel
-      }, series.label));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var variant = this.props.variant;
-      var containerClass = variant === 'row' ? styles.containerRow : styles.containerColumn;
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: containerClass
-      }, this.props.series.map(this.renderSeries)));
-    }
-  }]);
-  Legend.displayName = "Legend";
-  return Legend;
-}(_react.Component), _class2.propTypes = {
-  series: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired,
-    className: _propTypes.default.string.isRequired
-  })),
-  variant: _propTypes.default.oneOf(['column', 'row'])
-}, _class2.defaultProps = {
-  series: [],
-  variant: 'column'
-}, _temp)) || _class);
-exports.Legend = Legend;
-var _default = Legend;
-exports.default = _default;

package/lib/reporting/components/charts/Legend/theme.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = generator;
-
-function generator(_ref) {
-  var borders = _ref.borders,
-      spacing = _ref.spacing,
-      colors = _ref.colors,
-      typography = _ref.typography;
-  return {
-    containerBorderWidth: borders.widthSmall,
-    containerBorderColor: colors.tiara,
-    seriesContainerMargin: spacing.small,
-    seriesContainerRowMargin: spacing.medium,
-    seriesSwatchMargin: spacing.small,
-    seriesSwatchBackgroundColor: colors.electric,
-    seriesLabelFontFamily: typography.fontFamily,
-    seriesLabelFontSize: typography.fontSizeXSmall,
-    seriesLabelColor: colors.textDarkest
-  };
-}

package/lib/reporting/components/charts/QuintileDistribution/QuintileDistribution.examples.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
-  propValues: {
-    animateDelay: [0],
-    animateDuration: [0],
-    chartHeight: [720],
-    chartWidth: [1280],
-    visualDistribution: [[1, 3, 5, 3, 1]]
-  }
-};
-exports.default = _default;

package/lib/reporting/components/charts/QuintileDistribution/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _presenter = _interopRequireDefault(require("./presenter.js"));
-
-var _default = _presenter.default;
-exports.default = _default;