@moontra/moonui-pro 2.28.1 → 2.28.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.global.js +1 -1
- package/dist/index.global.js.map +1 -1
- package/dist/index.mjs +71 -63
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -79263,16 +79263,21 @@ function ChartWidget2({
|
|
|
79263
79263
|
const renderBarChart = () => {
|
|
79264
79264
|
const values = data.values || [];
|
|
79265
79265
|
const labels = data.labels || data.categories || [];
|
|
79266
|
+
console.log("ChartWidget Debug:", { values, maxValue, labels });
|
|
79266
79267
|
return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
|
|
79267
79268
|
/* @__PURE__ */ jsx("div", { className: "flex items-end justify-between h-full gap-2 px-4", children: values.map((value, index2) => {
|
|
79268
79269
|
const percentage = value / maxValue * 100;
|
|
79269
79270
|
const isHovered = hoveredIndex === index2;
|
|
79271
|
+
console.log(`Bar ${index2}:`, { value, percentage, maxValue });
|
|
79270
79272
|
return /* @__PURE__ */ jsxs(
|
|
79271
79273
|
motion.div,
|
|
79272
79274
|
{
|
|
79273
79275
|
className: "flex-1 flex flex-col items-center justify-end gap-2",
|
|
79274
79276
|
onMouseEnter: () => setHoveredIndex(index2),
|
|
79275
79277
|
onMouseLeave: () => setHoveredIndex(null),
|
|
79278
|
+
initial: { opacity: 0, y: 20 },
|
|
79279
|
+
animate: { opacity: 1, y: 0 },
|
|
79280
|
+
transition: { delay: index2 * 0.05 },
|
|
79276
79281
|
children: [
|
|
79277
79282
|
showDataLabels && /* @__PURE__ */ jsx(
|
|
79278
79283
|
motion.span,
|
|
@@ -79287,16 +79292,21 @@ function ChartWidget2({
|
|
|
79287
79292
|
motion.div,
|
|
79288
79293
|
{
|
|
79289
79294
|
className: cn(
|
|
79290
|
-
"w-full rounded-t cursor-pointer
|
|
79295
|
+
"w-full rounded-t cursor-pointer",
|
|
79291
79296
|
isHovered && "opacity-80"
|
|
79292
79297
|
),
|
|
79293
79298
|
style: {
|
|
79294
79299
|
backgroundColor: chartColors[index2 % chartColors.length],
|
|
79295
|
-
height:
|
|
79300
|
+
height: `${percentage}%`,
|
|
79301
|
+
minHeight: "4px"
|
|
79302
|
+
},
|
|
79303
|
+
initial: { scaleY: 0, transformOrigin: "bottom" },
|
|
79304
|
+
animate: { scaleY: 1 },
|
|
79305
|
+
transition: {
|
|
79306
|
+
duration: animate4 ? 0.6 : 0,
|
|
79307
|
+
delay: index2 * 0.1,
|
|
79308
|
+
ease: "easeOut"
|
|
79296
79309
|
},
|
|
79297
|
-
initial: { height: 0 },
|
|
79298
|
-
animate: { height: `${percentage}%` },
|
|
79299
|
-
transition: { duration: animate4 ? 0.5 : 0, delay: index2 * 0.05 },
|
|
79300
79310
|
onClick: () => onDataPointClick?.({ label: labels[index2], value })
|
|
79301
79311
|
}
|
|
79302
79312
|
),
|
|
@@ -79911,7 +79921,7 @@ function FunnelWidget({
|
|
|
79911
79921
|
const color = getStageColor(stage, index2);
|
|
79912
79922
|
const icon = getStageIcon(stage, index2);
|
|
79913
79923
|
const isHovered = hoveredStage === stage.id;
|
|
79914
|
-
return /* @__PURE__ */
|
|
79924
|
+
return /* @__PURE__ */ jsx(
|
|
79915
79925
|
motion.div,
|
|
79916
79926
|
{
|
|
79917
79927
|
className: cn(
|
|
@@ -79924,69 +79934,67 @@ function FunnelWidget({
|
|
|
79924
79934
|
initial: { opacity: 0, x: -20 },
|
|
79925
79935
|
animate: { opacity: 1, x: 0 },
|
|
79926
79936
|
transition: { delay: index2 * 0.1 },
|
|
79927
|
-
children: [
|
|
79928
|
-
/* @__PURE__ */ jsxs("div", { className: "flex
|
|
79929
|
-
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
79930
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center
|
|
79931
|
-
/* @__PURE__ */
|
|
79932
|
-
/* @__PURE__ */ jsx(
|
|
79933
|
-
"div",
|
|
79934
|
-
{
|
|
79935
|
-
className: "p-1.5 rounded",
|
|
79936
|
-
style: { backgroundColor: `${color}20` },
|
|
79937
|
-
children: /* @__PURE__ */ jsx("div", { style: { color }, children: icon })
|
|
79938
|
-
}
|
|
79939
|
-
),
|
|
79940
|
-
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: stage.name }),
|
|
79941
|
-
stage.description && /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
|
|
79942
|
-
/* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-muted-foreground" }) }),
|
|
79943
|
-
/* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: stage.description }) })
|
|
79944
|
-
] }) })
|
|
79945
|
-
] }),
|
|
79946
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
79947
|
-
showValues && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: formatValue(stage.value) }),
|
|
79948
|
-
showPercentages && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: [
|
|
79949
|
-
formatNumber2(stage.percentage),
|
|
79950
|
-
"%"
|
|
79951
|
-
] }),
|
|
79952
|
-
showDuration && stage.duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: stage.duration })
|
|
79953
|
-
] })
|
|
79954
|
-
] }),
|
|
79955
|
-
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
79956
|
-
/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted/30 rounded overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
79957
|
-
motion.div,
|
|
79958
|
-
{
|
|
79959
|
-
className: "h-full rounded transition-all duration-300",
|
|
79960
|
-
style: {
|
|
79961
|
-
backgroundColor: color,
|
|
79962
|
-
opacity: isHovered ? 1 : 0.8
|
|
79963
|
-
},
|
|
79964
|
-
initial: { width: 0 },
|
|
79965
|
-
animate: { width },
|
|
79966
|
-
transition: { duration: animate4 ? 0.5 : 0, delay: index2 * 0.1 }
|
|
79967
|
-
}
|
|
79968
|
-
) }),
|
|
79969
|
-
showTargets && stage.target && /* @__PURE__ */ jsx(
|
|
79937
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
79938
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
|
|
79939
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
|
|
79940
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
79941
|
+
/* @__PURE__ */ jsx(
|
|
79970
79942
|
"div",
|
|
79971
79943
|
{
|
|
79972
|
-
className: "
|
|
79973
|
-
style: {
|
|
79974
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
79944
|
+
className: "p-1.5 rounded",
|
|
79945
|
+
style: { backgroundColor: `${color}20` },
|
|
79946
|
+
children: /* @__PURE__ */ jsx("div", { style: { color }, children: icon })
|
|
79975
79947
|
}
|
|
79976
|
-
)
|
|
79948
|
+
),
|
|
79949
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: stage.name }),
|
|
79950
|
+
stage.description && /* @__PURE__ */ jsx(MoonUITooltipProviderPro, { children: /* @__PURE__ */ jsxs(MoonUITooltipPro, { children: [
|
|
79951
|
+
/* @__PURE__ */ jsx(MoonUITooltipTriggerPro, { children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-muted-foreground" }) }),
|
|
79952
|
+
/* @__PURE__ */ jsx(MoonUITooltipContentPro, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: stage.description }) })
|
|
79953
|
+
] }) })
|
|
79954
|
+
] }),
|
|
79955
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
79956
|
+
showValues && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold", children: formatValue(stage.value) }),
|
|
79957
|
+
showPercentages && /* @__PURE__ */ jsxs(MoonUIBadgePro, { variant: "outline", className: "text-xs", children: [
|
|
79958
|
+
formatNumber2(stage.percentage),
|
|
79959
|
+
"%"
|
|
79960
|
+
] }),
|
|
79961
|
+
showDuration && stage.duration && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: stage.duration })
|
|
79977
79962
|
] })
|
|
79978
79963
|
] }),
|
|
79979
|
-
|
|
79980
|
-
/* @__PURE__ */ jsx(
|
|
79981
|
-
|
|
79982
|
-
|
|
79983
|
-
|
|
79984
|
-
|
|
79985
|
-
|
|
79986
|
-
|
|
79964
|
+
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
|
|
79965
|
+
/* @__PURE__ */ jsx("div", { className: "h-8 bg-muted/30 rounded overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
79966
|
+
motion.div,
|
|
79967
|
+
{
|
|
79968
|
+
className: "h-full rounded transition-all duration-300",
|
|
79969
|
+
style: {
|
|
79970
|
+
backgroundColor: color,
|
|
79971
|
+
opacity: isHovered ? 1 : 0.8
|
|
79972
|
+
},
|
|
79973
|
+
initial: { width: 0 },
|
|
79974
|
+
animate: { width },
|
|
79975
|
+
transition: { duration: animate4 ? 0.5 : 0, delay: index2 * 0.1 }
|
|
79976
|
+
}
|
|
79977
|
+
) }),
|
|
79978
|
+
showTargets && stage.target && /* @__PURE__ */ jsx(
|
|
79979
|
+
"div",
|
|
79980
|
+
{
|
|
79981
|
+
className: "absolute top-0 bottom-0 w-0.5 bg-foreground/50",
|
|
79982
|
+
style: { left: `${stage.target / Math.max(...data.stages.map((s) => s.value)) * 100}%` },
|
|
79983
|
+
children: /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -left-1 w-2 h-2 rounded-full bg-foreground/50" })
|
|
79984
|
+
}
|
|
79985
|
+
)
|
|
79986
|
+
] }),
|
|
79987
|
+
index2 < processedStages.length - 1 && /* @__PURE__ */ jsx("div", { className: "flex justify-center mt-2 mb-1", children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4 text-muted-foreground/50" }) })
|
|
79987
79988
|
] }),
|
|
79988
|
-
|
|
79989
|
-
|
|
79989
|
+
showDropoff && index2 > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs", children: [
|
|
79990
|
+
/* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3 text-red-500" }),
|
|
79991
|
+
/* @__PURE__ */ jsxs("span", { className: "text-red-500 font-medium", children: [
|
|
79992
|
+
"-",
|
|
79993
|
+
formatNumber2(stage.dropoffPercentage),
|
|
79994
|
+
"%"
|
|
79995
|
+
] })
|
|
79996
|
+
] })
|
|
79997
|
+
] })
|
|
79990
79998
|
},
|
|
79991
79999
|
stage.id
|
|
79992
80000
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moontra/moonui-pro",
|
|
3
|
-
"version": "2.28.
|
|
3
|
+
"version": "2.28.2",
|
|
4
4
|
"description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|