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

package/src/common/components/charts/linechart/CustomMark.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import { useTheme } from '@mui/material/styles'
+import { MarkElementProps } from '@mui/x-charts'
+
+import { formatCurrency } from '../../../utils'
+
+export type MarkHandlers = {
+  onMarkClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, dataIndex: number) => void
+  onMouseEnter?: (dataIndex: number) => void
+  onMouseLeave?: () => void
+}
+
+interface CustomMarkProps extends MarkElementProps {
+  handlers?: MarkHandlers
+  showLabel: boolean
+  yData: number[]
+}
+
+export const CustomMark: React.FC<CustomMarkProps> = (props) => {
+  const theme = useTheme()
+  const showLabel = props.showLabel
+  const styles = props.style
+  const xNumber = Number(props.x)
+  const yNumber = Number(props.y)
+
+  const handleMarkClick = props.handlers?.onMarkClick
+  const handleMouseEnter = props.handlers?.onMouseEnter
+  const handleMouseLeave = props.handlers?.onMouseLeave
+
+  return (
+    <>
+      {showLabel && (
+        <text
+          fill={theme.palette.text.primary}
+          style={{ fontSize: theme.typography.Small?.fontSize }}
+          x={xNumber - 5}
+          y={yNumber - 15}
+        >
+          {formatCurrency(props.yData[props.dataIndex], '0,0')}
+        </text>
+      )}
+      <path
+        cursor={handleMarkClick ? 'pointer' : 'unset'}
+        d="M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0"
+        height="20px"
+        onClick={(event) => {
+          handleMarkClick?.(event, props.dataIndex)
+        }}
+        onMouseEnter={() => {
+          handleMouseEnter?.(props.dataIndex)
+        }}
+        onMouseLeave={() => {
+          handleMouseLeave?.()
+        }}
+        style={{
+          fill: styles?.fill ? styles.fill : theme.palette.background.paper,
+          stroke: styles?.stroke ? styles.stroke : theme.palette.primary.main,
+          strokeWidth: 2,
+          transform: `translate(${props.x}px, ${props.y}px)`,
+          transformOrigin: `${props.x}px, ${props.y}px`,
+          filter: styles?.filter ? styles.filter : 'none',
+        }}
+        width="20px"
+      />
+    </>
+  )
+}

package/src/common/components/charts/stackedlinechart/CategoryIconLabel.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import { CategoryIcon, Text } from '@kyper/mui'
+
+import { buildDynamicCopy } from '../../../utils'
+import { useCategoryStore, useGlobalCopyStore } from '../../../context'
+
+export const CategoryIconLabel: React.FC<{
+  categoryGuid: string
+  topLevelCategoryGuid: string
+}> = ({ categoryGuid, topLevelCategoryGuid }) => {
+  const { categories: copy } = useGlobalCopyStore()
+  const { getCategoryName } = useCategoryStore()
+  const categoryName = getCategoryName(categoryGuid)
+
+  return (
+    <Stack alignItems="center" direction="column" gap="8" justifyContent="center" mb={4}>
+      <Box
+        aria-label={buildDynamicCopy(copy.category_icon_label_aria, categoryName) as string}
+        mb={4}
+        role="img"
+      >
+        <CategoryIcon categoryGuid={topLevelCategoryGuid} />
+      </Box>
+      <Text variant="Body">{categoryName}</Text>
+    </Stack>
+  )
+}

package/src/common/components/charts/stackedlinechart/CustomAreaTooltip.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Divider from '@mui/material/Divider'
+import Grid from '@mui/material/Grid'
+import { Text } from '@kyper/mui'
+import { useTheme } from '@mui/material/styles'
+
+import { CategoryIconLabel } from './CategoryIconLabel'
+import { CurrencyText } from '../../CurrencyText'
+
+type DataPoint = { x: string | number; y: number }
+
+const CustomAreaTooltip: React.FC<{
+  categoryGuids: { guid: string; topLevelGuid: string }
+  hoveredAreaData: DataPoint[]
+  cursorPosition: { x: number; y: number }
+  chartContainerRef: React.RefObject<HTMLDivElement>
+}> = ({
+  categoryGuids: { guid, topLevelGuid },
+  hoveredAreaData,
+  cursorPosition,
+  chartContainerRef,
+}) => {
+  const theme = useTheme()
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [adjustedPos, setAdjustedPos] = useState({ x: cursorPosition.x, y: cursorPosition.y })
+
+  useEffect(() => {
+    const adjustTooltipPosition = () => {
+      const tooltipEl = tooltipRef.current
+      const chartEl = chartContainerRef.current
+
+      if (!tooltipEl || !chartEl) return
+
+      const tooltipRect = tooltipEl.getBoundingClientRect()
+      const containerRect = chartEl.getBoundingClientRect()
+
+      let newX = cursorPosition.x
+      let newY = cursorPosition.y
+
+      // If the tooltip overflows the right or left edge
+      if (newX + tooltipRect.width * 2 > containerRect.right) {
+        // Move the tooltip to the left of the cursor
+        newX = cursorPosition.x - tooltipRect.width
+      } else if (newX - tooltipRect.width < containerRect.left) {
+        // Move the tooltip to the right of the cursor
+        newX = cursorPosition.x
+      }
+
+      // If the tooltip overflows the bottom edge
+      if (newY + tooltipRect.height * 2 > containerRect.bottom) {
+        // Move the tooltip to the top of the cursor
+        newY = cursorPosition.y - tooltipRect.height
+      }
+
+      setAdjustedPos({ x: newX, y: newY })
+    }
+
+    adjustTooltipPosition()
+  }, [cursorPosition, chartContainerRef])
+
+  if (!hoveredAreaData) return null
+
+  const seriesSum = hoveredAreaData.reduce((sum, dataPoint) => sum + dataPoint.y, 0)
+
+  return (
+    <Card
+      ref={tooltipRef}
+      sx={{
+        position: 'absolute',
+        top: adjustedPos.y,
+        left: adjustedPos.x,
+        width: 250,
+        pointerEvents: 'none',
+      }}
+    >
+      <CardContent>
+        <Box alignItems="center" display="flex" flexDirection="column">
+          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />
+          <Text variant="Small">{`${hoveredAreaData.length}-month total`}</Text>
+          <CurrencyText amount={seriesSum} bold={true} formatString="0,0" variant="body2" />
+        </Box>
+
+        <Divider sx={{ my: 16, width: '100%' }} />
+
+        <Grid container={true}>
+          {hoveredAreaData.map((dataPoint, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && index % 3 === 0 && <Divider sx={{ my: 16, width: '100%' }} />}
+              <Grid item={true} xs={4}>
+                <Box alignItems="center" display="flex" flexDirection="column">
+                  <Text color={theme.palette.text.secondary} variant="XSmall">
+                    {dataPoint.x}
+                  </Text>
+                  <CurrencyText
+                    amount={dataPoint.y}
+                    bold={true}
+                    formatString="0,0"
+                    variant="Body"
+                  />
+                </Box>
+              </Grid>
+            </React.Fragment>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default observer(CustomAreaTooltip)

package/src/common/components/charts/stackedlinechart/CustomLegend.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+import { Text } from '@kyper/mui'
+
+import { useScreenSize } from '../../../hooks'
+import { CategoryColors } from '../../../constants'
+import { useCategoryStore } from '../../../context'
+
+interface CustomLegendProps {
+  sx?: object
+  categoryGuids: { guid: string; top_level_guid: string }[]
+  hoveredLegend: string | null
+  onHoverLegend: (label: string | null) => void
+  onClickLegend: (label: string | null) => void
+}
+
+export const CustomLegend: React.FC<CustomLegendProps> = ({
+  sx,
+  categoryGuids,
+  hoveredLegend,
+  onHoverLegend,
+  onClickLegend,
+}) => {
+  const { isMobile } = useScreenSize()
+  const { getCategoryName } = useCategoryStore()
+
+  return (
+    <Stack direction="row" flexWrap="wrap" gap={isMobile ? 2 : 6} justifyContent="start" sx={sx}>
+      {categoryGuids.map(({ guid, top_level_guid }) => {
+        const isHovered = hoveredLegend === guid
+        const categoryColor = CategoryColors[guid]
+        const topLevelCategoryColor = CategoryColors[top_level_guid]
+        const baseBackground = categoryColor ?? topLevelCategoryColor ?? CategoryColors.default
+        const transparentBackground = baseBackground + '33'
+        const hoveredBackground = isHovered ? baseBackground : transparentBackground
+        const backgroundColor = hoveredLegend ? hoveredBackground : baseBackground
+
+        return (
+          <Button
+            key={guid}
+            onClick={() => onClickLegend(guid)}
+            onMouseEnter={() => onHoverLegend(guid)}
+            onMouseLeave={() => onHoverLegend(null)}
+            sx={{
+              color: 'text.primary',
+              fontWeight: 'normal',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              paddingX: 8,
+              paddingY: 4,
+              borderRadius: 1,
+              opacity: isHovered ? 1 : 0.7,
+            }}
+          >
+            <Box
+              sx={{
+                width: 16,
+                height: 16,
+                marginRight: isMobile ? 5 : 10,
+                borderRadius: '2px',
+                backgroundColor,
+              }}
+            />
+            <Text variant="Body">{getCategoryName(guid)}</Text>
+          </Button>
+        )
+      })}
+    </Stack>
+  )
+}

package/src/common/components/charts/stackedlinechart/CustomPointTooltip.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Box, Card, CardContent, useTheme } from '@mui/material'
+import { ChartsItemContentProps } from '@mui/x-charts'
+import { Text } from '@kyper/mui'
+
+import { CategoryIconLabel } from './CategoryIconLabel'
+import { CurrencyText } from '../../CurrencyText'
+import { DATE_FORMATS_INTL, formatDate } from '../../../constants'
+
+interface CustomPointTooltipProps extends ChartsItemContentProps<'line'> {
+  categoryGuids: { guid: string; topLevelGuid: string }
+  xData: Date[]
+}
+
+// Custom tooltip for hovering on line points
+export const CustomPointTooltip: React.FC<CustomPointTooltipProps> = ({
+  categoryGuids: { guid, topLevelGuid },
+  itemData: { dataIndex },
+  series,
+  xData,
+}) => {
+  const theme = useTheme()
+  const dataValue = series.data[dataIndex as number]
+  const dataDate = xData[dataIndex as number]
+
+  if (dataValue === undefined || !dataDate) return null
+
+  return (
+    <Card sx={{ pt: 4, px: 8 }}>
+      <CardContent>
+        <Box alignItems="center" display="flex" flexDirection="column">
+          <CategoryIconLabel categoryGuid={guid} topLevelCategoryGuid={topLevelGuid} />
+          <Text color={theme.palette.text.secondary} variant="Small">
+            {formatDate(dataDate, DATE_FORMATS_INTL.MONTH_SHORT_YEAR)}
+          </Text>
+          <CurrencyText amount={String(dataValue)} bold={true} formatString="0,0" variant="Body" />
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}

package/src/common/components/charts/stackedlinechart/utils.ts

@@ -0,0 +1,13 @@
+export const smoothData = (data: number[], smoothingFactor: number = 0.2) => {
+  const smoothedData: number[] = []
+  let prev = data[0] // start with the first value
+  smoothedData.push(prev)
+
+  for (let i = 1; i < data.length; i++) {
+    const smoothedValue = prev + (data[i] - prev) * smoothingFactor
+    smoothedData.push(smoothedValue)
+    prev = smoothedValue
+  }
+
+  return smoothedData
+}