@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.0

package/dist/collection/dev/chart-bar.js

@@ -0,0 +1,423 @@
+const barChart1 = document.getElementById("bar-chart-1");
+
+// Event listener for popover button triggered
+barChart1.addEventListener("wmPopoverButtonClick", (ev) => {
+  console.log("wmPopoverButtonClick: ", ev.detail);
+  document.body.style.backgroundColor = `var(--${ev.detail.color})`;
+});
+
+barChart1.config = {
+  label: "Number of Students by Department",
+  subinfo: "University of Education",
+  valueAxisLabel: "Students",
+  categoryAxisLabel: "University Departments",
+  gridMax: 1000,
+  popoverTitle: "Config Title",
+  popoverText: "Description set by the config",
+  popoverButtonText: "View Details",
+};
+
+barChart1.data = [
+  { barLegend: "Marine Biology", amount: 250, whatever: "whatever", color: "wmcolor-border" },
+  { barLegend: "Organic Chemistry", amount: 500 },
+  { barLegend: "Aeronautical Engineering", amount: 982 },
+  { barLegend: "Pure Mathematics", amount: 100 },
+  {
+    barLegend: "Astrophysics",
+    amount: 500,
+    popoverTitle: "Astrophysics",
+    popoverText: "Astrophysics description set by the data",
+    popoverButtonText: "View Astrophysics Details",
+  },
+  { barLegend: "Social Psychology", amount: 900 },
+  { barLegend: "Urban Sociology", amount: 500 },
+  { barLegend: "Behavioral Economics & Economy Sciences", amount: 250 },
+];
+
+
+////////////////////////////////////////////////////////////
+// Control Panel
+////////////////////////////////////////////////////////////
+
+// Value format control
+const valueFormatAmount = document.getElementById("value-format-amount");
+const valueFormatPercentage = document.getElementById("value-format-percentage");
+
+valueFormatAmount.addEventListener("change", () => {
+  barChart1.config = { ...barChart1.config, valueFormat: "amount" };
+});
+
+valueFormatPercentage.addEventListener("change", () => {
+  barChart1.config = { ...barChart1.config, valueFormat: "percentage" };
+});
+
+const decimalPlacesInferCheckbox = document.getElementById("decimal-places-infer-checkbox");
+const decimalPlacesInput = document.getElementById("decimal-places-input");
+
+function applyDecimalPlacesConfig() {
+  if (!decimalPlacesInferCheckbox || !decimalPlacesInput) return;
+  if (decimalPlacesInferCheckbox.checked) {
+    const next = { ...barChart1.config };
+    delete next.decimalPlaces;
+    barChart1.config = next;
+    decimalPlacesInput.disabled = true;
+  } else {
+    decimalPlacesInput.disabled = false;
+    const n = parseInt(decimalPlacesInput.value, 10);
+    barChart1.config = {
+      ...barChart1.config,
+      decimalPlaces: Number.isFinite(n) ? Math.min(15, Math.max(0, n)) : 0,
+    };
+  }
+}
+
+decimalPlacesInferCheckbox.addEventListener("change", applyDecimalPlacesConfig);
+decimalPlacesInput.addEventListener("change", applyDecimalPlacesConfig);
+decimalPlacesInput.addEventListener("input", applyDecimalPlacesConfig);
+
+// Pattern control
+const patternDiscrete = document.getElementById("pattern-discrete");
+const patternSemantic = document.getElementById("pattern-semantic");
+const patternCustom = document.getElementById("pattern-custom-input");
+
+patternDiscrete.addEventListener("change", () => {
+  barChart1.config = { ...barChart1.config, colors: "discrete" };
+});
+
+patternSemantic.addEventListener("change", () => {
+  barChart1.config = { ...barChart1.config, colors: "semantic" };
+});
+
+patternCustom.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, colors: ev.target.value };
+});
+
+// Sort control
+const sortAscending = document.getElementById("sort-ascending");
+const sortDescending = document.getElementById("sort-descending");
+sortAscending.addEventListener("change", updateSort);
+sortDescending.addEventListener("change", updateSort);
+
+function updateSort() {
+  barChart1.config = { ...barChart1.config, sort: document.querySelector("input[name='sort']:checked").value };
+}
+
+const sortNone = document.getElementById("sort-none");
+
+sortNone.addEventListener("change", () => {
+  barChart1.config = { ...barChart1.config, sort: null };
+});
+
+// Chart label control
+const chartLabelInput = document.getElementById("chart-label-input");
+chartLabelInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, label: ev.target.value };
+});
+
+// Subinfo control
+const subinfoInput = document.getElementById("subinfo-input");
+subinfoInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, subinfo: ev.target.value };
+});
+
+// Axis label controls
+const categoryAxisLabelInput = document.getElementById("category-axis-label-input");
+const valueAxisLabelInput = document.getElementById("value-axis-label-input");
+
+categoryAxisLabelInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, categoryAxisLabel: ev.target.value };
+});
+
+valueAxisLabelInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, valueAxisLabel: ev.target.value };
+});
+
+// Popover controls
+const popoverTitleInput = document.getElementById("popover-title-input");
+const popoverTextInput = document.getElementById("popover-text-input");
+const popoverButtonTextInput = document.getElementById("popover-button-text-input");
+
+popoverTitleInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, popoverTitle: ev.target.value };
+});
+
+popoverTextInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, popoverText: ev.target.value };
+});
+
+popoverButtonTextInput.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, popoverButtonText: ev.target.value };
+});
+
+// Legend position control
+function updateLegendPosition() {
+  barChart1.config = { ...barChart1.config, showLegend: document.querySelector("input[name='legend']:checked").value };
+}
+
+const legendTop = document.getElementById("legend-top");
+const legendBottom = document.getElementById("legend-bottom");
+const legendLeft = document.getElementById("legend-left");
+const legendRight = document.getElementById("legend-right");
+const legendNone = document.getElementById("legend-none");
+
+legendTop.addEventListener("change", updateLegendPosition);
+legendBottom.addEventListener("change", updateLegendPosition);
+legendLeft.addEventListener("change", updateLegendPosition);
+legendRight.addEventListener("change", updateLegendPosition);
+legendNone.addEventListener("change", updateLegendPosition);
+
+// Grid controls
+const gridMaxInput = document.getElementById("grid-max-input");
+const showGridCheckbox = document.getElementById("show-grid-checkbox");
+
+gridMaxInput.addEventListener("change", (ev) => {
+  const value = ev.target.value.trim();
+  let gridMax;
+  if (value === "auto" || value === "") {
+    gridMax = "auto";
+  } else {
+    gridMax = parseInt(value, 10);
+    if (isNaN(gridMax)) {
+      gridMax = "auto";
+    }
+  }
+  barChart1.config = { ...barChart1.config, gridMax };
+});
+
+showGridCheckbox.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, showGrid: ev.target.checked };
+});
+
+// Display options controls
+const showLabelCheckbox = document.getElementById("show-label-checkbox");
+const printModeCheckbox = document.getElementById("print-mode-checkbox");
+const printModeFormatAmount = document.getElementById("print-mode-format-amount");
+const printModeFormatPercentage = document.getElementById("print-mode-format-percentage");
+
+showLabelCheckbox.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, showLabel: ev.target.checked };
+});
+
+printModeCheckbox.addEventListener("change", (ev) => {
+  barChart1.config = { ...barChart1.config, printMode: ev.target.checked };
+});
+
+function updatePrintModeFormat() {
+  barChart1.config = { ...barChart1.config, printModeFormat: document.querySelector("input[name='print-mode-format']:checked").value };
+}
+
+printModeFormatAmount.addEventListener("change", updatePrintModeFormat);
+printModeFormatPercentage.addEventListener("change", updatePrintModeFormat);
+
+////////////////////////////////////////////////////////////
+// Data Controls
+////////////////////////////////////////////////////////////
+
+const dataBarCount = document.getElementById("data-bar-count");
+const dataMinValue = document.getElementById("data-min-value");
+const dataMaxValue = document.getElementById("data-max-value");
+const generateRandomBtn = document.getElementById("generate-random-data");
+const dataJsonInput = document.getElementById("data-json-input");
+const applyJsonDataBtn = document.getElementById("apply-json-data");
+
+const categoryNames = [
+  "Marine Biology", "Organic Chemistry", "Aeronautical Engineering", "Pure Mathematics",
+  "Astrophysics", "Social Psychology", "Urban Sociology", "Behavioral Economics",
+  "Computer Science", "Data Science", "Philosophy", "Political Science",
+  "Environmental Studies", "Neuroscience", "Linguistics", "Anthropology",
+  "Art History", "Music Theory", "Statistics", "Geology", "Meteorology",
+  "Biochemistry", "Genetics", "Microbiology", "Pharmacology", "Nursing",
+  "Architecture", "Civil Engineering", "Electrical Engineering", "Mechanical Engineering",
+  "Quantum Physics", "Nuclear Physics", "Astronomy", "Oceanography", "Ecology",
+  "Forensic Science", "Criminology", "Economics", "Finance", "Marketing",
+  "Management", "Accounting", "Law", "Journalism", "Film Studies",
+  "Theater Arts", "Dance", "Photography", "Graphic Design", "Industrial Design"
+];
+
+function generateRandomData(count, min, max) {
+  const data = [];
+  for (let i = 0; i < count; i++) {
+    data.push({
+      barLegend: categoryNames[i % categoryNames.length] + (i >= categoryNames.length ? ` ${Math.floor(i / categoryNames.length) + 1}` : ""),
+      amount: Math.floor(Math.random() * (max - min + 1)) + min
+    });
+  }
+  return data;
+}
+
+function setChartData(data) {
+  if (barChart1) {
+    barChart1.data = data;
+    if (dataJsonInput) {
+      dataJsonInput.value = JSON.stringify(data, null, 2);
+    }
+  }
+}
+
+// Random data generation
+if (generateRandomBtn) {
+  generateRandomBtn.addEventListener("click", () => {
+    const count = parseInt(dataBarCount.value) || 8;
+    const min = Math.max(0, parseInt(dataMinValue.value) || 0);
+    const max = Math.max(min, parseInt(dataMaxValue.value) || 1000);
+    setChartData(generateRandomData(count, min, max));
+  });
+}
+
+// Apply JSON data
+if (applyJsonDataBtn) {
+  applyJsonDataBtn.addEventListener("click", () => {
+    try {
+      const data = JSON.parse(dataJsonInput.value);
+      if (barChart1) {
+        barChart1.data = data;
+      }
+    } catch (e) {
+      alert("Invalid JSON: " + e.message);
+    }
+  });
+}
+
+////////////////////////////////////////////////////////////
+// Presets
+////////////////////////////////////////////////////////////
+
+// Preset: Default
+const presetDefault = document.getElementById("preset-default");
+if (presetDefault) {
+  presetDefault.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "Marine Biology", amount: 250 },
+      { barLegend: "Organic Chemistry", amount: 500 },
+      { barLegend: "Aeronautical Engineering", amount: 982, color: "wmcolor-dataviz-discrete-03" },
+      { barLegend: "Pure Mathematics", amount: 100 },
+      { barLegend: "Astrophysics", amount: 500, popoverTitle: "Astrophysics", popoverText: "Description set by the data", popoverButtonText: "View Astrophysics Details" },
+      { barLegend: "Social Psychology", amount: 900 },
+      { barLegend: "Urban Sociology", amount: 500 },
+      { barLegend: "Behavioral Economics", amount: 250 }
+    ]);
+  });
+}
+
+// Preset: Single bar
+const presetSingle = document.getElementById("preset-single");
+if (presetSingle) {
+  presetSingle.addEventListener("click", () => {
+    setChartData([{ barLegend: "Single Category", amount: 500 }]);
+  });
+}
+
+// Preset: Many bars
+const presetMany = document.getElementById("preset-many");
+if (presetMany) {
+  presetMany.addEventListener("click", () => {
+    setChartData(generateRandomData(50, 50, 1000));
+  });
+}
+
+// Preset: Extreme values
+const presetExtreme = document.getElementById("preset-extreme");
+if (presetExtreme) {
+  presetExtreme.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "Tiny", amount: 1 },
+      { barLegend: "Small", amount: 10 },
+      { barLegend: "Medium", amount: 500 },
+      { barLegend: "Large", amount: 10000 },
+      { barLegend: "Huge", amount: 100000 },
+      { barLegend: "Massive", amount: 1000000 }
+    ]);
+  });
+}
+
+// Preset: With zeros
+const presetZeros = document.getElementById("preset-zeros");
+if (presetZeros) {
+  presetZeros.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "Has Value", amount: 500 },
+      { barLegend: "Zero Value", amount: 0 },
+      { barLegend: "Another Value", amount: 300 },
+      { barLegend: "Also Zero", amount: 0 },
+      { barLegend: "Small Value", amount: 50 },
+      { barLegend: "Third Zero", amount: 0 }
+    ]);
+  });
+}
+
+// Preset: Identical values
+const presetIdentical = document.getElementById("preset-identical");
+if (presetIdentical) {
+  presetIdentical.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "Category A", amount: 500 },
+      { barLegend: "Category B", amount: 500 },
+      { barLegend: "Category C", amount: 500 },
+      { barLegend: "Category D", amount: 500 },
+      { barLegend: "Category E", amount: 500 }
+    ]);
+  });
+}
+
+// Preset: Long labels
+const presetLongLabels = document.getElementById("preset-long-labels");
+if (presetLongLabels) {
+  presetLongLabels.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "This is an extremely long category label that might overflow", amount: 400 },
+      { barLegend: "Another very verbose and lengthy description for testing purposes", amount: 600 },
+      { barLegend: "Short", amount: 200 },
+      { barLegend: "Department of Interdisciplinary Environmental Science Studies", amount: 800 },
+      { barLegend: "A", amount: 100 }
+    ]);
+  });
+}
+
+// Preset: Grouped (3 groups of 4)
+const presetGrouped = document.getElementById("preset-grouped");
+if (presetGrouped) {
+  presetGrouped.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "North", amount: 250, groupName: "Q1" },
+      { barLegend: "South", amount: 400, groupName: "Q1" },
+      { barLegend: "East", amount: 350, groupName: "Q1" },
+      { barLegend: "West", amount: 300, groupName: "Q1" },
+      { barLegend: "South", amount: 450, groupName: "Q2" },
+      { barLegend: "North", amount: 320, groupName: "Q2" },
+      { barLegend: "West", amount: 390, groupName: "Q2" },
+      { barLegend: "East", amount: 520, groupName: "Q3" },
+      { barLegend: "North", amount: 410, groupName: "Q3" },
+      { barLegend: "South", amount: 380, groupName: "Q3" },
+      { barLegend: "West", amount: 290, groupName: "Q3" },
+      { barLegend: "East", amount: 280, groupName: "Q2" },
+    ]);
+    barChart1.config = { ...barChart1.config, gridMax: 600 };
+  });
+}
+
+// Preset: Decimals
+const presetDecimals = document.getElementById("preset-decimals");
+if (presetDecimals) {
+  presetDecimals.addEventListener("click", () => {
+    setChartData([
+      { barLegend: "Category A", amount: 1.2 },
+      { barLegend: "Category B", amount: 4.25 },
+      { barLegend: "Category C", amount: 5.0 },
+      { barLegend: "Category D", amount: 4.1 },
+      { barLegend: "Category E", amount: 4.9 }
+    ]);
+    barChart1.config = { ...barChart1.config, decimalPlaces: 2, gridMax: 6 };
+    if (decimalPlacesInferCheckbox) decimalPlacesInferCheckbox.checked = false;
+    if (decimalPlacesInput) {
+      decimalPlacesInput.disabled = false;
+      decimalPlacesInput.value = "2";
+    }
+  });
+}
+
+// Initialize JSON textarea with current data after chart loads
+setTimeout(() => {
+  if (barChart1 && barChart1.data && dataJsonInput) {
+    dataJsonInput.value = JSON.stringify(barChart1.data, null, 2);
+  }
+}, 1500);