Skip to content

Commit

Permalink
chore: initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
chris-demartini committed Feb 8, 2021
0 parents commit 2383586
Show file tree
Hide file tree
Showing 378 changed files with 163,553 additions and 0 deletions.
15 changes: 15 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# http://editorconfig.org

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
39 changes: 39 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js
packages/visa-charts-demo/public/apidocs.json
packages/visa-charts-demo/public/mono-packages.json
packages/charts-react/src/mono-packages.json
packages/charts-react-hooks/src/mono-packages.json

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea/
visa-charts-lib/src/components.d.ts
*.d.ts

# react/angular binding auto-generated files
packages/charts-angular*/src/directives/
packages/charts-react*/src/components/

npm-debug.log*
yarn-debug.log*
yarn-error.log*
*-lock.json
*-debug.log
*yarn.lock
.yo-rc.json

dist/
www/
build/
.stencil/
coverage/

25 changes: 25 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
*.lock
**/node_modules/
**/public/
**/dist/
**/www/
**/.stencil/
**/*.lock
**/*.log
**/*.d.ts
**/*.config.js
**/*.editorconfig
**/*.gitignore
**/LICENSE
**/LICENSE HEADER
.prettierignore
*.log
**/*.png
**/*.jpg
**/*.ico
**/*.svg
**/*.prod
**/*.staging
**/build/
**/*.snap
**/*.env
14 changes: 14 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"printWidth": 120,
"singleQuote": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "none",
"bracketSpacing": true,
"insertPragma": false,
"jsxBracketSameLine": false,
"semi": true,
"requirePragma": false,
"proseWrap": "preserve",
"arrowParens": "avoid"
}
32 changes: 32 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "E2E Test Current File",
"cwd": "${workspaceFolder}",
"program": "${workspaceFolder}/node_modules/.bin/stencil",
"args": ["test", "--e2e", "${relativeFile}"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"skipFiles": ["${workspaceFolder}/node_modules/**/*.js", "<node_internals>/**/*.js"]
},
{
"type": "node",
"request": "launch",
"name": "Spec Test Current File",
"cwd": "${workspaceFolder}",
"port": 9229,
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect-brk"],
"program": "${workspaceFolder}/node_modules/.bin/stencil",
"args": ["test", "--spec", "--max-workers=1", "${relativeFile}"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"skipFiles": ["${workspaceFolder}/node_modules/**/*.js", "<node_internals>/**/*.js"]
}
]
}
70 changes: 70 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
# Contributing to Visa Chart Components

Thank you for being a part of the Visa Chart Components (VCC) community. Before contributing (whether opening an issue or a PR), please read this document in its entirety.

Whenever a ticket or PR is opened, we will do our best to get back to you and guide you through our contribution process. Below are a few guidelines that will help you along the way.

## Contents

- <a href="Reporting_Issues">Reporting Issues</a>
- <a href="Opening_an_Issue">Opening an Issue</a>
- <a href="Issue_Guidelines">Issue Guidelines</a>
- <a href="Contributing_Code">Contributing Code</a>
- <a href="Architecture_Philosophy">Architecture Philosophy</a>
- <a href="Branching_Structure">Branching Structure</a>
- <a href="Setup">Setup</a>
- <a href="Commit_Messages_and_Pull_Requests">Commit Messages and Pull Requests</a>

<hr>
<br>

## <a name="Reporting_Issues" href="Reporting_Issues">#</a> Reporting Issues

If you think you have found a bug or issue or have a feature request please start by making sure it hasn't already been reported, fixed, or implemented. You can search through existing issues and PRs to see if someone has reported one similar to yours.

### <a name="Opening_an_Issue" href="Opening_an_Issue">#</a> Opening an Issue

If you have identified a bug, issue, or feature request that has no existing PRs or tickets, create a new issue that briefly explains the problem, and provides a bit of background as to the circumstances that triggered it, and steps to reproduce it.

- For code issues please include:

- `@visa/charts` library version or specific component (`@visa/bar-chart`) version
- Browser and version
- A code example, link to a repo, gist or running site. This will help us repro and identify the issue.

- For visual or layout problems, using images or animated gifs can help explain your issue.

- For feature requests please include a link to any relevant examples, a screenshot, or even a sketch of your requested feature.

### <a name="Issue_Guidelines" href="Issue_Guidelines">#</a> Issue Guidelines

- Begin the title with '[ComponentName]' where appropriate, and use a succinct description. "doesn't work" doesn't help others find similar issues.
- Do not group multiple topics into one issue, but instead each should be its own issue.

<hr>
<br>

## <a name="Contributing_Code" href="Contributing_Code">#</a> Contributing Code

Before contributing code or opening a PR, please open a feature request or issue (see [above](#Reporting_Issues)). This will help us identify whether we have already addressed the feature or issue in an upcoming release and assess how the feature or fix fits into our release plan.

### <a name="Architecture_Philosophy" href="Architecture_Philosophy">#</a> Architecture Philosophy

VCC is a well organized **_Monorepo_** for simplicity!
The components are standard web components developed using Stencil can be reused directly in any web environment and/or framework. The development practices follows guardrails (_e.g. linting, testing etc._) to help maintain consistency and quality.

### <a name="Branching_Structure" href="Branching_Structure">#</a> Branching Structure

All stable releases are tagged on `master`. At any given time, `development` represents the latest development version of the library. Patches or hotfix releases are prepared on an independent branch. We will do our best to keep development branch in good shape, with tests passing at all times.

### <a name="Setup" href="Setup">#</a> Setup

1. Create an issue, if applicable, and then clone locally
1. Create a branch off `development`.
1. `yarn` or `npm install`
1. `yarn bootstrap` or `npm run bootstrap`
1. `yarn start` or `npm run start`

### <a name="Commit_Messages_and_Pull_Requests" href="Commit_Messages_and_Pull_Requests">#</a> Commit Messages and Pull Requests

This library needs to follow the [Conventional Commit specification](https://conventionalcommits.org/) with an addition of **Ticket/Issue Numbers**. Add your issue number to each commit message. Remember that your commit messages are going to be used in creating the `CHANGELOG.md` file, so let that thought guide you to create quality commit messages.
19 changes: 19 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
Copyright (c) Visa, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
7 changes: 7 additions & 0 deletions LICENSE HEADER
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/**
* Copyright (c) [YEARTOREPLACE] Visa, Inc.
*
* This source code is licensed under the MIT license
* https://github.com/visa/visa-chart-components/blob/master/LICENSE
*
**/
132 changes: 132 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
# Visa Chart Components

![Image showing three examples of Visa Chart Components for demonstration purposes only.](docs/vcc-components.png 'clustered bar chart component')

**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](LICENSE).

<hr>

### 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, leveraging [Stencil.js](https://stenciljs.com/) and can be reused directly in many web environments and/or frameworks.

#### Bundles

- [@visa/charts](packages/charts) (web components)
- [@visa/charts-react](packages/charts-react) (react)
- [@visa/charts-angular](packages/charts-angular) (angular)

#### Components with `Ready` status

- [@visa/bar-chart](packages/bar-chart)
- [@visa/clustered-bar-chart](packages/clustered-bar-chart)
- [@visa/stacked-bar-chart](packages/stacked-bar-chart)
- [@visa/line-chart](packages/line-chart)
- [@visa/pie-chart](packages/pie-chart)
- [@visa/scatter-plot](packages/scatter-plot)
- [@visa/heat-map](packages/heat-map)
- [@visa/circle-packing](packages/circle-packing)
- [@visa/parallel-plot](packages/parallel-plot)
- [@visa/dumbbell-plot](packages/dumbbell-plot)
- [@visa/world-map](packages/world-map)
- [@visa/visa-charts-data-table](packages/data-table)

#### Our utilities can also be leveraged directly

- [@visa/visa-charts-utils](packages/utils)
- [@visa/visa-charts-utils-dev](packages/utils-dev)

<hr>

### 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 dev --i` to install the monorepo
- run `yarn dev --b` to build the packages across the monorepo

<br>

##### 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.

<br>

##### Running unit tests on a component

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:

`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>`

We use [vscode](https://code.visualstudio.com/) as our development environment, you can also leverage the built in debugging capability in this tool to evaluate the unit tests themselves.

<br>

##### 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.

<hr>

#### Credits

You can find license information for all dependencies included in our build [here](packages/utils/src/utils/license.ts). Below is a list of key dependencies.

- [d3.js](https://d3js.org/)
- [stencil.js](https://stenciljs.com/)
- [d3-svg-annotation](https://d3-annotation.susielu.com/)
- [numeral.js](http://numeraljs.com/)
- [node-uuid](https://github.com/uuidjs/uuid)
- [ally.js](https://allyjs.io/)

This project was/is built with tireless efforts from:

- Chris DeMartini ([@visa](https://github.com/chris-demartini) / [personal](https://github.com/demartsc))
- Frank Elavsky ([@visa](https://github.com/frank-elavsky) / [personal](https://github.com/frankelavsky))
- Jaime Tanner ([@visa](https://github.com/jaime-tanner) / [personal](https://github.com/tannerjaime))
- Basavaraj Kabbure ([@visa](https://github.com/basav-kabbure) / [personal](https://github.com/basavarajk))
- Lilach Manheim ([personal](https://github.com/lmanheim))
- Tica Lin ([personal](https://github.com/ticahere))
- Akhil Gupta ([personal](https://github.com/akhil9tiet))
21 changes: 21 additions & 0 deletions commitlint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Copyright (c) 2020 Visa, Inc.
*
* This source code is licensed under the MIT license
* https://github.com/visa/visa-chart-components/blob/master/LICENSE
*
**/
const config = require('@commitlint/config-conventional');

module.exports = {extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
...config.rules['type-enum'][2],
'wip'
]
]
}
};
Binary file added docs/vcc-components.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 2383586

Please sign in to comment.