@instructure/quiz-core 21.1.1 → 22.0.0

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

@@ -4,86 +4,101 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CentileDistribution = void 0;
+exports["default"] = exports.CentileDistribution = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = require("prop-types");
 var _d3Array = require("d3-array");
 var _emotion = require("@instructure/emotion");
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _uiTable = require("@instructure/ui-table");
-var _index = _interopRequireDefault(require("../Distribution/index.js"));
+var _Distribution = _interopRequireDefault(require("../Distribution"));
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _CentileDistribution;
 /** @jsx jsx */
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 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, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_CentileDistribution = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CentileDistribution, _Component);
-  var _super = (0, _createSuper2.default)(CentileDistribution);
+var CentileDistribution = exports.CentileDistribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_CentileDistribution = /*#__PURE__*/function (_Component) {
   function CentileDistribution() {
-    var _this;
-    (0, _classCallCheck2.default)(this, CentileDistribution);
+    var _this2;
+    (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) {
+    _this2 = _callSuper(this, CentileDistribution, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "_calculateAxis", function (x, y, xAxis, height) {
       x.domain((0, _d3Array.range)(101));
-      if (typeof _this.props.starScore === 'number') {
-        var starIndex = starBin(_this.props);
+      if (typeof _this2.props.starScore === 'number') {
+        var starIndex = starBin(_this2.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)]);
+        var starTop = y(_this2.props.visualDistribution[starIndex]) - 30;
+        y.rangeRound([height, _this2.props.barPaddingTop - Math.min(0, starTop)]);
       }
       xAxis.tickValues((0, _d3Array.range)(0, 101, 10)).tickFormat(function (d) {
-        return (0, _formatMessage.default)('{percent, number}%', {
+        return (0, _formatMessage["default"])('{percent, number}%', {
           percent: d
         });
       });
-    };
-    _this._createChart = function (svg, width) {
+    });
+    (0, _defineProperty2["default"])(_this2, "_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
+    });
+    (0, _defineProperty2["default"])(_this2, "_summarizeChart", function (summary) {
+      if (typeof _this2.props.starScore !== 'number') return summary;
+      return (0, _formatMessage["default"])('You scored {score, number, percent}. ', {
+        score: _this2.props.starScore
       }) + summary;
-    };
-    _this._renderTable = function () {
+    });
+    (0, _defineProperty2["default"])(_this2, "_renderTable", function () {
       return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _emotion.jsx)(_uiTable.Table, {
-        caption: (0, _formatMessage.default)('Score percentiles chart data')
+        caption: (0, _formatMessage["default"])('Score percentiles chart data')
       }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile"
-      }, (0, _formatMessage.default)('Score Percentile')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage["default"])('Score Percentile')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, (0, _formatMessage.default)('Count')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, _this._renderTableRows())));
-    };
-    return _this;
+      }, (0, _formatMessage["default"])('Count')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, _this2._renderTableRows())));
+    });
+    return _this2;
   }
-  (0, _createClass2.default)(CentileDistribution, [{
+  (0, _inherits2["default"])(CentileDistribution, _Component);
+  return (0, _createClass2["default"])(CentileDistribution, [{
     key: "_renderTableRows",
     value: function _renderTableRows() {
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
         return (0, _emotion.jsx)(_uiTable.Table.Row, {
           key: "".concat(index, ":").concat(count) /* eslint-disable-line react/no-array-index-key */
-        }, (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _formatMessage.default)('{percent}%', {
+        }, (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _formatMessage["default"])('{percent}%', {
           percent: index
         })), (0, _emotion.jsx)(_uiTable.Table.Cell, null, count));
       });
@@ -102,12 +117,10 @@ var CentileDistribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
         className: "centileRoot",
         css: this.props.styles.centileRoot,
         "data-automation": "sdk-reporting-centile-root"
-      }, (0, _emotion.jsx)(_index.default, props));
+      }, (0, _emotion.jsx)(_Distribution["default"], props));
     }
   }]);
-  CentileDistribution.displayName = "CentileDistribution";
-  return CentileDistribution;
-}(_react.Component), _CentileDistribution.displayName = 'CentileDistribution', _CentileDistribution.componentId = "Quizzes".concat(_CentileDistribution.displayName), _CentileDistribution.propTypes = {
+}(_react.Component), (0, _defineProperty2["default"])(_CentileDistribution, "displayName", 'CentileDistribution'), (0, _defineProperty2["default"])(_CentileDistribution, "componentId", "Quizzes".concat(_CentileDistribution.displayName)), (0, _defineProperty2["default"])(_CentileDistribution, "propTypes", {
   animateDelay: _propTypes.PropTypes.number,
   animateDuration: _propTypes.PropTypes.number,
   barPaddingInner: _propTypes.PropTypes.number,
@@ -129,7 +142,7 @@ var CentileDistribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
   visualDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node).isRequired,
   starScore: _propTypes.PropTypes.number,
   styles: _propTypes.PropTypes.object
-}, _CentileDistribution.defaultProps = {
+}), (0, _defineProperty2["default"])(_CentileDistribution, "defaultProps", {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.25,
@@ -144,7 +157,5 @@ var CentileDistribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.de
   summaryDistribution: void 0,
   visualDistribution: [],
   starScore: null
-}, _CentileDistribution)) || _class);
-exports.CentileDistribution = CentileDistribution;
-var _default = CentileDistribution;
-exports.default = _default;
+}), _CentileDistribution)) || _class);
+var _default = exports["default"] = CentileDistribution;

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var generateStyle = function generateStyle(componentTheme) {
   var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
   return {
-    centileRoot: (0, _defineProperty2.default)({
+    centileRoot: (0, _defineProperty2["default"])({
       display: 'flex',
       flexDirection: 'row',
       justifyContent: 'center',
@@ -32,5 +32,4 @@ var generateStyle = function generateStyle(componentTheme) {
     })
   };
 };
-var _default = generateStyle;
-exports.default = _default;
+var _default = exports["default"] = generateStyle;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography,
@@ -13,5 +13,4 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     phoneBarLabelFontSize: typography.fontSizeLarge
   };
 };
-var _default = generateComponentTheme;
-exports.default = _default;
+var _default = exports["default"] = generateComponentTheme;

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

@@ -3,11 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CentileDistribution = void 0;
+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;
+var CentileDistribution = exports.CentileDistribution = _presenter.CentileDistribution;
+var _default = exports["default"] = CentileDistribution;

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

@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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;
+var _default = exports["default"] = _presenter["default"];

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

@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+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;
+var _default = exports["default"] = _presenter["default"];

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

@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _presenter = _interopRequireDefault(require("./presenter.js"));
-var _default = _presenter.default;
-exports.default = _default;
+var _default = exports["default"] = _presenter["default"];

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

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Distribution = exports.starPathData = void 0;
+exports.starPathData = exports["default"] = exports.Distribution = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = require("prop-types");
 var _d3Array = require("d3-array");
@@ -17,68 +19,80 @@ var _d3Scale = require("d3-scale");
 var _d3Selection = require("d3-selection");
 var _emotion = require("@instructure/emotion");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _d3Transition = require("d3-transition");
 var _flow = _interopRequireDefault(require("lodash/flow"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Distribution;
 /** @jsx jsx */
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
 // Star path copied from instructure-icons/svg/Solid/star.svg
-var starPathData = 'M1915.918 737.475c-10.955-33.543-42.014-56.131-77.364-56.131h-612.029l-189.063-582.1v-.112C1026.394 65.588 995.335 43 959.984 43c-35.237 0-66.41 22.588-77.365 56.245L693.443 681.344H81.415c-35.35 0-66.41 22.588-77.365 56.131-10.955 33.544.79 70.137 29.478 91.03l495.247 359.831-189.177 582.212c-10.955 33.657 1.13 70.25 29.817 90.918 14.23 10.278 30.946 15.473 47.66 15.473 16.716 0 33.432-5.195 47.775-15.586l495.134-359.718 495.021 359.718c28.574 20.781 67.087 20.781 95.662.113 28.687-20.668 40.658-57.261 29.703-91.03l-189.176-582.1 495.36-359.83c28.574-20.894 40.433-57.487 29.364-91.03';
-exports.starPathData = starPathData;
+var starPathData = exports.starPathData = 'M1915.918 737.475c-10.955-33.543-42.014-56.131-77.364-56.131h-612.029l-189.063-582.1v-.112C1026.394 65.588 995.335 43 959.984 43c-35.237 0-66.41 22.588-77.365 56.245L693.443 681.344H81.415c-35.35 0-66.41 22.588-77.365 56.131-10.955 33.544.79 70.137 29.478 91.03l495.247 359.831-189.177 582.212c-10.955 33.657 1.13 70.25 29.817 90.918 14.23 10.278 30.946 15.473 47.66 15.473 16.716 0 33.432-5.195 47.775-15.586l495.134-359.718 495.021 359.718c28.574 20.781 67.087 20.781 95.662.113 28.687-20.668 40.658-57.261 29.703-91.03l-189.176-582.1 495.36-359.83c28.574-20.894 40.433-57.487 29.364-91.03';
 var MARGIN_T = 0;
 var MARGIN_B = 28;
-var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_Distribution = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Distribution, _Component);
-  var _super = (0, _createSuper2.default)(Distribution);
+var Distribution = exports.Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Distribution = /*#__PURE__*/function (_Component) {
   function Distribution() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Distribution);
+    var _this2;
+    (0, _classCallCheck2["default"])(this, Distribution);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this._isStarred = function (d, i) {
-      return typeof _this.props.starIndex === 'number' && i === _this.props.starIndex;
-    };
-    _this._renderStar = function (svg) {
-      if (typeof _this.props.starIndex !== 'number') return;
-      var star = svg.append('path').attr('d', starPathData).attr('style', (0, _emotion.css)(_this.props.styles.barStar).styles);
-      var starIndex = _this.props.starIndex;
-      var starX = _this.x(starIndex) + _this.x.bandwidth() / 2;
-      var starY = _this.y(_this.props.visualDistribution[starIndex]) - 30;
+    _this2 = _callSuper(this, Distribution, [].concat(args));
+    (0, _defineProperty2["default"])(_this2, "_isStarred", function (d, i) {
+      return typeof _this2.props.starIndex === 'number' && i === _this2.props.starIndex;
+    });
+    (0, _defineProperty2["default"])(_this2, "_renderStar", function (svg) {
+      if (typeof _this2.props.starIndex !== 'number') return;
+      var star = svg.append('path').attr('d', starPathData).attr('style', (0, _emotion.css)(_this2.props.styles.barStar).styles);
+      var starIndex = _this2.props.starIndex;
+      var starX = _this2.x(starIndex) + _this2.x.bandwidth() / 2;
+      var starY = _this2.y(_this2.props.visualDistribution[starIndex]) - 30;
       // scale the star down and position it on the x axis - y axis will be applied by animation
       var xTransform = "translate(".concat(starX, " 0) scale(0.011) translate(-960 0)");
-      _this.applyTransition(star, function (rects) {
+      _this2.applyTransition(star, function (rects) {
         return rects.attr('opacity', 0).attr('transform', "translate(0 ".concat(starY + 20, ") ").concat(xTransform));
       }, function (rects) {
         return rects.attr('opacity', 1).attr('transform', "translate(0 ".concat(starY, ") ").concat(xTransform));
       }, function (transition) {
-        return transition.delay(_this.props.animateDuration).duration(600);
+        return transition.delay(_this2.props.animateDuration).duration(600);
       });
-    };
-    _this.applyTransition = function (selection, initialFunc, finalFunc, transitionFunc) {
+    });
+    (0, _defineProperty2["default"])(_this2, "applyTransition", function (selection, initialFunc, finalFunc, transitionFunc) {
       var identity = function identity(s) {
         return s;
       };
       var transition = function transition(s) {
-        return s.transition(_this.getTransition());
+        return s.transition(_this2.getTransition());
       };
       var applicators = [];
-      if (_this.isAnimated()) {
+      if (_this2.isAnimated()) {
         applicators.push(initialFunc || identity, transition, transitionFunc || identity);
       }
       applicators.push(finalFunc || identity);
-      return (0, _flow.default)(applicators)(selection);
-    };
-    _this.setChartRef = function (ref) {
-      _this.chart = ref;
-    };
-    return _this;
+      return (0, _flow["default"])(applicators)(selection);
+    });
+    (0, _defineProperty2["default"])(_this2, "setChartRef", function (ref) {
+      _this2.chart = ref;
+    });
+    return _this2;
   }
-  (0, _createClass2.default)(Distribution, [{
+  (0, _inherits2["default"])(Distribution, _Component);
+  return (0, _createClass2["default"])(Distribution, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.__svg = this.createChart(this.chart, this.props);
@@ -139,13 +153,13 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
       if (avgInfo.belowAvg + avgInfo.aboveAvg < 1) {
         return '';
       }
-      var textForScreenreaders = (0, _formatMessage.default)('{aboveAvg} students scored above or at the average, and {belowAvg} below. ', {
+      var textForScreenreaders = (0, _formatMessage["default"])('{aboveAvg} students scored above or at the average, and {belowAvg} below. ', {
         aboveAvg: avgInfo.aboveAvg,
         belowAvg: avgInfo.belowAvg
       });
       data.forEach(function (datum, i) {
         if (datum > 0) {
-          textForScreenreaders += (0, _formatMessage.default)("{\n            count, plural,\n            one {# student scored between {lower, number, percent} and {upper, number, percent}. }\n            other {# students scored between {lower, number, percent} and {upper, number, percent}. }\n          }", {
+          textForScreenreaders += (0, _formatMessage["default"])("{\n            count, plural,\n            one {# student scored between {lower, number, percent} and {upper, number, percent}. }\n            other {# students scored between {lower, number, percent} and {upper, number, percent}. }\n          }", {
             count: datum,
             lower: i / data.length,
             upper: (i + 1) / data.length
@@ -164,7 +178,7 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
       this.viewportHeight = this.height + MARGIN_T + MARGIN_B;
       this.calculateAxis(props);
       var svg = (0, _d3Selection.select)(node).attr('role', 'document').attr('aria-role', 'document').attr('width', '100%').attr('height', '100%').attr('viewBox', "0 0 ".concat(this.width, " ").concat(this.viewportHeight)).attr('preserveAspectRatio', 'xMidYMax').append('g');
-      this.title = Distribution.addTitle(svg, (0, _formatMessage.default)('Score percentiles chart'));
+      this.title = Distribution.addTitle(svg, (0, _formatMessage["default"])('Score percentiles chart'));
       svg.append('g').attr('class', 'xAxis').attr('style', (0, _emotion.css)(this.props.styles.xAxis).styles).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', 'barLabel').attr('style', (0, _emotion.css)(this.props.styles.barLabel).styles).attr('y', 9);
       var clipKey = "clipPath".concat(this.width, "x").concat(this.height);
       var clipPath = svg.append('clipPath').attr('id', clipKey);
@@ -191,16 +205,16 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "renderBars",
     value: function renderBars(node, props) {
-      var _this2 = this;
+      var _this3 = this;
       this.chartData = props.visualDistribution;
       var height = this.height;
       var x = this.x;
       var y = this.y;
       var bars = node.selectAll('rect').data(this.chartData);
       var rects = bars.enter().append('rect').attr('style', function (d, i) {
-        return _this2._isStarred(d, i) ? (0, _emotion.css)(_this2.props.styles.barStar).styles : (0, _emotion.css)(_this2.props.styles.bar).styles;
+        return _this3._isStarred(d, i) ? (0, _emotion.css)(_this3.props.styles.barStar).styles : (0, _emotion.css)(_this3.props.styles.bar).styles;
       }).attr('class', function (d, i) {
-        return _this2._isStarred(d, i) ? 'barStar' : 'bar';
+        return _this3._isStarred(d, i) ? 'barStar' : 'bar';
       }).attr('x', function (d, i) {
         return x(i);
       }).attr('width', x.bandwidth());
@@ -262,9 +276,7 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
       return svg.append('title').text(title);
     }
   }]);
-  Distribution.displayName = "Distribution";
-  return Distribution;
-}(_react.Component), _Distribution.displayName = 'Distribution', _Distribution.componentId = "Quizzes".concat(_Distribution.displayName), _Distribution.propTypes = {
+}(_react.Component), (0, _defineProperty2["default"])(_Distribution, "displayName", 'Distribution'), (0, _defineProperty2["default"])(_Distribution, "componentId", "Quizzes".concat(_Distribution.displayName)), (0, _defineProperty2["default"])(_Distribution, "propTypes", {
   animateDelay: _propTypes.PropTypes.number,
   animateDuration: _propTypes.PropTypes.number,
   // ESLint thinks these props aren't used but they are via a call chain in componentDidMount
@@ -292,7 +304,7 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   updateChart: _propTypes.PropTypes.func,
   starIndex: _propTypes.PropTypes.number,
   styles: _propTypes.PropTypes.object
-}, _Distribution.defaultProps = {
+}), (0, _defineProperty2["default"])(_Distribution, "defaultProps", {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.25,
@@ -314,7 +326,7 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   },
   updateChart: Function.prototype,
   starIndex: null
-}, _Distribution)) || _class);
+}), _Distribution)) || _class);
 /**
  *   A component to render an a11y friendly distribution of scores across users.
  *   Underneath the chart is two accessible features:
@@ -329,6 +341,4 @@ var Distribution = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
  *      />
  *      ```
  *  **/
-exports.Distribution = Distribution;
-var _default = Distribution;
-exports.default = _default;
+var _default = exports["default"] = Distribution;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateStyle = function generateStyle(componentTheme) {
   return {
     bar: {
@@ -24,5 +24,4 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
-var _default = generateStyle;
-exports.default = _default;
+var _default = exports["default"] = generateStyle;

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

@@ -3,18 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
     typography = _ref.typography;
   return {
-    barFillColor: colors.electric,
-    barStarFillColor: colors.fire,
-    barLabelColor: colors.textDarkest,
+    barFillColor: colors.contrasts.blue4570,
+    barStarFillColor: colors.contrasts.orange4570,
+    barLabelColor: colors.contrasts.grey125125,
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall,
-    xAxisColor: colors.textDarkest
+    xAxisColor: colors.contrasts.grey125125
   };
 };
-var _default = generateComponentTheme;
-exports.default = _default;
+var _default = exports["default"] = generateComponentTheme;

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

@@ -4,29 +4,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Legend = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports["default"] = exports.Legend = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 var _emotion = require("@instructure/emotion");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _theme = _interopRequireDefault(require("./theme"));
 var _quizCommon = require("@instructure/quiz-common");
 var _dec, _class, _Legend;
 /** @jsx jsx */
-var Legend = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_Legend = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Legend, _Component);
-  var _super = (0, _createSuper2.default)(Legend);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _callSuper(_this, derived, args) {
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    } catch (e) {
+      return false;
+    }
+  }
+  derived = (0, _getPrototypeOf2["default"])(derived);
+  return (0, _possibleConstructorReturn2["default"])(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], (0, _getPrototypeOf2["default"])(_this).constructor) : derived.apply(_this, args));
+}
+var Legend = exports.Legend = (_dec = (0, _quizCommon.withStyleOverrides)(_styles["default"], _theme["default"]), _dec(_class = (_Legend = /*#__PURE__*/function (_Component) {
   function Legend() {
-    (0, _classCallCheck2.default)(this, Legend);
-    return _super.apply(this, arguments);
+    (0, _classCallCheck2["default"])(this, Legend);
+    return _callSuper(this, Legend, arguments);
   }
-  (0, _createClass2.default)(Legend, [{
+  (0, _inherits2["default"])(Legend, _Component);
+  return (0, _createClass2["default"])(Legend, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -47,7 +63,7 @@ var Legend = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme
       }, (0, _emotion.jsx)("div", {
         css: styles.seriesSwatchContainer
       }, (0, _emotion.jsx)("div", {
-        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.seriesSwatch), customStyles)
+        css: _objectSpread(_objectSpread({}, styles.seriesSwatch), customStyles)
       })), (0, _emotion.jsx)("div", {
         css: styles.seriesLabel
       }, series.label));
@@ -55,7 +71,7 @@ var Legend = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
+      var _this2 = this;
       var _this$props = this.props,
         variant = _this$props.variant,
         series = _this$props.series,
@@ -65,24 +81,20 @@ var Legend = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme
         className: containerClass,
         css: styles.containerStyle
       }, series.map(function (s, i) {
-        return _this.renderSeries(s, i, styles);
+        return _this2.renderSeries(s, i, styles);
       })));
     }
   }]);
-  Legend.displayName = "Legend";
-  return Legend;
-}(_react.Component), _Legend.displayName = 'Legend', _Legend.componentId = "Quizzes".concat(_Legend.displayName), _Legend.propTypes = {
-  series: _propTypes.default.arrayOf(_propTypes.default.shape({
-    label: _propTypes.default.string.isRequired,
-    customStyles: _propTypes.default.object.isRequired
+}(_react.Component), (0, _defineProperty2["default"])(_Legend, "displayName", 'Legend'), (0, _defineProperty2["default"])(_Legend, "componentId", "Quizzes".concat(_Legend.displayName)), (0, _defineProperty2["default"])(_Legend, "propTypes", {
+  series: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string.isRequired,
+    customStyles: _propTypes["default"].object.isRequired
   })),
-  variant: _propTypes.default.oneOf(['column', 'row']),
-  makeStyles: _propTypes.default.func,
-  styles: _propTypes.default.object
-}, _Legend.defaultProps = {
+  variant: _propTypes["default"].oneOf(['column', 'row']),
+  makeStyles: _propTypes["default"].func,
+  styles: _propTypes["default"].object
+}), (0, _defineProperty2["default"])(_Legend, "defaultProps", {
   series: [],
   variant: 'column'
-}, _Legend)) || _class);
-exports.Legend = Legend;
-var _default = Legend;
-exports.default = _default;
+}), _Legend)) || _class);
+var _default = exports["default"] = Legend;