function MainComponent() { const [dataPoints, setDataPoints] = React.useState([]); const [graphWidth, setGraphWidth] = React.useState(100); const [sortData, setSortData] = React.useState(false); const [frame, setFrame] = React.useState({ top: true, left: true, right: true, bottom: true }); function handleDataInput(event) { const input = event.target.value; const newDataPoints = input.split('\n').map((row)=>{ const [label, value] = row.split(','); return { label: label.trim(), value: Number(value.trim()) }; }); setDataPoints(newDataPoints); } function handleGraphWidthChange(event) { setGraphWidth(event.target.value); } function handleSortDataChange(event) { setSortData(event.target.checked); } function handleFrameChange(position) { setFrame((prevFrame)=>({ ...prevFrame, [position]: !prevFrame[position] })); } const maxValue = Math.max(...dataPoints.map((point)=>point.value), 0); const displayDataPoints = sortData ? [ ...dataPoints ].sort((a, b)=>b.value - a.value) : dataPoints; const asciiChart = displayDataPoints.map((point)=>{ const barLength = maxValue > 0 ? Math.round(point.value / maxValue * graphWidth) : 0; let bar = `${frame.left ? '| ' : ''}${"█".repeat(barLength)} ${frame.right ? '|' : ''}`; return `${frame.top ? '\n' : ''}${point.label} ${bar} ${point.value}${frame.bottom ? '\n' : ''}`; }).join(''); return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#121212] min-h-screen text-white font-mono", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "asciibar"), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "ASCII Bar Chart Generator"), /*#__PURE__*/ React.createElement("h3", { className: "mb-1", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Input data"), /*#__PURE__*/ React.createElement("textarea", { onChange: handleDataInput, placeholder: "label,value\\nlabel,value", className: "mb-4 p-2 bg-[#252525] text-white w-full h-32", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-1 flex flex-col", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "graphWidth", className: "mb-1", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Graph width"), /*#__PURE__*/ React.createElement("input", { id: "graphWidth", type: "range", min: "10", max: "100", name: "graphWidth", value: graphWidth, onChange: handleGraphWidthChange, className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }), "% (", graphWidth, ")"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 form-check", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "inline-flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "sortData", checked: sortData, onChange: handleSortDataChange, className: "mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }), "Sort data")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Frame"), [ 'top', 'left', 'right', 'bottom' ].map((position)=>/*#__PURE__*/ React.createElement("label", { key: position, className: "inline-flex items-center ml-2", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: frame[position], onChange: ()=>handleFrameChange(position), className: "mr-1", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }), position))), /*#__PURE__*/ React.createElement("h3", { __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, "Output"), /*#__PURE__*/ React.createElement("pre", { className: "bg-[#010101] p-3 overflow-x-auto", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, asciiChart || 'Your chart will appear here')); }