@instructure/quiz-core 17.58.2-rc.0 → 17.58.2-rc.10

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -19,8 +19,6 @@ var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiMetric = require("@instructure/ui-metric");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -33,41 +31,39 @@ var _uiThemeable = require("@instructure/ui-themeable");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
-var _utils = require("../utils.js");
-
-var _index2 = _interopRequireDefault(require("../MetricPopover/index.js"));
-
 var _formatTimespan = require("../../../../../common/util/formatTimespan.js");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _index3 = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+
+var _index3 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
+
+var _index4 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
+
+var _presenter = require("../charts/ScoreDistribution/presenter.js");
 
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'bsfUh',
+  componentId: 'ePPpE',
   template: function template(theme) {
-    return "\n\n.bsfUh_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.bsfUh_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.bsfUh_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.bsfUh_eckF{text-transform:uppercase}\n\n.bsfUh_dPzc,.bsfUh_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}\n\n.bsfUh_dPzc{margin-left:-8px}\n\n.bsfUh_dqHR{padding-left:5px}\n\n.bsfUh_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}");
+    return "\n\n.ePPpE_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.ePPpE_eKXQ{padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.ePPpE_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.ePPpE_bTHH{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n.ePPpE_dPzc,.ePPpE_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}\n\n.ePPpE_dPzc{margin-left:-8px}");
   },
-  'heading': 'bsfUh_eDnN',
-  'cardWrapper': 'bsfUh_eKXQ',
-  'container': 'bsfUh_crZr',
-  'metricLabel': 'bsfUh_eckF',
-  'metricGroup': 'bsfUh_dPzc',
-  'metricsWrapper': 'bsfUh_cpZE',
-  'popoverContainer': 'bsfUh_dqHR',
-  'expandButtonContainer': 'bsfUh_bTHH'
+  'heading': 'ePPpE_eDnN',
+  'cardWrapper': 'ePPpE_eKXQ',
+  'container': 'ePPpE_crZr',
+  'expandButtonContainer': 'ePPpE_bTHH',
+  'metricGroup': 'ePPpE_dPzc',
+  'metricsWrapper': 'ePPpE_cpZE'
 };
 var stdDevPopoverTexts = {
-  metricLabel: 'standard deviation',
   title: 'Lorem ipsum ',
   subtitle: 'subtitle',
   body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
   screenReaderLabel: 'standard deviation tooltip'
 };
 var cronbachsAlphaPopoverTexts = {
-  metricLabel: 'cronbach\'s alpha',
   title: 'Lorem ipsum ',
   subtitle: 'subtitle',
   body: 'cronbach\'s alpha description',
@@ -107,50 +103,28 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         className: styles.container
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.metricGroup
-      }, _this.renderMetric('median_percentage', (0, _formatMessage.default)('median score'), _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage), '%'), _this.renderMetricWithPopover('stddev', stdDevPopoverTexts, _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.stddev)), _this.renderMetricWithPopover('cronbachs_alpha', cronbachsAlphaPopoverTexts, _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha))));
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "median_percentage",
+        label: (0, _formatMessage.default)('Median Score'),
+        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage),
+        suffix: "%"
+      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+        metricKey: "stddev",
+        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.stddev),
+        label: (0, _formatMessage.default)('Standard Deviation'),
+        popoverDescription: stdDevPopoverTexts
+      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+        metricKey: "cronbachs_alpha",
+        value: _formatMessage.default.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha),
+        label: (0, _formatMessage.default)('Cronbach\'s Alpha'),
+        popoverDescription: cronbachsAlphaPopoverTexts
+      })));
     };
 
     return _this;
   }
 
   (0, _createClass2.default)(NewQuizAnalysis, [{
-    key: "renderLabelWithPopover",
-    value: function renderLabelWithPopover(texts) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.metricLabel
-      }, texts.metricLabel, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.popoverContainer
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, texts)));
-    }
-  }, {
-    key: "renderMetric",
-    value: function renderMetric(key, label, value, suffix) {
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-        theme: {
-          valueFontWeight: 500
-        },
-        textAlign: "start",
-        key: key,
-        renderLabel: /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.metricLabel
-        }, label),
-        renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
-      });
-    }
-  }, {
-    key: "renderMetricWithPopover",
-    value: function renderMetricWithPopover(key, texts, value) {
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-        theme: {
-          valueFontWeight: 500
-        },
-        textAlign: "start",
-        key: key,
-        renderLabel: this.renderLabelWithPopover(texts),
-        renderValue: (0, _utils.getSanitizedMetricValue)(value)
-      });
-    }
-  }, {
     key: "render",
     value: function render() {
       var quizAnalysis = this.props.quizAnalysis;
@@ -158,7 +132,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
           attempts = quizAnalysis.attempts,
           metadata = quizAnalysis.metadata;
       var expanded = this.state.expanded;
-      return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
         className: styles.cardWrapper
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.heading
@@ -169,15 +143,40 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         className: styles.metricGroup
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.metricsWrapper
-      }, this.renderMetric('highscore', (0, _formatMessage.default)('high score'), scores === null || scores === void 0 ? void 0 : scores.max_percentage, '%'), this.renderMetric('lowscore', (0, _formatMessage.default)('low score'), scores === null || scores === void 0 ? void 0 : scores.min_percentage, '%'), this.renderMetric('meanscore', (0, _formatMessage.default)('mean score'), scores === null || scores === void 0 ? void 0 : scores.mean_percentage, '%')), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "highscore",
+        label: (0, _formatMessage.default)('high score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "lowscore",
+        label: (0, _formatMessage.default)('low score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "meanscore",
+        label: (0, _formatMessage.default)('mean score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
+        suffix: "%"
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.metricsWrapper
-      }, this.renderMetric('average_attempts', (0, _formatMessage.default)('average attempts'), _formatMessage.default.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)), this.renderMetric('mean_elapsed_sec', (0, _formatMessage.default)('mean elapsed time'), (0, _formatTimespan.formatTimeToFullNumeric)(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec))), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "average_attempts",
+        label: (0, _formatMessage.default)('average attempts'),
+        value: _formatMessage.default.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "mean_elapsed_sec",
+        label: (0, _formatMessage.default)('mean elapsed time'),
+        value: (0, _formatTimespan.formatTimeToFullNumeric)(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/_react.default.createElement(_index.default, {
         onClick: this.handleToggle,
         title: expanded ? (0, _formatMessage.default)('collapse quiz analysis') : (0, _formatMessage.default)('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }))), expanded && this.renderExpanded(), /*#__PURE__*/_react.default.createElement(_presenter.ScoreDistribution, {
+        decileDistribution: quizAnalysis.scores.decile_distribution
+      }), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
         size: "x-small"
       }, _ref, /*#__PURE__*/_react.default.createElement("b", null, (0, _formatMessage.default)('Data Last Updated:')), "\xA0", _formatMessage.default.date(Date.parse(quizAnalysis.created_timestamp), 'medium')));
     }
@@ -186,10 +185,10 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return NewQuizAnalysis;
 }(_react.Component), _class2.propTypes = {
   quizAnalysis: _propTypes.default.shape({
-    created_timestamp: _propTypes.default.string,
+    created_timestamp: _propTypes.default.string.isRequired,
     metadata: _propTypes.default.shape({
       quiz_title: _propTypes.default.string
-    }),
+    }).isRequired,
     scores: _propTypes.default.shape({
       decile_distribution: _propTypes.default.arrayOf(_propTypes.default.number),
       cronbachs_alpha: _propTypes.default.number,
@@ -207,5 +206,7 @@ var NewQuizAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       average_attempts: _propTypes.default.number
     }).isRequired
   }).isRequired
+}, _class2.defaultProps = {
+  quizAnalysis: {}
 }, _temp)) || _class);
 exports.NewQuizAnalysis = NewQuizAnalysis;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/ReportCard/index.js

@@ -0,0 +1,91 @@
+"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.NewQuizAndItemAnalysisReportCard = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiLink = require("@instructure/ui-link");
+
+var _uiFlex = require("@instructure/ui-flex");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+
+var _theme = _interopRequireDefault(require("../../ReportCard/theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'eRzKS',
+  template: function template(theme) {
+    return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
+  },
+  'card': 'eRzKS_fbIL',
+  'details': 'eRzKS_ebWM'
+};
+var NewQuizAndItemAnalysisReportCard = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NewQuizAndItemAnalysisReportCard, _Component);
+
+  var _super = (0, _createSuper2.default)(NewQuizAndItemAnalysisReportCard);
+
+  function NewQuizAndItemAnalysisReportCard() {
+    (0, _classCallCheck2.default)(this, NewQuizAndItemAnalysisReportCard);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(NewQuizAndItemAnalysisReportCard, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          name = _this$props.name,
+          href = _this$props.href;
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        className: styles.card
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+        direction: "column"
+      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "medium",
+        weight: "bold"
+      }, name)), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+        align: "end"
+      }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
+        href: href
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('View Report'))))));
+    }
+  }]);
+  NewQuizAndItemAnalysisReportCard.displayName = "NewQuizAndItemAnalysisReportCard";
+  return NewQuizAndItemAnalysisReportCard;
+}(_react.Component), _class2.propTypes = {
+  name: _propTypes.default.node,
+  href: _propTypes.default.string
+}, _class2.defaultProps = {
+  name: void 0,
+  href: void 0
+}, _temp)) || _class);
+exports.NewQuizAndItemAnalysisReportCard = NewQuizAndItemAnalysisReportCard;
+var _default = NewQuizAndItemAnalysisReportCard;
+exports.default = _default;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/index.js

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

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/presenter.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScoreDistribution = 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 _index = _interopRequireDefault(require("../../../../charts/QuintileDistribution/index.js"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiHeading = require("@instructure/ui-heading");
+
+var _index2 = _interopRequireDefault(require("../../../../charts/Legend/index.js"));
+
+var _dec, _class, _temp;
+
+var styles = {
+  componentId: 'eRgoL',
+  template: function template(theme) {
+    return "\n\n.eRgoL_YBfL{background-color:".concat(theme.legendRectFillColor || 'inherit', "}\n\n.eRgoL_eDZF{column-gap:10px;display:inline-flex;padding:").concat(theme.legendPadding || 'inherit', " 0}\n\n.eRgoL_dVXF{margin:").concat(theme.legendMargin || 'inherit', " 0}\n\n.eRgoL_dxZa,[dir=ltr] .eRgoL_dxZa,[dir=rtl] .eRgoL_dxZa{text-align:center}");
+  },
+  'legendRect': 'eRgoL_YBfL',
+  'legendContainer': 'eRgoL_eDZF',
+  'headingContainer': 'eRgoL_dVXF',
+  'chartLabel': 'eRgoL_dxZa'
+};
+var ScoreDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ScoreDistribution, _Component);
+
+  var _super = (0, _createSuper2.default)(ScoreDistribution);
+
+  function ScoreDistribution() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ScoreDistribution);
+
+    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.calculateLabelForColumn = function (index, length) {
+      var label = Math.floor(index * 100 / length);
+      return (0, _formatMessage.default)('{label, number}%', {
+        label: label
+      });
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(ScoreDistribution, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.headingContainer
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        level: "h2",
+        theme: {
+          h2FontWeight: 300
+        }
+      }, (0, _formatMessage.default)('Score Distribution'))), /*#__PURE__*/_react.default.createElement(_index.default, {
+        animateDelay: 1000,
+        animateDuration: 1000,
+        visualDistribution: this.props.decileDistribution,
+        calculateLabelForColumn: this.calculateLabelForColumn
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.chartLabel
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, (0, _formatMessage.default)('Score'))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.legendContainer
+      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        series: [{
+          className: styles.legendRect,
+          label: (0, _formatMessage.default)('Number of Students')
+        }]
+      })));
+    }
+  }]);
+  ScoreDistribution.displayName = "ScoreDistribution";
+  return ScoreDistribution;
+}(_react.Component), _temp)) || _class);
+exports.ScoreDistribution = ScoreDistribution;

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      typography = _ref.typography;
+  return {
+    legendRectFillColor: colors.electric,
+    legendPadding: spacing.small,
+    legendBorderColor: colors.ash,
+    legendFontSize: typography.fontSizeXSmall,
+    legendMargin: spacing.medium
+  };
+}

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/presenter.js

@@ -21,11 +21,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiMetric = require("@instructure/ui-metric");
+var _index = _interopRequireDefault(require("./NewItemAnalysis/index.js"));
 
 var _Spinner = _interopRequireDefault(require("../../../../common/components/shared/spinner/Spinner.js"));
 
-var _index = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
+var _index2 = _interopRequireDefault(require("./NewQuizAnalysis/index.js"));
 
 var _ref5 = /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
   level: "h3",
@@ -62,7 +62,10 @@ var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
 
               case 2:
                 response = _context.sent;
-                setQuizAnalysis(response.last_successful_analysis);
+
+                if (response) {
+                  setQuizAnalysis(response.last_successful_analysis);
+                }
 
               case 4:
               case "end":
@@ -92,7 +95,10 @@ var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
 
               case 2:
                 response = _context2.sent;
-                setItemAnalyses(response.last_successful_analysis);
+
+                if (response) {
+                  setItemAnalyses(response.last_successful_analysis);
+                }
 
               case 4:
               case "end":
@@ -110,7 +116,7 @@ var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
     fetch();
   }, []);
 
-  var _ref4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+  var _ref4 = /*#__PURE__*/_react.default.createElement(_index2.default, {
     quizAnalysis: quizAnalysis
   });
 
@@ -119,21 +125,10 @@ var NewQuizAndItemAnalysis = function NewQuizAndItemAnalysis(_ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "fs-mask"
     }, _ref4, _ref5, itemAnalyses === null || itemAnalyses === void 0 ? void 0 : itemAnalyses.map(function (itemAnalysis) {
-      return /*#__PURE__*/_react.default.createElement(_uiMetric.MetricGroup, {
-        key: itemAnalysis.metadata.item_id
-      }, /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-        key: "itemdifficulty",
-        renderLabel: "ITEM DIFFICULTY",
-        renderValue: itemAnalysis.scores.difficulty_index
-      }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-        key: "responded",
-        renderLabel: "RESPONDED",
-        renderValue: itemAnalysis.attempts.students_responded
-      }), /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
-        key: "skipped",
-        renderLabel: "SKIPPED/NO RESPONSE",
-        renderValue: itemAnalysis.attempts.students_without_response
-      }));
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        key: itemAnalysis.metadata.item_id,
+        itemAnalysis: itemAnalysis
+      });
     }));
     /* eslint-enable react/jsx-no-literals */
   }; // TODO: distinguish between loading and empty item analyses (eg. when there is no items in a quiz)

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/utils.js

@@ -14,7 +14,7 @@ var getSanitizedMetricValue = function getSanitizedMetricValue(value, suffix) {
     return (0, _formatMessage.default)('N/A');
   }
 
-  return value + (suffix ? suffix : '');
+  return suffix ? value + suffix : value;
 };
 
 exports.getSanitizedMetricValue = getSanitizedMetricValue;

package/lib/reporting/components/resources/ReportCard/index.js

@@ -34,7 +34,7 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'eRzKS',
+  componentId: 'cNnNG',
   template: function template(theme) {
     return "\n\n.eRzKS_fbIL{border-radius:".concat(theme.cardBorderRadius || 'inherit', ";box-shadow:").concat(theme.cardBoxShadow || 'inherit', ";display:inline-flex;flex-direction:column;height:").concat(theme.cardHeight || 'inherit', ";margin:").concat(theme.cardMargin || 'inherit', ";padding:").concat(theme.cardPadding || 'inherit', ";width:").concat(theme.cardWidth || 'inherit', "}\n\n.eRzKS_ebWM{padding-top:").concat(theme.detailPadding || 'inherit', "}");
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "17.58.2-rc.0+58bdb51eb",
+  "version": "17.58.2-rc.10+b6c430be4",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,11 +41,11 @@
   ],
   "dependencies": {
     "@instructure/outcomes-ui": "^2.1.8",
-    "@instructure/quiz-common": "17.58.2-rc.0+58bdb51eb",
-    "@instructure/quiz-i18n": "17.58.2-rc.0+58bdb51eb",
-    "@instructure/quiz-interactions": "17.58.2-rc.0+58bdb51eb",
-    "@instructure/quiz-number-input": "17.58.2-rc.0+58bdb51eb",
-    "@instructure/quiz-rce": "17.58.2-rc.0+58bdb51eb",
+    "@instructure/quiz-common": "17.58.2-rc.10+b6c430be4",
+    "@instructure/quiz-i18n": "17.58.2-rc.10+b6c430be4",
+    "@instructure/quiz-interactions": "17.58.2-rc.10+b6c430be4",
+    "@instructure/quiz-number-input": "17.58.2-rc.10+b6c430be4",
+    "@instructure/quiz-rce": "17.58.2-rc.10+b6c430be4",
     "@instructure/ui-a11y-content": "^7.20.0",
     "@instructure/ui-alerts": "^7.20.0",
     "@instructure/ui-avatar": "^7.20.0",
@@ -106,7 +106,7 @@
     "eventemitter3": "^3.1.0",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "17.58.2-rc.0+58bdb51eb",
+    "instructure-validations": "17.58.2-rc.10+b6c430be4",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -156,7 +156,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "17.58.2-rc.0+58bdb51eb",
+    "quiz-presets": "17.58.2-rc.10+b6c430be4",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -172,5 +172,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "58bdb51eb2e1af16f5b74e69097b25fb8f8b7dfa"
+  "gitHead": "b6c430be4cf04253136b888dbfb9850388e052aa"
 }