<div id="container"><div>

<script src="26b39.js"></script>
<script src="26b41.js"></script>
<script src="26b43.js"></script>
<script src="26b10.js"></script>
<script src="26b12.js"></script>
<script src="26b14.js"></script>
<script src="26b15.js"></script>

<script>
// Define global variables
let dataset1, dataset2;

// Instantiate containers, output textarea, and buttons
const cnt = getContainer("container");
const inTxa = createTextarea("text-input");
const outTxa = createTextarea("text-output");
const btnDiv = createDiv("button-container");
const cvBtn = createButton("cv-button", "Clear datasets");
const ciBtn = createButton("ci-button", "Clear input");
const coBtn = createButton("co-button", "Clear output");
const deBtn = createButton("de-button", "Default");
const r1Btn = createButton("r1-button", "Dataset 1");
const r2Btn = createButton("r2-button", "Dataset 2");

// Append textarea to container
cnt.append(inTxa);
cnt.append(btnDiv);
cnt.append(outTxa);
btnDiv.append(cvBtn);
btnDiv.append(ciBtn);
btnDiv.append(coBtn);
btnDiv.append(deBtn);
btnDiv.append(r1Btn);
btnDiv.append(r2Btn);

// Change elements flex value
changeElementsFlex(
  ["text-input", "2.5"],
  ["button-container", "3"] , 
  ["text-output", "2.5"],
);

// Change ui height
cnt.style.height = "21em";
inTxa.style.height = "100%";
outTxa.style.height = "100%";

// Bind consolex output to textarea and set EOL character
consolex.setOutput(outTxa);
consolex.setEOL("");

// Set onclick event to each button
cvBtn.addEventListener("click", () => {
  dataset1 = null;
  dataset2 = null;
});
ciBtn.addEventListener("click", () => {
  clearTextarea("text-input");
});
coBtn.addEventListener("click", () => {
  clearTextarea("text-output");
});
deBtn.addEventListener("click", () => {
  inTxa.value = "";
  inTxa.value += "# dataset 1"; 
  inTxa.value += "\n" + "X;Y";
  inTxa.value += "\n" + "1;1";
  inTxa.value += "\n" + "2;4";
  inTxa.value += "\n" + "3;9";
  inTxa.value += "\n" + "4;16";
  inTxa.value += "\n" + "5;25";
  inTxa.value += "\n";

  inTxa.value += "\n# dataset 2"; 
  inTxa.value += "\n" + "X;Y;Z";
  inTxa.value += "\n" + "1;2;5";
  inTxa.value += "\n" + "2;4;10";
  inTxa.value += "\n" + "3;6;15";
  inTxa.value += "\n" + "4;8;20";
  inTxa.value += "\n" + "5;10;25";
  inTxa.value += "\n";
});
r1Btn.addEventListener("click", () => {
  let key, block;
  
  key = "# dataset 1";
  block = readBlockFromTextarea("text-input", key);
  dataset = convertBlockToDataset(block, ";");
  
  outTxa.value += JSON.stringify(dataset) + "\n";
});
r2Btn.addEventListener("click", () => {
  let key, block;
  
  key = "# dataset 2";
  block = readBlockFromTextarea("text-input", key);
  dataset = convertBlockToDataset(block, ";");
  
  outTxa.value += JSON.stringify(dataset) + "\n";
});
</script>

/**
 * 26c15.js
 * Helper functions for butiran-x/26c15 note.
 *
 * Author: Sparisoma Viridi (https://github.com/dudung)
 * Created: 2026-03-03
 *
 * Exports:
 * - convertBlokToDataSet(block)
 */


/**
 * Converts a text block (where the first line contains column labels)
 * into a dataset represented as a JavaScript object.
 *
 * The resulting object has the form:
 * {
 *   "columnName1": [values],
 *   "columnName2": [values],
 *   ...
 * }
 *
 * @param {string} block - Multiline text where the first line contains column labels
 *   and each subsequent line contains delimited values.
 * @param {string} delim - The delimiter used to separate values in each line.
 * @returns {{ [key: string]: Array<string | number> }} An object mapping column names to arrays of values.
 *
 * @example
 * const dataset = convertBlockToDataSet(block, ",");
 */
function convertBlockToDataset(block, delim) {
  const dataset = {};
  
  const lines = block.split("\n");
  const header = lines[0].split(delim);
  
  const nrow = lines.length;
  const ncol = header.length;

  for(h of header) {
    dataset[h] = [];
  }
  
  for(let i = 1; i < nrow; i++) {
    let cols = lines[i].split(delim);
    for(let j = 0; j < ncol; j++) {
      dataset[header[j]].push(cols[j]);
    }
  }
  
  return dataset;
}


// marker: 26c15.js
(() => {
  console.log("[marker] 26c15.js loaded");
})();