{"version":3,"file":"ThresholdColorLegendWithMouseOver.cjs","names":[],"sources":["../src/Components/Elements/ThresholdColorLegendWithMouseOver.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\r\nimport { P } from '@undp/design-system-react/Typography';\r\nimport { useState } from 'react';\r\n\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\n\r\ninterface Props {\r\n  colors: string[];\r\n  colorDomain: number[];\r\n  colorLegendTitle?: string;\r\n  setSelectedColor: (_d?: string) => void;\r\n  width?: number;\r\n  naColor?: string;\r\n  className?: string;\r\n  showNAColor: boolean;\r\n  locale?: string;\r\n  naLabel: string;\r\n}\r\n\r\nexport function ThresholdColorLegendWithMouseOver(props: Props) {\r\n  const {\r\n    colorLegendTitle,\r\n    colorDomain,\r\n    colors,\r\n    setSelectedColor,\r\n    width,\r\n    naColor,\r\n    className,\r\n    showNAColor,\r\n    locale = 'en',\r\n    naLabel = 'NA',\r\n  } = props;\r\n\r\n  const [hoveredColor, setHoveredColor] = useState<string | undefined>(undefined);\r\n  const mainColorWidth = naColor ? 320 : 360;\r\n  return (\r\n    <div\r\n      className={cn('flex flex-wrap gap-0 justify-center leading-0', className)}\r\n      style={{ maxWidth: width ? `${width}px` : 'none' }}\r\n    >\r\n      {colorLegendTitle && colorLegendTitle !== '' ? (\r\n        <P size='sm' marginBottom='2xs' className='w-full text-center'>\r\n          {colorLegendTitle}\r\n        </P>\r\n      ) : null}\r\n      <svg width='100%' viewBox='0 0 360 30' style={{ maxWidth: '360px' }} direction='ltr'>\r\n        <title>Color legend</title>\r\n        <g>\r\n          {colorDomain.map((d, i) => (\r\n            //  biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend\r\n            <g\r\n              // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique identifier\r\n              key={i}\r\n              onMouseOver={() => {\r\n                setHoveredColor(colors[i]);\r\n                setSelectedColor(colors[i]);\r\n              }}\r\n              onFocus={() => {\r\n                setHoveredColor(colors[i]);\r\n                setSelectedColor(colors[i]);\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              className='cursor-pointer'\r\n            >\r\n              <rect\r\n                x={(i * mainColorWidth) / colors.length + 1}\r\n                y={1}\r\n                width={mainColorWidth / colors.length - 2}\r\n                height={8}\r\n                className={`stroke-1 ${hoveredColor === colors[i] ? 'stroke-foreground-soft' : ''}`}\r\n                style={{\r\n                  fill: colors[i],\r\n                  ...(hoveredColor !== colors[i] ? { stroke: colors[i] } : {}),\r\n                }}\r\n              />\r\n              <text\r\n                x={((i + 1) * mainColorWidth) / colors.length}\r\n                y={25}\r\n                className='fill-content-primary text-sm'\r\n                style={{ textAnchor: 'middle' }}\r\n              >\r\n                {numberFormattingFunction(d as number, undefined, 2, '', '', locale)}\r\n              </text>\r\n            </g>\r\n          ))}\r\n          <g>\r\n            {/* biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend */}\r\n            <rect\r\n              onMouseOver={() => {\r\n                setHoveredColor(colors[colorDomain.length]);\r\n                setSelectedColor(colors[colorDomain.length]);\r\n              }}\r\n              onFocus={() => {\r\n                setHoveredColor(colors[colorDomain.length]);\r\n                setSelectedColor(colors[colorDomain.length]);\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              x={(colorDomain.length * mainColorWidth) / colors.length + 1}\r\n              y={1}\r\n              width={mainColorWidth / colors.length - 2}\r\n              height={8}\r\n              className={`cursor-pointer stroke-1 ${\r\n                hoveredColor === colors[colorDomain.length] ? 'stroke-foreground' : ''\r\n              }`}\r\n              style={{\r\n                fill: colors[colorDomain.length],\r\n                ...(hoveredColor !== colors[colorDomain.length]\r\n                  ? { stroke: colors[colorDomain.length] }\r\n                  : {}),\r\n              }}\r\n            />\r\n          </g>\r\n          {showNAColor ? (\r\n            //  biome-ignore lint/a11y/noStaticElementInteractions: interaction for color legend\r\n            <g\r\n              onMouseOver={() => {\r\n                setHoveredColor(naColor || '#D4D6D8');\r\n                setSelectedColor(naColor || '#D4D6D8');\r\n              }}\r\n              onFocus={() => {\r\n                setHoveredColor(naColor || '#D4D6D8');\r\n                setSelectedColor(naColor || '#D4D6D8');\r\n              }}\r\n              onMouseLeave={() => {\r\n                setHoveredColor(undefined);\r\n                setSelectedColor(undefined);\r\n              }}\r\n              className='cursor-pointer'\r\n            >\r\n              <rect\r\n                x={335}\r\n                y={1}\r\n                width={24}\r\n                height={8}\r\n                className={`stroke-1 ${hoveredColor === naColor ? 'stroke-foreground' : ''}`}\r\n                style={{\r\n                  fill: naColor || '#D4D6D8',\r\n                  ...(hoveredColor !== naColor ? { stroke: naColor } : {}),\r\n                  strokeWidth: 1,\r\n                }}\r\n              />\r\n              <text\r\n                x={337.5}\r\n                y={25}\r\n                className='fill-content-primary text-sm'\r\n                style={{ textAnchor: 'start' }}\r\n              >\r\n                {naLabel}\r\n              </text>\r\n            </g>\r\n          ) : null}\r\n        </g>\r\n      </svg>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"gTAmBA,SAAgB,EAAkC,EAAc,CAC9D,GAAM,CACJ,mBACA,cACA,SACA,mBACA,QACA,UACA,YACA,cACA,SAAS,KACT,UAAU,MACR,EAEE,CAAC,EAAc,IAAA,EAAA,EAAA,UAAgD,IAAA,EAAS,EACxE,EAAiB,EAAU,IAAM,IACvC,OACE,EAAA,EAAA,MAAC,MAAD,CACE,WAAA,EAAA,EAAA,IAAc,gDAAiD,CAAS,EACxE,MAAO,CAAE,SAAU,EAAQ,GAAG,EAAM,IAAM,MAAO,WAFnD,CAIG,GAAoB,IAAqB,IACxC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAG,KAAK,KAAK,aAAa,MAAM,UAAU,8BACvC,CACA,CAAA,EACD,MACJ,EAAA,EAAA,MAAC,MAAD,CAAK,MAAM,OAAO,QAAQ,aAAa,MAAO,CAAE,SAAU,OAAQ,EAAG,UAAU,eAA/E,EACE,EAAA,EAAA,KAAC,QAAD,CAAA,SAAO,cAAmB,CAAA,GAC1B,EAAA,EAAA,MAAC,IAAD,CAAA,SAAA,CACG,EAAY,KAAK,EAAG,KAEnB,EAAA,EAAA,MAAC,IAAD,CAGE,gBAAmB,CACjB,EAAgB,EAAO,EAAE,EACzB,EAAiB,EAAO,EAAE,CAC5B,EACA,YAAe,CACb,EAAgB,EAAO,EAAE,EACzB,EAAiB,EAAO,EAAE,CAC5B,EACA,iBAAoB,CAClB,EAAgB,IAAA,EAAS,EACzB,EAAiB,IAAA,EAAS,CAC5B,EACA,UAAU,0BAfZ,EAiBE,EAAA,EAAA,KAAC,OAAD,CACE,EAAI,EAAI,EAAkB,EAAO,OAAS,EAC1C,EAAG,EACH,MAAO,EAAiB,EAAO,OAAS,EACxC,OAAQ,EACR,UAAW,YAAY,IAAiB,EAAO,GAAK,yBAA2B,KAC/E,MAAO,CACL,KAAM,EAAO,GACb,GAAI,IAAiB,EAAO,GAA6B,CAAC,EAAzB,CAAE,OAAQ,EAAO,EAAG,CACvD,CACD,CAAA,GACD,EAAA,EAAA,KAAC,OAAD,CACE,GAAK,EAAI,GAAK,EAAkB,EAAO,OACvC,EAAG,GACH,UAAU,+BACV,MAAO,CAAE,WAAY,QAAS,WAE7B,EAAA,EAAyB,EAAa,IAAA,GAAW,EAAG,GAAI,GAAI,CAAM,CAC/D,CAAA,CACL,GAlCI,CAkCJ,CACJ,GACD,EAAA,EAAA,KAAC,IAAD,CAAA,UAEE,EAAA,EAAA,KAAC,OAAD,CACE,gBAAmB,CACjB,EAAgB,EAAO,EAAY,OAAO,EAC1C,EAAiB,EAAO,EAAY,OAAO,CAC7C,EACA,YAAe,CACb,EAAgB,EAAO,EAAY,OAAO,EAC1C,EAAiB,EAAO,EAAY,OAAO,CAC7C,EACA,iBAAoB,CAClB,EAAgB,IAAA,EAAS,EACzB,EAAiB,IAAA,EAAS,CAC5B,EACA,EAAI,EAAY,OAAS,EAAkB,EAAO,OAAS,EAC3D,EAAG,EACH,MAAO,EAAiB,EAAO,OAAS,EACxC,OAAQ,EACR,UAAW,2BACT,IAAiB,EAAO,EAAY,QAAU,oBAAsB,KAEtE,MAAO,CACL,KAAM,EAAO,EAAY,QACzB,GAAI,IAAiB,EAAO,EAAY,QAEpC,CAAC,EADD,CAAE,OAAQ,EAAO,EAAY,OAAQ,CAE3C,CACD,CAAA,CACA,CAAA,EACF,GAEC,EAAA,EAAA,MAAC,IAAD,CACE,gBAAmB,CACjB,EAAgB,GAAW,SAAS,EACpC,EAAiB,GAAW,SAAS,CACvC,EACA,YAAe,CACb,EAAgB,GAAW,SAAS,EACpC,EAAiB,GAAW,SAAS,CACvC,EACA,iBAAoB,CAClB,EAAgB,IAAA,EAAS,EACzB,EAAiB,IAAA,EAAS,CAC5B,EACA,UAAU,0BAbZ,EAeE,EAAA,EAAA,KAAC,OAAD,CACE,EAAG,IACH,EAAG,EACH,MAAO,GACP,OAAQ,EACR,UAAW,YAAY,IAAiB,EAAU,oBAAsB,KACxE,MAAO,CACL,KAAM,GAAW,UACjB,GAAI,IAAiB,EAAgC,CAAC,EAAvB,CAAE,OAAQ,CAAQ,EACjD,YAAa,CACf,CACD,CAAA,GACD,EAAA,EAAA,KAAC,OAAD,CACE,EAAG,MACH,EAAG,GACH,UAAU,+BACV,MAAO,CAAE,WAAY,OAAQ,WAE5B,CACG,CAAA,CACL,IACD,IACH,CAAA,CAAA,CACA,GACF,GAET"}