Skip to content

Commit

Permalink
Update the documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@pa7
pa7 committed Aug 4, 2014
1 parent 13cd7ed commit 7a6b603
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 21 deletions.
41 changes: 41 additions & 0 deletions docs/assets/css/commons.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
html, body, p, div { margin:0; padding:0; }
.wrapper { width:840px; position:relative; margin:auto; }

.breadcrumb-trail {
list-style:none;
list-style-type:none;
display:block;
font-size:10pt;
margin-top:0;
margin-bottom:0;
padding-left:0;
}
.breadcrumb-trail li {
display:inline-block;
padding:5px;
margin-right:15px;
position:relative;
line-height:normal;
}
.breadcrumb-trail a {
text-decoration:none;
color:blue;
font-weight:400;
padding-bottom:1px;

}
.breadcrumb-trail a:hover {
border-bottom:1px solid blue;
}
.breadcrumb-trail li:before{
content:'\0BB';
position:absolute;
left:-14px;
top:0px;
font-weight:normal;
font-size:14pt;
}
.breadcrumb-trail li:first-child:before {
content:'';
margin-left:0;
}
35 changes: 23 additions & 12 deletions docs/assets/css/docs.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
body, h1, h2, h3 { margin:0; padding:0; }
body { font-family:Helvetica Neue; font-size:18px; }
html {
color: #333;
font-family: sans-serif;
font-size: 16pt;
font-weight: 100;
line-height: 1.4em;
}
html, body, p, div { margin:0; padding:0; }
.hot-doc {
background:#f65656;
}
Expand All @@ -10,17 +16,18 @@ body { font-family:Helvetica Neue; font-size:18px; }
background:#4C94FF;
}
.wrapper {
width:auto;
position:relative;
max-width:900px;
margin:auto;
padding-top:25px;
}
.description {
padding:10px;
line-height: 28px;
}
strong.highlight {
padding: 4px;
border-radius: 4px;
font-weight: normal;
color:white;
}
Expand All @@ -34,12 +41,11 @@ strong.highlight {
font-size:22px;
letter-spacing:1px;
font-weight:bold;
background: -webkit-linear-gradient(white, rgba(0, 0, 0, 0.11));
background: -moz-linear-gradient(rgba(255,255,255,.35), rgba(0, 0, 0, 0.11));
background:rgba(0, 0, 0, 0.11);
}

h2 { font-size:40px; padding-left:10px; }
h1 { font-size:60px; text-align:center; margin-top:30px;}
h2 { padding-left:10px; }
h1 { text-align:center; margin-top:30px;}
ul {
list-style: none;
margin:0;
Expand Down Expand Up @@ -73,11 +79,12 @@ li a { color:white; letter-spacing:1px;}
color: black;
display:inline-table;
box-shadow: 0 0 1px black;
width:48%;
width:45%;
margin-right:1%;
border-radius:5px;

overflow:hidden;
}
#index-heatmapInstance { width:51% !important;}
#index { width:65%; margin:auto; margin-top:30px; margin-bottom:50px; }
section { margin-bottom:60px; }
#message {
Expand All @@ -91,7 +98,7 @@ section { margin-bottom:60px; }
padding-right:20px;
margin-bottom:50px;
}
#message h3 { padding:20px; padding-left:0; font-weight:normal; cursor:pointer;}
#message h3 { padding-left:0; font-weight:normal; cursor:pointer;}
#msg-content {
height:230px; padding-top:0; padding-bottom:0; opacity:1;
}
Expand All @@ -103,12 +110,11 @@ section { margin-bottom:60px; }
#msg-content.hide{ height:0; padding-left:20px; padding-right:20px; opacity:0; }
.msg { padding:10px;background:white; line-height:32px;}
#btn-confirm {
padding: 15px;
padding: 10px;
text-align: center;
background: #54cb44;
margin: auto;
color: white;
border-radius: 10px;
cursor: pointer;
-webkit-transition: 0.7s all ease;
-moz-transition:.7 all ease;
Expand All @@ -123,3 +129,8 @@ margin-top: 15px;
background: #f65656;
}
.description ul li { margin-bottom:15px; margin-top:10px; }


@media(max-width:800px) {
#message { display:none; }
}
44 changes: 35 additions & 9 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,23 @@
<head>
<meta charset="utf-8">
<title>heatmap.js Documentation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/commons.css" />
<link rel="stylesheet" href="assets/css/docs.css" />
<link rel="stylesheet" href="assets/css/prism.css" />
</head>
<body>
<div class="wrapper">
<h1>heatmap.js Documentation</h1>
<ol class="breadcrumb-trail">
<li><a href="//www.patrick-wied.at/static/heatmapjs/" title="heatmap.js dynamic heatmaps for the web">heatmap.js</a></li>
<li>Documentation</li>
</ol>
<div id="message">
<h3 id="activate-msg">What is it about the colors in the overview?</h3>
<div id="msg-content">
<div class="msg">
<u style="font-weight:bold;">The colors in the overview is a priorization of API functionality:</u> <br /><strong class="hot-doc highlight"><u>red</u> **hot docs** ;-)</strong> : most commonly used functions <br /><strong class="avg-doc highlight"><u>green</u></strong> : used for customized implementations<br /><strong class="cold-doc highlight"><u>blue</u></strong> : rarely used functionality
<u style="font-weight:bold;">The colors in the overview is a prioritization of API functions:</u> <br /><strong class="hot-doc highlight"><u>red</u> **hot docs**</strong> : most commonly used functions ;-)<br /><strong class="avg-doc highlight"><u>green</u></strong> : used for customized implementations<br /><strong class="cold-doc highlight"><u>blue</u></strong> : rarely used functionality
</div>
<div id="btn-confirm">got it, thank you</div>
</div>
Expand Down Expand Up @@ -54,15 +60,17 @@ <h3 id="h337-create">h337.create(configObject)</h3>
Returns a <strong>heatmapInstance</strong>.<br /><br />
Use h337.create to create heatmap instances. A Heatmap can be customized with the configObject. <br />The configObject parameter is required. <br /><br/><strong><u>Possible configuration properties:</u></strong><br />
<ul>
<li><strong>container</strong> (DOMNode) *required* <br /> A DOM node where the heatmap canvas should be appended (heatmap will adapt to the node's size)</li>
<li><strong>backgroundColor</strong> (string) *optional*<br />
A background color string in form of hexcode, color name, or rgb(a)</li>
<li><strong>container</strong> (DOMNode) *required* <br /> A DOM node where the heatmap canvas should be appended to (heatmap will adapt to the node's size)</li>
<li><strong>gradient</strong> (object) *optional*<br />
An object that represents the gradient (syntax: number string [0,1] : color string), check out the example </li>
<li><strong>radius</strong> (number) *optional*<br />The radius each datapoint will have (if not specified on the datapoint itself)</li>
<li><strong>opacity</strong> (number) [0,1] *optional* default = .6<br />A global opacity for the whole heatmap. This overrides maxOpacity and minOpacity if set!</li>
<li><strong>maxOpacity</strong> (number) [0,1] *optional*<br />The maximal opacity the highest value in the heatmap will have. (will be overridden if opacity set)</li>
<li><strong>minOpacity</strong>(number) [0,1] *optional*<br />The minimum opacity the lowest value in the heatmap will have (will be overridden if opacity set)</li>
<li><strong>onExtremaChange</strong> function callback<br />Pass a callback to receive extrema change updates. Useful for DOM legends.</li>
<li><strong>blur</strong> (number) [0,1] *optional* default = 0.85<br />The blur factor that will be applied to all datapoints. The higher the blur factor is the smoother the gradients will be</li>
<li><strong>blur</strong> (number) [0,1] *optional* default = 0.85<br />The blur factor that will be applied to all datapoints. The higher the blur factor is, the smoother the gradients will be</li>
<li><strong>xField</strong> (string) *optional* default = "x"<br />The property name of your x coordinate in a datapoint</li>
<li><strong>yField</strong> (string) *optional* default = "y"<br />The property name of your y coordinate in a datapoint</li>
<li><strong>valueField</strong> (string) *optional* default = "value"<br />The property name of your y coordinate in a datapoint</li>

This comment has been minimized.

Sign in to view

Copy link
@paulochf

paulochf Oct 7, 2014

This line was duplicated from the above one, and don't say what the value is.
Expand All @@ -79,14 +87,32 @@ <h4>Example configurations</h4>
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);</code></pre>
Custom gradient configuration
<pre><code class="language-javascript">// create configuration object
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75,
gradient: {
// enter n keys between 0 and 1 here
// for gradient color customization
'.5': 'blue',
'.8': 'red',
'.95': 'white'
}
};
var heatmapInstance = h337.create(config);</code></pre>

</div>
</div>
<div class="fn">
<!-- <div class="fn">
<h3 id="h337-register">h337.register(pluginKey, plugin)</h3>
<div class="description">
to be written
</div>
</div>
</div> -->
</div>
</section>
<section>
Expand Down Expand Up @@ -132,19 +158,19 @@ <h3 id="heatmap-setData">heatmapInstance.setData(object)</h3>
<h3 id="heatmap-setDataMax">heatmapInstance.setDataMax(number)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Changes the upper bound of your dataset and triggers a complete rerender.
Changes the upper bound of your dataset and triggers a complete rerendering.
<pre><code class="language-javascript">heatmapInstance.setDataMax(200);
// setting the maximum value triggers a complete rerender of the heatmap
// setting the maximum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMax(100);</code></pre>
</div>
</div>
<div class="fn">
<h3 id="heatmap-setDataMin">heatmapInstance.setDataMin(number)</h3>
<div class="description">
Returns <strong>heatmapInstance</strong><br /><br />
Changes the lower bound of your dataset and triggers a complete rerender.
Changes the lower bound of your dataset and triggers a complete rerendering.
<pre><code class="language-javascript">heatmapInstance.setDataMin(10);
// setting the minimum value triggers a complete rerender of the heatmap
// setting the minimum value triggers a complete rerendering of the heatmap
heatmapInstance.setDataMin(0);</code></pre>
</div>
</div>
Expand Down

0 comments on commit 7a6b603

Please sign in to comment.