# @ryan-n-may/funnelplus

> An extension of @nivo/funnel that extends features and functionality.

Latest version **1.2.1** (published 2024-04-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ryan-n-may/funnelplus
pnpm add @ryan-n-may/funnelplus
yarn add @ryan-n-may/funnelplus
bun add @ryan-n-may/funnelplus
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2024-04-15 |
| First published | 2024-04-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 68.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ryan May |
| Maintainers | ryan-n-may |
| Keywords | nivo, chart, funnel, funnelchart |

## Links

- npm: https://www.npmjs.com/package/@ryan-n-may/funnelplus
- Repository: https://github.com/ryan-n-may/nivo_responsivefunnelplus
- Homepage: https://github.com/ryan-n-may/nivo_responsivefunnelplus#readme
- Issues: https://github.com/ryan-n-may/nivo_responsivefunnelplus/issues
- npm.io page: https://npm.io/package/@ryan-n-may/funnelplus

## Dependencies (10)

- [d3-scale](https://npm.io/package/d3-scale.md) ^4.0.2
- [d3-shape](https://npm.io/package/d3-shape.md) ^1.3.5
- [@nivo/core](https://npm.io/package/@nivo/core.md) 0.85.1
- [@nivo/colors](https://npm.io/package/@nivo/colors.md) 0.85.1
- [@nivo/legends](https://npm.io/package/@nivo/legends.md) 0.85.1
- [@nivo/tooltip](https://npm.io/package/@nivo/tooltip.md) 0.85.1
- [@types/d3-scale](https://npm.io/package/@types/d3-scale.md) ^4.0.8
- [@types/d3-shape](https://npm.io/package/@types/d3-shape.md) ^2.0.0
- [@nivo/annotations](https://npm.io/package/@nivo/annotations.md) 0.85.1
- [@react-spring/web](https://npm.io/package/@react-spring/web.md) 9.4.5 || ^9.7.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.2.1 (latest) — 2024-04-15
- 1.2.0 — 2024-04-15
- 1.0.22 — 2024-04-15
- 1.0.21 — 2024-04-15
- 1.0.20 — 2024-04-15
- 1.0.19 — 2024-04-15
- 1.0.18 — 2024-04-15
- 1.0.17 — 2024-04-15
- 1.0.16 — 2024-04-15
- 1.0.15 — 2024-04-15
- 1.0.14 — 2024-04-15
- 1.0.13 — 2024-04-15
- 1.0.12 — 2024-04-15
- 1.0.11 — 2024-04-15
- 1.0.10 — 2024-04-15
- … 10 more at https://npm.io/package/@ryan-n-may/funnelplus/versions

## README

# Nivo Funnel ++

An extension to `@Nivo/Funnel` that adds functionality and features. 
A follow and star on the [Github Page](https://github.com/ryan-n-may/nivo_responsivefunnelplus)
would be highly appreciated. 


![MIT License](https://img.shields.io/badge/License-MIT-green.svg) 

![Nivo Version](https://img.shields.io/badge/Nivo-0.85.1-blue)
## Authors

- [@ryan-n-may](https://www.github.com/ryan-n-may)


## Features

- Unlimited datasets drawn per chart area.
- Auto-scaling input datasets relative to each other.  
- Colours customisable per dataset.
- Section labels.
- Stylised data labels. 
- Optional, fully customisable legend. 



## Installation

Install Funnel ++ with npm
([NPM package](https://www.npmjs.com/package/@ryan-n-may/funnelplus?activeTab=readme))
```bash
 npm install @ryan-n-may/funnelplus
```
```json
 "@ryan-n-may/funnelplus": "1.2.0"
```

## Acknowledgements

 - [The Nivo Project](https://github.com/plouc/nivo)


## Documentation
```jsx
<ReactiveFunnelPlus
    ... />
```
#### Additional paramaters:
| parameter                | type                                  
|--------------------------|---------------------------------------
| data                     | `FunnelDatum[] \| FunnelDatum[][]`
| colors                   | `OrdinalColorScaleConfig<FunnelDatum> \| OrdinalColorScaleConfig<FunnelDatum>[]`
| enableLegend             | `boolean`
| legendAnchor             | `bottom-right \| bottom-left \| bottom \| top \| top-left \| top-right \| right \| left \| undefined`
| legendItemDirection      | `left-to-right \| right-to-left \| top-to-bottom \| bottom-to-top`
| legendLayout             | `row \| column`
| legendSymbolShape        | `circle \| triangle \| diamond \| square \| undefined`
| enableLabel              | `boolean`
| enableAxisLabel          | `boolean`
| sectionLabelColor        | `OrdinalColorScaleConfig<FunnelDatum>`
| labelSpacing             | `number`
| labelDirection           | `row \| column`
| labelStyle               | `verbose \| pretty`
| labelFormat              | `(label: string) : string`
| labelColor               | `OrdinalColorScaleConfig<FunnelDatum>`
| layers                   | `['separators', 'parts', 'labels', 'axislabels', 'legend', 'annotations']`


## Usage/Examples

```javascript
return(
    <ResponsiveFunnelPlus
        data = {[
            data[0],
            data[1],
        ]}
        colors = {[
            colorThemePalette.stackedBarChartColors.primary, 
            colorThemePalette.stackedBarChartColors.secondary, 
        ]}
        margin={{ top: 8, right: 64, bottom: 16, left: 128 }}
        fillOpacity={0.25}
        borderOpacity={0.8}
        borderWidth={8}
        shapeBlending={0.50}
        interpolation='smooth'
        direction={'vertical'}
        spacing={2}
        isInteractive={true}
        animate={true}
        currentPartSizeExtension={32}
        currentBorderWidth={16}
        motionConfig={'stiff'} 
        layers={['separators', 'parts', 'labels', 'axislabels', 'legend', 'annotations']}
        // Inputs exceed 100, so seperators need to reduce chart width.
        // Auto-scaling relatively scales chart datasets, but if maximal chart dataset exceeds
        // 100, additional seperators must be specified. 
        beforeSeparatorLength={Math.abs(data[0].data[1].value - data[1].data[1].value)}
        afterSeparatorLength={Math.abs(data[0].data[1].value - data[1].data[1].value)}
        // Legend
        enableLegend={true}
        legendAnchor={'bottom-right'}
        legendItemDirection={'left-to-right'}
        legendLayout={'column'}
        legendSymbolShape={'square'}         
        // Labels
        enableLabel={true}
        labelSpacing={0}
        labelDirection={'row'}
        labelStyle={'pretty'}
        labelFormat={() => {}} // Doesnt do anything here, we are using 'pretty'
        valueFormat={'>-.3s'}
        labelColor={{from: 'color', modifiers:[['darker', 1]]}}
        // Axis labels
        enableAxisLabel={true} 
        sectionLabelColor={'dark-gray'}
    >
)
```
![DEMO_IMAGE]("https://github.com/ryan-n-may/nivo_responsivefunnelplus/tree/main/githubimages/CHART_DEMO.png")

---
_Source: https://npm.io/package/@ryan-n-may/funnelplus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._