Built with release 1 version

README.md

@@ -25,3 +25,52 @@ or a minified version generated by the CDN:
 For details of the API, view the [JSDoc API documentation](https://biologicalrecordscentre.github.io/brc-charts/docs/api/).
 
 There are also a number of [working examples](https://biologicalrecordscentre.github.io/brc-charts/docs/).
+
+## Notes for developers
+
+### Documentation
+The package uses JSDoc to produce the API documentation. JSDoc is not included in the package dependendies since developers normally install it globally in their development environment.
+
+### Typical build & publish workflow
+- `npm audit --omit=dev` (look for any important vulnerabilities)
+- `npm run lint`
+- `npm run docs` 
+- Update the version number in `package.json` 
+- `npm run build` (after package update so that correct version is printed to console by library) 
+- Update `docs/Readme` (if required, e.g. to link new examples) 
+- Git add any new files, e.g. `git add *`
+- Git commit all changes, e.g. `git commit -a`
+- Git tag \<version\>, e.g. `git tag 1.0.1`. Tag must match version number in package (to ensure that version can be used to target it in CDN) 
+- Git push origin \<version\>, e.g. `git push origin 1.0.1` (pushes the tag commit) 
+- `git push` (pushes to master branch) 
+- Run the following links to purge the jsdelivr CDN caches
+  - https://purge.jsdelivr.net/gh/biologicalrecordscentre/brc-charts@latest/dist/brcatlas.umd.js 
+  - https://purge.jsdelivr.net/gh/biologicalrecordscentre/brc-charts@latest/dist/brcatlas.umd.css 
+
+### Rollup
+Rollup is used to build the transpiled library javascript assets for this package. Rollup is often preferred over webpack or other bundling tools for packaging libraries. The following javascript assets are produced by this rollup configuration:
+
+- **brcatlas.umd.js**: this is the browser-friendly javascript for the Britain & Ireland atlas library which can be used from browsers (supports a couple of different export formats). 
+- **brcatlas.umd.min.js**: same as previous but minified.
+- **brcatlas.umd.min.js.map**: this is a javascript map file. It can be used alonside the minified file to help with debugging.
+- **brcatlas.umd.css**: consolidated CSS file containing all project CSS for the Britain & Ireland atlas library.
+- **brcatlas_e.umd.js**: this is the browser-friendly javascript for the European atlas library which can be used from browsers (supports a couple of different export formats). 
+- **brcatlas_e.umd.min.js**: same as previous but minified.
+- **brcatlas_e.umd.min.js.map**: this is a javascript map file. It can be used alonside the minified file to help with debugging.
+- **brcatlas_e.umd.css**: consolidated CSS file containing all project CSS for the European atlas library.
+
+The following rollup plugins are used in the build:
+- **@rollup/plugin-node-resolve**: this allows rollup to resolve references to node libraries (in node_modules).
+- **@rollup/plugin-commonjs**: this allows rollup to convert CommonJS modules to ES6.
+- **@rollup/plugin-babel**: this is what allows rollup to transpile ES6/7 code to ES5 (for the browser packaging). This plugin has dependencies on '@babel/core' and '@babel/preset-env' which are included in the project's node package.
+- **rollup-plugin-terser**: this is used to produce the minified file.
+- **rollup-plugin-css**: for rolling up CSS into a single file.
+- **rollup-plugin-json**: for importing package JSON.
+
+### Other files in project
+The following files are in the root folder: 
+
+- **_config.yml**: used by GitHub pages to configure github pages 
+- **.eslintrc.json**: configures ESLint. These some stuff in here that's necessary to get jest and eslint to play nicely together. 
+- **babel.config.js**: the configuration in here seems to necessary to get Jest to work properly with ES2015 modules. 
+- **rollup.config.js**: rollup configuration.

dist/brccharts.umd.css

@@ -40,63 +40,75 @@ svg {
 }
 
 
-
-.brc-chart-phen1 path.highlight.phen-path-line {
-    stroke: black;
-    stroke-width: 3;
+.brc-chart-phen2 rect.highlight {
+    /* fill: black; */
     opacity: 1;
 }
 
-.brc-chart-phen1 path.lowlight {
-    opacity:0.3;
-}
-
-.brc-chart-phen1 rect.lowlight {
-    opacity:0.3;
+.brc-chart-phen2 rect.lowlight {
+    opacity:0;
 }
 
-.brc-chart-phen1 {
+.brc-chart-phen2 {
     overflow: visible;
 }
 
-/* .brc-chart-phen1  */
-.brc-chart-phen1-top .brc-legend-item.lowlight {
+.brc-chart-phen2-top .brc-legend-item.lowlight {
     opacity:0.3;
 }
 
-/* .brc-chart-phen1  */
-.brc-chart-phen1-top .brc-legend-item-line.highlight {
+/* .brc-chart-phen2-top .brc-legend-item-rect.highlight {
     fill:black;
 }
-.brc-chart-phen2 rect.highlight {
-    /* fill: black; */
+
+.brc-chart-phen2-top .brc-legend-item-icon.highlight {
+    fill:black;
+} */
+
+#phen2-chart .mainChart {
+    overflow: visible;
+}
+.brc-chart-accum path {
+    fill: none;
+}
+
+.brc-chart-accum path.highlight {
+    stroke: black;
+    stroke-width: 3;
     opacity: 1;
 }
 
-.brc-chart-phen2 rect.lowlight {
-    opacity:0;
+.brc-chart-accum path.lowlight {
+    opacity:0.3;
 }
 
-.brc-chart-phen2 {
+.brc-chart-accum {
     overflow: visible;
 }
 
-.brc-chart-phen2-top .brc-legend-item.lowlight {
+.brc-chart-accum .brc-legend-item.lowlight {
     opacity:0.3;
 }
 
-/* .brc-chart-phen2-top .brc-legend-item-rect.highlight {
+.brc-chart-accum .brc-legend-item-rect.highlight {
     fill:black;
 }
 
-.brc-chart-phen2-top .brc-legend-item-icon.highlight {
-    fill:black;
-} */
+.brc-chart-accum text.lowlight {
+    opacity:0.3;
+}
 
-#phen2-chart .mainChart {
-    overflow: visible;
+.brc-chart-accum text.highlight {
+    font-weight:bold;
+}
+
+.brc-chart-accum .y-axis.lowlight {
+    opacity:0.3;
 }
 
+.brc-chart-accum .y-axis.highlight {
+    font-weight:bold;
+}
 .chart-overflow svg {
     overflow: visible;
 }
@@ -156,47 +168,35 @@ svg circle.lowlighted {
 .brc-chart-links-popup ul {
     padding-left: 0;
     list-style-position: inside;
-}.brc-chart-accum path {
-    fill: none;
 }
-
-.brc-chart-accum path.highlight {
+.brc-chart-phen1 path.highlight.phen-path-line {
     stroke: black;
     stroke-width: 3;
     opacity: 1;
 }
 
-.brc-chart-accum path.lowlight {
+.brc-chart-phen1 path.lowlight {
     opacity:0.3;
 }
 
-.brc-chart-accum {
-    overflow: visible;
-}
-
-.brc-chart-accum .brc-legend-item.lowlight {
+.brc-chart-phen1 rect.lowlight {
     opacity:0.3;
 }
 
-.brc-chart-accum .brc-legend-item-rect.highlight {
-    fill:black;
+.brc-chart-phen1 {
+    overflow: visible;
 }
 
-.brc-chart-accum text.lowlight {
+/* .brc-chart-phen1  */
+.brc-chart-phen1-top .brc-legend-item.lowlight {
     opacity:0.3;
 }
 
-.brc-chart-accum text.highlight {
-    font-weight:bold;
-}
-
-.brc-chart-accum .y-axis.lowlight {
-    opacity:0.3;
+/* .brc-chart-phen1  */
+.brc-chart-phen1-top .brc-legend-item-line.highlight {
+    fill:black;
 }
-
-.brc-chart-accum .y-axis.highlight {
-    font-weight:bold;
-}.brc-chart-trend path {
+.brc-chart-trend path {
     fill: none;
 }
 
@@ -211,12 +211,6 @@ svg circle.lowlighted {
 
 .brc-chart-trend .lowlight {
     opacity: 0.1;
-}.brc-chart-altlat .highlight {
-    opacity: 1;
-}
-
-.brc-chart-altlat .lowlight {
-    opacity: 0.1;
 }/* .brc-chart-yearly path {
     fill: none;
 } */
@@ -236,6 +230,12 @@ svg circle.lowlighted {
     opacity: 0.2;
     stroke-opacity: 0.2;
     fill-opacity: 0.2;
+}.brc-chart-altlat .highlight {
+    opacity: 1;
+}
+
+.brc-chart-altlat .lowlight {
+    opacity: 0.1;
 }.brc-chart-temporal {
     overflow: visible;
 }