knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#469] Update of dist and doc files.

Browse Source
This commit is contained in:
Sol Villar
2015-03-06 15:32:03 -03:00
parent 32f15f124d
commit 8f86282517
32 changed files with 10218 additions and 3405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
docs/src/widget.facetviewer.html
View File

@@ -1,83 +1,259 @@
<!DOCTYPE html> <html> <head> <title>widget.facetviewer.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backend.csv.html"> backend.csv.js </a> <a class="source" href="backend.dataproxy.html"> backend.dataproxy.js </a> <a class="source" href="backend.memory.html"> backend.memory.js </a> <a class="source" href="ecma-fixes.html"> ecma-fixes.js </a> <a class="source" href="model.html"> model.js </a> <a class="source" href="view.flot.html"> view.flot.js </a> <a class="source" href="view.graph.html"> view.graph.js </a> <a class="source" href="view.grid.html"> view.grid.js </a> <a class="source" href="view.map.html"> view.map.js </a> <a class="source" href="view.multiview.html"> view.multiview.js </a> <a class="source" href="view.slickgrid.html"> view.slickgrid.js </a> <a class="source" href="view.timeline.html"> view.timeline.js </a> <a class="source" href="widget.facetviewer.html"> widget.facetviewer.js </a> <a class="source" href="widget.fields.html"> widget.fields.js </a> <a class="source" href="widget.filtereditor.html"> widget.filtereditor.js </a> <a class="source" href="widget.pager.html"> widget.pager.js </a> <a class="source" href="widget.queryeditor.html"> widget.queryeditor.js </a> <a class="source" href="widget.valuefilter.html"> widget.valuefilter.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> widget.facetviewer.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="cm">/*jshint multistr:true */</span>
<!DOCTYPE html>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span> <span class="o">||</span> <span class="p">{};</span>
<span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">recline</span><span class="p">.</span><span class="nx">View</span> <span class="o">||</span> <span class="p">{};</span>
<html>
<head>
<title>widget.facetviewer.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To &hellip;</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page_wrapper">
<div id="jump_page">
<a class="source" href="backend.dataproxy.html">
backend.dataproxy.js
</a>
<a class="source" href="backend.memory.html">
backend.memory.js
</a>
<a class="source" href="ecma-fixes.html">
ecma-fixes.js
</a>
<a class="source" href="model.html">
model.js
</a>
<a class="source" href="view.flot.html">
view.flot.js
</a>
<a class="source" href="view.graph.html">
view.graph.js
</a>
<a class="source" href="view.grid.html">
view.grid.js
</a>
<a class="source" href="view.map.html">
view.map.js
</a>
<a class="source" href="view.multiview.html">
view.multiview.js
</a>
<a class="source" href="view.slickgrid.html">
view.slickgrid.js
</a>
<a class="source" href="view.timeline.html">
view.timeline.js
</a>
<a class="source" href="widget.facetviewer.html">
widget.facetviewer.js
</a>
<a class="source" href="widget.fields.html">
widget.fields.js
</a>
<a class="source" href="widget.filtereditor.html">
widget.filtereditor.js
</a>
<a class="source" href="widget.pager.html">
widget.pager.js
</a>
<a class="source" href="widget.queryeditor.html">
widget.queryeditor.js
</a>
<a class="source" href="widget.valuefilter.html">
widget.valuefilter.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>widget.facetviewer.js</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">&#182;</a>
</div>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-comment">/*jshint multistr:true */</span>
<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">$</span><span class="p">,</span> <span class="nx">my</span><span class="p">)</span> <span class="p">{</span>
<span class="s2">&quot;use strict&quot;</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <h2>FacetViewer</h2>
<span class="hljs-keyword">this</span>.recline = <span class="hljs-keyword">this</span>.recline || {};
<span class="hljs-keyword">this</span>.recline.View = <span class="hljs-keyword">this</span>.recline.View || {};
(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($, my)</span> </span>{
<span class="hljs-pi"> "use strict"</span>;</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">&#182;</a>
</div>
<h2 id="facetviewer">FacetViewer</h2>
<p>Widget for displaying facets </p>
<p>Usage:</p>
<pre><code> var viewer = new FacetViewer({
<pre><code> <span class="hljs-keyword">var</span> viewer = <span class="hljs-keyword">new</span> FacetViewer({
model: dataset
});
</code></pre> </td> <td class="code"> <div class="highlight"><pre><span class="nx">my</span><span class="p">.</span><span class="nx">FacetViewer</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<span class="nx">className</span><span class="o">:</span> <span class="s1">&#39;recline-facet-viewer&#39;</span><span class="p">,</span>
<span class="nx">template</span><span class="o">:</span> <span class="s1">&#39; \</span>
<span class="s1"> &lt;div class=&quot;facets&quot;&gt; \</span>
<span class="s1"> {{#facets}} \</span>
<span class="s1"> &lt;div class=&quot;facet-summary&quot; data-facet=&quot;{{id}}&quot;&gt; \</span>
<span class="s1"> &lt;h3&gt; \</span>
<span class="s1"> {{id}} \</span>
<span class="s1"> &lt;/h3&gt; \</span>
<span class="s1"> &lt;ul class=&quot;facet-items&quot;&gt; \</span>
<span class="s1"> {{#terms}} \</span>
<span class="s1"> &lt;li&gt;&lt;a class=&quot;facet-choice js-facet-filter&quot; data-value=&quot;{{term}}&quot; href=&quot;#{{term}}&quot;&gt;{{term}} ({{count}})&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> {{/terms}} \</span>
<span class="s1"> {{#entries}} \</span>
<span class="s1"> &lt;li&gt;&lt;a class=&quot;facet-choice js-facet-filter&quot; data-value=&quot;{{time}}&quot;&gt;{{term}} ({{count}})&lt;/a&gt;&lt;/li&gt; \</span>
<span class="s1"> {{/entries}} \</span>
<span class="s1"> &lt;/ul&gt; \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> {{/facets}} \</span>
<span class="s1"> &lt;/div&gt; \</span>
<span class="s1"> &#39;</span><span class="p">,</span>
</code></pre>
</div>
<div class="content"><div class='highlight'><pre>my.FacetViewer = Backbone.View.extend({
className: <span class="hljs-string">'recline-facet-viewer'</span>,
template: <span class="hljs-string">' \
&lt;div class="facets"&gt; \
{{#facets}} \
&lt;div class="facet-summary" data-facet="{{id}}"&gt; \
&lt;h3&gt; \
{{id}} \
&lt;/h3&gt; \
&lt;ul class="facet-items"&gt; \
{{#terms}} \
&lt;li&gt;&lt;a class="facet-choice js-facet-filter" data-value="{{term}}" href="#{{term}}"&gt;{{term}} ({{count}})&lt;/a&gt;&lt;/li&gt; \
{{/terms}} \
{{#entries}} \
&lt;li&gt;&lt;a class="facet-choice js-facet-filter" data-value="{{time}}"&gt;{{term}} ({{count}})&lt;/a&gt;&lt;/li&gt; \
{{/entries}} \
&lt;/ul&gt; \
&lt;/div&gt; \
{{/facets}} \
&lt;/div&gt; \
'</span>,
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s1">&#39;click .js-facet-filter&#39;</span><span class="o">:</span> <span class="s1">&#39;onFacetFilter&#39;</span>
<span class="p">},</span>
<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">&#39;render&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">,</span> <span class="s1">&#39;all&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">listenTo</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">,</span> <span class="s1">&#39;all&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tmplData</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">fields</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">fields</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">()</span>
<span class="p">};</span>
<span class="nx">tmplData</span><span class="p">.</span><span class="nx">facets</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">toJSON</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">facet</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">_type</span> <span class="o">===</span> <span class="s1">&#39;date_histogram&#39;</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">facet</span><span class="p">.</span><span class="nx">entries</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">entry</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">entry</span><span class="p">.</span><span class="nx">term</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">time</span><span class="p">).</span><span class="nx">toDateString</span><span class="p">();</span>
<span class="k">return</span> <span class="nx">entry</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">facet</span><span class="p">;</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">templated</span> <span class="o">=</span> <span class="nx">Mustache</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">,</span> <span class="nx">tmplData</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">templated</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>are there actually any facets to show?</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">facets</span><span class="p">.</span><span class="nx">length</span> <span class="o">&gt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="nx">onHide</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$el</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">onFacetFilter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">$target</span><span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fieldId</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s1">&#39;.facet-summary&#39;</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-facet&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">$target</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;data-value&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">queryState</span><span class="p">.</span><span class="nx">addFilter</span><span class="p">({</span><span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;term&#39;</span><span class="p">,</span> <span class="nx">field</span><span class="o">:</span> <span class="nx">fieldId</span><span class="p">,</span> <span class="nx">term</span><span class="o">:</span> <span class="nx">value</span><span class="p">});</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <p>have to trigger explicitly for some reason</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">query</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
events: {
<span class="hljs-string">'click .js-facet-filter'</span>: <span class="hljs-string">'onFacetFilter'</span>
},
initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(model)</span> </span>{
_.bindAll(<span class="hljs-keyword">this</span>, <span class="hljs-string">'render'</span>);
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.facets, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
<span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model.fields, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
<span class="hljs-keyword">this</span>.render();
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">var</span> tmplData = {
fields: <span class="hljs-keyword">this</span>.model.fields.toJSON()
};
tmplData.facets = _.map(<span class="hljs-keyword">this</span>.model.facets.toJSON(), <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(facet)</span> </span>{
<span class="hljs-keyword">if</span> (facet._type === <span class="hljs-string">'date_histogram'</span>) {
facet.entries = _.map(facet.entries, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(entry)</span> </span>{
entry.term = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(entry.time).toDateString();
<span class="hljs-keyword">return</span> entry;
});
}
<span class="hljs-keyword">return</span> facet;
});
<span class="hljs-keyword">var</span> templated = Mustache.render(<span class="hljs-keyword">this</span>.template, tmplData);
<span class="hljs-keyword">this</span>.$el.html(templated);</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">&#182;</a>
</div>
<p>are there actually any facets to show?</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.model.facets.length &gt; <span class="hljs-number">0</span>) {
<span class="hljs-keyword">this</span>.$el.show();
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.$el.hide();
}
},
onHide: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
e.preventDefault();
<span class="hljs-keyword">this</span>.$el.hide();
},
onFacetFilter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
e.preventDefault();
<span class="hljs-keyword">var</span> $target= $(e.target);
<span class="hljs-keyword">var</span> fieldId = $target.closest(<span class="hljs-string">'.facet-summary'</span>).attr(<span class="hljs-string">'data-facet'</span>);
<span class="hljs-keyword">var</span> value = $target.attr(<span class="hljs-string">'data-value'</span>);
<span class="hljs-keyword">this</span>.model.queryState.addFilter({type: <span class="hljs-string">'term'</span>, field: fieldId, term: value});</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">&#182;</a>
</div>
<p>have to trigger explicitly for some reason</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">this</span>.model.query();
}
});
<span class="p">})(</span><span class="nx">jQuery</span><span class="p">,</span> <span class="nx">recline</span><span class="p">.</span><span class="nx">View</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
})(jQuery, recline.View);</pre></div></div>
</li>
</ul>
</div>
</body>
</html>