@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

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

@@ -1,109 +1,148 @@
-"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");
-
-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; }
+/*
+ * 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,
+) => {
+  const meanValue = dataPoints.reduce((d, t) => d + t, 0) / dataPoints.length;
+  const maxYValue = Math.max(...dataPoints);
 
-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; }
+  return outlierPercentage
+    ? Math.min(maxYValue, meanValue * (outlierPercentage / 100) + meanValue)
+    : maxYValue;
+};
 
-var STYLES = {
-  "bpk-barchart": "BpkBarchart-module__bpk-barchart___1-LJN"
+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,
 };
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-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 State = {
+  width: number,
+  height: number,
 };
 
-class BpkBarchart extends _react.Component {
-  constructor(props) {
+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) {
     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 = (0, _src.scaleBand)();
-    this.yScale = (0, _src.scaleLinear)();
-    this.onWindowResize = (0, _lodash.default)(this.updateDimensions, 100);
+
+    this.xScale = scaleBand();
+    this.yScale = scaleLinear();
+
+    this.onWindowResize = debounce(this.updateDimensions, 100);
   }
 
   componentDidMount() {
@@ -115,9 +154,18 @@ class BpkBarchart extends _react.Component {
     window.removeEventListener('resize', this.onWindowResize);
   }
 
+  updateDimensions = () => {
+    if (!this.svgEl) {
+      return;
+    }
+
+    const { height, width } = this.svgEl.getBoundingClientRect();
+
+    this.setState({ width, height });
+  };
+
   render() {
-    const _this$props = this.props,
-          {
+    const {
       BarComponent,
       className,
       data,
@@ -144,148 +192,145 @@ class BpkBarchart extends _react.Component {
       yAxisMargin,
       yAxisNumTicks,
       yAxisTickValue,
-      yScaleDataKey
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+      yScaleDataKey,
+      ...rest
+    } = this.props;
 
-    const transformedData = (0, _RTLtransforms.applyArrayRTLTransform)(data);
-    const margin = (0, _RTLtransforms.applyMarginRTLTransform)({
+    const transformedData = applyArrayRTLTransform(data);
+    const margin = applyMarginRTLTransform({
       top: spacing,
       left: yAxisMargin,
       right: 0,
-      bottom: xAxisMargin
+      bottom: xAxisMargin,
     });
-    const classNames = [getClassName('bpk-barchart')];
 
+    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 /*#__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
-    }))));
-  }
 
+    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>
+    );
+  }
 }
 
-_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: _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
+  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,
 };
-var _default = BpkBarchart;
-exports.default = _default;
+
+export default BpkBarchart;

package/bpk-component-barchart/src/BpkBarchart.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+.bpk-barchart{width:100%}

package/bpk-component-barchart/src/BpkBarchart.module.scss

@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+.bpk-barchart {
+  width: 100%;
+}