test-make-line-chart

Line chart

Usage no npm install needed!

<script type="module">
  import testMakeLineChart from 'https://cdn.skypack.dev/test-make-line-chart';
</script>

README

pipeline status coverage report

Line graph

NPM Install

To use this linechart in another (React) application:

  1. Go to the root folder of that application
  2. Install the package using: npm install test-make-line-chart
  3. Import the package using: import 'test-make-line-chart'; in your JS-file

Development quick start

Te run this package locally (probably on port 8080):

  1. Perform a local Git clone
  2. cd into cloned repository
  3. npm install
  4. npm run build && http-server . (run npm install -g http-server if you don't have the http-server npm package installed yet)

Publishing to NPM

  1. Create a merge request on Gitlab
  2. Ask to be published (not sure if anyone else can publish packages)

Attributes

  • data (string): The data in JSON-string format.
  • xValueLine (string): The name of the key within 'data' that contains the x value.
  • yValueLines (array): Names of the keys within 'data' that contain the y values.

The following styles should all be optional. Defaults are ING-compliant.

  • externalStyles (array): Array of stylesheet-ID's to be included from parents
  • pathWidth (integer): Thickness of the lines in px.
  • pathClasses (array): Array of classes for the paths, use fill attribute only.
  • scatterClasses (array): Array of classes for the scattesr, use fill attribute only.
  • scatterSymbols (array): Array of the scatter symbols, only 'circle' and 'square' are available values.
  • scatterSize (integer): Size of the scatter symbols
  • focusClasses (array): Array of the hover-effect classes, use fill and stroke attributes only.
  • fontSize (integer): Fontsize for the axis and line-labels

Mockdata

This repository contains some mock data in src/data.json. If making changes to the mock data, make them wisely. The default attributes (x and y) are based upon this mock data.