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