diff --git a/app/assets/javascripts/school_administrator_dashboard/DashboardTestData.js b/app/assets/javascripts/school_administrator_dashboard/DashboardTestData.js index d3a59a685d..aca9192e6a 100644 --- a/app/assets/javascripts/school_administrator_dashboard/DashboardTestData.js +++ b/app/assets/javascripts/school_administrator_dashboard/DashboardTestData.js @@ -68,6 +68,15 @@ export function createStudents(nowMoment) { id: 1, absences: [testEvents.oneMonthAgo, testEvents.twoMonthsAgo, testEvents.threeMonthsAgo], tardies: [testEvents.oneMonthAgo, testEvents.twoMonthsAgo, testEvents.threeMonthsAgo], + discipline_incidents: [{ + id:23, + incident_code:"Assault", + created_at: nowMoment.clone().subtract(30, 'days').format(), + incident_location:"Playground", + incident_description:"Description", + occurred_at: nowMoment.clone().subtract(30, 'days').format(), + has_exact_time:true, + student_id:1}], events: 3, latest_note: { event_note_type_id: 300, diff --git a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.js b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.js index 9b838bd877..ae63473387 100644 --- a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.js +++ b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.js @@ -49,6 +49,13 @@ export default class SchoolDisciplineDashboard extends React.Component { this.memoize = memoizer(); } + //Remove scatter plot option when there are too many incidents to show patterns + componentDidMount() { + if (this.getIncidentsFromStudents(this.props.dashboardStudents).length > 500) { + this.setState({selectedChart: 'incident_location', scatterPlotAvailable: false}); + } + } + filterIncidents(disciplineIncidents, options = {}) { return this.memoize(['filteredIncidents', this.state, arguments], () => { if (!disciplineIncidents) return []; @@ -315,10 +322,10 @@ export default class SchoolDisciplineDashboard extends React.Component { render() { const {districtKey} = this.context; - const {timeRangeKey, selectedChart, grade, house, counselor} = this.state; + const {scatterPlotAvailable, timeRangeKey, selectedChart, grade, house, counselor} = this.state; const {school, dashboardStudents} = this.props; const chartOptions = [ - {value: 'scatter', label: 'Day & Time'}, + ... scatterPlotAvailable ? [{value: 'scatter', label: 'Day & Time'}] : [], {value: 'incident_location', label: 'Location'}, {value: 'time', label: 'Time'}, {value: 'homeroom_label', label: 'Classroom'}, @@ -481,6 +488,7 @@ const styles = { function initialState() { return { timeRangeKey: TIME_RANGE_45_DAYS_AGO, + scatterPlotAvailable: true, selectedChart: 'scatter', selectedIncidentCode: ALL, selectedCategory: null, diff --git a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.test.js b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.test.js index 2fe944f11f..f1590bf433 100644 --- a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.test.js +++ b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/SchoolDisciplineDashboard.test.js @@ -1,6 +1,5 @@ import React from 'react'; import {mount, shallow} from 'enzyme'; -import moment from 'moment'; import renderer from 'react-test-renderer'; import {toMomentFromTimestamp} from '../../helpers/toMoment'; import {withNowMoment, withNowContext} from '../../testing/NowContainer'; @@ -15,8 +14,12 @@ import SchoolDisciplineDashboard from './SchoolDisciplineDashboard'; jest.mock('react-virtualized'); // doesn't work in test without a real DOM +function setDate() { + return toMomentFromTimestamp('2018-09-22T17:03:06.123Z'); +} + function testContext(context = {}) { - const nowMoment = toMomentFromTimestamp('2018-09-22T17:03:06.123Z'); + const nowMoment = setDate(); return { districtKey: 'somerville', nowFn() { return nowMoment; }, @@ -24,11 +27,7 @@ function testContext(context = {}) { }; } -function testEl(moreProps = {}) { - const props = { - dashboardStudents: createStudents(moment.utc()), - ...moreProps - }; +function testEl(props = {}) { return ; } @@ -48,9 +47,35 @@ function renderShallow(props = {}) { return shallow(el, {context}); } +function create501Students() { + const now = setDate(); + let students = []; + for (let i=0; i < 501; i++) { + const student = { + first_name: 'Pierrot', + last_name: 'Zanni', + homeroom_label: 'Test 1', + grade: '4', + id: 1, + discipline_incidents: [{ + id:23, + incident_code:"Assault", + created_at: now.clone().subtract(30, 'days').format(), + incident_location:"Playground", + incident_description:"Description", + occurred_at: now.clone().subtract(30, 'days').format(), + has_exact_time:true, + student_id:1}], + events: 3 + }; + students.push(student); + } + return students; +} + it('displays house for SHS', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testHighSchool()}; + const props = {school: testHighSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectHouse').length > 0).toEqual(true); @@ -58,7 +83,7 @@ it('displays house for SHS', () => { it('does not display house for Healey', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectHouse').length > 0).toEqual(false); @@ -66,7 +91,7 @@ it('does not display house for Healey', () => { it('displays counselor for SHS', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testHighSchool()}; + const props = {school: testHighSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectCounselor').length > 0).toEqual(true); @@ -74,7 +99,7 @@ it('displays counselor for SHS', () => { it('does not display counselor for Healey', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectCounselor').length > 0).toEqual(false); @@ -82,7 +107,7 @@ it('does not display counselor for Healey', () => { it('displays grade for SHS', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testHighSchool()}; + const props = {school: testHighSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectGrade').length > 0).toEqual(true); @@ -90,7 +115,7 @@ it('displays grade for SHS', () => { it('displays grade for Healey', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectGrade').length > 0).toEqual(true); @@ -98,15 +123,24 @@ it('displays grade for Healey', () => { it('renders a scatter plot', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('DisciplineScatterPlot').length > 0).toEqual(true); }); +it('does not render a scatter plot when there are more than 500 incidents', () => { + const context = testContext({districtKey: 'somerville'}); + const props = {school: testSchool(), dashboardStudents: create501Students(setDate())}; + const el = testEl(props); + const dash = mount(elWrappedInContext(el, context)); + expect(dash.find('DisciplineScatterPlot').length === 0).toEqual(true); + expect(dash.find('DashboardBarChart').length > 0).toEqual(true); +}); + it('renders a student list', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('StudentsTable').length > 0).toEqual(true); @@ -114,14 +148,14 @@ it('renders a student list', () => { it('renders a date range selector', () => { const context = testContext({districtKey: 'somerville'}); - const props = {school: testSchool()}; + const props = {school: testSchool(), dashboardStudents: createStudents(setDate())}; const el = testEl(props); const dash = mount(elWrappedInContext(el, context)); expect(dash.find('SelectTimeRange').length > 0).toEqual(true); }); it('can render a bar chart', () => { - const dash = renderShallow({school: testSchool()}); + const dash = renderShallow({school: testSchool(), dashboardStudents: createStudents(setDate())}); dash.setState({selectedChart: 'grade'}); expect(dash.find('DashboardBarChart').length > 0).toEqual(true); }); @@ -130,7 +164,7 @@ function snapshotJson(districtKey) { return renderer.create( withNowContext('2018-09-22T17:03:06.123Z', - {pageSizeFrame(testEl({school: testSchool()}))} + {pageSizeFrame(testEl({school: testSchool(), dashboardStudents: createStudents(setDate())}))} )); } diff --git a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/__snapshots__/SchoolDisciplineDashboard.test.js.snap b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/__snapshots__/SchoolDisciplineDashboard.test.js.snap index 01ea95d05b..2feaded519 100644 --- a/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/__snapshots__/SchoolDisciplineDashboard.test.js.snap +++ b/app/assets/javascripts/school_administrator_dashboard/discipline_dashboard/__snapshots__/SchoolDisciplineDashboard.test.js.snap @@ -158,7 +158,7 @@ exports[`snapshots works for bedford 1`] = ` >
Last 45 days
- Total Incidents: 0 + Total Incidents: 1
@@ -490,7 +490,7 @@ exports[`snapshots works for bedford 1`] = ` >
Day & Time @@ -513,7 +513,7 @@ exports[`snapshots works for bedford 1`] = ` } >
Last 45 days
- Total Incidents: 0 + Total Incidents: 1
@@ -1078,7 +1078,7 @@ exports[`snapshots works for demo 1`] = ` >
Day & Time @@ -1101,7 +1101,7 @@ exports[`snapshots works for demo 1`] = ` } >
Last 45 days
- Total Incidents: 0 + Total Incidents: 1
@@ -1666,7 +1666,7 @@ exports[`snapshots works for new_bedford 1`] = ` >
Day & Time @@ -1689,7 +1689,7 @@ exports[`snapshots works for new_bedford 1`] = ` } >
Last 45 days
- Total Incidents: 0 + Total Incidents: 1
@@ -2254,7 +2254,7 @@ exports[`snapshots works for somerville 1`] = ` >
Day & Time @@ -2277,7 +2277,7 @@ exports[`snapshots works for somerville 1`] = ` } >