{"id":34854245,"url":"https://github.com/jonrh/pickaxe-assignment","last_synced_at":"2026-05-25T04:33:51.684Z","repository":{"id":49485352,"uuid":"233407056","full_name":"jonrh/pickaxe-assignment","owner":"jonrh","description":"Take home technical challenge for Pickaxe Foundry ","archived":false,"fork":false,"pushed_at":"2021-06-16T18:23:42.000Z","size":3523,"stargazers_count":0,"open_issues_count":12,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-02-27T19:38:37.607Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/jonrh.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}},"created_at":"2020-01-12T14:41:25.000Z","updated_at":"2021-07-10T10:52:33.000Z","dependencies_parsed_at":"2022-08-24T21:02:20.281Z","dependency_job_id":null,"html_url":"https://github.com/jonrh/pickaxe-assignment","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/jonrh/pickaxe-assignment","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonrh%2Fpickaxe-assignment","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonrh%2Fpickaxe-assignment/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonrh%2Fpickaxe-assignment/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonrh%2Fpickaxe-assignment/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonrh","download_url":"https://codeload.github.com/jonrh/pickaxe-assignment/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonrh%2Fpickaxe-assignment/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33461087,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T02:24:28.008Z","status":"ssl_error","status_checked_at":"2026-05-25T02:23:23.339Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-12-25T19:58:12.055Z","updated_at":"2026-05-25T04:33:51.678Z","avatar_url":"https://github.com/jonrh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pickaxe Foundry Take Home Assignment\n\nThis is a take home assignment for the role of web developer / front end engineer at [Pickaxe Foundry](https://pickaxe.ai). The source is tracked in the GitHub repository [jonrh/pickaxe-assignment](https://github.com/jonrh/pickaxe-assignment).\n\n**Author**: Jón Rúnar Helgason  \n**Date**: 12. Jan 2020  \n\nThe assignment took me about 7 hours excluding breaks. The first 2 hours were spent on getting set up and implementing the table. Next I decided to try out the charting library [recharts](http://recharts.org/). It is one of the charting solution used by Pickaxe. I had never used it before so wanted to give it a go and learn something new. After additonal 2 hours I started running into issues with *recharts* (see notes below) and decided to go instead for [Highcharts](https://www.highcharts.com/), something I was more familiar with. It then took me about additional 3 hours to implement unit tests, data transformations and the line chart.\n\nIt was a fun assignment which I enjoyed. Plenty of stuff was learned and re-learned. In retrospect going for TypeScript might have been too much for a time limited assignment like this. It would have made more sense had I already been familiar with the types used by React and Highcharts.\n\n## How it looks\n[Here is a demo video](demo_video.mp4).  \nBelow is a screenshot:\n\n![](demo_screenshot.png)\n\n\n## How to run\n### In browser at Codesandbox.io\nThe latest state of this repository is available at [https://codesandbox.io/s/github/jonrh/pickaxe-assignment]()\n\n### Locally\nThis is a [Create React App](https://create-react-app.dev/) project. Assuming [Node](https://nodejs.org/) \u0026 [yarn](https://yarnpkg.com/) (or [npm](https://www.npmjs.com/)) is installed, run the following in the project directory on the command line:\n\n```\nyarn install\nyarn start\n```\n\nOpen a browser at the URL [http://localhost:3000/](http://localhost:3000/)\n\n## Notes\n\n+ I cheated and didn't use codesandbox.io to develop. Instead I created a Git repository and developed locally with my preffered IDE, [WebStorm](https://www.jetbrains.com/webstorm/).\n\n+ The line chart is implemented in [Highcharts](https://www.highcharts.com/). [react-bootstrap](https://react-bootstrap.github.io/) is used to handle responsiveness and the look and feel of the table.\n\n+ When doing data transformations I assume only one element in the `dimensions` and `metrics` arrays. It's not very generic but for the scope of this assignment I valued it as acceptable given the time constraints.\n\n+ Originally I attempted to use *recharts* for the graph. It was the first time I had used it. It looked pretty nice and seemed pretty powerful once you get into the groove of it. The problem I ran into was I couldn't find a built-in way to do a datetime X-axis. Reading the documentation it is supposed to be possible but I couldn't get it to work. I knew Pickaxe was using *recharts* so I looked into the source maps of dashboard.pickaxe.ai and saw some custom utilities that implemented it. After seeing that I abandoned ship and went for Highcharts instead as I knew this was automatically handled which was very beneficial given the time constraints.\n\n+ I originally wrote the `PickaxeChart` component in TypeScript. However I changed over to JavaScript because I ran into an type mismatch of the series data object with Highcharts. I love TypeScript types but didn't really have the time to wrestle the types.\n\n+ Before starting the project I deliberated trying out [data-forge-ts](https://github.com/data-forge/data-forge-ts) to transform the data. It looked like a promising candidate but since the assignment was time constrained I didn't want to risk a getting stuck.\n\n## Development notes\n\n### Highcharts with React\nThere seem to be two ways to use Highcharts with React these days. \n\n* Community wrapper, started in 2015  \n  https://github.com/kirjs/react-highcharts\n\n* Official React wrapper, started in 2017, maintained by a Highcharts partner  \n  https://github.com/highcharts/highcharts-react\n  \nBoth projects seemed to be well maintained. The community one was older and had more GitHub stars. Decided to go with the Official one but for no particular reason really.  \n\nIt has been a while since I worked with Highcharts so I used [this](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/spline-irregular-time/) Highcharts example to re-familiarise myself with the options available and the API.\n\n\n### Recharts resources\n* GitHub repository  \n  https://github.com/recharts/recharts\n\n* Examplse of a LineChart  \n  https://github.com/recharts/recharts/blob/master/demo/component/LineChart.js\n\n* XAxis docs  \n  http://recharts.org/en-US/api/XAxis\n\n## Assignment description\n\nHere is a task I'd like you to do by the end of Monday.\n\n- Given the following sandbox https://codesandbox.io/s/chart-table-esiyb - please create a fork \n- Parse/Format data.json in a way that it can be displayed as a chart and as a table (examples below)\n- The data contains values for Views for three Regions (Canada, US and Unknown)\n\nNotes:\n\n- don't worry about styling \n- you can use any library you want to create the chart and table\n- the tooltip is displayed for each line not for all lines (only the line you click shows its value for that specific point)\n- the chart and table are responsive \n\nExpected results:\n\n### Line Chart (three lines for each region)\n![alt text](expected_chart.png \"Expected chart\")\n\n### Table (four columns)\n\nDate | Metric | Region | Value  \nJan1 | Views  | ca               | 123  \nJan2 | Views  | us               | 123  \nJan3 | Views  | unknown    | 123  \n...  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonrh%2Fpickaxe-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonrh%2Fpickaxe-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonrh%2Fpickaxe-assignment/lists"}