@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-2VHARFMD.js

@@ -0,0 +1,670 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
+];
+var SIZE_DIMENSIONS = {
+  lg: { height: 32, width: 120 },
+  md: { height: 24, width: 80 },
+  sm: { height: 20, width: 60 },
+  xs: { height: 16, width: 40 }
+};
+function isMultiSeriesData(data) {
+  return data.length > 0 && typeof data[0] === "object" && data[0] !== null;
+}
+function extractCategoryValues(data, category, connectNulls) {
+  return data.map((point) => {
+    const value = point[category];
+    if (value === null || value === void 0) {
+      return connectNulls ? null : null;
+    }
+    return value;
+  });
+}
+function calculateStackedValues(data, categories) {
+  const stackedMap = /* @__PURE__ */ new Map();
+  categories.forEach((category, categoryIndex) => {
+    const values = data.map((point, _pointIndex) => {
+      let stackedValue = 0;
+      for (let i = 0; i <= categoryIndex; i++) {
+        const cat = categories[i];
+        if (cat) {
+          const val = point[cat];
+          if (typeof val === "number") {
+            stackedValue += val;
+          }
+        }
+      }
+      return stackedValue;
+    });
+    stackedMap.set(category, values);
+  });
+  return stackedMap;
+}
+function getTrend(data) {
+  if (data.length < 2) return "neutral";
+  const first = data[0] ?? 0;
+  const last = data[data.length - 1] ?? 0;
+  if (last > first) return "positive";
+  if (last < first) return "negative";
+  return "neutral";
+}
+function getTrendColor(trend, showTrend, explicitColor) {
+  if (explicitColor) return explicitColor;
+  if (!showTrend) return "currentColor";
+  switch (trend) {
+    case "positive":
+      return "var(--color-success)";
+    case "negative":
+      return "var(--color-destructive)";
+    default:
+      return "var(--color-muted-foreground)";
+  }
+}
+function getDomainBounds(values, autoMinValue, minValue, maxValue) {
+  const dataMin = Math.min(...values);
+  const dataMax = Math.max(...values);
+  const min = minValue ?? (autoMinValue ? dataMin : 0);
+  const max = maxValue ?? dataMax;
+  return { min, max };
+}
+function getAllValues(data, categories, stack) {
+  if (stack) {
+    const stackedMap = calculateStackedValues(data, categories);
+    const allStackedValues = [];
+    stackedMap.forEach((values2) => {
+      allStackedValues.push(...values2);
+    });
+    return allStackedValues.filter((v) => !Number.isNaN(v));
+  }
+  const values = [];
+  data.forEach((point) => {
+    categories.forEach((category) => {
+      const value = point[category];
+      if (typeof value === "number" && !Number.isNaN(value)) {
+        values.push(value);
+      }
+    });
+  });
+  return values;
+}
+function dataToPoints(data, width, height, padding, domainMin, domainMax, connectNulls) {
+  if (data.length === 0) return "";
+  const range = domainMax - domainMin || 1;
+  const effectiveHeight = height - padding * 2;
+  const effectiveWidth = width - padding * 2;
+  const validPoints = [];
+  data.forEach((value, index) => {
+    if (value === null) {
+      if (!connectNulls) return;
+      return;
+    }
+    const x = padding + index / Math.max(data.length - 1, 1) * effectiveWidth;
+    const y = padding + effectiveHeight - (value - domainMin) / range * effectiveHeight;
+    validPoints.push({ x, y });
+  });
+  return validPoints.map((p) => `${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");
+}
+function dataToSegments(data, width, height, padding, domainMin, domainMax) {
+  if (data.length === 0) return [];
+  const range = domainMax - domainMin || 1;
+  const effectiveHeight = height - padding * 2;
+  const effectiveWidth = width - padding * 2;
+  const segments = [];
+  let currentSegment = [];
+  data.forEach((value, index) => {
+    if (value === null) {
+      if (currentSegment.length > 0) {
+        segments.push(currentSegment);
+        currentSegment = [];
+      }
+      return;
+    }
+    const x = padding + index / Math.max(data.length - 1, 1) * effectiveWidth;
+    const y = padding + effectiveHeight - (value - domainMin) / range * effectiveHeight;
+    currentSegment.push(`${x.toFixed(2)},${y.toFixed(2)}`);
+  });
+  if (currentSegment.length > 0) {
+    segments.push(currentSegment);
+  }
+  return segments;
+}
+function dataToAreaPath(data, width, height, padding, domainMin, domainMax, bottomY) {
+  if (data.length === 0) return "";
+  const range = domainMax - domainMin || 1;
+  const effectiveHeight = height - padding * 2;
+  const effectiveWidth = width - padding * 2;
+  const baseY = height - padding;
+  const points = [];
+  data.forEach((value, index) => {
+    const x = padding + index / Math.max(data.length - 1, 1) * effectiveWidth;
+    const y = value !== null ? padding + effectiveHeight - (value - domainMin) / range * effectiveHeight : baseY;
+    points.push({ x, y });
+  });
+  if (points.length === 0) return "";
+  const firstPoint = points[0];
+  const lastPoint = points[points.length - 1];
+  if (!firstPoint || !lastPoint) return "";
+  let path = `M ${firstPoint.x.toFixed(2)},${firstPoint.y.toFixed(2)}`;
+  for (let i = 1; i < points.length; i++) {
+    const point = points[i];
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`;
+    }
+  }
+  path += ` L ${lastPoint.x.toFixed(2)},${baseY.toFixed(2)}`;
+  path += ` L ${firstPoint.x.toFixed(2)},${baseY.toFixed(2)}`;
+  path += " Z";
+  return path;
+}
+function getDataPoints(data, width, height, padding, domainMin, domainMax) {
+  if (data.length === 0) return [];
+  const range = domainMax - domainMin || 1;
+  const effectiveHeight = height - padding * 2;
+  const effectiveWidth = width - padding * 2;
+  return data.map((value, index) => {
+    if (value === null) return null;
+    return {
+      x: padding + index / Math.max(data.length - 1, 1) * effectiveWidth,
+      y: padding + effectiveHeight - (value - domainMin) / range * effectiveHeight
+    };
+  }).filter((p) => p !== null);
+}
+function Sparkline({
+  autoMinValue = true,
+  categories,
+  className,
+  color,
+  colors = DEFAULT_COLORS,
+  connectNulls = false,
+  data,
+  fill = "solid",
+  height: heightProp,
+  maxValue,
+  minValue,
+  showDots = false,
+  showEndDot = false,
+  showTrend = false,
+  size = "sm",
+  stack = false,
+  strokeWidth = 1.5,
+  variant = "line",
+  width: widthProp,
+  ...props
+}) {
+  const gradientId = React.useId();
+  if (data.length === 0) {
+    return null;
+  }
+  const dimensions = SIZE_DIMENSIONS[size];
+  const width = widthProp ?? dimensions.width;
+  const height = heightProp ?? dimensions.height;
+  const padding = showDots || showEndDot ? 3 : 2;
+  const isMultiSeries = categories && categories.length > 0 && isMultiSeriesData(data);
+  const viewBox = `0 0 ${String(width)} ${String(height)}`;
+  if (isMultiSeries) {
+    const multiData = data;
+    const effectiveCategories = categories;
+    const allValues = getAllValues(multiData, effectiveCategories, stack);
+    const { max: domainMax2, min: domainMin2 } = getDomainBounds(
+      allValues,
+      autoMinValue,
+      minValue,
+      maxValue
+    );
+    const stackedValues = stack ? calculateStackedValues(multiData, effectiveCategories) : null;
+    const ariaLabel2 = `Multi-series chart with ${String(effectiveCategories.length)} series: ${effectiveCategories.join(", ")}`;
+    if (variant === "bar") {
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-label": ariaLabel2,
+          className: cn("overflow-visible", className),
+          "data-slot": "sparkline",
+          height,
+          role: "img",
+          viewBox,
+          width,
+          ...props,
+          children: /* @__PURE__ */ jsx(
+            MultiSeriesBarSparkline,
+            {
+              categories: effectiveCategories,
+              colors,
+              data: multiData,
+              domainMax: domainMax2,
+              domainMin: domainMin2,
+              height,
+              stack,
+              width
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": ariaLabel2,
+        className: cn("overflow-visible", className),
+        "data-slot": "sparkline",
+        height,
+        role: "img",
+        viewBox,
+        width,
+        ...props,
+        children: [
+          variant === "area" && fill === "gradient" && /* @__PURE__ */ jsx("defs", { children: effectiveCategories.map((category, idx) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientId}-${category}`,
+              x1: "0",
+              x2: "0",
+              y1: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "0%",
+                    stopColor: colors[idx % colors.length],
+                    stopOpacity: 0.4
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: colors[idx % colors.length],
+                    stopOpacity: 0.05
+                  }
+                )
+              ]
+            },
+            `gradient-${category}`
+          )) }),
+          (stack ? [...effectiveCategories].reverse() : effectiveCategories).map(
+            (category, reversedIdx) => {
+              const idx = stack ? effectiveCategories.length - 1 - reversedIdx : reversedIdx;
+              const categoryColor = colors[idx % colors.length] ?? "currentColor";
+              const categoryValues = stack ? stackedValues?.get(category) ?? [] : extractCategoryValues(multiData, category, connectNulls);
+              let bottomValues;
+              if (stack && variant === "area" && idx > 0) {
+                const prevCategory = effectiveCategories[idx - 1];
+                if (prevCategory) {
+                  bottomValues = stackedValues?.get(prevCategory);
+                }
+              }
+              if (variant === "area" && fill !== "none" && stack) {
+                const areaPath = generateStackedAreaPath(
+                  categoryValues,
+                  bottomValues,
+                  width,
+                  height,
+                  padding,
+                  domainMin2,
+                  domainMax2
+                );
+                const areaFill = fill === "gradient" ? `url(#${gradientId}-${category})` : categoryColor;
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: areaPath,
+                      fill: areaFill,
+                      fillOpacity: fill === "solid" ? 0.3 : 1
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "polyline",
+                    {
+                      points: dataToPoints(
+                        categoryValues,
+                        width,
+                        height,
+                        padding,
+                        domainMin2,
+                        domainMax2,
+                        connectNulls
+                      ),
+                      fill: "none",
+                      stroke: categoryColor,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth
+                    }
+                  )
+                ] }, category);
+              }
+              const segments = connectNulls ? [
+                dataToPoints(
+                  categoryValues,
+                  width,
+                  height,
+                  padding,
+                  domainMin2,
+                  domainMax2,
+                  true
+                )
+              ] : dataToSegments(
+                categoryValues,
+                width,
+                height,
+                padding,
+                domainMin2,
+                domainMax2
+              ).map((seg) => seg.join(" "));
+              return /* @__PURE__ */ jsxs("g", { children: [
+                variant === "area" && fill !== "none" && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: dataToAreaPath(
+                      categoryValues,
+                      width,
+                      height,
+                      padding,
+                      domainMin2,
+                      domainMax2
+                    ),
+                    fill: fill === "gradient" ? `url(#${gradientId}-${category})` : categoryColor,
+                    fillOpacity: fill === "solid" ? 0.2 : 1
+                  }
+                ),
+                segments.map((points2, segIdx) => /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    fill: "none",
+                    points: points2,
+                    stroke: categoryColor,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth
+                  },
+                  `${category}-${String(segIdx)}`
+                )),
+                showDots && getDataPoints(
+                  categoryValues,
+                  width,
+                  height,
+                  padding,
+                  domainMin2,
+                  domainMax2
+                ).map((point, dotIdx) => /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: point.x,
+                    cy: point.y,
+                    fill: categoryColor,
+                    r: strokeWidth + 0.5
+                  },
+                  `dot-${category}-${String(dotIdx)}`
+                ))
+              ] }, category);
+            }
+          )
+        ]
+      }
+    );
+  }
+  const singleData = data;
+  const { max: domainMax, min: domainMin } = getDomainBounds(
+    singleData,
+    autoMinValue,
+    minValue,
+    maxValue
+  );
+  const trend = getTrend(singleData);
+  const fillColor = getTrendColor(trend, showTrend, color);
+  const trendText = trend === "positive" ? "upward" : trend === "negative" ? "downward" : "stable";
+  const firstValue = String(singleData[0]);
+  const lastValue = String(singleData[singleData.length - 1]);
+  const ariaLabel = `Trend chart showing ${trendText} movement from ${firstValue} to ${lastValue}`;
+  if (variant === "bar") {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-label": ariaLabel,
+        className: cn("overflow-visible", className),
+        "data-slot": "sparkline",
+        height,
+        role: "img",
+        viewBox,
+        width,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          BarSparkline,
+          {
+            color: fillColor,
+            data: singleData,
+            domainMax,
+            domainMin,
+            height,
+            width
+          }
+        )
+      }
+    );
+  }
+  const points = dataToPoints(
+    singleData,
+    width,
+    height,
+    padding,
+    domainMin,
+    domainMax,
+    false
+  );
+  const dataPoints = getDataPoints(
+    singleData,
+    width,
+    height,
+    padding,
+    domainMin,
+    domainMax
+  );
+  const getAreaFill = () => {
+    if (fill === "none") return "none";
+    if (fill === "gradient") return `url(#${gradientId})`;
+    return fillColor;
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": ariaLabel,
+      className: cn("overflow-visible", className),
+      "data-slot": "sparkline",
+      height,
+      role: "img",
+      viewBox,
+      width,
+      ...props,
+      children: [
+        variant === "area" && fill === "gradient" && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: fillColor, stopOpacity: 0.4 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: fillColor, stopOpacity: 0.05 })
+        ] }) }),
+        variant === "area" && fill !== "none" && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dataToAreaPath(
+              singleData,
+              width,
+              height,
+              padding,
+              domainMin,
+              domainMax
+            ),
+            fill: getAreaFill(),
+            fillOpacity: fill === "solid" ? 0.2 : 1
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            fill: "none",
+            points,
+            stroke: fillColor,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth
+          }
+        ),
+        showDots && dataPoints.map((point) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: point.x,
+            cy: point.y,
+            fill: fillColor,
+            r: strokeWidth + 0.5
+          },
+          `dot-${String(point.x)}-${String(point.y)}`
+        )),
+        showEndDot && !showDots && dataPoints.length > 0 && (() => {
+          const lastPoint = dataPoints[dataPoints.length - 1];
+          return lastPoint ? /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: lastPoint.x,
+              cy: lastPoint.y,
+              fill: fillColor,
+              r: strokeWidth + 1
+            }
+          ) : null;
+        })()
+      ]
+    }
+  );
+}
+function generateStackedAreaPath(topValues, bottomValues, width, height, padding, domainMin, domainMax) {
+  if (topValues.length === 0) return "";
+  const range = domainMax - domainMin || 1;
+  const effectiveHeight = height - padding * 2;
+  const effectiveWidth = width - padding * 2;
+  const topPoints = topValues.map((value, index) => ({
+    x: padding + index / Math.max(topValues.length - 1, 1) * effectiveWidth,
+    y: padding + effectiveHeight - (value - domainMin) / range * effectiveHeight
+  }));
+  const bottomPoints = bottomValues ? bottomValues.map((value, index) => ({
+    x: padding + index / Math.max(bottomValues.length - 1, 1) * effectiveWidth,
+    y: padding + effectiveHeight - (value - domainMin) / range * effectiveHeight
+  })) : topPoints.map((p) => ({ x: p.x, y: height - padding }));
+  if (topPoints.length === 0) return "";
+  const firstTopPoint = topPoints[0];
+  let path = `M ${firstTopPoint?.x.toFixed(2) ?? "0"},${firstTopPoint?.y.toFixed(2) ?? "0"}`;
+  for (let i = 1; i < topPoints.length; i++) {
+    const point = topPoints[i];
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`;
+    }
+  }
+  for (let i = bottomPoints.length - 1; i >= 0; i--) {
+    const point = bottomPoints[i];
+    if (point) {
+      path += ` L ${point.x.toFixed(2)},${point.y.toFixed(2)}`;
+    }
+  }
+  path += " Z";
+  return path;
+}
+function BarSparkline({
+  color,
+  data,
+  domainMax,
+  domainMin,
+  height,
+  width
+}) {
+  const range = domainMax - domainMin || 1;
+  const barWidth = (width - (data.length - 1) * 1) / data.length;
+  const padding = 1;
+  return /* @__PURE__ */ jsx(Fragment, { children: data.map((value, index) => {
+    const barHeight = (value - domainMin) / range * (height - padding * 2);
+    const x = index * (barWidth + 1);
+    const y = height - padding - barHeight;
+    return /* @__PURE__ */ jsx(
+      "rect",
+      {
+        fill: color,
+        height: Math.max(barHeight, 1),
+        rx: 1,
+        width: Math.max(barWidth - 1, 1),
+        x,
+        y
+      },
+      `bar-${String(index)}-${String(value)}`
+    );
+  }) });
+}
+function MultiSeriesBarSparkline({
+  categories,
+  colors,
+  data,
+  domainMax,
+  domainMin,
+  height,
+  stack,
+  width
+}) {
+  const range = domainMax - domainMin || 1;
+  const padding = 1;
+  const groupWidth = (width - (data.length - 1) * 2) / data.length;
+  if (stack) {
+    return /* @__PURE__ */ jsx(Fragment, { children: data.map((point, pointIndex) => {
+      const x = pointIndex * (groupWidth + 2);
+      let currentY = height - padding;
+      return /* @__PURE__ */ jsx("g", { children: categories.map((category, catIndex) => {
+        const value = point[category];
+        if (typeof value !== "number") return null;
+        const barHeight = value / range * (height - padding * 2);
+        const y = currentY - barHeight;
+        currentY = y;
+        return /* @__PURE__ */ jsx(
+          "rect",
+          {
+            fill: colors[catIndex % colors.length],
+            height: Math.max(barHeight, 1),
+            rx: 1,
+            width: Math.max(groupWidth - 1, 1),
+            x,
+            y
+          },
+          `bar-${String(pointIndex)}-${category}`
+        );
+      }) }, `group-${String(pointIndex)}`);
+    }) });
+  }
+  const barWidth = (groupWidth - (categories.length - 1) * 1) / categories.length;
+  return /* @__PURE__ */ jsx(Fragment, { children: data.map((point, pointIndex) => {
+    const groupX = pointIndex * (groupWidth + 2);
+    return /* @__PURE__ */ jsx("g", { children: categories.map((category, catIndex) => {
+      const value = point[category];
+      if (typeof value !== "number") return null;
+      const barHeight = (value - domainMin) / range * (height - padding * 2);
+      const x = groupX + catIndex * (barWidth + 1);
+      const y = height - padding - barHeight;
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: colors[catIndex % colors.length],
+          height: Math.max(barHeight, 1),
+          rx: 1,
+          width: Math.max(barWidth - 1, 1),
+          x,
+          y
+        },
+        `bar-${String(pointIndex)}-${category}`
+      );
+    }) }, `group-${String(pointIndex)}`);
+  }) });
+}
+Sparkline.displayName = "Sparkline";
+
+export { Sparkline };
+//# sourceMappingURL=chunk-2VHARFMD.js.map
+//# sourceMappingURL=chunk-2VHARFMD.js.map