@tomaszjarosz/react-visualizers 0.2.0 → 0.2.1
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.cjs +62 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +62 -12
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3510,7 +3510,7 @@ const DPVisualizerComponent = ({
|
|
|
3510
3510
|
showCode = true,
|
|
3511
3511
|
className = ""
|
|
3512
3512
|
}) => {
|
|
3513
|
-
var _a;
|
|
3513
|
+
var _a, _b, _c;
|
|
3514
3514
|
const [items] = useState(DEFAULT_ITEMS);
|
|
3515
3515
|
const [capacity] = useState(DEFAULT_CAPACITY);
|
|
3516
3516
|
const [speed, setSpeed] = useState(25);
|
|
@@ -3634,33 +3634,83 @@ const DPVisualizerComponent = ({
|
|
|
3634
3634
|
] })
|
|
3635
3635
|
] }) }) }),
|
|
3636
3636
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
3637
|
-
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight:
|
|
3637
|
+
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 450, className: "flex-1 min-w-0", children: [
|
|
3638
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-6 p-4 bg-gradient-to-r from-teal-50 to-cyan-50 rounded-xl border-2 border-teal-200", children: [
|
|
3639
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-teal-800 mb-3", children: "DP Recurrence Formula" }),
|
|
3640
|
+
/* @__PURE__ */ jsxs("div", { className: "font-mono text-sm bg-white rounded-lg p-3 border border-teal-200", children: [
|
|
3641
|
+
/* @__PURE__ */ jsxs("div", { className: "text-gray-600 mb-2", children: [
|
|
3642
|
+
"dp[i][w] = max(",
|
|
3643
|
+
/* @__PURE__ */ jsx("span", { className: "text-yellow-600 font-bold", children: " skip" }),
|
|
3644
|
+
",",
|
|
3645
|
+
/* @__PURE__ */ jsx("span", { className: "text-green-600 font-bold", children: " take" }),
|
|
3646
|
+
")"
|
|
3647
|
+
] }),
|
|
3648
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-xs mt-3", children: [
|
|
3649
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-yellow-50 p-2 rounded border border-yellow-200", children: [
|
|
3650
|
+
/* @__PURE__ */ jsx("span", { className: "text-yellow-700 font-bold", children: "skip" }),
|
|
3651
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: " = dp[i-1][w]" }),
|
|
3652
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-500 mt-1", children: "Don't take item i" })
|
|
3653
|
+
] }),
|
|
3654
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-green-50 p-2 rounded border border-green-200", children: [
|
|
3655
|
+
/* @__PURE__ */ jsx("span", { className: "text-green-700 font-bold", children: "take" }),
|
|
3656
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: " = dp[i-1][w-weight] + value" }),
|
|
3657
|
+
/* @__PURE__ */ jsx("div", { className: "text-gray-500 mt-1", children: "Take item i" })
|
|
3658
|
+
] })
|
|
3659
|
+
] })
|
|
3660
|
+
] }),
|
|
3661
|
+
currentI > 0 && currentW > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 p-3 bg-white rounded-lg border-2 border-purple-300", children: [
|
|
3662
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-purple-800 mb-2", children: [
|
|
3663
|
+
"Current: dp[",
|
|
3664
|
+
currentI,
|
|
3665
|
+
"][",
|
|
3666
|
+
currentW,
|
|
3667
|
+
"]"
|
|
3668
|
+
] }),
|
|
3669
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm", children: [
|
|
3670
|
+
/* @__PURE__ */ jsxs("div", { className: "text-gray-600", children: [
|
|
3671
|
+
"Item ",
|
|
3672
|
+
currentI,
|
|
3673
|
+
": ",
|
|
3674
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
3675
|
+
"w=",
|
|
3676
|
+
(_b = items[currentI - 1]) == null ? void 0 : _b.weight,
|
|
3677
|
+
", v=",
|
|
3678
|
+
(_c = items[currentI - 1]) == null ? void 0 : _c.value
|
|
3679
|
+
] })
|
|
3680
|
+
] }),
|
|
3681
|
+
decision && /* @__PURE__ */ jsx("div", { className: `px-3 py-1 rounded-full font-bold ${decision === "take" ? "bg-green-100 text-green-700" : "bg-yellow-100 text-yellow-700"}`, children: decision === "take" ? "✓ TAKE" : "✗ SKIP" })
|
|
3682
|
+
] })
|
|
3683
|
+
] })
|
|
3684
|
+
] }),
|
|
3638
3685
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
|
|
3639
|
-
/* @__PURE__ */ jsxs("div", { className: "w-
|
|
3640
|
-
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items:" }),
|
|
3686
|
+
/* @__PURE__ */ jsxs("div", { className: "w-40", children: [
|
|
3687
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "Items (i = item index):" }),
|
|
3641
3688
|
/* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map((item, idx) => /* @__PURE__ */ jsxs(
|
|
3642
3689
|
"div",
|
|
3643
3690
|
{
|
|
3644
|
-
className: `px-2 py-1 rounded text-xs ${idx + 1 === currentI ? "bg-purple-
|
|
3691
|
+
className: `px-2 py-1.5 rounded text-xs transition-colors ${idx + 1 === currentI ? "bg-purple-200 text-purple-900 font-bold ring-2 ring-purple-400" : idx + 1 < currentI ? "bg-blue-50 text-blue-600" : "bg-gray-100 text-gray-500"}`,
|
|
3645
3692
|
children: [
|
|
3646
|
-
"
|
|
3647
|
-
|
|
3693
|
+
/* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
|
|
3694
|
+
"i=",
|
|
3695
|
+
idx + 1
|
|
3696
|
+
] }),
|
|
3648
3697
|
": w=",
|
|
3649
3698
|
item.weight,
|
|
3650
3699
|
", v=",
|
|
3651
|
-
item.value
|
|
3700
|
+
item.value,
|
|
3701
|
+
idx + 1 === currentI && /* @__PURE__ */ jsx("span", { className: "ml-1", children: "← CURRENT" })
|
|
3652
3702
|
]
|
|
3653
3703
|
},
|
|
3654
3704
|
idx
|
|
3655
3705
|
)) }),
|
|
3656
|
-
/* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm", children: [
|
|
3657
|
-
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Capacity:" }),
|
|
3706
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-3 text-sm p-2 bg-gray-100 rounded", children: [
|
|
3707
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700", children: "Max Capacity:" }),
|
|
3658
3708
|
" ",
|
|
3659
|
-
/* @__PURE__ */ jsx("span", { className: "text-gray-900", children: capacity })
|
|
3709
|
+
/* @__PURE__ */ jsx("span", { className: "text-gray-900 font-mono", children: capacity })
|
|
3660
3710
|
] })
|
|
3661
3711
|
] }),
|
|
3662
3712
|
/* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-x-auto", children: [
|
|
3663
|
-
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table:" }),
|
|
3713
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-700 mb-2", children: "DP Table (w = current capacity):" }),
|
|
3664
3714
|
/* @__PURE__ */ jsxs("table", { className: "text-xs border-collapse", children: [
|
|
3665
3715
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
|
|
3666
3716
|
/* @__PURE__ */ jsx("th", { className: "w-8 p-1 text-gray-500 font-normal", children: "i\\w" }),
|