OJS

Using Observable Tutorial
https://quarto.org/docs/computations/ojs.html

OJS is geared towards charts (data viz) and not so much tables.
I strongly dislike my tables in my Dashboard. This may help: Link to table options in OJS.
Render the website use ~
```
quarto render 
```

My filtering question and drop down selection

With Shiny I know a code to select all the values upon inital loading. I need a way to figure this out with OjS.

```{ojs}

/| eval: false

// Option 1: Add "All" option to single-select dropdown
viewof councilDropdown = Inputs.select(
  ["All", ...new Set(survey_data_ojs.map(d => d.council))],
  {
    label: "Choose a council",
    value: "All" // Default to "All"
  }
)

// Then filter your data based on selection:
filtered_data = councilDropdown === "All" 
  ? survey_data_ojs 
  : survey_data_ojs.filter(d => d.council === councilDropdown)

// Option 2: Multiple select with all values initially selected
viewof councilDropdownMultiple = Inputs.select(
  survey_data_ojs.map(d => d.council),
  {
    label: "Choose councils (deselect to filter)",
    unique: true,
    multiple: true,
    value: [...new Set(survey_data_ojs.map(d => d.council))] // All selected initially
  }
)

// Filter data for multiple selection:
filtered_data_multiple = survey_data_ojs.filter(d => 
  councilDropdownMultiple.includes(d.council)
)

```

OJS Syntax Error (line 26, column 2)Unterminated regular expression

This worked

```{ojs}
/| eval: false

/| expandable: false

// Tranpose the data to  make it usable in ojs


// Create a dropdown menu of the songs
viewof councilDropdown = Inputs.select(
  ["All", ...new Set(matched_results_ojs.map(d => d.council))],
  {
    label: "Choose a council",
    value: "All" // Set default to show all
  }
)




filtered_match = councilDropdown === "All" 
  ? matched_results_ojs 
  : matched_results_ojs.filter(d => d.council === councilDropdown)
  
  
```

OJS Syntax Error (line 63, column 2)Unterminated regular expression

Waffle Plots

I spent hours trying to make a waffle chart in OJS using R. I needed this snippet to make it work.

```{ojs}
/| eval: false

Plot = require("@observablehq/plot@0.6")
```

OJS Syntax Error (line 95, column 2)Unterminated regular expression

Tables

Claude help me figure this out I need this to make my tables nice in ojs

```{ojs}
/| eval: false


viewof my_table = (() => {
  const table = Inputs.table(filtered);  // Use your real data here

  setTimeout(() => {
    const innerTable = table.querySelector("table");
    if (innerTable) {
      innerTable.classList.add("table-green-header");
    }
  }, 50);

  return table;
})();

```

OJS Syntax Error (line 105, column 2)Unterminated regular expression

The other lesson learned. Reference a seperate css sheet rather than in the same document