{"id":13906324,"url":"https://github.com/cfpb/cfpb-chart-builder","last_synced_at":"2025-04-09T20:15:11.440Z","repository":{"id":42363677,"uuid":"71154059","full_name":"cfpb/cfpb-chart-builder","owner":"cfpb","description":"Charts for the Consumer Financial Protection Bureau","archived":false,"fork":false,"pushed_at":"2024-03-26T18:17:09.000Z","size":26110,"stargazers_count":12,"open_issues_count":8,"forks_count":8,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-03-23T22:11:23.890Z","etag":null,"topics":["chart","data","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cfpb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"COPYING.txt","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":"2016-10-17T15:39:24.000Z","updated_at":"2024-03-26T15:46:46.000Z","dependencies_parsed_at":"2024-11-25T22:30:40.129Z","dependency_job_id":null,"html_url":"https://github.com/cfpb/cfpb-chart-builder","commit_stats":{"total_commits":550,"total_committers":14,"mean_commits":"39.285714285714285","dds":0.7036363636363636,"last_synced_commit":"b904d6a5d02269b05629ca2833829eac2077a411"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfpb%2Fcfpb-chart-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfpb%2Fcfpb-chart-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfpb%2Fcfpb-chart-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cfpb%2Fcfpb-chart-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cfpb","download_url":"https://codeload.github.com/cfpb/cfpb-chart-builder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247761140,"owners_count":20991545,"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":["chart","data","visualization"],"created_at":"2024-08-06T23:01:33.543Z","updated_at":"2025-04-09T20:15:11.415Z","avatar_url":"https://github.com/cfpb.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n# CFPB Chart Builder [![Build Status](https://travis-ci.org/cfpb/cfpb-chart-builder.svg?branch=main)](https://travis-ci.org/cfpb/cfpb-chart-builder) [![codecov](https://codecov.io/gh/cfpb/cfpb-chart-builder/branch/main/graph/badge.svg)](https://codecov.io/gh/cfpb/cfpb-chart-builder) [![Sauce Test Status](https://saucelabs.com/browser-matrix/cct-sauce.svg)](https://saucelabs.com/u/cct-sauce)\n\nCharts for the [Consumer Financial Protection Bureau](https://cfpb.github.io/).\n\n## Demo\n\nhttps://cfpb.github.io/cfpb-chart-builder/\n\n## Installation\n\nAdd a `div` with a class of `cfpb-chart` and the following data attributes to your page:\n\n```\n\u003cdiv class=\"cfpb-chart\"\n     data-chart-type=\"line\"\n     data-chart-title=\"Number of Originations (in millions)\"\n     data-chart-y-axis-label=\"Volume of Originations (in billons)\"\n     data-chart-description=\"Auto loan originations decreased in 2016.\"\n     data-chart-color=\"green\"\n     data-chart-metadata=\"Number of Loans\"\n     data-chart-source=\"consumer-credit-trends/auto-loans.csv\"\u003e\n     Auto loan originations decreased in 2016.\n\u003c/div\u003e\n```\n\nAdd the library to your page:\n\n```\n\u003cscript type=\"text/javascript\" src=\"dist/cfpb-chart-builder.js\"\u003e\u003c/script\u003e\n```\n\nIt'll generate a chart for you:\n\n![Screenshot](screenshot.png)\n\nYou can also manually initialize a chart by providing a target element.\nInstall the library with `npm install cfpb-chart-builder` and then:\n\n```js\nconst ccb = require( 'cfpb-chart-builder' );\n\nconst chart = ccb.createChart({\n  el: document.getElementById('my-chart-div'),\n  source: 'http://mywebsite.com/api/data.json',\n  type: 'line',\n  color: 'green'\n});\n\n// Charts can be updated and redrawn\nchart.update({\n  source: 'http://mywebsite.com/api/some-other-data.json',\n});\n\n```\n\n## API\n\n### `createChart( options )`\n\nCreate a CFPB chart.\nConfig options can be passed as an argument to `createChart` or as a data attribute on\nan element with a class of `cfpb-chart` (see above).\n\n**options.el**: `Element`\n\nRequired. Reference to the DOM element in which to render the chart.\n\n**options.type**: `String`\n\nRequired. Type of chart to render. Options: `line`, `line-comparison`, `bar` or `tile_map`.\n\n**options.source**: `String`\n\nRequired. Location of data (JSON) to download and add to chart series.\nCan be relative or absolute URL.\nIf relative, the value of `window.CFPB_CHART_DATA_SOURCE_BASE` will be prepended to it.\n\nMultiple data sources can be provided by separating them with semicolons.\nE.g. `mortgage/national.json;mortgage/nyc.json`.\n\n**options.title**: `String`\n\nOptional. Title of the chart.\n\n**options.color**: `String`\n\nOptional. Chart's color scheme.\nOptions: `blue`, `green`, `teal`, `navy`, `purple`, `neutral`, `gold`.\nIf omitted, the chart color will be black.\n\n**options.metadata**: `String|Object`\n\nOptional. Arbitrary metadata for your chart.\nFor example, `bar` charts currently require a group key (e.g. `Number of Loans`) to filter data.\n\n**options.yAxisLabel**: `String`\n\nOptional. Hardcoded y-axis label for the chart.\n\n**options.tooltipFormatter**: `Function`\n\nOptional. Function that returns HTML to format the chart's tooltip.\nSee Highcharts' [tooltip.formatter](http://api.highcharts.com/highmaps/tooltip.formatter).\n\n**options.pointDescriptionFormatter**: `Function`\n\nOptional. Formatter function to use instead of the default for point descriptions.\nSee Highcharts' [accessibility.pointDescriptionFormatter](http://api.highcharts.com/highmaps/accessibility.pointDescriptionFormatter).\n\n**options.seriesDescriptionFormatter**: `Function`\n\nOptional. Formatter function to use instead of the default for series descriptions.\nSee Highcharts' [accessibility.seriesDescriptionFormatter](http://api.highcharts.com/highmaps/accessibility.seriesDescriptionFormatter).\n\n**options.screenReaderSectionFormatter**: `Function`\n\nOptional. A formatter function to create the HTML contents of the hidden screen\nreader information region. See Highcharts' [accessibility.screenReaderSectionFormatter](http://api.highcharts.com/highmaps/accessibility.screenReaderSectionFormatter).\n\n### `chart.update( options )`\n\nUpdate a CFPB chart.\nProvide any of the above options and the chart will be redrawn with those new settings.\n\n## Contributing\n\nWe welcome your feedback and contributions. See the\n[contribution guidelines](https://github.com/cfpb/open-source-project-template/blob/main/CONTRIBUTING.md)\nfor more details.\n\n### Install locally\n\n1. Install [Node.js 8](http://nodejs.org) however you'd like.\n2. Install [Gulp](http://gulpjs.com): `npm install -g gulp`\n3. Install the dependencies and compile the project with: `./setup.sh`\n\n  __NOTE:__ To re-install and rebuild all the site’s assets run\n  `./setup.sh` again. See the [usage](#development-usage) section on updating all the\n  project dependencies.\n\n### Development usage\n\nEach time you fetch from the upstream repository (this repo), run `./setup.sh`.\nThis setup script will remove and re-install the project dependencies and\nrebuild the site's JavaScript and CSS assets.\n\nTo run the site on a local server,\nrun `gulp watch` from the project root.\nRunning in this manner will also watch for changes in the source code\nand automatically update the running site.\n\n#### Development with cfgov-refresh\n\nWhen running the site locally, you can temporarily link changes you are making to the code with the [cfgov-refresh](https://github.com/cfpb/cfgov-refresh/) project.\n\n1. In the cfpb-chart-builder directory, run:\n   ```\n   npm link\n   ```\n1. In the cfgov-refresh directory:\n   ```\n   ./setup.sh\n   npm link cfpb-chart-builder\n   gulp build\n   ./runserver.sh\n   ```\n1. When you're done and want to bring back the published package:\n   ```\n   npm unlink cfpb-chart-builder\n   yarn add cfpb-chart-builder\n   gulp build\n   ```\n\n### Publish a release\n\n1. After merging all PRs needed for release, update the version in `package.json` using [semantic versioning](https://semver.org). This command will also tag and commit the updated version:\n   ```\n   # change patch to minor or major as needed\n   npm version patch\n   ```\n1. Push the new version and tag to Github:\n   ```\n   git push upstream main --tags\n   ```\n1. Create a new release description on Github at https://github.com/cfpb/cfpb-chart-builder/releases/new using your new tag.\n1. Publish to npm:\n   ```\n   npm publish\n   ```\n\n\n## Testing\n\n`npm test` will run unit and browser tests.\n\nSauce Labs is used to test the charts in IE 10.\n_(Note: This is not working correctly as of 1/24/19.)_\nAn [Open Sauce](https://saucelabs.com/open-source) account has been created for this repo.\nIts credentials can be found at https://GHE/gist/contolini/504ea71f6a19c74090c7a150aff60421.\nAdd the credentials locally by doing:\n\n1. `cp test/config.json.example test/config.json`\n1. Add valid Sauce Labs credentials to `test/config.json` (see above gist).\n\nThe browser tests will take several minutes to run.\nThe test script simply loads `http://localhost:8089/` in IE VMs and reports any `window` errors.\n\n## Getting help\n\nUse the issue tracker to follow the development conversation.\nIf you find a bug not listed in the issue tracker, please file a bug report.\n\n## Getting involved\n\nWe welcome your feedback and contributions. See the\n[contribution guidelines](https://github.com/cfpb/open-source-project-template/blob/main/CONTRIBUTING.md)\nfor more details.\n\nAdditionally, you may want to consider\n[contributing to the Capital Framework](https://cfpb.github.io/capital-framework/contributing/),\nwhich is the front-end pattern library used in this project.\n\n----\n\n## Open source licensing info\n1. [TERMS](TERMS.md)\n2. [LICENSE](LICENSE)\n3. [CFPB Source Code Policy](https://github.com/cfpb/source-code-policy/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfpb%2Fcfpb-chart-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcfpb%2Fcfpb-chart-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfpb%2Fcfpb-chart-builder/lists"}