npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cfpb-chart-builder

v6.5.0

Published

Charts for the Consumer Financial Protection Bureau

Downloads

156

Readme

CFPB Chart Builder Build Status codecov Sauce Test Status

Charts for the Consumer Financial Protection Bureau.

Demo

https://cfpb.github.io/cfpb-chart-builder/

Installation

Add a div with a class of cfpb-chart and the following data attributes to your page:

<div class="cfpb-chart"
     data-chart-type="line"
     data-chart-title="Number of Originations (in millions)"
     data-chart-y-axis-label="Volume of Originations (in billons)"
     data-chart-description="Auto loan originations decreased in 2016."
     data-chart-color="green"
     data-chart-metadata="Number of Loans"
     data-chart-source="consumer-credit-trends/auto-loans.csv">
     Auto loan originations decreased in 2016.
</div>

Add the library to your page:

<script type="text/javascript" src="dist/cfpb-chart-builder.js"></script>

It'll generate a chart for you:

Screenshot

You can also manually initialize a chart by providing a target element. Install the library with npm install cfpb-chart-builder and then:

const ccb = require( 'cfpb-chart-builder' );

const chart = ccb.createChart({
  el: document.getElementById('my-chart-div'),
  source: 'http://mywebsite.com/api/data.json',
  type: 'line',
  color: 'green'
});

// Charts can be updated and redrawn
chart.update({
  source: 'http://mywebsite.com/api/some-other-data.json',
});

API

createChart( options )

Create a CFPB chart. Config options can be passed as an argument to createChart or as a data attribute on an element with a class of cfpb-chart (see above).

options.el: Element

Required. Reference to the DOM element in which to render the chart.

options.type: String

Required. Type of chart to render. Options: line, line-comparison, bar or tile_map.

options.source: String

Required. Location of data (JSON) to download and add to chart series. Can be relative or absolute URL. If relative, the value of window.CFPB_CHART_DATA_SOURCE_BASE will be prepended to it.

Multiple data sources can be provided by separating them with semicolons. E.g. mortgage/national.json;mortgage/nyc.json.

options.title: String

Optional. Title of the chart.

options.color: String

Optional. Chart's color scheme. Options: blue, green, teal, navy, purple, neutral, gold. If omitted, the chart color will be black.

options.metadata: String|Object

Optional. Arbitrary metadata for your chart. For example, bar charts currently require a group key (e.g. Number of Loans) to filter data.

options.yAxisLabel: String

Optional. Hardcoded y-axis label for the chart.

options.tooltipFormatter: Function

Optional. Function that returns HTML to format the chart's tooltip. See Highcharts' tooltip.formatter.

options.pointDescriptionFormatter: Function

Optional. Formatter function to use instead of the default for point descriptions. See Highcharts' accessibility.pointDescriptionFormatter.

options.seriesDescriptionFormatter: Function

Optional. Formatter function to use instead of the default for series descriptions. See Highcharts' accessibility.seriesDescriptionFormatter.

options.screenReaderSectionFormatter: Function

Optional. A formatter function to create the HTML contents of the hidden screen reader information region. See Highcharts' accessibility.screenReaderSectionFormatter.

chart.update( options )

Update a CFPB chart. Provide any of the above options and the chart will be redrawn with those new settings.

Contributing

We welcome your feedback and contributions. See the contribution guidelines for more details.

Install locally

  1. Install Node.js 8 however you'd like.
  2. Install Gulp: npm install -g gulp
  3. Install the dependencies and compile the project with: ./setup.sh

NOTE: To re-install and rebuild all the site’s assets run ./setup.sh again. See the usage section on updating all the project dependencies.

Development usage

Each time you fetch from the upstream repository (this repo), run ./setup.sh. This setup script will remove and re-install the project dependencies and rebuild the site's JavaScript and CSS assets.

To run the site on a local server, run gulp watch from the project root. Running in this manner will also watch for changes in the source code and automatically update the running site.

Development with cfgov-refresh

When running the site locally, you can temporarily link changes you are making to the code with the cfgov-refresh project.

  1. In the cfpb-chart-builder directory, run:
    npm link
  2. In the cfgov-refresh directory:
    ./setup.sh
    npm link cfpb-chart-builder
    gulp build
    ./runserver.sh
  3. When you're done and want to bring back the published package:
    npm unlink cfpb-chart-builder
    yarn add cfpb-chart-builder
    gulp build

Publish a release

  1. After merging all PRs needed for release, update the version in package.json using semantic versioning. This command will also tag and commit the updated version:
    # change patch to minor or major as needed
    npm version patch
  2. Push the new version and tag to Github:
    git push upstream main --tags
  3. Create a new release description on Github at https://github.com/cfpb/cfpb-chart-builder/releases/new using your new tag.
  4. Publish to npm:
    npm publish

Testing

npm test will run unit and browser tests.

Sauce Labs is used to test the charts in IE 10. (Note: This is not working correctly as of 1/24/19.) An Open Sauce account has been created for this repo. Its credentials can be found at https://GHE/gist/contolini/504ea71f6a19c74090c7a150aff60421. Add the credentials locally by doing:

  1. cp test/config.json.example test/config.json
  2. Add valid Sauce Labs credentials to test/config.json (see above gist).

The browser tests will take several minutes to run. The test script simply loads http://localhost:8089/ in IE VMs and reports any window errors.

Getting help

Use the issue tracker to follow the development conversation. If you find a bug not listed in the issue tracker, please file a bug report.

Getting involved

We welcome your feedback and contributions. See the contribution guidelines for more details.

Additionally, you may want to consider contributing to the Capital Framework, which is the front-end pattern library used in this project.


Open source licensing info

  1. TERMS
  2. LICENSE
  3. CFPB Source Code Policy