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

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -0,0 +1,64 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'flBnP',
+  template: function template(theme) {
+    return "\n\n.flBnP_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+  },
+  'metricLabel': 'flBnP_eckF'
+};
+import React, { Component } from 'react';
+import { getSanitizedMetricValue } from "../utils.js";
+import { Metric } from '@instructure/ui-metric';
+import PropTypes from 'prop-types';
+export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AnalysisMetric, _Component);
+
+  var _super = _createSuper(AnalysisMetric);
+
+  function AnalysisMetric() {
+    _classCallCheck(this, AnalysisMetric);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AnalysisMetric, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          metricKey = _this$props.metricKey,
+          label = _this$props.label,
+          value = _this$props.value,
+          suffix = _this$props.suffix;
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: /*#__PURE__*/React.createElement("p", {
+          className: styles.metricLabel
+        }, label),
+        renderValue: getSanitizedMetricValue(value, suffix)
+      });
+    }
+  }]);
+
+  AnalysisMetric.displayName = "AnalysisMetric";
+  return AnalysisMetric;
+}(Component), _class2.propTypes = {
+  metricKey: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]).isRequired,
+  suffix: PropTypes.string
+}, _class2.defaultProps = {
+  suffix: ''
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/theme.js

@@ -0,0 +1,3 @@
+export default function generator() {
+  return {};
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/index.js

@@ -0,0 +1,2 @@
+import { AnalysisPopoverMetric } from "./presenter.js";
+export default AnalysisPopoverMetric;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -0,0 +1,75 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import React, { Component } from 'react';
+import { Metric } from '@instructure/ui-metric';
+import { getSanitizedMetricValue } from "../utils.js";
+var styles = {
+  componentId: 'bLVhr',
+  template: function template(theme) {
+    return "\n\n.bLVhr_dqHR{padding-left:5px}\n\n.bLVhr_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+  },
+  'popoverContainer': 'bLVhr_dqHR',
+  'metricLabel': 'bLVhr_eckF'
+};
+import MetricPopover from "../MetricPopover/index.js";
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+import PropTypes from 'prop-types';
+export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(AnalysisPopoverMetric, _Component);
+
+  var _super = _createSuper(AnalysisPopoverMetric);
+
+  function AnalysisPopoverMetric() {
+    _classCallCheck(this, AnalysisPopoverMetric);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(AnalysisPopoverMetric, [{
+    key: "renderLabelWithPopover",
+    value: function renderLabelWithPopover(texts) {
+      return /*#__PURE__*/React.createElement("p", {
+        className: styles.metricLabel
+      }, this.props.label, /*#__PURE__*/React.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          metricKey = _this$props.metricKey,
+          popoverDescription = _this$props.popoverDescription,
+          value = _this$props.value;
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: this.renderLabelWithPopover(popoverDescription),
+        renderValue: getSanitizedMetricValue(value)
+      });
+    }
+  }]);
+
+  AnalysisPopoverMetric.displayName = "AnalysisPopoverMetric";
+  return AnalysisPopoverMetric;
+}(Component), _class2.propTypes = {
+  metricKey: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  popoverDescription: PropTypes.shape({
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    body: PropTypes.string,
+    screenReaderLabel: PropTypes.string
+  }).isRequired
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/theme.js

@@ -0,0 +1,6 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    headerPaddingBottom: spacing.medium
+  };
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/index.js

@@ -0,0 +1,2 @@
+import { NewItemAnalysis } from "./presenter.js";
+export default NewItemAnalysis;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/popoverContent.js

@@ -0,0 +1,18 @@
+export var difficultyIndex = {
+  title: 'Difficulty title',
+  subtitle: 'difficulty subtitle',
+  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum interdum risus sed condimentum. Duis vel nisi at quam luctus dictum id eu risus. Donec eget tristique justo',
+  screenReaderLabel: 'Lorem one'
+};
+export var discriminationIndex = {
+  title: 'Discrimination title',
+  subtitle: 'discrimination subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem two'
+};
+export var pearsonCorrelation = {
+  title: 'Pearson correlation title',
+  subtitle: 'pearson correlation subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem three'
+};

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/presenter.js

@@ -0,0 +1,262 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+import { Heading } from '@instructure/ui-heading';
+import React, { Component } from 'react';
+var styles = {
+  componentId: 'eLWCD',
+  template: function template(theme) {
+    return "\n\n.eLWCD_eDnN{display:flex;flex-basis:45%;flex-direction:column;overflow:hidden}\n\n.eLWCD_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.eLWCD_eoBe{font-size:").concat(theme.metricNumberContextFontSize || 'inherit', ";font-weight:").concat(theme.metricNumberContextFontWeight || 'inherit', "}\n\n.eLWCD_eIAv{display:flex;position:relative}\n\n.eLWCD_ePHw{flex-basis:91%;overflow:hidden;padding-bottom:10px;text-overflow:ellipsis;white-space:nowrap}\n\n.eLWCD_dzsH{overflow:visible;text-overflow:unset;white-space:normal}\n\n.eLWCD_byoJ{position:absolute;right:7px;top:-8px}\n\n.eLWCD_evBt{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}\n\n.eLWCD_pAQb{display:flex;flex-direction:column;height:60px}\n\n.eLWCD_zefc{display:flex;flex-basis:55%;justify-content:flex-end}\n\n.eLWCD_dPzc{flex-direction:column}\n\n.eLWCD_dPzc,.eLWCD_dzph{display:flex;flex-basis:100%}\n\n.eLWCD_dzph{align-items:flex-start;box-sizing:border-box;column-gap:5px;justify-content:space-between;padding:0 30px 0 25px}\n\n.eLWCD_eobd{padding-top:1rem}\n\n.eLWCD_NpIG{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n@media screen and (--tabletBreakPoint){.eLWCD_zefc{flex-basis:100%;justify-content:flex-start}.eLWCD_ePHw{flex-basis:94%}.eLWCD_eDnN{flex-basis:100%}.eLWCD_dzph{padding:0}.eLWCD_eDnN h3{padding-right:30px}.eLWCD_NpIG{right:17px}.eLWCD_eIAv{margin-bottom:20px}.eLWCD_byoJ{right:-7px}.eLWCD_dzph{flex-wrap:wrap}}");
+  },
+  'heading': 'eLWCD_eDnN',
+  'cardWrapper': 'eLWCD_eKXQ',
+  'metricNumberContext': 'eLWCD_eoBe',
+  'bodyPresentation': 'eLWCD_eIAv',
+  'bodyExcerpt': 'eLWCD_ePHw',
+  'bodyExcerptExpanded': 'eLWCD_dzsH',
+  'bodyExpandButtonWrapper': 'eLWCD_byoJ',
+  'innerWrapper': 'eLWCD_evBt',
+  'expandableInnerWrapper': 'eLWCD_pAQb',
+  'metricsWithControls': 'eLWCD_zefc',
+  'metricGroup': 'eLWCD_dPzc',
+  'metricsRow': 'eLWCD_dzph',
+  'metricsRowPaginated': 'eLWCD_eobd',
+  'itemCardToggleButtonWrapper': 'eLWCD_NpIG'
+};
+import t from '@instructure/quiz-i18n/es/format-message';
+import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
+import { Text } from '@instructure/ui-text';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+import { difficultyIndex, discriminationIndex, pearsonCorrelation } from "./popoverContent.js";
+import Card from "../../../../../common/components/shared/Card/index.js";
+import AnalysisMetric from "../AnalysisMetric/index.js";
+import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { interactionTypesNameDictionary } from "../../../../../common/util/interactionTypeMetadata.js";
+export var NewItemAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NewItemAnalysis, _Component);
+
+  var _super = _createSuper(NewItemAnalysis);
+
+  function NewItemAnalysis() {
+    var _this;
+
+    _classCallCheck(this, NewItemAnalysis);
+
+    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.state = {
+      bodyToggable: false,
+      bodyExpanded: false,
+      itemExpanded: false,
+      metricsExpanded: false
+    };
+
+    _this.mapInteractionTypeToTranslation = function (interactionType) {
+      return interactionTypesNameDictionary({
+        slug: interactionType,
+        name: t('Question')
+      });
+    };
+
+    _this.buildItemCardHeadingId = function () {
+      return "itemCardHeading-".concat(_this.props.itemAnalysis.metadata.item_id);
+    };
+
+    _this.buildItemCardBodyId = function () {
+      return "itemCardBody-".concat(_this.props.itemAnalysis.metadata.item_id);
+    };
+
+    _this.bodyExceedsLimit = function (bodyElement, headingElement) {
+      if (!bodyElement || !headingElement) {
+        return;
+      }
+
+      return bodyElement.scrollWidth > headingElement.clientWidth || _this.state.bodyExpanded;
+    };
+
+    _this.handleBodyWidth = function () {
+      var bodyElement = document.getElementById(_this.buildItemCardBodyId());
+      var headingElement = document.getElementById(_this.buildItemCardHeadingId());
+
+      _this.setState({
+        bodyToggable: _this.bodyExceedsLimit(bodyElement, headingElement)
+      });
+    };
+
+    _this.handleToggle = function () {
+      _this.setState({
+        metricsExpanded: !_this.state.metricsExpanded
+      });
+
+      _this.setState({
+        itemExpanded: !_this.state.itemExpanded
+      });
+    };
+
+    _this.handleBodyToggle = function () {
+      _this.setState({
+        bodyExpanded: !_this.state.bodyExpanded
+      });
+    };
+
+    _this.renderExpandItemCardButton = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.itemCardToggleButtonWrapper
+      }, /*#__PURE__*/React.createElement(ExpandButton, {
+        onClick: _this.handleToggle,
+        title: _this.state.metricsExpanded ? t('collapse item card') : t('expand item card'),
+        isExpanded: _this.state.metricsExpanded
+      }));
+    };
+
+    _this.renderBodyToggleButton = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.bodyExpandButtonWrapper
+      }, /*#__PURE__*/React.createElement(ExpandButton, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? t('collapse question stem') : t('expand question stem'),
+        isExpanded: _this.state.bodyExpanded
+      }));
+    };
+
+    _this.calculateValueWithPointsPossible = function (metricKey, metricValue) {
+      var pointsPossible = _this.props.itemAnalysis.scores.points_possible;
+      return t.rich('{score, number}<s>/{possible, number} PTS</s>', {
+        s: function s(_ref) {
+          var children = _ref.children;
+          return /*#__PURE__*/React.createElement("span", {
+            key: metricKey,
+            className: styles.metricNumberContext
+          }, children);
+        },
+        score: metricValue,
+        possible: pointsPossible
+      });
+    };
+
+    _this.renderExpanded = function () {
+      var scores = _this.props.itemAnalysis.scores;
+      var classes = classnames(styles.metricsRow, styles.metricsRowPaginated);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes
+      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "pearson_correlation",
+        label: t('Pearson Correlation Coefficient'),
+        value: t.number(scores.pearson_correlation),
+        popoverDescription: pearsonCorrelation
+      }));
+    };
+
+    return _this;
+  }
+
+  _createClass(NewItemAnalysis, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.handleBodyWidth();
+      window.addEventListener('resize', this.handleBodyWidth);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.handleBodyWidth);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props$itemAnaly = this.props.itemAnalysis,
+          metadata = _this$props$itemAnaly.metadata,
+          scores = _this$props$itemAnaly.scores;
+      var bodyClass = classnames(styles.bodyExcerpt, _defineProperty({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
+      var headingId = this.buildItemCardHeadingId();
+      var bodyId = this.buildItemCardBodyId();
+      return /*#__PURE__*/React.createElement(Card, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.innerWrapper
+      }, /*#__PURE__*/React.createElement("div", {
+        id: headingId,
+        className: styles.heading
+      }, /*#__PURE__*/React.createElement(Heading, {
+        margin: "0 0 small 0",
+        level: "h3",
+        weight: "bold",
+        color: "primary"
+      }, metadata.item_title), /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        weight: "bold",
+        transform: "capitalize"
+      }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/React.createElement("div", {
+        id: "itemBody",
+        className: styles.bodyPresentation
+      }, /*#__PURE__*/React.createElement("div", {
+        id: bodyId,
+        className: bodyClass
+      }, /*#__PURE__*/React.createElement(Text, {
+        size: "small"
+      }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/React.createElement("div", {
+        className: styles.metricsWithControls
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.metricGroup
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.metricsRow
+      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "difficulty_index",
+        label: t('Item Difficulty'),
+        value: t.number(scores.difficulty_index),
+        popoverDescription: difficultyIndex
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "mean",
+        label: t('Mean Earned Points'),
+        value: this.calculateValueWithPointsPossible('mean', scores.mean)
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "median",
+        label: t('Median Earned Points'),
+        value: this.calculateValueWithPointsPossible('median', scores.median)
+      }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "discrimination_index",
+        label: t('Discrimination Index'),
+        value: t.number(scores.discrimination_index),
+        popoverDescription: discriminationIndex
+      }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/React.createElement("div", {
+        className: styles.expandableInnerWrapper
+      }));
+    }
+  }]);
+
+  NewItemAnalysis.displayName = "NewItemAnalysis";
+  return NewItemAnalysis;
+}(Component), _class2.propTypes = {
+  itemAnalysis: PropTypes.shape({
+    attempts: PropTypes.shape({
+      students_responded: PropTypes.number,
+      students_without_response: PropTypes.number
+    }),
+    metadata: PropTypes.shape({
+      interaction_type: PropTypes.string,
+      item_body: PropTypes.string,
+      item_id: PropTypes.string,
+      item_title: PropTypes.string
+    }),
+    scores: PropTypes.shape({
+      difficulty_index: PropTypes.number,
+      discrimination_index: PropTypes.number,
+      mean: PropTypes.number,
+      median: PropTypes.number,
+      pearson_correlation: PropTypes.number,
+      points_possible: PropTypes.number,
+      quartile_distribution: PropTypes.arrayOf(PropTypes.number)
+    })
+  }).isRequired
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/theme.js

@@ -0,0 +1,12 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing,
+      breakpoints = _ref.breakpoints,
+      typography = _ref.typography;
+  return {
+    tabletBreakPoint: "max-width: ".concat(breakpoints.large),
+    cardWrapperPadding: spacing.medium,
+    viewPadding: spacing.small,
+    metricNumberContextFontSize: typography.fontSizeMedium,
+    metricNumberContextFontWeight: typography.fontWeightNormal
+  };
+}

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

@@ -6,41 +6,37 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 var _dec, _class, _class2, _temp;
 
 import { Heading } from '@instructure/ui-heading';
-import { Metric } from '@instructure/ui-metric';
 import React, { Component } from 'react';
 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'
 };
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
 import { Text } from '@instructure/ui-text';
 import { themeable } from '@instructure/ui-themeable';
 import theme from "./theme.js";
-import { getSanitizedMetricValue } from "../utils.js";
-import MetricPopover from "../MetricPopover/index.js";
 import { formatTimeToFullNumeric } from "../../../../../common/util/formatTimespan.js";
 import PropTypes from 'prop-types';
 import Card from "../../../../../common/components/shared/Card/index.js";
+import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
+import AnalysisMetric from "../AnalysisMetric/index.js";
+import { ScoreDistribution } from "../charts/ScoreDistribution/presenter.js";
 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',
@@ -80,50 +76,28 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.container
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.metricGroup
-      }, _this.renderMetric('median_percentage', t('median score'), t.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage), '%'), _this.renderMetricWithPopover('stddev', stdDevPopoverTexts, t.number(scores === null || scores === void 0 ? void 0 : scores.stddev)), _this.renderMetricWithPopover('cronbachs_alpha', cronbachsAlphaPopoverTexts, t.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha))));
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "median_percentage",
+        label: t('Median Score'),
+        value: t.number(scores === null || scores === void 0 ? void 0 : scores.median_percentage),
+        suffix: "%"
+      }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "stddev",
+        value: t.number(scores === null || scores === void 0 ? void 0 : scores.stddev),
+        label: t('Standard Deviation'),
+        popoverDescription: stdDevPopoverTexts
+      }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+        metricKey: "cronbachs_alpha",
+        value: t.number(scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha),
+        label: t('Cronbach\'s Alpha'),
+        popoverDescription: cronbachsAlphaPopoverTexts
+      })));
     };
 
     return _this;
   }
 
   _createClass(NewQuizAnalysis, [{
-    key: "renderLabelWithPopover",
-    value: function renderLabelWithPopover(texts) {
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.metricLabel
-      }, texts.metricLabel, /*#__PURE__*/React.createElement("span", {
-        className: styles.popoverContainer
-      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
-    }
-  }, {
-    key: "renderMetric",
-    value: function renderMetric(key, label, value, suffix) {
-      return /*#__PURE__*/React.createElement(Metric, {
-        theme: {
-          valueFontWeight: 500
-        },
-        textAlign: "start",
-        key: key,
-        renderLabel: /*#__PURE__*/React.createElement("span", {
-          className: styles.metricLabel
-        }, label),
-        renderValue: getSanitizedMetricValue(value, suffix)
-      });
-    }
-  }, {
-    key: "renderMetricWithPopover",
-    value: function renderMetricWithPopover(key, texts, value) {
-      return /*#__PURE__*/React.createElement(Metric, {
-        theme: {
-          valueFontWeight: 500
-        },
-        textAlign: "start",
-        key: key,
-        renderLabel: this.renderLabelWithPopover(texts),
-        renderValue: getSanitizedMetricValue(value)
-      });
-    }
-  }, {
     key: "render",
     value: function render() {
       var quizAnalysis = this.props.quizAnalysis;
@@ -142,15 +116,40 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.metricGroup
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.metricsWrapper
-      }, this.renderMetric('highscore', t('high score'), scores === null || scores === void 0 ? void 0 : scores.max_percentage, '%'), this.renderMetric('lowscore', t('low score'), scores === null || scores === void 0 ? void 0 : scores.min_percentage, '%'), this.renderMetric('meanscore', t('mean score'), scores === null || scores === void 0 ? void 0 : scores.mean_percentage, '%')), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "highscore",
+        label: t('high score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "lowscore",
+        label: t('low score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
+        suffix: "%"
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "meanscore",
+        label: t('mean score'),
+        value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
+        suffix: "%"
+      })), /*#__PURE__*/React.createElement("div", {
         className: styles.metricsWrapper
-      }, this.renderMetric('average_attempts', t('average attempts'), t.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)), this.renderMetric('mean_elapsed_sec', t('mean elapsed time'), formatTimeToFullNumeric(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec))), /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "average_attempts",
+        label: t('average attempts'),
+        value: t.number(attempts === null || attempts === void 0 ? void 0 : attempts.average_attempts)
+      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+        metricKey: "mean_elapsed_sec",
+        label: t('mean elapsed time'),
+        value: formatTimeToFullNumeric(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
+      })), /*#__PURE__*/React.createElement("div", {
         className: styles.expandButtonContainer
       }, /*#__PURE__*/React.createElement(ExpandButton, {
         onClick: this.handleToggle,
         title: expanded ? t('collapse quiz analysis') : t('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && this.renderExpanded(), /*#__PURE__*/React.createElement(Text, {
+      }))), expanded && this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
+        decileDistribution: quizAnalysis.scores.decile_distribution
+      }), /*#__PURE__*/React.createElement(Text, {
         size: "x-small"
       }, _ref, /*#__PURE__*/React.createElement("b", null, t('Data Last Updated:')), "\xA0", t.date(Date.parse(quizAnalysis.created_timestamp), 'medium')));
     }
@@ -160,10 +159,10 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   return NewQuizAnalysis;
 }(Component), _class2.propTypes = {
   quizAnalysis: PropTypes.shape({
-    created_timestamp: PropTypes.string,
+    created_timestamp: PropTypes.string.isRequired,
     metadata: PropTypes.shape({
       quiz_title: PropTypes.string
-    }),
+    }).isRequired,
     scores: PropTypes.shape({
       decile_distribution: PropTypes.arrayOf(PropTypes.number),
       cronbachs_alpha: PropTypes.number,
@@ -181,4 +180,6 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       average_attempts: PropTypes.number
     }).isRequired
   }).isRequired
+}, _class2.defaultProps = {
+  quizAnalysis: {}
 }, _temp)) || _class);