# Graphicus (Charts Library)

![Graphicus](https://fishesofaustralia.net.au/Images/Image/ChoerodonGraphicusJER.jpg)

> The Graphic Tuskfish (Choerodon graphicus) is found in the Western Pacific between Australia and New
> Caledonia. Their preferred habitat is over rubble and sandy bottoms of lagoons and seaward reefs.
> Very shy!
>
> They have been seen using rocks and coral heads as anvils to break open bivalves to obtain food.

## Before you start

We use a number of packages in private repositories. To support these you'll need to add two
environment variables to your shell config (e.g. `.bashrc`, `.zshrc`, `.bash_profile`):

```sh
# Fishbrain package registry tokens
export FISHBRAIN_PACKAGE_REGISTRY_TOKEN=XXXXX
export FONT_AWESOME_PACKAGE_REGISTRY_TOKEN=XXXXX

```

For `FISHBRAIN_PACKAGE_REGISTRY_TOKEN` the token can be generated by creating
a [personal access token in your Github account](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line#creating-a-token).
Make sure to provide `repo`, `write:packages` and `read:packages` scopes for your token. Copy your token and `Enable SSO`.
The token can now be used as the value for `FISHBRAIN_PACKAGE_REGISTRY_TOKEN`.

## Getting started

Runs `yarn start` to run the app in the development mode. This will start a Storybook instance
which you can use for development.

Run tests with `yarn test` and linting with `yarn lint`.

There is a live version of Graphicus Storybook (develop branch) available at [http://graphicus.surge.sh/](http://graphicus.surge.sh/).

## Adding a new component

In order to enable individual bundling of components you will need to use a specific format for new components.
Create a directory `src/NewComponent` with a file named `index.tsx`. Your component should be exported from
this file. You also need to specify the component in three files: `src/index.tsx`, `config/rollup.config.module.js` and `config/rollup-shared.js` (in the array `EXPORTED_COMPONENTS`).

## Releasing

Run `yarn release` to go through the release process. If sucessful, this will result in a new version
of Graphicus being published to NPM.

You will need to create a file `.env.deploy` and add a GITHUB_TOKEN to allow the release script to
run. The token will need to have "repo" access; no "admin" or other scopes.

## Usage

Individual components can be imported like so: `import { Weather } from 'graphicus-charts/dist/Weather`.
Styles can be applied with `import styles from 'graphicus-charts/dist/browser/styles.css'` (currently only needed for the Calendar component).

A single package for use inline in the browser is also available at `./dist/browser/index.js`