@undp/data-viz 2.5.4 → 2.6.1

package/dist/SparkLine-DTNx2kjz.js

@@ -0,0 +1,216 @@
+import { o as e } from "./chunk-foFoljWS.js";
+import { t } from "./jsx-runtime-C76bEyh7.js";
+import { Colors as n } from "./Colors.js";
+import { GraphFooter as r } from "./GraphFooter.js";
+import { GraphHeader as i } from "./GraphHeader.js";
+import { t as a } from "./checkIfNullOrUndefined-C5gqSAtF.js";
+import { n as o, t as s } from "./GraphContainer-DgEB1AVN.js";
+import { n as c, t as l } from "./parse-5MWhaq6h.js";
+import { t as u } from "./lodash.orderby-Dn2sr3tw.js";
+import { n as d } from "./init-CT6uqW57.js";
+import { t as f } from "./linear-BkosG4OK.js";
+import { t as p } from "./time-BSWvT9ln.js";
+import { t as m } from "./Tooltip-Y6uTGwkF.js";
+import { i as h, t as ee } from "./line-6wslDyQb.js";
+import { t as g } from "./area-BLagdTXz.js";
+import { i as _, n as v, r as y, t as b } from "./step-Bxl4gFpO.js";
+import { t as x } from "./generateRandomString-BaDYvqHT.js";
+import { t as S } from "./select-0Z0HV7nm.js";
+import { t as C } from "./pointer-CoEekBJE.js";
+import { cn as w } from "@undp/design-system-react/cn";
+import { useEffect as te, useRef as T, useState as E } from "react";
+//#region src/Components/Graphs/LineCharts/SparkLine/Graph.tsx
+var D = /* @__PURE__ */ e(u(), 1), O = t();
+function k(e) {
+	let { data: t, width: n, height: r, lineColor: i, dateFormat: o, areaId: s, leftMargin: u, rightMargin: x, topMargin: k, bottomMargin: A, tooltip: j, onSeriesMouseOver: M, minValue: N, maxValue: P, curveType: F, styles: I, classNames: L, customLayers: R } = e, z = F === "linear" ? h : F === "step" ? y : F === "stepAfter" ? b : F === "stepBefore" ? v : _, [B, V] = E(void 0), [H, U] = E(void 0), [W, G] = E(void 0), K = {
+		top: k,
+		bottom: A,
+		left: u,
+		right: x
+	}, q = T(null), J = (0, D.default)(t.map((e) => ({
+		...e,
+		date: l(`${e.date}`, o, /* @__PURE__ */ new Date())
+	})), ["date"], ["asc"]), Y = n - K.left - K.right, X = r - K.top - K.bottom, ne = J[0].date, re = J[J.length - 1].date, ie = Math.min(...J.map((e) => e.y).filter((e) => e != null)) === Infinity || Math.min(...J.map((e) => e.y).filter((e) => e != null)) > 0 ? 0 : Math.min(...J.map((e) => e.y).filter((e) => e != null)), Z = Math.max(...J.map((e) => e.y).filter((e) => e != null)) === Infinity ? 0 : Math.max(...J.map((e) => e.y).filter((e) => e != null)), Q = p().domain([ne, re]).range([0, Y]), $ = f().domain([a(N) ? ie : N, a(P) ? Z > 0 ? Z : 0 : P]).range([X, 0]).nice(), ae = g().x((e) => Q(e.date)).y1((e) => $(e.y)).y0(X).curve(z), oe = ee().x((e) => Q(e.date)).y((e) => $(e.y)).curve(z);
+	return te(() => {
+		S(q.current).on("mousemove", (e) => {
+			let t = J[d(J.map((e) => e.date), Q.invert(C(e)[0]), 0)];
+			V(t || J[J.length - 1]), M?.(t || J[J.length - 1]), G(e.clientY), U(e.clientX);
+		}).on("mouseout", () => {
+			V(void 0), M?.(void 0), U(void 0), G(void 0);
+		}), M?.(void 0);
+	}, [
+		Q,
+		J,
+		M
+	]), /* @__PURE__ */ (0, O.jsxs)(O.Fragment, { children: [/* @__PURE__ */ (0, O.jsxs)("svg", {
+		width: `${n}px`,
+		height: `${r}px`,
+		viewBox: `0 0 ${n} ${r}`,
+		direction: "ltr",
+		children: [s ? /* @__PURE__ */ (0, O.jsxs)("linearGradient", {
+			id: s,
+			x1: "0",
+			x2: "0",
+			y1: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ (0, O.jsx)("stop", {
+				style: { stopColor: i },
+				stopOpacity: "0.1",
+				offset: "0%"
+			}), /* @__PURE__ */ (0, O.jsx)("stop", {
+				style: { stopColor: i },
+				stopOpacity: "0",
+				offset: "100%"
+			})]
+		}) : null, /* @__PURE__ */ (0, O.jsxs)("g", {
+			transform: `translate(${K.left},${K.top})`,
+			children: [
+				R.filter((e) => e.position === "before").map((e) => e.layer),
+				/* @__PURE__ */ (0, O.jsxs)("g", { children: [/* @__PURE__ */ (0, O.jsx)("text", {
+					className: w("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs", L?.xAxis?.labels),
+					y: X,
+					x: Q(J[J.length - 1].date),
+					style: {
+						textAnchor: "end",
+						...I?.xAxis?.labels
+					},
+					dy: "1em",
+					children: c(J[J.length - 1].date, o)
+				}), /* @__PURE__ */ (0, O.jsx)("text", {
+					y: X,
+					x: Q(J[0].date),
+					style: {
+						textAnchor: "start",
+						...I?.xAxis?.labels
+					},
+					className: w("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs", L?.xAxis?.labels),
+					dy: "1em",
+					children: c(J[0].date, o)
+				})] }),
+				/* @__PURE__ */ (0, O.jsxs)("g", { children: [
+					/* @__PURE__ */ (0, O.jsx)("path", {
+						d: ae(J) || "",
+						style: {
+							fill: `url(#${s})`,
+							clipPath: "url(#clip)"
+						}
+					}),
+					/* @__PURE__ */ (0, O.jsx)("path", {
+						d: oe(J) || "",
+						style: {
+							stroke: i,
+							fill: "none",
+							strokeWidth: 2
+						}
+					}),
+					B ? /* @__PURE__ */ (0, O.jsx)("circle", {
+						y1: 0,
+						cy: $(B.y),
+						cx: Q(B.date),
+						r: 5,
+						style: { fill: i }
+					}) : null
+				] }),
+				R.filter((e) => e.position === "after").map((e) => e.layer),
+				/* @__PURE__ */ (0, O.jsx)("rect", {
+					ref: q,
+					style: {
+						fill: "none",
+						pointerEvents: "all"
+					},
+					width: Y,
+					height: X
+				})
+			]
+		})]
+	}), B && j && H && W ? /* @__PURE__ */ (0, O.jsx)(m, {
+		data: B,
+		body: j,
+		xPos: H,
+		yPos: W,
+		backgroundStyle: I?.tooltip,
+		className: L?.tooltip
+	}) : null] });
+}
+//#endregion
+//#region src/Components/Graphs/LineCharts/SparkLine/index.tsx
+function A(e) {
+	let { data: t, graphTitle: a, lineColor: c, sources: l, graphDescription: u, height: d, width: f, footNote: p, dateFormat: m = "yyyy", area: h = !1, padding: ee, backgroundColor: g = !0, leftMargin: _ = 5, rightMargin: v = 5, topMargin: y = 10, bottomMargin: b = 20, tooltip: S, relativeHeight: C, onSeriesMouseOver: w, graphID: D, minValue: A, maxValue: j, graphDownload: M = !1, dataDownload: N = !1, language: P = "en", minHeight: F = 0, theme: I = "light", ariaLabel: L, curveType: R = "curve", styles: z, classNames: B, customLayers: V = [] } = e, [H, U] = E(0), [W, G] = E(0), K = T(null), q = T(null);
+	return te(() => {
+		let e = new ResizeObserver((e) => {
+			U(e[0].target.clientWidth || 620), G(e[0].target.clientHeight || 480);
+		});
+		return K.current && e.observe(K.current), () => e.disconnect();
+	}, []), /* @__PURE__ */ (0, O.jsxs)(o, {
+		className: B?.graphContainer,
+		style: z?.graphContainer,
+		id: D,
+		ref: q,
+		"aria-label": L,
+		backgroundColor: g,
+		theme: I,
+		language: P,
+		minHeight: F,
+		width: f,
+		height: d,
+		relativeHeight: C,
+		padding: ee,
+		children: [
+			a || u || M || N ? /* @__PURE__ */ (0, O.jsx)(i, {
+				styles: {
+					title: z?.title,
+					description: z?.description
+				},
+				classNames: {
+					title: B?.title,
+					description: B?.description
+				},
+				graphTitle: a,
+				graphDescription: u,
+				width: f,
+				graphDownload: M ? q : void 0,
+				dataDownload: N ? t.map((e) => e.data).filter((e) => e !== void 0).length > 0 ? t.map((e) => e.data).filter((e) => e !== void 0) : t.filter((e) => e !== void 0) : null
+			}) : null,
+			/* @__PURE__ */ (0, O.jsx)(s, {
+				ref: K,
+				children: H && W ? /* @__PURE__ */ (0, O.jsx)(k, {
+					data: t,
+					lineColor: c || n.primaryColors["blue-600"],
+					width: H,
+					height: W,
+					dateFormat: m,
+					areaId: h ? x(8) : void 0,
+					leftMargin: _,
+					rightMargin: v,
+					topMargin: y,
+					bottomMargin: b,
+					tooltip: S,
+					onSeriesMouseOver: w,
+					minValue: A,
+					maxValue: j,
+					curveType: R,
+					styles: z,
+					classNames: B,
+					customLayers: V
+				}) : null
+			}),
+			l || p ? /* @__PURE__ */ (0, O.jsx)(r, {
+				styles: {
+					footnote: z?.footnote,
+					source: z?.source
+				},
+				classNames: {
+					footnote: B?.footnote,
+					source: B?.source
+				},
+				sources: l,
+				footNote: p,
+				width: f
+			}) : null
+		]
+	});
+}
+//#endregion
+export { A as t };
+
+//# sourceMappingURL=SparkLine-DTNx2kjz.js.map

package/dist/SparkLine-DTNx2kjz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkLine-DTNx2kjz.js","names":[],"sources":["../src/Components/Graphs/LineCharts/SparkLine/Graph.tsx","../src/Components/Graphs/LineCharts/SparkLine/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { useEffect, useRef, useState } from 'react';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  LineChartDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\n\ninterface Props {\n  data: LineChartDataType[];\n  lineColor: string;\n  width: number;\n  height: number;\n  dateFormat: string;\n  areaId?: string;\n  leftMargin: number;\n  rightMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  maxValue?: number;\n  minValue?: number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  customLayers: CustomLayerDataType[];\n}\n\ninterface FormattedDataType {\n  y: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColor,\n    dateFormat,\n    areaId,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    minValue,\n    maxValue,\n    curveType,\n    styles,\n    classNames,\n    customLayers,\n  } = props;\n  const curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = dataFormatted[0].date;\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\n  const minParam: number =\n    Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam: number =\n    Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear()\n    .domain([\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const mainGraphArea = area<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y1((d) => y(d.y))\n    .y0(graphHeight)\n    .curve(curve);\n  const lineShape = line<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y((d) => y(d.y))\n    .curve(curve);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      onSeriesMouseOver?.(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\n  return (\n    <>\n      <svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n      >\n        {areaId ? (\n          <linearGradient id={areaId} x1='0' x2='0' y1='0' y2='1'>\n            <stop style={{ stopColor: lineColor }} stopOpacity='0.1' offset='0%' />\n            <stop style={{ stopColor: lineColor }} stopOpacity='0' offset='100%' />\n          </linearGradient>\n        ) : null}\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            <text\n              className={cn(\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\n                classNames?.xAxis?.labels,\n              )}\n              y={graphHeight}\n              x={x(dataFormatted[dataFormatted.length - 1].date)}\n              style={{\n                textAnchor: 'end',\n                ...styles?.xAxis?.labels,\n              }}\n              dy='1em'\n            >\n              {format(dataFormatted[dataFormatted.length - 1].date, dateFormat)}\n            </text>\n            <text\n              y={graphHeight}\n              x={x(dataFormatted[0].date)}\n              style={{\n                textAnchor: 'start',\n                ...styles?.xAxis?.labels,\n              }}\n              className={cn(\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\n                classNames?.xAxis?.labels,\n              )}\n              dy='1em'\n            >\n              {format(dataFormatted[0].date, dateFormat)}\n            </text>\n          </g>\n          <g>\n            <path\n              d={mainGraphArea(dataFormatted) || ''}\n              style={{\n                fill: `url(#${areaId})`,\n                clipPath: 'url(#clip)',\n              }}\n            />\n            <path\n              d={lineShape(dataFormatted) || ''}\n              style={{\n                stroke: lineColor,\n                fill: 'none',\n                strokeWidth: 2,\n              }}\n            />\n            {mouseOverData ? (\n              <circle\n                y1={0}\n                cy={y(mouseOverData.y)}\n                cx={x(mouseOverData.date)}\n                r={5}\n                style={{ fill: lineColor }}\n              />\n            ) : null}\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n          <rect\n            ref={MouseoverRectRef}\n            style={{\n              fill: 'none',\n              pointerEvents: 'all',\n            }}\n            width={graphWidth}\n            height={graphHeight}\n          />\n        </g>\n      </svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  Languages,\n  LineChartDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { generateRandomString } from '@/Utils/generateRandomString';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: LineChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Colors of the lines */\n  lineColor?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n\n  // Graph Parameters\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Toggles the visibility of the area below the line */\n  area?: boolean;\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n\n  // Interactions and Callbacks\n  /** 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 */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function SparkLine(props: Props) {\n  const {\n    data,\n    graphTitle,\n    lineColor,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    dateFormat = 'yyyy',\n    area = false,\n    padding,\n    backgroundColor = true,\n    leftMargin = 5,\n    rightMargin = 5,\n    topMargin = 10,\n    bottomMargin = 20,\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    minValue,\n    maxValue,\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {svgWidth && svgHeight ? (\n          <Graph\n            data={data}\n            lineColor={lineColor || Colors.primaryColors['blue-600']}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            areaId={area ? generateRandomString(8) : undefined}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            minValue={minValue}\n            maxValue={maxValue}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/SparkLine-cHaN4VYd.cjs

@@ -0,0 +1,2 @@
+const e=require(`./chunk-gGpyby2o.cjs`),t=require(`./jsx-runtime-Cd1vCQjn.cjs`),n=require(`./Colors.cjs`),r=require(`./GraphFooter.cjs`),i=require(`./GraphHeader.cjs`),a=require(`./checkIfNullOrUndefined-DYvc3fz_.cjs`),o=require(`./GraphContainer-7xAPK4Tb.cjs`),s=require(`./parse-C718o4YM.cjs`),c=require(`./lodash.orderby-Us2PHq2D.cjs`),l=require(`./init-BTypmXMF.cjs`),u=require(`./linear-B93YyHf_.cjs`),d=require(`./time-B9tsaA4g.cjs`),f=require(`./Tooltip-CO_iOj_w.cjs`),p=require(`./line-DoUnRqpS.cjs`),m=require(`./area-Cwt2IPSp.cjs`),h=require(`./step-C_FLQezZ.cjs`),g=require(`./generateRandomString-GzIwYnol.cjs`),_=require(`./select-CZVfejpg.cjs`),v=require(`./pointer-nSSkgdlX.cjs`);let y=require(`@undp/design-system-react/cn`),b=require(`react`);var x=e.a(c.t(),1),S=t.t();function C(e){let{data:t,width:n,height:r,lineColor:i,dateFormat:o,areaId:c,leftMargin:g,rightMargin:C,topMargin:w,bottomMargin:T,tooltip:E,onSeriesMouseOver:D,minValue:O,maxValue:k,curveType:A,styles:j,classNames:M,customLayers:N}=e,P=A===`linear`?p.i:A===`step`?h.r:A===`stepAfter`?h.t:A===`stepBefore`?h.n:h.i,[F,I]=(0,b.useState)(void 0),[L,R]=(0,b.useState)(void 0),[z,B]=(0,b.useState)(void 0),V={top:w,bottom:T,left:g,right:C},H=(0,b.useRef)(null),U=(0,x.default)(t.map(e=>({...e,date:s.t(`${e.date}`,o,new Date)})),[`date`],[`asc`]),W=n-V.left-V.right,G=r-V.top-V.bottom,K=U[0].date,q=U[U.length-1].date,J=Math.min(...U.map(e=>e.y).filter(e=>e!=null))===1/0||Math.min(...U.map(e=>e.y).filter(e=>e!=null))>0?0:Math.min(...U.map(e=>e.y).filter(e=>e!=null)),Y=Math.max(...U.map(e=>e.y).filter(e=>e!=null))===1/0?0:Math.max(...U.map(e=>e.y).filter(e=>e!=null)),X=d.t().domain([K,q]).range([0,W]),Z=u.t().domain([a.t(O)?J:O,a.t(k)?Y>0?Y:0:k]).range([G,0]).nice(),Q=m.t().x(e=>X(e.date)).y1(e=>Z(e.y)).y0(G).curve(P),$=p.t().x(e=>X(e.date)).y(e=>Z(e.y)).curve(P);return(0,b.useEffect)(()=>{_.t(H.current).on(`mousemove`,e=>{let t=U[l.n(U.map(e=>e.date),X.invert(v.t(e)[0]),0)];I(t||U[U.length-1]),D?.(t||U[U.length-1]),B(e.clientY),R(e.clientX)}).on(`mouseout`,()=>{I(void 0),D?.(void 0),R(void 0),B(void 0)}),D?.(void 0)},[X,U,D]),(0,S.jsxs)(S.Fragment,{children:[(0,S.jsxs)(`svg`,{width:`${n}px`,height:`${r}px`,viewBox:`0 0 ${n} ${r}`,direction:`ltr`,children:[c?(0,S.jsxs)(`linearGradient`,{id:c,x1:`0`,x2:`0`,y1:`0`,y2:`1`,children:[(0,S.jsx)(`stop`,{style:{stopColor:i},stopOpacity:`0.1`,offset:`0%`}),(0,S.jsx)(`stop`,{style:{stopColor:i},stopOpacity:`0`,offset:`100%`})]}):null,(0,S.jsxs)(`g`,{transform:`translate(${V.left},${V.top})`,children:[N.filter(e=>e.position===`before`).map(e=>e.layer),(0,S.jsxs)(`g`,{children:[(0,S.jsx)(`text`,{className:(0,y.cn)(`xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs`,M?.xAxis?.labels),y:G,x:X(U[U.length-1].date),style:{textAnchor:`end`,...j?.xAxis?.labels},dy:`1em`,children:s.n(U[U.length-1].date,o)}),(0,S.jsx)(`text`,{y:G,x:X(U[0].date),style:{textAnchor:`start`,...j?.xAxis?.labels},className:(0,y.cn)(`xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs`,M?.xAxis?.labels),dy:`1em`,children:s.n(U[0].date,o)})]}),(0,S.jsxs)(`g`,{children:[(0,S.jsx)(`path`,{d:Q(U)||``,style:{fill:`url(#${c})`,clipPath:`url(#clip)`}}),(0,S.jsx)(`path`,{d:$(U)||``,style:{stroke:i,fill:`none`,strokeWidth:2}}),F?(0,S.jsx)(`circle`,{y1:0,cy:Z(F.y),cx:X(F.date),r:5,style:{fill:i}}):null]}),N.filter(e=>e.position===`after`).map(e=>e.layer),(0,S.jsx)(`rect`,{ref:H,style:{fill:`none`,pointerEvents:`all`},width:W,height:G})]})]}),F&&E&&L&&z?(0,S.jsx)(f.t,{data:F,body:E,xPos:L,yPos:z,backgroundStyle:j?.tooltip,className:M?.tooltip}):null]})}function w(e){let{data:t,graphTitle:a,lineColor:s,sources:c,graphDescription:l,height:u,width:d,footNote:f,dateFormat:p=`yyyy`,area:m=!1,padding:h,backgroundColor:_=!0,leftMargin:v=5,rightMargin:y=5,topMargin:x=10,bottomMargin:w=20,tooltip:T,relativeHeight:E,onSeriesMouseOver:D,graphID:O,minValue:k,maxValue:A,graphDownload:j=!1,dataDownload:M=!1,language:N=`en`,minHeight:P=0,theme:F=`light`,ariaLabel:I,curveType:L=`curve`,styles:R,classNames:z,customLayers:B=[]}=e,[V,H]=(0,b.useState)(0),[U,W]=(0,b.useState)(0),G=(0,b.useRef)(null),K=(0,b.useRef)(null);return(0,b.useEffect)(()=>{let e=new ResizeObserver(e=>{H(e[0].target.clientWidth||620),W(e[0].target.clientHeight||480)});return G.current&&e.observe(G.current),()=>e.disconnect()},[]),(0,S.jsxs)(o.n,{className:z?.graphContainer,style:R?.graphContainer,id:O,ref:K,"aria-label":I,backgroundColor:_,theme:F,language:N,minHeight:P,width:d,height:u,relativeHeight:E,padding:h,children:[a||l||j||M?(0,S.jsx)(i.GraphHeader,{styles:{title:R?.title,description:R?.description},classNames:{title:z?.title,description:z?.description},graphTitle:a,graphDescription:l,width:d,graphDownload:j?K:void 0,dataDownload:M?t.map(e=>e.data).filter(e=>e!==void 0).length>0?t.map(e=>e.data).filter(e=>e!==void 0):t.filter(e=>e!==void 0):null}):null,(0,S.jsx)(o.t,{ref:G,children:V&&U?(0,S.jsx)(C,{data:t,lineColor:s||n.Colors.primaryColors[`blue-600`],width:V,height:U,dateFormat:p,areaId:m?g.t(8):void 0,leftMargin:v,rightMargin:y,topMargin:x,bottomMargin:w,tooltip:T,onSeriesMouseOver:D,minValue:k,maxValue:A,curveType:L,styles:R,classNames:z,customLayers:B}):null}),c||f?(0,S.jsx)(r.GraphFooter,{styles:{footnote:R?.footnote,source:R?.source},classNames:{footnote:z?.footnote,source:z?.source},sources:c,footNote:f,width:d}):null]})}Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return w}});
+//# sourceMappingURL=SparkLine-cHaN4VYd.cjs.map

package/dist/SparkLine-cHaN4VYd.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparkLine-cHaN4VYd.cjs","names":[],"sources":["../src/Components/Graphs/LineCharts/SparkLine/Graph.tsx","../src/Components/Graphs/LineCharts/SparkLine/index.tsx"],"sourcesContent":["import { cn } from '@undp/design-system-react/cn';\nimport { bisectCenter } from 'd3-array';\nimport { scaleLinear, scaleTime } from 'd3-scale';\nimport { pointer, select } from 'd3-selection';\nimport {\n  area,\n  curveLinear,\n  curveMonotoneX,\n  curveStep,\n  curveStepAfter,\n  curveStepBefore,\n  line,\n} from 'd3-shape';\nimport { format } from 'date-fns/format';\nimport { parse } from 'date-fns/parse';\nimport orderBy from 'lodash.orderby';\nimport { useEffect, useRef, useState } from 'react';\nimport { Tooltip } from '@/Components/Elements/Tooltip';\nimport type {\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  LineChartDataType,\n  StyleObject,\n} from '@/Types';\nimport { checkIfNullOrUndefined } from '@/Utils/checkIfNullOrUndefined';\n\ninterface Props {\n  data: LineChartDataType[];\n  lineColor: string;\n  width: number;\n  height: number;\n  dateFormat: string;\n  areaId?: string;\n  leftMargin: number;\n  rightMargin: number;\n  topMargin: number;\n  bottomMargin: number;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n  maxValue?: number;\n  minValue?: number;\n  curveType: CurveTypes;\n  styles?: StyleObject;\n  classNames?: ClassNameObject;\n  customLayers: CustomLayerDataType[];\n}\n\ninterface FormattedDataType {\n  y: number;\n  date: Date;\n}\n\nexport function Graph(props: Props) {\n  const {\n    data,\n    width,\n    height,\n    lineColor,\n    dateFormat,\n    areaId,\n    leftMargin,\n    rightMargin,\n    topMargin,\n    bottomMargin,\n    tooltip,\n    onSeriesMouseOver,\n    minValue,\n    maxValue,\n    curveType,\n    styles,\n    classNames,\n    customLayers,\n  } = props;\n  const curve =\n    curveType === 'linear'\n      ? curveLinear\n      : curveType === 'step'\n        ? curveStep\n        : curveType === 'stepAfter'\n          ? curveStepAfter\n          : curveType === 'stepBefore'\n            ? curveStepBefore\n            : curveMonotoneX;\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  const [mouseOverData, setMouseOverData] = useState<any>(undefined);\n  const [eventX, setEventX] = useState<number | undefined>(undefined);\n  const [eventY, setEventY] = useState<number | undefined>(undefined);\n  const margin = {\n    top: topMargin,\n    bottom: bottomMargin,\n    left: leftMargin,\n    right: rightMargin,\n  };\n  const MouseoverRectRef = useRef(null);\n  const dataFormatted = orderBy(\n    data.map((d) => ({\n      ...d,\n      date: parse(`${d.date}`, dateFormat, new Date()),\n    })),\n    ['date'],\n    ['asc'],\n  );\n  const graphWidth = width - margin.left - margin.right;\n  const graphHeight = height - margin.top - margin.bottom;\n  const minYear = dataFormatted[0].date;\n  const maxYear = dataFormatted[dataFormatted.length - 1].date;\n  const minParam: number =\n    Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) > 0\n        ? 0\n        : Math.min(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n  const maxParam: number =\n    Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null)) !==\n    Infinity\n      ? Math.max(...dataFormatted.map((d) => d.y).filter((d) => d !== undefined && d !== null))\n      : 0;\n\n  const x = scaleTime().domain([minYear, maxYear]).range([0, graphWidth]);\n  const y = scaleLinear()\n    .domain([\n      checkIfNullOrUndefined(minValue) ? minParam : (minValue as number),\n      checkIfNullOrUndefined(maxValue) ? (maxParam > 0 ? maxParam : 0) : (maxValue as number),\n    ])\n    .range([graphHeight, 0])\n    .nice();\n\n  const mainGraphArea = area<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y1((d) => y(d.y))\n    .y0(graphHeight)\n    .curve(curve);\n  const lineShape = line<FormattedDataType>()\n    .x((d) => x(d.date))\n    .y((d) => y(d.y))\n    .curve(curve);\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n    const mousemove = (event: any) => {\n      const selectedData =\n        dataFormatted[\n          bisectCenter(\n            dataFormatted.map((d) => d.date),\n            x.invert(pointer(event)[0]),\n            0,\n          )\n        ];\n      setMouseOverData(selectedData || dataFormatted[dataFormatted.length - 1]);\n      onSeriesMouseOver?.(selectedData || dataFormatted[dataFormatted.length - 1]);\n      setEventY(event.clientY);\n      setEventX(event.clientX);\n    };\n    const mouseout = () => {\n      setMouseOverData(undefined);\n      onSeriesMouseOver?.(undefined);\n      setEventX(undefined);\n      setEventY(undefined);\n    };\n    select(MouseoverRectRef.current).on('mousemove', mousemove).on('mouseout', mouseout);\n    onSeriesMouseOver?.(undefined);\n  }, [x, dataFormatted, onSeriesMouseOver]);\n  return (\n    <>\n      <svg\n        width={`${width}px`}\n        height={`${height}px`}\n        viewBox={`0 0 ${width} ${height}`}\n        direction='ltr'\n      >\n        {areaId ? (\n          <linearGradient id={areaId} x1='0' x2='0' y1='0' y2='1'>\n            <stop style={{ stopColor: lineColor }} stopOpacity='0.1' offset='0%' />\n            <stop style={{ stopColor: lineColor }} stopOpacity='0' offset='100%' />\n          </linearGradient>\n        ) : null}\n        <g transform={`translate(${margin.left},${margin.top})`}>\n          {customLayers.filter((d) => d.position === 'before').map((d) => d.layer)}\n          <g>\n            <text\n              className={cn(\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\n                classNames?.xAxis?.labels,\n              )}\n              y={graphHeight}\n              x={x(dataFormatted[dataFormatted.length - 1].date)}\n              style={{\n                textAnchor: 'end',\n                ...styles?.xAxis?.labels,\n              }}\n              dy='1em'\n            >\n              {format(dataFormatted[dataFormatted.length - 1].date, dateFormat)}\n            </text>\n            <text\n              y={graphHeight}\n              x={x(dataFormatted[0].date)}\n              style={{\n                textAnchor: 'start',\n                ...styles?.xAxis?.labels,\n              }}\n              className={cn(\n                'xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs',\n                classNames?.xAxis?.labels,\n              )}\n              dy='1em'\n            >\n              {format(dataFormatted[0].date, dateFormat)}\n            </text>\n          </g>\n          <g>\n            <path\n              d={mainGraphArea(dataFormatted) || ''}\n              style={{\n                fill: `url(#${areaId})`,\n                clipPath: 'url(#clip)',\n              }}\n            />\n            <path\n              d={lineShape(dataFormatted) || ''}\n              style={{\n                stroke: lineColor,\n                fill: 'none',\n                strokeWidth: 2,\n              }}\n            />\n            {mouseOverData ? (\n              <circle\n                y1={0}\n                cy={y(mouseOverData.y)}\n                cx={x(mouseOverData.date)}\n                r={5}\n                style={{ fill: lineColor }}\n              />\n            ) : null}\n          </g>\n          {customLayers.filter((d) => d.position === 'after').map((d) => d.layer)}\n          <rect\n            ref={MouseoverRectRef}\n            style={{\n              fill: 'none',\n              pointerEvents: 'all',\n            }}\n            width={graphWidth}\n            height={graphHeight}\n          />\n        </g>\n      </svg>\n      {mouseOverData && tooltip && eventX && eventY ? (\n        <Tooltip\n          data={mouseOverData}\n          body={tooltip}\n          xPos={eventX}\n          yPos={eventY}\n          backgroundStyle={styles?.tooltip}\n          className={classNames?.tooltip}\n        />\n      ) : null}\n    </>\n  );\n}\n","import { useEffect, useRef, useState } from 'react';\nimport { Colors } from '@/Components/ColorPalette';\nimport { GraphArea, GraphContainer } from '@/Components/Elements/GraphContainer';\nimport { GraphFooter } from '@/Components/Elements/GraphFooter';\nimport { GraphHeader } from '@/Components/Elements/GraphHeader';\nimport type {\n  ClassNameObject,\n  CurveTypes,\n  CustomLayerDataType,\n  Languages,\n  LineChartDataType,\n  SourcesDataType,\n  StyleObject,\n} from '@/Types';\nimport { generateRandomString } from '@/Utils/generateRandomString';\nimport { Graph } from './Graph';\n\ninterface Props {\n  // Data\n  /** Array of data objects */\n  data: LineChartDataType[];\n\n  // Titles, Labels, and Sources\n  /** Title of the graph */\n  graphTitle?: string | React.ReactNode;\n  /** Description of the graph */\n  graphDescription?: string | React.ReactNode;\n  /** Footnote for the graph */\n  footNote?: string | React.ReactNode;\n  /** Source data for the graph */\n  sources?: SourcesDataType[];\n  /** Accessibility label */\n  ariaLabel?: string;\n\n  // Colors and Styling\n  /** Colors of the lines */\n  lineColor?: string;\n  /** Background color of the graph */\n  backgroundColor?: string | boolean;\n  /** Custom styles for the graph. Each object should be a valid React CSS style object. */\n  styles?: StyleObject;\n  /** Custom class names */\n  classNames?: ClassNameObject;\n\n  // Size and Spacing\n  /** Width of the graph */\n  width?: number;\n  /** Height of the graph */\n  height?: number;\n  /** Minimum height of the graph */\n  minHeight?: number;\n  /** Relative height scaling factor. This overwrites the height props */\n  relativeHeight?: number;\n  /** Padding around the graph. Defaults to 0 if no backgroundColor is mentioned else defaults to 1rem */\n  padding?: string;\n  /** Left margin of the graph */\n  leftMargin?: number;\n  /** Right margin of the graph */\n  rightMargin?: number;\n  /** Top margin of the graph */\n  topMargin?: number;\n  /** Bottom margin of the graph */\n  bottomMargin?: number;\n\n  // Values and Ticks\n  /** Maximum value for the chart */\n  maxValue?: number;\n  /** Minimum value for the chart */\n  minValue?: number;\n\n  // Graph Parameters\n  /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */\n  dateFormat?: string;\n  /** Toggles the visibility of the area below the line */\n  area?: boolean;\n  /** Curve type for the line */\n  curveType?: CurveTypes;\n  /** Optional SVG <g> element or function that renders custom content behind or in front of the graph. */\n  customLayers?: CustomLayerDataType[];\n  /** Enable graph download option as png */\n  graphDownload?: boolean;\n  /** Enable data download option as a csv */\n  dataDownload?: boolean;\n\n  // Interactions and Callbacks\n  /** 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 */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  tooltip?: string | ((_d: any) => React.ReactNode);\n  /** Callback for mouse over event */\n  // biome-ignore lint/suspicious/noExplicitAny: undefined data type\n  onSeriesMouseOver?: (_d: any) => void;\n\n  // Configuration and Options\n  /** Language setting  */\n  language?: Languages;\n  /** Color theme */\n  theme?: 'light' | 'dark';\n  /** Unique ID for the graph */\n  graphID?: string;\n}\n\nexport function SparkLine(props: Props) {\n  const {\n    data,\n    graphTitle,\n    lineColor,\n    sources,\n    graphDescription,\n    height,\n    width,\n    footNote,\n    dateFormat = 'yyyy',\n    area = false,\n    padding,\n    backgroundColor = true,\n    leftMargin = 5,\n    rightMargin = 5,\n    topMargin = 10,\n    bottomMargin = 20,\n    tooltip,\n    relativeHeight,\n    onSeriesMouseOver,\n    graphID,\n    minValue,\n    maxValue,\n    graphDownload = false,\n    dataDownload = false,\n    language = 'en',\n    minHeight = 0,\n    theme = 'light',\n    ariaLabel,\n    curveType = 'curve',\n    styles,\n    classNames,\n    customLayers = [],\n  } = props;\n\n  const [svgWidth, setSvgWidth] = useState(0);\n  const [svgHeight, setSvgHeight] = useState(0);\n\n  const graphDiv = useRef<HTMLDivElement>(null);\n  const graphParentDiv = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      setSvgWidth(entries[0].target.clientWidth || 620);\n      setSvgHeight(entries[0].target.clientHeight || 480);\n    });\n    if (graphDiv.current) {\n      resizeObserver.observe(graphDiv.current);\n    }\n    return () => resizeObserver.disconnect();\n  }, []);\n\n  return (\n    <GraphContainer\n      className={classNames?.graphContainer}\n      style={styles?.graphContainer}\n      id={graphID}\n      ref={graphParentDiv}\n      aria-label={ariaLabel}\n      backgroundColor={backgroundColor}\n      theme={theme}\n      language={language}\n      minHeight={minHeight}\n      width={width}\n      height={height}\n      relativeHeight={relativeHeight}\n      padding={padding}\n    >\n      {graphTitle || graphDescription || graphDownload || dataDownload ? (\n        <GraphHeader\n          styles={{\n            title: styles?.title,\n            description: styles?.description,\n          }}\n          classNames={{\n            title: classNames?.title,\n            description: classNames?.description,\n          }}\n          graphTitle={graphTitle}\n          graphDescription={graphDescription}\n          width={width}\n          graphDownload={graphDownload ? graphParentDiv : undefined}\n          dataDownload={\n            dataDownload\n              ? data.map((d) => d.data).filter((d) => d !== undefined).length > 0\n                ? data.map((d) => d.data).filter((d) => d !== undefined)\n                : data.filter((d) => d !== undefined)\n              : null\n          }\n        />\n      ) : null}\n      <GraphArea ref={graphDiv}>\n        {svgWidth && svgHeight ? (\n          <Graph\n            data={data}\n            lineColor={lineColor || Colors.primaryColors['blue-600']}\n            width={svgWidth}\n            height={svgHeight}\n            dateFormat={dateFormat}\n            areaId={area ? generateRandomString(8) : undefined}\n            leftMargin={leftMargin}\n            rightMargin={rightMargin}\n            topMargin={topMargin}\n            bottomMargin={bottomMargin}\n            tooltip={tooltip}\n            onSeriesMouseOver={onSeriesMouseOver}\n            minValue={minValue}\n            maxValue={maxValue}\n            curveType={curveType}\n            styles={styles}\n            classNames={classNames}\n            customLayers={customLayers}\n          />\n        ) : null}\n      </GraphArea>\n      {sources || footNote ? (\n        <GraphFooter\n          styles={{ footnote: styles?.footnote, source: styles?.source }}\n          classNames={{\n            footnote: classNames?.footnote,\n            source: classNames?.source,\n          }}\n          sources={sources}\n          footNote={footNote}\n          width={width}\n        />\n      ) : null}\n    </GraphContainer>\n  );\n}\n"],"mappings":"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"}

package/dist/SparkLine.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CHPV5EwG-D4pAp7u0.cjs"),M=require("react"),Rt=require("./parse-xYI9yrvL.cjs"),_t=require("./index-Cno4Q0YE.cjs"),Ct=require("./Tooltip-C9F3uYG0.cjs"),bt=require("./checkIfNullOrUndefined-BCW3Y1ML.cjs"),wt=require("./time-CkcKbhwe.cjs"),$t=require("./linear-CgUCbw9F.cjs"),Dt=require("./area-C1gxfNGD.cjs"),Mt=require("./line-DaEMhXmx.cjs"),vt=require("./step-BZ3C8QFW.cjs"),kt=require("./select-Bnfk0lJx.cjs"),Nt=require("./init-DU0ybBc_.cjs"),Ot=require("./pointer-Dkq5NV1q.cjs"),Gt=require("./GraphFooter.cjs"),At=require("./GraphHeader.cjs"),Ht=require("./Colors.cjs"),It=require("./generateRandomString-B5zBiJzS.cjs"),St=require("./GraphContainer-Cul9b74X.cjs");function Pt(e){const t=r.compilerRuntimeExports.c(71),{data:j,width:w,height:V,lineColor:a,dateFormat:l,areaId:S,leftMargin:c,rightMargin:$,topMargin:rt,bottomMargin:nt,tooltip:D,onSeriesMouseOver:W,minValue:Y,maxValue:B,curveType:X,styles:k,classNames:q,customLayers:R}=e,it=X==="linear"?Mt.curveLinear:X==="step"?vt.curveStep:X==="stepAfter"?vt.stepAfter:X==="stepBefore"?vt.stepBefore:vt.monotoneX,[f,st]=M.useState(void 0),[N,at]=M.useState(void 0),[U,ct]=M.useState(void 0);let z;t[0]!==nt||t[1]!==c||t[2]!==$||t[3]!==rt?(z={top:rt,bottom:nt,left:c,right:$},t[0]=nt,t[1]=c,t[2]=$,t[3]=rt,t[4]=z):z=t[4];const _=z,O=M.useRef(null);let J;t[5]!==l?(J=d=>({...d,date:Rt.parse(`${d.date}`,l,new Date)}),t[5]=l,t[6]=J):J=t[6];const o=_t.orderBy(j.map(J),["date"],["asc"]),n=w-_.left-_.right,i=V-_.top-_.bottom,ut=o[0].date,pt=o[o.length-1].date,K=Math.min(...o.map(te).filter(Zt))!==1/0?Math.min(...o.map(Qt).filter(Kt))>0?0:Math.min(...o.map(Jt).filter(zt)):0,G=Math.max(...o.map(Ut).filter(Xt))!==1/0?Math.max(...o.map(Bt).filter(Yt)):0,s=wt.time().domain([ut,pt]).range([0,n]);let A;t[7]!==K||t[8]!==Y?(A=bt.checkIfNullOrUndefined(Y)?K:Y,t[7]=K,t[8]=Y,t[9]=A):A=t[9];let H;t[10]!==G||t[11]!==B?(H=bt.checkIfNullOrUndefined(B)?G>0?G:0:B,t[10]=G,t[11]=B,t[12]=H):H=t[12];const I=$t.linear().domain([A,H]).range([i,0]).nice(),lt=Dt.area().x(d=>s(d.date)).y1(d=>I(d.y)).y0(i).curve(it),mt=Mt.line().x(d=>s(d.date)).y(d=>I(d.y)).curve(it);M.useEffect(()=>{const d=jt=>{const Et=o[Nt.bisectCenter(o.map(Wt),s.invert(Ot.pointer(jt)[0]),0)];st(Et||o[o.length-1]),W?.(Et||o[o.length-1]),ct(jt.clientY),at(jt.clientX)},qt=()=>{st(void 0),W?.(void 0),at(void 0),ct(void 0)};kt.select(O.current).on("mousemove",d).on("mouseout",qt),W?.(void 0)},[s,o,W]);let P;t[13]!==S||t[14]!==a?(P=S?r.jsxRuntimeExports.jsxs("linearGradient",{id:S,x1:"0",x2:"0",y1:"0",y2:"1",children:[r.jsxRuntimeExports.jsx("stop",{style:{stopColor:a},stopOpacity:"0.1",offset:"0%"}),r.jsxRuntimeExports.jsx("stop",{style:{stopColor:a},stopOpacity:"0",offset:"100%"})]}):null,t[13]=S,t[14]=a,t[15]=P):P=t[15];let F;t[16]!==R?(F=R.filter(Vt).map(Tt),t[16]=R,t[17]=F):F=t[17];const Q=q?.xAxis?.labels;let x;t[18]!==Q?(x=r.mo("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",Q),t[18]=Q,t[19]=x):x=t[19];const Z=o[o.length-1];let h;t[20]!==Z.date||t[21]!==s?(h=s(Z.date),t[20]=Z.date,t[21]=s,t[22]=h):h=t[22];const dt=k?.xAxis?.labels;let g;t[23]!==dt?(g={textAnchor:"end",...dt},t[23]=dt,t[24]=g):g=t[24];const ft=o[o.length-1];let E;t[25]!==l||t[26]!==ft.date?(E=Rt.format(ft.date,l),t[25]=l,t[26]=ft.date,t[27]=E):E=t[27];let C;t[28]!==i||t[29]!==g||t[30]!==E||t[31]!==x||t[32]!==h?(C=r.jsxRuntimeExports.jsx("text",{className:x,y:i,x:h,style:g,dy:"1em",children:E}),t[28]=i,t[29]=g,t[30]=E,t[31]=x,t[32]=h,t[33]=C):C=t[33];let y;t[34]!==o||t[35]!==s?(y=s(o[0].date),t[34]=o,t[35]=s,t[36]=y):y=t[36];const L=k?.xAxis?.labels;let b;t[37]!==L?(b={textAnchor:"start",...L},t[37]=L,t[38]=b):b=t[38];const tt=q?.xAxis?.labels;let u;t[39]!==tt?(u=r.mo("xs:max-[360px]:hidden fill-primary-gray-700 dark:fill-primary-gray-300 text-[9px] md:text-[10px] lg:text-xs",tt),t[39]=tt,t[40]=u):u=t[40];let p;t[41]!==o||t[42]!==l?(p=Rt.format(o[0].date,l),t[41]=o,t[42]=l,t[43]=p):p=t[43];let m;t[44]!==i||t[45]!==y||t[46]!==b||t[47]!==u||t[48]!==p?(m=r.jsxRuntimeExports.jsx("text",{y:i,x:y,style:b,className:u,dy:"1em",children:p}),t[44]=i,t[45]=y,t[46]=b,t[47]=u,t[48]=p,t[49]=m):m=t[49];let v;t[50]!==C||t[51]!==m?(v=r.jsxRuntimeExports.jsxs("g",{children:[C,m]}),t[50]=C,t[51]=m,t[52]=v):v=t[52];const T=`url(#${S})`;let et;t[53]!==T?(et={fill:T,clipPath:"url(#clip)"},t[53]=T,t[54]=et):et=t[54];let ot;t[55]!==a?(ot={stroke:a,fill:"none",strokeWidth:2},t[55]=a,t[56]=ot):ot=t[56];let xt;t[57]!==R?(xt=R.filter(Lt).map(Ft),t[57]=R,t[58]=xt):xt=t[58];let ht;t[59]===Symbol.for("react.memo_cache_sentinel")?(ht={fill:"none",pointerEvents:"all"},t[59]=ht):ht=t[59];let gt;t[60]!==O||t[61]!==i||t[62]!==n?(gt=r.jsxRuntimeExports.jsx("rect",{ref:O,style:ht,width:n,height:i}),t[60]=O,t[61]=i,t[62]=n,t[63]=gt):gt=t[63];let yt;return t[64]!==q?.tooltip||t[65]!==N||t[66]!==U||t[67]!==f||t[68]!==k?.tooltip||t[69]!==D?(yt=f&&D&&N&&U?r.jsxRuntimeExports.jsx(Ct.Tooltip,{data:f,body:D,xPos:N,yPos:U,backgroundStyle:k?.tooltip,className:q?.tooltip}):null,t[64]=q?.tooltip,t[65]=N,t[66]=U,t[67]=f,t[68]=k?.tooltip,t[69]=D,t[70]=yt):yt=t[70],r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[r.jsxRuntimeExports.jsxs("svg",{width:`${w}px`,height:`${V}px`,viewBox:`0 0 ${w} ${V}`,direction:"ltr",children:[P,r.jsxRuntimeExports.jsxs("g",{transform:`translate(${_.left},${_.top})`,children:[F,v,r.jsxRuntimeExports.jsxs("g",{children:[r.jsxRuntimeExports.jsx("path",{d:lt(o)||"",style:et}),r.jsxRuntimeExports.jsx("path",{d:mt(o)||"",style:ot}),f?r.jsxRuntimeExports.jsx("circle",{y1:0,cy:I(f.y),cx:s(f.date),r:5,style:{fill:a}}):null]}),xt,gt]})]}),yt]})}function Ft(e){return e.layer}function Lt(e){return e.position==="after"}function Tt(e){return e.layer}function Vt(e){return e.position==="before"}function Wt(e){return e.date}function Yt(e){return e!=null}function Bt(e){return e.y}function Xt(e){return e!=null}function Ut(e){return e.y}function zt(e){return e!=null}function Jt(e){return e.y}function Kt(e){return e!=null}function Qt(e){return e.y}function Zt(e){return e!=null}function te(e){return e.y}function ee(e){const t=r.compilerRuntimeExports.c(60),{data:j,graphTitle:w,lineColor:V,sources:a,graphDescription:l,height:S,width:c,footNote:$,dateFormat:rt,area:nt,padding:D,backgroundColor:W,leftMargin:Y,rightMargin:B,topMargin:X,bottomMargin:k,tooltip:q,relativeHeight:R,onSeriesMouseOver:it,graphID:f,minValue:st,maxValue:N,graphDownload:at,dataDownload:U,language:ct,minHeight:z,theme:_,ariaLabel:O,curveType:J,styles:o,classNames:n,customLayers:i}=e,ut=rt===void 0?"yyyy":rt,pt=nt===void 0?!1:nt,K=W===void 0?!0:W,G=Y===void 0?5:Y,s=B===void 0?5:B,A=X===void 0?10:X,H=k===void 0?20:k,I=at===void 0?!1:at,lt=U===void 0?!1:U,mt=ct===void 0?"en":ct,P=z===void 0?0:z,F=_===void 0?"light":_,Q=J===void 0?"curve":J;let x;t[0]!==i?(x=i===void 0?[]:i,t[0]=i,t[1]=x):x=t[1];const Z=x,[h,dt]=M.useState(0),[g,ft]=M.useState(0),E=M.useRef(null),C=M.useRef(null);let y,L;t[2]===Symbol.for("react.memo_cache_sentinel")?(y=()=>{const et=new ResizeObserver(ot=>{dt(ot[0].target.clientWidth||620),ft(ot[0].target.clientHeight||480)});return E.current&&et.observe(E.current),()=>et.disconnect()},L=[],t[2]=y,t[3]=L):(y=t[2],L=t[3]),M.useEffect(y,L);const b=n?.graphContainer,tt=o?.graphContainer;let u;t[4]!==n?.description||t[5]!==n?.title||t[6]!==j||t[7]!==lt||t[8]!==l||t[9]!==I||t[10]!==w||t[11]!==o?.description||t[12]!==o?.title||t[13]!==c?(u=w||l||I||lt?r.jsxRuntimeExports.jsx(At.GraphHeader,{styles:{title:o?.title,description:o?.description},classNames:{title:n?.title,description:n?.description},graphTitle:w,graphDescription:l,width:c,graphDownload:I?C:void 0,dataDownload:lt?j.map(se).filter(ie).length>0?j.map(ne).filter(re):j.filter(oe):null}):null,t[4]=n?.description,t[5]=n?.title,t[6]=j,t[7]=lt,t[8]=l,t[9]=I,t[10]=w,t[11]=o?.description,t[12]=o?.title,t[13]=c,t[14]=u):u=t[14];let p;t[15]!==pt||t[16]!==H||t[17]!==n||t[18]!==Q||t[19]!==Z||t[20]!==j||t[21]!==ut||t[22]!==G||t[23]!==V||t[24]!==N||t[25]!==st||t[26]!==it||t[27]!==s||t[28]!==o||t[29]!==g||t[30]!==h||t[31]!==q||t[32]!==A?(p=h&&g?r.jsxRuntimeExports.jsx(Pt,{data:j,lineColor:V||Ht.Colors.primaryColors["blue-600"],width:h,height:g,dateFormat:ut,areaId:pt?It.generateRandomString(8):void 0,leftMargin:G,rightMargin:s,topMargin:A,bottomMargin:H,tooltip:q,onSeriesMouseOver:it,minValue:st,maxValue:N,curveType:Q,styles:o,classNames:n,customLayers:Z}):null,t[15]=pt,t[16]=H,t[17]=n,t[18]=Q,t[19]=Z,t[20]=j,t[21]=ut,t[22]=G,t[23]=V,t[24]=N,t[25]=st,t[26]=it,t[27]=s,t[28]=o,t[29]=g,t[30]=h,t[31]=q,t[32]=A,t[33]=p):p=t[33];let m;t[34]!==p?(m=r.jsxRuntimeExports.jsx(St.GraphArea,{ref:E,children:p}),t[34]=p,t[35]=m):m=t[35];let v;t[36]!==n?.footnote||t[37]!==n?.source||t[38]!==$||t[39]!==a||t[40]!==o?.footnote||t[41]!==o?.source||t[42]!==c?(v=a||$?r.jsxRuntimeExports.jsx(Gt.GraphFooter,{styles:{footnote:o?.footnote,source:o?.source},classNames:{footnote:n?.footnote,source:n?.source},sources:a,footNote:$,width:c}):null,t[36]=n?.footnote,t[37]=n?.source,t[38]=$,t[39]=a,t[40]=o?.footnote,t[41]=o?.source,t[42]=c,t[43]=v):v=t[43];let T;return t[44]!==O||t[45]!==K||t[46]!==f||t[47]!==S||t[48]!==mt||t[49]!==P||t[50]!==D||t[51]!==R||t[52]!==b||t[53]!==tt||t[54]!==u||t[55]!==m||t[56]!==v||t[57]!==F||t[58]!==c?(T=r.jsxRuntimeExports.jsxs(St.GraphContainer,{className:b,style:tt,id:f,ref:C,"aria-label":O,backgroundColor:K,theme:F,language:mt,minHeight:P,width:c,height:S,relativeHeight:R,padding:D,children:[u,m,v]}),t[44]=O,t[45]=K,t[46]=f,t[47]=S,t[48]=mt,t[49]=P,t[50]=D,t[51]=R,t[52]=b,t[53]=tt,t[54]=u,t[55]=m,t[56]=v,t[57]=F,t[58]=c,t[59]=T):T=t[59],T}function oe(e){return e!==void 0}function re(e){return e!==void 0}function ne(e){return e.data}function ie(e){return e!==void 0}function se(e){return e.data}exports.SparkLine=ee;
-//# sourceMappingURL=SparkLine.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-gGpyby2o.cjs`);const e=require(`./SparkLine-cHaN4VYd.cjs`);exports.SparkLine=e.t;

package/dist/SparkLine.d.ts

@@ -1,142 +1,2 @@
-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;
-}
-
-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;
-    colorLegend?: string;
-    modal?: string;
-}
-
-declare type CurveTypes = 'linear' | 'curve' | 'step' | 'stepAfter' | 'stepBefore';
-
-declare interface CustomLayerDataType {
-    position: 'before' | 'after';
-    layer: React.ReactNode;
-}
-
-declare type Languages = 'en' | 'ar' | 'az' | 'bn' | 'cy' | 'he' | 'hi' | 'ja' | 'ka' | 'km' | 'ko' | 'my' | 'ne' | 'zh' | 'custom';
-
-declare interface LineChartDataType {
-    date: number | string;
-    y: number;
-    data?: object;
-}
-
-declare interface Props {
-    /** Array of data objects */
-    data: LineChartDataType[];
-    /** 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;
-    /** Colors of the lines */
-    lineColor?: 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 chart */
-    maxValue?: number;
-    /** Minimum value for the chart */
-    minValue?: number;
-    /** Format of the date in the data object. Available formats can be found [here](https://date-fns.org/docs/format)  */
-    dateFormat?: string;
-    /** Toggles the visibility of the area below the line */
-    area?: boolean;
-    /** Curve type for the line */
-    curveType?: CurveTypes;
-    /** 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;
-    /** 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);
-    /** Callback for mouse over event */
-    onSeriesMouseOver?: (_d: any) => void;
-    /** Language setting  */
-    language?: Languages;
-    /** Color theme */
-    theme?: 'light' | 'dark';
-    /** Unique ID for the graph */
-    graphID?: string;
-}
-
-declare interface SourcesDataType {
-    source: string;
-    link?: string;
-}
-
-export declare function SparkLine(props: Props): JSX.Element;
-
-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;
-    modal?: React.CSSProperties;
-}
-
-export { }
+export * from './Components/Graphs/LineCharts/SparkLine/index'
+export {}