Skip to content

Commit 8761037

Browse files
illusionalillusional
committed
Add commit with example data
1 parent ad50f88 commit 8761037

File tree

1 file changed

+88
-69
lines changed

1 file changed

+88
-69
lines changed

‎web/src/pages/billing/SeqrProportionalMapGraph.tsx

+88-69
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@ interface ISeqrProportionalMapGraphProps {
3232
start: string
3333
end: string
3434
}
35+
36+
interface IPropMapData {
37+
date: string
38+
[project: string]: number
39+
}
40+
3541
const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGraphProps> = ({
3642
start,
3743
end,
@@ -43,57 +49,57 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
4349
const [projectSelections, setProjectSelections] = React.useState<
4450
{ [key: string]: boolean } | undefined
4551
>()
46-
const [data, setData] = React.useState<any>()
52+
const [data, setData] = React.useState<IPropMapData[]>()
4753
// const [propMap, setPropMap] = React.useState<>()
4854

49-
// function updateProjects(projects: { [key: string]: boolean }) {
50-
// const updatedProjects = { ...(projectSelections || {}), ...projects }
51-
// setProjectSelections(updatedProjects)
52-
// loadPropMap(updatedProjects)
53-
// }
55+
function updateProjects(projects: { [key: string]: boolean }) {
56+
const updatedProjects = { ...(projectSelections || {}), ...projects }
57+
setProjectSelections(updatedProjects)
58+
loadPropMap(updatedProjects)
59+
}
5460

55-
// function loadPropMap(projects: { [key: string]: boolean } = {}) {
56-
// const projectsToSearch = Object.keys(projects).filter((project) => projects[project])
61+
function loadPropMap(projects: { [key: string]: boolean } = {}) {
62+
const projectsToSearch = Object.keys(projects).filter((project) => projects[project])
5763

58-
// const api = new AnalysisApi()
59-
// const defaultPropMap = projectsToSearch.reduce((prev, p) => ({ ...prev, [p]: 0 }), {})
60-
// api.getProportionateMap(sequencingType, projectsToSearch, start, end)
61-
// .then((summary) => {
62-
// setIsLoading(false)
64+
const api = new AnalysisApi()
65+
const defaultPropMap = projectsToSearch.reduce((prev, p) => ({ ...prev, [p]: 0 }), {})
66+
api.getProportionateMap(sequencingType, projectsToSearch, start, end)
67+
.then((summary) => {
68+
setIsLoading(false)
6369

64-
// const graphData = summary.data.map((obj: IProportionalDateModel) => ({
65-
// date: obj.date,
66-
// // ...defaultPropMap,
67-
// ...obj.projects.reduce(
68-
// (prev: { [project: string]: number }, projectObj) => ({
69-
// ...prev,
70-
// // in percentage, rounded to 2 decimal places
71-
// [projectObj.project]: _.round(projectObj.percentage * 100, 2),
72-
// }),
73-
// {}
74-
// ),
75-
// }))
76-
// const projectsToSee = new Set(projectsToSearch)
77-
// for (let index = 1; index < graphData.length; index++) {
78-
// const graphObj = graphData[index]
79-
// if (projectsToSearch.length == 0) continue
80-
// // make sure the entry BEFORE a project is visible,
81-
// // it's set to 0 to make the graph prettier
82-
// for (const project of projectsToSee) {
83-
// if (project in graphObj) {
84-
// projectsToSee.delete(project)
85-
// graphData[index - 1][project] = 0
86-
// }
87-
// if (projectsToSee.size == 0) break
88-
// }
89-
// }
90-
// setPropMap(graphData)
91-
// })
92-
// .catch((er) => {
93-
// setError(er.message)
94-
// setIsLoading(false)
95-
// })
96-
// }
70+
const graphData: IPropMapData[] = summary.data.map((obj: IProportionalDateModel) => ({
71+
date: obj.date,
72+
...defaultPropMap,
73+
...obj.projects.reduce(
74+
(prev: { [project: string]: number }, projectObj) => ({
75+
...prev,
76+
// in percentage, rounded to 2 decimal places
77+
[projectObj.project]: projectObj.percentage,
78+
}),
79+
{}
80+
),
81+
}))
82+
const projectsToSee = new Set(projectsToSearch)
83+
for (let index = 1; index < graphData.length; index++) {
84+
const graphObj = graphData[index]
85+
if (projectsToSearch.length == 0) continue
86+
// make sure the entry BEFORE a project is visible,
87+
// it's set to 0 to make the graph prettier
88+
for (const project of projectsToSee) {
89+
if (project in graphObj) {
90+
projectsToSee.delete(project)
91+
graphData[index - 1][project] = 0
92+
}
93+
if (projectsToSee.size == 0) break
94+
}
95+
}
96+
setData(graphData)
97+
})
98+
.catch((er) => {
99+
setError(er.message)
100+
setIsLoading(false)
101+
})
102+
}
97103

98104
function getSeqrProjects() {
99105
const api = new ProjectApi()
@@ -114,20 +120,36 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
114120
})
115121
}
116122

117-
React.useEffect(() => {
118-
getSeqrProjects()
119-
}, [])
123+
// TODO, uncomment later
124+
// React.useEffect(() => {
125+
// getSeqrProjects()
126+
// }, [])
127+
120128

121-
// This is where I'm getting the mock data - delete this and replace it with whatever you had above to pull in the real data
122-
// You can check the link to see the data format but basically each data point is a date and the values for all the different categories at that timepoint
123129
React.useEffect(() => {
124-
const getData = async () => {
125-
const d = await csv(
126-
'https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered_wide.csv'
127-
)
128-
setData(d)
129-
}
130-
getData()
130+
setProjectSelections(['project1', 'project2', 'project3'].reduce(
131+
(prev: { [project: string]: boolean }, project: string) => ({
132+
...prev,
133+
[project]: true,
134+
}), {}
135+
))
136+
137+
setData([{
138+
date: "2021-01-01",
139+
project1: 0.1,
140+
project2: 0.2,
141+
project3: 0.7,
142+
}, {
143+
date: "2021-01-02",
144+
project1: 0.2,
145+
project2: 0.3,
146+
project3: 0.5,
147+
}, {
148+
date: "2021-01-03",
149+
project1: 0.3,
150+
project2: 0.4,
151+
project3: 0.3,
152+
}])
131153
}, [])
132154

133155
if (!data) {
@@ -138,24 +160,22 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
138160
? _.sortBy(Object.keys(projectSelections).filter((project) => projectSelections[project]))
139161
: []
140162

163+
141164
// svg sizing info
142165
const margin = { top: 10, right: 30, bottom: 50, left: 60 }
143166
const width = 1000 - margin.left - margin.right
144167
const height = 1000 - margin.top - margin.bottom
145168
const id = '1'
146169

147-
// get heading of data (column names)
148-
const sumstat = data.columns.slice(1)
149-
150170
// d3 function that turns the data into stacked proportions
151-
const stackedData = stack().offset(stackOffsetExpand).keys(sumstat)(data)
171+
const stackedData = stack().offset(stackOffsetExpand).keys(selectedProjects)(data)
152172

153173
// function for generating the x Axis
154174
// domain refers to the min and max of the data (in this case earliest and latest dates)
155175
// range refers to the min and max pixel positions on the screen
156176
// basically it is a mapping of pixel positions to data values
157177
const xScale = scaleLinear()
158-
.domain(extent(data, (d) => d.year))
178+
.domain(extent(data, (d) => d.date)) // date is a string, will this take a date object?
159179
.range([0, width - margin.left - margin.right])
160180

161181
// function for generating the y Axis
@@ -164,11 +184,11 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
164184

165185
// function that assigns each category a colour
166186
// can fiddle with the schemeAccent parameter for different colour scales - see https://d3js.org/d3-scale-chromatic/categorical#schemeAccent
167-
const color = scaleOrdinal(schemeAccent).domain(sumstat)
187+
const color = scaleOrdinal(schemeAccent).domain(selectedProjects)
168188

169189
// function that takes the various stacked data info and generates an svg path element (magically)
170190
const areaGenerator = area()
171-
.x((d) => xScale(d.data.year))
191+
.x((d) => xScale(d.data.date))
172192
.y0((d) => yScale(d[0]))
173193
.y1((d) => yScale(d[1]))
174194

@@ -196,9 +216,8 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
196216
{xScale.ticks().map((tick) => (
197217
<g
198218
key={tick}
199-
transform={`translate(${xScale(tick)}, ${
200-
height - margin.top - margin.bottom
201-
})`}
219+
transform={`translate(${xScale(tick)}, ${height - margin.top - margin.bottom
220+
})`}
202221
>
203222
<text
204223
y={8}
@@ -248,7 +267,7 @@ const SeqrProportionalMapGraph: React.FunctionComponent<ISeqrProportionalMapGrap
248267
<path
249268
key={i}
250269
d={areaGenerator(area)}
251-
style={{ fill: color(sumstat[i]) }}
270+
style={{ fill: color(selectedProjects[i]) }}
252271
/>
253272
))}
254273
</g>

0 commit comments

Comments
 (0)