Merge pull request #5 from aussiDavid/master

Add support for zero values and decoratingValues on the funnel

README.md

@@ -4,8 +4,7 @@
 
 [![NPM](https://img.shields.io/npm/v/react-funnel-pipeline.svg)](https://www.npmjs.com/package/react-funnel-pipeline) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-
-<img lt="react-funnel-pipeline" src="https://user-images.githubusercontent.com/15156674/91746751-faa55000-ebb4-11ea-9f12-a52bb62234d6.png">
+![react-funnel-pipeline](./funnel.png)
 
 ## Contents
 
@@ -44,6 +43,7 @@ class Example extends Component {
           { name: 'Consideration', value: 84 },
           { name: 'Evaluation', value: 72 },
           { name: 'Commitment', value: 19 },
+          { name: 'Pre-sale', value: 0 },
           { name: 'Sale', value: 10 }
         ]}
       />
@@ -76,6 +76,7 @@ Or view the online examples at [https://darylbuckle.github.io/react-funnel-pipel
 |    getRowStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that row. |
 |    getRowNameStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that rows name. |
 |    getRowValueStyle | func(row)  |  | false | A function which parses row data. Return a JSX style object to override styles for that rows value. |
+|    decorateValue | func(row, index, array)  |  | false | A function which decorates the value when rendering the row value. Return an object to override the value displayed on the row. The unaltered value is used in all other calculations. |
 |    getToolTip | func(row)  |  | false | A function which parses row data. Return a string to override the tooltip for that row. |
 |    onRowClick | func(row)  |  | false | Called when a row/segment is clicked. Parses the data of the row which was clicked on. |
 

example/src/data.tsx

@@ -5,6 +5,7 @@ const data = [
   { name: 'Consideration', value: 84 },
   { name: 'Evaluation', value: 72 },
   { name: 'Commitment', value: 19 },
+  { name: 'Pre-sale', value: 0 },
   { name: 'Sale', value: 10 }
 ]
 

src/FunnelChart.tsx

@@ -15,6 +15,7 @@ interface IFunnelChartProps {
   getRowStyle?: (row: any) => any
   getRowNameStyle?: (row: any) => any
   getRowValueStyle?: (row: any) => any
+  decorateValue?: (row: any, index: number, data: any) => any
   getToolTip?: (row: any) => string
   onRowClick?: (row: any) => void
 }
@@ -58,6 +59,7 @@ class FunnelChart extends React.Component<
       getRowStyle,
       getRowNameStyle,
       getRowValueStyle,
+      decorateValue,
       getToolTip,
       onRowClick
     } = this.props
@@ -83,10 +85,14 @@ class FunnelChart extends React.Component<
         let showTitle = true
         let showValue = true
 
-        if (thisRow.value > 0) {
+        if (thisRow.value >= 0) {
           let rowStyle: any = {}
           let rowTitleStyle: any = {}
           let rowValueStyle: any = {}
+          const decoratedValue =
+            typeof decorateValue === 'function'
+              ? decorateValue(thisRow, i1, data)
+              : thisRow.value
 
           if (typeof getRowStyle === 'function') {
             rowStyle = getRowStyle(thisRow)
@@ -160,7 +166,7 @@ class FunnelChart extends React.Component<
                     className='funnel-pipeline-chart-value'
                     style={rowValueStyle}
                   >
-                    {showRunningTotal ? runningTotal : thisRow.value}
+                    {showRunningTotal ? runningTotal : decoratedValue}
                   </div>
                 ) : null}
               </div>