{"id":13989653,"url":"https://github.com/ezy/code-coverage-dashboard","last_synced_at":"2025-04-10T18:53:20.427Z","repository":{"id":83684299,"uuid":"145483655","full_name":"ezy/code-coverage-dashboard","owner":"ezy","description":"🚦A dashboard for displaying code coverage reports generated by Istanbul.js","archived":false,"fork":false,"pushed_at":"2018-08-23T01:17:13.000Z","size":298,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T16:41:15.326Z","etag":null,"topics":["code-coverage","coverage","coverage-report","d3js","dashboard","istanbuljs","react","reactjs"],"latest_commit_sha":null,"homepage":"","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/ezy.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":"2018-08-21T00:13:37.000Z","updated_at":"2022-01-25T12:39:16.000Z","dependencies_parsed_at":"2023-07-03T17:32:37.704Z","dependency_job_id":null,"html_url":"https://github.com/ezy/code-coverage-dashboard","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/ezy%2Fcode-coverage-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ezy%2Fcode-coverage-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ezy%2Fcode-coverage-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ezy%2Fcode-coverage-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ezy","download_url":"https://codeload.github.com/ezy/code-coverage-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248275220,"owners_count":21076550,"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":["code-coverage","coverage","coverage-report","d3js","dashboard","istanbuljs","react","reactjs"],"created_at":"2024-08-09T13:01:54.700Z","updated_at":"2025-04-10T18:53:20.402Z","avatar_url":"https://github.com/ezy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 🚦 Code Coverage Dashboard\n\nA simple dashboard for [Istanbul](https://github.com/gotwarlost/istanbul) code coverage reports designed to be deployed to Heroku. The app takes any `coverage-summary.json` input file hosted within a folder on github and displays the data in a set of easily configurable chart components. Works great for a dev team to see their code coverage improving over time.\n\n![Code cov dash](https://raw.githubusercontent.com/ezy/code-coverage-dashboard/master/public/code-cov-dash.png)\n\n## Table of Contents\n\n- [Quick start](#quick-start)\n- [Istanbul setup](#istanbul-setup)\n- [Configuring reports](#configuring-reports)\n- [Available scripts](#available-scripts)\n\n## Quick start\n\n- Setup [Istanbul](https://github.com/gotwarlost/istanbul) to export a `json-summary` report with datestamp.\n- Upload `coverage-summary-1534886771995.json` to a folder in the github repo you want to display.\n- Add the folder location of your `json-summary` report in .env `REACT_APP_DATA_DIR_URL`.\n- Build to Heroku.\n- The app will check hourly for a new file in `REACT_APP_DATA_DIR_URL`.\n- If the filename is different (eg. `coverage-summary-1534886791867.json`) the line chart will update.\n\n## Istanbul setup\n\nReports are generated from the `json-summary` report by Istanbul. There's an example `isantbul.yml` file in the project directory that includes report settings for `html` and `json-summary` reports. In order for your filename changes to be picked up you can timeStamp the `coverage-sumary.json` file by using the following script in your `package.json` file:\n\n```JSON\n{\n  \"scripts\": {\n    \"covdate\": \"mv coverage/coverage-summary.json coverage/coverage-summary-$(date +%Y%m%d%H%M).json\"\n  }\n}\n```\n\n## Configuring reports\n\nThere are three different report charts that are displayed: A dateTime based **line chart** displaying total statement coverage; a summary of total coverage values as **donut charts**; and a group of **stack charts** that display coverage for individual and grouped report strings.\n\n### Line chart\n\nThe line chart component is located at `src/components/LineChart.js`. It takes an array of values from `localStorage` and displays them as date (X axis) and value (Y axis) from the object input: `{value: 96.75, date: \"2018-08-21T04:13:07.414Z\"}`. All localStorage values are loaded in the `src/templates/App.js` file.\n\n### Donut chart\n\nThe donut chart is fixed and takes the JSON fetched from `coverage-summary.json` as `data` props. It's currently hard-coded to display the percentage of the report totals with the `selectName` property for the corresponding nested key in the `total` object.\n\neg. `\u003cDonutChart selectName=\"statements\" data={this.state.data} /\u003e`\n\n### Stack chart\n\nThe stack charts take the JSON fetched from `coverage-summary.json` as `data` props. They take a second property `fileSet` that can be specified as all or part of the object key strings in `coverage-summary.json`. The stack chart will display the average coverage for an keys that match the `fileSet` property.\n\neg. `\u003cStackChart fileSet=\"server/user\" data={this.state.data} /\u003e`\n\n## Available scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `yarn lint`\n\nRuns linting for the project and checks against rules in `.eslintrc.json`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezy%2Fcode-coverage-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fezy%2Fcode-coverage-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fezy%2Fcode-coverage-dashboard/lists"}