@instructure/quiz-core 17.19.2 → 17.20.0

package/lib/reporting/api/itemAnalyses.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getItemAnalyses = getItemAnalyses;
+
+var _Fetcher = _interopRequireDefault(require("../../common/util/Fetcher.js"));
+
+var _callHandlers = require("../../common/api/callHandlers.js");
+
+var _quizzes = require("../../common/actions/quizzes.js");
+
+var _withDynamoPagination = _interopRequireDefault(require("../../common/util/withDynamoPagination.js"));
+
+function getItemAnalyses(quizId) {
+  var url = "/api/quizzes/".concat(quizId, "/stats/item_analyses/");
+  return function (dispatch, getState) {
+    var DynamoFetcher = (0, _withDynamoPagination.default)(_Fetcher.default);
+    var dynamoFetcherGet = new DynamoFetcher();
+    return dynamoFetcherGet.paginatedGet(url).then(function (response) {
+      dispatch([(0, _callHandlers.handleItemAnalysesResponse)(response), (0, _quizzes.associateItemAnalyses)(quizId, response)]);
+    });
+  };
+}

package/lib/reporting/api/quizAnalyses.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuizAnalysis = getQuizAnalysis;
+
+var _Fetcher = _interopRequireDefault(require("../../common/util/Fetcher.js"));
+
+var _callHandlers = require("../../common/api/callHandlers.js");
+
+var _reporting = require("../../common/actions/reporting.js");
+
+var _quizzes = require("../../common/actions/quizzes.js");
+
+function getQuizAnalysis(quizId) {
+  var url = "/api/quizzes/".concat(quizId, "/stats/quiz_analysis");
+  return function (dispatch, getState) {
+    var fetcher = new _Fetcher.default({
+      onError: function onError() {
+        return (0, _reporting.markQuizAnalysisNotFound)(quizId);
+      }
+    });
+    return fetcher.get(url).then(function (response) {
+      dispatch([(0, _callHandlers.handleQuizAnalysisResponse)(response), (0, _quizzes.associateQuizAnalysis)(quizId, response)]);
+    });
+  };
+}

package/lib/reporting/components/Caption/index.js

@@ -0,0 +1,76 @@
+"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.Caption = 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 _uiHeading = require("@instructure/ui-heading");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bEEaV',
+  template: function template(theme) {
+    return "\n\n.bEEaV_caGd{margin:".concat(theme.contentMargin || 'inherit', "}\n\n.bEEaV_biBD{padding-top:").concat(theme.childrenPadding || 'inherit', "}");
+  },
+  'content': 'bEEaV_caGd',
+  'children': 'bEEaV_biBD'
+};
+var Caption = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Caption, _Component);
+
+  var _super = (0, _createSuper2.default)(Caption);
+
+  function Caption() {
+    (0, _classCallCheck2.default)(this, Caption);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Caption, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.content
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "reset",
+        as: "h2",
+        border: "bottom",
+        color: "primary"
+      }, this.props.text), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.children
+      }, this.props.children));
+    }
+  }]);
+  Caption.displayName = "Caption";
+  return Caption;
+}(_react.Component), _class2.propTypes = {
+  text: _propTypes.default.string,
+  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)])
+}, _class2.defaultProps = {
+  text: void 0,
+  children: void 0
+}, _temp)) || _class);
+exports.Caption = Caption;
+var _default = Caption;
+exports.default = _default;

package/lib/reporting/components/Caption/theme.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      borders = _ref.borders,
+      colors = _ref.colors;
+  return {
+    contentMargin: spacing.small,
+    childrenPadding: spacing.xSmall
+  };
+}

package/lib/reporting/components/MetricsListItem/index.js

@@ -0,0 +1,88 @@
+"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.MetricsListItem = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+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 _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiMetric = require("@instructure/ui-metric");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fvWlS',
+  template: function template(theme) {
+    return "\n\n.fvWlS_bGBk{align-items:center;display:flex;flex-direction:row;justify-content:center}";
+  },
+  'root': 'fvWlS_bGBk'
+};
+var MetricsListItem = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MetricsListItem, _Component);
+
+  var _super = (0, _createSuper2.default)(MetricsListItem);
+
+  function MetricsListItem() {
+    (0, _classCallCheck2.default)(this, MetricsListItem);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(MetricsListItem, [{
+    key: "renderNoValue",
+    value: function renderNoValue() {
+      return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('No value')), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, (0, _formatMessage.default)('--')));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var names = (0, _classnames.default)(styles.root, this.props.className);
+      var _this$props = this.props,
+          renderValue = _this$props.renderValue,
+          renderLabel = _this$props.renderLabel,
+          isGroupChild = _this$props.isGroupChild;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: names
+      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        renderLabel: renderLabel,
+        renderValue: renderValue || this.renderNoValue(),
+        isGroupChild: isGroupChild
+      }));
+    }
+  }]);
+  MetricsListItem.displayName = "MetricsListItem";
+  return MetricsListItem;
+}(_react.Component), _class2.propTypes = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _uiMetric.Metric.propTypes), {}, {
+  className: _propTypes.default.string
+}), _class2.defaultProps = {
+  className: ''
+}, _temp)) || _class);
+exports.MetricsListItem = MetricsListItem;
+var _default = MetricsListItem;
+exports.default = _default;

package/lib/reporting/components/MetricsListItem/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var summaryDistribution = Array.from({
+  length: 10
+}, function (v, i) {
+  return i;
+});
+var visualDistribution = Array.from({
+  length: 101
+}, function (v, i) {
+  return i / 100;
+});
+var _default = {
+  propValues: {
+    starScore: [visualDistribution[50], visualDistribution[100]]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      animateDelay: 0,
+      animateDuration: 0,
+      chartHeight: 720,
+      chartWidth: 900,
+      summaryDistribution: summaryDistribution,
+      visualDistribution: visualDistribution
+    };
+  }
+};
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"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;

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

@@ -0,0 +1,191 @@
+"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.CentileDistribution = 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 _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiTable = require("@instructure/ui-table");
+
+var _index = _interopRequireDefault(require("../Distribution/index.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'owVFv',
+  template: function template(theme) {
+    return "\n\n.owVFv_eAvm{display:flex;flex-direction:row;justify-content:center;overflow:hidden}\n\n.owVFv_eAvm>div{flex:0 1 51rem}\n\n.owVFv_eAvm svg{overflow:visible}\n\n@media screen and (--phoneBreakPoint){.owVFv_eAvm .owVFv_cKHw{font-size:".concat(theme.phoneBarLabelFontSize || 'inherit', "}.owVFv_eAvm .owVFv_eIKC g:nth-child(odd){display:none}}");
+  },
+  'centileRoot': 'owVFv_eAvm',
+  'barLabel': 'owVFv_cKHw',
+  'xAxis': 'owVFv_eIKC'
+};
+
+var starBin = function starBin(props) {
+  if (typeof props.starScore !== 'number') return;
+  var starScore = Math.max(0, Math.min(props.starScore, 1)); // min+floor here matches quiz_etl HistogramHelper
+
+  return Math.min(Math.floor(starScore * props.visualDistribution.length), props.visualDistribution.length - 1);
+};
+
+var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CentileDistribution, _Component);
+
+  var _super = (0, _createSuper2.default)(CentileDistribution);
+
+  function CentileDistribution() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, CentileDistribution);
+
+    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._calculateAxis = function (x, y, xAxis, height) {
+      x.domain((0, _d3Array.range)(101));
+
+      if (typeof _this.props.starScore === 'number') {
+        var starIndex = starBin(_this.props); // Determine if star above bar will overflow height, and reduce range to
+        // account for 18 star height + 12 star bottom padding
+
+        var starTop = y(_this.props.visualDistribution[starIndex]) - 30;
+        y.rangeRound([height, _this.props.barPaddingTop - Math.min(0, starTop)]);
+      }
+
+      xAxis.tickValues((0, _d3Array.range)(0, 101, 10)).tickFormat(function (d) {
+        return (0, _formatMessage.default)('{percent, number}%', {
+          percent: d
+        });
+      });
+    };
+
+    _this._createChart = function (svg, width) {
+      // Manually redraw x axis to extend beyond container
+      var axisPadding = 2000;
+      svg.select('g[data-role=xAxis] path').attr('d', "M".concat(-1 * axisPadding, ",0H").concat(width + axisPadding));
+      return svg;
+    };
+
+    _this._summarizeChart = function (summary) {
+      if (typeof _this.props.starScore !== 'number') return summary;
+      return (0, _formatMessage.default)('You scored {score, number, percent}. ', {
+        score: _this.props.starScore
+      }) + summary;
+    };
+
+    _this._renderTable = function () {
+      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+        caption: (0, _formatMessage.default)('Score percentiles chart data')
+      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "score-percentiles-chart-data-score-percentile"
+      }, (0, _formatMessage.default)('Score Percentile')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+        id: "score-percentiles-chart-data-count"
+      }, (0, _formatMessage.default)('Count')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this._renderTableRows())));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(CentileDistribution, [{
+    key: "_renderTableRows",
+    value: function _renderTableRows() {
+      var chartData = this.props.visualDistribution;
+      return chartData.map(function (count, index) {
+        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+          key: "".concat(index, ":").concat(count)
+          /* eslint-disable-line react/jsx-no-literals, react/no-array-index-key */
+
+        }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, (0, _formatMessage.default)('{percent}%', {
+          percent: index
+        })), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, count));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var props = Object.assign({}, this.props, {
+        calculateAxis: this._calculateAxis,
+        createChart: this._createChart,
+        renderTable: this._renderTable,
+        summarizeChart: this._summarizeChart,
+        starIndex: starBin(this.props)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.centileRoot,
+        "data-automation": "sdk-reporting-centile-root"
+      }, /*#__PURE__*/_react.default.createElement(_index.default, props));
+    }
+  }]);
+  CentileDistribution.displayName = "CentileDistribution";
+  return CentileDistribution;
+}(_react.Component), _class2.propTypes = {
+  animateDelay: _propTypes.PropTypes.number,
+  animateDuration: _propTypes.PropTypes.number,
+  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,
+  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,
+  starScore: _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: 900,
+  summaryDistribution: void 0,
+  visualDistribution: [],
+  starScore: null
+}, _temp)) || _class);
+exports.CentileDistribution = CentileDistribution;
+var _default = CentileDistribution;
+exports.default = _default;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
+  return {
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneBarLabelFontSize: typography.fontSizeLarge
+  };
+}

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CentileDistribution = void 0;
+
+var _presenter = require("../CentileDistribution/presenter.js");
+
+// We need to keep this file for backwards compatibility
+var CentileDistribution = _presenter.CentileDistribution;
+exports.CentileDistribution = CentileDistribution;
+var _default = CentileDistribution;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"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"));
+
+// We need to keep this file for backwards compatibility
+var _default = _presenter.default;
+exports.default = _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = _interopRequireDefault(require("../QuintileDistribution/presenter.js"));
+
+// We need to keep this file for backwards compatibility
+var _default = _presenter.default;
+exports.default = _default;

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

@@ -0,0 +1,13 @@
+"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;