{"id":18300407,"url":"https://github.com/jpdevries/fewd-hw","last_synced_at":"2025-04-09T09:27:08.448Z","repository":{"id":140005111,"uuid":"98924215","full_name":"jpdevries/fewd-hw","owner":"jpdevries","description":null,"archived":false,"fork":false,"pushed_at":"2017-08-02T01:24:50.000Z","size":118,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-15T03:33:59.982Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jpdevries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-31T19:51:10.000Z","updated_at":"2017-08-02T01:10:51.000Z","dependencies_parsed_at":"2023-05-01T03:49:09.654Z","dependency_job_id":null,"html_url":"https://github.com/jpdevries/fewd-hw","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Ffewd-hw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Ffewd-hw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Ffewd-hw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpdevries%2Ffewd-hw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpdevries","download_url":"https://codeload.github.com/jpdevries/fewd-hw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248010833,"owners_count":21032968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T15:12:14.442Z","updated_at":"2025-04-09T09:27:08.425Z","avatar_url":"https://github.com/jpdevries.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Front End Programming Assignment\n\nThis is a coding assignment\u0026nbsp;submission.\n\n\u003e Implement any changes that you deem necessary, so that this chart could support rendering real\u0026ndash;time\u0026nbsp;data.\n\nFrom this I derived that the chart should support both the current \"month\" view as well as real\u0026ndash;time and current day\u0026nbsp;views.\n\n## Getting Started\n\n_Note: You will need to run the Node server as instructed below because the React app expects to be able to hit a REST API for the mock\u0026nbsp;data which is generated in\u0026nbsp;`server.js`._\n\n```bash\ncd ~/Desktop\ngit clone https://github.com/jpdevries/fewd-hw.git\ncd fewd-hw\nnpm install # install stuff for the mock server\ncd client # into create-react-app\nnpm install # install react dependencies\nnpm run build # build the react app (coffee break)\ncd ../ # back to the root\nnpm run start # launch the server\nopen http://localhost:3001 # here we go\n```\n\nRun the server on a custom `PORT` like\u0026nbsp;so:\n```bash\nPORT=3042 npm run serve\n```\n\n## Architectural Decisions\nI hooked `create-react-app` up to an Express Node server. The charts are done with `recharts` which is a React wrapper for\u0026nbsp;D3. I didn't include the rightmost yAxis (change in segment) because there didn't see to be any example data for it, but I did verify that two yAxes are possible with\u0026nbsp;`recharts`.\n\nA CSS Grid / flexbox layout is used to ensure the chart takes up as much space as it can. Since this layout utilizes modern CSS, the assignment is best viewed in\u0026nbsp;Chrome.\n\nThe fake data coming from the REST API isn't technically using delta updates, but the front end is architected using Redux so that it could seamlessly consume delta updates from an efficient\u0026nbsp;server.\n\n## Month View\nThe month view has a scrubber that allows you to zoom in on particular sets of the given\u0026nbsp;month.\n\n\u003cdetails open\u003e\n  \u003csummary\u003eGIF Preview\u003c/summary\u003e\n  \u003cimg src=\"http://j4p.us/0c2t05161G39/scrubber.gif\" /\u003e\n\u003c/details\u003e\n\n## Today View\nThe today view displays a sample point for each hour of the day. It reaches out periodically to the API to keep the data\u0026nbsp;fresh.\n\n\u003cdetails open\u003e\n  \u003csummary\u003eGIF Preview\u003c/summary\u003e\n  \u003cimg src=\"http://j4p.us/0R191l1j2M1T/today.gif\" /\u003e\n\u003c/details\u003e\n\n## Real\u0026ndash;time View\nThe real\u0026ndash;time view displays a sample point for every few seconds. It reaches out to the API every ten seconds or so to keep the data\u0026nbsp;fresh.\n\n_Note: If you open up the Developer Tools you should notice that every 10-15 seconds a request for fresh data is made_\n\n\u003cdetails open\u003e\n  \u003csummary\u003eGIF Preview\u003c/summary\u003e\n  \u003cimg src=\"http://j4p.us/0w1M2H3v321u/realtime.gif\" /\u003e\n\u003c/details\u003e\n\n## Accessible Components\nAbove the chart is located an accessible `\u003cfieldset\u003e` of radio inputs to change the view\u0026nbsp;mode.  \n\nEven if the design called for custom tabs, I would use an HTML\u0026ndash;first design process so that such customizations are progressively enhanced from semantic and accessible HTML. Specifically, I'd visually hide the inputs themselves with the `.visually-hidden` pattern and then use CSS to style the `\u003clabel\u003e` elements of the corresponding inputs as needed. Then, any user, sighted, low\u0026ndash;vision, non\u0026ndash;sighted, keyboard or mouse alike would all be able to change the view\u0026nbsp;mode!\n\n_Note: The month scrubber and SVG Graphic itself are not accessible. In a real world environment and budget depending I would make additional measures to ensure they are inclusively architected as\u0026nbsp;well. I'd also attempt to progressively enhance the chart even if it were just from a paragraph of descriptive text which describes the chart to non\u0026ndash;sighted users (and search\u0026nbsp;engines)._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Ffewd-hw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpdevries%2Ffewd-hw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpdevries%2Ffewd-hw/lists"}