- Jump To … +
  ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js

- §

  # Demo Modules 001

  Scrawl-canvas modularized code - London crime charts

  Related files:

  - London crime charts - main module
  - London crime lines module
  - London crime stacked bar module
  - Simple chart frame module
  - Simple graph lines module
  - Simple graph stacked bars module

      /*
      Data fetched from server as JSON String with structure:

      {
          "area": "area-label",
          "years": ["year-1-label", "year-2-label", ...],
          "crimesByCategory": {
              "category-1-label": [year-1-data, year-2-data, ...],
              "category-2-label": [year-1-data, year-2-data, ...],
              ...
          }
      }

      Data supplied to graph module as Javascript object with structure:

      {
          yearLabels: ['year-1-label', 'year-2-label', ...],
          data:       [year-1-data, year-2-data, ...],
      }
      */

- §

  #### Imports and exports

  We need to adapt the graph frame with data specific to this graph

      import { api as frame } from './simple-chart-frame.js';

- §

  The graph we are adapting our data for

      import { api as graph } from './simple-graph-lines.js';

- §

  Export

      export const api = {};

- §

  #### Data manipulation

  Module state

      let currentData, isBuilt;

- §

  The asynchronous data fetch

      const getRawData = (file) => {

          return new Promise ((resolve, reject) => {

              fetch (new Request(file))
              .then (response => {

                  if (!response.ok) throw new Error(`Network Error ${response.status}: ${response.statusText}`);
                  return response.json();
              })
              .then (rawData => resolve(rawData))
              .catch (e => reject(e));
          });
      };

- §

  Extract relevant data for the graph being requested

      const getData = (category) => {

          return {
              yearLabels: currentData.years,
              data: currentData.crimesByCategory[category]
          };
      };

- §

  #### Build function

      api.build = function (items) {

          const { namespace, canvas, dataSource, category, scrawl } = items;

          if (namespace && canvas && dataSource && category && scrawl) {

- §

  #### Update function

              const update = api.update = (items) => {

                  const { namespace, canvas, category, scrawl } = items;

- §

  Only update if we already have data available

                  if (currentData && namespace && canvas && category && scrawl) {

                      const myData = getData(category);

                      if (!isBuilt) {

                          graph.build({
                              namespace,
                              data: myData,
                              canvas,
                              scrawl,
                          });

                          isBuilt = true;
                      }
                      else graph.update(myData);

                      frame.updateTitle(`${currentData.area} Crimes: ${category}`);
                      frame.updateBackground(category);
                  }
              };

- §

  #### Kill function

  - We pass the namespace through to the lines module, so we can handle kill functionality here rather than there

              api.kill = () => {

                  scrawl.library.purge(namespace);
                  currentData = false;
                  isBuilt = false;
              }

- §

  #### Build

              if (!isBuilt) {

                  getRawData (dataSource)
                  .then (rawData => {

                      currentData = rawData;

                      graph.build({
                          namespace,
                          data: getData(category),
                          canvas,
                          scrawl,
                      });

                      isBuilt = true;

                      update({
                          namespace,
                          category,
                          canvas,
                          scrawl,
                      });
                  })
                  .catch(e => console.log(e.message));
              }
          }
      };