@spaced-out/ui-design-system 0.1.86 → 0.1.87-beta.0

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -111,6 +111,22 @@ const colorSubMenuBackgroundDefault = '#1F1F36';
 exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
 const colorSubMenuStar = '#DFBD0D';
 exports.colorSubMenuStar = colorSubMenuStar;
+const colorDataViz1 = '#8dbaf8';
+exports.colorDataViz1 = colorDataViz1;
+const colorDataViz2 = '#b4a2e8';
+exports.colorDataViz2 = colorDataViz2;
+const colorDataViz3 = '#8bcfad';
+exports.colorDataViz3 = colorDataViz3;
+const colorDataViz4 = '#f0c48f';
+exports.colorDataViz4 = colorDataViz4;
+const colorDataViz5 = '#f297ad';
+exports.colorDataViz5 = colorDataViz5;
+const colorDataViz6 = '#B0F0E3';
+exports.colorDataViz6 = colorDataViz6;
+const colorDataViz7 = '#F5B8E1';
+exports.colorDataViz7 = colorDataViz7;
+const colorDataViz8 = '#F5EBB4';
+exports.colorDataViz8 = colorDataViz8;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';

package/lib/styles/variables/_color.js.flow

@@ -106,6 +106,22 @@ export const colorSubMenuBackgroundDefault = '#1F1F36';
 
 export const colorSubMenuStar = '#DFBD0D';
 
+export const colorDataViz1 = '#8dbaf8';
+
+export const colorDataViz2 = '#b4a2e8';
+
+export const colorDataViz3 = '#8bcfad';
+
+export const colorDataViz4 = '#f0c48f';
+
+export const colorDataViz5 = '#f297ad';
+
+export const colorDataViz6 = '#B0F0E3';
+
+export const colorDataViz7 = '#F5B8E1';
+
+export const colorDataViz8 = '#F5EBB4';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';

package/lib/styles/variables/_font.css

@@ -1,4 +1,4 @@
-@value fontFamilyCentra: "Centra No2";
+@value fontFamilyCentra: "Centra No 2";
 
 @value fontWeightBook: 400;
 

package/lib/styles/variables/_font.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = void 0;
 
-const fontFamilyCentra = '"Centra No2"';
+const fontFamilyCentra = '"Centra No 2"';
 exports.fontFamilyCentra = fontFamilyCentra;
 const fontWeightBook = '400';
 exports.fontWeightBook = fontWeightBook;

package/lib/styles/variables/_font.js.flow

@@ -1,6 +1,6 @@
 // @flow strict
 
-export const fontFamilyCentra = '"Centra No2"';
+export const fontFamilyCentra = '"Centra No 2"';
 
 export const fontWeightBook = '400';
 

package/lib/styles/variables/_size.css

@@ -54,6 +54,8 @@
 
 @value size160: 160px;
 
+@value size180: 180px;
+
 @value size228: 228px;
 
 @value size240: 240px;
@@ -76,12 +78,18 @@
 
 @value size500: 500px;
 
+@value size540: 540px;
+
 @value size580: 580px;
 
 @value size640: 640px;
 
+@value size660: 660px;
+
 @value size720: 720px;
 
+@value size880: 880px;
+
 @value size960: 960px;
 
 @value size1280: 1280px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -61,6 +61,8 @@ const size140 = '140px';
 exports.size140 = size140;
 const size160 = '160px';
 exports.size160 = size160;
+const size180 = '180px';
+exports.size180 = size180;
 const size228 = '228px';
 exports.size228 = size228;
 const size240 = '240px';
@@ -83,12 +85,18 @@ const size480 = '480px';
 exports.size480 = size480;
 const size500 = '500px';
 exports.size500 = size500;
+const size540 = '540px';
+exports.size540 = size540;
 const size580 = '580px';
 exports.size580 = size580;
 const size640 = '640px';
 exports.size640 = size640;
+const size660 = '660px';
+exports.size660 = size660;
 const size720 = '720px';
 exports.size720 = size720;
+const size880 = '880px';
+exports.size880 = size880;
 const size960 = '960px';
 exports.size960 = size960;
 const size1280 = '1280px';

package/lib/styles/variables/_size.js.flow

@@ -56,6 +56,8 @@ export const size140 = '140px';
 
 export const size160 = '160px';
 
+export const size180 = '180px';
+
 export const size228 = '228px';
 
 export const size240 = '240px';
@@ -78,12 +80,18 @@ export const size480 = '480px';
 
 export const size500 = '500px';
 
+export const size540 = '540px';
+
 export const size580 = '580px';
 
 export const size640 = '640px';
 
+export const size660 = '660px';
+
 export const size720 = '720px';
 
+export const size880 = '880px';
+
 export const size960 = '960px';
 
 export const size1280 = '1280px';

package/lib/types/charts.js.flow

@@ -0,0 +1,151 @@
+// @flow strict
+
+export type ChartOptions = {
+  chart?: {
+    polar?: boolean,
+    type?: string,
+    spacing?: Array<number>,
+    margin?: Array<number>,
+    style?: CSSObject,
+    ...
+  },
+  title?: {
+    text: string | null,
+  },
+  exporting?: {
+    buttons: {
+      contextButton: {
+        enabled: boolean,
+      },
+    },
+  },
+  credits?: {
+    enabled: boolean,
+  },
+  tooltip?: Tooltip,
+  xAxis?: AxisOptions,
+  yAxis?: AxisOptions,
+  drilldown?: Drilldown,
+  legend?: LegendOptionsType,
+  plotOptions?: PlotOptionsType,
+  series?: Array<SeriesOptionsType>,
+  subtitle?: {
+    useHTML: true,
+    text?: string,
+    verticalAlign: 'middle',
+    align: string,
+    style: CSSObject,
+    x?: number,
+  },
+  pane?: {
+    center: [string, string],
+    size: string,
+  },
+  ...
+};
+
+export type AxisOptions = {
+  categories?: Array<string>,
+  gridLineInterpolation?: 'circle' | 'polygon',
+  lineWidth?: number,
+  tickmarkPlacement?: string,
+  labels?: {
+    align?: string,
+    distance?: number,
+    style?: CSSObject,
+  },
+  title?: {
+    margin?: number,
+    style: ?CSSObject,
+  },
+};
+
+export type BreadcrumbsOptions = {
+  floating?: boolean,
+  style?: CSSObject,
+  ...
+};
+
+export type LegendOptionsType = {
+  layout?: string,
+  align?: string,
+  verticalAlign?: string,
+  itemMarginBottom?: number,
+  padding?: number,
+  itemStyle?: CSSObject,
+  enabled?: boolean,
+  symbolHeight?: number,
+  symbolWidth?: number,
+  ...
+};
+
+export type CSSObject = {
+  alignItems?: string,
+  color?: string,
+  display?: string,
+  fontFamily?: string,
+  fontSize?: string,
+  fontStyle?: string,
+  fontWeight?: string,
+  letterSpacing?: string,
+  lineHeight?: string,
+  margin?: number,
+  textAlign?: string,
+  minWidth?: string,
+  maxWidth?: string,
+  minHeight?: string,
+  maxHeight?: string,
+  alignContent?: string,
+  overflow?: string,
+  textOverflow?: string,
+  zIndex?: number,
+  ...
+};
+
+export type DataOptionsType = {y: number, name: string, color: string, ...};
+
+export type SeriesOptionsType = {
+  id?: string,
+  name?: string,
+  data: Array<DataOptionsType>,
+  ...
+};
+
+export type Drilldown = {
+  activeAxisLabelStyle?: CSSObject,
+  activeDataLabelStyle?: CSSObject,
+  series?: Array<SeriesOptionsType>,
+  breadcrumbs?: BreadcrumbsOptions,
+};
+
+export type PlotOptionsType = {
+  ['pie' | 'line']: {
+    innerSize: string,
+    allowPointSelect: boolean,
+    cursor: 'pointer',
+    dataLabels: {
+      enabled?: boolean,
+      distance?: number,
+      connectorColor?: string,
+    },
+    showInLegend: boolean,
+    center: [string, string],
+    size: string,
+    minSize?: number | string,
+    borderWidth: number,
+    borderRadius: number,
+    ...
+  },
+};
+
+export type Tooltip = {
+  useHTML?: boolean,
+  followPointer?: boolean,
+  backgroundColor?: string,
+  style?: CSSObject,
+  outside?: boolean,
+  headerFormat?: string,
+  pointFormat?: string,
+  shared?: boolean,
+  ...
+};

package/lib/utils/charts/charts.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeChartUserOptions = exports.getDataVizColor = exports.commonChartOptions = exports.breadcrumbStyle = exports.DATA_VIZ_COLORS = void 0;
+var _Charts = require("../../components/Charts");
+var _color = require("../../styles/variables/_color");
+var _helpers = require("./helpers");
+var _typography = require("./typography");
+
+const DATA_VIZ_COLORS = [_color.colorDataViz1, _color.colorDataViz2, _color.colorDataViz3, _color.colorDataViz4, _color.colorDataViz5, _color.colorDataViz6, _color.colorDataViz7, _color.colorDataViz8];
+exports.DATA_VIZ_COLORS = DATA_VIZ_COLORS;
+const getDataVizColor = dataIndex => {
+  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
+  return DATA_VIZ_COLORS[colorIndex];
+};
+exports.getDataVizColor = getDataVizColor;
+const breadcrumbStyle = {
+  ..._typography.subTitleExtraSmall,
+  color: _color.colorTextSecondary
+};
+exports.breadcrumbStyle = breadcrumbStyle;
+const commonChartOptions = {
+  chart: {
+    style: {
+      fontFamily: 'inherit'
+    }
+  },
+  title: {
+    text: null
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false
+      }
+    }
+  },
+  credits: {
+    enabled: false
+  },
+  tooltip: {
+    followPointer: false,
+    backgroundColor: _color.colorTooltipFill,
+    useHTML: true,
+    outside: true,
+    ..._Charts.tooltipTheme
+  },
+  drilldown: {
+    breadcrumbs: {
+      floating: true,
+      style: breadcrumbStyle,
+      buttonTheme: {
+        style: breadcrumbStyle
+      }
+    }
+  },
+  legend: {
+    useHTML: true,
+    itemStyle: {
+      ..._typography.formLabelSmall,
+      paddingTop: '1px'
+    },
+    symbolHeight: 8,
+    enabled: true
+  }
+};
+exports.commonChartOptions = commonChartOptions;
+const mergeChartUserOptions = (defaultoptions, userOptions) => (0, _helpers.deepMerge)(defaultoptions, userOptions);
+exports.mergeChartUserOptions = mergeChartUserOptions;

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

@@ -0,0 +1,89 @@
+// @flow strict
+
+import {tooltipTheme} from '../../components/Charts';
+import {
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+  colorTextSecondary,
+  colorTooltipFill,
+} from '../../styles/variables/_color';
+import type {ChartOptions} from '../../types/charts';
+
+import {deepMerge} from './helpers';
+import {formLabelSmall, subTitleExtraSmall} from './typography';
+
+
+export const DATA_VIZ_COLORS = [
+  colorDataViz1,
+  colorDataViz2,
+  colorDataViz3,
+  colorDataViz4,
+  colorDataViz5,
+  colorDataViz6,
+  colorDataViz7,
+  colorDataViz8,
+];
+
+export const getDataVizColor = (dataIndex: number): string => {
+  const colorIndex = dataIndex % DATA_VIZ_COLORS.length;
+  return DATA_VIZ_COLORS[colorIndex];
+};
+
+export const breadcrumbStyle = {
+  ...subTitleExtraSmall,
+  color: colorTextSecondary,
+};
+
+export const commonChartOptions: $Shape<ChartOptions> = {
+  chart: {
+    style: {
+      fontFamily: 'inherit',
+    },
+  },
+  title: {
+    text: null,
+  },
+  exporting: {
+    buttons: {
+      contextButton: {
+        enabled: false,
+      },
+    },
+  },
+  credits: {
+    enabled: false,
+  },
+  tooltip: {
+    followPointer: false,
+    backgroundColor: colorTooltipFill,
+    useHTML: true,
+    outside: true,
+    ...tooltipTheme,
+  },
+  drilldown: {
+    breadcrumbs: {
+      floating: true,
+      style: breadcrumbStyle,
+      buttonTheme: {
+        style: breadcrumbStyle,
+      },
+    },
+  },
+  legend: {
+    useHTML: true,
+    itemStyle: {...formLabelSmall, paddingTop: '1px'},
+    symbolHeight: 8,
+    enabled: true,
+  },
+};
+
+export const mergeChartUserOptions = (
+  defaultoptions: ChartOptions,
+  userOptions: ChartOptions,
+): ChartOptions => deepMerge(defaultoptions, userOptions);

package/lib/utils/charts/columnChart.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getColumnChartOptions = exports.columnPlotWidth = void 0;
+var _charts = require("./charts");
+var _helpers = require("./helpers");
+
+/**
+ * This function modifies the the common chart behavior to column chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+const getColumnChartOptions = () => ({
+  ..._charts.commonChartOptions,
+  chart: {
+    type: 'column'
+  },
+  legend: {
+    ..._charts.commonChartOptions.legend,
+    ..._helpers.bottomLegendRow,
+    symbolWidth: 18
+  },
+  xAxis: {
+    labels: {
+      style: _helpers.xAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.xAxisTitleStyle
+    }
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: _helpers.yAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.yAxisTitleStyle
+    }
+  },
+  drilldown: {
+    activeAxisLabelStyle: _helpers.activeLabelStyle,
+    activeDataLabelStyle: _helpers.activeLabelStyle,
+    breadcrumbs: {
+      floating: true
+    }
+  }
+});
+exports.getColumnChartOptions = getColumnChartOptions;
+const columnPlotWidth = 28;
+exports.columnPlotWidth = columnPlotWidth;

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

@@ -0,0 +1,59 @@
+// @flow strict
+
+import type {ChartOptions} from '../../types/charts';
+
+import {commonChartOptions} from './charts';
+import {
+  activeLabelStyle,
+  bottomLegendRow,
+  xAxisLabelStyle,
+  xAxisTitleStyle,
+  yAxisLabelStyle,
+  yAxisTitleStyle,
+} from './helpers';
+
+/**
+ * This function modifies the the common chart behavior to column chart default behavior.
+ * It will not take userPassed option into account.
+ */
+
+export const getColumnChartOptions = (): ChartOptions => ({
+  ...commonChartOptions,
+  chart: {
+    type: 'column',
+  },
+  legend: {
+    ...commonChartOptions.legend,
+    ...bottomLegendRow,
+    symbolWidth: 18,
+  },
+  xAxis: {
+    labels: {
+      style: xAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: xAxisTitleStyle,
+    },
+  },
+  yAxis: {
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: yAxisLabelStyle,
+    },
+    title: {
+      margin: 12,
+      style: yAxisTitleStyle,
+    },
+  },
+  drilldown: {
+    activeAxisLabelStyle: activeLabelStyle,
+    activeDataLabelStyle: activeLabelStyle,
+    breadcrumbs: {
+      floating: true,
+    },
+  },
+});
+
+export const columnPlotWidth = 28;