npm - @mx-cartographer/experiences - Versions diffs - 9.3.0-alpha.bb2 → 9.3.0 - Mend

@mx-cartographer/experiences 9.3.0-alpha.bb2 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (612) hide show

package/dist/finstrong/components/shared/DialScoreCard.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialScoreCard.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/DialScoreCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieArcProps, PieValueType } from '@mui/x-charts'\nimport { PieChart } from '@mui/x-charts/PieChart'\n\nimport { P } from '@mxenabled/mxui'\nimport { TrendingDown, TrendingUp, ArrowRightAlt } from '@mxenabled/mx-icons'\n\nimport { getMarkerXYCoordinates, radiansToDegrees } from '../../util/finstrongUtils'\n\nimport { CustomPieArc } from './CustomPieArc'\n\nexport interface DialScoreCardProps {\n arcRadius: number\n healthScore: number\n size: 'L' \| 'M' \| 'SM'\n dialScoreData: PieValueType[]\n minValue?: number\n maxValue?: number\n margin?: { top?: number; right?: number; left?: number; bottom?: number }\n markerColor?: string\n healthScoreStatus: string\n footerCenterContent?: string \| number\n footerLeftContent?: number\n footerRightContent?: number\n isFinacialStrengthGraph?: boolean\n}\nexport const DialScoreCard = ({\n arcRadius = 100,\n healthScore,\n size = 'L',\n dialScoreData,\n minValue = 0,\n maxValue = 100,\n margin,\n markerColor,\n healthScoreStatus,\n footerCenterContent,\n footerLeftContent,\n footerRightContent,\n isFinacialStrengthGraph = false,\n}: DialScoreCardProps) => {\n const theme = useTheme()\n const arcStartAngle = -Math.PI / 1.35\n const arcEndAngle = Math.PI / 1.35\n\n //finding the end angle of the filled(colored) arc i.e progressArc\n const totalAngularSpan = arcEndAngle - arcStartAngle\n\n const anglePerUnit = totalAngularSpan / (maxValue - minValue)\n const progressEndAngleOffset = (healthScore - minValue) * anglePerUnit\n const progressEndAngle = arcStartAngle + progressEndAngleOffset + 0.02 // Adding a small offset to avoid overlap with the next arc\n\n const thicknessRatio = size !== 'SM' ? 0.1 : 0.12\n const outterArcRadius = arcRadius\n const innerArcRadius = arcRadius * (1 - thicknessRatio)\n\n const chartDimenesions = outterArcRadius * 2 //width and height of the chart\n const centerX = chartDimenesions / 2\n const centerY = chartDimenesions / 2\n const markerRadius = (innerArcRadius + outterArcRadius) / 2\n const angleOffset =\n healthScore !== 25 && healthScore !== 50 && healthScore !== 75 && healthScore !== 100 ? 0 : 0.12 // Adjust the offset based on health score\n\n const [markerX, markerY] = getMarkerXYCoordinates(markerRadius, progressEndAngle, angleOffset)\n\n const unitsPerSegment = healthScore / 25\n\n const sizeMap = {\n L: { markerSize: 12, healthScoreFontSize: 64 },\n M: { markerSize: 8, healthScoreFontSize: 48 },\n SM: { markerSize: 3, healthScoreFontSize: 14 },\n }\n\n const chartMargin = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...margin,\n }\n const PercentageIcon = footerCenterContent === 0 ? ArrowRightAlt : TrendingDown\n const stroke = size !== 'SM' ? 3 : 1\n const padding = stroke * 4 // enough room for stroke\n const svgSize = sizeMap[size].markerSize * 2 + padding\n\n return (\n <Stack\n sx={{\n width: chartDimenesions,\n height: size === 'SM' ? chartDimenesions - 7 : chartDimenesions,\n position: 'relative',\n alignSelf: 'center',\n overflow: 'visible',\n }}\n >\n <PieChart\n height={size === 'SM' ? chartDimenesions - 7 : chartDimenesions}\n hideLegend={true}\n margin={chartMargin}\n series={[\n {\n data: dialScoreData,\n innerRadius: innerArcRadius,\n outerRadius: outterArcRadius,\n startAngle: Math.round(radiansToDegrees(arcStartAngle)), // Use Math.degrees to convert\n endAngle: Math.round(radiansToDegrees(arcEndAngle)), // Use Math.degrees to convert\n },\n ]}\n skipAnimation={true}\n slots={{\n pieArc: (props: PieArcProps) => (\n <CustomPieArc\n arcColor={props.color}\n arcRadius={arcRadius}\n arcStartAngle={arcStartAngle}\n centerX={centerX}\n centerY={centerY}\n dataIndex={props.dataIndex}\n dialScoreData={dialScoreData}\n innerArcRadius={innerArcRadius}\n isFinacialStrengthGraph={isFinacialStrengthGraph}\n outterArcRadius={outterArcRadius}\n progressEndAngle={progressEndAngle}\n totalAngularSpan={totalAngularSpan}\n unitsPerSegment={unitsPerSegment}\n />\n ),\n }}\n sx={{\n '& path': {\n stroke: 'none',\n },\n }}\n width={chartDimenesions}\n />\n\n {healthScore >= minValue && healthScore <= maxValue && (\n <svg\n height={svgSize}\n style={{\n position: 'absolute',\n left: centerX + markerX - sizeMap[size].markerSize - 5,\n top: centerY + markerY - sizeMap[size].markerSize - 5,\n overflow: 'visible',\n }}\n viewBox={`${centerX + markerX - sizeMap[size].markerSize - 5} ${centerY + markerY - sizeMap[size].markerSize - 5} ${svgSize} ${svgSize}`}\n width={svgSize}\n >\n <circle\n cx={centerX + markerX}\n cy={centerY + markerY}\n fill={theme.palette.common.white}\n r={sizeMap[size].markerSize}\n stroke={isFinacialStrengthGraph ? 'url(#arcGradient)' : markerColor}\n strokeWidth={stroke}\n />\n </svg>\n )}\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY}px`,\n left: `${centerX}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'center',\n }}\n >\n <Stack\n spacing={1}\n sx={{ alignItems: 'center', justifyContent: 'center', gap: size !== 'M' ? 10 : 3 }}\n >\n <P\n sx={{\n fontSize: sizeMap[size].healthScoreFontSize,\n lineHeight: size !== 'SM' ? '48px' : '100%',\n }}\n variant=\"h1\"\n >\n {healthScore}\n </P>\n {size !== 'SM' && (\n <P sx={{ fontWeight: 600 }} variant={size === 'L' ? 'body1' : 'body2'}>\n {healthScoreStatus}\n </P>\n )}\n </Stack>\n </Box>\n {footerCenterContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY * 2 * 0.83}px`,\n left: `${centerX}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'center',\n }}\n >\n {typeof footerCenterContent === 'number' ? (\n <Stack\n sx={{\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n mt: 24,\n }}\n >\n {footerCenterContent > 0 ? (\n <TrendingUp size={16} sx={{ color: 'success.main' }} />\n ) : (\n <PercentageIcon size={16} sx={{ color: 'text.secondary' }} />\n )}\n <P\n sx={{\n fontWeight: 600,\n color: footerCenterContent > 0 ? 'success.main' : 'text.secondary',\n }}\n variant=\"body1\"\n >\n {Math.abs(footerCenterContent)}\n </P>\n </Stack>\n ) : (\n <P sx={{ color: 'text.secondary' }} variant={'subtitle2'}>\n {footerCenterContent}\n </P>\n )}\n </Box>\n )}\n {/* Left Footer Content /}\n {footerLeftContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY 2 * 0.83}px`,\n left: `${centerX - centerX / 2}px`, // shift left from center\n transform: 'translate(-50%, -50%)',\n textAlign: 'left',\n }}\n >\n <P variant=\"body1\">{footerLeftContent}</P>\n </Box>\n )}\n\n {/* Right Footer Content /}\n {footerRightContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY 2 * 0.83}px`,\n left: `${centerX + centerX / 2}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'right',\n }}\n >\n <P variant=\"body1\">{footerRightContent}</P>\n </Box>\n )}\n </Stack>\n )\n}\n"],"mappings":";;;;;;;;;AA6BA,IAAa,KAAA,CAAiB,EAC5B,WAAA,IAAY,KACZ,aAAA,GACA,MAAA,IAAO,KACP,eAAA,GACA,UAAA,IAAW,GACX,UAAA,IAAW,KACX,QAAA,GACA,aAAA,GACA,mBAAA,GACA,qBAAA,GACA,mBAAA,GACA,oBAAA,GACA,yBAAA,IAA0B,GAAA,MACF;AACxB,QAAM,IAAQ,EAAS,GACjB,IAAgB,CAAC,KAAK,KAAK,MAC3B,IAAc,KAAK,KAAK,MAGxB,IAAmB,IAAc,GAEjC,IAAe,KAAoB,IAAW,IAE9C,IAAmB,KADO,IAAc,KAAY,IACQ,MAE5D,IAAiB,MAAS,OAAO,MAAM,MACvC,IAAkB,GAClB,IAAiB,KAAa,IAAI,IAElC,IAAmB,IAAkB,GACrC,IAAU,IAAmB,GAC7B,IAAU,IAAmB,GAK7B,CAAC,GAAS,CAAA,IAAW,GAJL,IAAiB,KAAmB,GAIM,GAF9D,MAAgB,MAAM,MAAgB,MAAM,MAAgB,MAAM,MAAgB,MAAM,IAAI,IAED,GAEvF,IAAkB,IAAc,IAEhC,IAAU;AAAA,IACd,GAAG;AAAA,MAAE,YAAY;AAAA,MAAI,qBAAqB;AAAA,IAAG;AAAA,IAC7C,GAAG;AAAA,MAAE,YAAY;AAAA,MAAG,qBAAqB;AAAA,IAAG;AAAA,IAC5C,IAAI;AAAA,MAAE,YAAY;AAAA,MAAG,qBAAqB;AAAA,IAAG;AAAA,EAC/C,GAEM,IAAc;AAAA,IAClB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,GAAG;AAAA,EACL,GACM,IAAiB,MAAwB,IAAI,IAAgB,GAC7D,IAAS,MAAS,OAAO,IAAI,GAC7B,IAAU,IAAS,GACnB,IAAU,EAAQ,CAAA,EAAM,aAAa,IAAI;AAE/C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ,MAAS,OAAO,IAAmB,IAAI;AAAA,MAC/C,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,cAPF;AAAA,MASE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,MAAS,OAAO,IAAmB,IAAI;AAAA,QAC/C,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ,CACN;AAAA,UACE,MAAM;AAAA,UACN,aAAa;AAAA,UACb,aAAa;AAAA,UACb,YAAY,KAAK,MAAM,EAAiB,CAAa,CAAC;AAAA,UACtD,UAAU,KAAK,MAAM,EAAiB,CAAW,CAAC;AAAA,QACpD,CACF;AAAA,QACA,eAAe;AAAA,QACf,OAAO,EACL,QAAA,CAAS,MACP,gBAAA,EAAC,GAAD;AAAA,UACE,UAAU,EAAM;AAAA,UACL,WAAA;AAAA,UACI,eAAA;AAAA,UACN,SAAA;AAAA,UACA,SAAA;AAAA,UACT,WAAW,EAAM;AAAA,UACF,eAAA;AAAA,UACC,gBAAA;AAAA,UACS,yBAAA;AAAA,UACR,iBAAA;AAAA,UACC,kBAAA;AAAA,UACA,kBAAA;AAAA,UACD,iBAAA;AAAA,QAClB,CAAA,EAEL;AAAA,QACA,IAAI,EACF,UAAU,EACR,QAAQ,OACV,EACF;AAAA,QACA,OAAO;AAAA,MACR,CAAA;AAAA,MAEA,KAAe,KAAY,KAAe,KACzC,gBAAA,EAAC,OAAD;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM,IAAU,IAAU,EAAQ,CAAA,EAAM,aAAa;AAAA,UACrD,KAAK,IAAU,IAAU,EAAQ,CAAA,EAAM,aAAa;AAAA,UACpD,UAAU;AAAA,QACZ;AAAA,QACA,SAAS,GAAG,IAAU,IAAU,EAAQ,CAAA,EAAM,aAAa,CAAA,IAAK,IAAU,IAAU,EAAQ,CAAA,EAAM,aAAa,CAAA,IAAK,CAAA,IAAW,CAAA;AAAA,QAC/H,OAAO;AAAA,kBAEP,gBAAA,EAAC,UAAD;AAAA,UACE,IAAI,IAAU;AAAA,UACd,IAAI,IAAU;AAAA,UACd,MAAM,EAAM,QAAQ,OAAO;AAAA,UAC3B,GAAG,EAAQ,CAAA,EAAM;AAAA,UACjB,QAAQ,IAA0B,sBAAsB;AAAA,UACxD,aAAa;AAAA,QACd,CAAA;AAAA,MACE,CAAA;AAAA,MAEP,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK,GAAG,CAAA;AAAA,UACR,MAAM,GAAG,CAAA;AAAA,UACT,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS;AAAA,UACT,IAAI;AAAA,YAAE,YAAY;AAAA,YAAU,gBAAgB;AAAA,YAAU,KAAK,MAAS,MAAM,KAAK;AAAA,UAAE;AAAA,oBAFnF,CAIE,gBAAA,EAAC,GAAD;AAAA,YACE,IAAI;AAAA,cACF,UAAU,EAAQ,CAAA,EAAM;AAAA,cACxB,YAAY,MAAS,OAAO,SAAS;AAAA,YACvC;AAAA,YACA,SAAQ;AAAA,sBAEP;AAAA,UACA,CAAA,GACF,MAAS,QACR,gBAAA,EAAC,GAAD;AAAA,YAAG,IAAI,EAAE,YAAY,IAAI;AAAA,YAAG,SAAS,MAAS,MAAM,UAAU;AAAA,sBAC3D;AAAA,UACA,CAAA,CAEA;AAAA;MACJ,CAAA;AAAA,MACJ,MAAwB,UACvB,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK,GAAG,IAAU,IAAI,IAAA;AAAA,UACtB,MAAM,GAAG,CAAA;AAAA,UACT,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,kBAEC,OAAO,KAAwB,WAC9B,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,IAAI;AAAA,UACN;AAAA,oBANF,CAQG,IAAsB,IACrB,gBAAA,EAAC,GAAD;AAAA,YAAY,MAAM;AAAA,YAAI,IAAI,EAAE,OAAO,eAAe;AAAA,UAAI,CAAA,IAEtD,gBAAA,EAAC,GAAD;AAAA,YAAgB,MAAM;AAAA,YAAI,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAAI,CAAA,GAE9D,gBAAA,EAAC,GAAD;AAAA,YACE,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,OAAO,IAAsB,IAAI,iBAAiB;AAAA,YACpD;AAAA,YACA,SAAQ;AAAA,sBAEP,KAAK,IAAI,CAAmB;AAAA,UAC5B,CAAA,CACE;AAAA,aAEP,gBAAA,EAAC,GAAD;AAAA,UAAG,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAAG,SAAS;AAAA,oBAC1C;AAAA,QACA,CAAA;AAAA,MAEF,CAAA;AAAA,MAGN,MAAsB,UACrB,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK,GAAG,IAAU,IAAI,IAAA;AAAA,UACtB,MAAM,GAAG,IAAU,IAAU,CAAA;AAAA,UAC7B,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UAAG,SAAQ;AAAA,oBAAS;AAAA,QAAqB,CAAA;AAAA,MACtC,CAAA;AAAA,MAIN,MAAuB,UACtB,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,UAAU;AAAA,UACV,KAAK,GAAG,IAAU,IAAI,IAAA;AAAA,UACtB,MAAM,GAAG,IAAU,IAAU,CAAA;AAAA,UAC7B,WAAW;AAAA,UACX,WAAW;AAAA,QACb;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UAAG,SAAQ;AAAA,oBAAS;AAAA,QAAsB,CAAA;AAAA,MACvC,CAAA;AAAA,IAEF;AAAA;AAEX"}
1	+ {"version":3,"file":"DialScoreCard.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/DialScoreCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieArcProps, PieValueType } from '@mui/x-charts'\nimport { PieChart } from '@mui/x-charts/PieChart'\n\nimport { P } from '@mxenabled/mxui'\nimport { TrendingDown, TrendingUp, ArrowRightAlt } from '@mxenabled/mx-icons'\n\nimport { getMarkerXYCoordinates, radiansToDegrees } from '../../util/finstrongUtils'\n\nimport { CustomPieArc } from './CustomPieArc'\n\nexport interface DialScoreCardProps {\n arcRadius: number\n healthScore: number\n size: 'L' \| 'M' \| 'SM'\n dialScoreData: PieValueType[]\n minValue?: number\n maxValue?: number\n margin?: { top?: number; right?: number; left?: number; bottom?: number }\n markerColor?: string\n healthScoreStatus: string\n footerCenterContent?: string \| number\n footerLeftContent?: number\n footerRightContent?: number\n isFinacialStrengthGraph?: boolean\n}\nexport const DialScoreCard = ({\n arcRadius = 100,\n healthScore,\n size = 'L',\n dialScoreData,\n minValue = 0,\n maxValue = 100,\n margin,\n markerColor,\n healthScoreStatus,\n footerCenterContent,\n footerLeftContent,\n footerRightContent,\n isFinacialStrengthGraph = false,\n}: DialScoreCardProps) => {\n const theme = useTheme()\n const arcStartAngle = -Math.PI / 1.35\n const arcEndAngle = Math.PI / 1.35\n\n //finding the end angle of the filled(colored) arc i.e progressArc\n const totalAngularSpan = arcEndAngle - arcStartAngle\n\n const anglePerUnit = totalAngularSpan / (maxValue - minValue)\n const progressEndAngleOffset = (healthScore - minValue) * anglePerUnit\n const progressEndAngle = arcStartAngle + progressEndAngleOffset + 0.02 // Adding a small offset to avoid overlap with the next arc\n\n const thicknessRatio = size !== 'SM' ? 0.1 : 0.12\n const outterArcRadius = arcRadius\n const innerArcRadius = arcRadius * (1 - thicknessRatio)\n\n const chartDimenesions = outterArcRadius * 2 //width and height of the chart\n const centerX = chartDimenesions / 2\n const centerY = chartDimenesions / 2\n const markerRadius = (innerArcRadius + outterArcRadius) / 2\n const angleOffset =\n healthScore !== 25 && healthScore !== 50 && healthScore !== 75 && healthScore !== 100 ? 0 : 0.12 // Adjust the offset based on health score\n\n const [markerX, markerY] = getMarkerXYCoordinates(markerRadius, progressEndAngle, angleOffset)\n\n const unitsPerSegment = healthScore / 25\n\n const sizeMap = {\n L: { markerSize: 12, healthScoreFontSize: 64 },\n M: { markerSize: 8, healthScoreFontSize: 48 },\n SM: { markerSize: 3, healthScoreFontSize: 14 },\n }\n\n const chartMargin = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n ...margin,\n }\n const PercentageIcon = footerCenterContent === 0 ? ArrowRightAlt : TrendingDown\n const stroke = size !== 'SM' ? 3 : 1\n const padding = stroke * 4 // enough room for stroke\n const svgSize = sizeMap[size].markerSize * 2 + padding\n\n return (\n <Stack\n sx={{\n width: chartDimenesions,\n height: size === 'SM' ? chartDimenesions - 7 : chartDimenesions,\n position: 'relative',\n alignSelf: 'center',\n overflow: 'visible',\n }}\n >\n <PieChart\n height={size === 'SM' ? chartDimenesions - 7 : chartDimenesions}\n hideLegend={true}\n margin={chartMargin}\n series={[\n {\n data: dialScoreData,\n innerRadius: innerArcRadius,\n outerRadius: outterArcRadius,\n startAngle: Math.round(radiansToDegrees(arcStartAngle)), // Use Math.degrees to convert\n endAngle: Math.round(radiansToDegrees(arcEndAngle)), // Use Math.degrees to convert\n },\n ]}\n skipAnimation={true}\n slots={{\n pieArc: (props: PieArcProps) => (\n <CustomPieArc\n arcColor={props.color}\n arcRadius={arcRadius}\n arcStartAngle={arcStartAngle}\n centerX={centerX}\n centerY={centerY}\n dataIndex={props.dataIndex}\n dialScoreData={dialScoreData}\n innerArcRadius={innerArcRadius}\n isFinacialStrengthGraph={isFinacialStrengthGraph}\n outterArcRadius={outterArcRadius}\n progressEndAngle={progressEndAngle}\n totalAngularSpan={totalAngularSpan}\n unitsPerSegment={unitsPerSegment}\n />\n ),\n }}\n sx={{\n '& path': {\n stroke: 'none',\n },\n }}\n width={chartDimenesions}\n />\n\n {healthScore >= minValue && healthScore <= maxValue && (\n <svg\n height={svgSize}\n style={{\n position: 'absolute',\n left: centerX + markerX - sizeMap[size].markerSize - 5,\n top: centerY + markerY - sizeMap[size].markerSize - 5,\n overflow: 'visible',\n }}\n viewBox={`${centerX + markerX - sizeMap[size].markerSize - 5} ${centerY + markerY - sizeMap[size].markerSize - 5} ${svgSize} ${svgSize}`}\n width={svgSize}\n >\n <circle\n cx={centerX + markerX}\n cy={centerY + markerY}\n fill={theme.palette.common.white}\n r={sizeMap[size].markerSize}\n stroke={isFinacialStrengthGraph ? 'url(#arcGradient)' : markerColor}\n strokeWidth={stroke}\n />\n </svg>\n )}\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY}px`,\n left: `${centerX}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'center',\n }}\n >\n <Stack\n spacing={1}\n sx={{ alignItems: 'center', justifyContent: 'center', gap: size !== 'M' ? 10 : 3 }}\n >\n <P\n sx={{\n fontSize: sizeMap[size].healthScoreFontSize,\n lineHeight: size !== 'SM' ? '48px' : '100%',\n }}\n variant=\"h1\"\n >\n {healthScore}\n </P>\n {size !== 'SM' && (\n <P sx={{ fontWeight: 600 }} variant={size === 'L' ? 'body1' : 'body2'}>\n {healthScoreStatus}\n </P>\n )}\n </Stack>\n </Box>\n {footerCenterContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY * 2 * 0.83}px`,\n left: `${centerX}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'center',\n }}\n >\n {typeof footerCenterContent === 'number' ? (\n <Stack\n sx={{\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n mt: 24,\n }}\n >\n {footerCenterContent > 0 ? (\n <TrendingUp size={16} sx={{ color: 'success.main' }} />\n ) : (\n <PercentageIcon size={16} sx={{ color: 'text.secondary' }} />\n )}\n <P\n sx={{\n fontWeight: 600,\n color: footerCenterContent > 0 ? 'success.main' : 'text.secondary',\n }}\n variant=\"body1\"\n >\n {Math.abs(footerCenterContent)}\n </P>\n </Stack>\n ) : (\n <P sx={{ color: 'text.secondary' }} variant={'subtitle2'}>\n {footerCenterContent}\n </P>\n )}\n </Box>\n )}\n {/* Left Footer Content /}\n {footerLeftContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY 2 * 0.83}px`,\n left: `${centerX - centerX / 2}px`, // shift left from center\n transform: 'translate(-50%, -50%)',\n textAlign: 'left',\n }}\n >\n <P variant=\"body1\">{footerLeftContent}</P>\n </Box>\n )}\n\n {/* Right Footer Content /}\n {footerRightContent !== undefined && (\n <Box\n sx={{\n position: 'absolute',\n top: `${centerY 2 * 0.83}px`,\n left: `${centerX + centerX / 2}px`,\n transform: 'translate(-50%, -50%)',\n textAlign: 'right',\n }}\n >\n <P variant=\"body1\">{footerRightContent}</P>\n </Box>\n )}\n </Stack>\n )\n}\n"],"mappings":"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"}

package/dist/finstrong/components/shared/DoubleBarChart.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport type { DatasetType } from '@mui/x-charts/internals'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { getMonthName } from '../../util/finstrongUtils'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport interface FinancialData {\n year: number\n month: number\n standard_spend: number\n income: number\n debt_spend: number\n}\n\nexport interface ChartDataPoint {\n label: string\n main: number\n comparison: number\n formattedMain: string\n formattedComparison: string\n [key: string]: string \| number\n}\n\nexport interface DoubleBarChartProps {\n chartFor: 'spending_vs_income' \| 'debt_payment_vs_income'\n data: FinancialData[]\n title: string\n buttonLabel?: string\n legendLabelMain: string\n legendLabelComparison: string\n onClick?: () => void\n totalMain?: string\n totalComparison?: string\n}\n\n/*\n Formats a number as currency.\n * - Rounds small values.\n * - Abbreviates large values (e.g., 1.2k, 3.4M) above the threshold.\n \n @param amount - The number to format.\n * @param threshold - Value above which abbreviation is applied (default: 1000).\n * @returns Formatted currency string.\n /\nconst formatCurrencyCompact = (amount: number, threshold: number = 1000): string => {\n const format = Math.abs(amount) >= threshold ? '0.[0]a' : '0'\n return formatCurrency(amount, format)\n}\n\nconst DoubleBarChart: React.FC<DoubleBarChartProps> = ({\n chartFor,\n data,\n title,\n buttonLabel,\n onClick,\n legendLabelMain,\n legendLabelComparison,\n totalComparison,\n totalMain,\n}) => {\n const theme = useTheme()\n const isSmallMobile = useMediaQuery(theme.breakpoints.down('xs'))\n\n // Transform financial data to chart format\n const chartData: ChartDataPoint[] = React.useMemo(\n () =>\n data\n .sort((a, b) => {\n // Sort by year first, then by month\n if (a.year !== b.year) {\n return a.year - b.year\n }\n return a.month - b.month\n })\n .map((item) => {\n const monthName = getMonthName(item.month)\n\n const chartConfig = {\n spending_vs_income: {\n main: item.standard_spend,\n comparison: item.income,\n formattedMain: formatCurrencyCompact(item.standard_spend),\n formattedComparison: formatCurrencyCompact(item.income),\n },\n debt_payment_vs_income: {\n main: item.income,\n comparison: item.debt_spend,\n formattedMain: formatCurrencyCompact(item.income),\n formattedComparison: formatCurrencyCompact(item.debt_spend),\n },\n }\n\n return {\n label: monthName,\n ...chartConfig[chartFor],\n }\n }),\n [data, chartFor],\n )\n\n const xAxis = {\n dataKey: 'label',\n scaleType: 'band' as const,\n }\n\n // Dynamic Y-axis scaling\n const maxValue = Math.max(...chartData.map((item) => Math.max(item.main, item.comparison)))\n const minValue = Math.min(...chartData.map((item) => Math.min(item.main, item.comparison)))\n\n // If both min and max values are 0, set max to 100\n const yAxisMax =\n minValue === 0 && maxValue === 0 ? 100 : Math.ceil((maxValue 1.2) / 1000) * 1000\n const tickStep = yAxisMax / 3\n\n const yAxis = {\n scaleType: 'linear' as const,\n min: 0,\n max: yAxisMax,\n tickNumber: 4,\n tickMinStep: tickStep,\n valueFormatter: (value: number) => {\n if (value === 0) return '$0'\n return formatCurrency(value, '0.[0]a')\n },\n }\n\n return (\n <Card>\n <Stack\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 12,\n justifyContent: 'space-between',\n pb: 8,\n pt: 16,\n px: 16,\n }}\n >\n <H3>{title}</H3>\n {buttonLabel && (\n <Button\n endIcon={<ChevronRight />}\n onClick={onClick}\n size=\"small\"\n sx={{\n pl: 8,\n height: 24,\n }}\n variant=\"text\"\n >\n {buttonLabel}\n </Button>\n )}\n </Stack>\n\n <Stack sx={{ pb: 24, pl: 16, pr: 24 }}>\n {/* Legend */}\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 24, py: 4 }}>\n <Stack sx={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>\n <Box\n sx={{\n width: 10,\n height: 10,\n backgroundColor: 'chartMono.chartMono3',\n borderRadius: '2px',\n }}\n />\n <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n <Text variant=\"subtitle2\">{legendLabelMain} </Text>\n {!isSmallMobile && totalMain && (\n <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n {totalMain}\n </Text>\n )}\n </Stack>\n </Stack>\n\n <Stack alignItems=\"center\" direction=\"row\" spacing={8}>\n <Box\n sx={{\n width: 10,\n height: 10,\n backgroundColor: 'chartMono.chartMono5',\n borderRadius: '2px',\n }}\n />\n <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n <Text variant=\"subtitle2\">{legendLabelComparison} </Text>\n {!isSmallMobile && totalComparison && (\n <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n {totalComparison}\n </Text>\n )}\n </Stack>\n </Stack>\n </Stack>\n\n <ResponsiveChartContainer\n colors={[\n `${theme.palette.chartMono.chartMono3}`,\n `${theme.palette.chartMono.chartMono5}`,\n ]}\n dataset={chartData as DatasetType}\n height={240}\n margin={{ top: 14, bottom: 10, right: 2, left: -2 }}\n series={[\n { dataKey: 'main', type: 'bar' as const },\n { dataKey: 'comparison', type: 'bar' as const },\n ]}\n xAxis={[xAxis]}\n yAxis={[yAxis]}\n >\n <BarPlot\n slots={{\n bar: (props) => {\n const { ownerState, ...defaultProps } = props\n return (\n <CustomDoubleBarPlot\n {...defaultProps}\n color={ownerState.color}\n data={chartData as any}\n series={{\n index: ownerState.dataIndex,\n type: Number(ownerState.id.toString().split('-').pop()),\n }}\n style={{\n x: props.x,\n y: props.y,\n width: props.width,\n }}\n />\n )\n },\n }}\n />\n\n <ChartsXAxis\n sx={() => ({\n '.MuiChartsAxis-line': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tick': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tickLabel': {\n transform: 'translateY(10px)',\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n fill: 'text.secondary',\n }}\n />\n <ChartsYAxis\n sx={() => ({\n '.MuiChartsAxis-line': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tick': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tickLabel': {\n transform: 'translateX(-8px)',\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n fill: 'text.secondary',\n }}\n />\n </ResponsiveChartContainer>\n </Stack>\n </Card>\n )\n}\n\nexport default DoubleBarChart\n"],"mappings":";;;;;;;;;;;;;;;;;AA6DA,IAAM,IAAA,CAAyB,GAAgB,IAAoB,QAE1D,EAAe,GADP,KAAK,IAAI,CAAM,KAAK,IAAY,WAAW,GACtB,GAGhC,KAAA,CAAiD,EACrD,UAAA,GACA,MAAA,GACA,OAAA,GACA,aAAA,GACA,SAAA,GACA,iBAAA,GACA,uBAAA,GACA,iBAAA,GACA,WAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,IAAgB,EAAc,EAAM,YAAY,KAAK,IAAI,CAAC,GAG1D,IAA8B,EAAM,QAAA,MAEtC,EACG,KAAA,CAAM,GAAG,MAEJ,EAAE,SAAS,EAAE,OACR,EAAE,OAAO,EAAE,OAEb,EAAE,QAAQ,EAAE,KACpB,EACA,IAAA,CAAK,OAkBG;AAAA,IACL,OAlBgB,EAAa,EAAK,KAkB3B;AAAA,IACP,GAAG;AAAA,MAhBH,oBAAoB;AAAA,QAClB,MAAM,EAAK;AAAA,QACX,YAAY,EAAK;AAAA,QACjB,eAAe,EAAsB,EAAK,cAAc;AAAA,QACxD,qBAAqB,EAAsB,EAAK,MAAM;AAAA,MACxD;AAAA,MACA,wBAAwB;AAAA,QACtB,MAAM,EAAK;AAAA,QACX,YAAY,EAAK;AAAA,QACjB,eAAe,EAAsB,EAAK,MAAM;AAAA,QAChD,qBAAqB,EAAsB,EAAK,UAAU;AAAA,MAC5D;AAAA,IAKG,EAAY,CAAA;AAAA,EACjB,EACD,GACL,CAAC,GAAM,CAAQ,CACjB,GAEM,IAAQ;AAAA,IACZ,SAAS;AAAA,IACT,WAAW;AAAA,EACb,GAGM,IAAW,KAAK,IAAI,GAAG,EAAU,IAAA,CAAK,MAAS,KAAK,IAAI,EAAK,MAAM,EAAK,UAAU,CAAC,CAAC,GAIpF,IAHW,KAAK,IAAI,GAAG,EAAU,IAAA,CAAK,MAAS,KAAK,IAAI,EAAK,MAAM,EAAK,UAAU,CAAC,CAIvF,MAAa,KAAK,MAAa,IAAI,MAAM,KAAK,KAAM,IAAW,MAAO,GAAI,IAAI,KAG1E,IAAQ;AAAA,IACZ,WAAW;AAAA,IACX,KAAK;AAAA,IACL,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,aAPe,IAAW;AAAA,IAQ1B,gBAAA,CAAiB,MACX,MAAU,IAAU,OACjB,EAAe,GAAO,QAAQ;AAAA,EAEzC;AAEA,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,cATF,CAWE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,MACf,SAAA;AAAA,MACT,MAAK;AAAA,MACL,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,MACA,SAAQ;AAAA,gBAEP;AAAA,IACK,CAAA,CAEL;AAAA,MAEP,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,cAApC,CAEE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,QAAI,IAAI;AAAA,MAAE;AAAA,gBAAxE,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,YAAY;AAAA,UAAU,eAAe;AAAA,QAAM;AAAA,kBAAhE,CACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB;AAAA,UACjB,cAAc;AAAA,QAChB,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,YAAY;AAAA,YAAU,eAAe;AAAA,UAAM;AAAA,oBAAxD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAd,CAA2B,GAAgB,GAAY;AAAA,cACtD,CAAC,KAAiB,KACjB,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,YAAY,IAAI;AAAA,YAAG,SAAQ;AAAA,sBACpC;AAAA,UACG,CAAA,CAEH;AAAA,UACF;AAAA,UAEP,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,WAAU;AAAA,QAAM,SAAS;AAAA,kBAApD,CACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB;AAAA,UACjB,cAAc;AAAA,QAChB,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,YAAY;AAAA,YAAU,eAAe;AAAA,UAAM;AAAA,oBAAxD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAd,CAA2B,GAAsB,GAAY;AAAA,cAC5D,CAAC,KAAiB,KACjB,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,YAAY,IAAI;AAAA,YAAG,SAAQ;AAAA,sBACpC;AAAA,UACG,CAAA,CAEH;AAAA,UACF;AAAA,QACF;AAAA,QAEP,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,CACN,GAAG,EAAM,QAAQ,UAAU,UAAA,IAC3B,GAAG,EAAM,QAAQ,UAAU,UAAA,EAC7B;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,QAAQ;AAAA,QAAE,KAAK;AAAA,QAAI,QAAQ;AAAA,QAAI,OAAO;AAAA,QAAG,MAAM;AAAA,MAAG;AAAA,MAClD,QAAQ,CACN;AAAA,QAAE,SAAS;AAAA,QAAQ,MAAM;AAAA,MAAe,GACxC;AAAA,QAAE,SAAS;AAAA,QAAc,MAAM;AAAA,MAAe,CAChD;AAAA,MACA,OAAO,CAAC,CAAK;AAAA,MACb,OAAO,CAAC,CAAK;AAAA,gBAbf;AAAA,QAeE,gBAAA,EAAC,GAAD,EACE,OAAO,EACL,KAAA,CAAM,MAAU;AACd,gBAAM,EAAE,YAAA,GAAY,GAAG,EAAA,IAAiB;AACxC,iBACE,gBAAA,EAAC,GAAD;AAAA,YACE,GAAI;AAAA,YACJ,OAAO,EAAW;AAAA,YAClB,MAAM;AAAA,YACN,QAAQ;AAAA,cACN,OAAO,EAAW;AAAA,cAClB,MAAM,OAAO,EAAW,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,IAAI,CAAC;AAAA,YACxD;AAAA,YACA,OAAO;AAAA,cACL,GAAG,EAAM;AAAA,cACT,GAAG,EAAM;AAAA,cACT,OAAO,EAAM;AAAA,YACf;AAAA,UACD,CAAA;AAAA,QAEL,EACF,EACD,CAAA;AAAA,QAED,gBAAA,EAAC,GAAD;AAAA,UACE,IAAA,OAAW;AAAA,YACT,uBAAuB,EACrB,QAAQ,EAAM,QAAQ,QACxB;AAAA,YACA,uBAAuB,EACrB,QAAQ,EAAM,QAAQ,QACxB;AAAA,YACA,4BAA4B,EAC1B,WAAW,mBACb;AAAA,UACF;AAAA,UACA,gBAAgB;AAAA,YACd,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA,QACD,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UACE,IAAA,OAAW;AAAA,YACT,uBAAuB,EACrB,QAAQ,EAAM,QAAQ,QACxB;AAAA,YACA,uBAAuB,EACrB,QAAQ,EAAM,QAAQ,QACxB;AAAA,YACA,4BAA4B,EAC1B,WAAW,mBACb;AAAA,UACF;AAAA,UACA,gBAAgB;AAAA,YACd,UAAU;AAAA,YACV,MAAM;AAAA,UACR;AAAA,QACD,CAAA;AAAA,MACuB;AAAA,MACrB;AAAA,IACH,EAAA,CAAA;AAEV"}
1	+ {"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport useMediaQuery from '@mui/material/useMediaQuery'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer as ResponsiveChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { ChartsYAxis } from '@mui/x-charts/ChartsYAxis'\nimport type { DatasetType } from '@mui/x-charts/internals'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { getMonthName } from '../../util/finstrongUtils'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport interface FinancialData {\n year: number\n month: number\n standard_spend: number\n income: number\n debt_spend: number\n}\n\nexport interface ChartDataPoint {\n label: string\n main: number\n comparison: number\n formattedMain: string\n formattedComparison: string\n [key: string]: string \| number\n}\n\nexport interface DoubleBarChartProps {\n chartFor: 'spending_vs_income' \| 'debt_payment_vs_income'\n data: FinancialData[]\n title: string\n buttonLabel?: string\n legendLabelMain: string\n legendLabelComparison: string\n onClick?: () => void\n totalMain?: string\n totalComparison?: string\n}\n\n/*\n Formats a number as currency.\n * - Rounds small values.\n * - Abbreviates large values (e.g., 1.2k, 3.4M) above the threshold.\n \n @param amount - The number to format.\n * @param threshold - Value above which abbreviation is applied (default: 1000).\n * @returns Formatted currency string.\n /\nconst formatCurrencyCompact = (amount: number, threshold: number = 1000): string => {\n const format = Math.abs(amount) >= threshold ? '0.[0]a' : '0'\n return formatCurrency(amount, format)\n}\n\nconst DoubleBarChart: React.FC<DoubleBarChartProps> = ({\n chartFor,\n data,\n title,\n buttonLabel,\n onClick,\n legendLabelMain,\n legendLabelComparison,\n totalComparison,\n totalMain,\n}) => {\n const theme = useTheme()\n const isSmallMobile = useMediaQuery(theme.breakpoints.down('xs'))\n\n // Transform financial data to chart format\n const chartData: ChartDataPoint[] = React.useMemo(\n () =>\n data\n .sort((a, b) => {\n // Sort by year first, then by month\n if (a.year !== b.year) {\n return a.year - b.year\n }\n return a.month - b.month\n })\n .map((item) => {\n const monthName = getMonthName(item.month)\n\n const chartConfig = {\n spending_vs_income: {\n main: item.standard_spend,\n comparison: item.income,\n formattedMain: formatCurrencyCompact(item.standard_spend),\n formattedComparison: formatCurrencyCompact(item.income),\n },\n debt_payment_vs_income: {\n main: item.income,\n comparison: item.debt_spend,\n formattedMain: formatCurrencyCompact(item.income),\n formattedComparison: formatCurrencyCompact(item.debt_spend),\n },\n }\n\n return {\n label: monthName,\n ...chartConfig[chartFor],\n }\n }),\n [data, chartFor],\n )\n\n const xAxis = {\n dataKey: 'label',\n scaleType: 'band' as const,\n }\n\n // Dynamic Y-axis scaling\n const maxValue = Math.max(...chartData.map((item) => Math.max(item.main, item.comparison)))\n const minValue = Math.min(...chartData.map((item) => Math.min(item.main, item.comparison)))\n\n // If both min and max values are 0, set max to 100\n const yAxisMax =\n minValue === 0 && maxValue === 0 ? 100 : Math.ceil((maxValue 1.2) / 1000) * 1000\n const tickStep = yAxisMax / 3\n\n const yAxis = {\n scaleType: 'linear' as const,\n min: 0,\n max: yAxisMax,\n tickNumber: 4,\n tickMinStep: tickStep,\n valueFormatter: (value: number) => {\n if (value === 0) return '$0'\n return formatCurrency(value, '0.[0]a')\n },\n }\n\n return (\n <Card>\n <Stack\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 12,\n justifyContent: 'space-between',\n pb: 8,\n pt: 16,\n px: 16,\n }}\n >\n <H3>{title}</H3>\n {buttonLabel && (\n <Button\n endIcon={<ChevronRight />}\n onClick={onClick}\n size=\"small\"\n sx={{\n pl: 8,\n height: 24,\n }}\n variant=\"text\"\n >\n {buttonLabel}\n </Button>\n )}\n </Stack>\n\n <Stack sx={{ pb: 24, pl: 16, pr: 24 }}>\n {/* Legend */}\n <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 24, py: 4 }}>\n <Stack sx={{ gap: 8, alignItems: 'center', flexDirection: 'row' }}>\n <Box\n sx={{\n width: 10,\n height: 10,\n backgroundColor: 'chartMono.chartMono3',\n borderRadius: '2px',\n }}\n />\n <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n <Text variant=\"subtitle2\">{legendLabelMain} </Text>\n {!isSmallMobile && totalMain && (\n <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n {totalMain}\n </Text>\n )}\n </Stack>\n </Stack>\n\n <Stack alignItems=\"center\" direction=\"row\" spacing={8}>\n <Box\n sx={{\n width: 10,\n height: 10,\n backgroundColor: 'chartMono.chartMono5',\n borderRadius: '2px',\n }}\n />\n <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n <Text variant=\"subtitle2\">{legendLabelComparison} </Text>\n {!isSmallMobile && totalComparison && (\n <Text sx={{ fontWeight: 700 }} variant=\"subtitle2\">\n {totalComparison}\n </Text>\n )}\n </Stack>\n </Stack>\n </Stack>\n\n <ResponsiveChartContainer\n colors={[\n `${theme.palette.chartMono.chartMono3}`,\n `${theme.palette.chartMono.chartMono5}`,\n ]}\n dataset={chartData as DatasetType}\n height={240}\n margin={{ top: 14, bottom: 10, right: 2, left: -2 }}\n series={[\n { dataKey: 'main', type: 'bar' as const },\n { dataKey: 'comparison', type: 'bar' as const },\n ]}\n xAxis={[xAxis]}\n yAxis={[yAxis]}\n >\n <BarPlot\n slots={{\n bar: (props) => {\n const { ownerState, ...defaultProps } = props\n return (\n <CustomDoubleBarPlot\n {...defaultProps}\n color={ownerState.color}\n data={chartData as any}\n series={{\n index: ownerState.dataIndex,\n type: Number(ownerState.id.toString().split('-').pop()),\n }}\n style={{\n x: props.x,\n y: props.y,\n width: props.width,\n }}\n />\n )\n },\n }}\n />\n\n <ChartsXAxis\n sx={() => ({\n '.MuiChartsAxis-line': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tick': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tickLabel': {\n transform: 'translateY(10px)',\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n fill: 'text.secondary',\n }}\n />\n <ChartsYAxis\n sx={() => ({\n '.MuiChartsAxis-line': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tick': {\n stroke: theme.palette.divider,\n },\n '.MuiChartsAxis-tickLabel': {\n transform: 'translateX(-8px)',\n },\n })}\n tickLabelStyle={{\n fontSize: 11,\n fill: 'text.secondary',\n }}\n />\n </ResponsiveChartContainer>\n </Stack>\n </Card>\n )\n}\n\nexport default DoubleBarChart\n"],"mappings":"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"}

package/dist/finstrong/components/shared/LineGraph.es.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { useFinstrongStore as k, useGlobalCopyStore as w, useUserStore as S } from "../../../common/context/hooks.es.js";
-import { useDimensions as C } from "../../../common/hooks/useDimensions.es.js";
-import { EmptyState as T } from "../../../common/components/EmptyState.es.js";
-import { LineChart as M } from "../../../common/components/charts/LineChart.es.js";
-import { getCreditScoreDetails as O, getSeriesGraphData as L } from "../../util/finstrongUtils.es.js";
+import { useFinstrongStore as w, useGlobalCopyStore as S, useUserStore as C } from "../../../common/context/hooks.es.js";
+import { useDimensions as T } from "../../../common/hooks/useDimensions.es.js";
+import { EmptyState as M } from "../../../common/components/EmptyState.es.js";
+import { LineChart as O } from "../../../common/components/charts/LineChart.es.js";
+import { getCreditScoreDetails as L, getSeriesGraphData as z } from "../../util/finstrongUtils.es.js";
 import "react";
-import { observer as z } from "mobx-react-lite";
-import A from "@mui/material/Stack";
+import { observer as A } from "mobx-react-lite";
+import D from "@mui/material/Stack";
 import { P as K } from "@mxenabled/mxui";
 import { jsx as s, jsxs as R } from "react/jsx-runtime";
-import { useTheme as D } from "@mui/material/styles";
-import G from "@mui/material/Card";
-var X = ({ chartFor: a }) => {
-  const i = D(), v = i.palette.mode === "dark", { monthlySummaries: c } = k(), { user: u } = S(), { finstrong: t } = w(), [b, { width: d }] = C(), n = {
+import { useTheme as G } from "@mui/material/styles";
+import X from "@mui/material/Card";
+var j = ({ chartFor: a }) => {
+  const i = G(), v = i.palette.mode === "dark", { monthlySummaries: c } = w(), { user: u } = C(), { finstrong: t } = S(), [b, { width: d }] = T(), n = {
     savingsOverTime: {
       icon: "trending_up",
       title: t.key_indicators_save.zero_state_title,
@@ -40,7 +40,7 @@ var X = ({ chartFor: a }) => {
       title: t.credit_over_time_title,
       valueKey: "credit_score"
     }
-  }[a], o = L(c, l.valueKey), _ = c.map((r) => r[l.valueKey]), p = Math.max(..._), f = Math.min(..._), h = () => p >= 1e6 ? {
+  }[a], o = z(c, l.valueKey), _ = c.map((r) => r[l.valueKey]), p = Math.max(..._), f = Math.min(..._), h = () => p >= 1e6 ? {
     formatter: "0.000a",
     leftMargin: -7
   } : p >= 1e3 ? {
@@ -52,13 +52,14 @@ var X = ({ chartFor: a }) => {
   }, { formatter: g, leftMargin: y } = h(), x = l.title, e = a === "creditOverTime";
   let m;
   if (e) {
-    const { color: r } = O(u?.credit_score ?? 0, v, t.credit_score_status);
+    const { color: r } = L(u?.credit_score ?? 0, v, t.credit_score_status);
     m = r;
   }
-  return /* @__PURE__ */ s(G, {
+  const k = o.some((r) => r.y !== 0);
+  return /* @__PURE__ */ s(X, {
     ref: b,
     sx: { backgroundColor: "background.paper" },
-    children: o.some((r) => r.y !== 0) ? /* @__PURE__ */ R(A, {
+    children: k ? /* @__PURE__ */ R(D, {
       gap: 8,
       sx: { pl: 18 },
       children: [/* @__PURE__ */ s(K, {
@@ -68,7 +69,7 @@ var X = ({ chartFor: a }) => {
         },
         variant: "h3",
         children: x
-      }), /* @__PURE__ */ s(M, {
+      }), /* @__PURE__ */ s(O, {
         areaColor: m,
         axisColor: i.palette.divider,
         baseline: "min",
@@ -110,7 +111,7 @@ var X = ({ chartFor: a }) => {
         valueFormatterString: e ? void 0 : g,
         width: d < 342 ? d - 48 : 342
       })]
-    }) : /* @__PURE__ */ s(T, {
+    }) : /* @__PURE__ */ s(M, {
       header: n.title,
       icon: n.icon,
       subText: n.description,
@@ -128,9 +129,9 @@ var X = ({ chartFor: a }) => {
       }
     })
   });
-}, J = z(X);
+}, N = A(j);
 export {
-  J as default
+  N as default
 };
 //# sourceMappingURL=LineGraph.es.js.map

package/dist/finstrong/components/shared/LineGraph.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineGraph.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/LineGraph.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { EmptyState, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../../common'\nimport { type MonthlySummaries } from '../../../core'\nimport { LineChart } from '../../../common/components/charts/LineChart'\nimport { useDimensions } from '../../../common/hooks/useDimensions'\n\nimport { getSeriesGraphData, getCreditScoreDetails } from '../../util/finstrongUtils'\n\n// Define chart types\nexport type ChartType = 'savingsOverTime' \| 'debtOverTime' \| 'creditOverTime'\n\n// Configuration interface for chart properties\ninterface ChartConfig {\n title: string\n valueKey: keyof Pick<MonthlySummaries, 'available_cash' \| 'debt_balance' \| 'credit_score'>\n}\n\ninterface LineGraphProps {\n chartFor: ChartType\n}\n\nconst LineGraph: React.FC<LineGraphProps> = ({ chartFor }) => {\n const theme = useTheme()\n const isDarkMode = theme.palette.mode === 'dark'\n\n const { monthlySummaries } = useFinstrongStore()\n const { user } = useUserStore()\n\n const { finstrong: copy } = useGlobalCopyStore()\n const [containerRef, { width }] = useDimensions()\n\n const ZeroStateContent = {\n savingsOverTime: {\n icon: 'trending_up',\n title: copy.key_indicators_save.zero_state_title,\n description: copy.key_indicators_save.zero_state_description,\n },\n debtOverTime: {\n icon: 'multiline_chart',\n title:\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_line_chart_empty_state_header,\n description:\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_line_chart_empty_state_description,\n },\n creditOverTime: {\n icon: 'credit_card',\n title: copy.credit_over_time_title,\n description: copy.credit_over_time_zero_state_desc,\n },\n }[chartFor]\n\n const chartConfigurations: Record<ChartType, ChartConfig> = {\n savingsOverTime: {\n title: copy.key_indicators_save.savings_over_time,\n valueKey: 'available_cash',\n },\n debtOverTime: {\n title: copy.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,\n valueKey: 'debt_balance',\n },\n creditOverTime: {\n title: copy.credit_over_time_title,\n valueKey: 'credit_score',\n },\n }\n\n // Get configuration for the current chart type\n const config = chartConfigurations[chartFor]\n\n const dataSet = getSeriesGraphData(monthlySummaries, config.valueKey)\n\n const values = monthlySummaries.map((s) => s[config.valueKey])\n const maxValue = Math.max(...values)\n const minValue = Math.min(...values)\n\n // Determine appropriate formatter and margin based on data range\n const getFormatterConfig = () => {\n if (maxValue >= 1000000) {\n return { formatter: '0.000a', leftMargin: -7 } // For millions\n } else if (maxValue >= 1000) {\n return { formatter: '0a', leftMargin: -27 } // For thousands\n } else {\n return { formatter: '0a', leftMargin: -32 }\n }\n }\n\n const { formatter, leftMargin } = getFormatterConfig()\n\n const title = config.title\n\n const isCreditOverTime = chartFor === 'creditOverTime'\n\n let markerColor\n\n if (isCreditOverTime) {\n const { color } = getCreditScoreDetails(\n user?.credit_score ?? 0,\n isDarkMode,\n copy.credit_score_status,\n )\n markerColor = color\n }\n const hasData = dataSet.some((item) => item.y !== 0)\n return (\n <Card ref={containerRef} sx={{ backgroundColor: 'background.paper' }}>\n {hasData ? (\n <Stack gap={8} sx={{ pl: 18 }}>\n <P sx={{ pb: 8, pt: 16 }} variant=\"h3\">\n {title}\n </P>\n <LineChart\n areaColor={markerColor}\n axisColor={theme.palette.divider}\n baseline=\"min\"\n chartFor={chartFor}\n colors={[theme.palette.primary.main]}\n curveType={isCreditOverTime ? 'linear' : 'monotoneX'}\n datasets={dataSet ? [dataSet] : []}\n height={244}\n labelFontColor={isCreditOverTime ? 'text.primary' : ''}\n labelFontSize={isCreditOverTime ? 13 : undefined}\n labels={[copy.key_indicators_label]}\n margin={{ left: leftMargin, top: isCreditOverTime ? 25 : 15, right: 20 }}\n markStyles={(index) => {\n if (isCreditOverTime) {\n return {\n markLabelStyles: {\n marginLeft: 16,\n transform:\n index === dataSet.length - 1 ? 'translateX(-16px)' : 'translateX(16px)',\n fontWeight: 600,\n fill: theme.palette.text.primary,\n },\n stroke: markerColor!,\n }\n }\n return {}\n }}\n maxRange={isCreditOverTime ? 850 : undefined}\n minRange={(() => {\n if (!isCreditOverTime) return undefined\n return minValue < 300 ? 0 : 300\n })()}\n showArea={true}\n showAverage={!isCreditOverTime}\n showMark={!isCreditOverTime}\n showMarkLabel={isCreditOverTime}\n showXAxis={true}\n showYAxis={isCreditOverTime}\n showYAxisTicks={isCreditOverTime}\n useCustomMark={true}\n valueFormatterString={!isCreditOverTime ? formatter : undefined}\n width={width < 342 ? width - 48 : 342}\n />\n </Stack>\n ) : (\n <EmptyState\n header={ZeroStateContent.title}\n icon={ZeroStateContent.icon}\n subText={ZeroStateContent.description}\n sx={{\n backgroundColor: 'background.paper',\n borderRadius: '8px',\n boxShadow: 1,\n p: 24,\n pb: 48,\n '.empty-state-subtext': {\n fontSize: 15,\n lineHeight: '24px',\n mt: 8,\n },\n }}\n />\n )}\n </Card>\n )\n}\n\nexport default observer(LineGraph)\n"],"mappings":";;;;;;;;;;;;AA6BA,IAAM,IAAA,CAAuC,EAAE,UAAA,EAAA,MAAe;AAC5D,QAAM,IAAQ,EAAS,GACjB,IAAa,EAAM,QAAQ,SAAS,QAEpC,EAAE,kBAAA,EAAA,IAAqB,EAAkB,GACzC,EAAE,MAAA,EAAA,IAAS,EAAa,GAExB,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,CAAC,GAAc,EAAE,OAAA,EAAA,CAAA,IAAW,EAAc,GAE1C,IAAmB;AAAA,IACvB,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO,EAAK,oBAAoB;AAAA,MAChC,aAAa,EAAK,oBAAoB;AAAA,IACxC;AAAA,IACA,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,OACE,EAAK,sBAAsB,4BACxB;AAAA,MACL,aACE,EAAK,sBAAsB,4BACxB;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,OAAO,EAAK;AAAA,MACZ,aAAa,EAAK;AAAA,IACpB;AAAA,EACF,EAAE,CAAA,GAkBI,IAAS;AAAA,IAfb,iBAAiB;AAAA,MACf,OAAO,EAAK,oBAAoB;AAAA,MAChC,UAAU;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,MACZ,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,MAC9D,UAAU;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,EAAK;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,EAIa,EAAoB,CAAA,GAE7B,IAAU,EAAmB,GAAkB,EAAO,QAAQ,GAE9D,IAAS,EAAiB,IAAA,CAAK,MAAM,EAAE,EAAO,QAAA,CAAS,GACvD,IAAW,KAAK,IAAI,GAAG,CAAM,GAC7B,IAAW,KAAK,IAAI,GAAG,CAAM,GAG7B,IAAA,MACA,KAAY,MACP;AAAA,IAAE,WAAW;AAAA,IAAU,YAAY;AAAA,EAAG,IACpC,KAAY,MACd;AAAA,IAAE,WAAW;AAAA,IAAM,YAAY;AAAA,EAAI,IAEnC;AAAA,IAAE,WAAW;AAAA,IAAM,YAAY;AAAA,EAAI,GAIxC,EAAE,WAAA,GAAW,YAAA,EAAA,IAAe,EAAmB,GAE/C,IAAQ,EAAO,OAEf,IAAmB,MAAa;AAEtC,MAAI;AAEJ,MAAI,GAAkB;AACpB,UAAM,EAAE,OAAA,EAAA,IAAU,EAChB,GAAM,gBAAgB,GACtB,GACA,EAAK,mBACP;AACA,IAAA,IAAc;AAAA,EAChB;~~AAEA~~,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,KAAK;AAAA,IAAc,IAAI,EAAE,iBAAiB,mBAAmB;AAAA,~~cAFrD~~,~~EAAQ~~,~~KAAA,CAAM,MAAS,EAAK,MAAM,CAG7C,~~IACC,gBAAA,EAAC,GAAD;AAAA,MAAO,KAAK;AAAA,MAAG,IAAI,EAAE,IAAI,GAAG;AAAA,~~gBAA5B~~,CACE,gBAAA,EAAC,GAAD;AAAA,QAAG,IAAI;AAAA,UAAE,IAAI;AAAA,UAAG,IAAI;AAAA,QAAG;AAAA,QAAG,SAAQ;AAAA,~~kBAC~~/B;AAAA,MACA,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,QACE,WAAW;AAAA,QACX,WAAW,EAAM,QAAQ;AAAA,QACzB,UAAS;AAAA,QACC,UAAA;AAAA,QACV,QAAQ,CAAC,EAAM,QAAQ,QAAQ,IAAI;AAAA,QACnC,WAAW,IAAmB,WAAW;AAAA,QACzC,UAAU,IAAU,CAAC,CAAO,IAAI,CAAC;AAAA,QACjC,QAAQ;AAAA,QACR,gBAAgB,IAAmB,iBAAiB;AAAA,QACpD,eAAe,IAAmB,KAAK;AAAA,QACvC,QAAQ,CAAC,EAAK,oBAAoB;AAAA,QAClC,QAAQ;AAAA,UAAE,MAAM;AAAA,UAAY,KAAK,IAAmB,KAAK;AAAA,UAAI,OAAO;AAAA,QAAG;AAAA,QACvE,YAAA,CAAa,MACP,IACK;AAAA,UACL,iBAAiB;AAAA,YACf,YAAY;AAAA,YACZ,WACE,MAAU,EAAQ,SAAS,IAAI,sBAAsB;AAAA,YACvD,YAAY;AAAA,YACZ,MAAM,EAAM,QAAQ,KAAK;AAAA,UAC3B;AAAA,UACA,QAAQ;AAAA,QACV,IAEK,CAAC;AAAA,QAEV,UAAU,IAAmB,MAAM;AAAA,QACnC,WAAA,MAAiB;AACf,cAAK;AACL,mBAAO,IAAW,MAAM,IAAI;AAAA,QAC9B,GAAG;AAAA,QACH,UAAU;AAAA,QACV,aAAa,CAAC;AAAA,QACd,UAAU,CAAC;AAAA,QACX,eAAe;AAAA,QACf,WAAW;AAAA,QACX,WAAW;AAAA,QACX,gBAAgB;AAAA,QAChB,eAAe;AAAA,QACf,sBAAuB,IAA+B,SAAZ;AAAA,QAC1C,OAAO,IAAQ,MAAM,IAAQ,KAAK;AAAA,MACnC,CAAA,CACI;AAAA,~~SAEP~~,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAiB;AAAA,MACzB,MAAM,EAAiB;AAAA,MACvB,SAAS,EAAiB;AAAA,MAC1B,IAAI;AAAA,QACF,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,WAAW;AAAA,QACX,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,wBAAwB;AAAA,UACtB,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,IAAI;AAAA,QACN;AAAA,MACF;AAAA,IACD,CAAA;AAAA,EAEC,CAAA;AAEV,GAEA,IAAe,EAAS,CAAS"}
1	+ {"version":3,"file":"LineGraph.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/LineGraph.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { EmptyState, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../../common'\nimport { type MonthlySummaries } from '../../../core'\nimport { LineChart } from '../../../common/components/charts/LineChart'\nimport { useDimensions } from '../../../common/hooks/useDimensions'\n\nimport { getSeriesGraphData, getCreditScoreDetails } from '../../util/finstrongUtils'\n\n// Define chart types\nexport type ChartType = 'savingsOverTime' \| 'debtOverTime' \| 'creditOverTime'\n\n// Configuration interface for chart properties\ninterface ChartConfig {\n title: string\n valueKey: keyof Pick<MonthlySummaries, 'available_cash' \| 'debt_balance' \| 'credit_score'>\n}\n\ninterface LineGraphProps {\n chartFor: ChartType\n}\n\nconst LineGraph: React.FC<LineGraphProps> = ({ chartFor }) => {\n const theme = useTheme()\n const isDarkMode = theme.palette.mode === 'dark'\n\n const { monthlySummaries } = useFinstrongStore()\n const { user } = useUserStore()\n\n const { finstrong: copy } = useGlobalCopyStore()\n const [containerRef, { width }] = useDimensions()\n\n const ZeroStateContent = {\n savingsOverTime: {\n icon: 'trending_up',\n title: copy.key_indicators_save.zero_state_title,\n description: copy.key_indicators_save.zero_state_description,\n },\n debtOverTime: {\n icon: 'multiline_chart',\n title:\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_line_chart_empty_state_header,\n description:\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_line_chart_empty_state_description,\n },\n creditOverTime: {\n icon: 'credit_card',\n title: copy.credit_over_time_title,\n description: copy.credit_over_time_zero_state_desc,\n },\n }[chartFor]\n\n const chartConfigurations: Record<ChartType, ChartConfig> = {\n savingsOverTime: {\n title: copy.key_indicators_save.savings_over_time,\n valueKey: 'available_cash',\n },\n debtOverTime: {\n title: copy.key_indicators_borrow.have_manageable_debt_drawer.debt_over_time,\n valueKey: 'debt_balance',\n },\n creditOverTime: {\n title: copy.credit_over_time_title,\n valueKey: 'credit_score',\n },\n }\n\n // Get configuration for the current chart type\n const config = chartConfigurations[chartFor]\n\n const dataSet = getSeriesGraphData(monthlySummaries, config.valueKey)\n\n const values = monthlySummaries.map((s) => s[config.valueKey])\n const maxValue = Math.max(...values)\n const minValue = Math.min(...values)\n\n // Determine appropriate formatter and margin based on data range\n const getFormatterConfig = () => {\n if (maxValue >= 1000000) {\n return { formatter: '0.000a', leftMargin: -7 } // For millions\n } else if (maxValue >= 1000) {\n return { formatter: '0a', leftMargin: -27 } // For thousands\n } else {\n return { formatter: '0a', leftMargin: -32 }\n }\n }\n\n const { formatter, leftMargin } = getFormatterConfig()\n\n const title = config.title\n\n const isCreditOverTime = chartFor === 'creditOverTime'\n\n let markerColor\n\n if (isCreditOverTime) {\n const { color } = getCreditScoreDetails(\n user?.credit_score ?? 0,\n isDarkMode,\n copy.credit_score_status,\n )\n markerColor = color\n }\n const hasData = dataSet.some((item) => item.y !== 0)\n return (\n <Card ref={containerRef} sx={{ backgroundColor: 'background.paper' }}>\n {hasData ? (\n <Stack gap={8} sx={{ pl: 18 }}>\n <P sx={{ pb: 8, pt: 16 }} variant=\"h3\">\n {title}\n </P>\n <LineChart\n areaColor={markerColor}\n axisColor={theme.palette.divider}\n baseline=\"min\"\n chartFor={chartFor}\n colors={[theme.palette.primary.main]}\n curveType={isCreditOverTime ? 'linear' : 'monotoneX'}\n datasets={dataSet ? [dataSet] : []}\n height={244}\n labelFontColor={isCreditOverTime ? 'text.primary' : ''}\n labelFontSize={isCreditOverTime ? 13 : undefined}\n labels={[copy.key_indicators_label]}\n margin={{ left: leftMargin, top: isCreditOverTime ? 25 : 15, right: 20 }}\n markStyles={(index) => {\n if (isCreditOverTime) {\n return {\n markLabelStyles: {\n marginLeft: 16,\n transform:\n index === dataSet.length - 1 ? 'translateX(-16px)' : 'translateX(16px)',\n fontWeight: 600,\n fill: theme.palette.text.primary,\n },\n stroke: markerColor!,\n }\n }\n return {}\n }}\n maxRange={isCreditOverTime ? 850 : undefined}\n minRange={(() => {\n if (!isCreditOverTime) return undefined\n return minValue < 300 ? 0 : 300\n })()}\n showArea={true}\n showAverage={!isCreditOverTime}\n showMark={!isCreditOverTime}\n showMarkLabel={isCreditOverTime}\n showXAxis={true}\n showYAxis={isCreditOverTime}\n showYAxisTicks={isCreditOverTime}\n useCustomMark={true}\n valueFormatterString={!isCreditOverTime ? formatter : undefined}\n width={width < 342 ? width - 48 : 342}\n />\n </Stack>\n ) : (\n <EmptyState\n header={ZeroStateContent.title}\n icon={ZeroStateContent.icon}\n subText={ZeroStateContent.description}\n sx={{\n backgroundColor: 'background.paper',\n borderRadius: '8px',\n boxShadow: 1,\n p: 24,\n pb: 48,\n '.empty-state-subtext': {\n fontSize: 15,\n lineHeight: '24px',\n mt: 8,\n },\n }}\n />\n )}\n </Card>\n )\n}\n\nexport default observer(LineGraph)\n"],"mappings":"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"}

package/dist/finstrong/components/shared/ScoreHistoryTimeline.es.js CHANGED Viewed

@@ -1,22 +1,22 @@
-import { buildDynamicCopy as i } from "../../../core/utils/Localization.es.js";
-import { useGlobalCopyStore as v } from "../../../common/context/hooks.es.js";
-import { getPercentFromRatio as d } from "../../util/finstrongUtils.es.js";
-import s from "./ScoreHistoryTimelineItem.es.js";
+import { buildDynamicCopy as n } from "../../../core/utils/Localization.es.js";
+import { useGlobalCopyStore as I } from "../../../common/context/hooks.es.js";
+import { getPercentFromRatio as s } from "../../util/finstrongUtils.es.js";
+import d from "./ScoreHistoryTimelineItem.es.js";
 import "react";
-import { observer as I } from "mobx-react-lite";
-import n from "@mui/material/Stack";
-import { Icon as T, P as B, Text as l } from "@mxenabled/mxui";
-import { format as H } from "date-fns/format";
-import { Fragment as R, jsx as r, jsxs as t } from "react/jsx-runtime";
+import { observer as T } from "mobx-react-lite";
+import i from "@mui/material/Stack";
+import { Icon as B, P as H, Text as l } from "@mxenabled/mxui";
+import { format as R } from "date-fns/format";
+import { Fragment as D, jsx as r, jsxs as t } from "react/jsx-runtime";
 import m from "@mui/material/Box";
-import D from "@mui/material/Card";
-import M from "@mui/lab/Timeline";
-import { timelineItemClasses as j } from "@mui/lab/TimelineItem";
-var k = ({ report: a }) => {
-  const { finstrong: p } = v(), { score_history_drawer_timeline: o } = p, { health_score_point_difference: e, newer_credit_score: _, older_credit_score: f, older_spend_to_income_ratio: h, newer_spend_to_income_ratio: u, older_health_score: c, newer_health_score: g, newer_score_calculated_at: x } = a, y = H(new Date(x), "MMM d"), w = () => e === 0 ? "info.lighter" : e > 0 ? "success.lighter" : "error.lighter", C = () => e === 0 ? i(o.stayed_at, c) : e > 0 ? o.less_spending : o.more_spending, S = () => {
+import M from "@mui/material/Card";
+import j from "@mui/lab/Timeline";
+import { timelineItemClasses as k } from "@mui/lab/TimelineItem";
+var W = ({ report: a }) => {
+  const { finstrong: p } = I(), { score_history_drawer_timeline: o } = p, { health_score_point_difference: e, newer_credit_score: _, older_credit_score: f, older_spend_to_income_ratio: h, newer_spend_to_income_ratio: u, older_health_score: c, newer_health_score: g, newer_score_calculated_at: x } = a, y = R(new Date(x), "MMM d"), w = () => e === 0 ? "info.lighter" : e > 0 ? "success.lighter" : "error.lighter", C = () => e === 0 ? n(o.stayed_at, c) : e > 0 ? o.less_spending : o.more_spending, S = () => {
     if (e === 0) return null;
-    const b = i(e > 0 ? o.up_from : o.down_from, c, g);
-    return /* @__PURE__ */ t(R, { children: [/* @__PURE__ */ r(T, {
+    const b = e > 0 ? o.up_from : o.down_from, v = n(b, c, g);
+    return /* @__PURE__ */ t(D, { children: [/* @__PURE__ */ r(B, {
       fill: !0,
       name: "circle",
       sx: {
@@ -25,16 +25,16 @@ var k = ({ report: a }) => {
         mx: 4,
         p: 1
       }
-    }), b] });
+    }), v] });
   };
-  return /* @__PURE__ */ t(D, { children: [/* @__PURE__ */ r(m, {
+  return /* @__PURE__ */ t(M, { children: [/* @__PURE__ */ r(m, {
     sx: {
       borderBottomColor: "divider",
       borderBottomStyle: "solid",
       borderBottomWidth: e !== 0 ? 1 : 0,
       p: 16
     },
-    children: /* @__PURE__ */ t(n, {
+    children: /* @__PURE__ */ t(i, {
       flexDirection: "row",
       sx: {
         alignItems: "center",
@@ -42,7 +42,7 @@ var k = ({ report: a }) => {
         height: 48,
         width: "100%"
       },
-      children: [/* @__PURE__ */ r(n, {
+      children: [/* @__PURE__ */ r(i, {
         sx: {
           alignItems: "center",
           backgroundColor: w(),
@@ -51,12 +51,12 @@ var k = ({ report: a }) => {
           justifyContent: "center",
           width: 48
         },
-        children: /* @__PURE__ */ r(B, {
+        children: /* @__PURE__ */ r(H, {
           sx: { fontWeight: 600 },
           variant: "body1",
           children: e > 0 ? `+${e}` : e
         })
-      }), /* @__PURE__ */ t(n, {
+      }), /* @__PURE__ */ t(i, {
         sx: {
           gap: 2,
           width: "80%"
@@ -84,24 +84,24 @@ var k = ({ report: a }) => {
       pr: 16,
       pt: 12
     },
-    children: /* @__PURE__ */ t(M, {
+    children: /* @__PURE__ */ t(j, {
       sx: {
-        [`& .${j.root}:before`]: {
+        [`& .${k.root}:before`]: {
           flex: 0,
           padding: 0
         },
         m: 0,
         p: 0
       },
-      children: [/* @__PURE__ */ r(s, { content: i(o.spend_to_income_description, d(h), d(u)) }), /* @__PURE__ */ r(s, {
-        content: i(o.credit_score_description, f, _),
+      children: [/* @__PURE__ */ r(d, { content: n(o.spend_to_income_description, s(h), s(u)) }), /* @__PURE__ */ r(d, {
+        content: n(o.credit_score_description, f, _),
         islast: !0
       })]
     })
   })] });
-}, U = I(k);
+}, V = T(W);
 export {
-  U as default
+  V as default
 };
 //# sourceMappingURL=ScoreHistoryTimeline.es.js.map

package/dist/finstrong/components/shared/ScoreHistoryTimeline.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScoreHistoryTimeline.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimeline.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { format } from 'date-fns/format'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport Timeline from '@mui/lab/Timeline'\nimport { timelineItemClasses } from '@mui/lab/TimelineItem'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { HealthScoreReport } from '../../../core'\n\nimport { getPercentFromRatio } from '../../util/finstrongUtils'\n\nimport ScoreHistoryTimelineItem from './ScoreHistoryTimelineItem'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface ScoreHistoryTimelineProps {\n report: HealthScoreReport\n}\n\nconst ScoreHistoryTimeline: React.FC<ScoreHistoryTimelineProps> = ({ report }) => {\n const { finstrong: copyContent } = useGlobalCopyStore()\n const { score_history_drawer_timeline: timelineCopy } = copyContent\n\n const {\n health_score_point_difference: score,\n newer_credit_score: newCreditScore,\n older_credit_score: oldCreditScore,\n older_spend_to_income_ratio: oldSpendToIncomeRatio,\n newer_spend_to_income_ratio: newSpendToIncomeRatio,\n older_health_score: oldHealthScore,\n newer_health_score: newHealthScore,\n newer_score_calculated_at: newScoreCalculatedAt,\n } = report\n\n const formattedDate = format(new Date(newScoreCalculatedAt), 'MMM d')\n\n const getBackgroundColor = () => {\n if (score === 0) return 'info.lighter'\n return score > 0 ? 'success.lighter' : 'error.lighter'\n }\n\n const getMainContent = () => {\n if (score === 0) {\n return buildDynamicCopy(timelineCopy.stayed_at, oldHealthScore) as string\n }\n return score > 0 ? timelineCopy.less_spending : timelineCopy.more_spending\n }\n\n const getSubContent = () => {\n if (score === 0) return null\n\n const copyKey = score > 0 ? timelineCopy.up_from : timelineCopy.down_from\n const text = buildDynamicCopy(copyKey, oldHealthScore, newHealthScore) as string\n\n return (\n <>\n <Icon\n fill={true}\n name=\"circle\"\n sx={{ color: 'text.secondary', fontSize: 8, mx: 4, p: 1 }}\n />\n {text}\n </>\n )\n }\n\n return (\n <Card>\n <Box\n sx={{\n borderBottomColor: 'divider',\n borderBottomStyle: 'solid',\n borderBottomWidth: score !== 0 ? 1 : 0,\n p: 16,\n }}\n >\n <Stack\n flexDirection=\"row\"\n sx={{ alignItems: 'center', gap: 16, height: 48, width: '100%' }}\n >\n <Stack\n sx={{\n alignItems: 'center',\n backgroundColor: getBackgroundColor(),\n borderRadius: 999,\n height: 48,\n justifyContent: 'center',\n width: 48,\n }}\n >\n <P sx={{ fontWeight: 600 }} variant=\"body1\">\n {score > 0 ? `+${score}` : score}\n </P>\n </Stack>\n <Stack sx={{ gap: 2, width: '80%' }}>\n <Text fontWeight={600} variant=\"body1\">\n {getMainContent()}\n </Text>\n <Text sx={{ color: 'text.secondary' }} variant=\"subtitle2\">\n {formattedDate} {getSubContent()}\n </Text>\n </Stack>\n </Stack>\n </Box>\n {score !== 0 && (\n <Box sx={{ color: 'text.secondary', pb: 8, pl: 32, pr: 16, pt: 12 }}>\n <Timeline\n sx={{\n [`& .${timelineItemClasses.root}:before`]: {\n flex: 0,\n padding: 0,\n },\n m: 0,\n p: 0,\n }}\n >\n <ScoreHistoryTimelineItem\n content={\n buildDynamicCopy(\n timelineCopy.spend_to_income_description,\n getPercentFromRatio(oldSpendToIncomeRatio),\n getPercentFromRatio(newSpendToIncomeRatio),\n ) as string\n }\n />\n <ScoreHistoryTimelineItem\n content={\n buildDynamicCopy(\n timelineCopy.credit_score_description,\n oldCreditScore,\n newCreditScore,\n ) as string\n }\n islast={true}\n />\n </Timeline>\n </Box>\n )}\n </Card>\n )\n}\n\nexport default observer(ScoreHistoryTimeline)\n"],"mappings":";;;;;;;;;;;;;;AA4BA,IAAM,IAAA,CAA6D,EAAE,QAAA,EAAA,MAAa;AAChF,QAAM,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAChD,EAAE,+BAA+B,EAAA,IAAiB,GAElD,EACJ,+BAA+B,GAC/B,oBAAoB,GACpB,oBAAoB,GACpB,6BAA6B,GAC7B,6BAA6B,GAC7B,oBAAoB,GACpB,oBAAoB,GACpB,2BAA2B,EAAA,IACzB,GAEE,IAAgB,EAAO,IAAI,KAAK,CAAoB,GAAG,OAAO,GAE9D,IAAA,MACA,MAAU,IAAU,iBACjB,IAAQ,IAAI,oBAAoB,iBAGnC,IAAA,MACA,MAAU,IACL,EAAiB,EAAa,WAAW,CAAc,IAEzD,IAAQ,IAAI,EAAa,gBAAgB,EAAa,eAGzD,IAAA,MAAsB;AAC1B,QAAI,MAAU,EAAG,QAAO;~~AAGxB~~,UAAM,~~IAAO~~,~~EADG,~~IAAQ,IAAI,EAAa,UAAU,EAAa,~~WACzB~~,GAAgB,CAAc;AAErE,WACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM;AAAA,MACN,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,OAAO;AAAA,QAAkB,UAAU;AAAA,QAAG,IAAI;AAAA,QAAG,GAAG;AAAA,MAAE;AAAA,IACzD,CAAA,GACA,CACD,EAAA,CAAA;AAAA,EAEN;AAEA,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,mBAAmB;AAAA,MACnB,mBAAmB;AAAA,MACnB,mBAAmB,MAAU,IAAI,IAAI;AAAA,MACrC,GAAG;AAAA,IACL;AAAA,~~cAEA~~,gBAAA,EAAC,GAAD;AAAA,MACE,eAAc;AAAA,MACd,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,QAAQ;AAAA,QAAI,OAAO;AAAA,MAAO;AAAA,~~gBAFjE~~,CAIE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,iBAAiB,EAAmB;AAAA,UACpC,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,OAAO;AAAA,QACT;AAAA,~~kBAEA~~,gBAAA,EAAC,GAAD;AAAA,UAAG,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,~~oBACjC~~,IAAQ,IAAI,IAAI,CAAA,KAAU;AAAA,QAC1B,CAAA;AAAA,MACE,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,OAAO;AAAA,QAAM;AAAA,~~kBAAlC~~,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,YAAY;AAAA,UAAK,SAAQ;AAAA,~~oBAC5B~~,EAAe;AAAA,QACZ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAAG,SAAQ;AAAA,~~oBAA~~/C;AAAA,YACG;AAAA,YAAc;AAAA,YAAE,EAAc;AAAA,UAC3B;AAAA,~~UACD~~;AAAA,~~QACF~~;AAAA;EACJ,CAAA,GACJ,MAAU,KACT,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,OAAO;AAAA,MAAkB,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,~~cAChE~~,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,~~SACD~~,MAAM,EAAoB,IAAA,SAAK,GAAW;AAAA,UACzC,MAAM;AAAA,UACN,SAAS;AAAA,QACX;AAAA,QACA,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,~~gBARF~~,CAUE,gBAAA,EAAC,GAAD,EACE,SACE,EACE,EAAa,6BACb,EAAoB,CAAqB,GACzC,EAAoB,CAAqB,CAC3C,EAEH,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,SACE,EACE,EAAa,0BACb,GACA,CACF;AAAA,QAEF,QAAQ;AAAA,MACT,CAAA,CACO;AAAA;EACP,CAAA,CAEH,EAAA,CAAA;AAEV,GAEA,IAAe,EAAS,CAAoB"}
1	+ {"version":3,"file":"ScoreHistoryTimeline.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimeline.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { format } from 'date-fns/format'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport Timeline from '@mui/lab/Timeline'\nimport { timelineItemClasses } from '@mui/lab/TimelineItem'\n\nimport { useGlobalCopyStore } from '../../../common'\nimport { HealthScoreReport } from '../../../core'\n\nimport { getPercentFromRatio } from '../../util/finstrongUtils'\n\nimport ScoreHistoryTimelineItem from './ScoreHistoryTimelineItem'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface ScoreHistoryTimelineProps {\n report: HealthScoreReport\n}\n\nconst ScoreHistoryTimeline: React.FC<ScoreHistoryTimelineProps> = ({ report }) => {\n const { finstrong: copyContent } = useGlobalCopyStore()\n const { score_history_drawer_timeline: timelineCopy } = copyContent\n\n const {\n health_score_point_difference: score,\n newer_credit_score: newCreditScore,\n older_credit_score: oldCreditScore,\n older_spend_to_income_ratio: oldSpendToIncomeRatio,\n newer_spend_to_income_ratio: newSpendToIncomeRatio,\n older_health_score: oldHealthScore,\n newer_health_score: newHealthScore,\n newer_score_calculated_at: newScoreCalculatedAt,\n } = report\n\n const formattedDate = format(new Date(newScoreCalculatedAt), 'MMM d')\n\n const getBackgroundColor = () => {\n if (score === 0) return 'info.lighter'\n return score > 0 ? 'success.lighter' : 'error.lighter'\n }\n\n const getMainContent = () => {\n if (score === 0) {\n return buildDynamicCopy(timelineCopy.stayed_at, oldHealthScore) as string\n }\n return score > 0 ? timelineCopy.less_spending : timelineCopy.more_spending\n }\n\n const getSubContent = () => {\n if (score === 0) return null\n\n const copyKey = score > 0 ? timelineCopy.up_from : timelineCopy.down_from\n const text = buildDynamicCopy(copyKey, oldHealthScore, newHealthScore) as string\n\n return (\n <>\n <Icon\n fill={true}\n name=\"circle\"\n sx={{ color: 'text.secondary', fontSize: 8, mx: 4, p: 1 }}\n />\n {text}\n </>\n )\n }\n\n return (\n <Card>\n <Box\n sx={{\n borderBottomColor: 'divider',\n borderBottomStyle: 'solid',\n borderBottomWidth: score !== 0 ? 1 : 0,\n p: 16,\n }}\n >\n <Stack\n flexDirection=\"row\"\n sx={{ alignItems: 'center', gap: 16, height: 48, width: '100%' }}\n >\n <Stack\n sx={{\n alignItems: 'center',\n backgroundColor: getBackgroundColor(),\n borderRadius: 999,\n height: 48,\n justifyContent: 'center',\n width: 48,\n }}\n >\n <P sx={{ fontWeight: 600 }} variant=\"body1\">\n {score > 0 ? `+${score}` : score}\n </P>\n </Stack>\n <Stack sx={{ gap: 2, width: '80%' }}>\n <Text fontWeight={600} variant=\"body1\">\n {getMainContent()}\n </Text>\n <Text sx={{ color: 'text.secondary' }} variant=\"subtitle2\">\n {formattedDate} {getSubContent()}\n </Text>\n </Stack>\n </Stack>\n </Box>\n {score !== 0 && (\n <Box sx={{ color: 'text.secondary', pb: 8, pl: 32, pr: 16, pt: 12 }}>\n <Timeline\n sx={{\n [`& .${timelineItemClasses.root}:before`]: {\n flex: 0,\n padding: 0,\n },\n m: 0,\n p: 0,\n }}\n >\n <ScoreHistoryTimelineItem\n content={\n buildDynamicCopy(\n timelineCopy.spend_to_income_description,\n getPercentFromRatio(oldSpendToIncomeRatio),\n getPercentFromRatio(newSpendToIncomeRatio),\n ) as string\n }\n />\n <ScoreHistoryTimelineItem\n content={\n buildDynamicCopy(\n timelineCopy.credit_score_description,\n oldCreditScore,\n newCreditScore,\n ) as string\n }\n islast={true}\n />\n </Timeline>\n </Box>\n )}\n </Card>\n )\n}\n\nexport default observer(ScoreHistoryTimeline)\n"],"mappings":"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"}

package/dist/finstrong/components/shared/ScoreHistoryTimelineItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScoreHistoryTimelineItem.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimelineItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport TimelineConnector from '@mui/lab/TimelineConnector'\nimport TimelineContent from '@mui/lab/TimelineContent'\nimport TimelineDot from '@mui/lab/TimelineDot'\nimport TimelineSeparator from '@mui/lab/TimelineSeparator'\nimport TimelineItem from '@mui/lab/TimelineItem'\n\ninterface ScoreHistoryTimelineItemProps {\n content?: string\n islast?: boolean\n}\n\nconst ScoreHistoryTimelineItem: React.FC<ScoreHistoryTimelineItemProps> = ({\n content,\n islast = false,\n}) => {\n return (\n <TimelineItem sx={{ minHeight: 0 }}>\n <TimelineSeparator>\n <TimelineDot sx={{ bgcolor: 'divider', boxShadow: 'none', p: 2 }} />\n {!islast && (\n <TimelineConnector\n sx={{\n bgcolor: 'background.paper',\n borderLeft: '1px solid',\n borderColor: 'divider',\n borderRadius: 1,\n m: -4,\n }}\n />\n )}\n </TimelineSeparator>\n <TimelineContent sx={{ pb: 16, pl: 12, pr: 0, pt: 5 }}>\n <P fontSize={13} fontWeight={400} variant=\"subtitle2\">\n {content}\n </P>\n </TimelineContent>\n </TimelineItem>\n )\n}\n\nexport default ScoreHistoryTimelineItem\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAA,CAAqE,EACzE,SAAA,GACA,QAAA,IAAS,GAAA,MAGP,gBAAA,EAAC,GAAD;AAAA,EAAc,IAAI,EAAE,WAAW,EAAE;AAAA,~~YAAjC~~,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAa,IAAI;AAAA,IAAE,SAAS;AAAA,IAAW,WAAW;AAAA,IAAQ,GAAG;AAAA,EAAE,EAAI,CAAA,GAClE,CAAC,KACA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,GAAG;AAAA,EACL,EACD,CAAA,CAEc,EAAA,CAAA,GACnB,gBAAA,EAAC,GAAD;AAAA,IAAiB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,~~cAClD~~,gBAAA,EAAC,GAAD;AAAA,MAAG,UAAU;AAAA,MAAI,YAAY;AAAA,MAAK,SAAQ;AAAA,~~gBACvC~~;AAAA,IACA,CAAA;AAAA,EACY,CAAA,CACL"}
1	+ {"version":3,"file":"ScoreHistoryTimelineItem.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/ScoreHistoryTimelineItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\n// TODO : Import Timeline Components from core when they are available\nimport TimelineConnector from '@mui/lab/TimelineConnector'\nimport TimelineContent from '@mui/lab/TimelineContent'\nimport TimelineDot from '@mui/lab/TimelineDot'\nimport TimelineSeparator from '@mui/lab/TimelineSeparator'\nimport TimelineItem from '@mui/lab/TimelineItem'\n\ninterface ScoreHistoryTimelineItemProps {\n content?: string\n islast?: boolean\n}\n\nconst ScoreHistoryTimelineItem: React.FC<ScoreHistoryTimelineItemProps> = ({\n content,\n islast = false,\n}) => {\n return (\n <TimelineItem sx={{ minHeight: 0 }}>\n <TimelineSeparator>\n <TimelineDot sx={{ bgcolor: 'divider', boxShadow: 'none', p: 2 }} />\n {!islast && (\n <TimelineConnector\n sx={{\n bgcolor: 'background.paper',\n borderLeft: '1px solid',\n borderColor: 'divider',\n borderRadius: 1,\n m: -4,\n }}\n />\n )}\n </TimelineSeparator>\n <TimelineContent sx={{ pb: 16, pl: 12, pr: 0, pt: 5 }}>\n <P fontSize={13} fontWeight={400} variant=\"subtitle2\">\n {content}\n </P>\n </TimelineContent>\n </TimelineItem>\n )\n}\n\nexport default ScoreHistoryTimelineItem\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAA,CAAqE,EACzE,SAAA,GACA,QAAA,IAAS,GAAA,MAGP,gBAAA,EAAC,GAAD;AAAA,EAAc,IAAI,EAAE,WAAW,EAAE;AAAA,EAAjC,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAa,IAAI;AAAA,IAAE,SAAS;AAAA,IAAW,WAAW;AAAA,IAAQ,GAAG;AAAA,EAAE,EAAI,CAAA,GAClE,CAAC,KACA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,cAAc;AAAA,IACd,GAAG;AAAA,EACL,EACD,CAAA,CAEc,EAAA,CAAA,GACnB,gBAAA,EAAC,GAAD;AAAA,IAAiB,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,IAAI;AAAA,IAAE;AAAA,IAClD,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAG,UAAU;AAAA,MAAI,YAAY;AAAA,MAAK,SAAQ;AAAA,MACvC,UAAA;AAAA,IACA,CAAA;AAAA,EACY,CAAA,CACL"}

package/dist/finstrong/components/shared/TotalCard.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TotalCard.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/TotalCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TotalCardProps {\n balance: number \| React.ReactNode\n title: string\n sx?: object\n}\n\nconst TotalCard: React.FC<TotalCardProps> = ({ balance, title, sx }) => {\n return (\n <Stack\n sx={{\n alignItems: 'center',\n backgroundColor: 'background.default',\n borderRadius: 2,\n height: 72,\n justifyContent: 'center',\n p: 12,\n ...sx,\n }}\n >\n {typeof balance === 'number' ? (\n <P variant=\"h2\">{formatCurrency(balance, '0,0.00')}</P>\n ) : (\n balance\n )}\n\n <P color=\"text.secondary\" fontWeight=\"400\" variant=\"subtitle2\">\n {title}\n </P>\n </Stack>\n )\n}\n\nexport default TotalCard\n"],"mappings":";;;;;AAcA,IAAM,IAAA,CAAuC,EAAE,SAAA,GAAS,OAAA,GAAO,IAAA,EAAA,MAE3D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,~~YATF~~,CAWG,OAAO,KAAY,WAClB,gBAAA,EAAC,GAAD;AAAA,IAAG,SAAQ;AAAA,~~cAAM~~,EAAe,GAAS,QAAQ;AAAA,EAAK,CAAA,IAEtD,GAGF,gBAAA,EAAC,GAAD;AAAA,IAAG,OAAM;AAAA,IAAiB,YAAW;AAAA,IAAM,SAAQ;AAAA,~~cAChD~~;AAAA,EACA,CAAA,CACE"}
1	+ {"version":3,"file":"TotalCard.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/TotalCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TotalCardProps {\n balance: number \| React.ReactNode\n title: string\n sx?: object\n}\n\nconst TotalCard: React.FC<TotalCardProps> = ({ balance, title, sx }) => {\n return (\n <Stack\n sx={{\n alignItems: 'center',\n backgroundColor: 'background.default',\n borderRadius: 2,\n height: 72,\n justifyContent: 'center',\n p: 12,\n ...sx,\n }}\n >\n {typeof balance === 'number' ? (\n <P variant=\"h2\">{formatCurrency(balance, '0,0.00')}</P>\n ) : (\n balance\n )}\n\n <P color=\"text.secondary\" fontWeight=\"400\" variant=\"subtitle2\">\n {title}\n </P>\n </Stack>\n )\n}\n\nexport default TotalCard\n"],"mappings":";;;;;AAcA,IAAM,IAAA,CAAuC,EAAE,SAAA,GAAS,OAAA,GAAO,IAAA,EAAA,MAE3D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EATF,UAAA,CAWG,OAAO,KAAY,WAClB,gBAAA,EAAC,GAAD;AAAA,IAAG,SAAQ;AAAA,IAAM,UAAA,EAAe,GAAS,QAAQ;AAAA,EAAK,CAAA,IAEtD,GAGF,gBAAA,EAAC,GAAD;AAAA,IAAG,OAAM;AAAA,IAAiB,YAAW;AAAA,IAAM,SAAQ;AAAA,IAChD,UAAA;AAAA,EACA,CAAA,CACE"}

package/dist/finstrong/components/shared/Transactions.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Transactions.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/Transactions.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { ConnectDrawer, Drawer, useCategoryStore, useGlobalCopyStore } from '../../../common'\nimport { Transaction } from '../../../core'\nimport { fromUnixToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\nimport { TransactionList } from '../../../transactions'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TransactionsProps {\n transactions: Transaction[]\n amountColor?: string\n amountPosition?: 'flex-start' \| 'center' \| 'flex-end'\n formatDate?: (date: number) => string\n secondaryIcon?: React.ReactNode\n}\n\nconst Transactions: React.FC<TransactionsProps> = ({\n transactions = [],\n amountColor = 'success.main',\n amountPosition = 'center',\n formatDate = fromUnixToDayOfWeekAndDate,\n secondaryIcon,\n}) => {\n const theme = useTheme()\n const { connect: connectCopy, finstrong: copy, categories: categoryCopy } = useGlobalCopyStore()\n const [isOpen, setIsOpen] = React.useState(false)\n const [isConnectAccountsOpen, setIsConnectAccountsOpen] = React.useState(false)\n const { getCategoryName } = useCategoryStore()\n\n const maxVisible = 3\n const hasMoreTransactions = transactions.length > maxVisible\n const remainingCount = transactions.length - maxVisible\n\n let updatedTransactions = transactions\n if (hasMoreTransactions) {\n updatedTransactions = transactions\n .map((eachTransaction) => {\n return {\n ...eachTransaction,\n category:\n categoryCopy.default_categories[eachTransaction.top_level_category_guid!]?.replace(\n /&/g,\n '&',\n ) ?? getCategoryName(eachTransaction.top_level_category_guid!),\n }\n })\n .sort((a, b) => b.date - a.date)\n }\n if (!transactions \|\| transactions.length === 0) {\n return (\n <>\n <Box>\n <Button\n onClick={() => setIsConnectAccountsOpen(true)}\n size=\"small\"\n sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n variant=\"contained\"\n >\n <Text bold={true} variant=\"body1\">\n {copy.connect_more_accounts_button}\n </Text>\n </Button>\n </Box>\n <ConnectDrawer\n onClose={() => setIsConnectAccountsOpen(false)}\n showConnectWidget={isConnectAccountsOpen}\n title={connectCopy.mini_title}\n />\n </>\n )\n }\n\n return (\n <Stack sx={{ gap: 16 }}>\n <Box sx={{ border: `1px solid ${theme.palette.divider}`, borderRadius: 2 }}>\n {transactions\n .slice(0, maxVisible)\n .sort((a, b) => b.date - a.date)\n .map((item, index) => (\n <Stack\n key={index}\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 16,\n pl: 24,\n pt: 14,\n }}\n >\n <Stack sx={{ pb: 14 }}>\n <MerchantLogo\n categoryGuid={item.top_level_category_guid \|\| ''}\n merchantGuid={item.merchant_guid \|\| ''}\n size={32}\n />\n </Stack>\n <Stack\n key={item.guid \|\| index}\n sx={{\n alignItems: amountPosition,\n flexDirection: 'row',\n gap: 12,\n justifyContent: 'space-between',\n ...(index < Math.min(transactions.length, maxVisible) - 1 && {\n borderBottom: `1px solid ${theme.palette.divider}`,\n }),\n pb: 13,\n pr: 24,\n width: '100%',\n }}\n >\n <Stack>\n <P bold={true} variant=\"body1\">\n {item.description}\n </P>\n <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n {!!secondaryIcon && secondaryIcon}\n <Text variant=\"caption\">{formatDate(item.date)}</Text>\n </Stack>\n </Stack>\n\n <P bold={true} sx={{ color: amountColor, flexShrink: 0 }} variant=\"body1\">\n {formatCurrency(item.amount, '0,0.00')}\n </P>\n </Stack>\n </Stack>\n ))}\n </Box>\n\n {hasMoreTransactions && (\n <>\n <Box>\n <Button\n endIcon={<ChevronRight />}\n onClick={() => setIsOpen(true)}\n size=\"small\"\n sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n >\n <Text bold={true} variant=\"body1\">\n {remainingCount} \n {\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_more_transactions\n }\n </Text>\n </Button>\n </Box>\n <Drawer\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n title={\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_transactions\n }\n >\n <TransactionList transaction={updatedTransactions} />\n </Drawer>\n </>\n )}\n </Stack>\n )\n}\n\nexport default Transactions\n"],"mappings":";;;;;;;;;;;;;;AAwBA,IAAM,IAAA,CAA6C,EACjD,cAAA,IAAe,CAAC,GAChB,aAAA,IAAc,gBACd,gBAAA,IAAiB,UACjB,YAAA,IAAa,GACb,eAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAS,GAAa,WAAW,GAAM,YAAY,EAAA,IAAiB,EAAmB,GACzF,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAC1C,CAAC,GAAuB,CAAA,IAA4B,EAAM,SAAS,EAAK,GACxE,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GAEvC,IAAa,GACb,IAAsB,EAAa,SAAS,GAC5C,IAAiB,EAAa,SAAS;AAE7C,MAAI,IAAsB;AAe1B,SAdI,MACF,IAAsB,EACnB,IAAA,CAAK,OACG;AAAA,IACL,GAAG;AAAA,IACH,UACE,EAAa,mBAAmB,EAAgB,uBAAA,GAA2B,QACzE,UACA,GACF,KAAK,EAAgB,EAAgB,uBAAwB;AAAA,EACjE,EACD,EACA,KAAA,CAAM,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,IAE/B,CAAC,KAAgB,EAAa,WAAW,IAEzC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAA,MAAe,EAAyB,EAAI;AAAA,IAC5C,MAAK;AAAA,IACL,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,IAC3C,SAAQ;AAAA,~~cAER~~,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,SAAQ;AAAA,~~gBACvB~~,EAAK;AAAA,IACF,CAAA;AAAA,EACA,CAAA,EACL,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,IACE,SAAA,MAAe,EAAyB,EAAK;AAAA,IAC7C,mBAAmB;AAAA,IACnB,OAAO,EAAY;AAAA,EACpB,CAAA,CACD,EAAA,CAAA,IAKJ,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,GAAG;AAAA,~~cAArB~~,CACE,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,QAAQ,aAAa,EAAM,QAAQ,OAAA;AAAA,QAAW,cAAc;AAAA,MAAE;AAAA,~~gBACtE~~,EACE,MAAM,GAAG,CAAU,EACnB,KAAA,CAAM,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,EAC9B,IAAA,CAAK,GAAM,MACV,gBAAA,EAAC,GAAD;AAAA,QAEE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,~~kBARF~~,CAUE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,IAAI,GAAG;AAAA,~~oBAClB~~,gBAAA,EAAC,GAAD;AAAA,YACE,cAAc,EAAK,2BAA2B;AAAA,YAC9C,cAAc,EAAK,iBAAiB;AAAA,YACpC,MAAM;AAAA,UACP,CAAA;AAAA,QACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,UAEE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,GAAI,IAAQ,KAAK,IAAI,EAAa,QAAQ,CAAU,IAAI,KAAK,EAC3D,cAAc,aAAa,EAAM,QAAQ,OAAA,GAC3C;AAAA,YACA,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,OAAO;AAAA,UACT;AAAA,~~oBAbF~~,CAeE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAG,MAAM;AAAA,YAAM,SAAQ;AAAA,~~sBACpB~~,EAAK;AAAA,UACL,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,eAAe;AAAA,cAAO,YAAY;AAAA,cAAU,KAAK;AAAA,YAAE;AAAA,~~sBAAhE~~,CACG,CAAC,CAAC,KAAiB,GACpB,gBAAA,EAAC,GAAD;AAAA,cAAM,SAAQ;AAAA,~~wBAAW~~,EAAW,EAAK,IAAI;AAAA,YAAQ,CAAA,CAChD;AAAA,~~YACF~~,EAAA,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,YAAG,MAAM;AAAA,YAAM,IAAI;AAAA,cAAE,OAAO;AAAA,cAAa,YAAY;AAAA,YAAE;AAAA,YAAG,SAAQ;AAAA,~~sBAC~~/D,EAAe,EAAK,QAAQ,QAAQ;AAAA,UACpC,CAAA,CACE;AAAA,~~WA3BA~~,EAAK,QAAQ,CA2Bb,CACF;AAAA,~~SA7CA~~,CA6CA,CACR;AAAA,IACA,CAAA,GAEJ,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,MACxB,SAAA,MAAe,EAAU,EAAI;AAAA,MAC7B,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,QAAI,OAAO;AAAA,MAAO;AAAA,~~gBAE3C~~,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,SAAQ;AAAA,~~kBAA1B~~;AAAA,UACG;AAAA,UAAe;AAAA,UAEd,EAAK,sBAAsB,4BACxB;AAAA,QAED;AAAA;IACA,CAAA,EACL,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACR,SAAA,MAAe,EAAU,EAAK;AAAA,MAC9B,OACE,EAAK,sBAAsB,4BACxB;AAAA,~~gBAGL~~,gBAAA,EAAC,GAAD,EAAiB,aAAa,EAAsB,CAAA;AAAA,IAC9C,CAAA,CACR,EAAA,CAAA,CAEC;AAAA;AAEX"}
1	+ {"version":3,"file":"Transactions.es.js","names":[],"sources":["../../../../src/finstrong/components/shared/Transactions.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { MerchantLogo, P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { ConnectDrawer, Drawer, useCategoryStore, useGlobalCopyStore } from '../../../common'\nimport { Transaction } from '../../../core'\nimport { fromUnixToDayOfWeekAndDate } from '../../../core/utils/DateUtil'\nimport { TransactionList } from '../../../transactions'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface TransactionsProps {\n transactions: Transaction[]\n amountColor?: string\n amountPosition?: 'flex-start' \| 'center' \| 'flex-end'\n formatDate?: (date: number) => string\n secondaryIcon?: React.ReactNode\n}\n\nconst Transactions: React.FC<TransactionsProps> = ({\n transactions = [],\n amountColor = 'success.main',\n amountPosition = 'center',\n formatDate = fromUnixToDayOfWeekAndDate,\n secondaryIcon,\n}) => {\n const theme = useTheme()\n const { connect: connectCopy, finstrong: copy, categories: categoryCopy } = useGlobalCopyStore()\n const [isOpen, setIsOpen] = React.useState(false)\n const [isConnectAccountsOpen, setIsConnectAccountsOpen] = React.useState(false)\n const { getCategoryName } = useCategoryStore()\n\n const maxVisible = 3\n const hasMoreTransactions = transactions.length > maxVisible\n const remainingCount = transactions.length - maxVisible\n\n let updatedTransactions = transactions\n if (hasMoreTransactions) {\n updatedTransactions = transactions\n .map((eachTransaction) => {\n return {\n ...eachTransaction,\n category:\n categoryCopy.default_categories[eachTransaction.top_level_category_guid!]?.replace(\n /&/g,\n '&',\n ) ?? getCategoryName(eachTransaction.top_level_category_guid!),\n }\n })\n .sort((a, b) => b.date - a.date)\n }\n if (!transactions \|\| transactions.length === 0) {\n return (\n <>\n <Box>\n <Button\n onClick={() => setIsConnectAccountsOpen(true)}\n size=\"small\"\n sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n variant=\"contained\"\n >\n <Text bold={true} variant=\"body1\">\n {copy.connect_more_accounts_button}\n </Text>\n </Button>\n </Box>\n <ConnectDrawer\n onClose={() => setIsConnectAccountsOpen(false)}\n showConnectWidget={isConnectAccountsOpen}\n title={connectCopy.mini_title}\n />\n </>\n )\n }\n\n return (\n <Stack sx={{ gap: 16 }}>\n <Box sx={{ border: `1px solid ${theme.palette.divider}`, borderRadius: 2 }}>\n {transactions\n .slice(0, maxVisible)\n .sort((a, b) => b.date - a.date)\n .map((item, index) => (\n <Stack\n key={index}\n sx={{\n alignItems: 'center',\n flexDirection: 'row',\n gap: 16,\n pl: 24,\n pt: 14,\n }}\n >\n <Stack sx={{ pb: 14 }}>\n <MerchantLogo\n categoryGuid={item.top_level_category_guid \|\| ''}\n merchantGuid={item.merchant_guid \|\| ''}\n size={32}\n />\n </Stack>\n <Stack\n key={item.guid \|\| index}\n sx={{\n alignItems: amountPosition,\n flexDirection: 'row',\n gap: 12,\n justifyContent: 'space-between',\n ...(index < Math.min(transactions.length, maxVisible) - 1 && {\n borderBottom: `1px solid ${theme.palette.divider}`,\n }),\n pb: 13,\n pr: 24,\n width: '100%',\n }}\n >\n <Stack>\n <P bold={true} variant=\"body1\">\n {item.description}\n </P>\n <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>\n {!!secondaryIcon && secondaryIcon}\n <Text variant=\"caption\">{formatDate(item.date)}</Text>\n </Stack>\n </Stack>\n\n <P bold={true} sx={{ color: amountColor, flexShrink: 0 }} variant=\"body1\">\n {formatCurrency(item.amount, '0,0.00')}\n </P>\n </Stack>\n </Stack>\n ))}\n </Box>\n\n {hasMoreTransactions && (\n <>\n <Box>\n <Button\n endIcon={<ChevronRight />}\n onClick={() => setIsOpen(true)}\n size=\"small\"\n sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n >\n <Text bold={true} variant=\"body1\">\n {remainingCount} \n {\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_more_transactions\n }\n </Text>\n </Button>\n </Box>\n <Drawer\n isOpen={isOpen}\n onClose={() => setIsOpen(false)}\n title={\n copy.key_indicators_borrow.have_manageable_debt_drawer\n .have_manageable_debt_transactions\n }\n >\n <TransactionList transaction={updatedTransactions} />\n </Drawer>\n </>\n )}\n </Stack>\n )\n}\n\nexport default Transactions\n"],"mappings":"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"}

package/dist/finstrong/util/finstrongUtils.es.js CHANGED Viewed

@@ -97,7 +97,10 @@ var Q = (t) => t * (180 / Math.PI), Z = (t, r) => [
 }, b = (t, r) => ({
   [O.DateOfBirth]: (e) => T(/* @__PURE__ */ new Date(Number(e) * 1e3), "MMM d, yyyy"),
   [O.MonthlyIncome]: (e) => S(Number(e), "0.00")
-})[t]?.(r) ?? String(r), it = (t) => t !== null ? Math.round(t * 100) : null, at = (t) => A(new Date((/* @__PURE__ */ new Date()).getFullYear(), t - 1, 1), I.MONTH_SHORT), ut = (t) => {
+})[t]?.(r) ?? String(r), it = (t) => t !== null ? Math.round(t * 100) : null, at = (t) => {
+  const r = new Date((/* @__PURE__ */ new Date()).getFullYear(), t - 1, 1);
+  return A(r, I.MONTH_SHORT);
+}, ut = (t) => {
   const { good: r, poor: e } = l.daysOfCashOnHand;
   return t === null ? "MISSING" : t >= r ? "GOOD" : t >= e ? "FAIR" : "OFF_TRACK";
 }, st = (t) => {