more customization options

README.md

@@ -1,23 +1,24 @@
 # Funnel Chart
 
-A calendar with pie charts showing the distribution of different categories for each day.
+A funnel chart visualization app for Splunk supports which two types of charts: classic and hybrid. The hybrid type is inspired by [this article](https://smilganir.medium.com/funnel-chart-suggested-alternatives-f5411e3a60f5).
 
 ## Examples
 
 ```
-| gentimes start=12/15/22 end=1/15/23 increment=1m
-| eval _time=starttime
-| eval day=strftime(_time, "%a")
-| eval status=(random() % 5) + 1
-| eval status=case(status == 1, 200, status == 2, 200, status == 3, 300, status == 4, 400, status = 5, 500)
-| eval status=if(status==500 OR status==400, (random() % 5) + 1, status)
-| eval status=case(status == 1, 200, status == 2, 200, status == 3, 300, status == 4, 400, status = 5, 500, 1==1, status)
-| eval status=if(status==500 AND day!="Tue", (random() % 5) + 1, status)
-| eval status=case(status == 1, 200, status == 2, 200, status == 3, 300, status == 4, 400, status = 5, 500, 1==1, status)
-| timechart cont=f span=1d count by status
+| makeresults
+| eval data=split("Landing Page,1000,100-Product Page,900,90-Add to Cart,500,50-Checkout,200,20-Purchase,150,15", "-")
+| mvexpand data
+| eval step=mvindex(split(data, ","), 0), count=mvindex(split(data, ","), 1), percent=mvindex(split(data, ","), 2)
+| table step count percent
 ```
 
-![screenshot](/static/screenshot.png)
+## Classic
+
+![classic](/static/classic.png)
+
+## Hybrid
+
+![hybrid](/static/hybrid.png)
 
 ## License
 

README/savedsearches.conf.spec

@@ -2,6 +2,8 @@ display.visualizations.custom.funnel_viz.funnel.funnelType = <string>
 display.visualizations.custom.funnel_viz.funnel.funnelAlign = <string>
 display.visualizations.custom.funnel_viz.funnel.labelPosition = <string>
 display.visualizations.custom.funnel_viz.funnel.itemSize = <integer>
+display.visualizations.custom.funnel_viz.funnel.classicWidth = <integer>
+display.visualizations.custom.funnel_viz.funnel.hybrididth = <integer>
 
 display.visualizations.custom.funnel_viz.funnel.color1 = <string>
 display.visualizations.custom.funnel_viz.funnel.color2 = <string>

appserver/static/visualizations/funnel/formatter.html

@@ -1,15 +1,15 @@
-<form class="splunk-formatter-section" section-label="Funnel type">
+<form class="splunk-formatter-section" section-label="Type">
   <splunk-control-group label="Type">
-    <splunk-radio-input name="{{VIZ_NAMESPACE}}.funnelType" value="alternative">
+    <splunk-radio-input name="{{VIZ_NAMESPACE}}.funnelType" value="hybrid">
       <option value="classic">Classic</option>
-      <option value="alternative">Hybrid</option>
+      <option value="hybrid">Hybrid</option>
     </splunk-radio-input>
   </splunk-control-group>
 </form>
 
 <form class="splunk-formatter-section" section-label="Classic">
   <splunk-control-group label="Alignment">
-    <splunk-radio-input name="{{VIZ_NAMESPACE}}.funnelAlign" value="left">
+    <splunk-radio-input name="{{VIZ_NAMESPACE}}.funnelAlign" value="center">
       <option value="left">Left</option>
       <option value="center">Center</option>
       <option value="right">Right</option>
@@ -19,19 +19,26 @@
   <splunk-control-group label="Label position">
     <splunk-radio-input name="{{VIZ_NAMESPACE}}.labelPosition" value="left">
       <option value="left">Left</option>
-      <option value="inside">Inside</option>
       <option value="right">Right</option>
     </splunk-radio-input>
   </splunk-control-group>
+
+  <splunk-control-group label="Width">
+    <splunk-text-input name="{{VIZ_NAMESPACE}}.classicWidth" value="300"></splunk-text-input>
+  </splunk-control-group>
 </form>
 
 <form class="splunk-formatter-section" section-label="Hybrid">
   <splunk-control-group label="Item size">
     <splunk-text-input name="{{VIZ_NAMESPACE}}.itemSize" value="96"></splunk-text-input>
   </splunk-control-group>
+
+  <splunk-control-group label="Width">
+    <splunk-text-input name="{{VIZ_NAMESPACE}}.hybridWidth" value="828"></splunk-text-input>
+  </splunk-control-group>
 </form>
 
-<form class="splunk-formatter-section" section-label="Shared settings">
+<form class="splunk-formatter-section" section-label="Shared">
   <splunk-control-group label="Colors" class="vizviz-charts-color-picker">
     <splunk-color-picker type="custom" value="#2ec7c9" name="{{VIZ_NAMESPACE}}.color1">
       <splunk-color>#2ec7c9</splunk-color>