@spaced-out/ui-design-system 0.1.93 → 0.1.94-beta.1

package/lib/components/Menu/Menu.js.flow

@@ -1,5 +1,7 @@
 // @flow strict
 import * as React from 'react';
+// $FlowIssue[nonstrict-import] react-window
+import {FixedSizeList} from 'react-window';
 
 import {classify} from '../../utils/classify';
 import {
@@ -31,6 +33,12 @@ type OptionClassNames = $ReadOnly<{
   wrapper?: string,
 }>;
 
+export type Virtualization = $ReadOnly<{
+  enable: boolean,
+  itemHeight?: number,
+  menuHeight?: number,
+}>;
+
 export type MenuOption = {
   key: string,
   classNames?: OptionClassNames,
@@ -68,6 +76,8 @@ export type BaseMenuProps = {
   // A function that resolves the secondaryLabel for a MenuOption.
   // It takes a MenuOption as a parameter and returns either a string or a React Node.
   resolveSecondaryLabel?: (option: MenuOption) => string | React.Node,
+  // When virtualization is enabled, the MenuOptionButtons will be rendered only when they are present in the Menu's viewport
+  virtualization?: Virtualization,
 };
 
 export type MenuOptionTypes = {
@@ -95,6 +105,12 @@ export type RenderOptionProps = {
   searchText?: string,
 };
 
+const menuSizeMedium = 276,
+  menuSizeSmall = 228;
+
+const buttonSizeMedium = 40,
+  buttonSizeSmall = 32;
+
 const RenderOption = ({
   options,
   composeOptions,
@@ -103,7 +119,15 @@ const RenderOption = ({
   searchText = '',
   ...restProps
 }: RenderOptionProps): React.Node => {
-  const {allowSearch} = restProps;
+  const {
+    allowSearch,
+    size,
+    virtualization = {
+      enable: false,
+      menuHeight: null,
+      itemHeight: null,
+    },
+  } = restProps;
   if (options && Array.isArray(options) && options.length) {
     const optionsFiltered = !allowSearch
       ? options
@@ -112,6 +136,12 @@ const RenderOption = ({
       ? ''
       : getFilteredOptionsResultText(optionsFiltered);
 
+    const {
+      enable: isVirtualizationEnabled,
+      menuHeight,
+      itemHeight,
+    } = virtualization;
+
     return (
       <>
         {allowSearch && (
@@ -122,16 +152,44 @@ const RenderOption = ({
             {resultText}
           </FormLabelSmall>
         )}
-        {optionsFiltered.map((option, idx) => (
-          <React.Fragment key={option.key}>
-            <MenuOptionButton
-              option={option}
-              classNames={classNames}
-              {...restProps}
-              isLastItem={idx === optionsFiltered.length - 1}
-            />
-          </React.Fragment>
-        ))}
+        {virtualization && isVirtualizationEnabled ? (
+          <FixedSizeList
+            height={
+              menuHeight || (size === 'medium' ? menuSizeMedium : menuSizeSmall)
+            }
+            itemSize={
+              itemHeight ||
+              (size === 'medium' ? buttonSizeMedium : buttonSizeSmall)
+            }
+            itemCount={optionsFiltered.length}
+          >
+            {({index: idx, style}) => {
+              const buttonOption = optionsFiltered[idx];
+              return (
+                <React.Fragment key={buttonOption.key}>
+                  <MenuOptionButton
+                    option={buttonOption}
+                    classNames={classNames}
+                    style={style}
+                    {...restProps}
+                    isLastItem={idx === optionsFiltered.length - 1}
+                  />
+                </React.Fragment>
+              );
+            }}
+          </FixedSizeList>
+        ) : (
+          optionsFiltered.map((option, idx) => (
+            <React.Fragment key={option.key}>
+              <MenuOptionButton
+                option={option}
+                classNames={classNames}
+                {...restProps}
+                isLastItem={idx === optionsFiltered.length - 1}
+              />
+            </React.Fragment>
+          ))
+        )}
       </>
     );
   }
@@ -248,9 +306,14 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
         width,
         isFluid = true,
         allowSearch,
+        virtualization = {
+          enable: false,
+          menuHeight: null,
+          itemHeight: null,
+        },
       } = props;
       const [searchText, setSearchText] = React.useState('');
-
+      const {menuHeight} = virtualization;
       return (
         <div
           className={classify(
@@ -262,7 +325,10 @@ export const Menu: React$AbstractComponent<MenuProps, HTMLDivElement> =
             },
             classNames?.wrapper,
           )}
-          style={{width}}
+          style={{
+            width,
+            maxHeight: menuHeight ? menuHeight + 'px' : '',
+          }}
           ref={ref}
         >
           {allowSearch && (

package/lib/components/Menu/MenuOptionButton.js

@@ -30,7 +30,8 @@ const MenuOptionButton = props => {
     isLastItem,
     onTabOut,
     resolveLabel,
-    resolveSecondaryLabel
+    resolveSecondaryLabel,
+    style
   } = props;
   const {
     key,
@@ -79,6 +80,7 @@ const MenuOptionButton = props => {
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight
     }, classNames?.option, optionClassNames?.wrapper),
+    style: style,
     disabled: menuDisabled || disabled,
     onClick: e => onSelect && onSelect(option, e),
     autoFocus: selectedOption?.key === key

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -17,6 +17,7 @@ export type MenuOptionProps = {
   ...BaseMenuProps,
   option: MenuOption,
   isLastItem?: boolean,
+  style?: mixed,
 };
 
 export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
@@ -35,6 +36,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     onTabOut,
     resolveLabel,
     resolveSecondaryLabel,
+    style,
   } = props;
   const {
     key,
@@ -97,6 +99,7 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
         classNames?.option,
         optionClassNames?.wrapper,
       )}
+      style={style}
       disabled={menuDisabled || disabled}
       onClick={(e) => onSelect && onSelect(option, e)}
       autoFocus={selectedOption?.key === key}

package/lib/components/SpiderChart/SpiderChart.js

@@ -27,6 +27,7 @@ if (!!_highchartsMore.default && !!_highcharts.default && typeof _highchartsMore
 }
 const SpiderChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -54,6 +55,7 @@ const SpiderChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     customExportOptions: customExportOptions,

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

@@ -8,6 +8,7 @@ import highChartsMore from 'highcharts/highcharts-more';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
+import type {DataOptionsType} from '../../types/charts';
 import {
   getDataVizColor,
   getSpiderChartOptions,
@@ -36,32 +37,21 @@ type ClassNames = $ReadOnly<{
 
 type SpiderSeriesItem = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type SpiderChartProps = {
+  isLoading?: boolean,
   classNames?: ClassNames,
   cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
   headerActions?: React.Node,
   series: Array<SpiderSeriesItem>,
-  legend: {...},
-  xAxis: {
-    categories: Array<string>,
-    tickmarkPlacement: string,
-    lineWidth: number,
-    ...
-  },
-  yAxis: {
-    gridLineInterpolation: 'circle' | 'polygon',
-    lineWidth: 0,
-    min: 0,
-    ...
-  },
   ...
 };
 
 export const SpiderChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -91,6 +81,7 @@ export const SpiderChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       customExportOptions={customExportOptions}

package/lib/components/StickyBar/StickyBar.module.css

@@ -1,13 +1,13 @@
 @value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
 @value (sizeFluid) from '../../styles/variables/_size.css';
-@value (spaceLarge, spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
 
 .wrapper {
   display: flex;
   width: sizeFluid;
   align-items: center;
   justify-content: space-between;
-  padding: spaceMedium spaceLarge;
+  padding: spaceMedium spaceMedium;
   gap: spaceXSmall;
   background: colorBackgroundTertiary;
 }

package/lib/types/charts.js.flow

@@ -25,12 +25,13 @@ export type ChartOptions = {
   tooltip?: Tooltip,
   xAxis?: AxisOptions,
   yAxis?: AxisOptions,
+  zAxis?: AxisOptions,
   drilldown?: Drilldown,
   legend?: LegendOptionsType,
   plotOptions?: PlotOptionsType,
   series?: Array<SeriesOptionsType>,
   subtitle?: {
-    useHTML: true,
+    useHTML: boolean,
     text?: string,
     verticalAlign: 'middle',
     align: string,
@@ -41,6 +42,8 @@ export type ChartOptions = {
     center: [string, string],
     size: string,
   },
+  credits?: Credits,
+  legend?: Legend,
   ...
 };
 
@@ -103,7 +106,13 @@ export type CSSObject = {
   ...
 };
 
-export type DataOptionsType = {y: number, name: string, color: string, ...};
+export type DataOptionsType = {
+  y: number,
+  name: string,
+  color: string,
+  drilldown?: string,
+  ...
+};
 
 export type SeriesOptionsType = {
   id?: string,
@@ -150,3 +159,39 @@ export type Tooltip = {
   shared?: boolean,
   ...
 };
+
+export type Legend = {
+  align?: 'left' | 'center' | 'right',
+  alignColumns?: boolean,
+  backgroundColor?: string,
+  borderColor?: string,
+  borderRadius?: number,
+  borderWidth?: number,
+  className?: string,
+  enabled?: boolean,
+  floating?: boolean,
+  itemDistance?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  itemMarginBottom?: number,
+  labelFormat?: string,
+  layout?: 'horizontal' | 'vertical' | 'proximate',
+  margin?: number,
+  maxHeight?: number,
+  padding?: number,
+  reversed?: boolean,
+  x?: number,
+  y?: number,
+  ...
+};
+
+export type Credits = {
+  enabled?: boolean,
+  href?: string,
+  position?: {
+    align?: 'right' | 'left',
+    verticalAlign?: 'bottom' | 'top',
+    x?: number,
+    y?: number,
+  },
+};

package/lib/utils/charts/charts.js

@@ -4,10 +4,12 @@ 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");
+var _ChartTooltipModule = _interopRequireDefault(require("../../components/Charts/ChartTooltip.module.css"));
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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;
@@ -45,7 +47,11 @@ const commonChartOptions = {
     backgroundColor: _color.colorTooltipFill,
     useHTML: true,
     outside: true,
-    ..._Charts.tooltipTheme
+    headerFormat: `<span class="${_typographyModule.default.bodySmall} ${_ChartTooltipModule.default.tooltipHeader}">{point.key}</span>`,
+    pointFormat: `<span class=${_ChartTooltipModule.default.tooltipPoint}>
+        <span style="background-color:{point.color};" class=${_ChartTooltipModule.default.indicatorCircle}></span>
+        <span class="${_ChartTooltipModule.default.tooltipContent} ${_typographyModule.default.bodyMedium}"> {series.name}: {point.y}</span>
+      </span>`
   },
   drilldown: {
     breadcrumbs: {
@@ -57,7 +63,6 @@ const commonChartOptions = {
     }
   },
   legend: {
-    useHTML: true,
     itemStyle: {
       ..._typography.formLabelSmall,
       paddingTop: '1px'

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

@@ -1,6 +1,5 @@
 // @flow strict
 
-import {tooltipTheme} from '../../components/Charts';
 import {
   colorDataViz1,
   colorDataViz2,
@@ -18,6 +17,9 @@ import type {ChartOptions} from '../../types/charts';
 import {deepMerge} from './helpers';
 import {formLabelSmall, subTitleExtraSmall} from './typography';
 
+import css from '../../components/Charts/ChartTooltip.module.css';
+import typographyCss from '../../styles/typography.module.css';
+
 
 export const DATA_VIZ_COLORS = [
   colorDataViz1,
@@ -64,7 +66,11 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     backgroundColor: colorTooltipFill,
     useHTML: true,
     outside: true,
-    ...tooltipTheme,
+    headerFormat: `<span class="${typographyCss.bodySmall} ${css.tooltipHeader}">{point.key}</span>`,
+    pointFormat: `<span class=${css.tooltipPoint}>
+        <span style="background-color:{point.color};" class=${css.indicatorCircle}></span>
+        <span class="${css.tooltipContent} ${typographyCss.bodyMedium}"> {series.name}: {point.y}</span>
+      </span>`,
   },
   drilldown: {
     breadcrumbs: {
@@ -76,7 +82,6 @@ export const commonChartOptions: $Shape<ChartOptions> = {
     },
   },
   legend: {
-    useHTML: true,
     itemStyle: {...formLabelSmall, paddingTop: '1px'},
     symbolHeight: 8,
     enabled: true,

package/lib/utils/charts/donutChart.js

@@ -26,21 +26,16 @@ const rightLegendColumn = {
   // take it as 10% of width as left margin
   width: `${LEGEND_WIDTH * 90}%`
 };
-exports.rightLegendColumn = rightLegendColumn;
-const commonLegendOption = _charts.commonChartOptions.legend;
 
 /**
  * This function modifies the the common chart behavior to donut chart default behavior.
  * It will not take userPassed option into account.
  */
-
+exports.rightLegendColumn = rightLegendColumn;
 const getDonutChartOptions = _ref => {
   let {
     legend,
-    defaultCenterHTML,
-    subtitleSize,
-    centerTextX,
-    tooltip
+    defaultCenterHTML
   } = _ref;
   const legendOption = (0, _helpers.deepMerge)(_charts.commonChartOptions.legend, legend);
   const isLegendEnabled = legendOption.enabled;

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

@@ -1,27 +1,14 @@
 // @flow strict
 
-import type {
-  ChartOptions,
-  LegendOptionsType,
-  Tooltip,
-} from '../../types/charts';
+import type {ChartOptions, LegendOptionsType} from '../../types/charts';
 
 import {commonChartOptions} from './charts';
 import {deepMerge} from './helpers';
 
 
-type DonutChartDataType = {
-  name?: string,
-  color?: string,
-  y?: number,
-};
-
 type DonutChartPropsType = {
   legend?: LegendOptionsType,
   defaultCenterHTML?: string,
-  subtitleSize?: string,
-  centerTextX?: number,
-  tooltip?: Tooltip,
 };
 
 /**
@@ -44,8 +31,6 @@ export const rightLegendColumn = {
   width: `${LEGEND_WIDTH * 90}%`,
 };
 
-const commonLegendOption = commonChartOptions.legend;
-
 /**
  * This function modifies the the common chart behavior to donut chart default behavior.
  * It will not take userPassed option into account.
@@ -54,11 +39,7 @@ const commonLegendOption = commonChartOptions.legend;
 export const getDonutChartOptions = ({
   legend,
   defaultCenterHTML,
-  subtitleSize,
-  centerTextX,
-  tooltip,
-}: //$FlowFixMe[prop-missing]
-DonutChartPropsType): ChartOptions => {
+}: DonutChartPropsType): ChartOptions => {
   const legendOption = deepMerge(commonChartOptions.legend, legend);
   const isLegendEnabled = legendOption.enabled;
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.93",
+  "version": "0.1.94-beta.1",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -50,7 +50,8 @@
     "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
     "moment-timezone": "^0.5.45",
-    "react-dropzone": "^14.2.3"
+    "react-dropzone": "^14.2.3",
+    "react-window": "^1.8.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",