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

package/src/common/components/charts/Donut.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { arc, selectAll, interpolateString } from 'd3'
+
+import Box from '@mui/material/Box'
+
+const INNER_RADIUS = 100
+const OUT_RADIUS = 140
+const SELECTION_RADIUS = 10
+
+export interface DonutData {
+  id: string
+  label?: string
+  color: string
+  value: number
+}
+
+export interface DonutProps {
+  data: DonutData[]
+  onClick?: (id: string) => void
+  selectedId?: string
+  size?: number
+}
+
+const Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({
+  data,
+  onClick,
+  selectedId,
+  size = 300,
+  children,
+}) => {
+  let offset = 0
+
+  React.useEffect(() => {
+    selectAll('.arc-outer')
+      .transition('roll')
+      .duration(500)
+      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))
+  }, [])
+
+  return (
+    <Box height={size} position="relative" width={size}>
+      <Box height="100%" padding={size / 3.75} width="100%">
+        {children}
+      </Box>
+      <svg
+        height={size}
+        style={{ position: 'absolute', top: 0, left: 0 }}
+        viewBox={`-150 -150 300 300`}
+        width={size}
+      >
+        <g>
+          {data.map((item) => {
+            const startAngle = offset
+            offset = offset + 2 * Math.PI * (item.value / 100)
+            const endAngle = offset
+
+            const segment = arc().cornerRadius(4)({
+              innerRadius: INNER_RADIUS,
+              outerRadius: OUT_RADIUS + (item.id === selectedId ? SELECTION_RADIUS : 0),
+              startAngle,
+              endAngle,
+              padAngle: 0.025,
+            }) as string
+
+            return (
+              <path
+                className="arc-outer"
+                d={segment}
+                fill={item.color}
+                key={item.id}
+                onClick={() => onClick?.(item.id)}
+                style={{ cursor: 'pointer' }}
+              />
+            )
+          })}
+        </g>
+      </svg>
+    </Box>
+  )
+}
+
+export default Donut

package/src/common/components/charts/LineChart.tsx

@@ -0,0 +1,204 @@
+import React, { CSSProperties } from 'react'
+
+import { useTheme } from '@mui/material/styles'
+
+import {
+  AllSeriesType,
+  AreaPlot,
+  BarPlot,
+  ChartsLegend,
+  ChartsReferenceLine,
+  ChartsXAxis,
+  ChartsYAxis,
+  LinePlot,
+  MarkPlot,
+  ResponsiveChartContainer,
+} from '@mui/x-charts'
+
+import { formatCurrency } from '../../utils'
+
+import { CustomMark, MarkHandlers } from './linechart/CustomMark'
+import { CustomLine } from './linechart/CustomLine'
+import CustomLegend from './linechart/CustomLegend'
+
+interface LineChartProps {
+  baseline?: string
+  // Because theme chart colors are typed string|undefined
+  colors: (string | undefined)[]
+  datasets: { x: string; y: number }[][]
+  height?: number
+  labels: string[]
+  margin?: { top?: number; right?: number; bottom?: number; left?: number }
+  markHandlers?: MarkHandlers
+  markStyles?: (markIndex: number) => CSSProperties
+  showArea?: boolean
+  showAverage?: boolean
+  showBars?: boolean
+  showMarkLabel?: boolean
+  useCustomMark?: boolean
+  valueFormatterString?: string
+  width?: number
+}
+
+export const LineChart: React.FC<LineChartProps> = ({
+  baseline = 'max',
+  colors,
+  datasets,
+  height,
+  labels,
+  margin,
+  markHandlers,
+  markStyles,
+  showBars = false,
+  showArea = false,
+  showAverage = false,
+  showMarkLabel = false,
+  useCustomMark = false,
+  valueFormatterString = '0,0',
+  width,
+}) => {
+  const theme = useTheme()
+
+  // Data for the X axis
+  const xData = datasets.flat().map((item) => item.x)
+  const yData = datasets.flat().map((item) => item.y)
+
+  const average = Math.round(yData.reduce((value, total) => total + value, 0) / yData.length)
+
+  // Used for the min and max Y axis values
+  const yMin = Math.floor(Math.min(...yData) / 100) * 100
+  const yMax = Math.ceil(Math.max(...yData) / 100) * 100
+
+  const series = datasets.map((data, index) => {
+    return {
+      type: showBars ? 'bar' : 'line',
+      curve: 'linear',
+      color: showBars ? theme.palette.chart?.chart6 : (colors[index] ?? theme.palette.primary.main),
+      data: data.map((item) => item.y),
+      area: showArea,
+      baseline: baseline,
+      showMark: true,
+      label: labels[index],
+      valueFormatter: (value: number) => formatCurrency(value || 0, valueFormatterString),
+    }
+  })
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <ResponsiveChartContainer
+        height={height}
+        margin={margin}
+        series={series as AllSeriesType[]}
+        sx={{
+          p: 4,
+          '& .MuiBarLabel-root': {
+            fontSize: 10,
+            fontWeight: 600,
+          },
+          '& .MuiAreaElement-root': {
+            opacity: 0.15,
+          },
+        }}
+        width={width}
+        xAxis={[{ data: xData, scaleType: showBars ? 'band' : 'point' }]}
+        yAxis={[
+          {
+            min: yMin,
+            max: yMax || 100,
+            colorMap: showArea
+              ? {
+                  type: 'continuous',
+                  min: yMin,
+                  max: yMax,
+                  color: [theme.palette.background.paper, colors[0] ?? theme.palette.primary.main],
+                }
+              : undefined,
+            valueFormatter: (value) => formatCurrency(value, valueFormatterString),
+          },
+        ]}
+      >
+        {/** Area plot provides gradiant below the line **/}
+        {/* Note: Must be above the LinePlot for some style rules to work */}
+        <AreaPlot />
+
+        {/** Line plot provides the data line **/}
+        <LinePlot
+          slots={
+            showArea && series.length < 2
+              ? {
+                  line: (props) => (
+                    <CustomLine {...props} lineColor={colors[0] ?? theme.palette.primary.main} />
+                  ),
+                }
+              : undefined
+          }
+        />
+
+        {/** Mark plot provides the circles **/}
+        <MarkPlot
+          slots={
+            useCustomMark
+              ? {
+                  mark: (props) => {
+                    return (
+                      <CustomMark
+                        handlers={markHandlers}
+                        showLabel={showMarkLabel}
+                        style={markStyles?.(props.dataIndex) ?? {}}
+                        yData={yData}
+                        {...props}
+                      />
+                    )
+                  },
+                }
+              : undefined
+          }
+        />
+
+        <BarPlot
+          barLabel={(item) => (Number(item.value) > 0 ? `$${item.value}` : null)}
+          borderRadius={10}
+        />
+
+        {/** Provides the X axis line and values **/}
+        <ChartsXAxis disableLine={true} disableTicks={true} />
+
+        {/** Provides the Y axis values **/}
+        <ChartsYAxis disableLine={true} disableTicks={true} />
+
+        {/** Provides the average line **/}
+        {showAverage && (
+          <ChartsReferenceLine
+            lineStyle={{
+              stroke: theme.palette.grey[700],
+              strokeDasharray: '10, 8',
+              strokeWidth: 2,
+            }}
+            y={average}
+          />
+        )}
+
+        {/** Provides the legend for the chart **/}
+        {!showAverage && (
+          <ChartsLegend
+            position={{ horizontal: 'left', vertical: 'top' }}
+            slotProps={{
+              legend: {
+                labelStyle: { fontSize: 12 },
+                itemMarkHeight: 10,
+                itemMarkWidth: 10,
+              },
+            }}
+          />
+        )}
+      </ResponsiveChartContainer>
+      {showAverage && (
+        <CustomLegend
+          average={average}
+          series={series}
+          style={{ position: 'absolute', top: 16, left: 16 }}
+        />
+      )}
+    </div>
+  )
+}

package/src/common/components/charts/StackedLineChart.tsx

@@ -0,0 +1,292 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import { useTheme } from '@mui/material/styles'
+import { LineSeriesType, LineChart, HighlightItemData } from '@mui/x-charts'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../constants'
+import { formatCurrency } from '../../utils'
+import { useScreenSize } from '../../hooks'
+
+import CustomAreaTooltip from './stackedlinechart/CustomAreaTooltip'
+import { CustomPointTooltip } from './stackedlinechart/CustomPointTooltip'
+import { CustomLegend } from './stackedlinechart/CustomLegend'
+
+type DataPoint = { x: Date; y: number }
+type Dataset = DataPoint[]
+
+interface StackedLineChartData {
+  top_level_category_guid: string
+  category_guid: string
+  category_name: string
+  category_color: string
+  dataset: Dataset
+}
+
+interface StackedLineChartProps {
+  stackedDatasets: StackedLineChartData[]
+  unstackedDatasets?: StackedLineChartData[]
+  onHoverArea?: (category: string) => void
+  onHoverPoint?: (category: string) => void
+  onHoverLegend?: (category: string) => void
+  onClickLegend?: (category: string) => void
+  height?: number
+  width?: number
+}
+
+export const StackedLineChart: React.FC<StackedLineChartProps> = ({
+  onHoverArea,
+  onHoverPoint,
+  onHoverLegend,
+  onClickLegend,
+  stackedDatasets,
+  unstackedDatasets = [],
+  height,
+  width,
+}) => {
+  const theme = useTheme()
+  const { isMobile } = useScreenSize()
+  const chartContainerRef = React.useRef<HTMLDivElement>(null)
+
+  const [hoveredLegend, setHoveredLegend] = React.useState<string | null>(null)
+  const [hoverState, setHoverState] = React.useState({
+    hoveredSeriesId: null as string | null,
+    hoveredAreaData: null as DataPoint[] | null,
+    isAreaHovered: false,
+    cursorPos: { x: 0, y: 0 },
+  })
+
+  const { hoveredSeriesId, hoveredAreaData, isAreaHovered, cursorPos } = hoverState
+  const showAreaTooltip = isAreaHovered && hoveredSeriesId && hoveredAreaData
+  const showPointTooltip = !showAreaTooltip
+
+  const datasets = [...stackedDatasets, ...unstackedDatasets]
+  const xTicks = datasets[0]?.dataset.length ?? 0
+  const xData = datasets.flatMap((data) => data.dataset.map((d) => d.x))
+  const yData = datasets.flatMap((data) => data.dataset.map((d) => d.y))
+
+  // Calculate max cumulative heights for stacked datasets
+  const cumulativeHeights = stackedDatasets[0]?.dataset?.map((_, i) =>
+    stackedDatasets.reduce((sum, dataset) => sum + dataset.dataset[i]?.y || 0, 0),
+  ) ?? [0]
+  const stackedMax = Math.max(...cumulativeHeights)
+  const unstackedMax = Math.max(
+    ...unstackedDatasets.flatMap((data) => data.dataset.map((d) => d.y)),
+  )
+
+  const yMin = Math.floor(Math.min(...yData) / 100) * 100
+  const yMax = Math.ceil(Math.max(stackedMax, unstackedMax) / 100) * 100
+
+  const stackedSeries = stackedDatasets.map((data, index) => ({
+    id: `stacked-${index}`,
+    guid: data.category_guid,
+    top_level_guid: data.top_level_category_guid,
+    area: true,
+    color: stackedDatasets[index].category_color ?? theme.palette.primary.main,
+    data: data.dataset.map((d) => d.y),
+    label: stackedDatasets[index].category_name,
+    stack: 'total',
+    type: 'line',
+    highlightScope: { highlight: 'item' },
+    valueFormatter: (value: number) => formatCurrency(value, '0,0'),
+  }))
+
+  const unstackedSeries = unstackedDatasets.map((data, index) => ({
+    id: `unstacked-${index}`,
+    guid: data.category_guid,
+    top_level_guid: data.top_level_category_guid,
+    area: false,
+    color: data.category_color,
+    data: data.dataset.map((d) => d.y),
+    label: data.category_name,
+    type: 'line',
+    valueFormatter: (value: number) => formatCurrency(value, '0,0'),
+  }))
+
+  const series = [...stackedSeries, ...unstackedSeries]
+  const guids = [
+    ...stackedSeries.map(({ guid, top_level_guid }) => ({
+      guid,
+      top_level_guid,
+    })),
+    ...unstackedSeries.map(({ guid, top_level_guid }) => ({
+      guid,
+      top_level_guid,
+    })),
+  ]
+
+  const getSeriesCategoryGuids = (seriesId: string) => {
+    const isStacked = seriesId.startsWith('stacked-')
+    const dataset = isStacked
+      ? stackedDatasets[parseInt(seriesId.split('-')[1])]
+      : unstackedDatasets[parseInt(seriesId.split('-')[1])]
+    return {
+      guid: dataset?.category_guid,
+      topLevelGuid: dataset?.top_level_category_guid,
+    }
+  }
+
+  const handleHoverLegend = (guid: string | null) => {
+    setHoveredLegend(guid)
+    onHoverLegend?.(guid ?? '')
+  }
+
+  const handleClickLegend = (guid: string | null) => {
+    onClickLegend?.(guid ?? '')
+  }
+
+  const handleClickArea = () => {
+    const clickedSeriesGuid = getSeriesCategoryGuids(String(hoveredSeriesId)).guid
+    if (clickedSeriesGuid) onClickLegend?.(clickedSeriesGuid)
+  }
+
+  const handleHighlightChange = (highlightedItem: HighlightItemData | null) => {
+    const hoveredSeriesId = String(highlightedItem?.seriesId)
+    const hoveredSeriesGuid = getSeriesCategoryGuids(hoveredSeriesId).guid
+    const hoveredSeries = series.find((s) => s.id === hoveredSeriesId)
+    const isPointHovered = hoveredSeries && highlightedItem?.dataIndex !== undefined
+    const isAreaHovered = hoveredSeries && highlightedItem?.dataIndex === undefined
+
+    if (isPointHovered) {
+      setHoverState({
+        hoveredSeriesId: hoveredSeriesId,
+        hoveredAreaData: null,
+        isAreaHovered: false,
+        cursorPos,
+      })
+      onHoverPoint?.(hoveredSeriesGuid)
+    } else if (isAreaHovered) {
+      const hoveredDataPoints =
+        hoveredSeries?.data.map((yValue, index) => ({
+          x: xData[index],
+          y: yValue,
+        })) ?? []
+
+      setHoverState({
+        hoveredSeriesId: hoveredSeriesId,
+        hoveredAreaData: hoveredDataPoints,
+        isAreaHovered: true,
+        cursorPos,
+      })
+      onHoverArea?.(hoveredSeriesGuid)
+    } else {
+      setHoverState({
+        hoveredSeriesId: null,
+        hoveredAreaData: null,
+        isAreaHovered: false,
+        cursorPos,
+      })
+    }
+  }
+
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    setHoverState((prev) => ({
+      ...prev,
+      cursorPos: {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+      },
+    }))
+  }
+
+  const customStyles = {
+    p: 4,
+    '& .MuiBarLabel-root': {
+      fontSize: 10,
+      fontWeight: 600,
+    },
+    '& .MuiAreaElement-root': {
+      opacity: 0.4,
+      transition: 'opacity 0.3s ease',
+    },
+    '& .MuiAreaElement-root:hover': {
+      opacity: 1,
+    },
+    '& [class*="MuiLineElement-series-unstacked-"]': {
+      strokeWidth: 3,
+    },
+    ...(hoveredLegend &&
+      stackedSeries.reduce<Record<string, any>>((acc, _, index) => {
+        const selector = `.MuiAreaElement-series-stacked-${index}`
+        acc[selector] = {
+          opacity: stackedSeries[index].guid === hoveredLegend ? 0.9 : 0.2,
+        }
+        return acc
+      }, {})),
+  }
+
+  return (
+    <Box onMouseMove={handleMouseMove} ref={chartContainerRef} style={{ position: 'relative' }}>
+      <Stack
+        direction={{ xs: 'column', md: 'column' }}
+        spacing={{ xs: 0, md: 4 }}
+        sx={{ width: '100%', position: 'relative' }}
+      >
+        <LineChart
+          height={height || 400}
+          margin={{ bottom: 50 }}
+          onAreaClick={handleClickArea}
+          onHighlightChange={handleHighlightChange}
+          series={series as LineSeriesType[]}
+          skipAnimation={true}
+          slotProps={{
+            legend: {
+              hidden: true,
+            },
+          }}
+          slots={{
+            itemContent: (props) => {
+              return showPointTooltip && hoveredSeriesId ? (
+                <CustomPointTooltip
+                  categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}
+                  xData={xData}
+                  {...props}
+                />
+              ) : null
+            },
+          }}
+          sx={customStyles}
+          tooltip={{
+            trigger: showPointTooltip ? 'item' : 'none',
+          }}
+          width={width}
+          xAxis={[
+            {
+              data: xData,
+              scaleType: 'time',
+              valueFormatter: (value: Date) =>
+                formatDate(value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),
+              tickNumber: xTicks, // How many ticks to show on the x-axis
+            },
+          ]}
+          yAxis={[
+            {
+              min: yMin,
+              max: yMax || 100,
+            },
+          ]}
+        />
+        <CustomLegend
+          categoryGuids={guids}
+          hoveredLegend={hoveredLegend}
+          onClickLegend={handleClickLegend}
+          onHoverLegend={handleHoverLegend}
+          sx={{ px: isMobile ? 0 : 24 }}
+        />
+
+        {showAreaTooltip && (
+          <CustomAreaTooltip
+            categoryGuids={getSeriesCategoryGuids(hoveredSeriesId)}
+            chartContainerRef={chartContainerRef}
+            cursorPosition={cursorPos}
+            hoveredAreaData={hoveredAreaData.map((point) => ({
+              ...point,
+              x: formatDate(point.x, DATE_FORMATS_INTL.MONTH_SHORT_YEAR),
+            }))}
+          />
+        )}
+      </Stack>
+    </Box>
+  )
+}

package/src/common/components/charts/StatusBar.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+
+export type StatusBarData = {
+  color: string
+  percentage: string
+}
+
+interface StatusBarProps {
+  data: StatusBarData[]
+  height?: number
+}
+
+const StatusBar: React.FC<StatusBarProps> = ({ data, height = 8 }) => {
+  const borderRadius = `${height / 4}px`
+
+  return (
+    <Stack
+      bgcolor="grey.300"
+      borderRadius={borderRadius}
+      direction="row"
+      gap={2}
+      height={height}
+      width="100%"
+    >
+      {data.map((item, index) => (
+        <Box
+          bgcolor={item.color}
+          borderRadius={borderRadius}
+          height={height}
+          key={index}
+          width={item.percentage}
+        />
+      ))}
+    </Stack>
+  )
+}
+
+export default StatusBar

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

@@ -0,0 +1,4 @@
+export { default as Donut, type DonutData } from './Donut'
+export { LineChart } from './LineChart'
+export { StackedLineChart } from './StackedLineChart'
+export { default as StatusBar, type StatusBarData } from './StatusBar'

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

@@ -0,0 +1,49 @@
+import { observer } from 'mobx-react-lite'
+
+import { Box, Stack } from '@mui/material'
+import { Text } from '@kyper/mui'
+
+import { formatCurrency } from '../../../utils'
+import { useGlobalCopyStore } from '../../../../common'
+
+const CustomLegend = ({
+  series,
+  average,
+  style,
+}: {
+  average: number
+  series: any[]
+  style: any
+}) => {
+  const { common: commonCopy } = useGlobalCopyStore()
+  return (
+    <Stack style={{ flexDirection: 'row', gap: 25, ...style }}>
+      {series.map((s, index) => (
+        <Stack key={index} style={{ alignItems: 'center', flexDirection: 'row' }}>
+          <Box
+            sx={{
+              width: 10,
+              height: 10,
+              backgroundColor: s.color,
+              marginRight: 8,
+            }}
+          />
+          <Text variant="Small">{s.label}</Text>
+        </Stack>
+      ))}
+      <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>
+        <Text bold={true} sx={{ marginRight: 8 }} variant="Small">
+          – –
+        </Text>
+        <Text variant="Small">
+          {commonCopy.average}{' '}
+          <Text bold={true} variant="Small">
+            {formatCurrency(average, '0,0')}
+          </Text>
+        </Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+export default observer(CustomLegend)

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

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { AnimatedLineProps } from '@mui/x-charts'
+
+interface CustomLineProps extends AnimatedLineProps {
+  lineColor?: string
+}
+
+export const CustomLine: React.FC<CustomLineProps> = (props) => {
+  return (
+    <>
+      <clipPath id={props.id}>
+        <rect height={props.height} width={props.width} x="0" y="0" />
+      </clipPath>
+      <g>
+        <path
+          cursor="unset"
+          d={props.d}
+          style={{
+            strokeWidth: 2,
+            strokeLinejoin: 'round',
+            fill: 'none',
+            stroke: props.lineColor ? props.lineColor : props.stroke,
+            transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
+            opacity: 1,
+          }}
+        />
+      </g>
+    </>
+  )
+}