Merge d67970c into 7255ed6

CartoDB · Jul 4, 2019 · 0e992aa · 0e992aa
2 parents 7255ed6 + d67970c
commit 0e992aa
Show file tree

Hide file tree

Showing 20 changed files with 3,455 additions and 271 deletions.
diff --git a/cartoframes/assets/templates/viz/main.html.j2 b/cartoframes/assets/templates/viz/main.html.j2
@@ -12,7 +12,8 @@
   <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
 
   <!-- Include Airship -->
-  <script src="{{airship_components_path}}"></script>
+  <script nomodule="" src="{{airship_components_path}}"></script>
+  <script type="module" src="{{airship_module_path}}"></script>
   <script src="{{airship_bridge_path}}"></script>
   <link href="{{airship_styles_path}}" rel="stylesheet">
   <link href="{{airship_icons_path}}" rel="stylesheet">

diff --git a/cartoframes/assets/templates/viz/map.js.j2 b/cartoframes/assets/templates/viz/map.js.j2
@@ -96,18 +96,19 @@ function onReady() {
 
     if (layer.widgets.length) {
       layer.widgets.forEach((widget, widgetIndex) => {
-        widget.element = document.querySelector(`#layer${layers.length - index - 1}_widget${widgetIndex}-${widget.name}`);
+        const id = `layer${layers.length - index - 1}_widget${widgetIndex}-${widget.name}`;
+        widget.id = id;
       });
 
-      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);
-
       mapLayer.on('updated', () => {
         layer.widgets
-          .filter((widget) => widget.has_variable)
+          .filter((widget) => !widget.has_bridge)
           .forEach((widget, widgetIndex) => {
-            renderWidget(mapLayer, widget, mapViz.variables[widget.name], layers.length - index - 1, widgetIndex);
+            renderWidget(widget, mapViz.variables[widget.name]);
           })
       });
+
+      bridgeLayerWidgets(carto, mapLayer, mapSource, map, layer.widgets);
     }
   });
 

diff --git a/cartoframes/assets/templates/viz/widgets.html.j2 b/cartoframes/assets/templates/viz/widgets.html.j2
@@ -1,40 +1,9 @@
 {% macro createWidget(widget, id) -%}
-  {% if widget.type == 'formula' %}
-    <section id="{{id}}" class="as-body">
-        {% if widget.title %}
-          <h1 class="as-m--0 as-font--medium">{{widget.title}}</h1>
-        {% endif %}
-        {% if widget.description %}
-          <p class="as-m--0">{{widget.description}}</p>
-        {% endif %}
-
-        {% if widget.name %}
-          <p class="as-title as-m--0 as-p--0 as-font--medium" id="{{id}}-{{widget.name}}">
-            <span class="as-loading as-loading--s">
-              <svg viewBox="0 0 50 50">
-                <circle cx="25" cy="25" r="20" fill="none" />
-              </svg>
-            </span>
-          </p>
-        {% endif %}
-
-        {% if widget.footer %}
-          <footer>{{widget.footer}}</footer>
-        {% endif %}
-    </section>
-  {% elif widget.type == 'histogram' %}
-    <as-histogram-widget
-      id="{{id}}-{{widget.name}}"
-      description="{{widget.description}}"
-      heading="{{widget.title}}">
-    </as-histogram-widget>
-  {% elif widget.type == 'category' %}
-    <as-category-widget
-      id="{{id}}-{{widget.name}}"
-      description="{{widget.description}}"
-      heading="{{widget.title}}">
-    </as-category-widget>
-  {% endif %}
+  <section class="as-body">
+    {% with id = id %}
+      {% include 'viz/widgets/' + widget.type + '.html.j2' %}
+    {% endwith %}
+  </section>
 {%- endmacro %}
 
 <aside class="as-sidebar as-sidebar--right" id="widgets" data-name="Widgets">
@@ -43,7 +12,7 @@
       {% set outer_loop = loop %}
         {% for widget in layer.widgets %}
           <div class="as-box">
-            {{ createWidget(widget, 'layer%d_widget%d' | format(outer_loop.index0, loop.index0 )) }}
+            {{ createWidget(widget, 'layer%d_widget%d-%s' | format(outer_loop.index0, loop.index0, widget.name )) }}
           </div>
         {% endfor %}
     {% endif %}

diff --git a/cartoframes/assets/templates/viz/widgets.js.j2 b/cartoframes/assets/templates/viz/widgets.js.j2
@@ -1,12 +1,33 @@
 {% include 'utils/format.js.j2' %}
 
-function renderWidget(layer, widget, variable, layerIndex, widgetIndex=0) {
-  const element = widget.element;
+function renderWidget(widget, variable) {
+  widget.element = widget.element || document.querySelector(`#${widget.id}`);
 
-  if (widget.type === 'formula') {
-    element.innerText = format(variable.value);
-  } else {
-    element.innerText = variable ? variable.value : widget.value;
+  const value = variable ? variable.value : widget.value;
+  widget.element.innerText = typeof value === 'number' ? format(value) : value;
+}
+
+function renderBridge(bridge, widget) {
+  widget.element = widget.element || document.querySelector(`#${widget.id}`);
+
+  switch (widget.type) {
+    case 'histogram':
+      bridge.histogram(widget.element, widget.value, widget.options);
+      break;
+    case 'category':
+      bridge.category(widget.element, widget.value, widget.options);
+      break;
+    case 'animation':
+      const options = {
+        variableName: widget.name,
+        propertyName: widget.prop
+      }
+
+      bridge.animationControls(widget.element, widget.column, options);
+      break;
+    default:
+      widget.element.innerText = typeof widget.value === 'number' ? format(widget.value) : widget.value;
+      break;
   }
 }
 
@@ -19,17 +40,8 @@ function bridgeLayerWidgets(carto, mapLayer, mapSource, map, widgets) {
   });
 
   widgets
-    .filter((widget) => !widget.has_variable)
-    .forEach((widget) => {
-      switch (widget.type) {
-        case 'histogram':
-          bridge.histogram(widget.element, widget.value, widget.options);
-          break;
-        case 'category':
-          bridge.category(widget.element, widget.value, widget.options);
-          break;
-      }
-    });
+    .filter((widget) => widget.has_bridge)
+    .forEach((widget) => renderBridge(bridge, widget));
 
   bridge.build();
 }
diff --git a/cartoframes/assets/templates/viz/widgets/animation.html.j2 b/cartoframes/assets/templates/viz/widgets/animation.html.j2
@@ -0,0 +1,7 @@
+
+<as-animation-controls-widget
+  animated
+  id='{{id}}'
+  heading='{{widget.title}}'
+  description='{{widget.description}}'
+></as-animation-controls-widget>
diff --git a/cartoframes/assets/templates/viz/widgets/category.html.j2 b/cartoframes/assets/templates/viz/widgets/category.html.j2
@@ -0,0 +1,5 @@
+<as-category-widget
+  id="{{id}}"
+  description="{{widget.description}}"
+  heading="{{widget.title}}">
+</as-category-widget>
diff --git a/cartoframes/assets/templates/viz/widgets/default.html.j2 b/cartoframes/assets/templates/viz/widgets/default.html.j2
@@ -0,0 +1,18 @@
+<as-widget-header
+  header="{{widget.title}}"
+  subheader="{{widget.description}}">
+</as-widget-header>
+
+{% if widget.name %}
+  <p class="as-title as-m--0 as-p--0 as-font--medium" id="{{id}}">
+    <span class="as-loading as-loading--s">
+      <svg viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="20" fill="none" />
+      </svg>
+    </span>
+  </p>
+{% endif %}
+
+{% if widget.footer %}
+  <footer>{{widget.footer}}</footer>
+{% endif %}
diff --git a/cartoframes/assets/templates/viz/widgets/formula.html.j2 b/cartoframes/assets/templates/viz/widgets/formula.html.j2
@@ -0,0 +1,18 @@
+<as-widget-header
+  header="{{widget.title}}"
+  subheader="{{widget.description}}">
+</as-widget-header>
+
+{% if widget.name %}
+  <p class="as-title as-m--0 as-p--0 as-font--medium" id="{{id}}">
+    <span class="as-loading as-loading--s">
+      <svg viewBox="0 0 50 50">
+        <circle cx="25" cy="25" r="20" fill="none" />
+      </svg>
+    </span>
+  </p>
+{% endif %}
+
+{% if widget.footer %}
+  <footer>{{widget.footer}}</footer>
+{% endif %}
diff --git a/cartoframes/assets/templates/viz/widgets/histogram.html.j2 b/cartoframes/assets/templates/viz/widgets/histogram.html.j2
@@ -0,0 +1,5 @@
+<as-histogram-widget
+  id="{{id}}"
+  description="{{widget.description}}"
+  heading="{{widget.title}}">
+</as-histogram-widget>
diff --git a/cartoframes/viz/constants.py b/cartoframes/viz/constants.py
@@ -4,12 +4,14 @@
 CARTO_VL_URL = 'https://libs.cartocdn.com/carto-vl/{}/carto-vl.min.js'.format(CARTO_VL_VERSION)
 
 AIRSHIP_VERSION = 'v2.1'
-AIRSHIP_COMPONENTS_DEV = '/packages/components/dist/airship.js'
+AIRSHIP_COMPONENTS_DEV = '/packages/components/dist/airship/airship.js'
 AIRSHIP_BRIDGE_DEV = '/packages/bridge/dist/asbridge.js'
+AIRSHIP_MODULE_DEV = '/packages/components/dist/airship/airship.esm.js'
 AIRSHIP_STYLES_DEV = '/packages/styles/dist/airship.css'
 AIRSHIP_ICONS_DEV = '/packages/icons/dist/icons.css'
 AIRSHIP_COMPONENTS_URL = 'https://libs.cartocdn.com/airship-components/{}/airship.js'.format(AIRSHIP_VERSION)
 AIRSHIP_BRIDGE_URL = 'https://libs.cartocdn.com/airship-bridge/{}/asbridge.min.js'.format(AIRSHIP_VERSION)
+AIRSHIP_MODULE_URL = 'https://libs.cartocdn.com/airship-components/{}/airship.esm.js'.format(AIRSHIP_VERSION)
 AIRSHIP_STYLES_URL = 'https://libs.cartocdn.com/airship-style/{}/airship.min.css'.format(AIRSHIP_VERSION)
 AIRSHIP_ICONS_URL = 'https://libs.cartocdn.com/airship-icons/{}/icons.css'.format(AIRSHIP_VERSION)
 
@@ -61,5 +63,6 @@
     'default',
     'formula',
     'histogram',
-    'category'
+    'category',
+    'animation'
 ]
diff --git a/cartoframes/viz/layer.py b/cartoframes/viz/layer.py
@@ -113,15 +113,16 @@ def __init__(self,
         self.bounds = self.source.bounds
         self.orig_query = self.source.query
 
-        popup_variables = self.popup.get_variables()
-        widgets_variables = self.widgets.get_variables()
+        variables = self.popup.get_variables()
+        # widgets_variables = self.widgets.get_variables()
 
-        variables = merge_dicts(popup_variables, widgets_variables)
+        # variables = merge_dicts(popup_variables, widgets_variables)
 
         self.viz = self.style.compute_viz(
             self.source.geom_type,
             variables
         )
+
         self.interactivity = self.popup.get_interactivity()
         self.legend_info = self.legend.get_info(
             self.source.geom_type

diff --git a/cartoframes/viz/map.py b/cartoframes/viz/map.py
@@ -606,11 +606,13 @@ def _parse_html_content(
         if _airship_path is None:
             airship_components_path = constants.AIRSHIP_COMPONENTS_URL
             airship_bridge_path = constants.AIRSHIP_BRIDGE_URL
+            airship_module_path = constants.AIRSHIP_MODULE_URL
             airship_styles_path = constants.AIRSHIP_STYLES_URL
             airship_icons_path = constants.AIRSHIP_ICONS_URL
         else:
             airship_components_path = _airship_path + constants.AIRSHIP_COMPONENTS_DEV
             airship_bridge_path = _airship_path + constants.AIRSHIP_BRIDGE_DEV
+            airship_module_path = _airship_path + constants.AIRSHIP_MODULE_DEV
             airship_styles_path = _airship_path + constants.AIRSHIP_STYLES_DEV
             airship_icons_path = _airship_path + constants.AIRSHIP_ICONS_DEV
 
@@ -641,6 +643,7 @@ def _parse_html_content(
             show_info=show_info,
             carto_vl_path=carto_vl_path,
             airship_components_path=airship_components_path,
+            airship_module_path=airship_module_path,
             airship_bridge_path=airship_bridge_path,
             airship_styles_path=airship_styles_path,
             airship_icons_path=airship_icons_path,

diff --git a/cartoframes/viz/style.py b/cartoframes/viz/style.py
@@ -63,6 +63,7 @@ def _init_style(self, data):
     def compute_viz(self, geom_type, variables={}):
         style = self._style
         default_style = defaults.STYLE[geom_type]
+
         if isinstance(style, dict):
             if geom_type in style:
                 style = style.get(geom_type)

diff --git a/cartoframes/viz/widget.py b/cartoframes/viz/widget.py
@@ -1,10 +1,10 @@
 from __future__ import absolute_import
 
 from . import constants
-from ..utils import gen_variable_name, camel_dictionary
+from ..utils import camel_dictionary, gen_variable_name
 
 
-class Widget(object):
+class Widget():
     """Widget
 
     Args:
@@ -20,37 +20,38 @@ class Widget(object):
 
         from cartoframes.viz import Widget
 
-        Widget({
-            type: 'formula',
-            value: 'viewportSum($amount)'
-            title: '...',
-            description: '...',
-            footer: '...'
-        })
+        Widget('formula', value='viewportSum($amount)', title='...')
     """
 
-    def __init__(self, data=None):
-        self._init_widget(data)
+    def __init__(self, f_arg, **kwargs):
+        if isinstance(f_arg, dict):
+            self._init_widget(f_arg)
+        elif isinstance(f_arg, str):
+            self._init_widget(kwargs, f_arg)
+        else:
+            raise ValueError('Wrong widget input.')
 
-    def _init_widget(self, data):
+    def _init_widget(self, data, widget_type=''):
         self._type = ''
         self._value = ''
         self._name = ''
         self._title = ''
+        self._prop = ''
         self._description = ''
         self._footer = ''
         self._options = {}
+
         if data is not None:
-            if isinstance(data, dict):
-                self._type = data.get('type', '')
-                self._value = data.get('value', '')
-                self._name = gen_variable_name(self._value)
-                self._title = data.get('title', '')
-                self._description = data.get('description', '')
-                self._footer = data.get('footer', '')
-                self._options = camel_dictionary(data.get('options', {}))
-            else:
-                raise ValueError('Wrong widget input.')
+            self._type = widget_type if widget_type else data.get('type', '')
+            self._value = data.get('value', '')
+            self._name = data.get('name', gen_variable_name(self._value))
+            self._title = data.get('title', '')
+            self._description = data.get('description', '')
+            self._footer = data.get('footer', '')
+            self._options = camel_dictionary(data.get('options', {}))
+            self._prop = data.get('prop', '')
+        else:
+            raise ValueError('Wrong widget input.')
 
     def get_info(self):
         if self._type or self._title or self._description or self._footer:
@@ -59,11 +60,13 @@ def get_info(self):
             return {
                 'type': self._type,
                 'name': self._name,
+                'prop': self._prop,
                 'value': self._value,
                 'title': self._title,
                 'description': self._description,
                 'footer': self._footer,
                 'has_variable': self.has_variable(),
+                'has_bridge': self.has_bridge(),
                 'options': self._options
             }
         else:
@@ -72,6 +75,9 @@ def get_info(self):
     def has_variable(self):
         return self._type == 'formula'
 
+    def has_bridge(self):
+        return self._type != 'formula' and self._type != 'default'
+
     def _check_type(self):
         if self._type and self._type not in constants.WIDGET_TYPES:
             raise ValueError(