Cc-pac-dashboard NPM

README

What is this repository for?

CC custom packages to be used for v2-v3 integration.
v2 is using the CDN version of the packages.
v3 is using the npm version that hosted on the npm registry.

How do I get set up?

v3 For v3 sites it only needs to be installed from npm, like any normal npm packages. After installation each package follow the instruction to set it up.
v2 On this sites, that can be any basic html page, use the CDN version of the package. that are available on cdn.jsdelivr.net

ex. Here we can use modularized version to reduce code loading or using the all-in-one as on

// all-in-one

\<script src="https://cdn.jsdelivr.net/npm/cc-pac-dashboard@1.0.10/dist/cc-pac-dashboard.min.js">\<\/script>

// modularized

\<script src="https://cdn.jsdelivr.net/npm/cc-pac-dashboard@1.0.10/dist/columnWithDataChart.min.js">\<\/script>

<div id="bardatachart" style="width: 500px; height: 400px;">chart</div>
<script src="https://cdn.jsdelivr.net/npm/cc-pac-dashboard@1.0.10/dist/columnWithDataChart.min.js"></script>
<script>
    try {
        let api = "https://google.com"
        ccPacDashboard.columnWithDataChart('bardatachart', api);
    } catch (error) {
        console.log(error);
    }
</script>

Note: Better to use latest version for the url so each project would have the latest version of each package when it is deployed.

usage in other apps
- Install the page with npm
- Import where it is needed
```
import { basicBarChart } from 'cc-pac-dashboard';
```
- and use the valid snippet for example this

          useEffect(() => {
                // Call lineChart function here
                let api = "http://api.co.com/3.0/settings/list";
                basicBarChart('bar-chart-wrapper', api);

            }, []);
            ...
            <div id='bar-chart-wrapper'></div>

Contribution guidelines

Developing In the phase of developing we can use our local version to debug and fully test the changes.
- NPM
  - npm link By using the option you can test the package changes directly on your application. First you need to run npm link inside your package dir. Then in your application run npm link package-name@version. Then check for changes that must be synced.
- CDN
  - http-server This is node package that is useful for dev phase, as user can lunch it, so all package js will be available on a link like a live url. http://192.168.56.1:8081/cc-pac-dashboard/dist/basicBarChart.min.js. Need to run the http-server inside the root directory so it would be available as this.

Publish Package to NPM

After testing and verify changes, we can publish the package to the npm, so they would be available for every project. The cdn version used with @latest would load latest changes, but need to consider the cache system and optimize based on it. For the NPM packages also we need to use the @latest when installing them and after deployment need to update packages to the latest version, that can be done by npm update
Useful commands
- npm run build
  - Need to be run before publish to have the updated dist for CDN
- npm publish
  - To publish the latest version to NPM registry
versioning
- Minor updates npm version patch
  - e.g., from 1.2.3 to 1.3.0
- Major updates npm version major
  - e.g., from 1.2.3 to 2.0.0
- Patch updates npm version minor
  - e.g., from 1.2.3 to 1.2.4