@instructure/quiz-core 17.58.2-rc.6 → 17.58.2-rc.7

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnalysisMetric = 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 _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../utils.js");
+
+var _uiMetric = require("@instructure/ui-metric");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'flBnP',
+  template: function template(theme) {
+    return "\n\n.flBnP_eckF{margin:0;max-width:159px;text-transform:uppercase}";
+  },
+  'metricLabel': 'flBnP_eckF'
+};
+var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AnalysisMetric, _Component);
+
+  var _super = (0, _createSuper2.default)(AnalysisMetric);
+
+  function AnalysisMetric() {
+    (0, _classCallCheck2.default)(this, AnalysisMetric);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(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.default.createElement(_uiMetric.Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: /*#__PURE__*/_react.default.createElement("p", {
+          className: styles.metricLabel
+        }, label),
+        renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
+      });
+    }
+  }]);
+  AnalysisMetric.displayName = "AnalysisMetric";
+  return AnalysisMetric;
+}(_react.Component), _class2.propTypes = {
+  metricKey: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  suffix: _propTypes.default.string
+}, _class2.defaultProps = {
+  suffix: ''
+}, _temp)) || _class);
+exports.AnalysisMetric = AnalysisMetric;

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

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

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/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.AnalysisPopoverMetric;
+exports.default = _default;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnalysisPopoverMetric = 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 _uiMetric = require("@instructure/ui-metric");
+
+var _utils = require("../utils.js");
+
+var _index = _interopRequireDefault(require("../MetricPopover/index.js"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dec, _class, _class2, _temp;
+
+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'
+};
+var AnalysisPopoverMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(AnalysisPopoverMetric, _Component);
+
+  var _super = (0, _createSuper2.default)(AnalysisPopoverMetric);
+
+  function AnalysisPopoverMetric() {
+    (0, _classCallCheck2.default)(this, AnalysisPopoverMetric);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(AnalysisPopoverMetric, [{
+    key: "renderLabelWithPopover",
+    value: function renderLabelWithPopover(texts) {
+      return /*#__PURE__*/_react.default.createElement("p", {
+        className: styles.metricLabel
+      }, this.props.label, /*#__PURE__*/_react.default.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/_react.default.createElement(_index.default, 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.default.createElement(_uiMetric.Metric, {
+        theme: {
+          valueFontWeight: 500,
+          padding: '0'
+        },
+        textAlign: "start",
+        key: metricKey,
+        renderLabel: this.renderLabelWithPopover(popoverDescription),
+        renderValue: (0, _utils.getSanitizedMetricValue)(value)
+      });
+    }
+  }]);
+  AnalysisPopoverMetric.displayName = "AnalysisPopoverMetric";
+  return AnalysisPopoverMetric;
+}(_react.Component), _class2.propTypes = {
+  metricKey: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  popoverDescription: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    subtitle: _propTypes.default.string,
+    body: _propTypes.default.string,
+    screenReaderLabel: _propTypes.default.string
+  }).isRequired
+}, _temp)) || _class);
+exports.AnalysisPopoverMetric = AnalysisPopoverMetric;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    headerPaddingBottom: spacing.medium
+  };
+}

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/NewItemAnalysis/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.NewItemAnalysis;
+exports.default = _default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pearsonCorrelation = exports.discriminationIndex = exports.difficultyIndex = void 0;
+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'
+};
+exports.difficultyIndex = difficultyIndex;
+var discriminationIndex = {
+  title: 'Discrimination title',
+  subtitle: 'discrimination subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem two'
+};
+exports.discriminationIndex = discriminationIndex;
+var pearsonCorrelation = {
+  title: 'Pearson correlation title',
+  subtitle: 'pearson correlation subtitle',
+  body: 'Lorem ipsum dolor sit amet',
+  screenReaderLabel: 'Lorem three'
+};
+exports.pearsonCorrelation = pearsonCorrelation;

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

@@ -0,0 +1,274 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NewItemAnalysis = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _uiHeading = require("@instructure/ui-heading");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/ExpandButton/index.js"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _popoverContent = require("./popoverContent.js");
+
+var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/Card/index.js"));
+
+var _index3 = _interopRequireDefault(require("../AnalysisMetric/index.js"));
+
+var _index4 = _interopRequireDefault(require("../AnalysisPopoverMetric/index.js"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _interactionTypeMetadata = require("../../../../../common/util/interactionTypeMetadata.js");
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'dcJyB',
+  template: function template(theme) {
+    return "\n\n.dcJyB_eDnN{display:flex;flex-basis:45%;flex-direction:column;overflow:hidden}\n\n.dcJyB_eKXQ{padding:".concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.dcJyB_eIAv{display:flex;position:relative}\n\n.dcJyB_ePHw{flex-basis:91%;overflow:hidden;padding-bottom:10px;text-overflow:ellipsis;white-space:nowrap}\n\n.dcJyB_dzsH{overflow:visible;text-overflow:unset;white-space:normal}\n\n.dcJyB_byoJ{position:absolute;right:7px;top:-8px}\n\n.dcJyB_evBt{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}\n\n.dcJyB_pAQb{display:flex;flex-direction:column;height:60px}\n\n.dcJyB_zefc{display:flex;flex-basis:55%;justify-content:flex-end}\n\n.dcJyB_dPzc{flex-direction:column}\n\n.dcJyB_dPzc,.dcJyB_dzph{display:flex;flex-basis:100%}\n\n.dcJyB_dzph{align-items:flex-start;box-sizing:border-box;column-gap:5px;justify-content:space-between;padding:0 30px 0 25px}\n\n.dcJyB_eobd{padding-top:1rem}\n\n.dcJyB_NpIG{position:absolute;right:").concat(theme.viewPadding || 'inherit', ";top:").concat(theme.viewPadding || 'inherit', "}\n\n@media screen and (--tabletBreakPoint){.dcJyB_zefc{flex-basis:100%;justify-content:flex-start}.dcJyB_ePHw{flex-basis:94%}.dcJyB_eDnN{flex-basis:100%}.dcJyB_dzph{padding:0}.dcJyB_eDnN h3{padding-right:30px}.dcJyB_NpIG{right:17px}.dcJyB_eIAv{margin-bottom:20px}.dcJyB_byoJ{right:-7px}.dcJyB_dzph{flex-wrap:wrap}}");
+  },
+  'heading': 'dcJyB_eDnN',
+  'cardWrapper': 'dcJyB_eKXQ',
+  'bodyPresentation': 'dcJyB_eIAv',
+  'bodyExcerpt': 'dcJyB_ePHw',
+  'bodyExcerptExpanded': 'dcJyB_dzsH',
+  'bodyExpandButtonWrapper': 'dcJyB_byoJ',
+  'innerWrapper': 'dcJyB_evBt',
+  'expandableInnerWrapper': 'dcJyB_pAQb',
+  'metricsWithControls': 'dcJyB_zefc',
+  'metricGroup': 'dcJyB_dPzc',
+  'metricsRow': 'dcJyB_dzph',
+  'metricsRowPaginated': 'dcJyB_eobd',
+  'itemCardToggleButtonWrapper': 'dcJyB_NpIG'
+};
+var NewItemAnalysis = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(NewItemAnalysis, _Component);
+
+  var _super = (0, _createSuper2.default)(NewItemAnalysis);
+
+  function NewItemAnalysis() {
+    var _this;
+
+    (0, _classCallCheck2.default)(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 (0, _interactionTypeMetadata.interactionTypesNameDictionary)({
+        slug: interactionType,
+        name: (0, _formatMessage.default)('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.default.createElement("div", {
+        className: styles.itemCardToggleButtonWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        onClick: _this.handleToggle,
+        title: _this.state.metricsExpanded ? (0, _formatMessage.default)('collapse item card') : (0, _formatMessage.default)('expand item card'),
+        isExpanded: _this.state.metricsExpanded
+      }));
+    };
+
+    _this.renderBodyToggleButton = function () {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.bodyExpandButtonWrapper
+      }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        onClick: _this.handleBodyToggle,
+        title: _this.state.bodyExpanded ? (0, _formatMessage.default)('collapse question stem') : (0, _formatMessage.default)('expand question stem'),
+        isExpanded: _this.state.bodyExpanded
+      }));
+    };
+
+    _this.renderExpanded = function () {
+      var scores = _this.props.itemAnalysis.scores;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: [styles.metricsRow, styles.metricsRowPaginated].join(' ')
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "pearson_correlation",
+        label: (0, _formatMessage.default)('Pearson Correlation Coefficient'),
+        value: _formatMessage.default.number(scores.pearson_correlation),
+        popoverDescription: _popoverContent.pearsonCorrelation
+      }));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(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 = (0, _classnames2.default)(styles.bodyExcerpt, (0, _defineProperty2.default)({}, styles.bodyExcerptExpanded, this.state.bodyExpanded));
+      var headingId = this.buildItemCardHeadingId();
+      var bodyId = this.buildItemCardBodyId();
+      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+        className: styles.cardWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.innerWrapper
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        id: headingId,
+        className: styles.heading
+      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        margin: "0 0 small 0",
+        level: "h3",
+        weight: "bold",
+        color: "primary"
+      }, metadata.item_title), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small",
+        weight: "bold",
+        transform: "capitalize"
+      }, this.mapInteractionTypeToTranslation(metadata.interaction_type)), /*#__PURE__*/_react.default.createElement("div", {
+        id: "itemBody",
+        className: styles.bodyPresentation
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        id: bodyId,
+        className: bodyClass
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        size: "small"
+      }, metadata.item_body)), this.state.bodyToggable && this.renderBodyToggleButton())), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsWithControls
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricGroup
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.metricsRow
+      }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "difficulty_index",
+        label: (0, _formatMessage.default)('Item Difficulty'),
+        value: _formatMessage.default.number(scores.difficulty_index),
+        popoverDescription: _popoverContent.difficultyIndex
+      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+        metricKey: "mean",
+        label: (0, _formatMessage.default)('Mean Earned Points'),
+        value: _formatMessage.default.number(scores.mean)
+      }), /*#__PURE__*/_react.default.createElement(_index3.default, {
+        metricKey: "median",
+        label: (0, _formatMessage.default)('Median Earned Points'),
+        value: _formatMessage.default.number(scores.median)
+      }), /*#__PURE__*/_react.default.createElement(_index4.default, {
+        metricKey: "discrimination_index",
+        label: (0, _formatMessage.default)('Discrimination Index'),
+        value: _formatMessage.default.number(scores.discrimination_index),
+        popoverDescription: _popoverContent.discriminationIndex
+      }), this.renderExpandItemCardButton()), this.state.metricsExpanded && this.renderExpanded()))), this.state.itemExpanded && /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.expandableInnerWrapper
+      }));
+    }
+  }]);
+  NewItemAnalysis.displayName = "NewItemAnalysis";
+  return NewItemAnalysis;
+}(_react.Component), _class2.propTypes = {
+  itemAnalysis: _propTypes.default.shape({
+    attempts: _propTypes.default.shape({
+      students_responded: _propTypes.default.number,
+      students_without_response: _propTypes.default.number
+    }),
+    metadata: _propTypes.default.shape({
+      interaction_type: _propTypes.default.string,
+      item_body: _propTypes.default.string,
+      item_id: _propTypes.default.string,
+      item_title: _propTypes.default.string
+    }),
+    scores: _propTypes.default.shape({
+      difficulty_index: _propTypes.default.number,
+      discrimination_index: _propTypes.default.number,
+      mean: _propTypes.default.number,
+      median: _propTypes.default.number,
+      pearson_correlation: _propTypes.default.number,
+      points_possible: _propTypes.default.number,
+      quartile_distribution: _propTypes.default.arrayOf(_propTypes.default.number)
+    })
+  }).isRequired
+}, _temp)) || _class);
+exports.NewItemAnalysis = NewItemAnalysis;

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      breakpoints = _ref.breakpoints;
+  return {
+    tabletBreakPoint: "max-width: ".concat(breakpoints.large),
+    cardWrapperPadding: spacing.medium,
+    viewPadding: spacing.small
+  };
+}