Add viz default helpers

.gitignore

@@ -38,6 +38,7 @@ wheels/
 *.egg
 Pipfile
 Pipfile.lock
+package-lock.json
 
 # Swap files
 .*.sw[nop]

cartoframes/assets/src/bundle.js

@@ -238,15 +238,16 @@ var init = (function () {
     interactivity.off('featureHover');
   }
 
-  function setPopupsClick(map, popup, interactivity, attrs) {
+  function setPopupsClick(map, clickPopup, hoverPopup, interactivity, attrs) {
     interactivity.on('featureClick', (event) => {
-      updatePopup(map, popup, event, attrs);
+      updatePopup(map, clickPopup, event, attrs);
+      hoverPopup.remove();
     });
   }
 
-  function setPopupsHover(map, popup, interactivity, attrs) {
+  function setPopupsHover(map, hoverPopup, interactivity, attrs) {
     interactivity.on('featureHover', (event) => {
-      updatePopup(map, popup, event, attrs);
+      updatePopup(map, hoverPopup, event, attrs);
     });
   }
 
@@ -290,7 +291,13 @@ var init = (function () {
 
   function setInteractivity(map, interactiveLayers, interactiveMapLayers) {
     const interactivity = new carto.Interactivity(interactiveMapLayers);
-    const popup = new mapboxgl.Popup({
+
+    const clickPopup = new mapboxgl.Popup({
+      closeButton: true,
+      closeOnClick: false
+    });
+
+    const hoverPopup = new mapboxgl.Popup({
       closeButton: false,
       closeOnClick: false
     });
@@ -301,11 +308,11 @@ var init = (function () {
     resetPopupHover(map);
 
     if (clickAttrs.length > 0) {
-      setPopupsClick(map, popup, interactivity, clickAttrs);
+      setPopupsClick(map, clickPopup, hoverPopup, interactivity, clickAttrs);
     }
 
     if (hoverAttrs.length > 0) {
-      setPopupsHover(map, popup, interactivity, hoverAttrs);
+      setPopupsHover(map, hoverPopup, interactivity, hoverAttrs);
     }
   }
 

cartoframes/assets/src/map/interactivity.js

@@ -7,7 +7,13 @@ import {
 
 export function setInteractivity(map, interactiveLayers, interactiveMapLayers) {
   const interactivity = new carto.Interactivity(interactiveMapLayers);
-  const popup = new mapboxgl.Popup({
+
+  const clickPopup = new mapboxgl.Popup({
+    closeButton: true,
+    closeOnClick: false
+  });
+
+  const hoverPopup = new mapboxgl.Popup({
     closeButton: false,
     closeOnClick: false
   });
@@ -18,11 +24,11 @@ export function setInteractivity(map, interactiveLayers, interactiveMapLayers) {
   resetPopupHover(map, interactivity);
 
   if (clickAttrs.length > 0) {
-    setPopupsClick(map, popup, interactivity, clickAttrs);
+    setPopupsClick(map, clickPopup, hoverPopup, interactivity, clickAttrs);
   }
 
   if (hoverAttrs.length > 0) {
-    setPopupsHover(map, popup, interactivity, hoverAttrs);
+    setPopupsHover(map, hoverPopup, interactivity, hoverAttrs);
   }
 }
 

cartoframes/assets/src/map/popups.js

@@ -8,15 +8,16 @@ export function resetPopupHover(interactivity) {
   interactivity.off('featureHover');
 }
 
-export function setPopupsClick(map, popup, interactivity, attrs) {
+export function setPopupsClick(map, clickPopup, hoverPopup, interactivity, attrs) {
   interactivity.on('featureClick', (event) => {
-    updatePopup(map, popup, event, attrs);
+    updatePopup(map, clickPopup, event, attrs);
+    hoverPopup.remove();
   });
 }
 
-export function setPopupsHover(map, popup, interactivity, attrs) {
+export function setPopupsHover(map, hoverPopup, interactivity, attrs) {
   interactivity.on('featureHover', (event) => {
-    updatePopup(map, popup, event, attrs);
+    updatePopup(map, hoverPopup, event, attrs);
   });
 }
 

cartoframes/assets/templates/viz/widgets/animation.html.j2

@@ -1,7 +1,11 @@
-
-<as-animation-controls-widget
-  animated
-  id='{{id}}'
-  heading='{{widget.title}}'
-  description='{{widget.description}}'
-></as-animation-controls-widget>
+<div>
+  <as-animation-controls-widget
+    animated
+    id="{{id}}"
+    heading="{{widget.title}}"
+    description="{{widget.description}}"
+  ></as-animation-controls-widget>
+  {% if widget.footer %}
+    <footer>{{widget.footer}}</footer>
+  {% endif %}
+</div>

cartoframes/assets/templates/viz/widgets/default.html.j2 → cartoframes/assets/templates/viz/widgets/basic.html.j2

@@ -1,4 +1,4 @@
-<div id={{id}}>
+<div>
   <as-widget-header
     header="{{widget.title}}"
     subheader="{{widget.description}}">

cartoframes/assets/templates/viz/widgets/category.html.j2

@@ -1,5 +1,10 @@
-<as-category-widget
-  id="{{id}}"
-  description="{{widget.description}}"
-  heading="{{widget.title}}">
-</as-category-widget>
+<div>
+  <as-category-widget
+    id="{{id}}"
+    description="{{widget.description}}"
+    heading="{{widget.title}}">
+  </as-category-widget>
+  {% if widget.footer %}
+    <footer>{{widget.footer}}</footer>
+  {% endif %}
+</div>

cartoframes/assets/templates/viz/widgets/formula.html.j2

@@ -1,10 +1,10 @@
-<div id={{id}}>
+<div>
   <as-widget-header
     header="{{widget.title}}"
     subheader="{{widget.description}}">
   </as-widget-header>
 
-  <p class="as-title as-m--0 as-p--0 as-font--medium" id="{{id}}-value">
+  <p class="as-title as-m--4 as-p--0 as-font--medium" id="{{id}}-value">
     <span class="as-loading as-loading--s">
       <svg viewBox="0 0 50 50">
         <circle cx="25" cy="25" r="20" fill="none" />

cartoframes/assets/templates/viz/widgets/histogram.html.j2

@@ -1,5 +1,10 @@
-<as-histogram-widget
-  id="{{id}}"
-  description="{{widget.description}}"
-  heading="{{widget.title}}">
-</as-histogram-widget>
+<div>
+  <as-histogram-widget
+    id="{{id}}"
+    description="{{widget.description}}"
+    heading="{{widget.title}}">
+  </as-histogram-widget>
+  {% if widget.footer %}
+    <footer>{{widget.footer}}</footer>
+  {% endif %}
+</div>

cartoframes/assets/templates/viz/widgets/time-series.html.j2

@@ -1,7 +1,12 @@
-<as-time-series-widget
-  animated
-  id="{{id}}"
-  time-format="{% if widget.options.timeFormat %}{{widget.options.timeFormat}}{% else %}auto{% endif %}"
-  description="{{widget.description}}"
-  heading="{{widget.title}}">
-</as-time-series-widget>
+<div>
+  <as-time-series-widget
+    animated
+    id="{{id}}"
+    time-format="{% if widget.options.timeFormat %}{{widget.options.timeFormat}}{% else %}auto{% endif %}"
+    description="{{widget.description}}"
+    heading="{{widget.title}}">
+  </as-time-series-widget>
+  {% if widget.footer %}
+    <footer>{{widget.footer}}</footer>
+  {% endif %}
+</div>

cartoframes/viz/__init__.py

@@ -25,15 +25,18 @@
 from .legends import size_bins_legend
 from .legends import size_category_legend
 from .legends import size_continuous_legend
+from .legends import default_legend
 
 from .widgets import basic_widget
 from .widgets import animation_widget
 from .widgets import category_widget
 from .widgets import formula_widget
 from .widgets import histogram_widget
 from .widgets import time_series_widget
+from .widgets import default_widget
 
 from .popups import popup_element
+from .popups import default_popup_element
 
 
 __all__ = [
@@ -63,13 +66,16 @@
     'size_bins_legend',
     'size_category_legend',
     'size_continuous_legend',
+    'default_legend',
 
     'animation_widget',
     'basic_widget',
     'category_widget',
     'formula_widget',
     'histogram_widget',
     'time_series_widget',
+    'default_widget',
 
-    'popup_element'
+    'popup_element',
+    'default_popup_element'
 ]

cartoframes/viz/constants.py

@@ -38,10 +38,12 @@
     'color': 'color',
     'stroke_color': 'strokeColor',
     'size': 'width',
-    'stroke_width': 'strokeWidth'
+    'stroke_width': 'strokeWidth',
+    'filter': 'filter'
 }
 
 LEGEND_TYPES = [
+    'basic',
     'default',
     'color-bins',
     'color-bins-line',
@@ -67,6 +69,7 @@
 ]
 
 WIDGET_TYPES = [
+    'basic',
     'default',
     'formula',
     'histogram',

cartoframes/viz/kuviz.py

@@ -5,9 +5,10 @@
 
 from .source import Source
 from ..auth import get_default_credentials
+from ..io.carto import to_carto
 from ..utils.columns import normalize_name
-from ..data.clients.auth_api_client import AuthAPIClient
 from ..utils.logger import log
+from ..data.clients.auth_api_client import AuthAPIClient
 from ..exceptions import PublishError
 
 filterwarnings('ignore', category=FutureWarning, module='carto')
@@ -72,7 +73,7 @@ def _sync_layers(self, layers, table_name=None):
             self._layers.append(layer)
 
     def _sync_layer(self, layer, table_name):
-        layer.source.gdf.to_carto(table_name=table_name, credentials=self._credentials)
+        to_carto(layer.source.gdf, table_name, credentials=self._credentials)
         layer.source = Source(table_name, credentials=self._credentials)
         return layer