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

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

@@ -1,68 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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
-}