{"version":3,"file":"StatCardFromData.cjs","names":[],"sources":["../src/Components/Graphs/StatCard/StatCardFromData.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { H3 } from '@undp/design-system-react/Typography';\r\nimport sum from 'lodash.sum';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport type {\r\n  ClassNameObject,\r\n  Languages,\r\n  NumberFormatOptions,\r\n  SourcesDataType,\r\n  StatCardsFromDataSheetDataType,\r\n  StyleObject,\r\n} from '@/Types';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  // Data\r\n  /** Array of data objects */\r\n  data: StatCardsFromDataSheetDataType[];\r\n\r\n  // Titles, Labels, and Sources\r\n  /** Title of the graph */\r\n  graphTitle?: string | React.ReactNode;\r\n  /** Description of the graph */\r\n  graphDescription?: string | React.ReactNode;\r\n  /** Footnote for the graph */\r\n  footNote?: string | React.ReactNode;\r\n  /** Source data for the graph */\r\n  sources?: SourcesDataType[];\r\n\r\n  // Colors and Styling\r\n  /** Background color of the graph */\r\n  backgroundColor?: string | boolean;\r\n  /** Defines the layout for the cards */\r\n  layout?: 'primary' | 'secondary';\r\n  /** Font size of the main text */\r\n  headingFontSize?: string;\r\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\r\n  padding?: string;\r\n  /** Toggle the fill color of the main text. */\r\n  textBackground?: boolean;\r\n  /** Toggle is the text is center aligned. */\r\n  centerAlign?: boolean;\r\n  /** Vertical alignment of the main text */\r\n  verticalAlign?: 'center' | 'top' | 'bottom';\r\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\r\n  styles?: StyleObject;\r\n  /** Custom class names */\r\n  classNames?: ClassNameObject;\r\n\r\n  // Values and Ticks\r\n  /** Sub text next to main text */\r\n  year?: number | string;\r\n  /** Configuration options for controlling number formatting, localization, prefixes/suffixes, precision, and zero padding. */\r\n  numberDisplayOptions?: NumberFormatOptions;\r\n  /** Defines how “NA” values should be displayed/labelled in the graph */\r\n  naLabel?: string;\r\n\r\n  // Graph Parameters\r\n  /** Data points that need to counted for aggregation.  */\r\n  countOnly?: (string | number)[];\r\n  /** Method for aggregating the data to show as a single number in the card. If the data type of value in data object is string then only count is applicable. */\r\n  aggregationMethod?: 'count' | 'max' | 'min' | 'average' | 'sum';\r\n\r\n  // Configuration and Options\r\n  /** Language setting  */\r\n  language?: Languages;\r\n  /** Color theme */\r\n  theme?: 'light' | 'dark';\r\n  /** Unique ID for the graph */\r\n  graphID?: string;\r\n}\r\n\r\nexport function StatCardFromData(props: Props) {\r\n  const {\r\n    year,\r\n    data,\r\n    graphTitle,\r\n    sources,\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    aggregationMethod = 'count',\r\n    language = 'en',\r\n    countOnly,\r\n    theme = 'light',\r\n    textBackground = false,\r\n    headingFontSize = '4.375rem',\r\n    centerAlign = false,\r\n    verticalAlign = 'center',\r\n    layout = 'primary',\r\n    styles,\r\n    classNames,\r\n    naLabel = 'NA',\r\n    numberDisplayOptions,\r\n  } = props;\r\n\r\n  return (\r\n    <div className={`${theme || 'light'} w-full`}>\r\n      <div\r\n        id={graphID}\r\n        dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n        className={cn(\r\n          `${theme || 'light'} flex flex-col w-full box-border h-full ${\r\n            !backgroundColor ? 'bg-transparent' : backgroundColor === true ? 'bg-surface' : ''\r\n          } ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n          padding: backgroundColor ? padding || '1rem' : padding || 0,\r\n        }}\r\n      >\r\n        <div\r\n          className={`flex flex-col w-full grow ${layout !== 'secondary' ? 'gap-12 justify-between' : 'gap-4 justify-center'}`}\r\n        >\r\n          {layout !== 'secondary' ? (\r\n            <>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              <div\r\n                className={`flex flex-col justify-between grow ${\r\n                  verticalAlign === 'top'\r\n                    ? 'justify-start'\r\n                    : verticalAlign === 'bottom'\r\n                      ? 'justify-end'\r\n                      : 'justify-center'\r\n                }`}\r\n              >\r\n                <H3\r\n                  marginBottom='base'\r\n                  className={`leading-xs [-webkit-text-stroke:2px_var(--content-primary)] text-shadow-none font-heading ${\r\n                    centerAlign\r\n                      ? 'text-center'\r\n                      : language === 'he' || language === 'ar'\r\n                        ? 'text-right'\r\n                        : 'text-left'\r\n                  } ${textBackground ? 'text-content-primary' : 'text-transparent'}`}\r\n                  style={{\r\n                    fontSize: headingFontSize,\r\n                    letterSpacing: '0.05rem',\r\n                  }}\r\n                >\r\n                  {data.filter((d) => typeof d.value === 'string').length > 0 ||\r\n                  aggregationMethod === 'count'\r\n                    ? countOnly && countOnly?.length !== 0\r\n                      ? data.filter((d) => countOnly.indexOf(d.value) !== -1).length\r\n                      : data.length\r\n                    : aggregationMethod === 'sum'\r\n                      ? numberFormattingFunction(\r\n                          sum(data.map((d) => d.value)),\r\n                          naLabel,\r\n                          numberDisplayOptions?.precision ?? 2,\r\n                          numberDisplayOptions?.prefix,\r\n                          numberDisplayOptions?.suffix,\r\n                          numberDisplayOptions?.locale,\r\n                          numberDisplayOptions?.padZeros,\r\n                        )\r\n                      : aggregationMethod === 'average'\r\n                        ? numberFormattingFunction(\r\n                            parseFloat((sum(data.map((d) => d.value)) / data.length).toFixed(2)),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )\r\n                        : aggregationMethod === 'max'\r\n                          ? numberFormattingFunction(\r\n                              Math.max(\r\n                                ...data\r\n                                  .map((d) => d.value as number | undefined)\r\n                                  .filter((d) => d !== undefined),\r\n                              ),\r\n                              naLabel,\r\n                              numberDisplayOptions?.precision ?? 2,\r\n                              numberDisplayOptions?.prefix,\r\n                              numberDisplayOptions?.suffix,\r\n                              numberDisplayOptions?.locale,\r\n                              numberDisplayOptions?.padZeros,\r\n                            )\r\n                          : numberFormattingFunction(\r\n                              Math.min(\r\n                                ...data\r\n                                  .map((d) => d.value as number | undefined)\r\n                                  .filter((d) => d !== undefined),\r\n                              ),\r\n                              naLabel,\r\n                              numberDisplayOptions?.precision ?? 2,\r\n                              numberDisplayOptions?.prefix,\r\n                              numberDisplayOptions?.suffix,\r\n                              numberDisplayOptions?.locale,\r\n                              numberDisplayOptions?.padZeros,\r\n                            )}{' '}\r\n                  {year ? (\r\n                    <span\r\n                      className='text-lg font-normal mt-0 mb-4 text-content-secondary'\r\n                      style={{\r\n                        marginLeft: '-8px',\r\n                        lineHeight: '1.09',\r\n                        textShadow: 'none',\r\n                        WebkitTextStrokeWidth: 0,\r\n                      }}\r\n                    >\r\n                      ({year})\r\n                    </span>\r\n                  ) : null}\r\n                </H3>\r\n              </div>\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          ) : (\r\n            <>\r\n              <H3\r\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\r\n                className={`leading-xs [-webkit-text-stroke:2px_var(--content-primary)] text-shadow-none font-heading ${\r\n                  centerAlign\r\n                    ? 'text-center'\r\n                    : language === 'he' || language === 'ar'\r\n                      ? 'text-right'\r\n                      : 'text-left'\r\n                } ${textBackground ? 'text-content-primary' : 'text-transparent'}`}\r\n                style={{\r\n                  fontSize: headingFontSize,\r\n                  letterSpacing: '0.05rem',\r\n                }}\r\n              >\r\n                {data.filter((d) => typeof d.value === 'string').length > 0 ||\r\n                aggregationMethod === 'count'\r\n                  ? countOnly && countOnly?.length !== 0\r\n                    ? data.filter((d) => countOnly.indexOf(d.value) !== -1).length\r\n                    : data.length\r\n                  : aggregationMethod === 'sum'\r\n                    ? numberFormattingFunction(\r\n                        sum(data.map((d) => d.value)),\r\n                        naLabel,\r\n                        numberDisplayOptions?.precision ?? 2,\r\n                        numberDisplayOptions?.prefix,\r\n                        numberDisplayOptions?.suffix,\r\n                        numberDisplayOptions?.locale,\r\n                        numberDisplayOptions?.padZeros,\r\n                      )\r\n                    : aggregationMethod === 'average'\r\n                      ? numberFormattingFunction(\r\n                          parseFloat((sum(data.map((d) => d.value)) / data.length).toFixed(2)),\r\n                          naLabel,\r\n                          numberDisplayOptions?.precision ?? 2,\r\n                          numberDisplayOptions?.prefix,\r\n                          numberDisplayOptions?.suffix,\r\n                          numberDisplayOptions?.locale,\r\n                          numberDisplayOptions?.padZeros,\r\n                        )\r\n                      : aggregationMethod === 'max'\r\n                        ? numberFormattingFunction(\r\n                            Math.max(\r\n                              ...data\r\n                                .map((d) => d.value as number | undefined)\r\n                                .filter((d) => d !== undefined),\r\n                            ),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )\r\n                        : numberFormattingFunction(\r\n                            Math.min(\r\n                              ...data\r\n                                .map((d) => d.value as number | undefined)\r\n                                .filter((d) => d !== undefined),\r\n                            ),\r\n                            naLabel,\r\n                            numberDisplayOptions?.precision ?? 2,\r\n                            numberDisplayOptions?.prefix,\r\n                            numberDisplayOptions?.suffix,\r\n                            numberDisplayOptions?.locale,\r\n                            numberDisplayOptions?.padZeros,\r\n                          )}{' '}\r\n                {year ? (\r\n                  <span\r\n                    className='text-lg font-normal mt-0 mb-4 text-content-secondary'\r\n                    style={{\r\n                      marginLeft: '-8px',\r\n                      lineHeight: '1.09',\r\n                      textShadow: 'none',\r\n                      WebkitTextStrokeWidth: 0,\r\n                    }}\r\n                  >\r\n                    ({year})\r\n                  </span>\r\n                ) : null}\r\n              </H3>\r\n              {graphTitle || graphDescription ? (\r\n                <GraphHeader\r\n                  styles={{\r\n                    title: styles?.title,\r\n                    description: styles?.description,\r\n                  }}\r\n                  classNames={{\r\n                    title: classNames?.title,\r\n                    description: classNames?.description,\r\n                  }}\r\n                  graphTitle={graphTitle}\r\n                  graphDescription={graphDescription}\r\n                />\r\n              ) : null}\r\n              {sources || footNote ? (\r\n                <GraphFooter\r\n                  styles={{ footnote: styles?.footnote, source: styles?.source }}\r\n                  classNames={{\r\n                    footnote: classNames?.footnote,\r\n                    source: classNames?.source,\r\n                  }}\r\n                  sources={sources}\r\n                  footNote={footNote}\r\n                />\r\n              ) : null}\r\n            </>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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"}