Add documentation for the g2.chart custom element

goessner · Dec 20, 2020 · 73f2e3a · 73f2e3a
1 parent f382cd8
commit 73f2e3a
Show file tree

Hide file tree

Showing 21 changed files with 495 additions and 263 deletions.
diff --git a/dist/g2.chart.html.js b/dist/g2.chart.html.js
@@ -2944,8 +2944,6 @@ class G2ChartElement extends HTMLElement {
 
         this._ctx = this._root.getElementById('cnv').getContext('2d');
 
-        this._g = g2().del().clr().view({ cartesian: true });
-
         const t = 35;
         this._chart = {
             x: t,
@@ -2963,6 +2961,8 @@ class G2ChartElement extends HTMLElement {
             funcs: () => this.funcs
         };
 
+        this._g = g2().del().clr().view({ cartesian: true }).chart(this._chart);
+
         try {
             // If not true, the element should be referenced by another module.
             if (this.innerHTML !== '') {
@@ -2977,18 +2977,19 @@ class G2ChartElement extends HTMLElement {
                     funcs[itr].fn = (() => Function('"use strict"; return (' + a[4] + ')')())();
                     itr++;
                 }
-                this.funcs = funcs;          
+                this.funcs = funcs;
             }
         }
         catch (e) {
             console.warn(e);
             this._g.txt({ str: e, y: 5 });
         }
         finally {
-            this._g.chart(this._chart).nod({
+            this._g.nod({
                 x: () => this.nod && this.nod().x,
                 y: () => this.nod && this.nod().y,
-                scl: () => this.nod && this.nod().scl || 0});
+                scl: () => this.nod && this.nod().scl || 0
+            });
             this.render();
         }
     }
@@ -2997,8 +2998,9 @@ class G2ChartElement extends HTMLElement {
         this._g.exe(this._ctx);
     }
 
-    setChart(chart) {
-        this._chart = chart;
+    setFuncs(funcs) {
+        this.funcs = funcs;
+        return this;
     }
 
     disconnectedCallback() {

diff --git a/docs/index.html b/docs/index.html
@@ -33,7 +33,8 @@
 <li><a href="./microjam.md/Insert.html">Insert</a></li>
 <li><a href="./microjam.md/Animation.html">Animation</a></li>
 <li><a href="./microjam.md/Interactivity.html">Interactivity</a></li>
-<li><a href="./microjam.md/g2.html.html">Custom HTML Element</a></li>
+<li><a href="./microjam.md/g2.html.html">Custom HTML element</a></li>
+<li><a href="./microjam.md/g2.chart.html.html">Custom chart element</a></li>
 </ul>
 <hr>
 <ul>

diff --git a/docs/microjam.md/Animation.html b/docs/microjam.md/Animation.html
@@ -33,7 +33,8 @@
 <li><a href="../microjam.md/Insert.html">Insert</a></li>
 <li><a href="../microjam.md/Animation.html">Animation</a></li>
 <li><a href="../microjam.md/Interactivity.html">Interactivity</a></li>
-<li><a href="../microjam.md/g2.html.html">Custom HTML Element</a></li>
+<li><a href="../microjam.md/g2.html.html">Custom HTML element</a></li>
+<li><a href="../microjam.md/g2.chart.html.html">Custom chart element</a></li>
 </ul>
 <hr>
 <ul>
@@ -87,13 +88,13 @@ <h3 id="example">Example <a class="plnk" href="#example">#</a></h3>
         <span class="hljs-comment">// draw pendulum ...</span>
         g.del()                                 <span class="hljs-comment">// delete all commands in the queue ...</span>
         .clr()                                  <span class="hljs-comment">// clear the renderers viewport ...</span>
-        .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+        .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
         .lin({<span class="hljs-attr">x1</span>:x0,<span class="hljs-attr">y1</span>:y0,<span class="hljs-attr">x2</span>:x,<span class="hljs-attr">y2</span>:y,<span class="hljs-attr">lw</span>:<span class="hljs-number">3</span>})      <span class="hljs-comment">// pendulum begins ..</span>
-        .cir({<span class="hljs-attr">x</span>:x0,<span class="hljs-attr">y</span>:y0,<span class="hljs-attr">r</span>:<span class="hljs-number">3</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})         <span class="hljs-comment">// .. and ends here.</span>
-        .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+        .cir({<span class="hljs-attr">x</span>:x0,<span class="hljs-attr">y</span>:y0,<span class="hljs-attr">r</span>:<span class="hljs-number">3</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})         <span class="hljs-comment">// .. and ends here.</span>
+        .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
         .exe(ctx);
         phi += dphi;                            <span class="hljs-comment">// increment angle ...</span>
-        requestAnimationFrame(render);          <span class="hljs-comment">// requedst browser to call 'render' again ...</span>
+        requestAnimationFrame(render);          <span class="hljs-comment">// requedst browser to call &#x27;render&#x27; again ...</span>
     }
     render();                                   <span class="hljs-comment">// initial render call.</span>
 </div></code></pre>
@@ -109,15 +110,15 @@ <h3 id="example---enhanced">Example - Enhanced <a class="plnk" href="#example---
 <span class="hljs-keyword">let</span> phi = <span class="hljs-number">0</span>;
 
 world = g2().clr()                              <span class="hljs-comment">// clear and then define static world</span>
-            .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+            .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
             .use({<span class="hljs-attr">grp</span>:pendulum})                <span class="hljs-comment">// reference pendulum here...</span>
             .cir({<span class="hljs-attr">x</span>:x0,<span class="hljs-attr">y</span>:y0,<span class="hljs-attr">r</span>:<span class="hljs-number">3</span>})
 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">render</span>(<span class="hljs-params"></span>) </span>{
     <span class="hljs-keyword">const</span> x=x0+r*<span class="hljs-built_in">Math</span>.sin(phi),y=y0+r*<span class="hljs-built_in">Math</span>.cos(phi);
 
     pendulum.del()                              <span class="hljs-comment">// rebuild pendulum...</span>
             .lin({<span class="hljs-attr">x1</span>:x0,<span class="hljs-attr">y1</span>:y0,<span class="hljs-attr">x2</span>:x,<span class="hljs-attr">y2</span>:y,<span class="hljs-attr">lw</span>:<span class="hljs-number">3</span>})  <span class="hljs-comment">// pendulum begins ..</span>
-            .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+            .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
     world.exe(ctx);
     phi += dphi;
     requestAnimationFrame(render);
@@ -139,10 +140,10 @@ <h3 id="example---enhanced">Example - Enhanced <a class="plnk" href="#example---
 <h3 id="example---timed-animation">Example - Timed Animation <a class="plnk" href="#example---timed-animation">#</a></h3>
 <p>Using <code>window.requestAnimationFrame</code> makes timed animation particularly easy. It passes a timestamp with every call
 to the callback function.</p>
-<pre><code class="code-line language-javascript"><div><span class="hljs-keyword">const</span> ctx = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"c"</span>).getContext(<span class="hljs-string">"2d"</span>),
+<pre><code class="code-line language-javascript"><div><span class="hljs-keyword">const</span> ctx = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;c&quot;</span>).getContext(<span class="hljs-string">&quot;2d&quot;</span>),
         pendulum = g2(), x0 = <span class="hljs-number">50</span>, y0 = <span class="hljs-number">50</span>, r = <span class="hljs-number">40</span>, omega = <span class="hljs-number">1.5</span>,
         world = g2().clr()
-                    .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+                    .ply({<span class="hljs-attr">pts</span>:[<span class="hljs-number">44</span>,<span class="hljs-number">40</span>,<span class="hljs-number">56</span>,<span class="hljs-number">40</span>,x0,y0],<span class="hljs-attr">closed</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
                     .use({<span class="hljs-attr">grp</span>:pendulum})
                     .cir({<span class="hljs-attr">x</span>:x0,<span class="hljs-attr">y</span>:y0,<span class="hljs-attr">r</span>:<span class="hljs-number">3</span>});
 <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">render</span>(<span class="hljs-params">time</span>) </span>{
@@ -153,7 +154,7 @@ <h3 id="example---timed-animation">Example - Timed Animation <a class="plnk" hre
 
     pendulum.del()
             .lin({<span class="hljs-attr">x1</span>:x0,<span class="hljs-attr">y1</span>:y0,<span class="hljs-attr">x2</span>:x,<span class="hljs-attr">y2</span>:y,<span class="hljs-attr">lw</span>:<span class="hljs-number">3</span>})
-            .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"#ddd"</span>})
+            .cir({<span class="hljs-attr">x</span>:x,<span class="hljs-attr">y</span>:y,<span class="hljs-attr">r</span>:<span class="hljs-number">8</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;#ddd&quot;</span>})
     world.exe(ctx);
     requestAnimationFrame(render);
 }

diff --git a/docs/microjam.md/Concepts.html b/docs/microjam.md/Concepts.html
@@ -33,7 +33,8 @@
 <li><a href="../microjam.md/Insert.html">Insert</a></li>
 <li><a href="../microjam.md/Animation.html">Animation</a></li>
 <li><a href="../microjam.md/Interactivity.html">Interactivity</a></li>
-<li><a href="../microjam.md/g2.html.html">Custom HTML Element</a></li>
+<li><a href="../microjam.md/g2.html.html">Custom HTML element</a></li>
+<li><a href="../microjam.md/g2.chart.html.html">Custom chart element</a></li>
 </ul>
 <hr>
 <ul>
@@ -77,8 +78,8 @@ <h3 id="how-queue-processing-works">How Queue Processing Works <a class="plnk" h
       .l({<span class="hljs-attr">x</span>:<span class="hljs-number">90</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">10</span>})              <span class="hljs-comment">// second point</span>
       .l({<span class="hljs-attr">x</span>:<span class="hljs-number">50</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">90</span>})              <span class="hljs-comment">// third point</span>
   .z()                              <span class="hljs-comment">// close path</span>
-.drw({<span class="hljs-attr">ls</span>:<span class="hljs-string">"green"</span>,<span class="hljs-attr">lw</span>:<span class="hljs-number">3</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">"orange"</span>}) <span class="hljs-comment">// stroke and fill</span>
-.exe(ctx);                          <span class="hljs-comment">// finally render graphics addressing 'ctx'.</span>
+.drw({<span class="hljs-attr">ls</span>:<span class="hljs-string">&quot;green&quot;</span>,<span class="hljs-attr">lw</span>:<span class="hljs-number">3</span>,<span class="hljs-attr">fs</span>:<span class="hljs-string">&quot;orange&quot;</span>}) <span class="hljs-comment">// stroke and fill</span>
+.exe(ctx);                          <span class="hljs-comment">// finally render graphics addressing &#x27;ctx&#x27;.</span>
 </div></code></pre>
 <p><img src="../img/triangle.png" alt="star1" class="loading" id="image-hash--732970443"></p>
 <p>There are only two objects <code>g2</code> and <code>ctx</code> involved. Both are nearly completely independent
@@ -157,20 +158,20 @@ <h5 id="separating-model-from-view">Separating Model from View <a class="plnk" h
 to the demand, to strictly separate the model from the view. But then, who knows better
 how to draw a shape than the shape itself?</p>
 <pre><code class="code-line language-javascript"><div><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Circle</span> </span>{
-    <span class="hljs-keyword">constructor</span>(x,y,r) {<span class="hljs-keyword">this</span>.x=x;<span class="hljs-keyword">this</span>.y=y;<span class="hljs-keyword">this</span>.r=r}
-    render(g) {g.cir(<span class="hljs-keyword">this</span>.x,<span class="hljs-keyword">this</span>.y,<span class="hljs-keyword">this</span>.r)}
+    <span class="hljs-keyword">constructor</span>(x,y,r) {<span class="hljs-built_in">this</span>.x=x;<span class="hljs-built_in">this</span>.y=y;<span class="hljs-built_in">this</span>.r=r}
+    render(g) {g.cir(<span class="hljs-built_in">this</span>.x,<span class="hljs-built_in">this</span>.y,<span class="hljs-built_in">this</span>.r)}
 }
 <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Rect</span> </span>{
-    <span class="hljs-keyword">constructor</span>(x,y,b,h) {<span class="hljs-keyword">this</span>.x=x;<span class="hljs-keyword">this</span>.y=y;<span class="hljs-keyword">this</span>.b=b;<span class="hljs-keyword">this</span>.h=h}
-    render(g) {g.rec(<span class="hljs-keyword">this</span>.x,<span class="hljs-keyword">this</span>.y,<span class="hljs-keyword">this</span>.w,<span class="hljs-keyword">this</span>.h)}
+    <span class="hljs-keyword">constructor</span>(x,y,b,h) {<span class="hljs-built_in">this</span>.x=x;<span class="hljs-built_in">this</span>.y=y;<span class="hljs-built_in">this</span>.b=b;<span class="hljs-built_in">this</span>.h=h}
+    render(g) {g.rec(<span class="hljs-built_in">this</span>.x,<span class="hljs-built_in">this</span>.y,<span class="hljs-built_in">this</span>.w,<span class="hljs-built_in">this</span>.h)}
 }
 <span class="hljs-keyword">const</span> model = [<span class="hljs-keyword">new</span> Circle({<span class="hljs-attr">x</span>:<span class="hljs-number">40</span>,<span class="hljs-attr">y</span>:<span class="hljs-number">60</span>,<span class="hljs-attr">r</span>:<span class="hljs-number">20</span>}),<span class="hljs-keyword">new</span> Rect({<span class="hljs-attr">x</span>:<span class="hljs-number">45</span>,<span class="hljs-attr">y</span>:<span class="hljs-number">25</span>,<span class="hljs-attr">b</span>:<span class="hljs-number">40</span>,<span class="hljs-attr">h</span>:<span class="hljs-number">40</span>})],
         g = g2().grid(),
-        ctx1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'c1'</span>).getContext(<span class="hljs-string">'2d'</span>), <span class="hljs-comment">// view 1</span>
-        ctx2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'c2'</span>).getContext(<span class="hljs-string">'2d'</span>); <span class="hljs-comment">// view 2</span>
+        ctx1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;c1&#x27;</span>).getContext(<span class="hljs-string">&#x27;2d&#x27;</span>), <span class="hljs-comment">// view 1</span>
+        ctx2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;c2&#x27;</span>).getContext(<span class="hljs-string">&#x27;2d&#x27;</span>); <span class="hljs-comment">// view 2</span>
 
 <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i <span class="hljs-keyword">of</span> model) {  <span class="hljs-comment">// build command queue of ...</span>
-    i.render(g);        <span class="hljs-comment">// ... model's shapes drawing commands.</span>
+    i.render(g);        <span class="hljs-comment">// ... model&#x27;s shapes drawing commands.</span>
 }
 g.exe(ctx1);            <span class="hljs-comment">// render to view 1</span>
 g.exe(ctx2);            <span class="hljs-comment">// render to view 2</span>