@anjson/stats-charts NPM

@anjson/stats-charts

This package offers methods to get stats and to append charts to the DOM based on a collection of data.

Installation

  npm i @anjson/stats-charts

Usage

StatsCollection

A class instanciated with an array of numbers or an array of objects with at least a value-property.

  // Import with bundler like (webpack/vite etc).
  import { StatsCollection } from '@anjson/stats-charts'

  // Import without bundler.
  import { StatsCollection } from './node_modules/@anjson/stats-charts/index.js'

  const statsCollection = new StatsCollection([100, 110, 5, 12])

  console.log(statsCollection.getCollectionOfDataWithPercent())
  /*
  [
    { value: 100, percent: 0.44052863436123346 },
    { value: 110, percent: 0.4845814977973568 }, 
    { value: 5, percent: 0.022026431718061675 }, 
    { value: 12, percent: 0.05286343612334802 }  
  ]
  */

Properties

collectionOfData
The array of data set in the constructor.

Methods

constructor
Create an instance of the StatsCollection. The argument should be an array of numbers or an array of objects with at least a value-property.
arguments: number | object throws: TypeError returns: number
getMinimumValue
Get the minimum value in the collection of data. returns: number
getMaximumValue
Get the maximum value in the collection of data. returns: number
getDataWithMaximumValues
Get an array containing the data from the collection of data with the maximum values. returns: number | object
getDataWithMinimumValues
Get an array containing the data from the collection of data with the minimum values. returns: number | object
getAverageValue
Get the average-value from the collection of data. returns: number
getCollectionOfDataWithPercent
Get a copy of the collection of data converted to array of objects with calculated number in percent-property. returns: object
getSumOfCollection
Get the sum of values in the collection of data. returns: number

ChartDrawer

A class instanciated with an array of numbers or an array of objects with at least a value-property. The class appends custom DOM-element to illustrate data in charts.

  <div id="pie-chart"></div>
  <div id="bar-chart"></div>

  // Import with bundler like (webpack/vite etc).
  import { ChartDrawer } from '@anjson/stats-charts'

  // Import without bundler.
  import { ChartDrawer } from './node_modules/@anjson/stats-charts/index.js'

  const chartDrawer = new ChartDrawer([{ title: 'a', value: 100 }, { title: 'a', value: 110 }, { title: 'a', value: 5 }, { title: 'a', value: 12 }])

  chartDrawer.appendPieChart('pie-chart', { title: true, percent: true, value: true })
  chartDrawer.appendBarChart('bar-chart', { title: true, percent: true, value: true, average: true })

Methods

constructor
Create an instance of the ChartDrawer. The argument should be an array of numbers or an array of objects with at least a value-property. arguments: number | object throws: TypeError returns: number
appendPieChart
Create an instance of the StatsCollection. The argument should be an array of numbers or an array of objects with at least a value-property. arguments:
- elementId: (string) - The id of the DOM-element to append the chart to. The name should be a plain string without css-selector
- options: (object) - value: (boolean) - If to display meta-data with the value. title: (boolean) - If to display meta-data with the title. percent: (boolean) - If to display percent with one decimal in the meta-data.
throws: Error | TypeError

appendBarChart
Create an instance of the StatsCollection. The argument should be an array of numbers or an array of objects with at least a value-property. arguments:
- elementId: (string) - The id of the DOM-element to append the chart to. The name should be a plain string without css-selector
- options: (object) - value: (boolean) - If to display meta-data with the value. title: (boolean) - If to display meta-data with the title. percent: (boolean) - If to display percent with one decimal in the meta-data. average: (boolean) - If to display a line in the bar-chart representing the average-value.
throws: Error | TypeError