impact-ui 4.0.14 → 4.0.15-alpha.2

package/dist/components/Chart/ChartSkeleton.js

@@ -1,18 +1,133 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Skeleton } from "../Skeleton/index.js";
 const COLUMN_BAR_HEIGHTS = [45, 70, 55, 85, 40, 65, 75, 50, 60, 90];
+const LOLLIPOP_HEIGHTS = [18, 40, 58, 72, 88];
+const CANDLESTICK_DATA = [
+  { wickTop: 5, bodyTop: 12, bodyBottom: 32, wickBottom: 38 },
+  { wickTop: 20, bodyTop: 28, bodyBottom: 45, wickBottom: 52 },
+  { wickTop: 25, bodyTop: 30, bodyBottom: 40, wickBottom: 45 },
+  { wickTop: 12, bodyTop: 18, bodyBottom: 48, wickBottom: 58 },
+  { wickTop: 42, bodyTop: 50, bodyBottom: 65, wickBottom: 72 },
+  { wickTop: 38, bodyTop: 45, bodyBottom: 58, wickBottom: 65 },
+  { wickTop: 22, bodyTop: 28, bodyBottom: 50, wickBottom: 55 },
+  { wickTop: 3, bodyTop: 8, bodyBottom: 28, wickBottom: 35 },
+  { wickTop: 50, bodyTop: 55, bodyBottom: 68, wickBottom: 75 }
+];
+const SCATTER3D_DOTS = [
+  { u: 0.12, v: 0.09, w: 0.68 },
+  { u: 0.46, v: 0.19, w: 0.33 },
+  { u: 0.52, v: 0.67, w: 0.44 },
+  { u: 0.66, v: 0.59, w: 0.24 },
+  { u: 0.33, v: 0.77, w: 0.13 },
+  { u: 0.13, v: 0.56, w: 0.18 },
+  { u: 0.14, v: 0.91, w: 0.69 },
+  { u: 0.31, v: 0.23, w: 0.41 },
+  { u: 0.71, v: 0.86, w: 0.18 },
+  { u: 0.79, v: 0.29, w: 0.38 },
+  { u: 0.06, v: 0.21, w: 0.89 },
+  { u: 0.03, v: 0.43, w: 0.58 },
+  { u: 0.17, v: 0.31, w: 0.11 },
+  { u: 0.3, v: 0.61, w: 0.47 },
+  { u: 0.93, v: 0.37, w: 0.93 },
+  { u: 0.58, v: 0.13, w: 0.63 },
+  { u: 0.82, v: 0.1, w: 0.17 },
+  { u: 0.29, v: 0.63, w: 0.44 },
+  { u: 0.79, v: 0.75, w: 0.72 },
+  { u: 0.32, v: 0.34, w: 0.29 },
+  { u: 0.26, v: 0.8, w: 0.21 },
+  { u: 0.82, v: 0.82, w: 0.81 },
+  { u: 0.15, v: 0.42, w: 0.63 },
+  { u: 0.12, v: 0.12, w: 0.7 },
+  { u: 0.77, v: 0.47, w: 0.45 },
+  { u: 0.45, v: 0.57, w: 0.49 },
+  { u: 0.75, v: 0.11, w: 0.11 },
+  { u: 0.33, v: 0.26, w: 0.68 },
+  { u: 0.54, v: 0.18, w: 0.23 },
+  { u: 0.06, v: 0.13, w: 0.79 },
+  { u: 0.92, v: 0.8, w: 0.4 },
+  { u: 0.12, v: 0.5, w: 0.91 },
+  { u: 0.86, v: 0.36, w: 0.1 },
+  { u: 0.84, v: 0.56, w: 0.62 },
+  { u: 0.07, v: 0.79, w: 0.75 },
+  { u: 0.28, v: 0.27, w: 0.81 },
+  { u: 0.18, v: 0.17, w: 0.88 },
+  { u: 0.88, v: 0.51, w: 0.51 },
+  { u: 0.92, v: 0.63, w: 0.31 },
+  { u: 0.83, v: 0.91, w: 0.62 },
+  { u: 0.52, v: 0.33, w: 0.63 },
+  { u: 0.35, v: 0.6, w: 0.21 },
+  { u: 0.77, v: 0.33, w: 0.93 },
+  { u: 0.77, v: 0.34, w: 0.67 },
+  { u: 0.04, v: 0.69, w: 0.75 },
+  { u: 0.33, v: 0.88, w: 0.21 },
+  { u: 0.91, v: 0.15, w: 0.5 },
+  { u: 0.38, v: 0.53, w: 0.78 },
+  { u: 0.66, v: 0.21, w: 0.08 },
+  { u: 0.69, v: 0.08, w: 0.9 },
+  { u: 0.87, v: 0.86, w: 0.91 },
+  { u: 0.41, v: 0.11, w: 0.3 },
+  { u: 0.63, v: 0.29, w: 0.2 },
+  { u: 0.49, v: 0.63, w: 0.44 },
+  { u: 0.78, v: 0.7, w: 0.69 },
+  { u: 0.14, v: 0.51, w: 0.41 },
+  { u: 0.05, v: 0.46, w: 0.63 },
+  { u: 0.33, v: 0.24, w: 0.76 },
+  { u: 0.52, v: 0.9, w: 0.08 },
+  { u: 0.44, v: 0.39, w: 0.51 }
+];
+const S3D_ORIGIN = { x: 22, y: 83 };
+const S3D_AXIS_X = { x: 160, y: 20 };
+const S3D_AXIS_Y = { x: 0, y: -57 };
+const S3D_AXIS_Z = { x: 56, y: -24 };
+const S3D_GRID_STEPS = [0.25, 0.5, 0.75];
+const projectS3D = (u, v, w) => ({
+  x: S3D_ORIGIN.x + S3D_AXIS_X.x * u + S3D_AXIS_Y.x * v + S3D_AXIS_Z.x * w,
+  y: S3D_ORIGIN.y + S3D_AXIS_X.y * u + S3D_AXIS_Y.y * v + S3D_AXIS_Z.y * w
+});
+const S3DEdge = ({
+  dashed = false,
+  from,
+  to
+}) => {
+  const a = projectS3D(...from);
+  const b = projectS3D(...to);
+  return /* @__PURE__ */ jsx(
+    "line",
+    {
+      stroke: "#dde3ef",
+      strokeDasharray: dashed ? "2,2" : void 0,
+      strokeWidth: dashed ? 0.3 : 0.5,
+      x1: a.x,
+      x2: b.x,
+      y1: a.y,
+      y2: b.y
+    }
+  );
+};
+const BUBBLE_DATA = [
+  { size: 48, top: 20, left: 12 },
+  { size: 28, top: 55, left: 25 },
+  { size: 40, top: 35, left: 45 },
+  { size: 22, top: 65, left: 60 },
+  { size: 54, top: 15, left: 70 },
+  { size: 32, top: 50, left: 38 },
+  { size: 26, top: 75, left: 80 },
+  { size: 36, top: 40, left: 85 }
+];
 const BAR_WIDTHS = [92, 78, 88, 64, 72];
-const LINE_BAR_WIDTHS = [88, 72, 80, 58];
 const LEGEND_WIDTHS = [64, 80, 56];
 const getDefaultShimmerDirection = (graphType) => {
   const type = (graphType || "column").toLowerCase();
-  if (type === "column" || type === "waterfall" || type === "candlestick" || type === "heatmap" || type === "treemap") {
+  if (type === "column" || type === "waterfall" || type === "candlestick" || type === "heatmap" || type === "lollipop") {
     return "btt";
   }
-  if (type === "bar") {
+  if (type === "bar" || type === "treemap" || type === "venn" || type === "scatter") {
+    return "ltr";
+  }
+  if (type === "bubble" || type === "packedbubble") {
     return "ltr";
   }
-  if (type === "pie" || type === "semidonut" || type === "venn" || type === "bubble" || type === "packedbubble" || type === "scatter" || type === "scatter3d") {
+  if (type === "pie" || type === "semidonut" || type === "scatter3d") {
     return "circular";
   }
   return "ltr";
@@ -23,7 +138,12 @@ const resolveShimmerDirection = (shimmerDirection, graphType) => {
   }
   return getDefaultShimmerDirection(graphType);
 };
-const AxisFrame = ({ children, orientation = "column", direction }) => /* @__PURE__ */ jsxs("div", { className: `chart-skeleton-plot chart-skeleton-plot--${orientation}`, children: [
+const AxisFrame = ({
+  children,
+  orientation = "column",
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsxs("div", { className: `chart-skeleton-plot chart-skeleton-plot--${orientation}`, children: [
   /* @__PURE__ */ jsx(
     Skeleton,
     {
@@ -37,6 +157,35 @@ const AxisFrame = ({ children, orientation = "column", direction }) => /* @__PUR
   ),
   /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
     /* @__PURE__ */ jsx("div", { className: "chart-skeleton-bars", children }),
+    hasDualAxis && /* @__PURE__ */ jsxs("svg", { className: "chart-skeleton-dual-line", preserveAspectRatio: "none", viewBox: "0 0 400 200", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "dual-line-shimmer-gradient", x1: "-100%", x2: "0%", y1: "0%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#d5dbe8" }),
+        /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#eceef4" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "x1",
+            dur: "1.6s",
+            from: "-100%",
+            repeatCount: "indefinite",
+            to: "100%"
+          }
+        ),
+        /* @__PURE__ */ jsx("animate", { attributeName: "x2", dur: "1.6s", from: "0%", repeatCount: "indefinite", to: "200%" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "chart-skeleton-dual-line-path",
+          d: "M0,100 L66,80 L133,120 L200,70 L266,110 L333,60 L400,90",
+          fill: "none",
+          stroke: "url(#dual-line-shimmer-gradient)",
+          strokeWidth: 3
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       Skeleton,
       {
@@ -48,9 +197,23 @@ const AxisFrame = ({ children, orientation = "column", direction }) => /* @__PUR
         width: "100%"
       }
     )
-  ] })
+  ] }),
+  hasDualAxis && /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y-right",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  )
 ] });
-const ColumnSkeleton = ({ direction }) => /* @__PURE__ */ jsx(AxisFrame, { direction, orientation: "column", children: COLUMN_BAR_HEIGHTS.map((height, index) => /* @__PURE__ */ jsx(
+const ColumnSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsx(AxisFrame, { direction, hasDualAxis, orientation: "column", children: COLUMN_BAR_HEIGHTS.map((height, index) => /* @__PURE__ */ jsx(
   Skeleton,
   {
     borderRadius: 8,
@@ -62,28 +225,259 @@ const ColumnSkeleton = ({ direction }) => /* @__PURE__ */ jsx(AxisFrame, { direc
   },
   `column-bar-${index}`
 )) });
-const BarSkeleton = ({ direction }) => /* @__PURE__ */ jsx(AxisFrame, { direction, orientation: "bar", children: BAR_WIDTHS.map((width, index) => /* @__PURE__ */ jsx(
+const DENSE_COLUMN_BAR_HEIGHTS = [
+  45,
+  48,
+  34,
+  87,
+  68,
+  33,
+  60,
+  48,
+  12,
+  49,
+  30,
+  85,
+  40,
+  68,
+  75,
+  33,
+  30,
+  30,
+  35,
+  42,
+  27,
+  68,
+  73,
+  72,
+  30,
+  20,
+  24,
+  89,
+  33,
+  45,
+  57,
+  63,
+  45,
+  22
+];
+const DenseColumnSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsx(AxisFrame, { direction, hasDualAxis, orientation: "column-dense", children: DENSE_COLUMN_BAR_HEIGHTS.map((height, index) => /* @__PURE__ */ jsx(
   Skeleton,
   {
-    className: "chart-skeleton-bar chart-skeleton-bar--bar",
+    borderRadius: 2,
+    className: "chart-skeleton-bar chart-skeleton-bar--column-dense",
     direction,
-    height: 14,
+    height: `${height}%`,
     variant: "pill",
-    width: `${width}%`
+    width: "auto"
   },
-  `bar-${index}`
+  `dense-column-bar-${index}`
 )) });
-const LineSkeleton = ({ direction }) => /* @__PURE__ */ jsx(AxisFrame, { direction, orientation: "line", children: LINE_BAR_WIDTHS.map((width, index) => /* @__PURE__ */ jsx(
+const LollipopSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsx(AxisFrame, { direction, hasDualAxis, orientation: "column", children: LOLLIPOP_HEIGHTS.map((height, index) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: "chart-skeleton-lollipop",
+    style: { height: `${height}%` },
+    children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "chart-skeleton-lollipop-head",
+          direction,
+          height: 12,
+          variant: "circular",
+          width: 12
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 0,
+          className: "chart-skeleton-lollipop-stem",
+          direction,
+          height: "100%",
+          variant: "rectangular",
+          width: 2
+        }
+      )
+    ]
+  },
+  `lollipop-${index}`
+)) });
+const BarSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsx(AxisFrame, { direction, hasDualAxis, orientation: "bar", children: BAR_WIDTHS.map((width, index) => /* @__PURE__ */ jsx(
   Skeleton,
   {
-    className: "chart-skeleton-bar chart-skeleton-bar--line",
+    className: "chart-skeleton-bar chart-skeleton-bar--bar",
     direction,
     height: 14,
     variant: "pill",
     width: `${width}%`
   },
-  `line-bar-${index}`
+  `bar-${index}`
 )) });
+const AreaSplineSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--column", children: [
+  /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "chart-skeleton-area-spline", children: /* @__PURE__ */ jsxs("svg", { className: "chart-skeleton-area-wave", preserveAspectRatio: "none", viewBox: "0 0 400 200", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "area-shimmer-gradient", x1: "-100%", x2: "0%", y1: "0%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#d5dbe8" }),
+        /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#eceef4" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "x1",
+            dur: "1.6s",
+            from: "-100%",
+            repeatCount: "indefinite",
+            to: "100%"
+          }
+        ),
+        /* @__PURE__ */ jsx("animate", { attributeName: "x2", dur: "1.6s", from: "0%", repeatCount: "indefinite", to: "200%" })
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "chart-skeleton-area-fill chart-skeleton-area-fill--1",
+          d: "M0,185 C20,180 40,170 60,160 C80,120 100,40 120,25 C140,40 160,50 180,70 C220,100 260,130 300,155 C340,170 370,180 400,190 L400,200 L0,200 Z"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "chart-skeleton-area-fill chart-skeleton-area-fill--2",
+          d: "M0,190 C30,185 50,180 70,178 C90,175 110,170 130,175 C150,178 170,182 200,188 C250,192 320,196 400,198 L400,200 L0,200 Z"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] }),
+  hasDualAxis && /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y-right",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  )
+] });
+const LineSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--line", children: [
+  /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-lines", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "chart-skeleton-line-wave", preserveAspectRatio: "none", viewBox: "0 0 420 200", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "line-shimmer-gradient", x1: "-100%", x2: "0%", y1: "0%", y2: "0%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#e8edf5" }),
+          /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#d5dbe8" }),
+          /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#eceef4" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#e8edf5" }),
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "x1",
+              dur: "1.6s",
+              from: "-100%",
+              repeatCount: "indefinite",
+              to: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsx("animate", { attributeName: "x2", dur: "1.6s", from: "0%", repeatCount: "indefinite", to: "200%" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "chart-skeleton-line-path chart-skeleton-line-path--1",
+            d: "M10,110 L90,105 L170,115 L250,100 L330,108 L410,95",
+            fill: "none",
+            stroke: "url(#line-shimmer-gradient)",
+            strokeWidth: 3
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "chart-skeleton-line-path chart-skeleton-line-path--2",
+            d: "M10,140 L90,135 L170,145 L250,130 L330,138 L410,125",
+            fill: "none",
+            stroke: "url(#line-shimmer-gradient)",
+            strokeWidth: 3
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-line-dots", children: [
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "2.38%", top: "55%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "21.43%", top: "52.5%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "40.48%", top: "57.5%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "59.52%", top: "50%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "78.57%", top: "54%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "97.62%", top: "47.5%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "2.38%", top: "70%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "21.43%", top: "67.5%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "40.48%", top: "72.5%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "59.52%", top: "65%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "78.57%", top: "69%" } }),
+        /* @__PURE__ */ jsx("div", { className: "chart-skeleton-line-dot", style: { left: "97.62%", top: "62.5%" } })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] })
+] });
 const DonutSkeleton = ({
   direction,
   variant = "donut"
@@ -113,17 +507,558 @@ const DonutSkeleton = ({
     )) })
   ] });
 };
-const CircularPlotSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--circular", children: [
+const ScatterSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--scatter", children: [
+  /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-dots", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "10%", top: "20%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "15%", top: "45%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "25%", top: "30%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "30%", top: "60%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "40%", top: "25%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "45%", top: "50%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "55%", top: "35%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "60%", top: "70%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "70%", top: "40%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "75%", top: "55%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "85%", top: "30%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "90%", top: "65%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "12%", top: "35%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "22%", top: "55%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "35%", top: "40%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "48%", top: "65%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "58%", top: "45%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "68%", top: "60%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "78%", top: "35%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--square",
+          style: { left: "88%", top: "50%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "18%", top: "25%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "28%", top: "70%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "38%", top: "50%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "52%", top: "30%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "62%", top: "55%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "72%", top: "25%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--triangle",
+          style: { left: "82%", top: "70%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "5%", top: "50%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "20%", top: "15%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "33%", top: "75%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "50%", top: "20%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "65%", top: "80%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "80%", top: "15%" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "chart-skeleton-dot chart-skeleton-dot--circle",
+          style: { left: "95%", top: "40%" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] })
+] });
+const Scatter3DSkeleton = (_props) => /* @__PURE__ */ jsx("div", { className: "chart-skeleton-plot chart-skeleton-plot--scatter3d", children: /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className: "chart-skeleton-scatter3d",
+    preserveAspectRatio: "xMidYMid meet",
+    viewBox: "0 0 260 110",
+    children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "scatter3d-shimmer", x1: "-100%", x2: "0%", y1: "0%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#d5dbe8" }),
+        /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: "#eceef4" }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#e8edf5" }),
+        /* @__PURE__ */ jsx("animate", { attributeName: "x1", dur: "1.6s", from: "-100%", repeatCount: "indefinite", to: "100%" }),
+        /* @__PURE__ */ jsx("animate", { attributeName: "x2", dur: "1.6s", from: "0%", repeatCount: "indefinite", to: "200%" })
+      ] }) }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 0, 0], to: [0, 1, 0] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 0, 0], to: [0, 0, 1] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 0, 1], to: [0, 1, 1] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 1, 1], to: [0, 1, 0] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 0, 1], to: [1, 0, 1] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [1, 0, 1], to: [1, 1, 1] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [1, 1, 1], to: [0, 1, 1] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [0, 0, 0], to: [1, 0, 0] }),
+      /* @__PURE__ */ jsx(S3DEdge, { from: [1, 0, 0], to: [1, 0, 1] }),
+      S3D_GRID_STEPS.flatMap((step) => [
+        /* @__PURE__ */ jsx(S3DEdge, { dashed: true, from: [0, step, 0], to: [0, step, 1] }, `s3d-level-side-${step}`),
+        /* @__PURE__ */ jsx(S3DEdge, { dashed: true, from: [0, step, 1], to: [1, step, 1] }, `s3d-level-back-${step}`),
+        /* @__PURE__ */ jsx(S3DEdge, { dashed: true, from: [step, 0, 1], to: [step, 1, 1] }, `s3d-wall-${step}`),
+        /* @__PURE__ */ jsx(S3DEdge, { dashed: true, from: [step, 0, 0], to: [step, 0, 1] }, `s3d-floor-${step}`)
+      ]),
+      SCATTER3D_DOTS.map((dot, i) => {
+        const point = projectS3D(dot.u, dot.v, dot.w);
+        return /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: point.x,
+            cy: point.y,
+            fill: "url(#scatter3d-shimmer)",
+            r: 2.2
+          },
+          `s3d-${i}`
+        );
+      })
+    ]
+  }
+) });
+const CandlestickSkeleton = ({
+  direction,
+  hasDualAxis
+}) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--column", children: [
+  /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "chart-skeleton-candles", children: CANDLESTICK_DATA.map((candle, index) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-candle", children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 0,
+          className: "chart-skeleton-candle-wick",
+          direction,
+          height: "auto",
+          style: {
+            position: "absolute",
+            top: `${candle.wickTop}%`,
+            bottom: `${100 - candle.wickBottom}%`,
+            left: "50%",
+            transform: "translateX(-50%)"
+          },
+          variant: "rectangular",
+          width: 2
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 2,
+          className: "chart-skeleton-candle-body",
+          direction,
+          height: "auto",
+          style: {
+            position: "absolute",
+            top: `${candle.bodyTop}%`,
+            bottom: `${100 - candle.bodyBottom}%`,
+            left: "50%",
+            transform: "translateX(-50%)"
+          },
+          variant: "rectangular",
+          width: 20
+        }
+      )
+    ] }, `candle-${index}`)) }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] }),
+  hasDualAxis && /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y-right",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  )
+] });
+const HEATMAP_ROWS = 4;
+const HEATMAP_COLS = 5;
+const HeatmapSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--heatmap", children: [
   /* @__PURE__ */ jsx(
     Skeleton,
     {
-      className: "chart-skeleton-circle",
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
       direction,
-      height: 180,
-      variant: "circular",
-      width: 180
+      height: "100%",
+      variant: "rectangular",
+      width: 2
     }
   ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "chart-skeleton-heatmap", children: Array.from({ length: HEATMAP_COLS }, (_, colIndex) => /* @__PURE__ */ jsx("div", { className: "chart-skeleton-heatmap-col", children: Array.from({ length: HEATMAP_ROWS }, (_2, rowIndex) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 2,
+        className: "chart-skeleton-heatmap-cell",
+        direction,
+        height: "100%",
+        variant: "rectangular",
+        width: "100%"
+      },
+      `heatmap-cell-${colIndex}-${rowIndex}`
+    )) }, `heatmap-col-${colIndex}`)) }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] })
+] });
+const TreemapSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--treemap", children: [
+  /* @__PURE__ */ jsx("div", { className: "chart-skeleton-treemap-left", children: /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 4,
+      className: "chart-skeleton-treemap-block",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: "100%"
+    }
+  ) }),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-treemap-right", children: [
+    /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-treemap-top", children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 4,
+          className: "chart-skeleton-treemap-block",
+          direction,
+          height: "100%",
+          variant: "rectangular",
+          width: "100%"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 4,
+          className: "chart-skeleton-treemap-block",
+          direction,
+          height: "100%",
+          variant: "rectangular",
+          width: "100%"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          borderRadius: 4,
+          className: "chart-skeleton-treemap-block",
+          direction,
+          height: "100%",
+          variant: "rectangular",
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "chart-skeleton-treemap-bottom", children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 4,
+        className: "chart-skeleton-treemap-block",
+        direction,
+        height: "100%",
+        variant: "rectangular",
+        width: "100%"
+      }
+    ) })
+  ] })
+] });
+const BubbleSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--column", children: [
+  /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      borderRadius: 0,
+      className: "chart-skeleton-axis chart-skeleton-axis--y",
+      direction,
+      height: "100%",
+      variant: "rectangular",
+      width: 2
+    }
+  ),
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot-inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "chart-skeleton-bubble-area", children: BUBBLE_DATA.map((bubble, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: "chart-skeleton-bubble",
+        direction,
+        height: bubble.size,
+        style: { top: `${bubble.top}%`, left: `${bubble.left}%` },
+        variant: "circular",
+        width: bubble.size
+      },
+      `bubble-${index}`
+    )) }),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        borderRadius: 0,
+        className: "chart-skeleton-axis chart-skeleton-axis--x",
+        direction,
+        height: 2,
+        variant: "rectangular",
+        width: "100%"
+      }
+    )
+  ] })
+] });
+const VennSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-plot chart-skeleton-plot--venn", children: [
+  /* @__PURE__ */ jsxs("div", { className: "chart-skeleton-venn-circles", children: [
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: "chart-skeleton-venn-circle chart-skeleton-venn-circle--left",
+        direction,
+        height: 140,
+        variant: "circular",
+        width: 140
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        className: "chart-skeleton-venn-circle chart-skeleton-venn-circle--right",
+        direction,
+        height: 140,
+        variant: "circular",
+        width: 140
+      }
+    )
+  ] }),
   /* @__PURE__ */ jsx("div", { className: "chart-skeleton-legend", children: LEGEND_WIDTHS.map((width, index) => /* @__PURE__ */ jsx(
     Skeleton,
     {
@@ -136,12 +1071,21 @@ const CircularPlotSkeleton = ({ direction }) => /* @__PURE__ */ jsxs("div", { cl
     `legend-${index}`
   )) })
 ] });
-const getSkeletonByType = (graphType, direction) => {
+const getSkeletonByType = (graphType, direction, hasDualAxis) => {
   const type = (graphType || "column").toLowerCase();
+  if (type === "column-dense") {
+    return /* @__PURE__ */ jsx(DenseColumnSkeleton, { direction, hasDualAxis });
+  }
+  if (type === "lollipop") {
+    return /* @__PURE__ */ jsx(LollipopSkeleton, { direction, hasDualAxis });
+  }
   if (type === "bar") {
-    return /* @__PURE__ */ jsx(BarSkeleton, { direction });
+    return /* @__PURE__ */ jsx(BarSkeleton, { direction, hasDualAxis });
   }
-  if (type === "line" || type === "area" || type === "area line") {
+  if (type === "area" || type === "area line" || type === "areaspline") {
+    return /* @__PURE__ */ jsx(AreaSplineSkeleton, { direction, hasDualAxis });
+  }
+  if (type === "line") {
     return /* @__PURE__ */ jsx(LineSkeleton, { direction });
   }
   if (type === "pie") {
@@ -150,19 +1094,40 @@ const getSkeletonByType = (graphType, direction) => {
   if (type === "semidonut") {
     return /* @__PURE__ */ jsx(DonutSkeleton, { direction, variant: "semidonut" });
   }
-  if (type === "venn" || type === "bubble" || type === "packedbubble" || type === "scatter" || type === "scatter3d") {
-    return /* @__PURE__ */ jsx(CircularPlotSkeleton, { direction });
+  if (type === "bubble" || type === "packedbubble") {
+    return /* @__PURE__ */ jsx(BubbleSkeleton, { direction });
+  }
+  if (type === "scatter") {
+    return /* @__PURE__ */ jsx(ScatterSkeleton, { direction });
+  }
+  if (type === "scatter3d") {
+    return /* @__PURE__ */ jsx(Scatter3DSkeleton, { direction });
+  }
+  if (type === "venn") {
+    return /* @__PURE__ */ jsx(VennSkeleton, { direction });
+  }
+  if (type === "candlestick") {
+    return /* @__PURE__ */ jsx(CandlestickSkeleton, { direction, hasDualAxis });
+  }
+  if (type === "treemap") {
+    return /* @__PURE__ */ jsx(TreemapSkeleton, { direction });
+  }
+  if (type === "heatmap") {
+    return /* @__PURE__ */ jsx(HeatmapSkeleton, { direction });
   }
-  return /* @__PURE__ */ jsx(ColumnSkeleton, { direction });
+  return /* @__PURE__ */ jsx(ColumnSkeleton, { direction, hasDualAxis });
 };
 function ChartSkeleton({
   graphType = "column",
   height = null,
-  shimmerDirection = "auto"
+  shimmerDirection = "auto",
+  dense = false,
+  hasDualAxis = false
 }) {
+  const effectiveType = dense ? "column-dense" : graphType;
   const style = height ? { height } : void 0;
-  const direction = resolveShimmerDirection(shimmerDirection, graphType);
-  return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-live": "polite", className: "chart-skeleton", style, children: getSkeletonByType(graphType, direction) });
+  const direction = resolveShimmerDirection(shimmerDirection, effectiveType);
+  return /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-live": "polite", className: "chart-skeleton", style, children: getSkeletonByType(effectiveType, direction, hasDualAxis) });
 }
 ChartSkeleton.displayName = "ChartSkeleton";
 export {