Merge pull request #1268 from evidence-dev/funnel-percent

Add showPercent option to funnel chart

.changeset/thirty-llamas-tap.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+'evidence-docs': patch
+---
+
+Add showPercent option to funnel chart

packages/core-components/src/lib/unsorted/viz/FunnelChart.svelte

@@ -31,6 +31,9 @@
 
 	export let colorPalette = undefined;
 
+	export let showPercent = false;
+	showPercent = showPercent === 'true' || showPercent === true;
+
 	// ---------------------------------------------------------------------------------------
 	// Variable Declaration
 	// ---------------------------------------------------------------------------------------
@@ -145,7 +148,13 @@
 			show: true,
 			position: labelPosition,
 			formatter: function (params) {
-				return formatValue(params.value, valueColFormat);
+				let output;
+				if (showPercent) {
+					output = `${formatValue(params.value, valueColFormat)} (${params.percent}%)`;
+				} else {
+					output = formatValue(params.value, valueColFormat);
+				}
+				return output;
 			}
 		},
 		labelLayout: { hideOverlap: true },

sites/docs/docs/components/funnel-chart.md

@@ -4,7 +4,7 @@ title: Funnel Chart
 hide_table_of_contents: false
 ---
 
-![funnel](/img/funnel-default.png)
+<img src="/img/funnel-default.png" width="700"/>
 
 ```markdown
 <FunnelChart 
@@ -18,7 +18,7 @@ hide_table_of_contents: false
 
 ### Ascending
 
-![ascending-funnel](/img//funnel-asc.png)
+<img src="/img//funnel-asc.png" width="700"/>
 
 ```markdown
 <FunnelChart 
@@ -31,7 +31,7 @@ hide_table_of_contents: false
 
 ### Alignment
 
-![left-aligned-funnel](/img//funnel-align.png)
+<img src="/img//funnel-align.png" width="700"/>
 
 ```markdown
 <FunnelChart 
@@ -42,6 +42,20 @@ hide_table_of_contents: false
 />
 ```
 
+### Show Percent Label
+
+<img src="/img/funnel-showpct.png" alt="funnel-show-percent" width="700"/>
+
+```markdown
+<FunnelChart 
+    data={query_name} 
+    nameCol=column_name
+    valueCol=column_value
+    showPercent=true
+/>
+```
+
+
 ## Options
 
 ### Data
@@ -61,6 +75,7 @@ hide_table_of_contents: false
 <tr> <td>outlineColor</td> <td>Border color. Only accepts a single color.</td> <td class='tcenter'>-</td> <td class='tcenter'>CSS name | hexademical | RGB | HSL</td> <td class='tcenter'>transparent</td> </tr>
 <tr> <td>outlineWidth</td> <td>Border Width. It should be a natural number.</td> <td class='tcenter'>-</td> <td class='tcenter'>number</td> <td class='tcenter'>1</td> </tr>
 <tr> <td>labelPosition</td> <td>Position of funnel item's label.</td> <td class='tcenter'>-</td> <td class='tcenter'>left | right | inside</td> <td class='tcenter'>inside</td> </tr>
+<tr> <td>showPercent</td> <td>Show percentage in data labels</td> <td class='tcenter'>-</td> <td class='tcenter'>true | false</td> <td class='tcenter'>false</td> </tr>
 <tr> <td>funnelSort</td> <td>Data sorting of the chart.</td> <td class='tcenter'>-</td> <td class='tcenter'>none | ascending | descending</td> <td class='tcenter'>none</td> </tr>
 <tr> <td>funnelAlign</td> <td>Alignment of funnel.</td> <td class='tcenter'>-</td> <td class='tcenter'>left | right | center</td> <td class='tcenter'>center</td> </tr>
 </table>