{* This is intended as an example of how to present Elasticsearch facets, known now as aggregations.
|
|
|
|
Example wiki page "chart" contents:
|
|
|
|
{CUSTOMSEARCH(wiki="charts tpl")}
|
|
{facet name="tracker_field_testUser"}
|
|
{facet name="deep_categories_under_1"}
|
|
{OUTPUT(template="templates/examples/search/facet_charts.tpl")}
|
|
{chart type="pie" title="Users" colors="orange:yellow:red:purple:grey:blue:green:pink:black" class="col-sm-4" size="300:600"}
|
|
{chart type="bar" title="Countries" colors="#888:#aaa:#ccc:#eee:#888:#aaa:#ccc:#eee:#888:#aaa:#ccc:#eee" class="col-sm-8" size="300:400"}
|
|
{OUTPUT}
|
|
{CUSTOMSEARCH}
|
|
|
|
Example wiki page "chart tpl" contents for the form:
|
|
|
|
{literal}<div class="row"><div class="col-sm-4 offset-sm-4"><div class="input-group">
|
|
{input _filter="content" type="text" class="form-control" placeholder="Search..."}
|
|
<div class="input-group-text">
|
|
{input type="submit" value="Go" class="btn btn-primary"}
|
|
{input _filter="content" type="hidden" _field="tracker_status" id="tracker_status"}
|
|
{input _filter="content" type="hidden" _field="tracker_field_eventCategory" id="deep_categories_under_2"}
|
|
</div></div></div></div>
|
|
{/literal}
|
|
|
|
*}
|
|
|
|
{if not empty($facets)}
|
|
<pre style="display: none;" class="facets-data">{$facets|var_dump}</pre>
|
|
<pre style="display: none;" class="charts-data">{$chart|var_dump}</pre>
|
|
|
|
{if empty($container)}
|
|
{$containerClass = 'row'}
|
|
{else}
|
|
{$containerClass = $container.class}
|
|
{/if}
|
|
{$i = 0}
|
|
<div class="{$containerClass}">
|
|
{foreach $facets as $facet}
|
|
{if count($facet.options) gt 0}
|
|
{if not empty($chart.title) and not empty($chart.type) and not empty($chart.colors)}
|
|
{$chart = [$chart]}{* if there is only one chart then it will not be in an array *}
|
|
{/if}
|
|
{if not isset($chart[$i].class)}{$chart[$i].class = 'col-sm-12'}{/if}
|
|
<div class="{$chart[$i].class|escape}">
|
|
<label class="h3">
|
|
{if not empty($chart[$i].title)}
|
|
{$chart[$i].title|escape}
|
|
{else}
|
|
{$facet.label|replace:' (Tree)':''|tr_if|escape}
|
|
{/if}
|
|
</label>
|
|
{$values = []}
|
|
{$labels = []}
|
|
{foreach from=$facet.options key=value item=label}
|
|
{if strpos($label, 'trackeritem:0 ') !== false}
|
|
{continue}
|
|
{/if}
|
|
{if preg_match('/(.*?)\s+\((\d+)\)/', $label|escape, $matches)}
|
|
{$labels[] = $matches[1]}
|
|
{$values[] = $matches[2]}
|
|
{/if}
|
|
{/foreach}
|
|
|
|
{if not isset($chart[$i].type)}{$chart[$i].type = 'bar'}{/if}
|
|
{if not isset($chart[$i].id)}{$chart[$i].id = 'chart_'|cat:$i}{/if}
|
|
{if not isset($chart[$i].size)}
|
|
{$chart[$i].size = ['','']}
|
|
{else}
|
|
{$chart[$i].size = ':'|explode:$chart[$i].size}
|
|
{/if}
|
|
|
|
{if not isset($chart[$i].colors)}
|
|
{$col = []}
|
|
{else}
|
|
{$col = ':'|explode:$chart[$i].colors}
|
|
{/if}
|
|
|
|
{if not empty($chart[$i].hcolors)}
|
|
{$hcol = ':'|explode:$chart[$i].hcolors}
|
|
{else}
|
|
{$hcol = $col}
|
|
{/if}
|
|
|
|
{$datasets = [
|
|
'data' => $values,
|
|
'backgroundColor' => $col
|
|
]}
|
|
{if $hcol}{$datasets.hoverBackgroundColor = $hcol}{/if}
|
|
{if $chart[$i].title}{$datasets.label = $chart[$i].title|escape}{/if}
|
|
|
|
{$data = ['data' => ['labels' => $labels,'datasets' => [$datasets]]]}
|
|
|
|
{$options = ['responsive' => true, 'maintainAspectRatio' => false]}{* some handy defaults (not working as expected) *}
|
|
{$data.options = $options}
|
|
|
|
<pre style="display: none;" class="data-options">{$data|var_dump}</pre>
|
|
|
|
{wikiplugin _name='chartjs' type=$chart[$i].type id=$chart[$i].id width=$chart[$i].size[0] height=$chart[$i].size[1] debug=1}
|
|
{$data|json_encode}
|
|
{/wikiplugin}
|
|
</div>
|
|
{/if}
|
|
{$i = $i + 1}
|
|
{/foreach}
|
|
</div>
|
|
{/if}
|