@undp/data-viz 1.2.7 → 1.3.0

package/dist/BasicStatCard.d.ts

@@ -0,0 +1,106 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+export declare function BasicStatCard(props: Props): JSX.Element;
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface Props {
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Defines the layout for the cards */
+    layout?: 'primary' | 'secondary';
+    /** Font size of the main text */
+    headingFontSize?: string;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Toggle the fill color of the main text. */
+    textBackground?: boolean;
+    /** Toggle is the text is center aligned. */
+    centerAlign?: boolean;
+    /** Vertical alignment of the main text */
+    verticalAlign?: 'center' | 'top' | 'bottom';
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Prefix for values */
+    prefix?: string;
+    /** Suffix for values */
+    suffix?: string;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Main text */
+    value: number | string;
+    /** Sub text next to main text */
+    year?: number | string;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/BasicStatCard.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BHm2KTjD-D8FylaKc.cjs"),c=require("./Typography-CDR-DAHH.cjs"),N=require("./GraphFooter.js"),E=require("./GraphHeader.js"),w=require("./numberFormattingFunction.js");function v(R){const{year:o,value:p,graphTitle:i,suffix:m="",sources:l,prefix:u="",graphDescription:n,footNote:x,padding:d,backgroundColor:a=!1,graphID:k,language:s="en",theme:S="light",ariaLabel:$,textBackground:g=!1,headingFontSize:h="4.375rem",centerAlign:f=!1,verticalAlign:y="center",layout:j="primary",styles:t,classNames:r,precision:b}=R;return e.jsxRuntimeExports.jsx("div",{className:`${S||"light"} flex w-full`,dir:s==="he"||s==="ar"?"rtl":void 0,children:e.jsxRuntimeExports.jsx("div",{className:c.cnExports.cn(`${a?a===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}flex flex-col w-full h-inherit ${s||"en"}`,r?.graphContainer),style:{...t?.graphContainer||{},...a&&a!==!0?{backgroundColor:a}:{}},id:k,"aria-label":$||`${i?`The graph shows ${i}. `:""}This is a statistic card.${n?` ${n}`:""}`,children:e.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:a?d||"1rem":d||0},children:j!=="secondary"?e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-12 justify-between grow",children:[i||n?e.jsxRuntimeExports.jsx(E.GraphHeader,{styles:{title:t?.title,description:t?.description},classNames:{title:r?.title,description:r?.description},graphTitle:i,graphDescription:n}):null,e.jsxRuntimeExports.jsx("div",{className:`flex flex-col justify-between grow ${y==="top"?"justify-start":y==="bottom"?"justify-end":"justify-center"}`,children:e.jsxRuntimeExports.jsxs(c.TypographyExports.H3,{marginBottom:"base",className:`leading-none text-outline font-heading ${f?"text-center":s==="he"||s==="ar"?"text-right":"text-left"} ${g?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:h,letterSpacing:"0.05rem"},children:[w.numberFormattingFunction(p,"NA",b,u,m)," ",o?e.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",o,")"]}):null]})}),l||x?e.jsxRuntimeExports.jsx(N.GraphFooter,{styles:{footnote:t?.footnote,source:t?.source},classNames:{footnote:r?.footnote,source:r?.source},sources:l,footNote:x}):null]}):e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-center",children:[e.jsxRuntimeExports.jsxs(c.TypographyExports.H3,{marginBottom:j==="secondary"?"none":"base",className:`leading-none text-outline font-heading ${f?"text-center":s==="he"||s==="ar"?"text-right":"text-left"} ${g?"text-primary-black dark:text-primary-white":"transparent"}`,style:{fontSize:h,letterSpacing:"0.05rem"},children:[w.numberFormattingFunction(p,"NA",b,u,m)," ",o?e.jsxRuntimeExports.jsxs("span",{className:"text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400",style:{marginLeft:"-8px",lineHeight:"1.09",textShadow:"none",WebkitTextStrokeWidth:0},children:["(",o,")"]}):null]}),i||n?e.jsxRuntimeExports.jsx(E.GraphHeader,{styles:{title:t?.title,description:t?.description},classNames:{title:r?.title,description:r?.description},graphTitle:i,graphDescription:n}):null,l||x?e.jsxRuntimeExports.jsx(N.GraphFooter,{styles:{footnote:t?.footnote,source:t?.source},classNames:{footnote:r?.footnote,source:r?.source},sources:l,footNote:x}):null]})})})})}exports.BasicStatCard=v;
+//# sourceMappingURL=BasicStatCard.js.map

package/dist/BasicStatCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicStatCard.js","sources":["../src/Components/Graphs/StatCard/index.tsx"],"sourcesContent":["import { H3 } from '@undp/design-system-react/Typography';\r\nimport { cn } from '@undp/design-system-react/cn';\r\n\r\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\r\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\r\nimport { numberFormattingFunction } from '@/Utils/numberFormattingFunction';\r\nimport { ClassNameObject, Languages, SourcesDataType, StyleObject } from '@/Types';\r\n\r\ninterface Props {\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  /** Accessibility label */\r\n  ariaLabel?: string;\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  /** Prefix for values */\r\n  prefix?: string;\r\n  /** Suffix for values */\r\n  suffix?: string;\r\n  /** Specifies the number of decimal places to display in the value. */\r\n  precision?: number;\r\n  /** Main text */\r\n  value: number | string;\r\n  /** Sub text next to main text */\r\n  year?: number | string;\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 BasicStatCard(props: Props) {\r\n  const {\r\n    year,\r\n    value,\r\n    graphTitle,\r\n    suffix = '',\r\n    sources,\r\n    prefix = '',\r\n    graphDescription,\r\n    footNote,\r\n    padding,\r\n    backgroundColor = false,\r\n    graphID,\r\n    language = 'en',\r\n    theme = 'light',\r\n    ariaLabel,\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    precision,\r\n  } = props;\r\n  return (\r\n    <div\r\n      className={`${theme || 'light'} flex w-full`}\r\n      dir={language === 'he' || language === 'ar' ? 'rtl' : undefined}\r\n    >\r\n      <div\r\n        className={cn(\r\n          `${\r\n            !backgroundColor\r\n              ? 'bg-transparent '\r\n              : backgroundColor === true\r\n                ? 'bg-primary-gray-200 dark:bg-primary-gray-650 '\r\n                : ''\r\n          }flex flex-col w-full h-inherit ${language || 'en'}`,\r\n          classNames?.graphContainer,\r\n        )}\r\n        style={{\r\n          ...(styles?.graphContainer || {}),\r\n          ...(backgroundColor && backgroundColor !== true ? { backgroundColor } : {}),\r\n        }}\r\n        id={graphID}\r\n        aria-label={\r\n          ariaLabel ||\r\n          `${graphTitle ? `The graph shows ${graphTitle}. ` : ''}This is a statistic card.${\r\n            graphDescription ? ` ${graphDescription}` : ''\r\n          }`\r\n        }\r\n      >\r\n        <div\r\n          className='flex grow'\r\n          style={{ padding: backgroundColor ? padding || '1rem' : padding || 0 }}\r\n        >\r\n          {layout !== 'secondary' ? (\r\n            <div className='flex flex-col w-full gap-12 justify-between grow'>\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-none text-outline 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-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                  style={{\r\n                    fontSize: headingFontSize,\r\n                    letterSpacing: '0.05rem',\r\n                  }}\r\n                >\r\n                  {numberFormattingFunction(value, 'NA', precision, prefix, suffix)}{' '}\r\n                  {year ? (\r\n                    <span\r\n                      className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\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            </div>\r\n          ) : (\r\n            <div className='flex flex-col w-full gap-4 grow justify-center'>\r\n              <H3\r\n                marginBottom={layout === 'secondary' ? 'none' : 'base'}\r\n                className={`leading-none text-outline 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-primary-black dark:text-primary-white' : 'transparent'}`}\r\n                style={{\r\n                  fontSize: headingFontSize,\r\n                  letterSpacing: '0.05rem',\r\n                }}\r\n              >\r\n                {numberFormattingFunction(value, 'NA', precision, prefix, suffix)}{' '}\r\n                {year ? (\r\n                  <span\r\n                    className='text-lg font-normal mt-0 mb-4 text-primary-gray-550 dark:text-primary-gray-400'\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            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"names":["BasicStatCard","props","year","value","graphTitle","suffix","sources","prefix","graphDescription","footNote","padding","backgroundColor","graphID","language","theme","ariaLabel","textBackground","headingFontSize","centerAlign","verticalAlign","layout","styles","classNames","precision","jsx","cn","jsxs","GraphHeader","H3","numberFormattingFunction","GraphFooter"],"mappings":"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"}

package/dist/BeeSwarmChart.d.ts

@@ -0,0 +1,189 @@
+import { JSX } from 'react/jsx-runtime';
+
+declare interface AnimateDataType {
+    duration: number;
+    once: boolean;
+    amount: 'some' | 'all' | number;
+}
+
+declare interface AxesClassNameObject {
+    gridLines?: string;
+    labels?: string;
+    title?: string;
+    axis?: string;
+}
+
+declare interface AxesStyleObject {
+    gridLines?: React.CSSProperties;
+    labels?: React.CSSProperties;
+    title?: React.CSSProperties;
+    axis?: React.CSSProperties;
+}
+
+export declare function BeeSwarmChart(props: Props): JSX.Element;
+
+declare interface BeeSwarmChartDataType {
+    label: string | number;
+    position: number;
+    radius?: number;
+    color?: string;
+    data?: object;
+}
+
+declare interface ClassNameObject {
+    title?: string;
+    footnote?: string;
+    source?: string;
+    description?: string;
+    tooltip?: string;
+    xAxis?: AxesClassNameObject;
+    yAxis?: AxesClassNameObject;
+    legend?: string;
+    graphContainer?: string;
+    graphObjectValues?: string;
+    dataConnectors?: string;
+    mouseOverLine?: string;
+    regLine?: string;
+    dataCards?: string;
+}
+
+declare interface CustomLayerDataType {
+    position: 'before' | 'after';
+    layer: React.ReactNode;
+}
+
+declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'jp' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
+
+declare interface Props {
+    /** Array of data objects */
+    data: BeeSwarmChartDataType[];
+    /** Orientation of the graph */
+    orientation?: 'vertical' | 'horizontal';
+    /** Title of the graph */
+    graphTitle?: string | React.ReactNode;
+    /** Description of the graph */
+    graphDescription?: string | React.ReactNode;
+    /** Footnote for the graph */
+    footNote?: string | React.ReactNode;
+    /** Source data for the graph */
+    sources?: SourcesDataType[];
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Color or array of colors for circle */
+    colors?: string | string[];
+    /** Domain of colors for the graph */
+    colorDomain?: string[];
+    /** Title for the color legend */
+    colorLegendTitle?: string;
+    /** Background color of the graph */
+    backgroundColor?: string | boolean;
+    /** Custom styles for the graph. Each object should be a valid React CSS style object. */
+    styles?: StyleObject;
+    /** Custom class names */
+    classNames?: ClassNameObject;
+    /** Width of the graph */
+    width?: number;
+    /** Height of the graph */
+    height?: number;
+    /** Minimum height of the graph */
+    minHeight?: number;
+    /** Relative height scaling factor. This overwrites the height props */
+    relativeHeight?: number;
+    /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */
+    padding?: string;
+    /** Left margin of the graph */
+    leftMargin?: number;
+    /** Right margin of the graph */
+    rightMargin?: number;
+    /** Top margin of the graph */
+    topMargin?: number;
+    /** Bottom margin of the graph */
+    bottomMargin?: number;
+    /** Maximum value for the radius of the circle */
+    maxRadiusValue?: number;
+    /** Minimum value for position of the circle */
+    minValue?: number;
+    /** Maximum value for position of the circle */
+    maxValue?: number;
+    /** Reference values for comparison */
+    refValues?: ReferenceDataType[];
+    /** Number of ticks on the axis */
+    noOfTicks?: number;
+    /** Toggle visibility of labels */
+    showLabels?: boolean;
+    /** Toggle visibility of values */
+    showTicks?: boolean;
+    /** Toggle visibility of color scale. This is only applicable if the data props hae color parameter */
+    showColorScale?: boolean;
+    /** Toggle visibility of NA color in the color scale. This is only applicable if the data props hae color parameter and showColorScale prop is true */
+    showNAColor?: boolean;
+    /** Toggles if the ref lines and colors animates in when loaded.  */
+    animate?: boolean | AnimateDataType;
+    /** Data points to highlight. Use the label value from data to highlight the data point */
+    highlightedDataPoints?: (string | number)[];
+    /** Defines the opacity of the non-highlighted data */
+    dimmedOpacity?: number;
+    /** Maximum radius of the circles  */
+    radius?: number;
+    /** Specifies the number of decimal places to display in the value. */
+    precision?: number;
+    /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */
+    customLayers?: CustomLayerDataType[];
+    /** Enable graph download option as png */
+    graphDownload?: boolean;
+    /** Enable data download option as a csv */
+    dataDownload?: boolean;
+    /** Reset selection on double-click. Only applicable when used in a dashboard context with filters. */
+    resetSelectionOnDoubleClick?: boolean;
+    /** Tooltip content. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    tooltip?: string | ((_d: any) => React.ReactNode);
+    /** Details displayed on the modal when user clicks of a data point. If the type is string then this uses the [handlebar](../?path=/docs/misc-handlebars-templates-and-custom-helpers--docs) template to display the data */
+    detailsOnClick?: string | ((_d: any) => React.ReactNode);
+    /** Callback for mouse over event */
+    onSeriesMouseOver?: (_d: any) => void;
+    /** Callback for mouse click event */
+    onSeriesMouseClick?: (_d: any) => void;
+    /** Language setting  */
+    language?: Languages;
+    /** Color theme */
+    theme?: 'light' | 'dark';
+    /** Unique ID for the graph */
+    graphID?: string;
+}
+
+declare interface ReferenceDataType {
+    value: number | null;
+    text: string;
+    color?: string;
+    styles?: {
+        line?: React.CSSProperties;
+        text?: React.CSSProperties;
+    };
+    classNames?: {
+        line?: string;
+        text?: string;
+    };
+}
+
+declare interface SourcesDataType {
+    source: string;
+    link?: string;
+}
+
+declare interface StyleObject {
+    title?: React.CSSProperties;
+    footnote?: React.CSSProperties;
+    source?: React.CSSProperties;
+    description?: React.CSSProperties;
+    graphContainer?: React.CSSProperties;
+    tooltip?: React.CSSProperties;
+    xAxis?: AxesStyleObject;
+    yAxis?: AxesStyleObject;
+    graphObjectValues?: React.CSSProperties;
+    dataConnectors?: React.CSSProperties;
+    mouseOverLine?: React.CSSProperties;
+    regLine?: React.CSSProperties;
+    dataCards?: React.CSSProperties;
+}
+
+export { }

package/dist/BeeSwarmChart.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-BHm2KTjD-D8FylaKc.cjs"),xe=require("./index-CZbIGs8q.cjs"),u=require("react"),de=require("./Typography-CDR-DAHH.cjs"),he=require("./index-BXns0-ng.cjs"),me=require("./index-BczVvEBZ.cjs"),pe=require("./Modal-cQF2UQIa.cjs"),fe=require("./Spinner-UmN-KPe9.cjs"),ge=require("./numberFormattingFunction.js"),je=require("./Tooltip-BM18N_3l.cjs"),N=require("./checkIfNullOrUndefined.js"),ye=require("./getTextColorBasedOnBgColor.js"),ie=require("./Colors.js"),ve=require("./string2HTML-X4ZYX5jI.cjs"),we=require("./Axis-BlyBRMNw.cjs"),Se=require("./XTicksAndGridLines-DuK35ROS.cjs"),be=require("./ReferenceLine-Bsb5jeE4.cjs"),ae=require("./use-in-view-Dl1CsAIo.cjs"),Ee=require("./pow-B5-jkdHU.cjs"),Re=require("./linear-BVckp9RD.cjs"),le=require("./y-QcCbqrzx.cjs"),Me=require("./index-a2C2Bqn2.cjs"),Ce=require("./GraphFooter.js"),Oe=require("./GraphHeader.js"),ke=require("./ColorLegendWithMouseOver.js"),Ne=require("./EmptyState-BQguKAp5.cjs"),De=require("./YTicksAndGridLines-CtLvzExe.cjs");function $e(ce){const{data:s,circleColors:a,showTicks:M,leftMargin:oe,width:b,height:E,colorDomain:c,rightMargin:se,topMargin:U,bottomMargin:P,showLabels:F,tooltip:j,onSeriesMouseOver:L,refValues:h,selectedColor:G,startFromZero:W,radius:g,maxRadiusValue:X,maxValue:l,minValue:K,highlightedDataPoints:J,onSeriesMouseClick:Y,rtl:re,resetSelectionOnDoubleClick:Q,detailsOnClick:I,suffix:S,prefix:D,styles:y,classNames:q,noOfTicks:C,animate:f,dimmedOpacity:A,precision:O,customLayers:B}=ce,v=u.useRef(null),k=ae.useInView(v,{once:f.once,amount:f.amount}),[z,$]=u.useState(void 0),[T,_]=u.useState(void 0),[ee,m]=u.useState(null),[p,Z]=u.useState(void 0),[H,x]=u.useState(void 0),d={top:U,bottom:P,left:oe,right:se},ne=b-d.left-d.right,w=E-d.top-d.bottom,te=s.filter(e=>!N.checkIfNullOrUndefined(e.radius)).length===0?s:me.orderBy(s.filter(e=>!N.checkIfNullOrUndefined(e.radius)),"radius","desc"),R=N.checkIfNullOrUndefined(l)?Math.max(...s.filter(e=>!N.checkIfNullOrUndefined(e.position)).map(e=>e.position))<0&&!W?0:Math.max(...s.filter(e=>!N.checkIfNullOrUndefined(e.position)).map(e=>e.position)):l,r=N.checkIfNullOrUndefined(K)?Math.min(...s.filter(e=>!N.checkIfNullOrUndefined(e.position)).map(e=>e.position))>=0&&!W?0:Math.min(...s.filter(e=>!N.checkIfNullOrUndefined(e.position)).map(e=>e.position)):K,n=s.filter(e=>e.radius===void 0||e.radius===null).length!==s.length?Ee.sqrt().domain([0,N.checkIfNullOrUndefined(X)?Math.max(...s.map(e=>e.radius).filter(e=>e!=null)):X]).range([.25,g]).nice():void 0,V=Re.linear().domain([r,R]).range([0,ne]).nice(),t=V.ticks(C);return u.useEffect(()=>{m(null);const e=te.filter(o=>o.position);le.forceSimulation(e).force("x",le.forceX(o=>V(o.position)).strength(5)).force("y",le.forceY(o=>w/2).strength(1)).force("collide",le.forceCollide(o=>n?n(o.radius||0)+1:g+1)).force("charge",le.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{m(e)}).on("end",()=>{m(e)})},[s,g,w,ne,r,R,te,V,n]),i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[ee?i.jsxRuntimeExports.jsx(ae.motion.svg,{width:`${b}px`,height:`${E}px`,viewBox:`0 0 ${b} ${E}`,direction:"ltr",ref:v,children:i.jsxRuntimeExports.jsxs("g",{transform:`translate(${d.left},${d.top})`,children:[M?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(we.Axis,{x1:V(r<0?0:r),x2:V(r<0?0:r),y1:0-d.top,y2:w+d.bottom,label:ge.numberFormattingFunction(r<0?0:r,"NA",O,D,S),labelPos:{x:V(r<0?0:r),y:0-U,dy:"0.75em",dx:3},classNames:{axis:q?.xAxis?.axis,label:q?.yAxis?.labels},styles:{axis:y?.xAxis?.axis,label:y?.yAxis?.labels}}),i.jsxRuntimeExports.jsx(Se.XTicksAndGridLines,{values:t.filter(e=>e!==0),x:t.filter(e=>e!==0).map(e=>V(e)),y1:0-U,y2:w+d.bottom,styles:{gridLines:y?.xAxis?.gridLines,labels:y?.xAxis?.labels},classNames:{gridLines:q?.xAxis?.gridLines,labels:q?.xAxis?.labels},suffix:S,prefix:D,labelType:"secondary",showGridLines:!0,precision:O})]}):null,B.filter(e=>e.position==="before").map(e=>e.layer),i.jsxRuntimeExports.jsxs(Me.AnimatePresence,{children:[ee.map(e=>i.jsxRuntimeExports.jsxs(ae.motion.g,{className:"undp-viz-g-with-hover",transform:`translate(${e.x},${e.y})`,variants:{initial:{opacity:0},whileInView:{opacity:G?e.color&&a[c.indexOf(e.color)]===G?1:A:J.length!==0?J.indexOf(e.label)!==-1?.85:A:.85,transition:{duration:f.duration}}},initial:"initial",animate:k?"whileInView":"initial",exit:{opacity:0,transition:{duration:f.duration}},onMouseEnter:o=>{$(e),x(o.clientY),Z(o.clientX),L?.(e)},onMouseMove:o=>{$(e),x(o.clientY),Z(o.clientX)},onClick:()=>{(Y||I)&&(he.isEqual(T,e)&&Q?(_(void 0),Y?.(void 0)):(_(e),Y?.(e)))},onMouseLeave:()=>{$(void 0),Z(void 0),x(void 0),L?.(void 0)},children:[i.jsxRuntimeExports.jsx(ae.motion.circle,{cx:0,cy:0,variants:{initial:{fill:s.filter(o=>o.color).length===0?a[0]:e.color?a[c.indexOf(e.color)]:ie.Colors.gray,opacity:0,radius:0},whileInView:{fill:s.filter(o=>o.color).length===0?a[0]:e.color?a[c.indexOf(e.color)]:ie.Colors.gray,opacity:1,radius:n?n(e.radius||0):g,transition:{duration:f.duration}}},initial:"initial",animate:k?"whileInView":"initial",exit:{opacity:0,radius:0,transition:{duration:f.duration}}}),(n?n(e.radius||0):g)>10&&F?i.jsxRuntimeExports.jsx(ae.motion.g,{variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:f.duration}}},initial:"initial",animate:k?"whileInView":"initial",exit:{opacity:0,transition:{duration:f.duration}},children:i.jsxRuntimeExports.jsx("foreignObject",{y:0-(n?n(e.radius||0):g),x:0-(n?n(e.radius||0):g),width:2*(n?n(e.radius||0):g),height:2*(n?n(e.radius||0):g),children:i.jsxRuntimeExports.jsx("div",{className:"flex flex-col gap-0.5 justify-center items-center h-inherit py-0 px-1.5",children:F?i.jsxRuntimeExports.jsx("p",{className:de.cnExports.cn("text-center leading-none m-0",q?.graphObjectValues),style:{fontSize:`${Math.min(Math.max(Math.round((n?n(e.radius||0):g)/4),10),Math.max(Math.round((n?n(e.radius||0):g)*12/`${e.label}`.length),10),20)}px`,color:ye.getTextColorBasedOnBgColor(s.filter(o=>o.color).length===0?a[0]:e.color?a[c.indexOf(e.color)]:ie.Colors.gray),hyphens:"auto",...y?.graphObjectValues||{}},children:e.label}):null})})}):null]},e.label)),h?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:h.map((e,o)=>i.jsxRuntimeExports.jsx(be.RefLineX,{text:e.text,color:e.color,x:V(e.value),y1:0-d.top,y2:w+d.bottom,textSide:V(e.value)>ne*.75||re?"left":"right",classNames:e.classNames,styles:e.styles,animate:f,isInView:k},o))}):null]}),B.filter(e=>e.position==="after").map(e=>e.layer)]})}):i.jsxRuntimeExports.jsx("div",{style:{width:`${b}px`,height:`${E}px`},children:i.jsxRuntimeExports.jsx("div",{className:"flex m-auto items-center justify-center p-0 leading-none text-base h-40",children:i.jsxRuntimeExports.jsx(fe.SpinnerExports.Spinner,{})})}),z&&j&&p&&H?i.jsxRuntimeExports.jsx(je.Tooltip,{data:z,body:j,xPos:p,yPos:H,backgroundStyle:y?.tooltip,className:q?.tooltip}):null,I&&T!==void 0?i.jsxRuntimeExports.jsx(pe.ModalExports.Modal,{open:T!==void 0,onClose:()=>{_(void 0)},children:i.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof I=="string"?{__html:ve.string2HTML(I,T)}:void 0,children:typeof I=="function"?I(T):null})}):null]})}function Te(ce){const{data:s,graphTitle:a,backgroundColor:M=!1,topMargin:oe=25,bottomMargin:b=10,leftMargin:E=10,rightMargin:c=10,showLabels:se=!0,showTicks:U=!0,colors:P,sources:F,graphDescription:j,height:L,width:h,footNote:G,colorDomain:W,colorLegendTitle:g,padding:X,relativeHeight:l,tooltip:K,onSeriesMouseOver:J,refValues:Y,showColorScale:re,graphID:Q,radius:I=5,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q=[],onSeriesMouseClick:C,graphDownload:f=!1,dataDownload:A=!1,language:O="en",showNAColor:B=!0,minHeight:v=0,theme:k="light",ariaLabel:z,resetSelectionOnDoubleClick:$=!0,detailsOnClick:T,suffix:_="",prefix:ee="",styles:m,classNames:p,noOfTicks:Z,animate:H=!1,dimmedOpacity:x=.3,precision:d=2,customLayers:ne=[]}=ce,[w,te]=u.useState(0),[R,r]=u.useState(0),[n,V]=u.useState(void 0),t=u.useRef(null),e=u.useRef(null);return u.useEffect(()=>{const o=new ResizeObserver(ue=>{te(h||ue[0].target.clientWidth||620),r(L||ue[0].target.clientHeight||480)});return t.current&&(r(t.current.clientHeight||480),te(t.current.clientWidth||620),h||o.observe(t.current)),()=>o.disconnect()},[h,L]),i.jsxRuntimeExports.jsx("div",{className:`${k||"light"} flex  ${h?"w-fit grow-0":"w-full grow"}`,dir:O==="he"||O==="ar"?"rtl":void 0,children:i.jsxRuntimeExports.jsx("div",{className:de.cnExports.cn(`${M?M===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${O||"en"}`,p?.graphContainer),style:{...m?.graphContainer||{},...M&&M!==!0?{backgroundColor:M}:{}},id:Q,ref:e,"aria-label":z||`${a?`The graph shows ${a}. `:""}This is a bee swarm chart showing the distribution along the x-axes. ${j?` ${j}`:""}`,children:i.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:M?X||"1rem":X||0},children:i.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[a||j||f||A?i.jsxRuntimeExports.jsx(Oe.GraphHeader,{styles:{title:m?.title,description:m?.description},classNames:{title:p?.title,description:p?.description},graphTitle:a,graphDescription:j,width:h,graphDownload:f?e.current:void 0,dataDownload:A?s.map(o=>o.data).filter(o=>o!==void 0).length>0?s.map(o=>o.data).filter(o=>o!==void 0):s.filter(o=>o!==void 0):null}):null,i.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:s.length===0?i.jsxRuntimeExports.jsx(Ne.EmptyState,{}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[re!==!1&&s.filter(o=>o.color).length!==0?i.jsxRuntimeExports.jsx(ke.ColorLegendWithMouseOver,{width:h,colorLegendTitle:g,colors:P||ie.Colors[k].categoricalColors.colors,colorDomain:W||xe.uniqBy(s.filter(o=>o.color),"color").map(o=>o.color),setSelectedColor:V,showNAColor:B??!0}):null,i.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:t,"aria-label":"Graph area",children:(h||w)&&(L||R)?i.jsxRuntimeExports.jsx($e,{data:s,circleColors:s.filter(o=>o.color).length===0?P?[P]:[ie.Colors.primaryColors["blue-600"]]:P||ie.Colors[k].categoricalColors.colors,colorDomain:s.filter(o=>o.color).length===0?[]:W||xe.uniqBy(s.filter(o=>o.color),"color").map(o=>o.color),width:h||w,selectedColor:n,height:Math.max(v,L||(l?v?(h||w)*l>v?(h||w)*l:v:(h||w)*l:R)),showTicks:U,leftMargin:E,rightMargin:c,topMargin:oe,bottomMargin:b,showLabels:se,tooltip:K,onSeriesMouseOver:J,refValues:Y,startFromZero:!1,radius:I,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q,onSeriesMouseClick:C,rtl:O==="he"||O==="ar",resetSelectionOnDoubleClick:$,detailsOnClick:T,suffix:_,prefix:ee,styles:m,classNames:p,noOfTicks:Z||5,animate:H===!0?{duration:.5,once:!0,amount:.5}:H||{duration:0,once:!0,amount:0},dimmedOpacity:x,precision:d,customLayers:ne}):null})]})}),F||G?i.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:m?.footnote,source:m?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:F,footNote:G,width:h}):null]})})})})}function Ve(ce){const{data:s,circleColors:a,showTicks:M,leftMargin:oe,width:b,height:E,colorDomain:c,rightMargin:se,topMargin:U,bottomMargin:P,suffix:F,prefix:j,showLabels:L,tooltip:h,onSeriesMouseOver:G,refValues:W,selectedColor:g,startFromZero:X,radius:l,maxRadiusValue:K,maxValue:J,minValue:Y,highlightedDataPoints:re,onSeriesMouseClick:Q,resetSelectionOnDoubleClick:I,detailsOnClick:S,styles:D,classNames:y,noOfTicks:q,animate:C,dimmedOpacity:f,precision:A,customLayers:O}=ce,B=u.useRef(null),v=ae.useInView(B,{once:C.once,amount:C.amount}),[k,z]=u.useState(void 0),[$,T]=u.useState(void 0),[_,ee]=u.useState(null),[m,p]=u.useState(void 0),[Z,H]=u.useState(void 0),x={top:U,bottom:P,left:oe,right:se},d=b-x.left-x.right,ne=E-x.top-x.bottom,w=s.filter(t=>!N.checkIfNullOrUndefined(t.radius)).length===0?s:me.orderBy(s.filter(t=>!N.checkIfNullOrUndefined(t.radius)),"radius","desc"),te=N.checkIfNullOrUndefined(J)?Math.max(...s.filter(t=>!N.checkIfNullOrUndefined(t.position)).map(t=>t.position))<0&&!X?0:Math.max(...s.filter(t=>!N.checkIfNullOrUndefined(t.position)).map(t=>t.position)):J,R=N.checkIfNullOrUndefined(Y)?Math.min(...s.filter(t=>!N.checkIfNullOrUndefined(t.position)).map(t=>t.position))>=0&&!X?0:Math.min(...s.filter(t=>!N.checkIfNullOrUndefined(t.position)).map(t=>t.position)):Y,r=s.filter(t=>t.radius===void 0||t.radius===null).length!==s.length?Ee.sqrt().domain([0,N.checkIfNullOrUndefined(K)?Math.max(...s.map(t=>t.radius).filter(t=>t!=null)):K]).range([.25,l]).nice():void 0,n=Re.linear().domain([R,te]).range([ne,0]).nice(),V=n.ticks(q);return u.useEffect(()=>{ee(null);const t=w.filter(e=>e.position);le.forceSimulation(t).force("y",le.forceY(e=>n(e.position)).strength(5)).force("x",le.forceX(e=>d/2).strength(1)).force("collide",le.forceCollide(e=>r?r(e.radius||0)+1:l+1)).force("charge",le.forceManyBody().strength(-15)).alphaDecay(.05).tick(1e4).on("tick",()=>{ee(t)}).on("end",()=>{ee(t)})},[s,l,ne,d,R,te,w,n,r]),i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[_?i.jsxRuntimeExports.jsx(ae.motion.svg,{width:`${b}px`,height:`${E}px`,viewBox:`0 0 ${b} ${E}`,direction:"ltr",ref:B,children:i.jsxRuntimeExports.jsxs("g",{transform:`translate(${x.left},${x.top})`,children:[M?i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(we.Axis,{y1:n(R<0?0:R),y2:n(R<0?0:R),x1:0-x.left,x2:d+x.right,label:ge.numberFormattingFunction(R<0?0:R,"NA",A,j,F),labelPos:{x:0-x.left,y:n(R<0?0:R),dx:0,dy:te<0?"1em":-5},classNames:{axis:y?.xAxis?.axis,label:y?.yAxis?.labels},styles:{axis:D?.xAxis?.axis,label:D?.yAxis?.labels}}),i.jsxRuntimeExports.jsx(De.YTicksAndGridLines,{values:V.filter(t=>t!==0),y:V.filter(t=>t!==0).map(t=>n(t)),x1:0-x.left,x2:d+x.right,styles:{gridLines:D?.yAxis?.gridLines,labels:D?.yAxis?.labels},classNames:{gridLines:y?.yAxis?.gridLines,labels:y?.yAxis?.labels},suffix:F,prefix:j,labelType:"secondary",showGridLines:!0,labelPos:"vertical",precision:A})]}):null,O.filter(t=>t.position==="before").map(t=>t.layer),i.jsxRuntimeExports.jsxs(Me.AnimatePresence,{children:[_.map(t=>i.jsxRuntimeExports.jsxs(ae.motion.g,{className:"undp-viz-g-with-hover",transform:`translate(${t.x},${t.y})`,variants:{initial:{opacity:0},whileInView:{opacity:g?t.color&&a[c.indexOf(t.color)]===g?1:f:re.length!==0?re.indexOf(t.label)!==-1?.85:f:.85,transition:{duration:C.duration}}},initial:"initial",animate:v?"whileInView":"initial",exit:{opacity:0,transition:{duration:C.duration}},onMouseEnter:e=>{z(t),H(e.clientY),p(e.clientX),G?.(t)},onMouseMove:e=>{z(t),H(e.clientY),p(e.clientX)},onClick:()=>{(Q||S)&&(he.isEqual($,t)&&I?(T(void 0),Q?.(void 0)):(T(t),Q?.(t)))},onMouseLeave:()=>{z(void 0),p(void 0),H(void 0),G?.(void 0)},children:[i.jsxRuntimeExports.jsx(ae.motion.circle,{cx:0,cy:0,r:r?r(t.radius||0):l,variants:{initial:{fill:s.filter(e=>e.color).length===0?a[0]:t.color?a[c.indexOf(t.color)]:ie.Colors.gray,opacity:0,radius:0},whileInView:{fill:s.filter(e=>e.color).length===0?a[0]:t.color?a[c.indexOf(t.color)]:ie.Colors.gray,opacity:1,radius:r?r(t.radius||0):l,transition:{duration:C.duration}}},initial:"initial",animate:v?"whileInView":"initial",exit:{opacity:0,radius:0,transition:{duration:C.duration}}}),(r?r(t.radius||0):l)>10&&L?i.jsxRuntimeExports.jsx(ae.motion.g,{variants:{initial:{opacity:0},whileInView:{opacity:1,transition:{duration:C.duration}}},initial:"initial",animate:v?"whileInView":"initial",exit:{opacity:0,transition:{duration:C.duration}},children:i.jsxRuntimeExports.jsx("foreignObject",{y:0-(r?r(t.radius||0):l),x:0-(r?r(t.radius||0):l),width:2*(r?r(t.radius||0):l),height:2*(r?r(t.radius||0):l),children:i.jsxRuntimeExports.jsx("div",{className:"flex flex-col justify-center items-center h-inherit py-0 px-1.5",children:L?i.jsxRuntimeExports.jsx("p",{className:de.cnExports.cn("text-center leading-none m-0",y?.graphObjectValues),style:{fontSize:`${Math.min(Math.max(Math.round((r?r(t.radius||0):l)/4),10),Math.max(Math.round((r?r(t.radius||0):l)*12/`${t.label}`.length),10),20)}px`,hyphens:"auto",color:ye.getTextColorBasedOnBgColor(s.filter(e=>e.color).length===0?a[0]:t.color?a[c.indexOf(t.color)]:ie.Colors.gray),...D?.graphObjectValues||{}},children:t.label}):null})})}):null]},t.label)),W?i.jsxRuntimeExports.jsx(i.jsxRuntimeExports.Fragment,{children:W.map((t,e)=>i.jsxRuntimeExports.jsx(be.RefLineY,{text:t.text,color:t.color,y:n(t.value),x1:0-x.left,x2:d+x.right,classNames:t.classNames,styles:t.styles,animate:C,isInView:v},e))}):null]}),O.filter(t=>t.position==="after").map(t=>t.layer)]})}):i.jsxRuntimeExports.jsx("div",{style:{width:`${b}px`,height:`${E}px`},children:i.jsxRuntimeExports.jsx("div",{className:"flex m-auto items-center justify-center p-0 leading-none text-base h-40",children:i.jsxRuntimeExports.jsx(fe.SpinnerExports.Spinner,{})})}),k&&h&&m&&Z?i.jsxRuntimeExports.jsx(je.Tooltip,{data:k,body:h,xPos:m,yPos:Z,backgroundStyle:D?.tooltip,className:y?.tooltip}):null,S&&$!==void 0?i.jsxRuntimeExports.jsx(pe.ModalExports.Modal,{open:$!==void 0,onClose:()=>{T(void 0)},children:i.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof S=="string"?{__html:ve.string2HTML(S,$)}:void 0,children:typeof S=="function"?S($):null})}):null]})}function Le(ce){const{data:s,graphTitle:a,colors:M,sources:oe,graphDescription:b,height:E,width:c,footNote:se,colorDomain:U,colorLegendTitle:P,padding:F,backgroundColor:j=!1,topMargin:L=25,bottomMargin:h=10,leftMargin:G=100,rightMargin:W=40,showLabels:g=!0,showTicks:X=!0,relativeHeight:l,tooltip:K,onSeriesMouseOver:J,refValues:Y,showColorScale:re,graphID:Q,radius:I=5,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q=[],onSeriesMouseClick:C,graphDownload:f=!1,dataDownload:A=!1,language:O="en",showNAColor:B=!0,minHeight:v=0,theme:k="light",ariaLabel:z,resetSelectionOnDoubleClick:$=!0,detailsOnClick:T,suffix:_="",prefix:ee="",styles:m,classNames:p,noOfTicks:Z,animate:H=!1,dimmedOpacity:x=.3,precision:d=2,customLayers:ne=[]}=ce,[w,te]=u.useState(0),[R,r]=u.useState(0),[n,V]=u.useState(void 0),t=u.useRef(null),e=u.useRef(null);return u.useEffect(()=>{const o=new ResizeObserver(ue=>{te(c||ue[0].target.clientWidth||620),r(E||ue[0].target.clientHeight||480)});return t.current&&(r(t.current.clientHeight||480),te(t.current.clientWidth||620),c||o.observe(t.current)),()=>o.disconnect()},[c,E]),i.jsxRuntimeExports.jsx("div",{className:`${k||"light"} flex  ${c?"w-fit grow-0":"w-full grow"}`,dir:O==="he"||O==="ar"?"rtl":void 0,children:i.jsxRuntimeExports.jsx("div",{className:de.cnExports.cn(`${j?j===!0?"bg-primary-gray-200 dark:bg-primary-gray-650 ":"":"bg-transparent "}ml-auto mr-auto flex flex-col grow h-inherit ${O||"en"}`,p?.graphContainer),style:{...m?.graphContainer||{},...j&&j!==!0?{backgroundColor:j}:{}},id:Q,ref:e,"aria-label":z||`${a?`The graph shows ${a}. `:""}This is a bee swarm chart showing the distribution along the y-axes. ${b?` ${b}`:""}`,children:i.jsxRuntimeExports.jsx("div",{className:"flex grow",style:{padding:j?F||"1rem":F||0},children:i.jsxRuntimeExports.jsxs("div",{className:"flex flex-col w-full gap-4 grow justify-between",children:[a||b||f||A?i.jsxRuntimeExports.jsx(Oe.GraphHeader,{styles:{title:m?.title,description:m?.description},classNames:{title:p?.title,description:p?.description},graphTitle:a,graphDescription:b,width:c,graphDownload:f?e.current:void 0,dataDownload:A?s.map(o=>o.data).filter(o=>o!==void 0).length>0?s.map(o=>o.data).filter(o=>o!==void 0):s.filter(o=>o!==void 0):null}):null,i.jsxRuntimeExports.jsx("div",{className:"grow flex flex-col justify-center gap-3 w-full",children:s.length===0?i.jsxRuntimeExports.jsx(Ne.EmptyState,{}):i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[re!==!1&&s.filter(o=>o.color).length!==0?i.jsxRuntimeExports.jsx(ke.ColorLegendWithMouseOver,{width:c,colorLegendTitle:P,colors:M||ie.Colors[k].categoricalColors.colors,colorDomain:U||xe.uniqBy(s.filter(o=>o.color),"color").map(o=>o.color),setSelectedColor:V,showNAColor:B}):null,i.jsxRuntimeExports.jsx("div",{className:"flex flex-col grow justify-center w-full leading-0",ref:t,"aria-label":"Graph area",children:(c||w)&&(E||R)?i.jsxRuntimeExports.jsx(Ve,{data:s,circleColors:s.filter(o=>o.color).length===0?M?[M]:[ie.Colors.primaryColors["blue-600"]]:M||ie.Colors[k].categoricalColors.colors,colorDomain:s.filter(o=>o.color).length===0?[]:U||xe.uniqBy(s.filter(o=>o.color),"color").map(o=>o.color),width:c||w,selectedColor:n,height:Math.max(v,E||(l?v?(c||w)*l>v?(c||w)*l:v:(c||w)*l:R)),showTicks:X,leftMargin:G,rightMargin:W,topMargin:L,bottomMargin:h,showLabels:g,tooltip:K,onSeriesMouseOver:J,refValues:Y,startFromZero:!1,radius:I,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q,onSeriesMouseClick:C,resetSelectionOnDoubleClick:$,detailsOnClick:T,styles:m,classNames:p,suffix:_,prefix:ee,noOfTicks:Z||5,animate:H===!0?{duration:.5,once:!0,amount:.5}:H||{duration:0,once:!0,amount:0},dimmedOpacity:x,precision:d,customLayers:ne}):null})]})}),oe||se?i.jsxRuntimeExports.jsx(Ce.GraphFooter,{styles:{footnote:m?.footnote,source:m?.source},classNames:{footnote:p?.footnote,source:p?.source},sources:oe,footNote:se,width:c}):null]})})})})}function Ie(ce){const{data:s,graphTitle:a,backgroundColor:M,topMargin:oe,bottomMargin:b,leftMargin:E,rightMargin:c,showLabels:se,showTicks:U,colors:P,sources:F,graphDescription:j,height:L,width:h,footNote:G,colorDomain:W,colorLegendTitle:g,padding:X,relativeHeight:l,tooltip:K,onSeriesMouseOver:J,refValues:Y,showColorScale:re,graphID:Q,radius:I,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q,onSeriesMouseClick:C,graphDownload:f,dataDownload:A,language:O,showNAColor:B,minHeight:v,theme:k,ariaLabel:z,resetSelectionOnDoubleClick:$,detailsOnClick:T,noOfTicks:_,orientation:ee="vertical",styles:m,classNames:p,animate:Z,dimmedOpacity:H,precision:x,customLayers:d}=ce;return ee==="vertical"?i.jsxRuntimeExports.jsx(Le,{data:s,graphTitle:a,backgroundColor:M,topMargin:oe,bottomMargin:b,leftMargin:E,rightMargin:c,showLabels:se,showTicks:U,colors:P,sources:F,graphDescription:j,height:L,width:h,footNote:G,colorDomain:W,colorLegendTitle:g,padding:X,relativeHeight:l,tooltip:K,onSeriesMouseOver:J,refValues:Y,showColorScale:re,graphID:Q,radius:I,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q,onSeriesMouseClick:C,graphDownload:f,dataDownload:A,language:O,showNAColor:B,minHeight:v,theme:k,ariaLabel:z,resetSelectionOnDoubleClick:$,styles:m,detailsOnClick:T,classNames:p,noOfTicks:_,animate:Z,dimmedOpacity:H,precision:x,customLayers:d}):i.jsxRuntimeExports.jsx(Te,{data:s,graphTitle:a,backgroundColor:M,topMargin:oe,bottomMargin:b,leftMargin:E,rightMargin:c,showLabels:se,showTicks:U,colors:P,sources:F,graphDescription:j,height:L,width:h,footNote:G,colorDomain:W,colorLegendTitle:g,padding:X,relativeHeight:l,tooltip:K,onSeriesMouseOver:J,refValues:Y,showColorScale:re,graphID:Q,radius:I,maxRadiusValue:S,maxValue:D,minValue:y,highlightedDataPoints:q,onSeriesMouseClick:C,graphDownload:f,dataDownload:A,language:O,showNAColor:B,minHeight:v,theme:k,ariaLabel:z,resetSelectionOnDoubleClick:$,styles:m,detailsOnClick:T,classNames:p,noOfTicks:_,animate:Z,dimmedOpacity:H,precision:x,customLayers:d})}exports.BeeSwarmChart=Ie;
+//# sourceMappingURL=BeeSwarmChart.js.map