@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/common/components/accountfilter/AccountFilterOptions.tsx

@@ -0,0 +1,263 @@
+import React, { useMemo } from 'react'
+
+import Button from '@mui/material/Button'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListSubheader from '@mui/material/ListSubheader'
+import ListItemText from '@mui/material/ListItemText'
+import Popover from '@mui/material/Popover'
+import Stack from '@mui/material/Stack'
+import CheckBox from '@mui/material/Checkbox'
+import { AccountsIcon, P } from '@kyper/mui'
+import { setupMappedAccounts } from '../../utils/AccountFilter'
+import type { Account } from '../../types/Account'
+import type { MappedAccount, MappedAccounts, MappedOptions } from '../../utils/AccountFilter'
+import { buildDynamicCopy } from '../../utils'
+
+export type AccountFilterOptionsCopy = {
+  accountTypeAccounts: string
+  cancelButton: string
+  filterButton: string
+  filterButtonAria: string
+  selectAllAccounts: string
+  toggleAccountTypeAccounts: string
+  unselectAllAccounts: string
+  zeroStateButton: string
+  zeroStateDescription: string
+  zeroStateTitle: string
+}
+
+interface AccountFilterOptionsProps {
+  accounts: Account[]
+  copy: AccountFilterOptionsCopy
+  accountFilterButtonEl: HTMLButtonElement | null
+  onAccountClick: (account: MappedAccount) => void
+  onAccountGroupClick: (
+    accountType: string,
+    mappedAccounts: MappedAccounts,
+    allGroupedAccountsSelected: boolean,
+  ) => void
+  onCancelClick: () => void
+  onConnectAccountClick: () => void
+  onFilterClick: () => void
+  selectedOptions: MappedOptions
+  setSelectedOptions: (value: React.SetStateAction<MappedOptions>) => void
+  handleClose: () => void
+  showAccountNumbers: boolean
+}
+
+export const AccountFilterOptions: React.FC<AccountFilterOptionsProps> = ({
+  accounts,
+  accountFilterButtonEl,
+  copy,
+  onAccountClick,
+  onAccountGroupClick,
+  onCancelClick,
+  onConnectAccountClick,
+  onFilterClick,
+  selectedOptions,
+  setSelectedOptions,
+  handleClose,
+  showAccountNumbers,
+}) => {
+  const mappedAccounts = useMemo(() => setupMappedAccounts(accounts), [accounts])
+  const shouldShowZeroState = accounts.length < 1
+  const isOpen = Boolean(accountFilterButtonEl)
+
+  const isAllChecked = Object.values(selectedOptions).every((value) => Boolean(value))
+
+  return (
+    <Popover
+      anchorEl={accountFilterButtonEl}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'left',
+      }}
+      onClose={handleClose}
+      open={isOpen}
+      sx={{ maxHeight: 400, maxWidth: shouldShowZeroState ? '100%' : 300 }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'left',
+      }}
+    >
+      {shouldShowZeroState ? (
+        <Stack
+          sx={{
+            alignItems: 'center',
+            flexDirection: 'column',
+            padding: 16,
+            textAlign: 'center',
+            width: 320,
+            maxWidth: '100%',
+          }}
+        >
+          <AccountsIcon size={32} />
+          <P bold={true} mt={12}>
+            {copy.zeroStateTitle}
+          </P>
+          <P mt={12}>{copy.zeroStateDescription}</P>
+          <Button onClick={onConnectAccountClick}>{copy.zeroStateButton}</Button>
+        </Stack>
+      ) : (
+        <form onSubmit={handleClose}>
+          <List
+            className="mx-cmn-account-options"
+            dense={true}
+            id="filter_accounts"
+            sx={{
+              overflow: 'auto',
+              maxHeight: 300,
+              minWidth: 268,
+              '& .MuiFormControlLabel-root': {
+                m: 4,
+                borderRadius: 1,
+                width: '100%',
+                '&:hover': {
+                  bgcolor: 'background.default',
+                },
+                '&:focus-within': {
+                  outline: '2px solid rgba(82, 138, 224, 0.8)',
+                  outlineOffset: '2px',
+                },
+                '& .MuiFormControlLabel-label': {
+                  fontSize: 13,
+                },
+              },
+            }}
+          >
+            <ListItem disableGutters={true} disablePadding={true}>
+              <FormControlLabel
+                control={
+                  <CheckBox
+                    checked={isAllChecked}
+                    data-ui-test={`checked-${isAllChecked}`}
+                    disableRipple={true}
+                    onChange={() => {
+                      const updatedOptions: MappedOptions = {}
+
+                      Object.keys(selectedOptions).forEach((key) => {
+                        updatedOptions[key] = !isAllChecked
+                      })
+                      setSelectedOptions(updatedOptions)
+                    }}
+                    size="small"
+                    sx={{
+                      '&.Mui-focusVisible': {
+                        outline: 'none',
+                        boxShadow: 'none',
+                      },
+                    }}
+                  />
+                }
+                label={isAllChecked ? copy.unselectAllAccounts : copy.selectAllAccounts}
+              />
+            </ListItem>
+            {Object.keys(mappedAccounts).map((accountType) => {
+              const groupedAccounts = mappedAccounts[accountType]
+              const allGroupedAccountsSelected = groupedAccounts.every(
+                (account: MappedAccount) => selectedOptions[account.guid],
+              )
+
+              return (
+                <ListItem disableGutters={true} disablePadding={true} key={accountType}>
+                  <List
+                    aria-label={buildDynamicCopy(copy.accountTypeAccounts, accountType) as string}
+                    className="mx-cmn-account-options-group"
+                    dense={true}
+                    subheader={
+                      <ListSubheader disableGutters={true}>
+                        <ListItemButton
+                          aria-label={
+                            buildDynamicCopy(copy.toggleAccountTypeAccounts, accountType) as string
+                          }
+                          aria-pressed={allGroupedAccountsSelected}
+                          disableGutters={true}
+                          onClick={() =>
+                            onAccountGroupClick(
+                              accountType,
+                              mappedAccounts,
+                              allGroupedAccountsSelected,
+                            )
+                          }
+                          sx={{
+                            paddingLeft: 12,
+                            minHeight: 40,
+                            justifyContent: 'left',
+                          }}
+                        >
+                          <ListItemText
+                            primary={accountType}
+                            primaryTypographyProps={{ variant: 'XSmall', fontWeight: 'bold' }}
+                          />
+                        </ListItemButton>
+                      </ListSubheader>
+                    }
+                    sx={{ overflow: 'auto', width: '100%' }}
+                  >
+                    {groupedAccounts.map((account: MappedAccount) => {
+                      const isSelected = selectedOptions[account.guid]
+                      const label = `${account.name}${
+                        showAccountNumbers && account.accountNumber
+                          ? ` *${account.accountNumber.slice(-4)}`
+                          : ''
+                      }`
+
+                      return (
+                        <ListItem
+                          className="mx-cmn-account-options-container"
+                          disableGutters={true}
+                          disablePadding={true}
+                          key={account.guid}
+                        >
+                          <FormControlLabel
+                            control={
+                              <CheckBox
+                                checked={isSelected}
+                                data-ui-test={`checked-${isSelected}`}
+                                disableRipple={true}
+                                id={account.guid}
+                                onChange={() => {
+                                  onAccountClick(account)
+                                }}
+                                size="small"
+                                sx={{
+                                  '&.Mui-focusVisible': {
+                                    outline: 'none',
+                                    boxShadow: 'none',
+                                  },
+                                }}
+                              />
+                            }
+                            label={label}
+                          />
+                        </ListItem>
+                      )
+                    })}
+                  </List>
+                </ListItem>
+              )
+            })}
+          </List>
+          <Stack direction="row" justifyContent="flex-end" padding={12} spacing={16} width="100%">
+            <Button onClick={onCancelClick} variant="outlined">
+              {copy.cancelButton}
+            </Button>
+            <Button
+              aria-label={copy.filterButtonAria}
+              color="primary"
+              onClick={onFilterClick}
+              variant="contained"
+            >
+              {copy.filterButton}
+            </Button>
+          </Stack>
+        </form>
+      )}
+    </Popover>
+  )
+}
+
+AccountFilterOptions.displayName = 'AccountFilterOptions'

package/src/common/components/accountfilter/index.ts

@@ -0,0 +1 @@
+export { default as AccountFilter } from './AccountFilter'

package/src/common/components/barchart/Bar.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { css, keyframes } from '@mxenabled/cssinjs'
+
+import { Text, useTokens } from '@kyper/mui'
+
+interface BarProps {
+  ariaLabel?: string
+  color: string
+  height: number
+  index: number
+  label: string
+  onClick?: (index: number) => void
+  selectedIndex?: number
+  value: number
+}
+
+/**
+ * The Bar component is what displays the colored (optionally clickable) bar
+ *
+ * @param ariaLabel OPTIONAL aria label used on the bar
+ * @param color The color of the bar
+ * @param height The pixel height of the bar
+ * @param index The index of the bar
+ * @param label The label to use above (on positive bars) or below (on negative bars)
+ * @param onClick OPTIONAL function to call if the bar is clicked
+ * @param selectedIndex OPTIONAL indicates the selected bar
+ * @param value Value representing the bar
+ */
+const Bar: React.FC<BarProps> = ({
+  ariaLabel,
+  color,
+  height,
+  index,
+  label,
+  onClick,
+  selectedIndex,
+  value,
+}) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens, color, height)
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (onClick && (event.key === ' ' || event.key === 'Enter')) {
+      onClick(index)
+    }
+  }
+
+  const labelColor =
+    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'
+
+  const BarLabel = () => (
+    <Text
+      aria-hidden={true}
+      bold={selectedIndex === index}
+      className="mx-cmn-bar-text"
+      color={labelColor}
+      component="div"
+      variant="Small"
+    >
+      {label}
+    </Text>
+  )
+
+  return (
+    <div className={`mx-cmn-bar-container ${styles} ${value < 0 ? 'mx-cmn-negative' : ''}`}>
+      {/* Display the value on top for positive values */}
+      {value >= 0 && <BarLabel />}
+
+      <div
+        aria-label={ariaLabel}
+        className={`mx-cmn-bar ${onClick ? 'mx-cmn-clickable' : ''} ${
+          value < 0 ? 'mx-cmn-bar-negative' : ''
+        }`}
+        onClick={onClick ? () => onClick?.(index) : undefined}
+        onKeyDown={handleKeyDown}
+        role={ariaLabel ? 'button' : undefined}
+        tabIndex={ariaLabel ? 0 : undefined}
+      />
+
+      {/* Display the value on bottom for negative values */}
+      {value < 0 && <BarLabel />}
+    </div>
+  )
+}
+
+const getStyles = (tokens: any, color: string, height: number) => {
+  const frameName = `expandBar-${Math.round(height)}`
+  const expandAnimation = keyframes(frameName, { from: { height: 0 }, to: { height } })
+
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-end',
+    height: '100%',
+    '&.mx-cmn-negative': {
+      justifyContent: 'flex-start',
+    },
+    '& .mx-cmn-bar': {
+      animationDelay: '.5s',
+      animationDuration: '1s',
+      animationFillMode: 'forwards',
+      animationName: expandAnimation,
+      animationTimingFunction: tokens.Easing.Default,
+      backgroundColor: color,
+      borderRadius: `${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px 0 0`,
+      maxHeight: height,
+    },
+    '& .mx-cmn-bar-negative': {
+      borderRadius: `0 0 ${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px`,
+      marginTop: -tokens.Spacing.XTiny,
+    },
+    '& .mx-cmn-bar-text': {
+      display: 'flex',
+      justifyContent: 'center',
+      marginBottom: tokens.Spacing.Tiny,
+      marginTop: tokens.Spacing.Tiny,
+      whiteSpace: 'nowrap',
+      width: '100%',
+    },
+  })
+}
+
+export default Bar

package/src/common/components/barchart/BarChart.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+
+import { useTokens } from '@kyper/mui'
+
+import Legend from './Legend'
+import BarColumn from './BarColumn'
+import {
+  getAverageLineHeight,
+  getSectionHeight,
+  rangeReducer,
+  sumReducer,
+  valueReducer,
+} from './Util'
+
+export type BarChartData = {
+  ariaLabel: string
+  label: string
+  value: number
+}
+
+export interface BarChartProps {
+  average?: number
+  barWidth?: number | string
+  color: string
+  data: BarChartData[]
+  height: number
+  legendLabelAverage: string
+  legendLabelMain: string
+  onBarClick?: (index: number) => void
+  selectedIndex?: number
+  valueFormatter?: (value: number) => string
+}
+
+/**
+ * BarChart component to display a vertical bar chart given an array of data
+ *
+ * @param average OPTIONAL custom average not based on average or all value
+ * @param barWidth OPTIONAL pixel or percentage width of bars
+ * @param color Color of the bars
+ * @param data An array of chart data. Chart data must contain and aria label, label and value.
+ * @param height Height in pixels of the chart
+ * @param legendLabelAverage Label to use on legend for the average value
+ * @param legendLabelMain Label to use on the legend for the data
+ * @param onBarClick OPTIONAL function to call if bar is clicked
+ * @param selectedIndex OPTIONAL indicates the selected bar
+ * @param valueFormatter OPTIONAL function to call to format the value displayed with the bars
+ */
+const BarChart: React.FC<BarChartProps> = ({
+  average,
+  barWidth = '8%',
+  color,
+  data,
+  height,
+  legendLabelAverage,
+  legendLabelMain,
+  onBarClick,
+  selectedIndex,
+  valueFormatter = (value: number) => `${value}`,
+}) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens)
+
+  const values = data.reduce(valueReducer, [])
+  const avg = average !== undefined ? average : values.reduce(sumReducer, 0) / values.length
+  const max = Math.max(...values)
+  const min = Math.min(...values)
+  const range = values.reduce(rangeReducer, 0)
+
+  const hasTop = max >= 0
+  const hasBottom = min < 0
+  const topHeight = getSectionHeight(hasTop, hasBottom, height)
+  const bottomHeight = getSectionHeight(hasBottom, hasTop, height)
+  const averageLineHeight = getAverageLineHeight(avg, max, min, topHeight || bottomHeight)
+
+  const getBarColor = (index: number) => {
+    if (selectedIndex === undefined || index === selectedIndex) {
+      return color
+    }
+    return `${color}80`
+  }
+
+  const EmptyColumn = () => (
+    <BarColumn
+      averageLineHeight={averageLineHeight}
+      bottomHeight={bottomHeight}
+      color={''}
+      range={range}
+      topHeight={topHeight}
+      value={0}
+      width={undefined}
+    />
+  )
+
+  return (
+    <div className={`mx-cmn-bar-chart ${styles}`}>
+      <div className="mx-cmn-chart-container">
+        <EmptyColumn />
+        {data.map((d, index) => (
+          <React.Fragment key={`column-${index}`}>
+            <BarColumn
+              ariaLabel={d.ariaLabel}
+              averageLineHeight={averageLineHeight}
+              bottomHeight={bottomHeight}
+              color={getBarColor(index)}
+              index={index}
+              onClick={onBarClick}
+              range={range}
+              selectedIndex={selectedIndex}
+              topHeight={topHeight}
+              value={d.value}
+              valueLabel={valueFormatter(d.value)}
+              width={barWidth}
+              xAxisLabel={d.label}
+            />
+            <EmptyColumn />
+          </React.Fragment>
+        ))}
+      </div>
+      <Legend color={color} labelAverage={legendLabelAverage} labelMain={legendLabelMain} />
+    </div>
+  )
+}
+
+const getStyles = (tokens: any) =>
+  css({
+    '& .mx-cmn-chart-container': {
+      alignItems: 'flex-end',
+      display: 'flex',
+      justifyContent: 'space-evenly',
+      marginTop: tokens.Spacing.Large,
+      marginBottom: tokens.Spacing.Medium,
+    },
+  })
+
+export default BarChart

package/src/common/components/barchart/BarColumn.tsx

@@ -0,0 +1,150 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import Bar from './Bar'
+
+interface BarColumnProps {
+  ariaLabel?: string
+  averageLineHeight: number
+  bottomHeight: number
+  color: string
+  index?: number
+  onClick?: (index: number) => void
+  range: number
+  selectedIndex?: number
+  topHeight: number
+  value: number
+  valueLabel?: string
+  width?: number | string
+  xAxisLabel?: string
+}
+
+/**
+ * The BarColumn component represents a single vertical slice of the bar chart.  It contains from top to bottom
+ * the positive section, which will only display a bar if value > 0, the zero line, the average line, negative
+ * section, which will only display a bar if value < 0 and the X-Axis label.
+ *
+ * @param ariaLabel OPTIONAL aria label used to label the bar
+ * @param averageLineHeight the pixel height above/below the zero line for the dashed average line
+ * @param bottomHeight the height of the bottom (negative) section
+ * @param color the color of the bar
+ * @param index OPTIONAL index of the bar (Only used when bar is clickable)
+ * @param onClick OPTIONAL function to call if the bar is clicked
+ * @param range
+ * @param selectedIndex OPTIONAL indicates the selected bar
+ * @param topHeight the pixel height of the top (positvie section)
+ * @param value the value for the bar
+ * @param valueLabel OPTIONAL string value to use for the bar
+ * @param width OPTIONAL pixel or percentage width of the bar
+ * @param xAxisLabel label for the X-Axis
+ */
+const BarColumn: React.FC<BarColumnProps> = ({
+  ariaLabel,
+  averageLineHeight,
+  bottomHeight,
+  color,
+  index = -1,
+  onClick,
+  range,
+  selectedIndex,
+  topHeight,
+  value,
+  valueLabel = '',
+  width,
+  xAxisLabel = '',
+}) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens, width)
+
+  const topBarHeight = (value / range) * topHeight
+  const bottomBarHeight = (Math.abs(value) / range) * bottomHeight
+  const xAxisColor =
+    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'
+
+  return (
+    <div className={`mx-cmn-barchart-bar-column ${styles}`}>
+      {/* Top (Positive) Chart Area */}
+      <div style={{ height: topHeight }}>
+        {/* Only display the bar here if it has a positive value */}
+        {value >= 0 && (
+          <Bar
+            ariaLabel={ariaLabel}
+            color={color}
+            height={topBarHeight}
+            index={index}
+            label={valueLabel}
+            onClick={onClick}
+            selectedIndex={selectedIndex}
+            value={value}
+          />
+        )}
+      </div>
+
+      {/* Zero Line */}
+      <div className="mx-cmn-zero-line" />
+
+      {/* Average Line - Only display if average is not 0 */}
+      {averageLineHeight !== 0 && (
+        <div className="mx-cmn-chart-average" style={{ bottom: averageLineHeight }} />
+      )}
+
+      {/* Bottom (Negative) Chart Area */}
+      <div style={{ height: bottomHeight }}>
+        {/* Only display the bar here if it has a negative value */}
+        {value < 0 && (
+          <Bar
+            ariaLabel={ariaLabel}
+            color={color}
+            height={bottomBarHeight}
+            index={index}
+            label={valueLabel}
+            onClick={onClick}
+            value={value}
+          />
+        )}
+      </div>
+
+      {/* X-Axis label */}
+      <div
+        className={`mx-cmn-bar-label ${onClick ? 'mx-cmn-clickable' : ''}`}
+        onClick={onClick ? () => onClick(index) : undefined}
+      >
+        <Text bold={selectedIndex === index} color={xAxisColor} variant="Small">
+          {xAxisLabel}
+        </Text>
+      </div>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any, width: number | string | undefined) =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: width === undefined ? 1 : 0,
+    width,
+    '& .mx-cmn-chart-average': {
+      borderTop: `${tokens.Spacing.XTiny}px dotted ${tokens.Color.Neutral500}`,
+      position: 'relative',
+      marginRight: tokens.Spacing.XTiny,
+    },
+    '& .mx-cmn-zero-line': {
+      borderBottom: '1px solid text.primary',
+      width: '100%',
+    },
+    '& .mx-cmn-bar-label': {
+      minHeight: tokens.Spacing.Medium,
+      maxHeight: tokens.Spacing.Medium,
+      marginBottom: tokens.Spacing.XSmall,
+      marginTop: tokens.Spacing.XSmall,
+      textAlign: 'center',
+      width: '100%',
+    },
+    '& .mx-cmn-clickable': {
+      cursor: 'pointer',
+    },
+  })
+
+export default BarColumn