Visa Chart Components

Visa Chart Components (VCC) is an accessibility focused, framework agnostic set of data experience design systems components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.

Visa Chart Components (VCC) is provided under the MIT license.

Installation Process:

To use VCC in your projects run yarn add @visa/charts, or you can also install a single component by running yarn add @visa/bar-chart. We recommend leveraging bundles if you are going to install three (3) or more specific components for your project.

While we do deliver React (@visa/charts-react) and Angular (@visa/charts-angular) bundles, VCC components are compiled to standard web components within (@visa/charts), leveraging Stencil.js and can be reused directly in many web environments and/or frameworks.

Bundles

• @visa/charts (web components)
• @visa/charts-react (react)
• @visa/charts-angular (angular)
• @visa/charts-R (R), visachartR function in R
• @visa/charts-python (Python), pyvisacharts package in Python
• @visa/charts-figma (Figma), Visa Chart Components plugin for Figma

Components with Ready status

• @visa/bar-chart
• @visa/clustered-bar-chart
• @visa/stacked-bar-chart
• @visa/line-chart
• @visa/pie-chart
• @visa/scatter-plot
• @visa/heat-map
• @visa/circle-packing
• @visa/parallel-plot
• @visa/dumbbell-plot
• @visa/world-map
• @visa/alluvial-diagram
• @visa/visa-charts-data-table
• @visa/keyboard-instructions

Our utilities can also be leveraged directly

• @visa/visa-charts-utils
• @visa/visa-charts-utils-dev

Development

VCC is built as a monorepo containing a set of packages. These packages include specific chart components (e.g., @visa/bar-chart), our utilities (e.g., @visa/visa-charts-utils) as well as component bundles (e.g., @visa/charts or @visa/charts-react).

Steps to get up and running for development

note: the initial install and build process can take some time.

• Clone the repo
• run yarn install
• run yarn dev --i to install the monorepo
• run yarn dev --b to build the packages across the monorepo
• You can also run yarn dev --bR to build & copy the @visa/charts bundle to our R wrapper.

Single component development

For development work on a single component, we launch local stencil applications, which allow for faster development iterations and features like hot reloading. To run a single component development environment run the below command. Note: these local/dev applications are not included in our builds.

yarn dev --ibsw=@visa/<component-name>

The switches in the command relate to:

• i = install the component
• b = build the component
• sw = start watching the component

You can run --ibsw, --bsw, or --sw if you need to. You can also build packages together (once installed) using commands like:

yarn build --scope=@visa/visa-charts-utils && yarn build --scope=@visa/bar-chart

This can helpful if you are making changes to dependencies of the chart component, for example, our utilities package.

Running unit tests

We have built extensive unit testing out for some of our components and are working towards propagating this across the rest. To run unit tests the command is:

• test all components at once: yarn dev --t
• test a specific component: yarn dev --test=@visa/<component-name>

Also, in some cases, component snapshots may need to be updated after changes have been implemented on components themselves (take caution when updating testing snapshots). In this situation, run the update snapshot command as follows:

yarn dev --updateSnapshot=@visa/<component-name>

Once you have finished running your tests you can leverage the below scripts to evaluate them:

• yarn combine-test-results - This script will combine all tests results across the monorepo, both coverage and test summary/failures.
• yarn compare-test-results - This script will do a snapshot test of your test results to the current snapshot.
• yarn update-test-results - This script will update the combined test snapshot, useful in situations when you have added more tests, cleaned up tests or enabled new components.

We use vscode as our development environment, you can also leverage the built in debugging capability in this tool to evaluate the unit tests themselves.

Running components through yarn audit / dependency check

We enable a repo wide scan using yarn audit to check for known dependency vulnerabilities. To run the audit command(s):

• all components: yarn dev --a=ALL
• OR, component specific: yarn dev --a=@visa/<component-name>

Once you have finished running your audit you can leverage the below scripts to evaluate the results:

• yarn combine-audit-results - This script will combine all audit results across the monorepo.
• yarn compare-audit-results - This script will do a snapshot test of your audit results to the current snapshot.
• yarn update-audit-results - This script will update the combined audit snapshot, useful in situations when you have added more dependencies, cleaned up dependencies or enabled new components.

Cleaning the repo

caution: this will require you to re-install the entire monorepo, which can take some time

To clean repo we have clean command with options

yarn dev --c=<options>

Here, <options> can be

ALL-- deletes all lock files, node_modules and build folders.

LOCK-- deletes only lock files.

BUILD-- deletes only build folders and files.

NODE-- deletes only node_modules folder across repo.

Credits

You can find license information for all dependencies included in our build here. Below is a list of key dependencies.

• d3.js
• stencil.js
• d3-svg-annotation
• numeral.js
• node-uuid
• vega-label
• storybook
• htmlwidgets
• widget-cookiecutter
• figma plugin api

This project was/is built with tireless efforts from:

• Chris DeMartini (@visa / personal)
• Stephanie Modica (@visa / personal)
• David Kutas (@visa)
• Lilach Manheim (personal)
• Jaime Tanner (personal)
• Frank Elavsky (personal)
• Tica Lin (personal)
• Basavaraj Kabbure (personal)
• Akhil Gupta (personal)