Skip to content

Commit

Permalink
docs(tooltip): add sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@weihanchen
weihanchen committed Nov 20, 2017
1 parent 483b952 commit 91e597e
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 10 deletions.
12 changes: 7 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ Note: if words element not contains color property, default will use [d3 schemeC
* `width=[number]`
* `padding=[number]` -> [optional] padding for each word, defaults to `5`
* `rotate=[number, function]` -> [optional] rotation for each word, default to `~~(Math.random() * 2) * 60`
* `use-tooltip=[boolean]`
* `use-transition=[boolean]`
* `use-tooltip=[boolean]` default tooltip template
* `use-transition=[boolean]` transition with font size
* `on-click=[function]` -> word clicked callback

## Directive Usage ##
```html
<div id="wordsCloud">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="5" rotate="appCtrl.rotate" on-click="appCtrl.wordClicked">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="5" rotate="appCtrl.rotate" use-tooltip="appCtrl.useTooltip" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked">
</word-cloud>
</div>
```
Expand All @@ -83,9 +83,11 @@ Inject `angular-d3-word-cloud` into angular module, set up some options to our c
self.width = $element.find('#wordsCloud')[0].offsetWidth;
self.wordClicked = wordClicked;
self.rotate = rotate;
self.useTooltip = true;
self.useTransition = false;
self.words = [
{text: 'Angular',size: 25, color: '#6d989e'},
{text: 'Angular2',size: 35, color: '#473fa3'}
{text: 'Angular',size: 25, color: '#6d989e', tooltipText: 'Angular Tooltip'},
{text: 'Angular2',size: 35, color: '#473fa3', tooltipText: 'Angular2 Tooltip'}
]

function rotate() {
Expand Down
30 changes: 26 additions & 4 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ <h3>
<li><code>width=[number]</code></li>
<li><code>padding=[number]</code> -&gt; [optional] padding for each word, defaults to <code>5</code></li>
<li><code>rotate=[number, function]</code> -&gt; [optional] rotation for each word, defaults to <code>~~(Math.random() * 2) * 60</code></li>
<li><code>use-tooltip=[boolean]</code> -&gt; [optional] default tooltip template</li>
<li><code>use-transition=[boolean]</code> -&gt; [optional] transition with font size</li>
<li>
<code>on-click=[function]</code> -&gt; word clicked callback</li>

Expand All @@ -74,6 +76,8 @@ <h3>
&lt;<span class="pl-ent">word</span><span class="pl-e">-cloud</span> <span class="pl-e">words</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.words<span class="pl-pds">"</span></span> <span class="pl-e">width</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.width<span class="pl-pds">"</span></span> <span class="pl-e">height</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.height<span class="pl-pds">"</span></span>
<span class="pl-e">padding</span>=<span class="pl-s"><span class="pl-pds">"</span>10<span class="pl-pds">"</span></span>
<span class="pl-e">rotate</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.rotate<span class="pl-pds">"</span></span>
<span class="pl-e">use-tooltip</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.useTooltip<span class="pl-pds">"</span></span>
<span class="pl-e">use-transition</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.useTransition<span class="pl-pds">"</span></span>
<span class="pl-e">on-click</span>=<span class="pl-s"><span class="pl-pds">"</span>appCtrl.wordClicked<span class="pl-pds">"</span></span>&gt;
&lt;/<span class="pl-ent">word</span><span class="pl-e">-cloud</span>&gt;
&lt;/<span class="pl-ent">div</span>&gt;</pre></div>
Expand All @@ -89,9 +93,11 @@ <h3>
<span class="pl-smi">self</span>.<span class="pl-c1">width</span> <span class="pl-k">=</span> <span class="pl-smi">$element</span>.<span class="pl-c1">find</span>(<span class="pl-s"><span class="pl-pds">'</span>word-cloud<span class="pl-pds">'</span></span>)[<span class="pl-c1">0</span>].<span class="pl-smi">offsetWidth</span>;
<span class="pl-smi">self</span>.<span class="pl-smi">wordClicked</span> <span class="pl-k">=</span> wordClicked;
<span class="pl-smi">self</span>.<span class="pl-smi">rotate</span> <span class="pl-k">=</span> rotate;
<span class="pl-smi">self</span>.<span class="pl-smi">useTooltip</span> <span class="pl-k">=</span> true;
<span class="pl-smi">self</span>.<span class="pl-smi">useTransition</span> <span class="pl-k">=</span> true;
<span class="pl-smi">self</span>.<span class="pl-smi">words</span> <span class="pl-k">=</span> [
{text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular<span class="pl-pds">'</span></span>,size<span class="pl-k">:</span> <span class="pl-c1">25</span>,color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#0e6632<span class="pl-pds">'</span></span>},
{text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular2<span class="pl-pds">'</span></span>,size<span class="pl-k">:</span> <span class="pl-c1">35</span>,color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#0e558<span class="pl-pds">'</span></span>}
{text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular<span class="pl-pds">'</span></span>,size<span class="pl-k">:</span> <span class="pl-c1">25</span>,color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#0e6632<span class="pl-pds">'</span></span>,tooltipText<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular Tooltip<span class="pl-pds">'</span></span>},
{text<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular2<span class="pl-pds">'</span></span>,size<span class="pl-k">:</span> <span class="pl-c1">35</span>,color<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>#0e558<span class="pl-pds">'</span></span>,tooltipText<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">'</span>Angular2 Tooltip<span class="pl-pds">'</span></span>}
]


Expand Down Expand Up @@ -125,8 +131,23 @@ <h3><a id="example" class="anchor" href="#example" aria-hidden="true"><span aria
<p></p>
<button class="btn-sm" ng-click="appCtrl.generateWords()"><i class="fa fa-cloud" aria-hidden="true"></i> Generate</button>
<p></p>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" ng-model="appCtrl.useTooltip">
tooltip
</label>
<label class="form-check-label">
<input class="form-check-input" type="checkbox" ng-model="appCtrl.useTransition">
transition
</label>
</div>
<p></p>
<div class="form-check">
<label class="form-check-label">

</div>
<div id="wordsCloud">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="appCtrl.padding" rotate="appCtrl.rotate" use-transition="true" use-tooltip="true" on-click="appCtrl.wordClicked">
<word-cloud words="appCtrl.words" width="appCtrl.width" height="appCtrl.height" padding="appCtrl.padding" rotate="appCtrl.rotate" use-transition="appCtrl.useTransition" use-tooltip="appCtrl.useTooltip" use-transition="appCtrl.useTransition" on-click="appCtrl.wordClicked">
</word-cloud>
</div>
<!--advance usage-->
Expand Down Expand Up @@ -161,7 +182,8 @@ <h4>
<span class="pl-k">return</span> {
text<span class="pl-k">:</span> <span class="pl-smi">word</span>.<span class="pl-c1">text</span>,
size<span class="pl-k">:</span> <span class="pl-c1">Math</span>.<span class="pl-c1">round</span>(maxWordSize <span class="pl-k">-</span> ((maxCount <span class="pl-k">-</span> <span class="pl-smi">word</span>.<span class="pl-smi">count</span>) <span class="pl-k">*</span> step)),
color<span class="pl-k">:</span> <span class="pl-smi">self</span>.<span class="pl-c1">customColor</span>
color<span class="pl-k">:</span> <span class="pl-smi">self</span>.<span class="pl-c1">customColor</span>,
tooltipText<span class="pl-k">:</span> <span class="pl-smi">word</span>.<span class="pl-c1">text</span> + 'tooltip',
}
})
<span class="pl-smi">self</span>.<span class="pl-c1">width</span> <span class="pl-k">=</span> width;
Expand Down
5 changes: 4 additions & 1 deletion docs/js/controllers/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
self.generateWords = generateWords;
self.padding = 8;
self.editPadding = 8;
self.useTooltip = true;
self.useTransition = true;
self.wordClicked = wordClicked;
self.words = [];
generateWords();
Expand Down Expand Up @@ -50,7 +52,8 @@
return {
text: word.text,
size: Math.round(maxWordSize - ((maxCount - word.count) * step)),
color: self.customColor
color: self.customColor,
tooltipText: word.text + ' tooltip'
};
});
self.width = width;
Expand Down

0 comments on commit 91e597e

Please sign in to comment.