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

package/dist/insights/components/insights/UserFeedback/UserFeedback.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserFeedback.es.js","names":[],"sources":["../../../../../src/insights/components/insights/UserFeedback/UserFeedback.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Alert, Box, Grow, Stack, TextField, ToggleButtonGroup } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BeatCard } from '../../shared/InsightsCard/BeatCard'\nimport { InsightButton } from '../../shared/InsightsCard/InsightButton'\n\nimport { StyledToggleButton } from './StyledToggleButton'\nimport { SurveyTextProps, UserFeedbackProps } from './Types'\n\nexport const UserFeedback: React.FC<UserFeedbackProps> = ({\n  beat,\n  buttonProps,\n  content,\n  handleFeedbackSubmit,\n  header,\n  isMini,\n  ...restProps\n}) => {\n  const theme = useTheme()\n\n  const DEFAULT_ANSWER_SET = new Array(5).fill(false)\n\n  const [questionNumber, setQuestionNumber] = React.useState<number>(0)\n  const [options, setOptions] = React.useState<boolean[]>(DEFAULT_ANSWER_SET)\n  const [writtenFeedback, setWrittenFeedback] = React.useState<string>('')\n  const [allAnswers, setAllAnswers] = React.useState<(number | string)[]>([])\n\n  const selectedOptionIndex = options.findIndex(Boolean)\n\n  const QUESTIONS = [content.question1, content.question2, content.question3]\n  const IS_SURVEY_QUESTION = questionNumber < 2\n  const IS_FEEDBACK_QUESTION = questionNumber === 2\n  const IS_LAST_QUESTION = questionNumber === QUESTIONS.length - 1\n  const IS_END_OF_SURVEY = questionNumber === QUESTIONS.length\n\n  const handleSetSelectedButtonNumber = (\n    _event: React.MouseEvent<HTMLElement>,\n    selectedOption: string,\n  ) => {\n    setOptions(options.map((_o, i) => i.toString() === selectedOption))\n  }\n\n  const handleButtonClick = () => {\n    let answer: number | string\n    if (IS_SURVEY_QUESTION) {\n      answer = selectedOptionIndex + 1 // Add one for 0 index\n    } else if (IS_FEEDBACK_QUESTION) {\n      answer = writtenFeedback\n    } else {\n      return // Should not happen, but guard against it\n    }\n\n    // Store the current answer\n    const updatedAnswers = [...allAnswers, answer]\n    setAllAnswers(updatedAnswers)\n\n    // Move to next question\n    setQuestionNumber(questionNumber + 1)\n    setOptions(DEFAULT_ANSWER_SET)\n    setWrittenFeedback('')\n\n    // Only submit when we reach the end of the survey\n    if (IS_LAST_QUESTION) {\n      handleFeedbackSubmit(updatedAnswers)\n    }\n  }\n\n  const surveyTextProps: SurveyTextProps = {\n    component: 'span',\n    fontWeight: 'bold',\n    variant: 'subtitle2',\n    truncate: false,\n  }\n\n  return (\n    <BeatCard\n      beat={beat}\n      button={\n        !IS_END_OF_SURVEY && (\n          <InsightButton\n            beat={{\n              ...beat,\n              call_to_action: !IS_LAST_QUESTION ? content.continue : content.submit_feedback,\n            }}\n            {...buttonProps}\n            disabled={\n              (IS_SURVEY_QUESTION && !options.some(Boolean)) ||\n              (IS_FEEDBACK_QUESTION && !writtenFeedback.trim())\n            }\n            onClick={handleButtonClick}\n          />\n        )\n      }\n      contentProps={{\n        hideDescription: true,\n      }}\n      header={\n        isMini\n          ? undefined\n          : {\n              ...header,\n              sx: {\n                mb: 0,\n              },\n            }\n      }\n      {...restProps}\n    >\n      <Stack width=\"100%\">\n        <Text {...surveyTextProps} color={theme.palette.secondary.main} fontWeight=\"regular\">\n          {content.description}\n        </Text>\n        <Stack mb={IS_END_OF_SURVEY ? 0 : 20} mt={20}>\n          <Box\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              justifyContent: 'space-between',\n            }}\n          >\n            <Text {...surveyTextProps}>\n              {!IS_END_OF_SURVEY ? `${QUESTIONS[questionNumber]} ` : content.thank_you}\n            </Text>\n            {!IS_END_OF_SURVEY && (\n              <Text color={theme.palette.secondary.main} component=\"span\" variant=\"caption\">\n                ({questionNumber + 1}/{QUESTIONS.length})\n              </Text>\n            )}\n          </Box>\n\n          <Stack mt={16}>\n            {IS_SURVEY_QUESTION && (\n              <>\n                <ToggleButtonGroup\n                  exclusive={true}\n                  fullWidth={true}\n                  onChange={handleSetSelectedButtonNumber}\n                  sx={{ justifyContent: 'center' }}\n                  value={selectedOptionIndex.toString()}\n                >\n                  {options.map((_option, i) => (\n                    <StyledToggleButton key={i} value={i.toString()}>\n                      {i + 1}\n                    </StyledToggleButton>\n                  ))}\n                </ToggleButtonGroup>\n                <Box alignItems=\"center\" display=\"flex\" justifyContent=\"space-between\" mt={4}>\n                  <Text {...surveyTextProps}>{content.strongly_disagree}</Text>\n                  <Text {...surveyTextProps}>{content.strongly_agree}</Text>\n                </Box>\n              </>\n            )}\n            {IS_FEEDBACK_QUESTION && (\n              <TextField\n                autoFocus={true}\n                id=\"feedback\"\n                label={content.feedback}\n                minRows={2}\n                multiline={true}\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n                  setWrittenFeedback(event.target.value)\n                }}\n                placeholder={content.feedback_placeholder}\n                value={writtenFeedback}\n              />\n            )}\n            {IS_END_OF_SURVEY && (\n              <Grow in={true}>\n                <Alert severity=\"success\" variant=\"filled\">\n                  {content.feedback_sent}\n                </Alert>\n              </Grow>\n            )}\n          </Stack>\n        </Stack>\n      </Stack>\n    </BeatCard>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"UserFeedback.es.js","names":[],"sources":["../../../../../src/insights/components/insights/UserFeedback/UserFeedback.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Alert, Box, Grow, Stack, TextField, ToggleButtonGroup } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\n\nimport { BeatCard } from '../../shared/InsightsCard/BeatCard'\nimport { InsightButton } from '../../shared/InsightsCard/InsightButton'\n\nimport { StyledToggleButton } from './StyledToggleButton'\nimport { SurveyTextProps, UserFeedbackProps } from './Types'\n\nexport const UserFeedback: React.FC<UserFeedbackProps> = ({\n  beat,\n  buttonProps,\n  content,\n  handleFeedbackSubmit,\n  header,\n  isMini,\n  ...restProps\n}) => {\n  const theme = useTheme()\n\n  const DEFAULT_ANSWER_SET = new Array(5).fill(false)\n\n  const [questionNumber, setQuestionNumber] = React.useState<number>(0)\n  const [options, setOptions] = React.useState<boolean[]>(DEFAULT_ANSWER_SET)\n  const [writtenFeedback, setWrittenFeedback] = React.useState<string>('')\n  const [allAnswers, setAllAnswers] = React.useState<(number | string)[]>([])\n\n  const selectedOptionIndex = options.findIndex(Boolean)\n\n  const QUESTIONS = [content.question1, content.question2, content.question3]\n  const IS_SURVEY_QUESTION = questionNumber < 2\n  const IS_FEEDBACK_QUESTION = questionNumber === 2\n  const IS_LAST_QUESTION = questionNumber === QUESTIONS.length - 1\n  const IS_END_OF_SURVEY = questionNumber === QUESTIONS.length\n\n  const handleSetSelectedButtonNumber = (\n    _event: React.MouseEvent<HTMLElement>,\n    selectedOption: string,\n  ) => {\n    setOptions(options.map((_o, i) => i.toString() === selectedOption))\n  }\n\n  const handleButtonClick = () => {\n    let answer: number | string\n    if (IS_SURVEY_QUESTION) {\n      answer = selectedOptionIndex + 1 // Add one for 0 index\n    } else if (IS_FEEDBACK_QUESTION) {\n      answer = writtenFeedback\n    } else {\n      return // Should not happen, but guard against it\n    }\n\n    // Store the current answer\n    const updatedAnswers = [...allAnswers, answer]\n    setAllAnswers(updatedAnswers)\n\n    // Move to next question\n    setQuestionNumber(questionNumber + 1)\n    setOptions(DEFAULT_ANSWER_SET)\n    setWrittenFeedback('')\n\n    // Only submit when we reach the end of the survey\n    if (IS_LAST_QUESTION) {\n      handleFeedbackSubmit(updatedAnswers)\n    }\n  }\n\n  const surveyTextProps: SurveyTextProps = {\n    component: 'span',\n    fontWeight: 'bold',\n    variant: 'subtitle2',\n    truncate: false,\n  }\n\n  return (\n    <BeatCard\n      beat={beat}\n      button={\n        !IS_END_OF_SURVEY && (\n          <InsightButton\n            beat={{\n              ...beat,\n              call_to_action: !IS_LAST_QUESTION ? content.continue : content.submit_feedback,\n            }}\n            {...buttonProps}\n            disabled={\n              (IS_SURVEY_QUESTION && !options.some(Boolean)) ||\n              (IS_FEEDBACK_QUESTION && !writtenFeedback.trim())\n            }\n            onClick={handleButtonClick}\n          />\n        )\n      }\n      contentProps={{\n        hideDescription: true,\n      }}\n      header={\n        isMini\n          ? undefined\n          : {\n              ...header,\n              sx: {\n                mb: 0,\n              },\n            }\n      }\n      {...restProps}\n    >\n      <Stack width=\"100%\">\n        <Text {...surveyTextProps} color={theme.palette.secondary.main} fontWeight=\"regular\">\n          {content.description}\n        </Text>\n        <Stack mb={IS_END_OF_SURVEY ? 0 : 20} mt={20}>\n          <Box\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              justifyContent: 'space-between',\n            }}\n          >\n            <Text {...surveyTextProps}>\n              {!IS_END_OF_SURVEY ? `${QUESTIONS[questionNumber]} ` : content.thank_you}\n            </Text>\n            {!IS_END_OF_SURVEY && (\n              <Text color={theme.palette.secondary.main} component=\"span\" variant=\"caption\">\n                ({questionNumber + 1}/{QUESTIONS.length})\n              </Text>\n            )}\n          </Box>\n\n          <Stack mt={16}>\n            {IS_SURVEY_QUESTION && (\n              <>\n                <ToggleButtonGroup\n                  exclusive={true}\n                  fullWidth={true}\n                  onChange={handleSetSelectedButtonNumber}\n                  sx={{ justifyContent: 'center' }}\n                  value={selectedOptionIndex.toString()}\n                >\n                  {options.map((_option, i) => (\n                    <StyledToggleButton key={i} value={i.toString()}>\n                      {i + 1}\n                    </StyledToggleButton>\n                  ))}\n                </ToggleButtonGroup>\n                <Box alignItems=\"center\" display=\"flex\" justifyContent=\"space-between\" mt={4}>\n                  <Text {...surveyTextProps}>{content.strongly_disagree}</Text>\n                  <Text {...surveyTextProps}>{content.strongly_agree}</Text>\n                </Box>\n              </>\n            )}\n            {IS_FEEDBACK_QUESTION && (\n              <TextField\n                autoFocus={true}\n                id=\"feedback\"\n                label={content.feedback}\n                minRows={2}\n                multiline={true}\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n                  setWrittenFeedback(event.target.value)\n                }}\n                placeholder={content.feedback_placeholder}\n                value={writtenFeedback}\n              />\n            )}\n            {IS_END_OF_SURVEY && (\n              <Grow in={true}>\n                <Alert severity=\"success\" variant=\"filled\">\n                  {content.feedback_sent}\n                </Alert>\n              </Grow>\n            )}\n          </Stack>\n        </Stack>\n      </Stack>\n    </BeatCard>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/insights/WeeklyNoSpendDays/BubbleWeek.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleWeek.es.js","names":[],"sources":["../../../../../src/insights/components/insights/WeeklyNoSpendDays/BubbleWeek.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '@mxenabled/mxui'\nimport { CheckCircle } from '@mxenabled/mx-icons'\n\nimport { useTheme } from '@mui/material/styles'\nimport { Stack } from '@mui/system'\n\ninterface BubbleWeekProps {\n  noSpendDays: {\n    [key in string]?: string\n  }\n  daysOfTheWeek: Array<{\n    name: string\n    altText: string\n  }>\n}\n\nexport const BubbleWeek: React.FC<BubbleWeekProps> = ({ noSpendDays, daysOfTheWeek }) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      direction=\"row\"\n      sx={{\n        alignItems: 'center',\n        fontSize: 13,\n        my: 8,\n        justifyContent: 'space-between',\n        width: '100%',\n      }}\n    >\n      {daysOfTheWeek.map((day, index) => {\n        const isNoSpendDay = noSpendDays[day.name]\n        return (\n          <Stack\n            aria-label={day.altText}\n            key={index}\n            role=\"img\"\n            spacing={3}\n            sx={{ alignItems: 'center' }}\n            tabIndex={0}\n          >\n            <Text\n              aria-hidden=\"true\"\n              sx={{\n                color: isNoSpendDay ? 'success.main' : 'text.secondary',\n                fontWeight: isNoSpendDay ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {day.name}\n            </Text>\n            {isNoSpendDay ? (\n              <CheckCircle filled={true} size={24} sx={{ color: 'success.main' }} />\n            ) : (\n              <svg aria-hidden=\"true\" fill=\"none\" height=\"24\" viewBox=\"0 0 25 24\" width=\"24\">\n                <circle\n                  cx=\"12.6641\"\n                  cy=\"12\"\n                  fill={theme.palette.background.highlight as string}\n                  r=\"12\"\n                />\n              </svg>\n            )}\n          </Stack>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;AAkBA,IAAa,IAAA,CAAyC,EAAE,aAAA,GAAa,eAAA,EAAA,MAAoB;AACvF,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,cAEC,EAAc,IAAA,CAAK,GAAK,MAAU;AACjC,YAAM,IAAe,EAAY,EAAI,IAAA;AACrC,aACE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,EAAI;AAAA,QAEhB,MAAK;AAAA,QACL,SAAS;AAAA,QACT,IAAI,EAAE,YAAY,SAAS;AAAA,QAC3B,UAAU;AAAA,kBANZ,CAQE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAY;AAAA,UACZ,IAAI;AAAA,YACF,OAAO,IAAe,iBAAiB;AAAA,YACvC,YAAY,IAAe,MAAM;AAAA,UACnC;AAAA,UACA,SAAQ;AAAA,oBAEP,EAAI;AAAA,QACD,CAAA,GACL,IACC,gBAAA,EAAC,GAAD;AAAA,UAAa,QAAQ;AAAA,UAAM,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,eAAe;AAAA,QAAI,CAAA,IAErE,gBAAA,EAAC,OAAD;AAAA,UAAK,eAAY;AAAA,UAAO,MAAK;AAAA,UAAO,QAAO;AAAA,UAAK,SAAQ;AAAA,UAAY,OAAM;AAAA,oBACxE,gBAAA,EAAC,UAAD;AAAA,YACE,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAM,EAAM,QAAQ,WAAW;AAAA,YAC/B,GAAE;AAAA,UACH,CAAA;AAAA,QACE,CAAA,CAEF;AAAA,SA5BA,CA4BA;AAAA,IAEX,CAAC;AAAA,EACI,CAAA;AAEX"}
+{"version":3,"file":"BubbleWeek.es.js","names":[],"sources":["../../../../../src/insights/components/insights/WeeklyNoSpendDays/BubbleWeek.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '@mxenabled/mxui'\nimport { CheckCircle } from '@mxenabled/mx-icons'\n\nimport { useTheme } from '@mui/material/styles'\nimport { Stack } from '@mui/system'\n\ninterface BubbleWeekProps {\n  noSpendDays: {\n    [key in string]?: string\n  }\n  daysOfTheWeek: Array<{\n    name: string\n    altText: string\n  }>\n}\n\nexport const BubbleWeek: React.FC<BubbleWeekProps> = ({ noSpendDays, daysOfTheWeek }) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      direction=\"row\"\n      sx={{\n        alignItems: 'center',\n        fontSize: 13,\n        my: 8,\n        justifyContent: 'space-between',\n        width: '100%',\n      }}\n    >\n      {daysOfTheWeek.map((day, index) => {\n        const isNoSpendDay = noSpendDays[day.name]\n        return (\n          <Stack\n            aria-label={day.altText}\n            key={index}\n            role=\"img\"\n            spacing={3}\n            sx={{ alignItems: 'center' }}\n            tabIndex={0}\n          >\n            <Text\n              aria-hidden=\"true\"\n              sx={{\n                color: isNoSpendDay ? 'success.main' : 'text.secondary',\n                fontWeight: isNoSpendDay ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {day.name}\n            </Text>\n            {isNoSpendDay ? (\n              <CheckCircle filled={true} size={24} sx={{ color: 'success.main' }} />\n            ) : (\n              <svg aria-hidden=\"true\" fill=\"none\" height=\"24\" viewBox=\"0 0 25 24\" width=\"24\">\n                <circle\n                  cx=\"12.6641\"\n                  cy=\"12\"\n                  fill={theme.palette.background.highlight as string}\n                  r=\"12\"\n                />\n              </svg>\n            )}\n          </Stack>\n        )\n      })}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;AAkBA,IAAa,IAAA,CAAyC,EAAE,aAAA,GAAa,eAAA,EAAA,MAAoB;AACvF,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,WAAU;AAAA,IACV,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,gBAAgB;AAAA,MAChB,OAAO;AAAA,IACT;AAAA,IAEC,UAAA,EAAc,IAAA,CAAK,GAAK,MAAU;AACjC,YAAM,IAAe,EAAY,EAAI,IAAA;AACrC,aACE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,EAAI;AAAA,QAEhB,MAAK;AAAA,QACL,SAAS;AAAA,QACT,IAAI,EAAE,YAAY,SAAS;AAAA,QAC3B,UAAU;AAAA,QANZ,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,UACE,eAAY;AAAA,UACZ,IAAI;AAAA,YACF,OAAO,IAAe,iBAAiB;AAAA,YACvC,YAAY,IAAe,MAAM;AAAA,UACnC;AAAA,UACA,SAAQ;AAAA,UAEP,UAAA,EAAI;AAAA,QACD,CAAA,GACL,IACC,gBAAA,EAAC,GAAD;AAAA,UAAa,QAAQ;AAAA,UAAM,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,eAAe;AAAA,QAAI,CAAA,IAErE,gBAAA,EAAC,OAAD;AAAA,UAAK,eAAY;AAAA,UAAO,MAAK;AAAA,UAAO,QAAO;AAAA,UAAK,SAAQ;AAAA,UAAY,OAAM;AAAA,UACxE,UAAA,gBAAA,EAAC,UAAD;AAAA,YACE,IAAG;AAAA,YACH,IAAG;AAAA,YACH,MAAM,EAAM,QAAQ,WAAW;AAAA,YAC/B,GAAE;AAAA,UACH,CAAA;AAAA,QACE,CAAA,CAEF;AAAA,MA5BA,GAAA,CA4BA;AAAA,IAEX,CAAC;AAAA,EACI,CAAA;AAEX"}

package/dist/insights/components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeeklyNoSpendDays.es.js","names":[],"sources":["../../../../../src/insights/components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Stack } from '@mui/system'\n\nimport { BeatCard, InsightButton, LinedCardZeroState } from '../..'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\nimport { CommonBeatProps } from '../../../types/CommonBeat'\nimport { Confetti } from '../../shared/Confetti'\n\nimport { BubbleWeek } from './BubbleWeek'\nimport { Wallet } from './NoSpendIcons'\n\nexport interface WeeklyNoSpendDaysProps extends CommonBeatProps {\n  displayData: {\n    noSpendDays: {\n      [key in string]?: string\n    }\n    daysOfTheWeek: Array<{\n      name: string\n      altText: string\n    }>\n  }\n}\n\nexport const WeeklyNoSpendDays: React.FC<WeeklyNoSpendDaysProps> = ({\n  beat,\n  buttonProps,\n  isZeroState,\n  displayData,\n  ...restProps\n}) => {\n  const { no_spend_days } = beat.payload\n  const { noSpendDays, daysOfTheWeek } = displayData\n  const DollaDollaBill = Wallet[no_spend_days.length || 0]\n  const containerRef = React.useRef<HTMLDivElement>(null!)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  return (\n    <BeatCard {...restProps} beat={beat} button={<InsightButton {...buttonProps} beat={beat} />}>\n      {isZeroState ? (\n        <LinedCardZeroState />\n      ) : (\n        <Stack\n          ref={containerRef}\n          sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}\n        >\n          <img alt=\"\" aria-hidden=\"true\" src={DollaDollaBill} width={138} />\n          {no_spend_days?.length >= 4 && (\n            <Confetti height={height} shouldRun={true} width={width} />\n          )}\n          <BubbleWeek daysOfTheWeek={daysOfTheWeek} noSpendDays={noSpendDays} />\n        </Stack>\n      )}\n    </BeatCard>\n  )\n}\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,IAAA,CAAuD,EAClE,MAAA,GACA,aAAA,GACA,aAAA,GACA,aAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAK,SACzB,EAAE,aAAA,GAAa,eAAA,EAAA,IAAkB,GACjC,IAAiB,EAAO,EAAc,UAAU,CAAA,GAChD,IAAe,EAAM,OAAuB,IAAK,GACjD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY;AAE7D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAU,GAAI;AAAA,IAAiB,MAAA;AAAA,IAAM,QAAQ,gBAAA,EAAC,GAAD;AAAA,MAAe,GAAI;AAAA,MAAmB,MAAA;AAAA,IAAO,CAAA;AAAA,cACvF,IACC,gBAAA,EAAC,GAAD,CAAqB,CAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,gBAAgB;AAAA,QAAU,OAAO;AAAA,MAAO;AAAA,gBAFtE;AAAA,QAIE,gBAAA,EAAC,OAAD;AAAA,UAAK,KAAI;AAAA,UAAG,eAAY;AAAA,UAAO,KAAK;AAAA,UAAgB,OAAO;AAAA,QAAM,CAAA;AAAA,QAChE,GAAe,UAAU,KACxB,gBAAA,EAAC,GAAD;AAAA,UAAkB,QAAA;AAAA,UAAQ,WAAW;AAAA,UAAa,OAAA;AAAA,QAAQ,CAAA;AAAA,QAE5D,gBAAA,EAAC,GAAD;AAAA,UAA2B,eAAA;AAAA,UAA4B,aAAA;AAAA,QAAc,CAAA;AAAA,MAChE;AAAA;EAED,CAAA;AAEd"}
+{"version":3,"file":"WeeklyNoSpendDays.es.js","names":[],"sources":["../../../../../src/insights/components/insights/WeeklyNoSpendDays/WeeklyNoSpendDays.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Stack } from '@mui/system'\n\nimport { BeatCard, InsightButton, LinedCardZeroState } from '../..'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\nimport { CommonBeatProps } from '../../../types/CommonBeat'\nimport { Confetti } from '../../shared/Confetti'\n\nimport { BubbleWeek } from './BubbleWeek'\nimport { Wallet } from './NoSpendIcons'\n\nexport interface WeeklyNoSpendDaysProps extends CommonBeatProps {\n  displayData: {\n    noSpendDays: {\n      [key in string]?: string\n    }\n    daysOfTheWeek: Array<{\n      name: string\n      altText: string\n    }>\n  }\n}\n\nexport const WeeklyNoSpendDays: React.FC<WeeklyNoSpendDaysProps> = ({\n  beat,\n  buttonProps,\n  isZeroState,\n  displayData,\n  ...restProps\n}) => {\n  const { no_spend_days } = beat.payload\n  const { noSpendDays, daysOfTheWeek } = displayData\n  const DollaDollaBill = Wallet[no_spend_days.length || 0]\n  const containerRef = React.useRef<HTMLDivElement>(null!)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  return (\n    <BeatCard {...restProps} beat={beat} button={<InsightButton {...buttonProps} beat={beat} />}>\n      {isZeroState ? (\n        <LinedCardZeroState />\n      ) : (\n        <Stack\n          ref={containerRef}\n          sx={{ alignItems: 'center', justifyContent: 'center', width: '100%' }}\n        >\n          <img alt=\"\" aria-hidden=\"true\" src={DollaDollaBill} width={138} />\n          {no_spend_days?.length >= 4 && (\n            <Confetti height={height} shouldRun={true} width={width} />\n          )}\n          <BubbleWeek daysOfTheWeek={daysOfTheWeek} noSpendDays={noSpendDays} />\n        </Stack>\n      )}\n    </BeatCard>\n  )\n}\n"],"mappings":";;;;;;;;;;AAwBA,IAAa,IAAA,CAAuD,EAClE,MAAA,GACA,aAAA,GACA,aAAA,GACA,aAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAK,SACzB,EAAE,aAAA,GAAa,eAAA,EAAA,IAAkB,GACjC,IAAiB,EAAO,EAAc,UAAU,CAAA,GAChD,IAAe,EAAM,OAAuB,IAAK,GACjD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY;AAE7D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAU,GAAI;AAAA,IAAiB,MAAA;AAAA,IAAM,QAAQ,gBAAA,EAAC,GAAD;AAAA,MAAe,GAAI;AAAA,MAAmB,MAAA;AAAA,IAAO,CAAA;AAAA,IACvF,UAAA,IACC,gBAAA,EAAC,GAAD,CAAqB,CAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,gBAAgB;AAAA,QAAU,OAAO;AAAA,MAAO;AAAA,MAFtE,UAAA;AAAA,QAIE,gBAAA,EAAC,OAAD;AAAA,UAAK,KAAI;AAAA,UAAG,eAAY;AAAA,UAAO,KAAK;AAAA,UAAgB,OAAO;AAAA,QAAM,CAAA;AAAA,QAChE,GAAe,UAAU,KACxB,gBAAA,EAAC,GAAD;AAAA,UAAkB,QAAA;AAAA,UAAQ,WAAW;AAAA,UAAa,OAAA;AAAA,QAAQ,CAAA;AAAA,QAE5D,gBAAA,EAAC,GAAD;AAAA,UAA2B,eAAA;AAAA,UAA4B,aAAA;AAAA,QAAc,CAAA;AAAA,MAChE;AAAA;EAED,CAAA;AAEd"}

package/dist/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.es.js

@@ -1,36 +1,36 @@
-import { TipSection as v } from "./TipSection.es.js";
-import { useMemo as C, useState as k } from "react";
+import { TipSection as C } from "./TipSection.es.js";
+import { useMemo as k, useState as $ } from "react";
 import l from "@mui/material/Stack";
-import { H3 as $, Text as j } from "@mxenabled/mxui";
+import { H3 as j, Text as w } from "@mxenabled/mxui";
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import w from "@mui/material/Box";
-import B from "@mui/material/Tab";
-import D from "@mui/material/Tabs";
-var z = ({ ariaLabel: h, beat: b, chart: d, children: g, data: t, defaultSelectedIndex: m, icon: x, onTabChange: f, tipSection: p }) => {
-  const { heading: o, subHeading: i } = b, [n, c] = k(C(() => m ?? (t.length ? t.length - 1 : 0), [m, t.length])), u = (e, a) => {
-    f?.(a), c(a);
-  }, T = (e) => {
-    c(e);
+import B from "@mui/material/Box";
+import D from "@mui/material/Tab";
+import H from "@mui/material/Tabs";
+var z = ({ ariaLabel: h, beat: b, chart: d, children: x, data: a, defaultSelectedIndex: c, icon: g, onTabChange: f, tipSection: m }) => {
+  const { heading: o, subHeading: i } = b, u = k(() => c ?? (a.length ? a.length - 1 : 0), [c, a.length]), [n, p] = $(u), T = (e, t) => {
+    f?.(t), p(t);
+  }, v = (e) => {
+    p(e);
   };
-  return /* @__PURE__ */ s(w, {
+  return /* @__PURE__ */ s(B, {
     sx: {
       bgcolor: "background.paper",
       width: "100%"
     },
     children: [
-      /* @__PURE__ */ r(D, {
+      /* @__PURE__ */ r(H, {
         "aria-label": h,
-        onChange: u,
+        onChange: T,
         value: n,
         variant: "fullWidth",
-        children: t.map((e, a) => /* @__PURE__ */ r(B, {
-          id: `transaction-details-tab-${a}`,
+        children: a.map((e, t) => /* @__PURE__ */ r(D, {
+          id: `transaction-details-tab-${t}`,
           label: e.label,
           sx: {
             minWidth: "auto",
             px: 0
           }
-        }, `${e.label}-${a}`))
+        }, `${e.label}-${t}`))
       }),
       /* @__PURE__ */ r(l, {
         sx: {
@@ -39,13 +39,13 @@ var z = ({ ariaLabel: h, beat: b, chart: d, children: g, data: t, defaultSelecte
         },
         children: (o || i) && /* @__PURE__ */ s(l, {
           sx: { gap: 4 },
-          children: [o && /* @__PURE__ */ r($, { children: o }), i && /* @__PURE__ */ s(l, {
+          children: [o && /* @__PURE__ */ r(j, { children: o }), i && /* @__PURE__ */ s(l, {
             sx: {
               alignItems: "center",
               flexDirection: "row",
               gap: 8
             },
-            children: [x, /* @__PURE__ */ r(j, {
+            children: [g, /* @__PURE__ */ r(w, {
               textTransform: "uppercase",
               variant: "body2",
               children: i.description
@@ -53,9 +53,9 @@ var z = ({ ariaLabel: h, beat: b, chart: d, children: g, data: t, defaultSelecte
           })]
         })
       }),
-      d?.(n, T),
-      p && /* @__PURE__ */ r(v, { ...p }),
-      g?.(n)
+      d?.(n, v),
+      m && /* @__PURE__ */ r(C, { ...m }),
+      x?.(n)
     ]
   });
 };

package/dist/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartDrawerTemplate.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\n\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { TipSection } from './TipSection'\nimport type { TipSectionProps } from './TipSection'\n\ninterface SubHeading {\n  category_guid: string\n  description: string\n  merchant_guid: string\n}\n\nexport interface DrawerBeat {\n  heading?: string\n  subHeading?: SubHeading\n}\n\ninterface TabData {\n  ariaLabel?: string\n  formattedAmount: string\n  label: string\n  value: number\n}\n\nexport interface ChartDrawerTemplateProps {\n  ariaLabel: string\n  beat: DrawerBeat\n  chart: (selectedIndex: number, onBarClick: (index: number) => void) => React.ReactNode\n  children?: (selectedIndex: number) => React.ReactNode\n  data: TabData[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n}\n\nexport const ChartDrawerTemplate = ({\n  ariaLabel,\n  beat,\n  chart,\n  children,\n  data,\n  defaultSelectedIndex,\n  icon,\n  onTabChange,\n  tipSection,\n}: ChartDrawerTemplateProps) => {\n  const { heading, subHeading } = beat\n\n  const initialIndex = useMemo(\n    () => defaultSelectedIndex ?? (data.length ? data.length - 1 : 0),\n    [defaultSelectedIndex, data.length],\n  )\n\n  const [tabValue, setTabValue] = useState(initialIndex)\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    onTabChange?.(newValue)\n    setTabValue(newValue)\n  }\n\n  const handleBarClick = (dataIndex: number) => {\n    setTabValue(dataIndex)\n  }\n\n  return (\n    <Box sx={{ bgcolor: 'background.paper', width: '100%' }}>\n      <Tabs aria-label={ariaLabel} onChange={handleTabChange} value={tabValue} variant=\"fullWidth\">\n        {data.map((item, index) => (\n          <Tab\n            id={`transaction-details-tab-${index}`}\n            key={`${item.label}-${index}`}\n            label={item.label}\n            sx={{ minWidth: 'auto', px: 0 }}\n          />\n        ))}\n      </Tabs>\n\n      <Stack sx={{ pt: 16, px: 24 }}>\n        {(heading || subHeading) && (\n          <Stack sx={{ gap: 4 }}>\n            {heading && <H3>{heading}</H3>}\n\n            {subHeading && (\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n                {icon}\n                <Text textTransform=\"uppercase\" variant=\"body2\">\n                  {subHeading.description}\n                </Text>\n              </Stack>\n            )}\n          </Stack>\n        )}\n      </Stack>\n\n      {chart?.(tabValue, handleBarClick)}\n\n      {tipSection && <TipSection {...tipSection} />}\n\n      {children?.(tabValue)}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AA0CA,IAAa,IAAA,CAAuB,EAClC,WAAA,GACA,MAAA,GACA,OAAA,GACA,UAAA,GACA,MAAA,GACA,sBAAA,GACA,MAAA,GACA,aAAA,GACA,YAAA,EAAA,MAC8B;AAC9B,QAAM,EAAE,SAAA,GAAS,YAAA,EAAA,IAAe,GAO1B,CAAC,GAAU,CAAA,IAAe,EALX,EAAA,MACb,MAAyB,EAAK,SAAS,EAAK,SAAS,IAAI,IAC/D,CAAC,GAAsB,EAAK,MAAM,CAGK,CAAY,GAE/C,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,IAAc,CAAQ,GACtB,EAAY,CAAQ;AAAA,EACtB,GAEM,IAAA,CAAkB,MAAsB;AAC5C,IAAA,EAAY,CAAS;AAAA,EACvB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,OAAO;AAAA,IAAO;AAAA,cAAtD;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,cAAY;AAAA,QAAW,UAAU;AAAA,QAAiB,OAAO;AAAA,QAAU,SAAQ;AAAA,kBAC9E,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI,2BAA2B,CAAA;AAAA,UAE/B,OAAO,EAAK;AAAA,UACZ,IAAI;AAAA,YAAE,UAAU;AAAA,YAAQ,IAAI;AAAA,UAAE;AAAA,QAC/B,GAHM,GAAG,EAAK,KAAA,IAAS,CAAA,EAGvB,CACF;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,mBACxB,KAAW,MACX,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,KAAK,EAAE;AAAA,oBAApB,CACG,KAAW,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAY,CAAA,GAE5B,KACC,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,YAAY;AAAA,cAAU,eAAe;AAAA,cAAO,KAAK;AAAA,YAAE;AAAA,sBAAhE,CACG,GACD,gBAAA,EAAC,GAAD;AAAA,cAAM,eAAc;AAAA,cAAY,SAAQ;AAAA,wBACrC,EAAW;AAAA,YACR,CAAA,CACD;AAAA,YAEJ;AAAA;MAEJ,CAAA;AAAA,MAEN,IAAQ,GAAU,CAAc;AAAA,MAEhC,KAAc,gBAAA,EAAC,GAAD,EAAY,GAAI,EAAa,CAAA;AAAA,MAE3C,IAAW,CAAQ;AAAA,IACjB;AAAA;AAET"}
+{"version":3,"file":"ChartDrawerTemplate.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/ChartDrawerTemplate.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react'\n\nimport { H3, Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { TipSection } from './TipSection'\nimport type { TipSectionProps } from './TipSection'\n\ninterface SubHeading {\n  category_guid: string\n  description: string\n  merchant_guid: string\n}\n\nexport interface DrawerBeat {\n  heading?: string\n  subHeading?: SubHeading\n}\n\ninterface TabData {\n  ariaLabel?: string\n  formattedAmount: string\n  label: string\n  value: number\n}\n\nexport interface ChartDrawerTemplateProps {\n  ariaLabel: string\n  beat: DrawerBeat\n  chart: (selectedIndex: number, onBarClick: (index: number) => void) => React.ReactNode\n  children?: (selectedIndex: number) => React.ReactNode\n  data: TabData[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n}\n\nexport const ChartDrawerTemplate = ({\n  ariaLabel,\n  beat,\n  chart,\n  children,\n  data,\n  defaultSelectedIndex,\n  icon,\n  onTabChange,\n  tipSection,\n}: ChartDrawerTemplateProps) => {\n  const { heading, subHeading } = beat\n\n  const initialIndex = useMemo(\n    () => defaultSelectedIndex ?? (data.length ? data.length - 1 : 0),\n    [defaultSelectedIndex, data.length],\n  )\n\n  const [tabValue, setTabValue] = useState(initialIndex)\n\n  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {\n    onTabChange?.(newValue)\n    setTabValue(newValue)\n  }\n\n  const handleBarClick = (dataIndex: number) => {\n    setTabValue(dataIndex)\n  }\n\n  return (\n    <Box sx={{ bgcolor: 'background.paper', width: '100%' }}>\n      <Tabs aria-label={ariaLabel} onChange={handleTabChange} value={tabValue} variant=\"fullWidth\">\n        {data.map((item, index) => (\n          <Tab\n            id={`transaction-details-tab-${index}`}\n            key={`${item.label}-${index}`}\n            label={item.label}\n            sx={{ minWidth: 'auto', px: 0 }}\n          />\n        ))}\n      </Tabs>\n\n      <Stack sx={{ pt: 16, px: 24 }}>\n        {(heading || subHeading) && (\n          <Stack sx={{ gap: 4 }}>\n            {heading && <H3>{heading}</H3>}\n\n            {subHeading && (\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n                {icon}\n                <Text textTransform=\"uppercase\" variant=\"body2\">\n                  {subHeading.description}\n                </Text>\n              </Stack>\n            )}\n          </Stack>\n        )}\n      </Stack>\n\n      {chart?.(tabValue, handleBarClick)}\n\n      {tipSection && <TipSection {...tipSection} />}\n\n      {children?.(tabValue)}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;AA0CA,IAAa,IAAA,CAAuB,EAClC,WAAA,GACA,MAAA,GACA,OAAA,GACA,UAAA,GACA,MAAA,GACA,sBAAA,GACA,MAAA,GACA,aAAA,GACA,YAAA,EAAA,MAC8B;AAC9B,QAAM,EAAE,SAAA,GAAS,YAAA,EAAA,IAAe,GAE1B,IAAe,EAAA,MACb,MAAyB,EAAK,SAAS,EAAK,SAAS,IAAI,IAC/D,CAAC,GAAsB,EAAK,MAAM,CACpC,GAEM,CAAC,GAAU,CAAA,IAAe,EAAS,CAAY,GAE/C,IAAA,CAAmB,GAA8B,MAAqB;AAC1E,IAAA,IAAc,CAAQ,GACtB,EAAY,CAAQ;AAAA,EACtB,GAEM,IAAA,CAAkB,MAAsB;AAC5C,IAAA,EAAY,CAAS;AAAA,EACvB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,OAAO;AAAA,IAAO;AAAA,IAAtD,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAM,cAAY;AAAA,QAAW,UAAU;AAAA,QAAiB,OAAO;AAAA,QAAU,SAAQ;AAAA,QAC9E,UAAA,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI,2BAA2B,CAAA;AAAA,UAE/B,OAAO,EAAK;AAAA,UACZ,IAAI;AAAA,YAAE,UAAU;AAAA,YAAQ,IAAI;AAAA,UAAE;AAAA,QAC/B,GAHM,GAAG,EAAK,KAAA,IAAS,CAAA,EAGvB,CACF;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,IAAI;AAAA,QAAG;AAAA,QACxB,WAAA,KAAW,MACX,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,KAAK,EAAE;AAAA,UAApB,UAAA,CACG,KAAW,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAY,CAAA,GAE5B,KACC,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,YAAY;AAAA,cAAU,eAAe;AAAA,cAAO,KAAK;AAAA,YAAE;AAAA,YAAhE,UAAA,CACG,GACD,gBAAA,EAAC,GAAD;AAAA,cAAM,eAAc;AAAA,cAAY,SAAQ;AAAA,cACrC,UAAA,EAAW;AAAA,YACR,CAAA,CACD;AAAA,UAEJ,CAAA,CAAA;AAAA;MAEJ,CAAA;AAAA,MAEN,IAAQ,GAAU,CAAc;AAAA,MAEhC,KAAc,gBAAA,EAAC,GAAD,EAAY,GAAI,EAAa,CAAA;AAAA,MAE3C,IAAW,CAAQ;AAAA,IACjB;AAAA;AAET"}

package/dist/insights/components/shared/ChartDrawerTemplate/TipSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TipSection.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/TipSection.tsx"],"sourcesContent":["import { Icon, P } from '@mxenabled/mxui'\n\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface TipSectionProps {\n  message: React.ReactNode\n  tipAriaLabel?: string\n  onDismiss?: () => void\n  onAction?: () => void\n  sx?: SxProps\n}\n\nexport const TipSection = ({ message, tipAriaLabel, onDismiss, onAction, sx }: TipSectionProps) => {\n  // Priority: action > dismiss > nothing\n  const buttonHandler = onAction || onDismiss\n  const iconName = onAction ? 'chevron_right' : 'close'\n\n  return (\n    <Stack\n      sx={{\n        backgroundColor: 'primary.lighter',\n        borderRadius: '8px',\n        mb: 24,\n        mt: 12,\n        p: 12,\n        mx: 24,\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        flexDirection: 'row',\n        gap: 8,\n        ...sx,\n      }}\n    >\n      <Stack sx={{ flexDirection: 'row', gap: 4 }}>\n        <Icon color=\"info\" fill={true} name=\"lightbulb\" size={24} />\n        <P color=\"primary.dark\" fontWeight={400} noWrap={false} variant=\"subtitle2\">\n          {message}\n        </P>\n      </Stack>\n\n      {buttonHandler && (\n        <IconButton\n          aria-label={tipAriaLabel}\n          onClick={buttonHandler}\n          size=\"small\"\n          sx={{ minHeight: 0, minWidth: 0, p: 0 }}\n        >\n          <Icon color=\"primary\" fill={true} name={iconName} size={20} />\n        </IconButton>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAc,EAAE,SAAA,GAAS,cAAA,GAAc,WAAA,GAAW,UAAA,GAAU,IAAA,EAAA,MAA0B;AAEjG,QAAM,IAAgB,KAAY,GAC5B,IAAW,IAAW,kBAAkB;AAE9C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,GAAG;AAAA,IACL;AAAA,cAbF,CAeE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAA1C,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAO,MAAM;AAAA,QAAM,MAAK;AAAA,QAAY,MAAM;AAAA,MAAK,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAe,YAAY;AAAA,QAAK,QAAQ;AAAA,QAAO,SAAQ;AAAA,kBAC7D;AAAA,MACA,CAAA,CACE;AAAA,QAEN,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,WAAW;AAAA,QAAG,UAAU;AAAA,QAAG,GAAG;AAAA,MAAE;AAAA,gBAEtC,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAU,MAAM;AAAA,QAAM,MAAM;AAAA,QAAU,MAAM;AAAA,MAAK,CAAA;AAAA,IACnD,CAAA,CAET;AAAA;AAEX"}
+{"version":3,"file":"TipSection.es.js","names":[],"sources":["../../../../../src/insights/components/shared/ChartDrawerTemplate/TipSection.tsx"],"sourcesContent":["import { Icon, P } from '@mxenabled/mxui'\n\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface TipSectionProps {\n  message: React.ReactNode\n  tipAriaLabel?: string\n  onDismiss?: () => void\n  onAction?: () => void\n  sx?: SxProps\n}\n\nexport const TipSection = ({ message, tipAriaLabel, onDismiss, onAction, sx }: TipSectionProps) => {\n  // Priority: action > dismiss > nothing\n  const buttonHandler = onAction || onDismiss\n  const iconName = onAction ? 'chevron_right' : 'close'\n\n  return (\n    <Stack\n      sx={{\n        backgroundColor: 'primary.lighter',\n        borderRadius: '8px',\n        mb: 24,\n        mt: 12,\n        p: 12,\n        mx: 24,\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        flexDirection: 'row',\n        gap: 8,\n        ...sx,\n      }}\n    >\n      <Stack sx={{ flexDirection: 'row', gap: 4 }}>\n        <Icon color=\"info\" fill={true} name=\"lightbulb\" size={24} />\n        <P color=\"primary.dark\" fontWeight={400} noWrap={false} variant=\"subtitle2\">\n          {message}\n        </P>\n      </Stack>\n\n      {buttonHandler && (\n        <IconButton\n          aria-label={tipAriaLabel}\n          onClick={buttonHandler}\n          size=\"small\"\n          sx={{ minHeight: 0, minWidth: 0, p: 0 }}\n        >\n          <Icon color=\"primary\" fill={true} name={iconName} size={20} />\n        </IconButton>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAc,EAAE,SAAA,GAAS,cAAA,GAAc,WAAA,GAAW,UAAA,GAAU,IAAA,EAAA,MAA0B;AAEjG,QAAM,IAAgB,KAAY,GAC5B,IAAW,IAAW,kBAAkB;AAE9C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IAbF,UAAA,CAeE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAA1C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAO,MAAM;AAAA,QAAM,MAAK;AAAA,QAAY,MAAM;AAAA,MAAK,CAAA,GAC3D,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAe,YAAY;AAAA,QAAK,QAAQ;AAAA,QAAO,SAAQ;AAAA,QAC7D,UAAA;AAAA,MACA,CAAA,CACE;AAAA,IAEN,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,WAAW;AAAA,QAAG,UAAU;AAAA,QAAG,GAAG;AAAA,MAAE;AAAA,MAEtC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAU,MAAM;AAAA,QAAM,MAAM;AAAA,QAAU,MAAM;AAAA,MAAK,CAAA;AAAA,IACnD,CAAA,CAET;AAAA;AAEX"}

package/dist/insights/components/shared/ChartTransactionWithDrillDown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTransactionWithDrillDown.es.js","names":[],"sources":["../../../../src/insights/components/shared/ChartTransactionWithDrillDown.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'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  Drawer,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\nimport { TransactionList } from '../../../transactions'\n\nimport type { BarDataProps } from '../../types/Charts/BarChart'\n\nimport { ChartDrawerTemplate, type DrawerBeat } from './ChartDrawerTemplate/ChartDrawerTemplate'\nimport type { TipSectionProps } from './ChartDrawerTemplate/TipSection'\nimport { BarChartV2 } from './Charts'\n\ninterface ChartWithTransactionDrillDownProps {\n  ariaLabel: string\n  barChartProps: React.ComponentProps<typeof BarChartV2>\n  beat: DrawerBeat\n  data: BarDataProps[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  isOpen?: boolean\n  onClose: () => void\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n  title: string\n  transactionListProps?: React.ComponentProps<typeof TransactionList>\n}\n\nconst ChartWithTransactionDrillDown = ({\n  ariaLabel,\n  barChartProps,\n  beat,\n  data,\n  defaultSelectedIndex = 0,\n  icon,\n  isOpen = false,\n  onClose,\n  onTabChange,\n  tipSection,\n  title,\n  transactionListProps = {},\n}: ChartWithTransactionDrillDownProps) => {\n  const { common: commonCopy, transactions: transactionsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { sortedTransactionsWithSplits, tags } = useTransactionStore()\n\n  if (!isCopyLoaded) return <Loader />\n\n  return (\n    <Drawer ariaLabelClose={commonCopy.close_aria} isOpen={isOpen} onClose={onClose} title={title}>\n      <ChartDrawerTemplate\n        ariaLabel={ariaLabel}\n        beat={beat}\n        chart={(selectedTab, onBarClick) => (\n          <Box sx={{ pt: 16 }}>\n            <BarChartV2\n              {...barChartProps}\n              onBarClick={(i) => {\n                onBarClick(i)\n                barChartProps.onBarClick?.(i)\n              }}\n              selectedTabIndex={selectedTab}\n            />\n          </Box>\n        )}\n        data={data}\n        defaultSelectedIndex={defaultSelectedIndex}\n        icon={icon}\n        onTabChange={onTabChange}\n        tipSection={tipSection}\n      >\n        {/* Tab selection will be added here later */}\n        {() => {\n          return (\n            <React.Fragment>\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  borderBottomColor: 'divider',\n                  borderBottomStyle: 'solid',\n                  borderBottomWidth: 1,\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  pb: 4,\n                  pt: 16,\n                  px: 24,\n                }}\n              >\n                <Text bold={true} variant=\"body1\">\n                  {transactionsCopy.transactions_title}\n                </Text>\n                {(transactionListProps?.transaction || sortedTransactionsWithSplits.length > 0) && (\n                  <Button\n                    onClick={() => {\n                      exportTransactionsToCSV(\n                        transactionListProps?.transaction || sortedTransactionsWithSplits,\n                        tags,\n                      )\n                    }}\n                    startIcon={<Icon name=\"ios_share\" />}\n                    sx={{ height: 28 }}\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {transactionsCopy.export_csv_btn}\n                    </Text>\n                  </Button>\n                )}\n              </Stack>\n              <TransactionList {...transactionListProps} />\n            </React.Fragment>\n          )\n        }}\n      </ChartDrawerTemplate>\n    </Drawer>\n  )\n}\n\nexport default ChartWithTransactionDrillDown\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAM,IAAA,CAAiC,EACrC,WAAA,GACA,eAAA,GACA,MAAA,GACA,MAAA,GACA,sBAAA,IAAuB,GACvB,MAAA,GACA,QAAA,IAAS,IACT,SAAA,GACA,aAAA,GACA,YAAA,GACA,OAAA,GACA,sBAAA,IAAuB,CAAC,EAAA,MACgB;AACxC,QAAM,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAqB,EAAmB,GAC5E,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,8BAAA,GAA8B,MAAA,EAAA,IAAS,EAAoB;AAEnE,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAQ,gBAAgB,EAAW;AAAA,IAAoB,QAAA;AAAA,IAAiB,SAAA;AAAA,IAAgB,OAAA;AAAA,cACtF,gBAAA,EAAC,GAAD;AAAA,MACa,WAAA;AAAA,MACL,MAAA;AAAA,MACN,OAAA,CAAQ,GAAa,MACnB,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,IAAI,GAAG;AAAA,kBAChB,gBAAA,EAAC,GAAD;AAAA,UACE,GAAI;AAAA,UACJ,YAAA,CAAa,MAAM;AACjB,YAAA,EAAW,CAAC,GACZ,EAAc,aAAa,CAAC;AAAA,UAC9B;AAAA,UACA,kBAAkB;AAAA,QACnB,CAAA;AAAA,MACE,CAAA;AAAA,MAED,MAAA;AAAA,MACgB,sBAAA;AAAA,MAChB,MAAA;AAAA,MACO,aAAA;AAAA,MACD,YAAA;AAAA,sBAKR,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,kBAXF,CAaE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAiB;AAAA,QACd,CAAA,IACJ,GAAsB,eAAe,EAA6B,SAAS,MAC3E,gBAAA,EAAC,GAAD;AAAA,UACE,SAAA,MAAe;AACb,YAAA,EACE,GAAsB,eAAe,GACrC,CACF;AAAA,UACF;AAAA,UACA,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,IAAI,EAAE,QAAQ,GAAG;AAAA,oBAEjB,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB,EAAiB;AAAA,UACd,CAAA;AAAA,QACA,CAAA,CAEL;AAAA,UACP,gBAAA,EAAC,GAAD,EAAiB,GAAI,EAAuB,CAAA,CAC9B,EAAA,CAAA;AAAA,IAGD,CAAA;AAAA,EACf,CAAA,IAnEgB,gBAAA,EAAC,GAAD,CAAS,CAAA;AAqErC"}
+{"version":3,"file":"ChartTransactionWithDrillDown.es.js","names":[],"sources":["../../../../src/insights/components/shared/ChartTransactionWithDrillDown.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'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  Drawer,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\nimport { exportTransactionsToCSV } from '../../../core/utils/TransactionUtils'\nimport { TransactionList } from '../../../transactions'\n\nimport type { BarDataProps } from '../../types/Charts/BarChart'\n\nimport { ChartDrawerTemplate, type DrawerBeat } from './ChartDrawerTemplate/ChartDrawerTemplate'\nimport type { TipSectionProps } from './ChartDrawerTemplate/TipSection'\nimport { BarChartV2 } from './Charts'\n\ninterface ChartWithTransactionDrillDownProps {\n  ariaLabel: string\n  barChartProps: React.ComponentProps<typeof BarChartV2>\n  beat: DrawerBeat\n  data: BarDataProps[]\n  defaultSelectedIndex?: number\n  icon?: React.ReactNode\n  isOpen?: boolean\n  onClose: () => void\n  onTabChange?: (index: number) => void\n  tipSection?: TipSectionProps\n  title: string\n  transactionListProps?: React.ComponentProps<typeof TransactionList>\n}\n\nconst ChartWithTransactionDrillDown = ({\n  ariaLabel,\n  barChartProps,\n  beat,\n  data,\n  defaultSelectedIndex = 0,\n  icon,\n  isOpen = false,\n  onClose,\n  onTabChange,\n  tipSection,\n  title,\n  transactionListProps = {},\n}: ChartWithTransactionDrillDownProps) => {\n  const { common: commonCopy, transactions: transactionsCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { sortedTransactionsWithSplits, tags } = useTransactionStore()\n\n  if (!isCopyLoaded) return <Loader />\n\n  return (\n    <Drawer ariaLabelClose={commonCopy.close_aria} isOpen={isOpen} onClose={onClose} title={title}>\n      <ChartDrawerTemplate\n        ariaLabel={ariaLabel}\n        beat={beat}\n        chart={(selectedTab, onBarClick) => (\n          <Box sx={{ pt: 16 }}>\n            <BarChartV2\n              {...barChartProps}\n              onBarClick={(i) => {\n                onBarClick(i)\n                barChartProps.onBarClick?.(i)\n              }}\n              selectedTabIndex={selectedTab}\n            />\n          </Box>\n        )}\n        data={data}\n        defaultSelectedIndex={defaultSelectedIndex}\n        icon={icon}\n        onTabChange={onTabChange}\n        tipSection={tipSection}\n      >\n        {/* Tab selection will be added here later */}\n        {() => {\n          return (\n            <React.Fragment>\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  borderBottomColor: 'divider',\n                  borderBottomStyle: 'solid',\n                  borderBottomWidth: 1,\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  pb: 4,\n                  pt: 16,\n                  px: 24,\n                }}\n              >\n                <Text bold={true} variant=\"body1\">\n                  {transactionsCopy.transactions_title}\n                </Text>\n                {(transactionListProps?.transaction || sortedTransactionsWithSplits.length > 0) && (\n                  <Button\n                    onClick={() => {\n                      exportTransactionsToCSV(\n                        transactionListProps?.transaction || sortedTransactionsWithSplits,\n                        tags,\n                      )\n                    }}\n                    startIcon={<Icon name=\"ios_share\" />}\n                    sx={{ height: 28 }}\n                  >\n                    <Text bold={true} variant=\"body2\">\n                      {transactionsCopy.export_csv_btn}\n                    </Text>\n                  </Button>\n                )}\n              </Stack>\n              <TransactionList {...transactionListProps} />\n            </React.Fragment>\n          )\n        }}\n      </ChartDrawerTemplate>\n    </Drawer>\n  )\n}\n\nexport default ChartWithTransactionDrillDown\n"],"mappings":";;;;;;;;;;;;;;AAwCA,IAAM,IAAA,CAAiC,EACrC,WAAA,GACA,eAAA,GACA,MAAA,GACA,MAAA,GACA,sBAAA,IAAuB,GACvB,MAAA,GACA,QAAA,IAAS,IACT,SAAA,GACA,aAAA,GACA,YAAA,GACA,OAAA,GACA,sBAAA,IAAuB,CAAC,EAAA,MACgB;AACxC,QAAM,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAqB,EAAmB,GAC5E,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,8BAAA,GAA8B,MAAA,EAAA,IAAS,EAAoB;AAEnE,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAQ,gBAAgB,EAAW;AAAA,IAAoB,QAAA;AAAA,IAAiB,SAAA;AAAA,IAAgB,OAAA;AAAA,IACtF,UAAA,gBAAA,EAAC,GAAD;AAAA,MACa,WAAA;AAAA,MACL,MAAA;AAAA,MACN,OAAA,CAAQ,GAAa,MACnB,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI,EAAE,IAAI,GAAG;AAAA,QAChB,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,GAAI;AAAA,UACJ,YAAA,CAAa,MAAM;AACjB,YAAA,EAAW,CAAC,GACZ,EAAc,aAAa,CAAC;AAAA,UAC9B;AAAA,UACA,kBAAkB;AAAA,QACnB,CAAA;AAAA,MACE,CAAA;AAAA,MAED,MAAA;AAAA,MACgB,sBAAA;AAAA,MAChB,MAAA;AAAA,MACO,aAAA;AAAA,MACD,YAAA;AAAA,MAGL,UAAA,MAEH,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,eAAe;AAAA,UACf,gBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,QACN;AAAA,QAXF,UAAA,CAaE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAiB;AAAA,QACd,CAAA,IACJ,GAAsB,eAAe,EAA6B,SAAS,MAC3E,gBAAA,EAAC,GAAD;AAAA,UACE,SAAA,MAAe;AACb,YAAA,EACE,GAAsB,eAAe,GACrC,CACF;AAAA,UACF;AAAA,UACA,WAAW,gBAAA,EAAC,GAAD,EAAM,MAAK,YAAa,CAAA;AAAA,UACnC,IAAI,EAAE,QAAQ,GAAG;AAAA,UAEjB,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,YACvB,UAAA,EAAiB;AAAA,UACd,CAAA;AAAA,QACA,CAAA,CAEL;AAAA,MACP,CAAA,GAAA,gBAAA,EAAC,GAAD,EAAiB,GAAI,EAAuB,CAAA,CAC9B,EAAA,CAAA;AAAA,IAGD,CAAA;AAAA,EACf,CAAA,IAnEgB,gBAAA,EAAC,GAAD,CAAS,CAAA;AAqErC"}

package/dist/insights/components/shared/Charts/BarChart/BarChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  BarSeriesType,\n  ChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { BarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { Legend } from './ChartLegend'\nimport { CustomBarPlot } from './CustomBarPlot'\n\nexport const BarChart = ({\n  amounts,\n  color,\n  data,\n  isMini = false,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  legendLabelAvg,\n  legendLabelMain,\n  selectedTabIndex,\n  removeSelectedTabColorChange,\n  onBarClick,\n}: BarChartProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) {\n      // If we don't want to change the color of the selected tab\n      return data.map(() => color)\n    }\n\n    if (selectedTabIndex === undefined) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const handleBarClick = React.useCallback(\n    (_: React.MouseEvent<SVGElement, MouseEvent>, { dataIndex }: { dataIndex: number }) =>\n      onBarClick && onBarClick(dataIndex),\n    [onBarClick],\n  )\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0, // Extend the Y-axis range below the lowest negative value\n          max: maxValue > 0 ? maxValue : 0, // Ensure the Y-axis includes positive values\n        },\n      ],\n    }\n  }, [data])\n\n  const standardHeight = isMini ? 120 : 172\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : standardHeight,\n          mb: 8,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          height={height}\n          margin={{\n            top: margin.top || 45,\n            right: margin.right,\n            bottom: margin.bottom,\n            left: margin.left,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={chartData.yAxis.map((axis) => ({ ...axis, width: 0 }))}\n        >\n          {amounts?.average && ( // show average line if available\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.darker,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && ( // show lowest value line if negative values are allowed and if the lowest value is negative\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.dark,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            disableTicks={true}\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.neutral?.main : 'none', // If there is a negative value hide this line and use the reference line\n              },\n              'MuiChartsAxis-root-MuiChartsXAxis-root': {\n                transform: 'translate(0, 150)',\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {}, // Add padding to move labels further down. Must use an empty transform to prevent errors\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlot\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {(legendLabelMain || legendLabelAvg) && (\n        <Legend\n          average={amounts?.formattedAverage}\n          color={color}\n          legendLabelAvg={legendLabelAvg}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"BarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  BarSeriesType,\n  ChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { BarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { Legend } from './ChartLegend'\nimport { CustomBarPlot } from './CustomBarPlot'\n\nexport const BarChart = ({\n  amounts,\n  color,\n  data,\n  isMini = false,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  legendLabelAvg,\n  legendLabelMain,\n  selectedTabIndex,\n  removeSelectedTabColorChange,\n  onBarClick,\n}: BarChartProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) {\n      // If we don't want to change the color of the selected tab\n      return data.map(() => color)\n    }\n\n    if (selectedTabIndex === undefined) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const handleBarClick = React.useCallback(\n    (_: React.MouseEvent<SVGElement, MouseEvent>, { dataIndex }: { dataIndex: number }) =>\n      onBarClick && onBarClick(dataIndex),\n    [onBarClick],\n  )\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0, // Extend the Y-axis range below the lowest negative value\n          max: maxValue > 0 ? maxValue : 0, // Ensure the Y-axis includes positive values\n        },\n      ],\n    }\n  }, [data])\n\n  const standardHeight = isMini ? 120 : 172\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : standardHeight,\n          mb: 8,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          height={height}\n          margin={{\n            top: margin.top || 45,\n            right: margin.right,\n            bottom: margin.bottom,\n            left: margin.left,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={chartData.yAxis.map((axis) => ({ ...axis, width: 0 }))}\n        >\n          {amounts?.average && ( // show average line if available\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.darker,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && ( // show lowest value line if negative values are allowed and if the lowest value is negative\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral.dark,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            disableTicks={true}\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.neutral?.main : 'none', // If there is a negative value hide this line and use the reference line\n              },\n              'MuiChartsAxis-root-MuiChartsXAxis-root': {\n                transform: 'translate(0, 150)',\n              },\n              '.MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {}, // Add padding to move labels further down. Must use an empty transform to prevent errors\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlot\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {(legendLabelMain || legendLabelAvg) && (\n        <Legend\n          average={amounts?.formattedAverage}\n          color={color}\n          legendLabelAvg={legendLabelAvg}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/BarChart/BarChartV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport type { BarChartV2Props } from '../../../../types/Charts/BarChart'\n\nimport { LegendV2 } from './ChartLegendV2'\nimport { CustomBarPlotV2 } from './CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={selectedData.formattedAmount}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"BarChartV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/BarChartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport type { BarChartV2Props } from '../../../../types/Charts/BarChart'\n\nimport { LegendV2 } from './ChartLegendV2'\nimport { CustomBarPlotV2 } from './CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={selectedData.formattedAmount}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/BarChart/ChartLegend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendProps {\n  average?: string\n  color: string\n  legendLabelAvg?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n}\n\nexport const Legend = ({\n  average,\n  color,\n  legendLabelAvg,\n  legendLabelMain,\n  legendStyle = {},\n}: LegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"chartLegendLabel\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={color} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"chartLegendLabel\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n\n    {average && legendLabelAvg && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            gap: 2,\n          }}\n        >\n          {[...Array(3)].map((_, i) => (\n            <Box\n              key={i}\n              sx={{\n                width: 3,\n                height: 3,\n                borderRadius: 4,\n                backgroundColor: 'secondary.lighter',\n              }}\n            />\n          ))}\n        </Stack>\n        <Text sx={{ fontSize: 11, fontWeight: 400, ml: 0 }} variant=\"caption\">\n          {legendLabelAvg}: {average}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAU,EACrB,SAAA,GACA,OAAA,GACA,gBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,EAAA,MAEf,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAO,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IACxD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBACxE;AAAA,IACG,CAAA,CACD;AAAA,MAGR,KAAW,KACV,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,eAAe;AAAA,QACf,KAAK;AAAA,MACP;AAAA,gBAEC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAA,CAAK,GAAG,MACrB,gBAAA,EAAC,GAAD,EAEE,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,EACD,GAPM,CAON,CACF;AAAA,IACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,QAAK,IAAI;AAAA,MAAE;AAAA,MAAG,SAAQ;AAAA,gBAA5D;AAAA,QACG;AAAA,QAAe;AAAA,QAAG;AAAA,MACf;AAAA,MACD;AAAA,IAEJ"}
+{"version":3,"file":"ChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendProps {\n  average?: string\n  color: string\n  legendLabelAvg?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n}\n\nexport const Legend = ({\n  average,\n  color,\n  legendLabelAvg,\n  legendLabelMain,\n  legendStyle = {},\n}: LegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"chartLegendLabel\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={color} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"chartLegendLabel\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n\n    {average && legendLabelAvg && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            gap: 2,\n          }}\n        >\n          {[...Array(3)].map((_, i) => (\n            <Box\n              key={i}\n              sx={{\n                width: 3,\n                height: 3,\n                borderRadius: 4,\n                backgroundColor: 'secondary.lighter',\n              }}\n            />\n          ))}\n        </Stack>\n        <Text sx={{ fontSize: 11, fontWeight: 400, ml: 0 }} variant=\"caption\">\n          {legendLabelAvg}: {average}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;;AAcA,IAAa,IAAA,CAAU,EACrB,SAAA,GACA,OAAA,GACA,gBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,EAAA,MAEf,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EARF,UAAA,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,MAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAO,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IACxD,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,MACxE,UAAA;AAAA,IACG,CAAA,CACD;AAAA,EAGR,CAAA,GAAA,KAAW,KACV,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,eAAe;AAAA,QACf,KAAK;AAAA,MACP;AAAA,MAEC,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAA,CAAK,GAAG,MACrB,gBAAA,EAAC,GAAD,EAEE,IAAI;AAAA,QACF,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,MACnB,EACD,GAPM,CAON,CACF;AAAA,IACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,QAAK,IAAI;AAAA,MAAE;AAAA,MAAG,SAAQ;AAAA,MAA5D,UAAA;AAAA,QACG;AAAA,QAAe;AAAA,QAAG;AAAA,MACf;AAAA,IACD,CAAA,CAAA;AAAA,EAEJ,CAAA,CAAA"}

package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n  color: string\n  legendStyle?: SxProps\n  monthlyAmount?: string\n  monthlyAmountLabel?: string\n  trendAmount?: string\n  trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n  color,\n  legendStyle = {},\n  monthlyAmount,\n  monthlyAmountLabel,\n  trendAmount,\n  trendAmountLabel,\n}: LegendV2Props) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {monthlyAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {monthlyAmountLabel}: {monthlyAmount}\n          </Text>\n        </Stack>\n      )}\n\n      {trendAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {trendAmountLabel}: {trendAmount}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,cATF,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAAhE,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,kBAEN,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,kBAApC;AAAA,UACG;AAAA,UAAmB;AAAA,UAAG;AAAA,QACnB;AAAA,QACD;AAAA,QAGR,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,gBAAhE,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,kBAEN,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,kBAApC;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,QACD;AAAA,MAEJ;AAAA;AAEX"}
+{"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n  color: string\n  legendStyle?: SxProps\n  monthlyAmount?: string\n  monthlyAmountLabel?: string\n  trendAmount?: string\n  trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n  color,\n  legendStyle = {},\n  monthlyAmount,\n  monthlyAmountLabel,\n  trendAmount,\n  trendAmountLabel,\n}: LegendV2Props) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {monthlyAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {monthlyAmountLabel}: {monthlyAmount}\n          </Text>\n        </Stack>\n      )}\n\n      {trendAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {trendAmountLabel}: {trendAmount}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAmB;AAAA,UAAG;AAAA,QACnB;AAAA,MACD,CAAA,CAAA;AAAA,IAGR,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,MACD,CAAA,CAAA;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX"}

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlot.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlot.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MerchantLogo } from '@mxenabled/mxui'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarDataProps } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\nexport interface CustomBarPlotProps {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n}\n\nexport const CustomBarPlot = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  ...restProps\n}: CustomBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -10)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabel, category, categoryGuid, formattedAmount, imageSize, merchantGuid } =\n    data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const minY = 40\n  const y = style.y ?? 0\n\n  if (y < minY) {\n    const diff = minY - y\n\n    style.y = minY\n    style.height = Math.max(0, (style.height ?? 0) - diff)\n  }\n\n  return (\n    <g aria-label={ariaLabel}>\n      <rect {...stripChartSlotProps(restProps)} fill={colorRange[dataIndex]} ref={rectRef} rx={2} style={style} />\n      {(merchantGuid || categoryGuid) && (\n        <foreignObject\n          height={imageSize || 32}\n          width={imageSize || 32}\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2 - (imageSize || 32) / 2\n              : 0\n          }\n          y={\n            typeof style.y === 'number' && typeof style.height === 'number'\n              ? style.y + style.height / 2 - (imageSize || 32) / 2\n              : 0\n          }\n        >\n          <MerchantLogo\n            alt={category}\n            categoryGuid={categoryGuid || ''}\n            merchantGuid={merchantGuid || ''}\n            size={imageSize || 32}\n          />\n        </foreignObject>\n      )}\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={\n          typeof style.x === 'number' && typeof style.width === 'number'\n            ? style.x + style.width / 2\n            : 0\n        }\n        y={typeof style.y === 'number' ? style.y - (category ? 26 : 14) : 0}\n      >\n        {formattedAmount}\n      </text>\n      {category && (\n        <text\n          fill={theme.palette.text.secondary}\n          fontSize={9}\n          fontWeight={\n            selectedTabIndex === dataIndex && !removeSelectedTabColorChange ? 'bold' : 400\n          }\n          textAnchor=\"middle\"\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2\n              : 0\n          }\n          y={typeof style.y === 'number' ? style.y - 14 : 0}\n        >\n          {category}\n        </text>\n      )}\n    </g>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CustomBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlot.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MerchantLogo } from '@mxenabled/mxui'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { BarDataProps } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\nexport interface CustomBarPlotProps {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n}\n\nexport const CustomBarPlot = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  ...restProps\n}: CustomBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -10)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabel, category, categoryGuid, formattedAmount, imageSize, merchantGuid } =\n    data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const minY = 40\n  const y = style.y ?? 0\n\n  if (y < minY) {\n    const diff = minY - y\n\n    style.y = minY\n    style.height = Math.max(0, (style.height ?? 0) - diff)\n  }\n\n  return (\n    <g aria-label={ariaLabel}>\n      <rect\n        {...stripChartSlotProps(restProps)}\n        fill={colorRange[dataIndex]}\n        ref={rectRef}\n        rx={2}\n        style={style}\n      />\n      {(merchantGuid || categoryGuid) && (\n        <foreignObject\n          height={imageSize || 32}\n          width={imageSize || 32}\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2 - (imageSize || 32) / 2\n              : 0\n          }\n          y={\n            typeof style.y === 'number' && typeof style.height === 'number'\n              ? style.y + style.height / 2 - (imageSize || 32) / 2\n              : 0\n          }\n        >\n          <MerchantLogo\n            alt={category}\n            categoryGuid={categoryGuid || ''}\n            merchantGuid={merchantGuid || ''}\n            size={imageSize || 32}\n          />\n        </foreignObject>\n      )}\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={\n          typeof style.x === 'number' && typeof style.width === 'number'\n            ? style.x + style.width / 2\n            : 0\n        }\n        y={typeof style.y === 'number' ? style.y - (category ? 26 : 14) : 0}\n      >\n        {formattedAmount}\n      </text>\n      {category && (\n        <text\n          fill={theme.palette.text.secondary}\n          fontSize={9}\n          fontWeight={\n            selectedTabIndex === dataIndex && !removeSelectedTabColorChange ? 'bold' : 400\n          }\n          textAnchor=\"middle\"\n          x={\n            typeof style.x === 'number' && typeof style.width === 'number'\n              ? style.x + style.width / 2\n              : 0\n          }\n          y={typeof style.y === 'number' ? style.y - 14 : 0}\n        >\n          {category}\n        </text>\n      )}\n    </g>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomBarPlotV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlotV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport type { BarDataProps } from '../../../../types/Charts/BarChart'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\n\nexport interface CustomBarPlotV2Props {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n  // Non-DOM props forwarded by the x-charts BarPlot `bar` slot; declared so we\n  // can destructure them out before spreading restProps onto <path>.\n  xOrigin?: number\n  yOrigin?: number\n  skipAnimation?: boolean\n}\n\nconst createRoundedRectPath = (w: number, h: number) => {\n  if (w <= 0 || h <= 0) return ''\n\n  const r = Math.min(4, w / 2, h / 2)\n  return `M${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h} L0,${h} L0,${r} Q0,0 ${r},0 Z`\n}\n\nexport const CustomBarPlotV2 = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  // Non-DOM props forwarded by the @mui/x-charts BarPlot `bar` slot. They are\n  // not valid SVG attributes, so pull them out of restProps before spreading\n  // onto <path> to avoid React \"does not recognize the prop\" warnings.\n  xOrigin: _xOrigin,\n  yOrigin: _yOrigin,\n  skipAnimation: _skipAnimation,\n  ...restProps\n}: CustomBarPlotV2Props) => {\n  const theme = useTheme()\n\n  const { ariaLabel, formattedAmount } = data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const x = style.x ?? 0\n  const y = style.y ?? 0\n  const width = style.width ?? 0\n  const height = style.height ?? 0\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path\n        {...restProps}\n        d={createRoundedRectPath(width, height)}\n        fill={colorRange[dataIndex]}\n        transform={`translate(${x}, ${y})`}\n      />\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={x + width / 2}\n        y={y - 8}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;AA2BA,IAAM,IAAA,CAAyB,GAAW,MAAc;AACtD,MAAI,KAAK,KAAK,KAAK,EAAG,QAAO;AAE7B,QAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClC,SAAO,IAAI,CAAA,OAAQ,IAAI,CAAA,OAAQ,CAAA,MAAO,CAAA,IAAK,CAAA,KAAM,CAAA,IAAK,CAAA,OAAQ,CAAA,OAAQ,CAAA,SAAU,CAAA;AAClF,GAEa,IAAA,CAAmB,EAC9B,YAAA,GACA,MAAA,GACA,WAAA,GACA,8BAAA,GACA,kBAAA,GACA,OAAA,GAIA,SAAS,GACT,SAAS,GACT,eAAe,GACf,GAAG,EAAA,MACuB;AAC1B,QAAM,IAAQ,EAAS,GAEjB,EAAE,WAAA,GAAW,iBAAA,EAAA,IAAoB,EAAK,CAAA,GAEtC,IAA+B,MAAqB,IAAY,SAAS,KAEzE,IAAI,EAAM,KAAK,GACf,IAAI,EAAM,KAAK,GACf,IAAQ,EAAM,SAAS,GACvB,IAAS,EAAM,UAAU;AAE/B,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,cAAf,CACE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAI;AAAA,MACJ,GAAG,EAAsB,GAAO,CAAM;AAAA,MACtC,MAAM,EAAW,CAAA;AAAA,MACjB,WAAW,aAAa,CAAA,KAAM,CAAA;AAAA,IAC/B,CAAA,GACD,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY,IAA+B,SAAS;AAAA,MACpD,YAAW;AAAA,MACX,GAAG,IAAI,IAAQ;AAAA,MACf,GAAG,IAAI;AAAA,gBAEN;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}
+{"version":3,"file":"CustomBarPlotV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomBarPlotV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport type { BarDataProps } from '../../../../types/Charts/BarChart'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n}\n\nexport interface CustomBarPlotV2Props {\n  colorRange: string[]\n  data: BarDataProps[]\n  dataIndex: number\n  removeSelectedTabColorChange?: boolean\n  selectedTabIndex: number\n  style: BarStyleProps\n  // Non-DOM props forwarded by the x-charts BarPlot `bar` slot; declared so we\n  // can destructure them out before spreading restProps onto <path>.\n  xOrigin?: number\n  yOrigin?: number\n  skipAnimation?: boolean\n}\n\nconst createRoundedRectPath = (w: number, h: number) => {\n  if (w <= 0 || h <= 0) return ''\n\n  const r = Math.min(4, w / 2, h / 2)\n  return `M${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h} L0,${h} L0,${r} Q0,0 ${r},0 Z`\n}\n\nexport const CustomBarPlotV2 = ({\n  colorRange,\n  data,\n  dataIndex,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  style,\n  // Non-DOM props forwarded by the @mui/x-charts BarPlot `bar` slot. They are\n  // not valid SVG attributes, so pull them out of restProps before spreading\n  // onto <path> to avoid React \"does not recognize the prop\" warnings.\n  xOrigin: _xOrigin,\n  yOrigin: _yOrigin,\n  skipAnimation: _skipAnimation,\n  ...restProps\n}: CustomBarPlotV2Props) => {\n  const theme = useTheme()\n\n  const { ariaLabel, formattedAmount } = data[dataIndex]\n\n  const shouldAmountAmountTextBeBold = selectedTabIndex === dataIndex ? 'bold' : 400\n\n  const x = style.x ?? 0\n  const y = style.y ?? 0\n  const width = style.width ?? 0\n  const height = style.height ?? 0\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path\n        {...restProps}\n        d={createRoundedRectPath(width, height)}\n        fill={colorRange[dataIndex]}\n        transform={`translate(${x}, ${y})`}\n      />\n      <text\n        fill={theme.palette.text.primary}\n        fontSize={11}\n        fontWeight={removeSelectedTabColorChange ? 'bold' : shouldAmountAmountTextBeBold}\n        textAnchor=\"middle\"\n        x={x + width / 2}\n        y={y - 8}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;AA2BA,IAAM,IAAA,CAAyB,GAAW,MAAc;AACtD,MAAI,KAAK,KAAK,KAAK,EAAG,QAAO;AAE7B,QAAM,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClC,SAAO,IAAI,CAAA,OAAQ,IAAI,CAAA,OAAQ,CAAA,MAAO,CAAA,IAAK,CAAA,KAAM,CAAA,IAAK,CAAA,OAAQ,CAAA,OAAQ,CAAA,SAAU,CAAA;AAClF,GAEa,IAAA,CAAmB,EAC9B,YAAA,GACA,MAAA,GACA,WAAA,GACA,8BAAA,GACA,kBAAA,GACA,OAAA,GAIA,SAAS,GACT,SAAS,GACT,eAAe,GACf,GAAG,EAAA,MACuB;AAC1B,QAAM,IAAQ,EAAS,GAEjB,EAAE,WAAA,GAAW,iBAAA,EAAA,IAAoB,EAAK,CAAA,GAEtC,IAA+B,MAAqB,IAAY,SAAS,KAEzE,IAAI,EAAM,KAAK,GACf,IAAI,EAAM,KAAK,GACf,IAAQ,EAAM,SAAS,GACvB,IAAS,EAAM,UAAU;AAE/B,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,IAAf,UAAA,CACE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAI;AAAA,MACJ,GAAG,EAAsB,GAAO,CAAM;AAAA,MACtC,MAAM,EAAW,CAAA;AAAA,MACjB,WAAW,aAAa,CAAA,KAAM,CAAA;AAAA,IAC/B,CAAA,GACD,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY,IAA+B,SAAS;AAAA,MACpD,YAAW;AAAA,MACX,GAAG,IAAI,IAAQ;AAAA,MACf,GAAG,IAAI;AAAA,MAEN,UAAA;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomDoubleBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlot = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n  const textRef = React.useRef<SVGTextElement>(null)\n  const [barWidth, setBarWidth] = React.useState((style.width as number) || 0)\n\n  React.useLayoutEffect(() => {\n    setBarWidth((style.width as number) || 0)\n  }, [style.width])\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain, formattedComparison, formattedMain } =\n    data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n  const formattedAmount = series.type === 0 ? formattedMain : formattedComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  const textTransform = `translate(${barWidth / 2}, -5)`\n\n  return (\n    <g aria-label={ariaLabel}>\n      <rect {...stripChartSlotProps(restProps)} fill={color} ref={rectRef} rx={2} style={rectStyle} />\n      <text\n        fill={theme.palette.text.secondary}\n        fontSize={11}\n        fontWeight={400}\n        ref={textRef}\n        style={{ transition: 'transform 0.3s ease-in-out' }}\n        textAnchor=\"middle\"\n        transform={textTransform}\n        x={style.x}\n        y={style.y}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;;AAuBA,IAAa,IAAA,CAAuB,EAClC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC2B;AAC9B,QAAM,IAAQ,EAAS,GACjB,IAAU,EAAM,OAAuB,IAAI,GAC3C,IAAU,EAAM,OAAuB,IAAI,GAC3C,CAAC,GAAU,CAAA,IAAe,EAAM,SAAU,EAAM,SAAoB,CAAC;AAE3E,EAAA,EAAM,gBAAA,MAAsB;AAC1B,IAAA,EAAa,EAAM,SAAoB,CAAC;AAAA,EAC1C,GAAG,CAAC,EAAM,KAAK,CAAC,GAEhB,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,GAAe,qBAAA,GAAqB,eAAA,EAAA,IAC/D,EAAK,EAAO,KAAA,GAER,IAAY,EAAO,SAAS,IAAI,IAAgB,GAChD,IAAkB,EAAO,SAAS,IAAI,IAAgB,GAEtD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAEM,IAAgB,aAAa,IAAW,CAAA;AAE9C,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,cAAf,CACE,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI,EAAoB,CAAS;AAAA,MAAG,MAAM;AAAA,MAAO,KAAK;AAAA,MAAS,IAAI;AAAA,MAAG,OAAO;AAAA,IAAY,CAAA,GAC/F,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,OAAO,EAAE,YAAY,6BAA6B;AAAA,MAClD,YAAW;AAAA,MACX,WAAW;AAAA,MACX,GAAG,EAAM;AAAA,MACT,GAAG,EAAM;AAAA,gBAER;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}
+{"version":3,"file":"CustomDoubleBarPlot.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlot = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n  const textRef = React.useRef<SVGTextElement>(null)\n  const [barWidth, setBarWidth] = React.useState((style.width as number) || 0)\n\n  React.useLayoutEffect(() => {\n    setBarWidth((style.width as number) || 0)\n  }, [style.width])\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain, formattedComparison, formattedMain } =\n    data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n  const formattedAmount = series.type === 0 ? formattedMain : formattedComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  const textTransform = `translate(${barWidth / 2}, -5)`\n\n  return (\n    <g aria-label={ariaLabel}>\n      <rect\n        {...stripChartSlotProps(restProps)}\n        fill={color}\n        ref={rectRef}\n        rx={2}\n        style={rectStyle}\n      />\n      <text\n        fill={theme.palette.text.secondary}\n        fontSize={11}\n        fontWeight={400}\n        ref={textRef}\n        style={{ transition: 'transform 0.3s ease-in-out' }}\n        textAnchor=\"middle\"\n        transform={textTransform}\n        x={style.x}\n        y={style.y}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;;AAuBA,IAAa,IAAA,CAAuB,EAClC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC2B;AAC9B,QAAM,IAAQ,EAAS,GACjB,IAAU,EAAM,OAAuB,IAAI,GAC3C,IAAU,EAAM,OAAuB,IAAI,GAC3C,CAAC,GAAU,CAAA,IAAe,EAAM,SAAU,EAAM,SAAoB,CAAC;AAE3E,EAAA,EAAM,gBAAA,MAAsB;AAC1B,IAAA,EAAa,EAAM,SAAoB,CAAC;AAAA,EAC1C,GAAG,CAAC,EAAM,KAAK,CAAC,GAEhB,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,GAAe,qBAAA,GAAqB,eAAA,EAAA,IAC/D,EAAK,EAAO,KAAA,GAER,IAAY,EAAO,SAAS,IAAI,IAAgB,GAChD,IAAkB,EAAO,SAAS,IAAI,IAAgB,GAEtD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAEM,IAAgB,aAAa,IAAW,CAAA;AAE9C,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,IAAf,UAAA,CACE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAI,EAAoB,CAAS;AAAA,MACjC,MAAM;AAAA,MACN,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,OAAO;AAAA,IACR,CAAA,GACD,gBAAA,EAAC,QAAD;AAAA,MACE,MAAM,EAAM,QAAQ,KAAK;AAAA,MACzB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,OAAO,EAAE,YAAY,6BAA6B;AAAA,MAClD,YAAW;AAAA,MACX,WAAW;AAAA,MACX,GAAG,EAAM;AAAA,MACT,GAAG,EAAM;AAAA,MAER,UAAA;AAAA,IACG,CAAA,CACL;AAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomDoubleBarPlotMXUI.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotMXUIProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlotMXUI = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotMXUIProps) => {\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain } = data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  // Create path with rounded top corners (10px radius) and square bottom corners\n  const pathBarWidth = (style.width as number) || 0\n  const pathBarHeight = (style.height as number) || 0\n  const pathX = (style.x as number) || 0\n  const pathY = (style.y as number) || 0\n  const radius = 4\n\n  const pathData = `\n    M ${pathX + radius},${pathY}\n    L ${pathX + pathBarWidth - radius},${pathY}\n    Q ${pathX + pathBarWidth},${pathY} ${pathX + pathBarWidth},${pathY + radius}\n    L ${pathX + pathBarWidth},${pathY + pathBarHeight}\n    L ${pathX},${pathY + pathBarHeight}\n    L ${pathX},${pathY + radius}\n    Q ${pathX},${pathY} ${pathX + radius},${pathY}\n    Z\n  `.trim()\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path {...stripChartSlotProps(restProps)} d={pathData} fill={color} style={rectStyle} />\n    </g>\n  )\n}\n"],"mappings":";;;AAsBA,IAAa,IAAA,CAA2B,EACtC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC+B;AAClC,QAAM,IAAU,EAAM,OAAuB,IAAI;AAEjD,EAAA,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAY,EAAO,SAAS,IAAI,IAAgB,GAEhD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAGM,IAAgB,EAAM,SAAoB,GAC1C,IAAiB,EAAM,UAAqB,GAC5C,IAAS,EAAM,KAAgB,GAC/B,IAAS,EAAM,KAAgB,GAC/B,IAAS,GAET,IAAW;AAAA,QACX,IAAQ,CAAA,IAAU,CAAA;AAAA,QAClB,IAAQ,IAAe,CAAA,IAAU,CAAA;AAAA,QACjC,IAAQ,CAAA,IAAgB,CAAA,IAAS,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QACjE,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QAChC,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,CAAA,IAAS,IAAQ,CAAA,IAAU,CAAA;AAAA;AAAA,IAExC,KAAK;AAEP,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,cACb,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI,EAAoB,CAAS;AAAA,MAAG,GAAG;AAAA,MAAU,MAAM;AAAA,MAAO,OAAO;AAAA,IAAY,CAAA;AAAA,EACtF,CAAA;AAEP"}
+{"version":3,"file":"CustomDoubleBarPlotMXUI.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/CustomDoubleBarPlotMXUI.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { DataSet } from '../../../../types/Charts/BarChart'\nimport { stripChartSlotProps } from '../../../../../common/components/charts/chartSlotProps'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotMXUIProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlotMXUI = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotMXUIProps) => {\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain } = data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  // Create path with rounded top corners (10px radius) and square bottom corners\n  const pathBarWidth = (style.width as number) || 0\n  const pathBarHeight = (style.height as number) || 0\n  const pathX = (style.x as number) || 0\n  const pathY = (style.y as number) || 0\n  const radius = 4\n\n  const pathData = `\n    M ${pathX + radius},${pathY}\n    L ${pathX + pathBarWidth - radius},${pathY}\n    Q ${pathX + pathBarWidth},${pathY} ${pathX + pathBarWidth},${pathY + radius}\n    L ${pathX + pathBarWidth},${pathY + pathBarHeight}\n    L ${pathX},${pathY + pathBarHeight}\n    L ${pathX},${pathY + radius}\n    Q ${pathX},${pathY} ${pathX + radius},${pathY}\n    Z\n  `.trim()\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path {...stripChartSlotProps(restProps)} d={pathData} fill={color} style={rectStyle} />\n    </g>\n  )\n}\n"],"mappings":";;;AAsBA,IAAa,IAAA,CAA2B,EACtC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC+B;AAClC,QAAM,IAAU,EAAM,OAAuB,IAAI;AAEjD,EAAA,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAY,EAAO,SAAS,IAAI,IAAgB,GAEhD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAGM,IAAgB,EAAM,SAAoB,GAC1C,IAAiB,EAAM,UAAqB,GAC5C,IAAS,EAAM,KAAgB,GAC/B,IAAS,EAAM,KAAgB,GAC/B,IAAS,GAET,IAAW;AAAA,QACX,IAAQ,CAAA,IAAU,CAAA;AAAA,QAClB,IAAQ,IAAe,CAAA,IAAU,CAAA;AAAA,QACjC,IAAQ,CAAA,IAAgB,CAAA,IAAS,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QACjE,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QAChC,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,CAAA,IAAS,IAAQ,CAAA,IAAU,CAAA;AAAA;AAAA,IAExC,KAAK;AAEP,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,IACb,UAAA,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI,EAAoB,CAAS;AAAA,MAAG,GAAG;AAAA,MAAU,MAAM;AAAA,MAAO,OAAO;AAAA,IAAY,CAAA;AAAA,EACtF,CAAA;AAEP"}

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport { BarPlot, ChartContainer, ChartsReferenceLine, ChartsXAxis } from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { DataSet, DoubleBarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { DoubleBarChartLegend } from './DoubleBarChartLegend'\n\nexport const DoubleBarChart = ({\n  amounts,\n  barGapRatio = 0,\n  categoryGapRatio = 0.2,\n  colors,\n  data,\n  isMini = false,\n  legendLabelComparison,\n  legendLabelMain,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n}: DoubleBarChartProps) => {\n  const theme = useTheme()\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const handleBarClick = ({ dataIndex, seriesId }: { dataIndex: number; seriesId: string }) => {\n    const seriesType = seriesId.toString().split('-').pop()\n    onBarClick?.(dataIndex * 2 + Number(seriesType))\n  }\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: isMini ? 120 : 172,\n          mb: 8,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          colors={colors}\n          dataset={data as any[]}\n          height={height}\n          margin={margin}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[{ barGapRatio, categoryGapRatio, dataKey: 'label', scaleType: 'band' }]}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral?.dark,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n          <ChartsXAxis\n            disableTicks={true}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: (theme as Theme).palette.neutral?.dark,\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: theme.palette.text.secondary,\n              fontWeight: 400,\n            }}\n          />\n          <BarPlot\n            onItemClick={(_, { dataIndex, seriesId }) =>\n              handleBarClick({ dataIndex, seriesId: seriesId.toString() })\n            }\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomDoubleBarPlot\n                    {...defaultProps}\n                    color={ownerState.color}\n                    data={data as DataSet[]}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\n                    }}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {(legendLabelComparison || legendLabelMain) && (\n        <DoubleBarChartLegend\n          comparisonColor={colors[1]}\n          legendLabelComparison={legendLabelComparison}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n          mainColor={colors[0]}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport { BarPlot, ChartContainer, ChartsReferenceLine, ChartsXAxis } from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { DataSet, DoubleBarChartProps } from '../../../../types/Charts/BarChart'\n\nimport { CustomDoubleBarPlot } from './CustomDoubleBarPlot'\nimport { DoubleBarChartLegend } from './DoubleBarChartLegend'\n\nexport const DoubleBarChart = ({\n  amounts,\n  barGapRatio = 0,\n  categoryGapRatio = 0.2,\n  colors,\n  data,\n  isMini = false,\n  legendLabelComparison,\n  legendLabelMain,\n  margin = {\n    bottom: 30,\n    left: 40,\n    right: 40,\n    top: 20,\n  },\n  onBarClick,\n}: DoubleBarChartProps) => {\n  const theme = useTheme()\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const handleBarClick = ({ dataIndex, seriesId }: { dataIndex: number; seriesId: string }) => {\n    const seriesType = seriesId.toString().split('-').pop()\n    onBarClick?.(dataIndex * 2 + Number(seriesType))\n  }\n\n  return (\n    <Stack alignItems=\"center\" sx={{ mb: isMini ? 16 : 24, width: '100%' }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: isMini ? 120 : 172,\n          mb: 8,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          colors={colors}\n          dataset={data as any[]}\n          height={height}\n          margin={margin}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[{ barGapRatio, categoryGapRatio, dataKey: 'label', scaleType: 'band' }]}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: (theme as Theme).palette.neutral?.dark,\n                strokeDasharray: '0.1 5.9',\n                strokeLinecap: 'round',\n                strokeWidth: 2,\n              }}\n              y={amounts?.average}\n            />\n          )}\n          <ChartsXAxis\n            disableTicks={true}\n            sx={(theme) => ({\n              '.MuiChartsAxis-line': {\n                stroke: (theme as Theme).palette.neutral?.dark,\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: theme.palette.text.secondary,\n              fontWeight: 400,\n            }}\n          />\n          <BarPlot\n            onItemClick={(_, { dataIndex, seriesId }) =>\n              handleBarClick({ dataIndex, seriesId: seriesId.toString() })\n            }\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomDoubleBarPlot\n                    {...defaultProps}\n                    color={ownerState.color}\n                    data={data as DataSet[]}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\n                    }}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ChartContainer>\n      </Box>\n\n      {(legendLabelComparison || legendLabelMain) && (\n        <DoubleBarChartLegend\n          comparisonColor={colors[1]}\n          legendLabelComparison={legendLabelComparison}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ mr: margin.left! + margin.right! }}\n          mainColor={colors[0]}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleBarChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ninterface DoubleBarChartLegendProps {\n  comparisonColor: string\n  legendLabelComparison?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n  mainColor: string\n}\n\nexport const DoubleBarChartLegend = ({\n  comparisonColor,\n  legendLabelComparison,\n  legendLabelMain,\n  legendStyle = {},\n  mainColor,\n}: DoubleBarChartLegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendMain\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={mainColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendMain\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n    {legendLabelComparison && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendComparison\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={comparisonColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendComparison\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelComparison}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;AAaA,IAAa,IAAA,CAAwB,EACnC,iBAAA,GACA,uBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,GACf,WAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAW,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAC5D,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAa,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBAClE;AAAA,IACG,CAAA,CACD;AAAA,MAER,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAiB,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAClE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBACxE;AAAA,IACG,CAAA,CACD;AAAA,IAEJ"}
+{"version":3,"file":"DoubleBarChartLegend.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChartLegend.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ninterface DoubleBarChartLegendProps {\n  comparisonColor: string\n  legendLabelComparison?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n  mainColor: string\n}\n\nexport const DoubleBarChartLegend = ({\n  comparisonColor,\n  legendLabelComparison,\n  legendLabelMain,\n  legendStyle = {},\n  mainColor,\n}: DoubleBarChartLegendProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 16,\n      justifyContent: 'flex-end',\n      width: '100%',\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendMain\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={mainColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendMain\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n    {legendLabelComparison && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendComparison\"\n          fill=\"none\"\n          height=\"6\"\n          role=\"figure\"\n          width=\"7\"\n        >\n          <rect fill={comparisonColor} height=\"6\" rx=\"2\" width=\"6\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendComparison\" sx={{ fontSize: 11, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelComparison}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;AAaA,IAAa,IAAA,CAAwB,EACnC,iBAAA,GACA,uBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,GACf,WAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EARF,UAAA,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,MAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAW,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAC5D,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAa,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,MAClE,UAAA;AAAA,IACG,CAAA,CACD;AAAA,EAER,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,MAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAiB,QAAO;AAAA,QAAI,IAAG;AAAA,QAAI,OAAM;AAAA,QAAI,GAAE;AAAA,MAAU,CAAA;AAAA,IAClE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,MACxE,UAAA;AAAA,IACG,CAAA,CACD;AAAA,EAEJ,CAAA,CAAA"}