scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
912 lines (604 loc) • 39.7 kB
HTML
<html>
<head>
<title>Demo Modules 001</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 …</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="canvas-minimap.html">
./demo/modules/canvas-minimap.js
</a>
<a class="source" href="canvas-scene-editor.html">
./demo/modules/canvas-scene-editor.js
</a>
<a class="source" href="dom-entity-editor.html">
./demo/modules/dom-entity-editor.js
</a>
<a class="source" href="entity-copy-paste.html">
./demo/modules/entity-copy-paste.js
</a>
<a class="source" href="entity-manipulation-gui.html">
./demo/modules/entity-manipulation-gui.js
</a>
<a class="source" href="entity-navigation.html">
./demo/modules/entity-navigation.js
</a>
<a class="source" href="entity-ring-builder.html">
./demo/modules/entity-ring-builder.js
</a>
<a class="source" href="london-crime-graphic.html">
./demo/modules/london-crime-graphic.js
</a>
<a class="source" href="london-crime-lines.html">
./demo/modules/london-crime-lines.js
</a>
<a class="source" href="london-crime-stacked-bars.html">
./demo/modules/london-crime-stacked-bars.js
</a>
<a class="source" href="lottie-loader.html">
./demo/modules/lottie-loader.js
</a>
<a class="source" href="simple-chart-frame-tests.html">
./demo/modules/simple-chart-frame-tests.js
</a>
<a class="source" href="simple-chart-frame.html">
./demo/modules/simple-chart-frame.js
</a>
<a class="source" href="simple-graph-lines.html">
./demo/modules/simple-graph-lines.js
</a>
<a class="source" href="simple-graph-stacked-bars.html">
./demo/modules/simple-graph-stacked-bars.js
</a>
<a class="source" href="wikipedia-views-spiral-chart.html">
./demo/modules/wikipedia-views-spiral-chart.js
</a>
<a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html">
./demo/snippets/animated-highlight-gradient-text-snippet.js
</a>
<a class="source" href="../snippets/animated-hover-gradient-snippet.html">
./demo/snippets/animated-hover-gradient-snippet.js
</a>
<a class="source" href="../snippets/animated-word-gradient-snippet.html">
./demo/snippets/animated-word-gradient-snippet.js
</a>
<a class="source" href="../snippets/before-after-slider-infographic.html">
./demo/snippets/before-after-slider-infographic.js
</a>
<a class="source" href="../snippets/bubbles-text-snippet.html">
./demo/snippets/bubbles-text-snippet.js
</a>
<a class="source" href="../snippets/green-box-snippet.html">
./demo/snippets/green-box-snippet.js
</a>
<a class="source" href="../snippets/jazzy-button-snippet.html">
./demo/snippets/jazzy-button-snippet.js
</a>
<a class="source" href="../snippets/page-performance-snippet-test.html">
./demo/snippets/page-performance-snippet-test.js
</a>
<a class="source" href="../snippets/page-performance-snippet.html">
./demo/snippets/page-performance-snippet.js
</a>
<a class="source" href="../snippets/pan-image-snippet.html">
./demo/snippets/pan-image-snippet.js
</a>
<a class="source" href="../snippets/placeholder-effect-snippet.html">
./demo/snippets/placeholder-effect-snippet.js
</a>
<a class="source" href="../snippets/ripple-effect-snippet.html">
./demo/snippets/ripple-effect-snippet.js
</a>
<a class="source" href="../snippets/risograph-text-gradient-snippet.html">
./demo/snippets/risograph-text-gradient-snippet.js
</a>
<a class="source" href="../snippets/spotlight-text-snippet-test.html">
./demo/snippets/spotlight-text-snippet-test.js
</a>
<a class="source" href="../snippets/spotlight-text-snippet.html">
./demo/snippets/spotlight-text-snippet.js
</a>
<a class="source" href="../snippets/swirling-stripes-text-snippet.html">
./demo/snippets/swirling-stripes-text-snippet.js
</a>
<a class="source" href="../snippets/text-snippet-helper.html">
./demo/snippets/text-snippet-helper.js
</a>
<a class="source" href="../snippets/word-highlighter-snippet.html">
./demo/snippets/word-highlighter-snippet.js
</a>
<a class="source" href="../snippets/worley-text-gradient-snippet.html">
./demo/snippets/worley-text-gradient-snippet.js
</a>
</div>
</div>
</li>
</ul>
<ul class="sections">
<li id="section-1">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-1">§</a>
</div>
<h1 id="demo-modules-001">Demo Modules 001</h1>
<p>Scrawl-canvas modularized code - London crime charts</p>
<p>Related files:</p>
<ul>
<li><a href="../modules-001.html">London crime charts - main module</a></li>
<li><a href="./london-crime-graphic.html">London crime graphic module</a></li>
<li><a href="./london-crime-lines.html">London crime lines module</a></li>
<li><a href="./london-crime-stacked-bars.html">London crime stacked bar module</a></li>
<li><a href="./simple-chart-frame.html">Simple chart frame module</a></li>
<li><a href="./simple-chart-frame-tests.html">Simple chart frame tests module</a></li>
<li><a href="./simple-graph-lines.html">Simple graph lines module</a></li>
<li><a href="./simple-graph-stacked-bars.html">Simple graph stacked bars module</a></li>
</ul>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/*
Data supplied to graph module as Javascript object with structure:
{
yearLabels: ['year-1-label', 'year-2-label', ...],
data: [year-1-data, year-2-data, ...],
}
*/</span>
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../../source/scrawl.js'</span>;</pre></div></div>
</li>
<li id="section-2">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-2">§</a>
</div>
<p>We need to adapt the graph frame with data specific to this graph</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> frame <span class="hljs-keyword">from</span> <span class="hljs-string">'./simple-chart-frame.js'</span>;</pre></div></div>
</li>
<li id="section-3">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-3">§</a>
</div>
<p>Get the Magic Numbers from the chart frame</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> graphWidth = frame.<span class="hljs-property">graphWidth</span>,
graphHeight = frame.<span class="hljs-property">graphHeight</span>,
graphBottom = frame.<span class="hljs-property">graphBottom</span>,
graphLeft = frame.<span class="hljs-property">graphLeft</span>;</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Define the group variables</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> positionGroup,
lineGroup,
pinGroup;</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> selectedColumn = <span class="hljs-number">0</span>,
space = <span class="hljs-string">''</span>,
currentData;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>The exported ‘build’ function</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> build = <span class="hljs-keyword">function</span> (<span class="hljs-params">namespace, canvas, dataSet</span>) {
space = namespace;
currentData = dataSet;</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Only build the Groups and entitys if they don’t already exist</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (!positionGroup) {
<span class="hljs-keyword">let</span> yearLabels = dataSet.<span class="hljs-property">yearLabels</span>,
xStep = graphWidth / yearLabels.<span class="hljs-property">length</span>;</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>The ‘positions’ Group</p>
<ul>
<li>A set of Block entitys used as pivots by the other entitys</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> positionGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-position-group`</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
});</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>The ‘lines’ Group</p>
<ul>
<li>A set of line Shape entitys </li>
<li>Use position entitys for their start and end coordinate pivots</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> lineGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-line-group`</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>The ‘pins’ Group</p>
<ul>
<li>A set of Wheel entitys to mark the position of each data point</li>
<li>Use position entitys as their pivots</li>
<li>Interactive</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre> pinGroup = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-pin-group`</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">3</span>,
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Build the entitys</p>
</div>
<div class="content"><div class='highlight'><pre> yearLabels.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">label, index</span>) =></span> {</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Hidden position Blocks</p>
</div>
<div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index}</span>-position`</span>,
<span class="hljs-attr">group</span>: positionGroup,
<span class="hljs-attr">width</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'none'</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">`<span class="hljs-subst">${graphLeft + (xStep * index) + (xStep / <span class="hljs-number">2</span>)}</span>%`</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">`<span class="hljs-subst">${graphBottom}</span>%`</span>,
});
<span class="hljs-keyword">if</span> (index) {</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Line Shapes</p>
</div>
<div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">makeLine</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index}</span>-line`</span>,
<span class="hljs-attr">group</span>: lineGroup,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index - <span class="hljs-number">1</span>}</span>-position`</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">endPivot</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index}</span>-position`</span>,
<span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">useStartAsControlPoint</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
});
}</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>Visible pin Wheels</p>
</div>
<div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">makeWheel</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index}</span>-pin`</span>,
<span class="hljs-attr">group</span>: pinGroup,
<span class="hljs-attr">order</span>: index,
<span class="hljs-attr">radius</span>: <span class="hljs-number">8</span>,
<span class="hljs-attr">handleX</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">handleY</span>: <span class="hljs-string">'center'</span>,
<span class="hljs-attr">pivot</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${index}</span>-position`</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'pivot'</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'aliceblue'</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'blue'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'drawThenFill'</span>,
});
});</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>All further calculation happens in the ‘update’ function</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">update</span>();</pre></div></div>
</li>
<li id="section-16">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-16">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre> frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'up'</span>, <span class="hljs-function">() =></span> {});
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'down'</span>, <span class="hljs-function">() =></span> {});
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'left'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'left'</span>));
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'right'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'right'</span>));</pre></div></div>
</li>
<li id="section-17">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-17">§</a>
</div>
<p>Display the graph entitys</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">show</span>();
}
};</pre></div></div>
</li>
<li id="section-18">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-18">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">doNavigation</span> = (<span class="hljs-params">direction</span>) => {
<span class="hljs-keyword">const</span> { yearLabels } = currentData;
<span class="hljs-keyword">const</span> len = yearLabels.<span class="hljs-property">length</span>;
<span class="hljs-keyword">switch</span> (direction) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span> :
selectedColumn--;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span> :
selectedColumn++;
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">if</span> (selectedColumn < <span class="hljs-number">0</span>) selectedColumn = len - <span class="hljs-number">1</span>;
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (selectedColumn >= len) selectedColumn = <span class="hljs-number">0</span>;
<span class="hljs-title function_">updateSelected</span>();
};</pre></div></div>
</li>
<li id="section-19">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-19">§</a>
</div>
<p>Processing</p>
<p>Determine the range batch</p>
<ul>
<li>To make sure the graph covers as much vertical space as possible</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">calculateBatchValue</span> = (<span class="hljs-params">val</span>) => {
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">50000</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">10000</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">25000</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">5000</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">10000</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">2000</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">5000</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">1000</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">2500</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">500</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">1000</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">200</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">500</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">100</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">250</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">50</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">100</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">20</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">50</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">10</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">25</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">5</span>;
<span class="hljs-keyword">if</span> (val > <span class="hljs-number">10</span>) <span class="hljs-keyword">return</span> <span class="hljs-number">2</span>;
<span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
}</pre></div></div>
</li>
<li id="section-20">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-20">§</a>
</div>
<p>The exported ‘update’ function</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">update</span> = (<span class="hljs-params"></span>) => {</pre></div></div>
</li>
<li id="section-21">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-21">§</a>
</div>
<p>Only update if we have entitys to update</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (positionGroup) {</pre></div></div>
</li>
<li id="section-22">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-22">§</a>
</div>
<p>Initial positioning calculations</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> yearLabels = currentData.<span class="hljs-property">yearLabels</span>,
data = currentData.<span class="hljs-property">data</span>,
max = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(...data),
min = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">min</span>(...data),
batch = <span class="hljs-title function_">calculateBatchValue</span>(max - min);
max = ((<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(max / batch)) * batch) + batch;
min = (<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(min / batch)) * batch;
<span class="hljs-keyword">let</span> categoryValue = graphHeight / (max - min),
yDepth = graphBottom - graphHeight;</pre></div></div>
</li>
<li id="section-23">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-23">§</a>
</div>
<p>Grab a handle to the ‘entity’ section in the Scrawl-canvas library</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> entity = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">entity</span>;</pre></div></div>
</li>
<li id="section-24">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-24">§</a>
</div>
<p>Reset any highlighted pin Wheel</p>
</div>
<div class="content"><div class='highlight'><pre> pinGroup.<span class="hljs-title function_">setArtefacts</span>({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'aliceblue'</span>,
});</pre></div></div>
</li>
<li id="section-25">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-25">§</a>
</div>
<p>Final calculations and updates</p>
</div>
<div class="content"><div class='highlight'><pre> yearLabels.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">label, index</span>) =></span> {
<span class="hljs-keyword">let</span> pointDepth = (data[index] - min) * categoryValue,
yVal = yDepth + (graphHeight - pointDepth),
tempName = <span class="hljs-string">`<span class="hljs-subst">${space}</span>-<span class="hljs-subst">${index}</span>`</span>;
entity[<span class="hljs-string">`<span class="hljs-subst">${tempName}</span>-position`</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">startY</span>: <span class="hljs-string">`<span class="hljs-subst">${yVal}</span>%`</span>,
});
entity[<span class="hljs-string">`<span class="hljs-subst">${tempName}</span>-pin`</span>].<span class="hljs-title function_">set</span>({
<span class="hljs-attr">onEnter</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
selectedColumn = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">get</span>(<span class="hljs-string">'order'</span>);
<span class="hljs-title function_">updateSelected</span>();
},
});
});</pre></div></div>
</li>
<li id="section-26">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-26">§</a>
</div>
<p>Update the chart frame</p>
</div>
<div class="content"><div class='highlight'><pre> frame.<span class="hljs-title function_">updateSubtitle</span>(<span class="hljs-string">'No data selected'</span>);
frame.<span class="hljs-title function_">updateYTop</span>(max.<span class="hljs-title function_">toLocaleString</span>());
frame.<span class="hljs-title function_">updateYBottom</span>(min.<span class="hljs-title function_">toLocaleString</span>());
frame.<span class="hljs-title function_">updateXLeft</span>(yearLabels[<span class="hljs-number">0</span>]);
frame.<span class="hljs-title function_">updateXRight</span>(yearLabels[yearLabels.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>]);
selectedColumn = <span class="hljs-number">0</span>;
<span class="hljs-title function_">updateSelected</span>();
}
};</pre></div></div>
</li>
<li id="section-27">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-27">§</a>
</div>
<p>Handles both mouse hover, and (accessibility) keyboard navigation</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">updateSelected</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">const</span> { yearLabels, data } = currentData;
<span class="hljs-keyword">const</span> entity = pinGroup.<span class="hljs-title function_">getArtefact</span>(pinGroup.<span class="hljs-property">artefacts</span>[selectedColumn]);
pinGroup.<span class="hljs-title function_">setArtefacts</span>({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'aliceblue'</span>,
});
frame.<span class="hljs-title function_">updateSubtitle</span>(<span class="hljs-string">`<span class="hljs-subst">${yearLabels[selectedColumn]}</span>: §RED§<span class="hljs-subst">${data[selectedColumn].toLocaleString()}</span>`</span>);
entity.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">scale</span>: <span class="hljs-number">1.5</span>,
<span class="hljs-attr">fillStyle</span>: <span class="hljs-string">'red'</span>,
});
};</pre></div></div>
</li>
<li id="section-28">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-28">§</a>
</div>
<p>Exported ‘kill’ function</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">kill</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">if</span> (positionGroup) {
positionGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
lineGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
pinGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
positionGroup = <span class="hljs-literal">false</span>;
lineGroup = <span class="hljs-literal">false</span>;
pinGroup = <span class="hljs-literal">false</span>;
}
};</pre></div></div>
</li>
<li id="section-29">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-29">§</a>
</div>
<p>Exported ‘hide’ function</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">hide</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">if</span> (positionGroup) {
positionGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">false</span>;
lineGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">false</span>;
pinGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">false</span>;
}
};</pre></div></div>
</li>
<li id="section-30">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-30">§</a>
</div>
<p>Exported ‘show’ function</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">show</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">if</span> (positionGroup) {
positionGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">true</span>;
lineGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">true</span>;
pinGroup.<span class="hljs-property">visibility</span> = <span class="hljs-literal">true</span>;
}
};
<span class="hljs-keyword">export</span> {
build,
update,
kill,
hide,
show,
}</pre></div></div>
</li>
</ul>
</div>
</body>
</html>