@instructure/quiz-core 20.17.3-rc.7 → 20.17.3-rc.8

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

@@ -1,8 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _CentileDistribution;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
 import { Component } from 'react';
 import { PropTypes } from 'prop-types';
@@ -10,51 +12,66 @@ import { range } from 'd3-array';
 import { withStyle, jsx } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
-import Distribution from '../Distribution';
+import Distribution from "../Distribution/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
 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
+  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);
 };
-export var CentileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_CentileDistribution = /*#__PURE__*/function (_Component) {
+
+export var CentileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(CentileDistribution, _Component);
+
+  var _super = _createSuper(CentileDistribution);
+
   function CentileDistribution() {
     var _this;
+
     _classCallCheck(this, CentileDistribution);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, CentileDistribution, [].concat(args));
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
     _this._calculateAxis = function (x, y, xAxis, height) {
       x.domain(range(101));
+
       if (typeof _this.props.starScore === 'number') {
-        var starIndex = starBin(_this.props);
-        // Determine if star above bar will overflow height, and reduce range to
+        var starIndex = starBin(_this.props); // Determine if star above bar will overflow height, and reduce range to
         // account for 18 star height + 12 star bottom padding
+
         var starTop = y(_this.props.visualDistribution[starIndex]) - 30;
         y.rangeRound([height, _this.props.barPaddingTop - Math.min(0, starTop)]);
       }
+
       xAxis.tickValues(range(0, 101, 10)).tickFormat(function (d) {
         return t('{percent, number}%', {
           percent: d
         });
       });
     };
+
     _this._createChart = function (svg, width) {
       // Manually redraw x axis to extend beyond container
       var axisPadding = 2000;
       svg.select('g[data-role=xAxis] path').attr('d', "M".concat(-1 * axisPadding, ",0H").concat(width + axisPadding));
       return svg;
     };
+
     _this._summarizeChart = function (summary) {
       if (typeof _this.props.starScore !== 'number') return summary;
       return t('You scored {score, number, percent}. ', {
         score: _this.props.starScore
       }) + summary;
     };
+
     _this._renderTable = function () {
       return jsx(ScreenReaderContent, null, jsx(Table, {
         caption: t('Score percentiles chart data')
@@ -64,16 +81,19 @@ export var CentileDistribution = (_dec = withStyle(generateStyle, generateCompon
         id: "score-percentiles-chart-data-count"
       }, t('Count')))), jsx(Table.Body, null, _this._renderTableRows())));
     };
+
     return _this;
   }
-  _inherits(CentileDistribution, _Component);
-  return _createClass(CentileDistribution, [{
+
+  _createClass(CentileDistribution, [{
     key: "_renderTableRows",
     value: function _renderTableRows() {
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
         return jsx(Table.Row, {
-          key: "".concat(index, ":").concat(count) /* eslint-disable-line react/jsx-no-literals, react/no-array-index-key */
+          key: "".concat(index, ":").concat(count)
+          /* eslint-disable-line react/jsx-no-literals, react/no-array-index-key */
+
         }, jsx(Table.Cell, null, t('{percent}%', {
           percent: index
         })), jsx(Table.Cell, null, count));
@@ -96,7 +116,10 @@ export var CentileDistribution = (_dec = withStyle(generateStyle, generateCompon
       }, jsx(Distribution, props));
     }
   }]);
-}(Component), _CentileDistribution.propTypes = {
+
+  CentileDistribution.displayName = "CentileDistribution";
+  return CentileDistribution;
+}(Component), _class2.propTypes = {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   barPaddingInner: PropTypes.number,
@@ -107,18 +130,20 @@ export var CentileDistribution = (_dec = withStyle(generateStyle, generateCompon
   chartHeight: PropTypes.number.isRequired,
   // Height in pixels
   chartWidth: PropTypes.number,
+
   /* *
    * * a fallback minimal distribution for tab-able, keyboard navigable buckets
    * * typically this will be ~ 10 buckets
    * */
   summaryDistribution: PropTypes.arrayOf(PropTypes.node),
+
   /* *
    * * A list of score values for each bucket.  Size of this array determines the number of buckets
    * */
   visualDistribution: PropTypes.arrayOf(PropTypes.node).isRequired,
   starScore: PropTypes.number,
   styles: PropTypes.object
-}, _CentileDistribution.defaultProps = {
+}, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.25,
@@ -133,5 +158,5 @@ export var CentileDistribution = (_dec = withStyle(generateStyle, generateCompon
   summaryDistribution: void 0,
   visualDistribution: [],
   starScore: null
-}, _CentileDistribution)) || _class);
+}, _temp)) || _class);
 export default CentileDistribution;

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
 var generateStyle = function generateStyle(componentTheme) {
   var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
   return {
@@ -25,4 +26,5 @@ var generateStyle = function generateStyle(componentTheme) {
     })
   };
 };
+
 export default generateStyle;

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

@@ -1,10 +1,11 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
-    typography = _ref.typography,
-    breakpoints = _ref.breakpoints;
+      typography = _ref.typography,
+      breakpoints = _ref.breakpoints;
   return {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneBarLabelFontSize: typography.fontSizeLarge
   };
 };
+
 export default generateComponentTheme;

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

@@ -1,8 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _Distribution;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
 import { Component } from 'react';
 import { PropTypes } from 'prop-types';
@@ -12,36 +14,45 @@ import { scaleBand, scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
 import { withStyle, jsx, css } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { transition } from 'd3-transition';
-import flow from 'lodash/flow';
-
-// Star path copied from instructure-icons/svg/Solid/star.svg
+import flow from 'lodash/flow'; // Star path copied from instructure-icons/svg/Solid/star.svg
 // eslint-disable-next-line max-len
+
 export 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';
 var MARGIN_T = 0;
 var MARGIN_B = 28;
-export var Distribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Distribution = /*#__PURE__*/function (_Component) {
+export var Distribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(Distribution, _Component);
+
+  var _super = _createSuper(Distribution);
+
   function Distribution() {
     var _this;
+
     _classCallCheck(this, Distribution);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Distribution, [].concat(args));
+
+    _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', 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;
-      // scale the star down and position it on the x axis - y axis will be applied by animation
+      var starY = _this.y(_this.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) {
         return rects.attr('opacity', 0).attr('transform', "translate(0 ".concat(starY + 20, ") ").concat(xTransform));
       }, function (rects) {
@@ -50,27 +61,34 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
         return transition.delay(_this.props.animateDuration).duration(600);
       });
     };
+
     _this.applyTransition = function (selection, initialFunc, finalFunc, transitionFunc) {
       var identity = function identity(s) {
         return s;
       };
+
       var transition = function transition(s) {
         return s.transition(_this.getTransition());
       };
+
       var applicators = [];
+
       if (_this.isAnimated()) {
         applicators.push(initialFunc || identity, transition, transitionFunc || identity);
       }
+
       applicators.push(finalFunc || identity);
       return flow(applicators)(selection);
     };
+
     _this.setChartRef = function (ref) {
       _this.chart = ref;
     };
+
     return _this;
   }
-  _inherits(Distribution, _Component);
-  return _createClass(Distribution, [{
+
+  _createClass(Distribution, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.__svg = this.createChart(this.chart, this.props);
@@ -124,13 +142,17 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
     key: "summarizeChart",
     value: function summarizeChart() {
       var data = this.props.summaryDistribution || this.props.visualDistribution;
+
       if (data.length <= 1) {
         return '';
       }
+
       var avgInfo = this.weightedAvg(data);
+
       if (avgInfo.belowAvg + avgInfo.aboveAvg < 1) {
         return '';
       }
+
       var textForScreenreaders = t('{aboveAvg} students scored above or at the average, and {belowAvg} below. ', {
         aboveAvg: avgInfo.aboveAvg,
         belowAvg: avgInfo.belowAvg
@@ -169,7 +191,9 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
     key: "updateChart",
     value: function updateChart(svg, props) {
       this.renderBars(this.barContainer, props);
+
       this._renderStar(this.barContainer);
+
       this.props.updateChart(svg, this.x, this.y, this.applyTransition, this.barContainer, this.height);
     }
   }, {
@@ -177,6 +201,7 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
     value: function removeChart() {
       if (this.__svg) {
         this.__svg.remove();
+
         delete this.__svg;
       }
     }
@@ -184,6 +209,7 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
     key: "renderBars",
     value: function renderBars(node, props) {
       var _this2 = this;
+
       this.chartData = props.visualDistribution;
       var height = this.height;
       var x = this.x;
@@ -220,12 +246,11 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        chartWidth = _this$props.chartWidth,
-        chartHeight = _this$props.chartHeight;
-      var viewportHeight = chartHeight + MARGIN_T + MARGIN_B;
-
-      // IE11 sizes svg elements incorrectly, so we render a canvas element to
+          chartWidth = _this$props.chartWidth,
+          chartHeight = _this$props.chartHeight;
+      var viewportHeight = chartHeight + MARGIN_T + MARGIN_B; // IE11 sizes svg elements incorrectly, so we render a canvas element to
       // layout space for the chart, then position the svg absolute on top of it.
+
       return jsx("div", null, jsx(PresentationContent, {
         as: "div"
       }, jsx("div", {
@@ -254,25 +279,32 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
       return svg.append('title').text(title);
     }
   }]);
-}(Component), _Distribution.displayName = 'Distribution', _Distribution.propTypes = {
+
+  Distribution.displayName = "Distribution";
+  return Distribution;
+}(Component), _class2.displayName = 'Distribution', _class2.propTypes = {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   // ESLint thinks these props aren't used but they are via a call chain in componentDidMount
+
   /* eslint-disable react/no-unused-prop-types */
   barPaddingInner: PropTypes.number,
   // Spacing between bars, so each is visible, could be accomplished by borders
   barPaddingOuter: PropTypes.number,
   // Spacing between bars, so each is visible, could be accomplished by borders
   barPaddingTop: PropTypes.number,
+
   /* eslint-enable react/no-unused-prop-types */
   chartHeight: PropTypes.number.isRequired,
   // Height in pixels
   chartWidth: PropTypes.number,
+
   /* *
    * * a fallback minimal distribution for tab-able, keyboard navigable buckets
    * * typically this will be ~ 10 buckets
    * */
   summaryDistribution: PropTypes.arrayOf(PropTypes.node),
+
   /* *
    * * A list of score values for each bucket.  Size of this array determines the number of buckets
    * */
@@ -284,7 +316,7 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
   updateChart: PropTypes.func,
   starIndex: PropTypes.number,
   styles: PropTypes.object
-}, _Distribution.defaultProps = {
+}, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.25,
@@ -306,7 +338,7 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
   },
   updateChart: Function.prototype,
   starIndex: null
-}, _Distribution)) || _class);
+}, _temp)) || _class);
 /**
  *   A component to render an a11y friendly distribution of scores across users.
  *   Underneath the chart is two accessible features:
@@ -321,4 +353,5 @@ export var Distribution = (_dec = withStyle(generateStyle, generateComponentThem
  *      />
  *      ```
  *  **/
+
 export default Distribution;

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

@@ -18,4 +18,5 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
+
 export default generateStyle;

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

@@ -1,6 +1,6 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
-    typography = _ref.typography;
+      typography = _ref.typography;
   return {
     barFillColor: colors.electric,
     barStarFillColor: colors.fire,
@@ -10,4 +10,5 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     xAxisColor: colors.textDarkest
   };
 };
+
 export default generateComponentTheme;

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

@@ -1,23 +1,30 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _Legend;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
-export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Legend = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(Legend, _Component);
+
+  var _super = _createSuper(Legend);
+
   function Legend() {
     _classCallCheck(this, Legend);
-    return _callSuper(this, Legend, arguments);
+
+    return _super.apply(this, arguments);
   }
-  _inherits(Legend, _Component);
-  return _createClass(Legend, [{
+
+  _createClass(Legend, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.props.makeStyles();
@@ -47,10 +54,11 @@ export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     key: "render",
     value: function render() {
       var _this = this;
+
       var _this$props = this.props,
-        variant = _this$props.variant,
-        series = _this$props.series,
-        styles = _this$props.styles;
+          variant = _this$props.variant,
+          series = _this$props.series,
+          styles = _this$props.styles;
       var containerClass = variant === 'row' ? 'containerRow' : 'containerColumn';
       return jsx(PresentationContent, null, jsx("div", {
         className: containerClass,
@@ -60,7 +68,10 @@ export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       })));
     }
   }]);
-}(Component), _Legend.propTypes = {
+
+  Legend.displayName = "Legend";
+  return Legend;
+}(Component), _class2.propTypes = {
   series: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string.isRequired,
     customStyles: PropTypes.object.isRequired
@@ -68,8 +79,8 @@ export var Legend = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   variant: PropTypes.oneOf(['column', 'row']),
   makeStyles: PropTypes.func,
   styles: PropTypes.object
-}, _Legend.defaultProps = {
+}, _class2.defaultProps = {
   series: [],
   variant: 'column'
-}, _Legend)) || _class);
+}, _temp)) || _class);
 export default Legend;

package/es/reporting/components/charts/Legend/styles.js

@@ -1,4 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
 var generateStyle = function generateStyle(componentTheme, props) {
   var containerVariant = {
     row: {
@@ -39,4 +40,5 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }
   };
 };
+
 export default generateStyle;

package/es/reporting/components/charts/Legend/theme.js

@@ -1,8 +1,8 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
-    spacing = _ref.spacing,
-    colors = _ref.colors,
-    typography = _ref.typography;
+      spacing = _ref.spacing,
+      colors = _ref.colors,
+      typography = _ref.typography;
   return {
     containerBorderWidth: borders.widthSmall,
     containerBorderColor: colors.tiara,
@@ -15,4 +15,5 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     seriesLabelColor: colors.textDarkest
   };
 };
+
 export default generateComponentTheme;

package/es/reporting/components/charts/QuintileDistribution/presenter.js

@@ -1,9 +1,12 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _QuintileDistribution;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
+
 /* eslint "no-mixed-operators": "warn" */
 import { Component } from 'react';
 import { PropTypes } from 'prop-types';
@@ -11,25 +14,36 @@ import { withStyle, jsx, css } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
 import t from '@instructure/quiz-i18n/es/format-message';
-import Distribution from '../Distribution';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
-export var QuintileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuintileDistribution = /*#__PURE__*/function (_Component) {
+import Distribution from "../Distribution/index.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuintileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(QuintileDistribution, _Component);
+
+  var _super = _createSuper(QuintileDistribution);
+
   function QuintileDistribution() {
     var _this;
+
     _classCallCheck(this, QuintileDistribution);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, QuintileDistribution, [].concat(args));
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
     _this._calculateAxis = function (_, _2, xAxis) {
       xAxis.tickFormat(_this.calculateLabelForIndex);
     };
+
     _this.calculateLabelForIndex = function (d) {
       var numBars = _this.props.visualDistribution.length;
+
       if (_this.props.calculateLabelForColumn) {
         return _this.props.calculateLabelForColumn(d, numBars);
       }
+
       var lower = Math.floor(d * 100 / numBars);
       var upper = Math.floor((d + 1) * 100 / numBars - (d < numBars - 1 ? 1 : 0));
       return t('{lower, number}-{upper, number}%', {
@@ -37,7 +51,7 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
         upper: upper
       });
     };
-    // updateChart
+
     _this._renderNumbers = function (svg, x, y, applyTransition, barContainer, height) {
       var chartData = _this.props.visualDistribution;
       var numbers = barContainer.selectAll('text').data(chartData);
@@ -59,6 +73,7 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
       });
       numbers.exit().remove();
     };
+
     _this._renderTable = function () {
       return jsx(ScreenReaderContent, null, jsx(Table, {
         caption: t('Score percentiles chart data')
@@ -68,18 +83,23 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
         id: "score-percentiles-chart-data-count"
       }, t('Count')))), jsx(Table.Body, null, _this.renderTableRows())));
     };
+
     return _this;
   }
-  _inherits(QuintileDistribution, _Component);
-  return _createClass(QuintileDistribution, [{
+
+  _createClass(QuintileDistribution, [{
     key: "renderTableRows",
     value: function renderTableRows() {
       var _this2 = this;
+
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
         var label = _this2.calculateLabelForIndex(index);
+
         return jsx(Table.Row, {
-          key: "".concat(label, ":").concat(count) /* eslint-disable-line react/jsx-no-literals */
+          key: "".concat(label, ":").concat(count)
+          /* eslint-disable-line react/jsx-no-literals */
+
         }, jsx(Table.RowHeader, null, label), jsx(Table.Cell, null, count));
       });
     }
@@ -94,7 +114,10 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
       return jsx(Distribution, props);
     }
   }]);
-}(Component), _QuintileDistribution.propTypes = {
+
+  QuintileDistribution.displayName = "QuintileDistribution";
+  return QuintileDistribution;
+}(Component), _class2.propTypes = {
   animateDelay: PropTypes.number,
   animateDuration: PropTypes.number,
   barPaddingInner: PropTypes.number,
@@ -105,15 +128,18 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
   chartHeight: PropTypes.number.isRequired,
   // Height in pixels
   chartWidth: PropTypes.number,
+
   /* *
    * * a fallback minimal distribution for tab-able, keyboard navigable buckets
    * * typically this will be ~ 10 buckets
    * */
   summaryDistribution: PropTypes.arrayOf(PropTypes.node),
+
   /* *
    * * A list of score values for each bucket.  Size of this array determines the number of buckets
    * */
   visualDistribution: PropTypes.arrayOf(PropTypes.node).isRequired,
+
   /* *
    * * Callback with column index and columns quantity as arguments.
    * * Should return string which will be label for chart column.
@@ -121,7 +147,7 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
    * */
   calculateLabelForColumn: PropTypes.func,
   styles: PropTypes.object
-}, _QuintileDistribution.defaultProps = {
+}, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,
   barPaddingInner: 0.375,
@@ -133,5 +159,5 @@ export var QuintileDistribution = (_dec = withStyle(generateStyle, generateCompo
   summaryDistribution: void 0,
   visualDistribution: [],
   calculateLabelForColumn: null
-}, _QuintileDistribution)) || _class);
+}, _temp)) || _class);
 export default QuintileDistribution;