Skip to content

Commit c8a2297

Browse files
kev1n80kev1n80
authored
Merge pull request #85 from sandboxnu/29FinalizeFiltersFinishGpa
Center the drawer filters and add gpa range bar graph
2 parents d9a7d64 + ad5589a commit c8a2297

8 files changed

Lines changed: 226 additions & 97 deletions

File tree

‎pharmd-app/src/components/Basic/BarGraph.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
// -------------------------- IMPORTS --------------------------
2+
3+
// Function Imports
4+
import React, { useState } from "react";
5+
6+
// Style Imports
7+
import { blue } from "@material-ui/core/colors";
8+
import tw, { styled, css } from "twin.macro";
9+
import "./Temp.css";
10+
11+
// -------------------------- COMPONENT --------------------------
12+
13+
const Bar = ({ max, min, height, threshold }) => {
14+
const heightStr = `${height.toString()}px`;
15+
// this bar covers (from threshold[0] to threshold[1])
16+
let secondHeight;
17+
const withinThreshold = min < threshold[1] && max > threshold[0];
18+
let animate;
19+
20+
if (withinThreshold) {
21+
// the bar is within the range
22+
secondHeight = 0;
23+
animate = "";
24+
} else {
25+
secondHeight = height;
26+
animate = "bar";
27+
}
28+
29+
const secondHeightStr = `${secondHeight.toString()}px`;
30+
const topStr = `-${height.toString()}px`;
31+
return (
32+
<div tw="flex-1" css={{ height: heightStr, "margin-right": ".1rem" }}>
33+
<div tw="bg-primary h-full opacity-75 rounded-t-lg" />
34+
<div
35+
tw="bg-white relative rounded-t-lg w-full"
36+
css={{ height: secondHeightStr, top: topStr }}
37+
className={animate}
38+
>
39+
<div tw="bg-primary h-full opacity-25 rounded-t-lg w-full" />
40+
</div>
41+
</div>
42+
);
43+
};
44+
45+
const BarGraph = ({ value, barGraphData, css, ...props }) => {
46+
// bar graph data is an array, where each element is a bar
47+
48+
// get the max and the min from value an array of size 2
49+
let max;
50+
let min;
51+
if (value[0] > value[1]) {
52+
max = value[0];
53+
min = value[1];
54+
} else {
55+
max = value[1];
56+
min = value[0];
57+
}
58+
59+
const barGraphHeight = 60;
60+
61+
// get the biggest number in the array
62+
const biggestFrequency = Math.max(...barGraphData);
63+
64+
const interval = (1 / barGraphData.length) * 4;
65+
66+
// the biggest number bar will be the height of the bar graph
67+
// use this number to determine the height of the other bars
68+
// Ex: x's height = (x / biggest_num) * height of bar graph
69+
return (
70+
<div tw="flex flex-row items-end relative" css={css}>
71+
{barGraphData.map((frequency, index) => {
72+
// add height to div: height: heightRatio * height
73+
const height = (frequency / biggestFrequency) * barGraphHeight;
74+
75+
const threshold = [index * interval, (index + 1) * interval];
76+
return <Bar max={max} min={min} height={height} threshold={threshold} />;
77+
})}
78+
</div>
79+
);
80+
};
81+
82+
export default BarGraph;

‎pharmd-app/src/components/Basic/RangeSlider.js‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ const RangeSlider = props => {
3838
max,
3939
min,
4040
step,
41-
className,
4241
sliderClasses,
4342
value,
4443
setValue
@@ -62,31 +61,23 @@ const RangeSlider = props => {
6261
};
6362

6463
return (
65-
<div className={className}>
66-
<span>
67-
<h4>
68-
GPA Range <span>{`(${rangeValue[0]} - ${rangeValue[1]})`}</span>
69-
</h4>
70-
</span>
71-
72-
<Slider
73-
classes={{
74-
root: sliderClasses.root,
75-
rail: sliderClasses.rail,
76-
thumb: sliderClasses.thumb,
77-
track: sliderClasses.track
78-
}}
79-
value={rangeValue}
80-
onChange={handleChange}
81-
valueLabelDisplay="auto"
82-
aria-labelledby="range-slider"
83-
getAriaValueText={setValueText}
84-
disabled={disabled}
85-
min={min}
86-
max={max}
87-
step={step}
88-
/>
89-
</div>
64+
<Slider
65+
classes={{
66+
root: sliderClasses.root,
67+
rail: sliderClasses.rail,
68+
thumb: sliderClasses.thumb,
69+
track: sliderClasses.track
70+
}}
71+
value={rangeValue}
72+
onChange={handleChange}
73+
valueLabelDisplay="auto"
74+
aria-labelledby="range-slider"
75+
getAriaValueText={setValueText}
76+
disabled={disabled}
77+
min={min}
78+
max={max}
79+
step={step}
80+
/>
9081
);
9182
};
9283

‎pharmd-app/src/components/Basic/Temp.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.bar {
2+
animation: grow .25s cubic-bezier(0.42, 0, 1, 1);
3+
}
4+
5+
.car {
6+
animation: grow .25s linear reverse;
7+
}
8+
9+
@keyframes grow {
10+
0% {
11+
height: 0%;
12+
}
13+
100% {
14+
height: 100%;
15+
}
16+
}
17+
18+
@keyframes shrink {
19+
100% {
20+
height: 100%;
21+
}
22+
0% {
23+
height: 0%;
24+
}
25+
}

‎pharmd-app/src/components/Inputs/GpaSliderInput.js‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { withStyles } from "@material-ui/core/styles";
1717

1818
// Style Imports
1919
import { blue } from "@material-ui/core/colors";
20+
import BarGraph from "../Basic/BarGraph";
21+
import Slider from "@material-ui/core/Slider";
2022

2123
// -------------------------- STYLE --------------------------
2224

@@ -76,19 +78,37 @@ const GpaSliderInput = ({ classes, setFilter, value, setValue, ...props }) => {
7678
}
7779
};
7880

81+
// compute height difference between bar graph and slider
82+
// slider to top - (bar graph to top + height of bar graph)
83+
const top = 14;
84+
const topStr = top.toString() + "px";
85+
const css = { top: topStr };
86+
87+
// TODO: Remove temporary data and add real data from back end
88+
const frequencies = [1, 2, 2.25, 2.5, 1.75, 2.75, 2.25, 2, 2.5, 1.5];
89+
7990
return (
80-
<RangeSlider
81-
className={classes.rangeSlider}
82-
disabled={error}
83-
onChange={searchGpaRange}
84-
max={4}
85-
min={0}
86-
setValueText={valuetext}
87-
sliderClasses={classes}
88-
step={0.25}
89-
value={value}
90-
setValue={setValue}
91-
/>
91+
<div className={classes.rangeSlider}>
92+
<h4>
93+
GPA Range <span>{`(${value[0]} - ${value[1]})`}</span>
94+
</h4>
95+
<BarGraph
96+
css={css}
97+
value={value}
98+
barGraphData={frequencies}
99+
/>
100+
<RangeSlider
101+
disabled={error}
102+
onChange={searchGpaRange}
103+
max={4}
104+
min={0}
105+
setValueText={valuetext}
106+
sliderClasses={classes}
107+
step={0.25}
108+
value={value}
109+
setValue={setValue}
110+
/>
111+
</div>
92112
);
93113
};
94114

‎pharmd-app/src/components/Inputs/StatusCheckboxInput.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ const StatusCheckboxInput = ({
7171
[STUDENT_STATUS.LEAVE, "Leave"],
7272
[STUDENT_STATUS.DROP_BACK, "Drop Back"]
7373
];
74-
console.log(`Form control labels: ${formControlLabels}`);
7574

7675
if (checkedBoxes == null || setCheckedBoxes == null) {
7776
// Values were not given

‎pharmd-app/src/screens/student/StudentDrawer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useListController } from "react-admin";
55

66
// Component Imports
77
import DrawerMaterial from "@material-ui/core/Drawer";
8-
import tw, { styled } from "twin.macro";
98
import { useSelector } from "react-redux";
109
import ExpansionPanel from "../../components/Basic/ExpansionPanel";
1110
import NavItemSecondary from "../../components/Nav/NavItemSecondary";
@@ -16,6 +15,7 @@ import StudentDrawerFilter from "./StudentDrawerFilter";
1615
import StudentQuickView from "./StudentQuickView";
1716

1817
// Style Imports
18+
import tw, { styled } from "twin.macro";
1919

2020
/**
2121
* Description:

‎pharmd-app/src/screens/student/StudentDrawerFilter.js‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -79,63 +79,65 @@ export const StudentDrawerFilter = ({ filterValues, setFilters, ...props }) => {
7979
const [originCheckedLabels, setOriginCheckedLabels] = useState([]);
8080

8181
return (
82-
<Filter {...props}>
83-
<StudentDisplayFilters
84-
alwaysOn
85-
deleteFilter={deleteFilter}
86-
filterValues={filterValues}
87-
originCheckedLabels={originCheckedLabels}
88-
rangeValue={rangeValue}
89-
setAutocompleteInputValue={setAutocompleteInputValue}
90-
setAutocompleteValue={setAutocompleteValue}
91-
setFilter={setFilter}
92-
setOriginCheckedLabels={setOriginCheckedLabels}
93-
setRangeValue={setRangeValue}
94-
setStatusCheckedLabels={setStatusCheckedLabels}
95-
/>
96-
<StatusCheckboxInput
97-
alwaysOn
98-
checkedBoxes={statusCheckedLabels}
99-
className={classes.formControl}
100-
color="primary"
101-
deleteFilter={deleteFilter}
102-
label="Status"
103-
setCheckedBoxes={setStatusCheckedLabels}
104-
setFilter={setFilter}
105-
source="status"
106-
/>
107-
<GpaSliderInput
108-
alwaysOn
109-
deleteFilter={deleteFilter}
110-
label="GPA"
111-
setFilter={setFilter}
112-
source="gpa"
113-
value={rangeValue}
114-
setValue={setRangeValue}
115-
/>
116-
<CohortMultipleSelect
117-
alwaysOn
118-
className={classes.formControl}
119-
deleteFilter={deleteFilter}
120-
inputValue={autocompleteInputValue}
121-
label="Cohort"
122-
setFilter={setFilter}
123-
setInputValue={setAutocompleteInputValue}
124-
setValue={setAutocompleteValue}
125-
source="gradDate"
126-
value={autocompleteValue}
127-
/>
128-
<OriginCheckboxInput
129-
alwaysOn
130-
checkedBoxes={originCheckedLabels}
131-
className={classes.formControl}
132-
deleteFilter={deleteFilter}
133-
label="Origin"
134-
setCheckedBoxes={setOriginCheckedLabels}
135-
setFilter={setFilter}
136-
source="hasVisa"
137-
/>
138-
</Filter>
82+
<div tw="justify-center flex">
83+
<Filter {...props}>
84+
<StudentDisplayFilters
85+
alwaysOn
86+
deleteFilter={deleteFilter}
87+
filterValues={filterValues}
88+
originCheckedLabels={originCheckedLabels}
89+
rangeValue={rangeValue}
90+
setAutocompleteInputValue={setAutocompleteInputValue}
91+
setAutocompleteValue={setAutocompleteValue}
92+
setFilter={setFilter}
93+
setOriginCheckedLabels={setOriginCheckedLabels}
94+
setRangeValue={setRangeValue}
95+
setStatusCheckedLabels={setStatusCheckedLabels}
96+
/>
97+
<StatusCheckboxInput
98+
alwaysOn
99+
checkedBoxes={statusCheckedLabels}
100+
className={classes.formControl}
101+
color="primary"
102+
deleteFilter={deleteFilter}
103+
label="Status"
104+
setCheckedBoxes={setStatusCheckedLabels}
105+
setFilter={setFilter}
106+
source="status"
107+
/>
108+
<GpaSliderInput
109+
alwaysOn
110+
deleteFilter={deleteFilter}
111+
label="GPA"
112+
setFilter={setFilter}
113+
source="gpa"
114+
value={rangeValue}
115+
setValue={setRangeValue}
116+
/>
117+
<CohortMultipleSelect
118+
alwaysOn
119+
className={classes.formControl}
120+
deleteFilter={deleteFilter}
121+
inputValue={autocompleteInputValue}
122+
label="Cohort"
123+
setFilter={setFilter}
124+
setInputValue={setAutocompleteInputValue}
125+
setValue={setAutocompleteValue}
126+
source="gradDate"
127+
value={autocompleteValue}
128+
/>
129+
<OriginCheckboxInput
130+
alwaysOn
131+
checkedBoxes={originCheckedLabels}
132+
className={classes.formControl}
133+
deleteFilter={deleteFilter}
134+
label="Origin"
135+
setCheckedBoxes={setOriginCheckedLabels}
136+
setFilter={setFilter}
137+
source="hasVisa"
138+
/>
139+
</Filter>
140+
</div>
139141
);
140142
};
141143

‎pharmd-app/src/tailwind.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ module.exports = {
1919
"80%": "80%"
2020
},
2121
extend: {
22+
animation: {
23+
grow: "grow 2s linear",
24+
shrink: "grow 3s linear reverse"
25+
},
2226
backgroundColor: {
2327
primary: "var(--color-primary)"
2428
},
@@ -57,6 +61,12 @@ module.exports = {
5761
"12": "3rem",
5862
"10px": "10px"
5963
},
64+
keyframes: {
65+
grow: {
66+
"0%": { height: "0%" },
67+
"100%": { height: "100%" }
68+
}
69+
},
6070
lineHeight: {
6171
"60px": "60px"
6272
},

0 commit comments

Comments
 (0)