[];
}
diff --git a/src/components/tree/tree.component.html b/src/components/tree/tree.component.html
new file mode 100644
index 0000000..0efd0ba
--- /dev/null
+++ b/src/components/tree/tree.component.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+ {{ node.label }}
+
+
+
+
+
+
+
+
diff --git a/src/components/tree/tree.component.scss b/src/components/tree/tree.component.scss
new file mode 100644
index 0000000..0a917f8
--- /dev/null
+++ b/src/components/tree/tree.component.scss
@@ -0,0 +1,56 @@
+.branch {
+ margin-left: 20px;
+ overflow: hidden;
+}
+
+.treenode {
+ color: #333;
+ margin: 0;
+ white-space: nowrap;
+ display: flex;
+ margin-right: 2px;
+}
+
+.treenode:hover {
+ background-color: #edf8fa;
+}
+
+.icon {
+ display: inline-block;
+ width: 16px;
+ text-align: center;
+}
+
+.fill {
+ flex: 1;
+}
+
+.clickable {
+ cursor: pointer;
+}
+
+.disabled {
+ color: dimgray;
+ opacity: 0.5;
+}
+
+.right {
+ float: right;
+}
+
+.ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.treenode:hover > .action {
+ visibility: visible;
+ width: auto;
+}
+
+.action {
+ visibility: hidden;
+ width: 0px;
+ padding-left: 2px;
+}
diff --git a/src/components/tree/tree.component.spec.ts b/src/components/tree/tree.component.spec.ts
new file mode 100644
index 0000000..898a58e
--- /dev/null
+++ b/src/components/tree/tree.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TreeComponent } from './tree.component';
+
+describe('TreeComponent', () => {
+ let component: TreeComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [TreeComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(TreeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
new file mode 100644
index 0000000..425afb3
--- /dev/null
+++ b/src/components/tree/tree.component.ts
@@ -0,0 +1,40 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TreeNode } from '../../models/tree-node';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
+import { Action } from '../../models/action';
+
+@Component({
+ selector: 'fbi-tree',
+ standalone: true,
+ imports: [CommonModule, FontAwesomeModule],
+ templateUrl: './tree.component.html',
+ styleUrl: './tree.component.scss',
+})
+export class TreeComponent {
+ @Input() node!: TreeNode;
+ @Output() actionClick = new EventEmitter<{
+ action: Action;
+ node: TreeNode;
+ }>();
+
+ faCaretDown = faCaretDown;
+ faCaretRight = faCaretRight;
+
+ toggle(event: MouseEvent): void {
+ if (!this.node.leaf) {
+ event.stopPropagation();
+ this.node.expanded = !this.node.expanded;
+ }
+ }
+
+ passActionClick(event: { action: Action; node: TreeNode }): void {
+ this.actionClick.emit(event);
+ }
+
+ onActionClick(event: MouseEvent, action: Action): void {
+ event.stopPropagation();
+ this.actionClick.emit({ action: action, node: this.node });
+ }
+}
diff --git a/src/models/action.ts b/src/models/action.ts
new file mode 100644
index 0000000..f3f5d89
--- /dev/null
+++ b/src/models/action.ts
@@ -0,0 +1,13 @@
+import { faDumbbell, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+export class Action {
+ label: string;
+ icon: IconDefinition;
+ data: any;
+
+ constructor(data: Partial) {
+ this.label = data?.label ?? '';
+ this.icon = data?.icon ?? faDumbbell;
+ this.data = data?.data;
+ }
+}
diff --git a/src/components/table/header.ts b/src/models/header.ts
similarity index 100%
rename from src/components/table/header.ts
rename to src/models/header.ts
diff --git a/src/models/page.ts b/src/models/page.ts
new file mode 100644
index 0000000..ee9ec06
--- /dev/null
+++ b/src/models/page.ts
@@ -0,0 +1,13 @@
+export class Page {
+ start: number;
+ limit: number;
+
+ constructor(data: Partial) {
+ this.start = data?.start ?? 1;
+ this.limit = data?.limit ?? 20;
+ }
+
+ toString(): string {
+ return `(${this.start}:${this.limit})`;
+ }
+}
diff --git a/src/models/query.ts b/src/models/query.ts
new file mode 100644
index 0000000..309bf94
--- /dev/null
+++ b/src/models/query.ts
@@ -0,0 +1,23 @@
+import { Page } from './page';
+
+export class Query {
+ fields: string[];
+ filter: string[];
+ page: Page;
+
+ constructor(data: Partial) {
+ this.fields = data?.fields ?? [];
+ this.filter = data?.filter ?? [];
+ this.page = new Page(data?.page ?? {});
+ }
+
+ isValid(): boolean {
+ return true;
+ }
+
+ toString(): string {
+ const fields = (this.fields ?? []).join(', ');
+ const filters = '';
+ return `${fields}${filters}`;
+ }
+}
diff --git a/src/models/tree-node.ts b/src/models/tree-node.ts
new file mode 100644
index 0000000..c427f61
--- /dev/null
+++ b/src/models/tree-node.ts
@@ -0,0 +1,38 @@
+import { Action } from './action';
+
+export class TreeNode {
+ label: string;
+ data: any;
+ children: TreeNode[];
+ leaf: boolean;
+ expanded: boolean;
+ hidden: boolean;
+ disabled: boolean;
+ selected: boolean;
+ actions: Action[];
+
+ index: number;
+ isFirst: boolean;
+ isLast: boolean;
+
+ constructor(data: Partial) {
+ this.label = data?.label ?? '';
+ this.data = data?.data ?? null;
+ this.children = (data?.children ?? []).map(
+ (i: Partial, index: number) =>
+ new TreeNode({ ...i, ...{ index: index } })
+ );
+ this.leaf = data?.leaf ?? this.children.length === 0;
+ this.expanded = data?.expanded ?? false;
+ this.hidden = data?.hidden ?? false;
+ this.disabled = data?.disabled ?? false;
+ this.selected = data?.selected ?? false;
+ this.actions = (data?.actions ?? []).map(
+ (i: Partial) => new Action(i)
+ );
+
+ this.index = data?.index ?? 0;
+ this.isFirst = data?.isFirst ?? false;
+ this.isLast = data?.isLast ?? false;
+ }
+}
diff --git a/src/services/data.service.ts b/src/services/data.service.ts
index ed39c6b..f915bfe 100644
--- a/src/services/data.service.ts
+++ b/src/services/data.service.ts
@@ -8,33 +8,38 @@ import { Milestone } from '../enums/milestone';
@Injectable({ providedIn: 'root' })
export class DataService {
private _data: Record[] = [];
- private data = new ReplaySubject[]>();
- readonly Data = this.data.asObservable();
+ private data = new ReplaySubject[]>(1);
+ readonly Data$ = this.data.asObservable();
+ readonly Data = () => this._data;
private _counties = new Map();
- private counties = new ReplaySubject();
- readonly Counties = this.counties.asObservable();
+ private counties = new ReplaySubject(1);
+ readonly Counties$ = this.counties.asObservable();
+ readonly Counties = () => this._counties;
private _schools = new Map();
- private schools = new ReplaySubject();
- readonly Schools = this.schools.asObservable();
+ private schools = new ReplaySubject(1);
+ readonly Schools$ = this.schools.asObservable();
+ readonly Schools = () => this._schools;
private _years = Array(2023 - 2015 + 1)
.fill(0)
- .map((_, index) => 2015 + index)
- .filter((y) => y !== 2020);
- private years = new ReplaySubject();
- readonly Years = this.years.asObservable();
+ .map((_, index) => 2015 + index);
+ private years = new ReplaySubject(1);
+ readonly Years$ = this.years.asObservable();
+ readonly Years = () => this._years;
private _grades = Array(8 - 3 + 1)
.fill(0)
.map((_, index) => 3 + index);
- private grades = new ReplaySubject();
- readonly Grades = this.grades.asObservable();
+ private grades = new ReplaySubject(1);
+ readonly Grades$ = this.grades.asObservable();
+ readonly Grades = () => this._grades;
private _cohorts = new Map();
- private cohorts = new ReplaySubject();
- readonly Cohorts = this.cohorts.asObservable();
+ private cohorts = new ReplaySubject(1);
+ readonly Cohorts$ = this.cohorts.asObservable();
+ readonly Cohorts = () => this._cohorts;
constructor() {
this.load();
@@ -44,7 +49,7 @@ export class DataService {
let count = this._years.length * this._grades.length;
this._years.forEach((year: number) => {
this._grades.forEach((grade: number) => {
- Papa.parse(`assets/data/${year}-${grade}.csv`, {
+ Papa.parse(`assets/data/${year === 2020 ? 2019 : year}-${grade}.csv`, {
download: true,
header: false,
complete: (results: ParseResult>) => {
@@ -68,36 +73,37 @@ export class DataService {
if (isNaN(code)) return;
const ms = {} as Record;
- // const ms = new Milestone({});
ms[Milestone.Year] = year;
ms[Milestone.Grade] = grade;
ms[Milestone.Cohort] = cohort;
ms[Milestone.County] = fs(Csv.County_Code, record);
ms[Milestone.School] = fs(Csv.School_Code, record);
- ms[Milestone.ELACount] = fn(Csv.ELA_Count, record);
- ms[Milestone.ELAMean] = fn(Csv.ELA_Mean, record);
- ms[Milestone.ELA0] = fn(Csv.ELA_L0, record);
- ms[Milestone.ELA1] = fn(Csv.ELA_L1, record);
- ms[Milestone.ELA2] = fn(Csv.ELA_L2, record);
- ms[Milestone.ELA3] = fn(Csv.ELA_L3, record);
- ms[Milestone.MathCount] = fn(Csv.Math_Count, record);
- ms[Milestone.MathMean] = fn(Csv.Math_Mean, record);
- ms[Milestone.Math0] = fn(Csv.Math_L0, record);
- ms[Milestone.Math1] = fn(Csv.Math_L1, record);
- ms[Milestone.Math2] = fn(Csv.Math_L2, record);
- ms[Milestone.Math3] = fn(Csv.Math_L3, record);
- ms[Milestone.SciCount] = fn(Csv.Science_Count, record);
- ms[Milestone.SciMean] = fn(Csv.Science_Mean, record);
- ms[Milestone.Sci0] = fn(Csv.Science_L0, record);
- ms[Milestone.Sci1] = fn(Csv.Science_L1, record);
- ms[Milestone.Sci2] = fn(Csv.Science_L2, record);
- ms[Milestone.Sci3] = fn(Csv.Science_L3, record);
- ms[Milestone.SocCount] = fn(Csv.Social_Count, record);
- ms[Milestone.SocMean] = fn(Csv.Social_Mean, record);
- ms[Milestone.Soc0] = fn(Csv.Social_L0, record);
- ms[Milestone.Soc1] = fn(Csv.Social_L1, record);
- ms[Milestone.Soc2] = fn(Csv.Social_L2, record);
- ms[Milestone.Soc3] = fn(Csv.Social_L3, record);
+ if (year !== 2020) {
+ ms[Milestone.ELACount] = fn(Csv.ELA_Count, record);
+ ms[Milestone.ELAMean] = fn(Csv.ELA_Mean, record);
+ ms[Milestone.ELA0] = fn(Csv.ELA_L0, record);
+ ms[Milestone.ELA1] = fn(Csv.ELA_L1, record);
+ ms[Milestone.ELA2] = fn(Csv.ELA_L2, record);
+ ms[Milestone.ELA3] = fn(Csv.ELA_L3, record);
+ ms[Milestone.MathCount] = fn(Csv.Math_Count, record);
+ ms[Milestone.MathMean] = fn(Csv.Math_Mean, record);
+ ms[Milestone.Math0] = fn(Csv.Math_L0, record);
+ ms[Milestone.Math1] = fn(Csv.Math_L1, record);
+ ms[Milestone.Math2] = fn(Csv.Math_L2, record);
+ ms[Milestone.Math3] = fn(Csv.Math_L3, record);
+ ms[Milestone.SciCount] = fn(Csv.Science_Count, record);
+ ms[Milestone.SciMean] = fn(Csv.Science_Mean, record);
+ ms[Milestone.Sci0] = fn(Csv.Science_L0, record);
+ ms[Milestone.Sci1] = fn(Csv.Science_L1, record);
+ ms[Milestone.Sci2] = fn(Csv.Science_L2, record);
+ ms[Milestone.Sci3] = fn(Csv.Science_L3, record);
+ ms[Milestone.SocCount] = fn(Csv.Social_Count, record);
+ ms[Milestone.SocMean] = fn(Csv.Social_Mean, record);
+ ms[Milestone.Soc0] = fn(Csv.Social_L0, record);
+ ms[Milestone.Soc1] = fn(Csv.Social_L1, record);
+ ms[Milestone.Soc2] = fn(Csv.Social_L2, record);
+ ms[Milestone.Soc3] = fn(Csv.Social_L3, record);
+ }
data.push(ms);
const county = fs(Csv.County_Code, record);
@@ -108,21 +114,24 @@ export class DataService {
);
});
- [
- { sort: Milestone.ELAMean, rank: Milestone.ELARank },
- { sort: Milestone.MathMean, rank: Milestone.MathRank },
- { sort: Milestone.SciMean, rank: Milestone.SciRank },
- { sort: Milestone.SocMean, rank: Milestone.SocRank },
- ].forEach((m) => {
- data
- .sort(
- (a: Record, b: Record) =>
- +a[m.sort] - b[m.sort]
- )
- .forEach(
- (a: Record, index: number) => (a[m.rank] = index)
- );
- });
+ if (year !== 2020) {
+ [
+ { sort: Milestone.ELAMean, rank: Milestone.ELARank },
+ { sort: Milestone.MathMean, rank: Milestone.MathRank },
+ { sort: Milestone.SciMean, rank: Milestone.SciRank },
+ { sort: Milestone.SocMean, rank: Milestone.SocRank },
+ ].forEach((m) => {
+ data
+ .sort(
+ (a: Record, b: Record) =>
+ +a[m.sort] - b[m.sort]
+ )
+ .forEach(
+ (a: Record, index: number) =>
+ (a[m.rank] = index)
+ );
+ });
+ }
this._data.push(...data);
diff --git a/src/services/execute.service.ts b/src/services/execute.service.ts
new file mode 100644
index 0000000..d0c8df4
--- /dev/null
+++ b/src/services/execute.service.ts
@@ -0,0 +1,81 @@
+import { Injectable } from '@angular/core';
+import { DataService } from './data.service';
+import { Query } from '../models/query';
+import { Observable, of, map, take } from 'rxjs';
+import { Header } from '../models/header';
+import { MetaService } from './meta.service';
+
+@Injectable({ providedIn: 'root' })
+export class ExecuteService {
+ constructor(
+ private dataService: DataService,
+ private metaService: MetaService
+ ) {}
+
+ headers(query: Query): Observable {
+ if (!query?.isValid()) return of([]);
+
+ const fields = query.fields;
+ return this.metaService.Flat.pipe(
+ map((items: Header[]) =>
+ items
+ .filter((item: Header) => fields.includes(item.source))
+ .sort(
+ (a: Header, b: Header) =>
+ fields.indexOf(a.source) - fields.indexOf(b.source)
+ )
+ ),
+ take(1)
+ );
+ }
+
+ data(query: Query): Observable[]> {
+ if (!query?.isValid()) return of([]);
+
+ const fields = query.fields;
+
+ return this.dataService.Data$.pipe(
+ // apply filter
+ map((data: Record[]) => {
+ const filter = query.filter;
+ return data.filter((i: Record) => {
+ // apply filter to i to determine if it should be returned
+ return true;
+ });
+ }),
+ // apply fields
+ map((data: Record[]) =>
+ data.map((i: Record) => {
+ const r = {} as Record;
+ fields.forEach((field: string) => (r[field] = i[field]));
+ return r;
+ })
+ ),
+ // make the data unique and apply paging
+ map((data: Record[]) => {
+ let i = 0;
+ const result: Record[] = [];
+ const page = query.page;
+
+ data.some((d: Record) => {
+ const idx = result.findIndex((r: Record) =>
+ fields
+ .map((field: string) => d[field] === r[field])
+ .reduce((acc, cur) => acc && cur, true)
+ );
+
+ // if this element has not been seen before, add it to the results we care about.
+ if (idx < 0) {
+ result.push(d);
+ ++i;
+ }
+ return i >= page.start + page.limit;
+ });
+
+ return result.slice(page.start, page.start + page.limit);
+ }),
+ // force it to close
+ take(1)
+ );
+ }
+}
diff --git a/src/services/meta.service.ts b/src/services/meta.service.ts
new file mode 100644
index 0000000..c59894c
--- /dev/null
+++ b/src/services/meta.service.ts
@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core';
+import { Milestone } from '../enums/milestone';
+import { map, ReplaySubject } from 'rxjs';
+import { TreeNode } from '../models/tree-node';
+import { Header } from '../models/header';
+
+@Injectable({ providedIn: 'root' })
+export class MetaService {
+ private data = [
+ {
+ label: 'School',
+ data: 'node.school',
+ children: [
+ { data: Milestone.County, label: 'County' },
+ { data: Milestone.School, label: 'Name' },
+ ],
+ },
+ {
+ label: 'Class',
+ data: 'node.class',
+ children: [
+ { data: Milestone.Cohort, label: 'Cohort' },
+ { data: Milestone.Year, label: 'Year' },
+ { data: Milestone.Grade, label: 'Grade' },
+ ],
+ },
+ {
+ label: 'English Language Arts',
+ data: 'node.ela',
+ children: [
+ { data: Milestone.ELACount, label: 'Count' },
+ { data: Milestone.ELAMean, label: 'Mean' },
+ { data: Milestone.ELARank, label: 'Rank' },
+ { data: Milestone.ELA0, label: 'Beginning Learner %' },
+ { data: Milestone.ELA1, label: 'Developing Learner %' },
+ { data: Milestone.ELA2, label: 'Proficient Learner %' },
+ { data: Milestone.ELA3, label: 'Advanced Learner %' },
+ ],
+ },
+ {
+ label: 'Mathematics',
+ data: 'node.math',
+ children: [
+ { data: Milestone.MathCount, label: 'Count' },
+ { data: Milestone.MathMean, label: 'Mean' },
+ { data: Milestone.MathRank, label: 'Rank' },
+ { data: Milestone.Math0, label: 'Beginning Learner %' },
+ { data: Milestone.Math1, label: 'Developing Learner %' },
+ { data: Milestone.Math2, label: 'Proficient Learner %' },
+ { data: Milestone.Math3, label: 'Advanced Learner %' },
+ ],
+ },
+ {
+ label: 'Science',
+ data: 'node.sci',
+ children: [
+ { data: Milestone.SciCount, label: 'Count' },
+ { data: Milestone.SciMean, label: 'Mean' },
+ { data: Milestone.SciRank, label: 'Rank' },
+ { data: Milestone.Sci0, label: 'Beginning Learner %' },
+ { data: Milestone.Sci1, label: 'Developing Learner %' },
+ { data: Milestone.Sci2, label: 'Proficient Learner %' },
+ { data: Milestone.Sci3, label: 'Advanced Learner %' },
+ ],
+ },
+ {
+ label: 'Social Studies',
+ data: 'node.soc',
+ children: [
+ { data: Milestone.SocCount, label: 'Count' },
+ { data: Milestone.SocMean, label: 'Mean' },
+ { data: Milestone.SocRank, label: 'Rank' },
+ { data: Milestone.Soc0, label: 'Beginning Learner %' },
+ { data: Milestone.Soc1, label: 'Developing Learner %' },
+ { data: Milestone.Soc2, label: 'Proficient Learner %' },
+ { data: Milestone.Soc3, label: 'Advanced Learner %' },
+ ],
+ },
+ ];
+ private subject = new ReplaySubject[]>(1);
+ readonly Data = this.subject.asObservable();
+ readonly Flat = this.subject.asObservable().pipe(
+ map((data: Partial[]) => {
+ const recurse = (path: string, item: Partial): Header[] => {
+ const result = [];
+ const children = item?.children ?? [];
+ if (children.length > 0) {
+ children.forEach((child: Partial) => {
+ result.push(...recurse(`${path}${item.label}`, child));
+ });
+ } else {
+ result.push(
+ new Header({ source: item.data, label: `${path} - ${item.label}` })
+ );
+ }
+ return result;
+ };
+
+ const result: Header[] = [];
+ data.forEach((item: Partial) =>
+ result.push(...recurse('', item))
+ );
+ return result;
+ })
+ );
+
+ constructor() {
+ this.subject.next(this.data as Partial[]);
+ }
+}
diff --git a/src/services/query.service.ts b/src/services/query.service.ts
new file mode 100644
index 0000000..f138376
--- /dev/null
+++ b/src/services/query.service.ts
@@ -0,0 +1,24 @@
+import { BehaviorSubject } from 'rxjs';
+import { Query } from '../models/query';
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class QueryService {
+ private querySubject = new BehaviorSubject(new Query({}));
+ readonly Query = this.querySubject.asObservable();
+
+ constructor() {}
+
+ add(field: string, index: number = -1): void {
+ const q = new Query(this.querySubject.value);
+ q.fields = q.fields.filter((f: string) => f !== field);
+ q.fields.splice(index < 0 ? q.fields.length : index, 0, field);
+ this.querySubject.next(q);
+ }
+
+ remove(field: string): void {
+ const q = new Query(this.querySubject.value);
+ q.fields = q.fields.filter((f: string) => f !== field);
+ this.querySubject.next(q);
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..578eda4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,5 @@
/* You can add global styles to this file, and also import other style files */
+body {
+ // margin: 0;
+ font-family: Arial, Helvetica, sans-serif;
+}