Nelson Jovel
2 years ago
parent
a193b5bf11
commit
3ad47e6bd5
@ -1,152 +1,25 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
import debounce from "debounce";
|
||||
|
||||
// Connects to data-controller="analyze"
|
||||
export default class extends Controller {
|
||||
connect() { }
|
||||
refresh(event) {
|
||||
let base_url = event.target.value;
|
||||
let target = event.target;
|
||||
console.log(this.selected_slice(target))
|
||||
console.log(target.name)
|
||||
static targets = ["category", "subcategory"]
|
||||
|
||||
let url =
|
||||
base_url +
|
||||
"&academic_years=" +
|
||||
this.selected_years().join(",") +
|
||||
"&source=" +
|
||||
this.selected_source(target) +
|
||||
"&slice=" +
|
||||
this.selected_slice(target) +
|
||||
"&group=" +
|
||||
this.selected_group() +
|
||||
"&graph=" +
|
||||
this.selected_graph(target) +
|
||||
"&races=" +
|
||||
this.selected_items("race").join(",") +
|
||||
"&genders=" +
|
||||
this.selected_items("gender").join(",") +
|
||||
"&incomes=" +
|
||||
this.selected_items("income").join(",") +
|
||||
"&grades=" +
|
||||
this.selected_items("grade").join(",") +
|
||||
"&ells=" +
|
||||
this.selected_items("ell").join(",") +
|
||||
"&speds=" +
|
||||
this.selected_items("sped").join(",");
|
||||
|
||||
this.go_to(url);
|
||||
}
|
||||
|
||||
go_to(location) {
|
||||
window.location = location;
|
||||
}
|
||||
|
||||
selected_years() {
|
||||
let year_checkboxes = [...document.getElementsByName("year-checkbox")];
|
||||
let years = year_checkboxes
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return years;
|
||||
}
|
||||
|
||||
selected_group() {
|
||||
let groups = [...document.getElementsByName("group-option")];
|
||||
let selected_group = groups
|
||||
.filter((item) => {
|
||||
return item.selected;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return selected_group[0];
|
||||
}
|
||||
|
||||
selected_source(target) {
|
||||
if (target.name === 'source') {
|
||||
return target.id;
|
||||
}
|
||||
if (target.name === 'slice' || target.name === 'group') {
|
||||
return 'survey-data-only';
|
||||
}
|
||||
|
||||
return window.source;
|
||||
}
|
||||
|
||||
selected_slice(target) {
|
||||
if (target.name === 'source' && target.id === 'all-data') {
|
||||
return 'all-data';
|
||||
}
|
||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
||||
return 'students-and-teachers';
|
||||
}
|
||||
|
||||
if (target.name === 'group') {
|
||||
return 'students-by-group';
|
||||
initialize() {
|
||||
this.submit = debounce(this.submit.bind(this), 300)
|
||||
}
|
||||
|
||||
if (target.name === 'source' || target.name === 'slice') {
|
||||
let slices = [...document.getElementsByName("slice")];
|
||||
let selected_slice = slices
|
||||
.filter((item) => {
|
||||
return item.id != "all-data";
|
||||
})
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
});
|
||||
|
||||
return selected_slice[0];
|
||||
}
|
||||
|
||||
return window.slice;
|
||||
}
|
||||
connect() {
|
||||
const collection = document.getElementsByClassName("popover");
|
||||
|
||||
selected_graph(target) {
|
||||
if (target.name === 'source' && target.id === 'all-data') {
|
||||
return 'all-data'
|
||||
for (let i = 0; i < collection.length; i++) {
|
||||
collection[i].parentNode.removeChild(collection[i]);
|
||||
}
|
||||
if (target.name === 'source' && target.id === 'survey-data-only') {
|
||||
return 'students-and-teachers'
|
||||
}
|
||||
|
||||
let graphs = [...document.getElementsByName("slice")];
|
||||
let selected_slice = graphs
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id;
|
||||
})[0];
|
||||
|
||||
if (target.name === 'slice' || target.name === 'group') {
|
||||
if (selected_slice === 'students-and-teachers') {
|
||||
return 'students-and-teachers';
|
||||
}
|
||||
return `students-by-${this.selected_group()}`;
|
||||
}
|
||||
|
||||
return window.graph;
|
||||
|
||||
}
|
||||
|
||||
selected_items(type) {
|
||||
let checkboxes = [...document.getElementsByName(`${type}-checkbox`)]
|
||||
let items = checkboxes
|
||||
.filter((item) => {
|
||||
return item.checked;
|
||||
})
|
||||
.map((item) => {
|
||||
return item.id.replace(`${type}-`, '');
|
||||
});
|
||||
submit() {
|
||||
console.log("Submitting form");
|
||||
|
||||
return items;
|
||||
this.element.requestSubmit();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,17 +1,13 @@
|
||||
<div class="d-flex align-items-center mx-5">
|
||||
<input
|
||||
id="<%= id %>"
|
||||
class="m-3 <%= name %>-checkbox form-check-input"
|
||||
class="m-3 form-check-input"
|
||||
type="checkbox"
|
||||
name="<%= name %>-checkbox"
|
||||
value="<%= base_url %>"
|
||||
data-action="click->analyze#refresh"
|
||||
name="<%= "#{name}#{index}" %>-checkbox"
|
||||
value="<%= item %>"
|
||||
<%= selected_items.include?(item) ? "checked" : "" %>
|
||||
<%= @presenter.graph.slug == 'students-and-teachers' || @presenter.source.slug == 'all-data' ? "disabled" : "" %>
|
||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
||||
|
||||
<label for="<%= id %>"
|
||||
<%= @presenter.group.slug == name ? "" : "hidden" %>>
|
||||
>
|
||||
<label for="<%= id %>" >
|
||||
<%= label_text %>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,44 @@
|
||||
|
||||
<h3 class="sub-header-4">Focus Area</h3>
|
||||
<p>Select a category & subcategory to analyze measure-level results</p>
|
||||
<select id="select-category" class="mx-3 form-select" data-id="category-dropdown" data-action="analyze#refresh">
|
||||
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key.start_with?("category") || key.start_with?("subcategory")}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
|
||||
<select id="select-category" class="mx-3 form-select" name="category" data-id="category-dropdown">
|
||||
<% categories.each do |category| %>
|
||||
<option value="<%= analyze_category_link(district: district, school: school, academic_year: academic_year, category: category) %>" <%= category.id == @presenter.category.id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
||||
<option value="<%= category.category_id %>" <%= category.category_id == @presenter.category.category_id ? "selected": "" %>><%= "#{category.category_id}: #{category.name}" %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
<select id="select-subcategory" class="mx-3 form-select mt-3" data-id="subcategory-dropdown" data-action="analyze#refresh">
|
||||
<% end %>
|
||||
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
<% params.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
|
||||
<select id="select-subcategory" class="mx-3 form-select mt-3" name="subcategory" data-id="subcategory-dropdown">
|
||||
<% subcategories.each do |subcategory| %>
|
||||
<option value="<%= analyze_subcategory_link(district: district, school: school, academic_year: academic_year, category: category, subcategory: subcategory) %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
||||
<option value="<%= subcategory.subcategory_id %>" <%= subcategory.subcategory_id == @presenter.subcategory.subcategory_id ? "selected": "" %>>
|
||||
<%= "#{subcategory.subcategory_id}: #{subcategory.name}" %>
|
||||
</option>
|
||||
<% end %>
|
||||
</select>
|
||||
<% end %>
|
||||
|
||||
@ -1,31 +1,60 @@
|
||||
<select id="select-group" name="group" class="mx-4 form-select" data-id="group-dropdown" data-action="analyze#refresh">
|
||||
<%= form_with(url: district_school_analyze_index_path,
|
||||
method: :get,
|
||||
data: {
|
||||
turbo_frame: "results",
|
||||
turbo_action: "advance",
|
||||
controller: "analyze",
|
||||
action: "input->analyze#submit"
|
||||
}) do |f| %>
|
||||
|
||||
<% params.reject{|key,_| key == "graph" || key.end_with?("checkbox")}.each do |key, value| %>
|
||||
<input type="hidden" id="year" name="<%= key %>" value="<%= value %>">
|
||||
<% end %>
|
||||
|
||||
<select id="select-group" name="graph" class="mx-4 form-select" data-id="group-dropdown">
|
||||
<% @presenter.groups.each do |group| %>
|
||||
<option id="<%= group.slug %>" name="group-option" value="<%= base_url %>" <%= group.slug == @presenter.group.slug ? "Selected": "" %>><%= group.name %> </option>
|
||||
<option id="<%= group.slug %>" value="<%= group.graph.slug %>" <%= group.graph.slug == @presenter.graph.slug ? "Selected": "" %>><%= group.name %> </option>
|
||||
<% end %>
|
||||
</select>
|
||||
|
||||
|
||||
|
||||
<p class="sub-header-5 mx-4 mt-3 font-size-14"> Select a group </p>
|
||||
|
||||
<% @presenter.races.each do |race| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "race-#{race.slug}", item: race, selected_items: @presenter.selected_races, name: "race", label_text: race.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-race' %>
|
||||
<% @presenter.races.each_with_index do |race, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "race-#{}#{race.slug}", item: race.slug, selected_items: @presenter.selected_races.map(&:slug), name: "race", label_text: race.designation, index: index })%>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.grades.each do |grade| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-grade' %>
|
||||
<% @presenter.grades.each_with_index do |grade, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "grade-#{grade}", item: grade, selected_items: @presenter.selected_grades, name: "grade", label_text: grade, index: index }) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.genders.each do |gender| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender, selected_items: @presenter.selected_genders, name: "gender", label_text: gender.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-gender' %>
|
||||
<% @presenter.genders.each_with_index do |gender, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "gender-#{gender.designation}", item: gender.slug, selected_items: @presenter.selected_genders.map(&:slug), name: "gender", label_text: gender.designation, index: index }) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if @presenter.graph.slug == 'students-by-income' %>
|
||||
<% @presenter.incomes.each_with_index do |income, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income.slug, selected_items: @presenter.selected_incomes.map(&:slug), name: "income", label_text: income.label, index: index })%>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.incomes.each do |income| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "income-#{income.slug}", item: income, selected_items: @presenter.selected_incomes, name: "income", label_text: income.label}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-ell' %>
|
||||
<% @presenter.ells.each_with_index do |ell, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell.slug, selected_items: @presenter.selected_ells.map(&:slug), name: "ell", label_text: ell.designation, index: index}) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.ells.each do |ell| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "ell-#{ell.slug}", item: ell, selected_items: @presenter.selected_ells, name: "ell", label_text: ell.designation}) %>
|
||||
<% if @presenter.graph.slug == 'students-by-sped' %>
|
||||
<% @presenter.speds.each_with_index do |sped, index| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped.slug, selected_items: @presenter.selected_speds.map(&:slug), name: "sped", label_text: sped.designation, index: index}) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% @presenter.speds.each do |sped| %>
|
||||
<%= render(partial: "checkboxes", locals: {id: "sped-#{sped.slug}", item: sped, selected_items: @presenter.selected_speds, name: "sped", label_text: sped.designation}) %>
|
||||
<% end %>
|
||||
|
||||
|
Before Width: | Height: | Size: 493 B After Width: | Height: | Size: 492 B |
@ -0,0 +1,6 @@
|
||||
class AddSlugToGender < ActiveRecord::Migration[7.1]
|
||||
def change
|
||||
add_column :genders, :slug, :string
|
||||
add_index :genders, :slug, unique: true
|
||||
end
|
||||
end
|
||||
@ -0,0 +1,6 @@
|
||||
class AddSlugToAcademicYear < ActiveRecord::Migration[7.1]
|
||||
def change
|
||||
add_column :academic_years, :slug, :string
|
||||
add_index :academic_years, :slug, unique: true
|
||||
end
|
||||
end
|
||||
@ -1,162 +0,0 @@
|
||||
require "rails_helper"
|
||||
include AnalyzeHelper
|
||||
include Analyze::Graph
|
||||
describe "analyze/index" do
|
||||
subject { Nokogiri::HTML(rendered) }
|
||||
let(:category) { create(:category) }
|
||||
let(:subcategory) { create(:subcategory, category:) }
|
||||
let(:school) { create(:school) }
|
||||
let(:academic_year) { create(:academic_year) }
|
||||
let(:races) do
|
||||
DemographicLoader.load_data(filepath: "spec/fixtures/sample_demographics.csv")
|
||||
Race.all
|
||||
end
|
||||
let(:background) { BackgroundPresenter.new(num_of_columns: graph.columns.count) }
|
||||
|
||||
let(:support_for_teaching) do
|
||||
measure = create(:measure, name: "Support For Teaching Development & Growth", measure_id: "1A-I", subcategory:)
|
||||
scale = create(:scale, measure:)
|
||||
create(:student_survey_item,
|
||||
scale:,
|
||||
watch_low_benchmark: 1.5,
|
||||
growth_low_benchmark: 2.5,
|
||||
approval_low_benchmark: 3.5,
|
||||
ideal_low_benchmark: 4.5)
|
||||
measure
|
||||
end
|
||||
|
||||
let(:effective_leadership) do
|
||||
measure = create(:measure, name: "Effective Leadership", measure_id: "1A-II", subcategory:)
|
||||
scale = create(:scale, measure:)
|
||||
create(:teacher_survey_item,
|
||||
scale:,
|
||||
watch_low_benchmark: 1.5,
|
||||
growth_low_benchmark: 2.5,
|
||||
approval_low_benchmark: 3.5,
|
||||
ideal_low_benchmark: 4.5)
|
||||
measure
|
||||
end
|
||||
|
||||
let(:professional_qualifications) do
|
||||
measure = create(:measure, name: "Professional Qualifications", measure_id: "1A-III", subcategory:)
|
||||
scale = create(:scale, measure:)
|
||||
create(:admin_data_item,
|
||||
scale:,
|
||||
watch_low_benchmark: 1.5,
|
||||
growth_low_benchmark: 2.5,
|
||||
approval_low_benchmark: 3.5,
|
||||
ideal_low_benchmark: 4.5)
|
||||
measure
|
||||
end
|
||||
|
||||
let(:genders) do
|
||||
DemographicLoader.load_data(filepath: "spec/fixtures/sample_demographics.csv")
|
||||
Gender.all
|
||||
end
|
||||
|
||||
let(:respondent) { create(:respondent, school:, academic_year:) }
|
||||
|
||||
before :each do
|
||||
races
|
||||
category
|
||||
subcategory
|
||||
support_for_teaching
|
||||
effective_leadership
|
||||
professional_qualifications
|
||||
respondent
|
||||
assign :academic_year, academic_year
|
||||
assign :district, create(:district)
|
||||
assign :school, school
|
||||
assign :presenter,
|
||||
Analyze::Presenter.new(school:, academic_year:,
|
||||
params: { category: category.category_id, subcategory: subcategory.subcategory_id, races: "american-indian-or-alaskan-native,asian-or-pacific-islander,black-or-african-american,hispanic-or-latinx,middle-eastern,multiracial,race-ethnicity-not-listed,white-or-caucasian", source: "survey-data-only", slice: "students-and-teachers", group: "race", graph: "students-by-race" })
|
||||
assign :background, BackgroundPresenter.new(num_of_columns: 4)
|
||||
end
|
||||
context "when all the presenters have a nil score" do
|
||||
before do
|
||||
render
|
||||
end
|
||||
# let(:grouped_bar_column_presenters) do
|
||||
# measure = create(:measure, name: 'Display Me', measure_id: 'display-me')
|
||||
# scale = create(:scale, measure:)
|
||||
# create(:student_survey_item,
|
||||
# scale:,
|
||||
# watch_low_benchmark: 1.5,
|
||||
# growth_low_benchmark: 2.5,
|
||||
# approval_low_benchmark: 3.5,
|
||||
# ideal_low_benchmark: 4.5)
|
||||
# [
|
||||
# GroupedBarColumnPresenter.new(measure:,
|
||||
# score: Score.new(average: rand))
|
||||
# ]
|
||||
# end
|
||||
|
||||
it "displays a set of grouped bars for each presenter" do
|
||||
displayed_variance_columns = subject.css(".grouped-bar-column")
|
||||
expect(displayed_variance_columns.count).to eq 27
|
||||
|
||||
displayed_variance_rows = subject.css("[data-for-measure-id]")
|
||||
expect(displayed_variance_rows.first.attribute("data-for-measure-id").value).to eq "1A-I"
|
||||
|
||||
displayed_academic_years = subject.css("[data-for-academic-year]")
|
||||
expect(displayed_academic_years.count).to eq 0
|
||||
|
||||
displayed_variance_labels = subject.css("[data-grouped-bar-label]")
|
||||
|
||||
expect(displayed_variance_labels.count).to eq 39
|
||||
expect(displayed_variance_labels.first.inner_text).to include "American"
|
||||
expect(displayed_variance_labels.text).to include "Indian"
|
||||
expect(displayed_variance_labels.text).to include "Asian"
|
||||
expect(displayed_variance_labels.text).to include "Black"
|
||||
expect(displayed_variance_labels.text).to include "White"
|
||||
expect(displayed_variance_labels.text).to include "Hispanic"
|
||||
expect(displayed_variance_labels.text).to include "Middle"
|
||||
expect(displayed_variance_labels.text).to include "Eastern"
|
||||
expect(displayed_variance_labels.text).to include "Multiracial"
|
||||
expect(displayed_variance_labels.text).to include "Not"
|
||||
expect(displayed_variance_labels.text).to include "Listed"
|
||||
end
|
||||
|
||||
it "displays all measures for the first subcategory" do
|
||||
expect(rendered).to have_text "1A-I"
|
||||
expect(rendered).to have_text "1A-II"
|
||||
expect(rendered).to have_text "1A-III"
|
||||
end
|
||||
|
||||
it "displays user interface controls" do
|
||||
expect(subject).to have_text "Focus Area"
|
||||
expect(subject).to have_css "#select-category"
|
||||
expect(subject).to have_css "#select-subcategory"
|
||||
expect(subject).to have_css "##{academic_year.range}"
|
||||
end
|
||||
|
||||
it "displays disabled checkboxes for years that dont have data" do
|
||||
year_checkbox = subject.css("##{academic_year.range}").first
|
||||
expect(year_checkbox.name).to eq "input"
|
||||
expect(academic_year.range).to eq "2050-51"
|
||||
expect(year_checkbox).to have_attribute "disabled"
|
||||
end
|
||||
|
||||
it "displays a radio box selector for each type of data filter" do
|
||||
expect(subject).to have_css "#students-and-teachers"
|
||||
expect(subject).to have_css "#students-by-group"
|
||||
end
|
||||
|
||||
it "displays a checkbox for each race designation" do
|
||||
race_slugs = %w[race-american-indian-or-alaskan-native race-asian-or-pacific-islander race-black-or-african-american
|
||||
race-hispanic-or-latinx race-middle-eastern race-multiracial race-race-ethnicity-not-listed race-white-or-caucasian]
|
||||
race_slugs.each do |slug|
|
||||
expect(subject).to have_css("//input[@type='checkbox'][@id='#{slug}']")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
context "when presenters have a displayable score" do
|
||||
before do
|
||||
render
|
||||
end
|
||||
|
||||
context "when displaying a student and teacher graph" do
|
||||
end
|
||||
end
|
||||
end
|
||||
Loading…
Reference in new issue