Merge pull request #24 from NHS-digital-website/DW-2981-added-chart-i…

…cons2

[DW-2981] Added chart icons

.github/workflows/distribution-workflow.yaml

@@ -33,9 +33,6 @@ jobs:
 
       - run: npm --no-git-tag-version version ${{ github.event.release.tag_name }}
 
-      # build the project
-      - run: npm run build
-
       - run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

README.md

@@ -10,7 +10,7 @@ The purpose of this library is create accessible data visualisations for web wit
 
 ### Download the latest release
 
-To you can download the latest releases on the [release page.](https://github.com/NHS-digital-website/nhsd-dataviz/releases).
+To you can download the latest releases on the [release page](https://github.com/NHS-digital-website/nhsd-dataviz/releases).
 
 ### Build from source
 
@@ -71,6 +71,7 @@ nhsdviz.chart(<i>selector</i>, <i><a href="#optionsObject">options</a></i>)
 | data              | <a href="#dataObject">Data object</a>                | Chart data                               |
 | source            | { text: String, href: String }                       | Source text                              |
 | palette           | String                                               | Chart palette                            |
+| icon              | String (<a href="#icons">icon name</a>)              | Chart icon                               |
 | desktopViewport   | number (px)                                          | Desktop viewport (default: 1024)         |
 
 ### <a name="dataObject" href="#dataObject">#</a> Data object
@@ -87,7 +88,23 @@ nhsdviz.chart(<i>selector</i>, <i><a href="#optionsObject">options</a></i>)
 | quantity     | number                                          | Chart quantity value (stat)          |
 | series       | { name: string, value: [number] }               | Chart series data (column)           |
 
-### Examples
+### <a name="icons" href="#icons">#</a> Supported icons 
+
+If building from source icons should be placed in the `assets/icons/` directory, these icons can then be referenced by their file names.
+
+If using the distribution library the following icons are avaliable:
+
+- `arrow-down`
+- `arrow-up`
+- `calendar`
+- `invite`
+- `person`
+- `tooth`
+- `wine-glass`
+
+--------
+
+## Examples
 
 #### Pie Chart
 https://jsfiddle.net/LEJA3/cq8rbs12/
@@ -104,6 +121,7 @@ https://jsfiddle.net/LEJA3/rov9weby/
 #### Column Chart
 https://jsfiddle.net/LEJA3/fqtphz7o/
 
+--------
 ## Colour palette
 
 nhsdviz.createPalette(<i>name</i>, <i><a href="#paletteObject">palette</a></i>)

rollup.config.js → build/rollup.config.js

@@ -3,6 +3,7 @@ import { terser } from "rollup-plugin-terser";
 import typescript from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
+import svgImporter from "./svg-importer";
 
 const removeCircularDependencyWarning = function ( message ) {
   if (message.code === 'CIRCULAR_DEPENDENCY') {
@@ -28,9 +29,10 @@ export default [{
       preventAssignment: true,
     }),
     terser(),
+    svgImporter(),
   ],
   onwarn: removeCircularDependencyWarning,
-},{
+}, {
   input: 'src/dataviz.ts',
   output: [{
     file: 'dist/nhsd-dataviz.js',
@@ -55,6 +57,7 @@ export default [{
       preventAssignment: true,
     }),
     commonjs(),
+    svgImporter(),
   ],
   onwarn: removeCircularDependencyWarning,
 }];

build/svg-importer.js

@@ -0,0 +1,20 @@
+import glob from 'fast-glob';
+import { readFile } from 'fs/promises';
+import path from 'path';
+
+export default () => ({
+  name: 'svg-importer',
+  resolveId: (id, importer) => {
+    if (!id.match(/\.svg$/)) return null;
+    return path.resolve(importer, '..', id).replace(/\\/g, '/');
+  },
+  load: async (id) => {
+    if (!id.match(/\.svg$/)) return null;
+    const icons = {};
+    for (const svgPath of await glob(id, { absolute: true })) {
+        const fname = svgPath.split("/").slice(-1)[0].replace(/\.svg$/, "");
+        icons[fname] = (await readFile(svgPath)).toString();
+    }
+    return `export default ${JSON.stringify(icons)}`;
+  }
+});