@spaced-out/ui-design-system 0.1.92 → 0.1.93-beta.0

package/lib/components/DateRangePicker/utils.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
+exports.formatIsoDate = formatIsoDate;
+exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getValidatedMonths = exports.getTimeZones = exports.getSubtractedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = void 0;
+exports.wrangleMoment = wrangleMoment;
+var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
+var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _moment = _interopRequireDefault(require("moment"));
+var _timezones = require("./timezones");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// $FlowFixMe - strict types for date-fns
+
+// $FlowFixMe - strict types for date-fns
+
+// $FlowFixMe[untyped-import]
+
+const NAVIGATION_ACTION = Object.freeze({
+  NEXT: 'next',
+  PREV: 'prev'
+});
+exports.NAVIGATION_ACTION = NAVIGATION_ACTION;
+const MARKERS = Object.freeze({
+  DATE_RANGE_START: 'FIRST',
+  DATE_RANGE_END: 'SECOND'
+});
+exports.MARKERS = MARKERS;
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+exports.WEEKDAYS = WEEKDAYS;
+const MONTHS = [{
+  key: '0',
+  label: 'Jan'
+}, {
+  key: '1',
+  label: 'Feb'
+}, {
+  key: '2',
+  label: 'Mar'
+}, {
+  key: '3',
+  label: 'Apr'
+}, {
+  key: '4',
+  label: 'May'
+}, {
+  key: '5',
+  label: 'Jun'
+}, {
+  key: '6',
+  label: 'Jul'
+}, {
+  key: '7',
+  label: 'Aug'
+}, {
+  key: '8',
+  label: 'Sep'
+}, {
+  key: '9',
+  label: 'Oct'
+}, {
+  key: '10',
+  label: 'Nov'
+}, {
+  key: '11',
+  label: 'Dec'
+}];
+exports.MONTHS = MONTHS;
+const getDaysInMonth = date => {
+  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
+  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
+  const days = [],
+    current = startWeek;
+  while (current.isBefore(endWeek)) {
+    days.push(current.clone().format('YYYY-MM-DD'));
+    current.add(1, 'd');
+  }
+  const daysInChunks = _lodash.default.chunk(days, 7);
+
+  // if total rows in calendar are 5 add one more week to the calendar
+  if (daysInChunks.length === 5) {
+    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
+    const extraDays = [];
+    while (current.isSameOrBefore(nextWeek)) {
+      extraDays.push(current.clone().format('YYYY-MM-DD'));
+      current.add(1, 'd');
+    }
+    daysInChunks.push(extraDays);
+  }
+  return daysInChunks;
+};
+exports.getDaysInMonth = getDaysInMonth;
+const isStartOfRange = (_ref, date) => {
+  let {
+    startDate
+  } = _ref;
+  return !!startDate && (0, _moment.default)(date).isSame(startDate, 'd');
+};
+exports.isStartOfRange = isStartOfRange;
+const isEndOfRange = (_ref2, date) => {
+  let {
+    endDate
+  } = _ref2;
+  return !!endDate && (0, _moment.default)(date).isSame(endDate, 'd');
+};
+exports.isEndOfRange = isEndOfRange;
+const inDateRange = (_ref3, date) => {
+  let {
+    startDate,
+    endDate
+  } = _ref3;
+  if (startDate && endDate) {
+    const momentDay = (0, _moment.default)(date);
+    const momentStartDate = (0, _moment.default)(startDate);
+    const momentEndDate = (0, _moment.default)(endDate);
+    return momentDay.isBetween(momentStartDate, momentEndDate) || momentDay.isSame(momentStartDate, 'd') || momentDay.isSame(momentEndDate, 'd');
+  }
+  return false;
+};
+exports.inDateRange = inDateRange;
+const isStartDateEndDateSame = _ref4 => {
+  let {
+    startDate,
+    endDate
+  } = _ref4;
+  if (startDate && endDate) {
+    return (0, _moment.default)(startDate).isSame((0, _moment.default)(endDate), 'd');
+  }
+  return false;
+};
+exports.isStartDateEndDateSame = isStartDateEndDateSame;
+const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
+  const startYear = (0, _moment.default)().year() - count + 1;
+  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).year();
+  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).year();
+  const isWithinRange = year => marker === MARKERS.DATE_RANGE_START ? year <= secondCalendarYear : year >= firstCalendarYear;
+  return Array.from({
+    length: count
+  }, (_, index) => {
+    const year = startYear + index;
+    return {
+      key: year.toString(),
+      label: year.toString(),
+      disabled: !isWithinRange(year)
+    };
+  }).filter(_ref5 => {
+    let {
+      disabled
+    } = _ref5;
+    return !disabled;
+  });
+};
+exports.generateAvailableYears = generateAvailableYears;
+const getMonthAndYear = date => {
+  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
+  return [momentDate.month(), momentDate.year()];
+};
+const getAvailableMonths = (Months, first, second, marker) => {
+  const [firstMonth, firstYear] = getMonthAndYear(first);
+  const [secondMonth, secondYear] = getMonthAndYear(second);
+  const [currentMonth, currentYear] = getMonthAndYear();
+  return Months.filter(month => {
+    const isSameYear = firstYear === secondYear;
+    const isMonthBeforeFirstMonth = month.key <= firstMonth;
+    const isMonthAfterCurrentMonth = currentYear === secondYear && month.key > currentMonth;
+    if (marker === MARKERS.DATE_RANGE_START) {
+      return !(isSameYear && month.key >= secondMonth);
+    } else {
+      return !(isSameYear && isMonthBeforeFirstMonth || isMonthAfterCurrentMonth);
+    }
+  });
+};
+exports.getAvailableMonths = getAvailableMonths;
+const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
+exports.addTimeZone = addTimeZone;
+const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
+exports.getSubtractedDate = getSubtractedDate;
+const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
+exports.getAddedDate = getAddedDate;
+function formatIsoDate(date) {
+  return (0, _formatISO.default)(wrangleMoment(date), {
+    representation: 'date'
+  });
+}
+function wrangleMoment(date) {
+  if (date instanceof Date) {
+    return date;
+  } else if (!date) {
+    return new Date();
+  }
+  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
+}
+const getValidatedMonths = (_ref6, minDate, maxDate) => {
+  let {
+    startDate,
+    endDate
+  } = _ref6;
+  if (startDate && endDate) {
+    const newStart = _moment.default.max((0, _moment.default)(startDate), (0, _moment.default)(minDate)); // TODO Figure out the validated date
+    const newEnd = _moment.default.min((0, _moment.default)(endDate), (0, _moment.default)(maxDate));
+    return [formatIsoDate(newStart), newStart.isSame(newEnd, 'M') ? getAddedDate(newEnd, 1, 'M') : formatIsoDate(newEnd)];
+  } else {
+    return [startDate, endDate];
+  }
+};
+exports.getValidatedMonths = getValidatedMonths;
+const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
+  menuOptions.push({
+    key,
+    label: _timezones.TIMEZONES[key]
+  });
+  return menuOptions;
+}, []);
+exports.getTimeZones = getTimeZones;

package/lib/components/DateRangePicker/utils.js.flow

@@ -0,0 +1,231 @@
+// @flow strict
+
+// $FlowFixMe - strict types for date-fns
+import formatISO from 'date-fns/formatISO';
+// $FlowFixMe - strict types for date-fns
+import parseISO from 'date-fns/parseISO';
+import lodash from 'lodash';
+// $FlowFixMe[untyped-import]
+import moment from 'moment';
+
+import type {MenuOption} from '../Menu';
+
+import {TIMEZONES} from './timezones';
+
+
+export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
+
+export type DateRange = {
+  startDate?: string,
+  endDate?: string,
+};
+
+export type DatePickerSelectedRange = {
+  startDate?: string,
+  endDate?: string,
+  startDateUTC?: string,
+  endDateUTC?: string,
+  timeZone?: string,
+};
+
+export const NAVIGATION_ACTION = Object.freeze({
+  NEXT: 'next',
+  PREV: 'prev',
+});
+
+export const MARKERS = Object.freeze({
+  DATE_RANGE_START: 'FIRST',
+  DATE_RANGE_END: 'SECOND',
+});
+
+export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+export const MONTHS = [
+  {key: '0', label: 'Jan'},
+  {key: '1', label: 'Feb'},
+  {key: '2', label: 'Mar'},
+  {key: '3', label: 'Apr'},
+  {key: '4', label: 'May'},
+  {key: '5', label: 'Jun'},
+  {key: '6', label: 'Jul'},
+  {key: '7', label: 'Aug'},
+  {key: '8', label: 'Sep'},
+  {key: '9', label: 'Oct'},
+  {key: '10', label: 'Nov'},
+  {key: '11', label: 'Dec'},
+];
+
+export const getDaysInMonth = (date: string): Array<Array<string>> => {
+  const startWeek = moment(date).startOf('month').startOf('week');
+  const endWeek = moment(date).endOf('month').endOf('week');
+  const days = [],
+    current = startWeek;
+
+  while (current.isBefore(endWeek)) {
+    days.push(current.clone().format('YYYY-MM-DD'));
+    current.add(1, 'd');
+  }
+  const daysInChunks = lodash.chunk(days, 7);
+
+  // if total rows in calendar are 5 add one more week to the calendar
+  if (daysInChunks.length === 5) {
+    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
+    const extraDays = [];
+    while (current.isSameOrBefore(nextWeek)) {
+      extraDays.push(current.clone().format('YYYY-MM-DD'));
+      current.add(1, 'd');
+    }
+    daysInChunks.push(extraDays);
+  }
+
+  return daysInChunks;
+};
+
+export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
+  !!startDate && moment(date).isSame(startDate, 'd');
+
+export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
+  !!endDate && moment(date).isSame(endDate, 'd');
+
+export const inDateRange = (
+  {startDate, endDate}: DateRange,
+  date: string,
+): boolean => {
+  if (startDate && endDate) {
+    const momentDay = moment(date);
+    const momentStartDate = moment(startDate);
+    const momentEndDate = moment(endDate);
+    return (
+      momentDay.isBetween(momentStartDate, momentEndDate) ||
+      momentDay.isSame(momentStartDate, 'd') ||
+      momentDay.isSame(momentEndDate, 'd')
+    );
+  }
+  return false;
+};
+
+export const isStartDateEndDateSame = ({
+  startDate,
+  endDate,
+}: DateRange): boolean => {
+  if (startDate && endDate) {
+    return moment(startDate).isSame(moment(endDate), 'd');
+  }
+  return false;
+};
+
+export const generateAvailableYears = (
+  count: number,
+  firstCalendarDate: string,
+  secondCalendarDate: string,
+  marker: $Values<typeof MARKERS>,
+): Array<MenuOption> => {
+  const startYear = moment().year() - count + 1;
+  const firstCalendarYear = moment(firstCalendarDate).year();
+  const secondCalendarYear = moment(secondCalendarDate).year();
+
+  const isWithinRange = (year: number) =>
+    marker === MARKERS.DATE_RANGE_START
+      ? year <= secondCalendarYear
+      : year >= firstCalendarYear;
+
+  return Array.from({length: count}, (_, index) => {
+    const year = startYear + index;
+    return {
+      key: year.toString(),
+      label: year.toString(),
+      disabled: !isWithinRange(year),
+    };
+  }).filter(({disabled}) => !disabled);
+};
+
+const getMonthAndYear = (date) => {
+  const momentDate = date ? moment(date) : moment();
+  return [momentDate.month(), momentDate.year()];
+};
+
+export const getAvailableMonths = (
+  Months: Array<MenuOption>,
+  first: string,
+  second: string,
+  marker: $Values<typeof MARKERS>,
+): Array<MenuOption> => {
+  const [firstMonth, firstYear] = getMonthAndYear(first);
+  const [secondMonth, secondYear] = getMonthAndYear(second);
+  const [currentMonth, currentYear] = getMonthAndYear();
+
+  return Months.filter((month: MenuOption) => {
+    const isSameYear = firstYear === secondYear;
+    const isMonthBeforeFirstMonth = month.key <= firstMonth;
+    const isMonthAfterCurrentMonth =
+      currentYear === secondYear && month.key > currentMonth;
+
+    if (marker === MARKERS.DATE_RANGE_START) {
+      return !(isSameYear && month.key >= secondMonth);
+    } else {
+      return !(
+        (isSameYear && isMonthBeforeFirstMonth) ||
+        isMonthAfterCurrentMonth
+      );
+    }
+  });
+};
+
+export const addTimeZone = (date: string, timeZone: string): string =>
+  moment.tz(date, timeZone).startOf('d').utc().toISOString();
+
+export const getSubtractedDate = (
+  date: string,
+  subtractCount: number,
+  timeUnit: TimeUnit,
+): string => formatIsoDate(moment(date).subtract(subtractCount, timeUnit));
+
+export const getAddedDate = (
+  date: string,
+  addCount: number,
+  timeUnit: TimeUnit,
+): string => formatIsoDate(moment(date).add(addCount, timeUnit));
+
+export function formatIsoDate(date?: string | Date): string {
+  return formatISO(wrangleMoment(date), {
+    representation: 'date',
+  });
+}
+
+export function wrangleMoment(date?: string | Date): Date {
+  if (date instanceof Date) {
+    return date;
+  } else if (!date) {
+    return new Date();
+  }
+  return date instanceof moment ? date.toDate() : parseISO(date);
+}
+
+export const getValidatedMonths = (
+  {startDate, endDate}: DateRange,
+  minDate: string,
+  maxDate: string,
+): Array<?string> => {
+  if (startDate && endDate) {
+    const newStart = moment.max(moment(startDate), moment(minDate)); // TODO Figure out the validated date
+    const newEnd = moment.min(moment(endDate), moment(maxDate));
+
+    return [
+      formatIsoDate(newStart),
+      newStart.isSame(newEnd, 'M')
+        ? getAddedDate(newEnd, 1, 'M')
+        : formatIsoDate(newEnd),
+    ];
+  } else {
+    return [startDate, endDate];
+  }
+};
+
+export const getTimeZones = (): Array<MenuOption> =>
+  Object.keys(TIMEZONES).reduce((menuOptions, key) => {
+    menuOptions.push({
+      key,
+      label: TIMEZONES[key],
+    });
+    return menuOptions;
+  }, []);

package/lib/components/Dropdown/Dropdown.js

@@ -26,10 +26,12 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     menu,
     onMenuOpen,
     onMenuClose,
+    scrollMenuToBottom = false,
     dropdownInputText = '',
     ...inputProps
   } = _ref;
   const dropdownRef = React.useRef();
+  const menuRef = React.useRef();
   const {
     x,
     y,
@@ -44,6 +46,9 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
   const onMenuToggle = isOpen => {
     isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+    if (scrollMenuToBottom && menuRef.current && isOpen) {
+      menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
+    }
   };
   return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
     onChange: onMenuToggle
@@ -90,7 +95,8 @@ const Dropdown = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         }
       },
       size: menu.size || size,
-      onTabOut: clickAway
+      onTabOut: clickAway,
+      ref: menuRef
     }))));
   });
 });

package/lib/components/Dropdown/Dropdown.js.flow

@@ -32,6 +32,7 @@ export type DropdownProps = {
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
   onMenuOpen?: () => mixed,
   onMenuClose?: () => mixed,
+  scrollMenuToBottom?: boolean,
   dropdownInputText?: string,
   menu?: MenuProps,
   ...
@@ -50,12 +51,14 @@ export const Dropdown: React$AbstractComponent<
       menu,
       onMenuOpen,
       onMenuClose,
+      scrollMenuToBottom = false,
       dropdownInputText = '',
       ...inputProps
     }: DropdownProps,
     ref,
   ): React.Node => {
     const dropdownRef = React.useRef();
+    const menuRef = React.useRef();
     const {x, y, refs, strategy} = useFloating({
       open: true,
       strategy: 'absolute',
@@ -66,6 +69,9 @@ export const Dropdown: React$AbstractComponent<
 
     const onMenuToggle = (isOpen: boolean) => {
       isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+      if (scrollMenuToBottom && menuRef.current && isOpen) {
+        menuRef.current.scrollTop = isOpen ? menuRef.current.scrollHeight : 0;
+      }
     };
 
     return (
@@ -116,6 +122,7 @@ export const Dropdown: React$AbstractComponent<
                   }}
                   size={menu.size || size}
                   onTabOut={clickAway}
+                  ref={menuRef}
                 />
               </div>
             )}

package/lib/components/SpiderChart/SpiderChart.js

@@ -31,27 +31,10 @@ const SpiderChart = _ref => {
     cardTitle,
     customExportOptions,
     headerActions,
-    legend,
     series,
-    xAxis: {
-      categories,
-      tickmarkPlacement = 'on',
-      lineWidth: xAxisLineWidth = 0,
-      ...xAxisProps
-    } = {},
-    yAxis: {
-      gridLineInterpolation = 'polygon',
-      lineWidth: yAxisLineWidth = 0,
-      min: yAxisMin = 0,
-      ...yAxisProps
-    } = {},
     ...userOptions
   } = _ref;
   const chartRef = React.useRef(null);
-  const [chartWidth, setChartWidth] = React.useState(0);
-  React.useLayoutEffect(() => {
-    setChartWidth(chartRef.current?.chart.plotWidth);
-  }, []);
   const spiderSeries = series.map((seriesItem, index) => ({
     ...seriesItem,
     name: seriesItem.name,
@@ -71,9 +54,7 @@ const SpiderChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
-    title: cardTitle
-    //$FlowFixMe[incompatible-type]
-    ,
+    title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,
     classNames: wrapperClassNames,

package/lib/components/SpiderChart/SpiderChart.js.flow

@@ -66,29 +66,10 @@ export const SpiderChart = ({
   cardTitle,
   customExportOptions,
   headerActions,
-  legend,
   series,
-  xAxis: {
-    categories,
-    tickmarkPlacement = 'on',
-    lineWidth: xAxisLineWidth = 0,
-    ...xAxisProps
-  } = {},
-  yAxis: {
-    gridLineInterpolation = 'polygon',
-    lineWidth: yAxisLineWidth = 0,
-    min: yAxisMin = 0,
-    ...yAxisProps
-  } = {},
-
   ...userOptions
 }: SpiderChartProps): React.Node => {
   const chartRef = React.useRef(null);
-  const [chartWidth, setChartWidth] = React.useState(0);
-
-  React.useLayoutEffect(() => {
-    setChartWidth(chartRef.current?.chart.plotWidth);
-  }, []);
 
   const spiderSeries = series.map((seriesItem, index) => ({
     ...seriesItem,
@@ -111,7 +92,6 @@ export const SpiderChart = ({
   return (
     <ChartWrapper
       title={cardTitle}
-      //$FlowFixMe[incompatible-type]
       ref={chartRef}
       customExportOptions={customExportOptions}
       classNames={wrapperClassNames}

package/lib/components/index.js

@@ -168,6 +168,17 @@ Object.keys(_ConditionalWrapper).forEach(function (key) {
     }
   });
 });
+var _DateRangePicker = require("./DateRangePicker");
+Object.keys(_DateRangePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateRangePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateRangePicker[key];
+    }
+  });
+});
 var _Dialog = require("./Dialog");
 Object.keys(_Dialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -15,6 +15,7 @@ export * from './Chip';
 export * from './CircularLoader';
 export * from './CollapsibleCard';
 export * from './ConditionalWrapper';
+export * from './DateRangePicker';
 export * from './Dialog';
 export * from './Dropdown';
 export * from './EmptyState';

package/lib/types/charts.js.flow

@@ -58,6 +58,7 @@ export type AxisOptions = {
     margin?: number,
     style: ?CSSObject,
   },
+  type?: string,
 };
 
 export type BreadcrumbsOptions = {

package/lib/utils/charts/charts.js

@@ -64,6 +64,9 @@ const commonChartOptions = {
     },
     symbolHeight: 8,
     enabled: true
+  },
+  xAxis: {
+    type: 'category'
   }
 };
 exports.commonChartOptions = commonChartOptions;

package/lib/utils/charts/charts.js.flow

@@ -81,6 +81,9 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     symbolHeight: 8,
     enabled: true,
   },
+  xAxis: {
+    type: 'category',
+  },
 };
 
 export const mergeChartUserOptions = (

package/lib/utils/charts/columnChart.js

@@ -23,6 +23,7 @@ const getColumnChartOptions = () => ({
     symbolWidth: 18
   },
   xAxis: {
+    ..._charts.commonChartOptions.xAxis,
     labels: {
       style: _helpers.xAxisLabelStyle
     },

package/lib/utils/charts/columnChart.js.flow

@@ -28,6 +28,7 @@ export const getColumnChartOptions = (): ChartOptions => ({
     symbolWidth: 18,
   },
   xAxis: {
+    ...commonChartOptions.xAxis,
     labels: {
       style: xAxisLabelStyle,
     },

package/lib/utils/charts/lineChart.js

@@ -24,6 +24,7 @@ const getLineChartOptions = () => ({
     symbolWidth: 18
   },
   xAxis: {
+    ..._charts.commonChartOptions.xAxis,
     labels: {
       style: _typography.formLabelSmall
     },

package/lib/utils/charts/lineChart.js.flow

@@ -27,6 +27,7 @@ export const getLineChartOptions = (): ChartOptions => ({
     symbolWidth: 18,
   },
   xAxis: {
+    ...commonChartOptions.xAxis,
     labels: {
       style: formLabelSmall,
     },