@anjson/stats-charts
v2.0.5
Published
Statistics and chart-drawer for arrays of data.
Downloads
4
Readme
@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
Contribute
Work with the repository(https://github.com/AnJson/stats-charts) locally and make a pull-request to make contributions to the package.
Contribution with features like these are always more than welcome:
- More chart-types.
- More types of statistics.
- Update charts to handle more meta-data.
- Improve layout of charts.
- Bug-fixes. etc.