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.
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.
- @visa/charts (web components)
- @visa/charts-react (react)
- @visa/charts-angular (angular)
- @visa/charts-R (R),
visachartRfunction in R - @visa/charts-python (Python),
pyvisachartspackage in Python - @visa/charts-figma (Figma),
Visa Chart Componentsplugin for Figma
- @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
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).
note: the initial install and build process can take some time.
- Clone the repo
- run
yarn install - run
yarn dev --ito install the monorepo - run
yarn dev --bto build the packages across the monorepo - You can also run
yarn dev --bRto build & copy the @visa/charts bundle to our R wrapper.
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 componentb= build the componentsw= 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.
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.
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.
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.
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: