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

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

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

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

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

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

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

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

@@ -1,31 +0,0 @@
-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>
-    </>
-  )
-}