@skyscanner/backpack-web 14.0.0 → 14.2.0-beta.1

package/bpk-component-barchart/src/BpkBarchart.js

@@ -1,337 +1,244 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import React, { Component } from 'react';
-import { scaleLinear, scaleBand } from 'd3-scale';
-import {
-  spacingXs,
-  lineHeightSm,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
-
-import BpkBarchartDefs from './BpkBarchartDefs';
-import BpkBarchartBars from './BpkBarchartBars';
-import BpkChartDataTable from './BpkChartDataTable';
-import BpkChartMargin from './BpkChartMargin';
-import BpkChartAxis from './BpkChartAxis';
-import BpkChartGridLines from './BpkChartGridLines';
-import BpkBarchartBar from './BpkBarchartBar';
-import dataProp from './customPropTypes';
-import { identity, remToPx } from './utils';
-import {
-  applyArrayRTLTransform,
-  applyMarginRTLTransform,
-} from './RTLtransforms';
-import { ORIENTATION_X, ORIENTATION_Y } from './orientation';
-import STYLES from './BpkBarchart.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const spacing = remToPx(spacingXs);
-const lineHeight = remToPx(lineHeightSm);
-
-const getMaxYValue = (
-  dataPoints: Array<number>,
-  outlierPercentage: ?number,
-) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _react = _interopRequireWildcard(require("react"));
+var _src = require("d3-scale/src");
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.common");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentMobileScrollContainer = _interopRequireDefault(require("../../bpk-component-mobile-scroll-container"));
+var _BpkBarchartDefs = _interopRequireDefault(require("./BpkBarchartDefs"));
+var _BpkBarchartBars = _interopRequireDefault(require("./BpkBarchartBars"));
+var _BpkChartDataTable = _interopRequireDefault(require("./BpkChartDataTable"));
+var _BpkChartMargin = _interopRequireDefault(require("./BpkChartMargin"));
+var _BpkChartAxis = _interopRequireDefault(require("./BpkChartAxis"));
+var _BpkChartGridLines = _interopRequireDefault(require("./BpkChartGridLines"));
+var _BpkBarchartBar = _interopRequireDefault(require("./BpkBarchartBar"));
+var _customPropTypes = _interopRequireDefault(require("./customPropTypes"));
+var _utils = require("./utils");
+var _RTLtransforms = require("./RTLtransforms");
+var _orientation = require("./orientation");
+var _BpkBarchartModule = _interopRequireDefault(require("./BpkBarchart.module.css"));
+const _excluded = ["BarComponent", "className", "data", "disableDataTable", "getBarLabel", "getBarSelection", "initialHeight", "initialWidth", "leadingScrollIndicatorClassName", "onBarClick", "onBarFocus", "onBarHover", "outlierPercentage", "showGridlines", "trailingScrollIndicatorClassName", "xAxisLabel", "xAxisMargin", "xAxisTickEvery", "xAxisTickOffset", "xAxisTickValue", "xScaleDataKey", "yAxisDomain", "yAxisLabel", "yAxisMargin", "yAxisNumTicks", "yAxisTickValue", "yScaleDataKey"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkBarchartModule.default);
+const spacing = (0, _utils.remToPx)(_base.spacingXs);
+const lineHeight = (0, _utils.remToPx)(_base.lineHeightSm);
+const getMaxYValue = (dataPoints, outlierPercentage) => {
   const meanValue = dataPoints.reduce((d, t) => d + t, 0) / dataPoints.length;
   const maxYValue = Math.max(...dataPoints);
-
-  return outlierPercentage
-    ? Math.min(maxYValue, meanValue * (outlierPercentage / 100) + meanValue)
-    : maxYValue;
-};
-
-type Props = {
-  data: Array<any>, // We pass any here as the array can contain free form data depending on the user
-  xScaleDataKey: string,
-  yScaleDataKey: string,
-  xAxisLabel: string,
-  yAxisLabel: string,
-  initialWidth: number,
-  initialHeight: number,
-  className: ?string,
-  leadingScrollIndicatorClassName: ?string,
-  trailingScrollIndicatorClassName: ?string,
-  outlierPercentage: ?number,
-  showGridlines: boolean,
-  xAxisMargin: number,
-  xAxisTickValue: () => mixed,
-  xAxisTickOffset: number,
-  xAxisTickEvery: number,
-  yAxisMargin: number,
-  yAxisTickValue: () => mixed,
-  yAxisNumTicks: ?number,
-  yAxisDomain: Array<?number>,
-  onBarClick: ?() => mixed,
-  onBarHover: ?() => mixed,
-  onBarFocus: ?() => mixed,
-  getBarLabel: (any, string, string) => ?string,
-  getBarSelection: () => mixed,
-  BarComponent: typeof BpkBarchartBar,
-  disableDataTable: boolean,
+  return outlierPercentage ? Math.min(maxYValue, meanValue * (outlierPercentage / 100) + meanValue) : maxYValue;
 };
-
-type State = {
-  width: number,
-  height: number,
-};
-
-class BpkBarchart extends Component<Props, State> {
-  xScale: typeof scaleBand;
-
-  yScale: typeof scaleLinear;
-
-  onWindowResize: () => mixed;
-
-  svgEl: ?Element;
-
-  static defaultProps = {
-    className: null,
-    leadingScrollIndicatorClassName: null,
-    trailingScrollIndicatorClassName: null,
-    outlierPercentage: null,
-    showGridlines: false,
-    xAxisMargin: 2 * (lineHeight + spacing),
-    xAxisTickValue: identity,
-    xAxisTickOffset: 0,
-    xAxisTickEvery: 1,
-    yAxisMargin: 4 * lineHeight + spacing,
-    yAxisTickValue: identity,
-    yAxisNumTicks: null,
-    yAxisDomain: [null, null],
-    onBarClick: null,
-    onBarHover: null,
-    onBarFocus: null,
-    // Using type any here as xScaleDataKey or yScaleDataKey are strings and there is an issue that strings are not valid keys
-    getBarLabel: (point: any, xScaleDataKey: string, yScaleDataKey: string) =>
-      `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`,
-    getBarSelection: () => false,
-    BarComponent: BpkBarchartBar,
-    disableDataTable: false,
-  };
-
-  constructor(props: Props) {
+class BpkBarchart extends _react.Component {
+  constructor(props) {
     super(props);
-
+    _defineProperty(this, "xScale", void 0);
+    _defineProperty(this, "yScale", void 0);
+    _defineProperty(this, "onWindowResize", void 0);
+    _defineProperty(this, "svgEl", void 0);
+    _defineProperty(this, "updateDimensions", () => {
+      if (!this.svgEl) {
+        return;
+      }
+      const {
+        height,
+        width
+      } = this.svgEl.getBoundingClientRect();
+      this.setState({
+        width,
+        height
+      });
+    });
     this.state = {
       width: props.initialWidth,
-      height: props.initialHeight,
+      height: props.initialHeight
     };
-
-    this.xScale = scaleBand();
-    this.yScale = scaleLinear();
-
-    this.onWindowResize = debounce(this.updateDimensions, 100);
+    this.xScale = (0, _src.scaleBand)();
+    this.yScale = (0, _src.scaleLinear)();
+    this.onWindowResize = (0, _lodash.default)(this.updateDimensions, 100);
   }
-
   componentDidMount() {
     this.updateDimensions();
     window.addEventListener('resize', this.onWindowResize);
   }
-
   componentWillUnmount() {
     window.removeEventListener('resize', this.onWindowResize);
   }
-
-  updateDimensions = () => {
-    if (!this.svgEl) {
-      return;
-    }
-
-    const { height, width } = this.svgEl.getBoundingClientRect();
-
-    this.setState({ width, height });
-  };
-
   render() {
-    const {
-      BarComponent,
-      className,
-      data,
-      disableDataTable,
-      getBarLabel,
-      getBarSelection,
-      initialHeight,
-      initialWidth,
-      leadingScrollIndicatorClassName,
-      onBarClick,
-      onBarFocus,
-      onBarHover,
-      outlierPercentage,
-      showGridlines,
-      trailingScrollIndicatorClassName,
-      xAxisLabel,
-      xAxisMargin,
-      xAxisTickEvery,
-      xAxisTickOffset,
-      xAxisTickValue,
-      xScaleDataKey,
-      yAxisDomain,
-      yAxisLabel,
-      yAxisMargin,
-      yAxisNumTicks,
-      yAxisTickValue,
-      yScaleDataKey,
-      ...rest
-    } = this.props;
-
-    const transformedData = applyArrayRTLTransform(data);
-    const margin = applyMarginRTLTransform({
+    const _this$props = this.props,
+      {
+        BarComponent,
+        className,
+        data,
+        disableDataTable,
+        getBarLabel,
+        getBarSelection,
+        initialHeight,
+        initialWidth,
+        leadingScrollIndicatorClassName,
+        onBarClick,
+        onBarFocus,
+        onBarHover,
+        outlierPercentage,
+        showGridlines,
+        trailingScrollIndicatorClassName,
+        xAxisLabel,
+        xAxisMargin,
+        xAxisTickEvery,
+        xAxisTickOffset,
+        xAxisTickValue,
+        xScaleDataKey,
+        yAxisDomain,
+        yAxisLabel,
+        yAxisMargin,
+        yAxisNumTicks,
+        yAxisTickValue,
+        yScaleDataKey
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
+    const transformedData = (0, _RTLtransforms.applyArrayRTLTransform)(data);
+    const margin = (0, _RTLtransforms.applyMarginRTLTransform)({
       top: spacing,
       left: yAxisMargin,
       right: 0,
-      bottom: xAxisMargin,
+      bottom: xAxisMargin
     });
-
     const classNames = [getClassName('bpk-barchart')];
     if (className) {
       classNames.push(className);
     }
-
     const width = this.state.width - margin.left - margin.right;
     const height = this.state.height - margin.bottom - margin.top;
-    const maxYValue = getMaxYValue(
-      data.map((d) => d[yScaleDataKey]),
-      outlierPercentage,
-    );
-
+    const maxYValue = getMaxYValue(data.map(d => d[yScaleDataKey]), outlierPercentage);
     this.xScale.rangeRound([0, width]);
-    this.xScale.domain(transformedData.map((d) => d[xScaleDataKey]));
+    this.xScale.domain(transformedData.map(d => d[xScaleDataKey]));
     this.yScale.rangeRound([height, 0]);
     this.yScale.domain([yAxisDomain[0] || 0, yAxisDomain[1] || maxYValue]);
-
-    return (
-      <BpkMobileScrollContainer
-        leadingIndicatorClassName={leadingScrollIndicatorClassName}
-        trailingIndicatorClassName={trailingScrollIndicatorClassName}
-      >
-        {!disableDataTable && (
-          <BpkChartDataTable
-            data={data}
-            xScaleDataKey={xScaleDataKey}
-            yScaleDataKey={yScaleDataKey}
-            xAxisLabel={xAxisLabel}
-            yAxisLabel={yAxisLabel}
-          />
-        )}
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className={classNames.join(' ')}
-          width={this.state.width}
-          height={this.state.height}
-          ref={(svgEl) => {
-            this.svgEl = svgEl;
-          }}
-          {...rest}
-        >
-          <BpkBarchartDefs />
-          <BpkChartMargin margin={margin}>
-            <BpkChartAxis
-              orientation={ORIENTATION_Y}
-              width={this.state.width}
-              height={this.state.height}
-              margin={margin}
-              scale={this.yScale}
-              tickValue={yAxisTickValue}
-              numTicks={yAxisNumTicks}
-              label={yAxisLabel}
-            />
-            <BpkChartAxis
-              orientation={ORIENTATION_X}
-              width={this.state.width}
-              height={this.state.height}
-              margin={margin}
-              scale={this.xScale}
-              tickValue={xAxisTickValue}
-              tickEvery={xAxisTickEvery}
-              tickOffset={xAxisTickOffset}
-              label={xAxisLabel}
-            />
-            {showGridlines && (
-              <BpkChartGridLines
-                orientation={ORIENTATION_Y}
-                width={this.state.width}
-                height={this.state.height}
-                margin={margin}
-                scale={this.yScale}
-              />
-            )}
-            <BpkBarchartBars
-              height={this.state.height}
-              margin={margin}
-              data={transformedData}
-              xScale={this.xScale}
-              yScale={this.yScale}
-              xScaleDataKey={xScaleDataKey}
-              yScaleDataKey={yScaleDataKey}
-              maxYValue={maxYValue}
-              outerPadding={showGridlines ? undefined : 0}
-              onBarClick={onBarClick}
-              onBarHover={onBarHover}
-              onBarFocus={onBarFocus}
-              getBarLabel={getBarLabel}
-              getBarSelection={getBarSelection}
-              BarComponent={BarComponent}
-            />
-          </BpkChartMargin>
-        </svg>
-      </BpkMobileScrollContainer>
-    );
+    return /*#__PURE__*/_react.default.createElement(_bpkComponentMobileScrollContainer.default, {
+      leadingIndicatorClassName: leadingScrollIndicatorClassName,
+      trailingIndicatorClassName: trailingScrollIndicatorClassName
+    }, !disableDataTable && /*#__PURE__*/_react.default.createElement(_BpkChartDataTable.default, {
+      data: data,
+      xScaleDataKey: xScaleDataKey,
+      yScaleDataKey: yScaleDataKey,
+      xAxisLabel: xAxisLabel,
+      yAxisLabel: yAxisLabel
+    }), /*#__PURE__*/_react.default.createElement("svg", _extends({
+      xmlns: "http://www.w3.org/2000/svg",
+      className: classNames.join(' '),
+      width: this.state.width,
+      height: this.state.height,
+      ref: svgEl => {
+        this.svgEl = svgEl;
+      }
+    }, rest), /*#__PURE__*/_react.default.createElement(_BpkBarchartDefs.default, null), /*#__PURE__*/_react.default.createElement(_BpkChartMargin.default, {
+      margin: margin
+    }, /*#__PURE__*/_react.default.createElement(_BpkChartAxis.default, {
+      orientation: _orientation.ORIENTATION_Y,
+      width: this.state.width,
+      height: this.state.height,
+      margin: margin,
+      scale: this.yScale,
+      tickValue: yAxisTickValue,
+      numTicks: yAxisNumTicks,
+      label: yAxisLabel
+    }), /*#__PURE__*/_react.default.createElement(_BpkChartAxis.default, {
+      orientation: _orientation.ORIENTATION_X,
+      width: this.state.width,
+      height: this.state.height,
+      margin: margin,
+      scale: this.xScale,
+      tickValue: xAxisTickValue,
+      tickEvery: xAxisTickEvery,
+      tickOffset: xAxisTickOffset,
+      label: xAxisLabel
+    }), showGridlines && /*#__PURE__*/_react.default.createElement(_BpkChartGridLines.default, {
+      orientation: _orientation.ORIENTATION_Y,
+      width: this.state.width,
+      height: this.state.height,
+      margin: margin,
+      scale: this.yScale
+    }), /*#__PURE__*/_react.default.createElement(_BpkBarchartBars.default, {
+      height: this.state.height,
+      margin: margin,
+      data: transformedData,
+      xScale: this.xScale,
+      yScale: this.yScale,
+      xScaleDataKey: xScaleDataKey,
+      yScaleDataKey: yScaleDataKey,
+      maxYValue: maxYValue,
+      outerPadding: showGridlines ? undefined : 0,
+      onBarClick: onBarClick,
+      onBarHover: onBarHover,
+      onBarFocus: onBarFocus,
+      getBarLabel: getBarLabel,
+      getBarSelection: getBarSelection,
+      BarComponent: BarComponent
+    }))));
   }
 }
-
+_defineProperty(BpkBarchart, "defaultProps", {
+  className: null,
+  leadingScrollIndicatorClassName: null,
+  trailingScrollIndicatorClassName: null,
+  outlierPercentage: null,
+  showGridlines: false,
+  xAxisMargin: 2 * (lineHeight + spacing),
+  xAxisTickValue: _utils.identity,
+  xAxisTickOffset: 0,
+  xAxisTickEvery: 1,
+  yAxisMargin: 4 * lineHeight + spacing,
+  yAxisTickValue: _utils.identity,
+  yAxisNumTicks: null,
+  yAxisDomain: [null, null],
+  onBarClick: null,
+  onBarHover: null,
+  onBarFocus: null,
+  // Using type any here as xScaleDataKey or yScaleDataKey are strings and there is an issue that strings are not valid keys
+  getBarLabel: (point, xScaleDataKey, yScaleDataKey) => `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`,
+  getBarSelection: () => false,
+  BarComponent: _BpkBarchartBar.default,
+  disableDataTable: false
+});
 BpkBarchart.propTypes = {
-  data: dataProp, // eslint-disable-line react/require-default-props
-  xScaleDataKey: PropTypes.string.isRequired,
-  yScaleDataKey: PropTypes.string.isRequired,
-  xAxisLabel: PropTypes.string.isRequired,
-  yAxisLabel: PropTypes.string.isRequired,
-  initialWidth: PropTypes.number.isRequired,
-  initialHeight: PropTypes.number.isRequired,
-
-  className: PropTypes.string,
-  leadingScrollIndicatorClassName: PropTypes.string,
-  trailingScrollIndicatorClassName: PropTypes.string,
-  outlierPercentage: PropTypes.number,
-  showGridlines: PropTypes.bool,
-  xAxisMargin: PropTypes.number,
-  xAxisTickValue: PropTypes.func,
-  xAxisTickOffset: PropTypes.number,
-  xAxisTickEvery: PropTypes.number,
-  yAxisMargin: PropTypes.number,
-  yAxisTickValue: PropTypes.func,
-  yAxisNumTicks: PropTypes.number,
-  yAxisDomain: PropTypes.arrayOf(PropTypes.number),
-  onBarClick: PropTypes.func,
-  onBarHover: PropTypes.func,
-  onBarFocus: PropTypes.func,
-  getBarLabel: PropTypes.func,
-  getBarSelection: PropTypes.func,
-  BarComponent: PropTypes.elementType,
-  disableDataTable: PropTypes.bool,
+  data: _customPropTypes.default,
+  // eslint-disable-line react/require-default-props
+  xScaleDataKey: _propTypes.default.string.isRequired,
+  yScaleDataKey: _propTypes.default.string.isRequired,
+  xAxisLabel: _propTypes.default.string.isRequired,
+  yAxisLabel: _propTypes.default.string.isRequired,
+  initialWidth: _propTypes.default.number.isRequired,
+  initialHeight: _propTypes.default.number.isRequired,
+  className: _propTypes.default.string,
+  leadingScrollIndicatorClassName: _propTypes.default.string,
+  trailingScrollIndicatorClassName: _propTypes.default.string,
+  outlierPercentage: _propTypes.default.number,
+  showGridlines: _propTypes.default.bool,
+  xAxisMargin: _propTypes.default.number,
+  xAxisTickValue: _propTypes.default.func,
+  xAxisTickOffset: _propTypes.default.number,
+  xAxisTickEvery: _propTypes.default.number,
+  yAxisMargin: _propTypes.default.number,
+  yAxisTickValue: _propTypes.default.func,
+  yAxisNumTicks: _propTypes.default.number,
+  yAxisDomain: _propTypes.default.arrayOf(_propTypes.default.number),
+  onBarClick: _propTypes.default.func,
+  onBarHover: _propTypes.default.func,
+  onBarFocus: _propTypes.default.func,
+  getBarLabel: _propTypes.default.func,
+  getBarSelection: _propTypes.default.func,
+  BarComponent: _propTypes.default.elementType,
+  disableDataTable: _propTypes.default.bool
 };
-
-export default BpkBarchart;
+var _default = BpkBarchart;
+exports.default = _default;