Add progress svg graph to website journey and track show page. #1181
Conversation
|
@kntsoriano, @iHiD told me that you have a React version on the journey page in PR. Not sure what the best merge plan is for this, please advise :) |
| function getRandomId() { | ||
| const currentId = randomIdRef.current | ||
| if (currentId !== null) { | ||
| return currentId | ||
| } | ||
| const newId = Math.floor(Math.random() * 10000) | ||
| randomIdRef.current = newId | ||
| return newId | ||
| } |
There was a problem hiding this comment.
generates a random number to append to the id of the gradient to prevent collision and the id being overridden by multiple graphs appearing on one page
| @@ -34,6 +34,7 @@ module.exports = { | |||
| files: ['*.ts', '*.tsx'], | |||
| rules: { | |||
| 'react/prop-types': 'off', | |||
| 'react/display-name': 'off', | |||
There was a problem hiding this comment.
Oh I meant to write a comment for that. Basically application.tsx is full of eslint errors because for the most part we are using arrow functions to define our components. Because of that we can't set a "display name" for debugging with dev tools. Since we aren't using that react feature consistently and it is hiding other errors from showing I turned it off
|
This is really great :) |
I'm going to merge this, then see if I can sort the other one :) |
|
Let's go! |
This is adding an SVG component which draws a graph representing a persons contributions as a graphed line over time.
The
<ProgressGraph />component takes 3 props:dataan array of numbers representing contributionswidththe width of the svg to drawheightthe height of the svg to drawThe height and width are for the svg canvas so that the lines can be computed properly without skewing. The other properties of the graph can be styled via css properties and custom-properties. eg.)
New component files:
app/javascript/components/progress-graph/ProgressGraph.tsxapp/javascript/components/progress-graph/svg-graph-util.tsapp/helpers/react_components/progress_graph.rbIt has been added to two pages:
app/css/pages/journey/overview.cssapp/views/journey/show.html.hamlapp/css/pages/track-show-joined.cssapp/views/tracks/show/joined/_summary_article.html.haml