Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@vx/stats

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vx/stats - npm Package Compare versions

Comparing version 0.0.182 to 0.0.183

7

package.json
{
"name": "@vx/stats",
"version": "0.0.182",
"version": "0.0.183",
"description": "vx stats box violin",

@@ -17,3 +17,4 @@ "sideEffects": false,

"prepublish": "npm run build",
"test": "jest"
"test": "jest",
"docs": "cd ./docs && ../../../node_modules/.bin/react-docgen ../src/{boxplot,violinplot} | ../../../scripts/buildDocs.sh"
},

@@ -38,3 +39,3 @@ "repository": {

"dependencies": {
"@vx/group": "0.0.182",
"@vx/group": "0.0.183",
"@vx/scale": "0.0.182",

@@ -41,0 +42,0 @@ "classnames": "^2.2.5",

# @vx/stats
<a title="@vx/stats npm downloads" href="https://www.npmjs.com/package/@vx/stats">
<img src="https://img.shields.io/npm/dm/@vx/stats.svg?style=flat-square" />
</a>
## Installation
```

@@ -7,34 +14,92 @@ npm install --save @vx/stats

## BoxPlot
A boxplot shows the minimum, maximum, and quartiles of a dataset.
## Components
You can pass in props to target the `min`, `max`, `median`, and `box (interquartile range)` shapes using `minProps`, `maxProps`, `medianProps`, and `boxProps`.
If you are looking to add events over the each boxplot group you can pass in `container={true}` and `containerProps={{ /** */ }}`.
## <BoxPlot /> Properties
- [BoxPlot](#boxplot-)
- [ViolinPlot](#violinplot-)
| Name |Default| Type | Description |
|:------------------|:------|:----------|:------------------------------|
| className | | string | The className for the boxplot |
| left | 0 | number | The left offset of the boxplot |
| data | | array | An array of data |
| max | | number | The maximum value for boxplot |
| min | | number | The minimum value for boxplot |
| firstQuartile | | number | The value for the first quartile for the boxplot |
| thirdQuartile | | number | The value for the third quartile for the boxplot |
| median | | number | The median value for the boxplot |
| boxWidth | | number | The width of the box |
| fill | | string | The color of the box |
| fillOpacity | | number | The opacity of the box |
| stroke | | string | The color of the lines in boxplot |
| strokeWidth | | number | Width of the lines in boxplot |
| rx | 2 | number | The [x-axis radius](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx) for the box |
| ry | 2 | number | The [y-axis radius](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry) for the box |
| container | false | boolean | Set to true and add `containerProps = {{ /** */}}` to add events to each boxplot group |
| maxProps | {} | object | Props passed to target the `line` shape for the maximum |
| minProps | {} | object | Props passed to target the `line` shape for the minimum |
| medianProps | {} | object | Props passed to target the `line` shape for the median|
| boxProps | {} | object | Props passed to target the `rect` shape for the box |
| containerProps | {} | object | Props passed to add events over each boxplot group (requires `container={true}`) |
## API
<h3 id="boxplot-">&lt;BoxPlot /&gt;</h3>
<a id="#BoxPlot__boxProps" name="BoxPlot__boxProps" href="#BoxPlot__boxProps">#</a> *BoxPlot*.**boxProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__boxWidth" name="BoxPlot__boxWidth" href="#BoxPlot__boxWidth">#</a> *BoxPlot*.**boxWidth**&lt;number&gt;
<a id="#BoxPlot__children" name="BoxPlot__children" href="#BoxPlot__children">#</a> *BoxPlot*.**children**&lt;func&gt;
<a id="#BoxPlot__className" name="BoxPlot__className" href="#BoxPlot__className">#</a> *BoxPlot*.**className**&lt;string&gt;
<a id="#BoxPlot__container" name="BoxPlot__container" href="#BoxPlot__container">#</a> *BoxPlot*.**container**&lt;bool&gt; <table><tr><td><strong>Default</strong></td><td>false</td></td></table>
<a id="#BoxPlot__containerProps" name="BoxPlot__containerProps" href="#BoxPlot__containerProps">#</a> *BoxPlot*.**containerProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__fill" name="BoxPlot__fill" href="#BoxPlot__fill">#</a> *BoxPlot*.**fill**&lt;string&gt;
<a id="#BoxPlot__fillOpacity" name="BoxPlot__fillOpacity" href="#BoxPlot__fillOpacity">#</a> *BoxPlot*.**fillOpacity**&lt;union(number|string)&gt;
<a id="#BoxPlot__firstQuartile" name="BoxPlot__firstQuartile" href="#BoxPlot__firstQuartile">#</a> *BoxPlot*.**firstQuartile**&lt;number&gt;
<a id="#BoxPlot__horizontal" name="BoxPlot__horizontal" href="#BoxPlot__horizontal">#</a> *BoxPlot*.**horizontal**&lt;bool&gt;
<a id="#BoxPlot__left" name="BoxPlot__left" href="#BoxPlot__left">#</a> *BoxPlot*.**left**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
<a id="#BoxPlot__max" name="BoxPlot__max" href="#BoxPlot__max">#</a> *BoxPlot*.**max**&lt;number&gt;
<a id="#BoxPlot__maxProps" name="BoxPlot__maxProps" href="#BoxPlot__maxProps">#</a> *BoxPlot*.**maxProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__median" name="BoxPlot__median" href="#BoxPlot__median">#</a> *BoxPlot*.**median**&lt;number&gt;
<a id="#BoxPlot__medianProps" name="BoxPlot__medianProps" href="#BoxPlot__medianProps">#</a> *BoxPlot*.**medianProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__min" name="BoxPlot__min" href="#BoxPlot__min">#</a> *BoxPlot*.**min**&lt;number&gt;
<a id="#BoxPlot__minProps" name="BoxPlot__minProps" href="#BoxPlot__minProps">#</a> *BoxPlot*.**minProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__outlierProps" name="BoxPlot__outlierProps" href="#BoxPlot__outlierProps">#</a> *BoxPlot*.**outlierProps**&lt;object&gt; <table><tr><td><strong>Default</strong></td><td>{}</td></td></table>
<a id="#BoxPlot__outliers" name="BoxPlot__outliers" href="#BoxPlot__outliers">#</a> *BoxPlot*.**outliers**&lt;array&gt; <table><tr><td><strong>Default</strong></td><td>[]</td></td></table>
<a id="#BoxPlot__rx" name="BoxPlot__rx" href="#BoxPlot__rx">#</a> *BoxPlot*.**rx**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>2</td></td></table>
<a id="#BoxPlot__ry" name="BoxPlot__ry" href="#BoxPlot__ry">#</a> *BoxPlot*.**ry**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>2</td></td></table>
<a id="#BoxPlot__stroke" name="BoxPlot__stroke" href="#BoxPlot__stroke">#</a> *BoxPlot*.**stroke**&lt;string&gt;
<a id="#BoxPlot__strokeWidth" name="BoxPlot__strokeWidth" href="#BoxPlot__strokeWidth">#</a> *BoxPlot*.**strokeWidth**&lt;union(number|string)&gt;
<a id="#BoxPlot__thirdQuartile" name="BoxPlot__thirdQuartile" href="#BoxPlot__thirdQuartile">#</a> *BoxPlot*.**thirdQuartile**&lt;number&gt;
<a id="#BoxPlot__top" name="BoxPlot__top" href="#BoxPlot__top">#</a> *BoxPlot*.**top**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
<a id="#BoxPlot__valueScale" name="BoxPlot__valueScale" href="#BoxPlot__valueScale">#</a> *BoxPlot*.**valueScale**&lt;func&gt;
<h3 id="violinplot-">&lt;ViolinPlot /&gt;</h3>
<a id="#ViolinPlot__children" name="ViolinPlot__children" href="#ViolinPlot__children">#</a> *ViolinPlot*.**children**&lt;func&gt;
<a id="#ViolinPlot__className" name="ViolinPlot__className" href="#ViolinPlot__className">#</a> *ViolinPlot*.**className**&lt;string&gt;
<a id="#ViolinPlot__count" name="ViolinPlot__count" href="#ViolinPlot__count">#</a> *ViolinPlot*.**count**&lt;func&gt; <table><tr><td><strong>Default</strong></td><td>d => d.count</td></td></table>
<a id="#ViolinPlot__data" name="ViolinPlot__data" href="#ViolinPlot__data">#</a> *ViolinPlot*.**data**&lt;array&gt; `required`
<a id="#ViolinPlot__horizontal" name="ViolinPlot__horizontal" href="#ViolinPlot__horizontal">#</a> *ViolinPlot*.**horizontal**&lt;bool&gt;
<a id="#ViolinPlot__left" name="ViolinPlot__left" href="#ViolinPlot__left">#</a> *ViolinPlot*.**left**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
<a id="#ViolinPlot__top" name="ViolinPlot__top" href="#ViolinPlot__top">#</a> *ViolinPlot*.**top**&lt;number&gt; <table><tr><td><strong>Default</strong></td><td>0</td></td></table>
<a id="#ViolinPlot__value" name="ViolinPlot__value" href="#ViolinPlot__value">#</a> *ViolinPlot*.**value**&lt;func&gt; <table><tr><td><strong>Default</strong></td><td>d => d.value</td></td></table>
<a id="#ViolinPlot__valueScale" name="ViolinPlot__valueScale" href="#ViolinPlot__valueScale">#</a> *ViolinPlot*.**valueScale**&lt;func&gt;
<a id="#ViolinPlot__width" name="ViolinPlot__width" href="#ViolinPlot__width">#</a> *ViolinPlot*.**width**&lt;number&gt;
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc