@vizzly/components - npm Package Compare versions

Comparing version 0.0.101 to 0.0.102

dist/api/index.d.ts

@@ -9,2 +9,3 @@ import { VizzlyComponents } from '../types';
     addComponentToDashboard: (dashboardId: string, componentId: string, position: string) => Promise<boolean>;
+    removeComponentFromDashboard: (dashboardId: string, position: string) => Promise<boolean>;
 } | null;

dist/api/useDashboard.d.ts

 import { VizzlyComponents } from '../types';
-export declare const useDashboard: (api: any, dashboardId: string) => {
-    dashboard: VizzlyComponents.Dashboard | null;
+declare type Components = {
+    [key: string]: VizzlyComponents.Component;
 };
+declare type DashboardState = null | (Partial<VizzlyComponents.Dashboard> & {
+    components: Components;
+});
+declare type ContextProvided = {
+    dashboard: DashboardState;
+    setComponents: (components: Components) => void;
+};
+export declare const useDashboard: (api: any, dashboardId: string | undefined) => ContextProvided;
+export {};

dist/components.cjs.development.js

@@ -688,2 +688,39 @@ 'use strict';
 
+var removeComponentFromDashboard = function removeComponentFromDashboard(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dashboardId, position) {
+      var _yield$httpClient, status;
+
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return httpClient({
+                path: "/api/dashboard/" + dashboardId + "/studio-component/remove",
+                method: 'post',
+                body: {
+                  position: position
+                }
+              });
+
+            case 2:
+              _yield$httpClient = _context.sent;
+              status = _yield$httpClient.status;
+              return _context.abrupt("return", status == 200);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
 var httpClient = function httpClient(config) {
@@ -847,3 +884,4 @@ return /*#__PURE__*/function () {
     getStudioComponents: getStudioComponents(client),
-    addComponentToDashboard: addComponentToDashboard(client)
+    addComponentToDashboard: addComponentToDashboard(client),
+    removeComponentFromDashboard: removeComponentFromDashboard(client)
   };
@@ -896,2 +934,45 @@ };
 
+var useDashboard = function useDashboard(api, dashboardId) {
+  var _React$useState = React__default.useState(null),
+      dashboard = _React$useState[0],
+      setDashboard = _React$useState[1];
+
+  React.useEffect(function () {
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.getDashboard();
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    dashboardId && doWork();
+  }, [dashboardId]);
+
+  var setComponents = function setComponents(components) {
+    setDashboard(_extends({}, dashboard, {
+      components: components
+    }));
+  };
+
+  return {
+    dashboard: dashboard,
+    setComponents: setComponents
+  };
+};
+
 var setSavedAt = function setSavedAt(state, setState, savedAt) {
@@ -1294,2 +1375,6 @@ setState(_extends({}, state, {
 
+  if (type == 'pieChart') {
+    return timeDimensionChartSummary(type, props);
+  }
+
   console.warn("Summary requested for unsupported component " + type + ".");
@@ -1299,2 +1384,81 @@ return '';
 
+var addComponentToDashboard$1 = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(vizzlyApi, dashboardId, position, componentId) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = !dashboardId;
+
+            if (_context.t0) {
+              _context.next = 8;
+              break;
+            }
+
+            _context.t1 = dashboardId;
+
+            if (!_context.t1) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 6;
+            return vizzlyApi == null ? void 0 : vizzlyApi.addComponentToDashboard(dashboardId, componentId, position);
+
+          case 6:
+            _context.t1 = _context.sent;
+
+          case 7:
+            _context.t0 = _context.t1;
+
+          case 8:
+            return _context.abrupt("return", _context.t0);
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function addComponentToDashboard(_x, _x2, _x3, _x4) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var removeComponentFromDashboard$1 = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(vizzlyApi, dashboardId, position) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.t0 = !dashboardId;
+
+            if (_context2.t0) {
+              _context2.next = 5;
+              break;
+            }
+
+            _context2.next = 4;
+            return vizzlyApi.removeComponentFromDashboard(dashboardId, position);
+
+          case 4:
+            _context2.t0 = _context2.sent;
+
+          case 5:
+            return _context2.abrupt("return", _context2.t0);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function removeComponentFromDashboard(_x5, _x6, _x7) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
 var Studio = function Studio(props) {
@@ -1307,2 +1471,6 @@ var organisationId = props.organisationId,
 
+  var _useDashboard = useDashboard(vizzlyApi, props.dashboardId),
+      dashboard = _useDashboard.dashboard,
+      setComponents = _useDashboard.setComponents;
+
   var _useState = React.useState(null),
@@ -1312,29 +1480,92 @@ selectedStudioComponentPlaceholder = _useState[0],
 
-  var _useState2 = React.useState({}),
-      renderCallbacks = _useState2[0],
-      setRenderCallbacks = _useState2[1];
+  var showDrawer = selectedStudioComponentPlaceholder != null;
 
-  var showDrawer = selectedStudioComponentPlaceholder != null;
-  if (!studioComponents) return React__default.createElement("p", null, "loading studio components");
+  var buildRenderFunc = function buildRenderFunc(component) {
+    var latestVersion$1 = latestVersion(component);
+    return function () {
+      return React__default.createElement(React__default.Fragment, null, React__default.createElement(ComponentContextProvider, {
+        componentId: component.id,
+        apiConfig: apiConfig
+      }, React__default.createElement(Component, {
+        type: latestVersion$1 == null ? void 0 : latestVersion$1.type,
+        componentProps: latestVersion$1 == null ? void 0 : latestVersion$1.props
+      })));
+    };
+  };
+
+  var renderCallbacks = lodash.mapValues(_extends({}, dashboard == null ? void 0 : dashboard.components), buildRenderFunc);
+  if (!studioComponents) return null;
   return React__default.createElement(puppet.Components.StudioView, {
-    onSelectComponent: function onSelectComponent(componentIndex) {
-      if (selectedStudioComponentPlaceholder) {
-        var _extends2;
+    onRemove: function () {
+      var _onRemove = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(position) {
+        var newComponents, removedFromDashboard;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                newComponents = _extends({}, dashboard == null ? void 0 : dashboard.components);
+                _context.next = 3;
+                return removeComponentFromDashboard$1(vizzlyApi, props.dashboardId, position);
 
-        var component = studioComponents[componentIndex];
-        var latestVersion$1 = latestVersion(component); // const addedToDashboard = vizzlyApi?.addComponentToDashboard(props.dashboardId, component.id, selectedStudioComponentPlaceholder);
-        // if(addedToDashboard) {
+              case 3:
+                removedFromDashboard = _context.sent;
 
-        setRenderCallbacks(_extends({}, renderCallbacks, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = function () {
-          return React__default.createElement(React__default.Fragment, null, React__default.createElement(ComponentContextProvider, {
-            componentId: component.id,
-            apiConfig: apiConfig
-          }, React__default.createElement(Component, {
-            type: latestVersion$1 == null ? void 0 : latestVersion$1.type,
-            componentProps: latestVersion$1 == null ? void 0 : latestVersion$1.props
-          })));
-        }, _extends2)));
-        setSelectedStudioComponentPlaceholder(null); // };
+                if (removedFromDashboard) {
+                  delete newComponents[position];
+                  setComponents(newComponents);
+                }
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onRemove(_x) {
+        return _onRemove.apply(this, arguments);
       }
-    },
+
+      return onRemove;
+    }(),
+    onSelectComponent: function () {
+      var _onSelectComponent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(componentIndex) {
+        var component, addedToDashboard, _extends2;
+
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!selectedStudioComponentPlaceholder) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                component = studioComponents[componentIndex];
+                _context2.next = 4;
+                return addComponentToDashboard$1(vizzlyApi, props.dashboardId, selectedStudioComponentPlaceholder, component.id);
+
+              case 4:
+                addedToDashboard = _context2.sent;
+
+                if (addedToDashboard) {
+                  setComponents(_extends({}, dashboard == null ? void 0 : dashboard.components, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = component, _extends2)));
+                  setSelectedStudioComponentPlaceholder(null);
+                }
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      function onSelectComponent(_x2) {
+        return _onSelectComponent.apply(this, arguments);
+      }
+
+      return onSelectComponent;
+    }(),
     onSelectComponentPlaceholder: setSelectedStudioComponentPlaceholder,
@@ -1341,0 +1572,0 @@ componentOptions: [].concat(studioComponents).map(function (studioComponent) {

dist/components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=require("lodash"),o=require("@vizzly/puppet"),i=e(require("isomorphic-fetch")),u=require("node-jose");function a(){a=function(){return e};var e={},t=Object.prototype,r=t.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",u=n.toStringTag||"@@toStringTag";function s(e,t,r){return Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}),e[t]}try{s({},"")}catch(e){s=function(e,t,r){return e[t]=r}}function c(e,t,r,n){var o=Object.create((t&&t.prototype instanceof f?t:f).prototype),i=new S(n||[]);return o._invoke=function(e,t,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var u=r.delegate;if(u){var a=b(u,r);if(a){if(a===p)continue;return a}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var s=l(e,t,r);if("normal"===s.type){if(n=r.done?"completed":"suspendedYield",s.arg===p)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n="completed",r.method="throw",r.arg=s.arg)}}}(e,r,i),o}function l(e,t,r){try{return{type:"normal",arg:e.call(t,r)}}catch(e){return{type:"throw",arg:e}}}e.wrap=c;var p={};function f(){}function h(){}function d(){}var m={};s(m,o,(function(){return this}));var v=Object.getPrototypeOf,y=v&&v(v(L([])));y&&y!==t&&r.call(y,o)&&(m=y);var g=d.prototype=f.prototype=Object.create(m);function x(e){["next","throw","return"].forEach((function(t){s(e,t,(function(e){return this._invoke(t,e)}))}))}function w(e,t){var n;this._invoke=function(o,i){function u(){return new t((function(n,u){!function n(o,i,u,a){var s=l(e[o],e,i);if("throw"!==s.type){var c=s.arg,p=c.value;return p&&"object"==typeof p&&r.call(p,"__await")?t.resolve(p.__await).then((function(e){n("next",e,u,a)}),(function(e){n("throw",e,u,a)})):t.resolve(p).then((function(e){c.value=e,u(c)}),(function(e){return n("throw",e,u,a)}))}a(s.arg)}(o,i,n,u)}))}return n=n?n.then(u,u):u()}}function b(e,t){var r=e.iterator[t.method];if(void 0===r){if(t.delegate=null,"throw"===t.method){if(e.iterator.return&&(t.method="return",t.arg=void 0,b(e,t),"throw"===t.method))return p;t.method="throw",t.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var n=l(r,e.iterator,t.arg);if("throw"===n.type)return t.method="throw",t.arg=n.arg,t.delegate=null,p;var o=n.arg;return o?o.done?(t[e.resultName]=o.value,t.next=e.nextLoc,"return"!==t.method&&(t.method="next",t.arg=void 0),t.delegate=null,p):o:(t.method="throw",t.arg=new TypeError("iterator result is not an object"),t.delegate=null,p)}function C(e){var t={tryLoc:e[0]};1 in e&&(t.catchLoc=e[1]),2 in e&&(t.finallyLoc=e[2],t.afterLoc=e[3]),this.tryEntries.push(t)}function E(e){var t=e.completion||{};t.type="normal",delete t.arg,e.completion=t}function S(e){this.tryEntries=[{tryLoc:"root"}],e.forEach(C,this),this.reset(!0)}function L(e){if(e){var t=e[o];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var n=-1,i=function t(){for(;++n<e.length;)if(r.call(e,n))return t.value=e[n],t.done=!1,t;return t.value=void 0,t.done=!0,t};return i.next=i}}return{next:P}}function P(){return{value:void 0,done:!0}}return h.prototype=d,s(g,"constructor",d),s(d,"constructor",h),h.displayName=s(d,u,"GeneratorFunction"),e.isGeneratorFunction=function(e){var t="function"==typeof e&&e.constructor;return!!t&&(t===h||"GeneratorFunction"===(t.displayName||t.name))},e.mark=function(e){return Object.setPrototypeOf?Object.setPrototypeOf(e,d):(e.__proto__=d,s(e,u,"GeneratorFunction")),e.prototype=Object.create(g),e},e.awrap=function(e){return{__await:e}},x(w.prototype),s(w.prototype,i,(function(){return this})),e.AsyncIterator=w,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var u=new w(c(t,r,n,o),i);return e.isGeneratorFunction(r)?u:u.next().then((function(e){return e.done?e.value:u.next()}))},x(g),s(g,u,"Generator"),s(g,o,(function(){return this})),s(g,"toString",(function(){return"[object Generator]"})),e.keys=function(e){var t=[];for(var r in e)t.push(r);return t.reverse(),function r(){for(;t.length;){var n=t.pop();if(n in e)return r.value=n,r.done=!1,r}return r.done=!0,r}},e.values=L,S.prototype={constructor:S,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!e)for(var t in this)"t"===t.charAt(0)&&r.call(this,t)&&!isNaN(+t.slice(1))&&(this[t]=void 0)},stop:function(){this.done=!0;var e=this.tryEntries[0].completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var t=this;function n(r,n){return u.type="throw",u.arg=e,t.next=r,n&&(t.method="next",t.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],u=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var a=r.call(i,"catchLoc"),s=r.call(i,"finallyLoc");if(a&&s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(a){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(e,t){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===e||"continue"===e)&&i.tryLoc<=t&&t<=i.finallyLoc&&(i=null);var u=i?i.completion:{};return u.type=e,u.arg=t,i?(this.method="next",this.next=i.finallyLoc,p):this.complete(u)},complete:function(e,t){if("throw"===e.type)throw e.arg;return"break"===e.type||"continue"===e.type?this.next=e.arg:"return"===e.type?(this.rval=this.arg=e.arg,this.method="return",this.next="end"):"normal"===e.type&&t&&(this.next=t),p},finish:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),E(r),p}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;E(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(e,t,r){return this.delegate={iterator:L(e),resultName:t,nextLoc:r},"next"===this.method&&(this.arg=void 0),p}},e}function s(e,t,r,n,o,i,u){try{var a=e[i](u),s=a.value}catch(e){return void r(e)}a.done?t(s):Promise.resolve(s).then(n,o)}function c(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var i=e.apply(t,r);function u(e){s(i,n,o,u,a,"next",e)}function a(e){s(i,n,o,u,a,"throw",e)}u(void 0)}))}}function l(){return(l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var p=function(e){return{id:e.id,dataType:e.type,title:e.title}},f=function(e){return n.replace(e,"_"," ")},h=function(e){return{fields:[].concat(e.fields).map(p)}},d=function(e){var t=e.versions.map((function(e){return{type:e.frontend_context.type,title:e.title,description:e.description,props:e.frontend_context.props,libraryVersion:e.frontend_context.libraryVersion,secureFilters:e.secure_filters.map((function(e){return{field:e.field,op:e.operator,exampleValue:e.example_value}})),savedAt:e.inserted_at}}));return{id:e.id,dataSets:e.data_sets.map(h),versions:t}},m=function(e){return n.last(e.versions)},v=function(e,t){return n.flatMap([].concat(e),(function(e){var r;return(null==(r=m(e))?void 0:r.libraryVersion)==t?[e]:[]}))},y=function(e){return function(){var t=c(a().mark((function t(r){var n,o;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e({path:"/api/component/"+r,method:"get"});case 2:if(o=(n=t.sent).body,200!=n.status){t.next=7;break}return t.abrupt("return",d(o));case 7:return t.abrupt("return",void 0);case 8:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()},g=function(e){return e.content=e.content.map((function(t){return t.map((function(t,r){return function(e,t){if(null===e)return null;switch(t){case"date_time":return new Date(e);case"number":case"string":return e;case"boolean":return!!e}throw"Cannot parse value of unrecognised type."}(t,e.fields[r].dataType)}))})),e},x=function(e){return function(){var t=c(a().mark((function t(r,n,o){var i,u;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e({path:"/api/create-result",method:"post",body:{queries:n.map((function(e){return w(e,r)}))},abortSignal:o});case 2:if(u=(i=t.sent).body,200!=i.status){t.next=7;break}return t.abrupt("return",u.results.map(g));case 7:return t.abrupt("return",void 0);case 8:case"end":return t.stop()}}),t)})));return function(e,r,n){return t.apply(this,arguments)}}()},w=function(e,t){var r,n=e.timeDimension;return n&&(n=l({},n,{timeZone:null!=(r=n.timeZone)?r:o.Utils.DateTime.currentTimezone()})),l({},e,{componentId:t,timeDimension:n})},b=function(e){return function(){var t=c(a().mark((function t(r,n){var o,i;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e({path:"/api/organisation/"+r+"/studio-components/"+n,method:"get"});case 2:if(i=(o=t.sent).body,200!=o.status){t.next=7;break}return t.abrupt("return",i.components.map(d));case 7:return t.abrupt("return",void 0);case 8:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}()},C=function(e){return function(){var t=c(a().mark((function t(r,n,o){return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e({path:"/api/dashboard/"+r+"/studio-component",method:"post",body:{component_id:n,position:o}});case 2:return t.abrupt("return",200==t.sent.status);case 5:case"end":return t.stop()}}),t)})));return function(e,r,n){return t.apply(this,arguments)}}()},E=function(e){return function(){var t=c(a().mark((function t(r){var n,o,u;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=e.authToken?{auth:"Bearer "+e.authToken}:{},o=r.headers||{},t.next=4,i(""+e.host+r.path,{method:r.method,headers:l({"Content-Type":"application/json",Accept:"application/json"},n,o),redirect:"follow",referrerPolicy:"no-referrer",body:r.body?JSON.stringify(r.body):null,signal:r.abortSignal});case 4:return u=t.sent,t.next=7,u.json();case 7:return t.abrupt("return",{body:t.sent,status:u.status});case 9:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()},S=function(e,t,r,n,o,i,u){var a={measure:e,order:t,filter:r,dimension:n,timeDimension:o,limit:i,secureFilter:u||[]};return L(a)?a:null},L=function(e){return null!==e&&!n.isEmpty(e.measure)},P=function(e,t){return l({},e,{secureFilter:t})},O=function(e,r,o,i,u,s){r=r.map((function(e){return function(e,t){return n.isEmpty(e.filter)&&(e.filter=[[]]),l({},e,{filter:[].concat(e.filter).map((function(e){return[].concat(e,t.map((function(e){return{field:e.field,op:e.op,value:e.exampleValue}})))}))})}(e,s||[])})),t.useEffect((function(){var t=new AbortController,s=function(){var n=c(a().mark((function n(){var s,c,l;return a().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(s=[],!u){n.next=6;break}return n.next=4,u();case 4:(c=n.sent)&&(s=[].concat(c));case 6:return r=r.map((function(e){return P(e,s)})),n.next=9,e.createQueryResult(o,r,t.signal);case 9:(l=n.sent)&&i(l,r);case 11:case"end":return n.stop()}}),n)})));return function(){return n.apply(this,arguments)}}();return o&&!n.isEmpty(r)&&s(),function(){t.abort()}}),[JSON.stringify(o),JSON.stringify(r)])},k=function(e){if(!e)return null;var t=E(e);return{config:e,getComponent:y(t),createQueryResult:x(t),getStudioComponents:b(t),addComponentToDashboard:C(t)}},j=require("../package.json").version,q=function(){throw"Function not initialised."},_=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setResults:q,setProps:q,setStyleProps:q,setTitle:q,setChartType:q,setDescription:q,setLibraryVersion:q,setVersion:q,setSavedAt:q,setSecureFilters:q}),V=function(e){var o=e.children,i=e.apiConfig,u=e.componentId,s=r.useState({apiConfig:i,results:[],queries:[],component:null,version:null}),p=s[0],f=s[1];t.useEffect((function(){!function(){var e=c(a().mark((function e(){var t,r,o;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,null==(t=k(i))?void 0:t.getComponent(u);case 2:(r=e.sent)&&(o=m(r),n.isEmpty(null==o?void 0:o.secureFilters),f(l({},p,{queries:[],results:[],component:r,version:o||null})));case 4:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()()}),[u]);var h=l({},p,{setChartType:function(e){return function(e,t,r){t(l({},e,{results:[],queries:[],version:l({},e.version,{type:r})}))}(p,f,e)},setDescription:function(e){return function(e,t,r){t(l({},e,{version:l({},e.version,{description:r})}))}(p,f,e)},setTitle:function(e){return function(e,t,r){t(l({},e,{version:l({},e.version,{title:r})}))}(p,f,e)},setLibraryVersion:function(e){return function(e,t,r){t(l({},e,{results:[],queries:[],version:l({},e.version,{libraryVersion:r})}))}(p,f,e)},setProps:function(e){return function(e,t,r){t(l({},e,{results:[],queries:[],version:l({},e.version,{props:l({},r)})}))}(p,f,e)},setStyleProps:function(e){return function(e,t,r){t(l({},e,{version:l({},e.version,{props:l({},r)})}))}(p,f,e)},setResults:function(e,t){return function(e,t,r,n){t(l({},e,{results:r,queries:n}))}(p,f,e,t)},setVersion:function(e){return function(e,t,r){t(l({},e,{version:r,results:[],queries:[]}))}(p,f,e)},setSavedAt:function(e){return function(e,t,r){t(l({},e,{version:l({},e.version,{savedAt:r})}))}(p,f,e)},setSecureFilters:function(e){return function(e,t,r){t(l({},e,{version:l({},e.version,{secureFilters:r}),results:[],queries:[]}))}(p,f,e)}});return r.createElement(_.Provider,{value:h},o)},F=function(){return r.useContext(_)},T=function(){return r.useContext(_)},D=function(){return r.useContext(_)},A=function(){return r.useContext(_)},I=function(){return r.useContext(_)},N=function(e,t,r,n,o,i){var u=[];r.xMeasure&&u.push(r.xMeasure),r.yMeasure&&u.push(r.yMeasure);var a=S(u,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(k(e),L(a)?[a]:[],t,n,o,i)},R=function(e){var t=A(),i=t.apiConfig,u=t.setResults,a=t.component,s=t.results,c=t.queries,l=t.version,p=o.mergeProps(e,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return N(i,null==a?void 0:a.id,p,u,e.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.ScatterChartView,Object.assign({},p,{result:s[0],query:c[0]}))},M=function(e,t,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(k(e),L(u)?[u]:[],t,n,o,i)},G=function(e){var t=T(),i=t.apiConfig,u=t.results,a=t.component,s=t.queries,c=t.version,l=t.setResults,p=o.mergeProps(e,null==c?void 0:c.props,o.Components.LineChartView.defaultProps);return M(i,null==a?void 0:a.id,p,l,e.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.BarChartView,Object.assign({},p,{result:u[0],query:s[0]}))},Q=function(e,t,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(k(e),L(u)?[u]:[],t,n,o,i)},J=function(e){var t=F(),i=t.apiConfig,u=t.results,a=t.queries,s=t.version,c=t.component,l=t.setResults,p=o.mergeProps(e,null==s?void 0:s.props,o.Components.LineChartView.defaultProps);return Q(i,null==c?void 0:c.id,p,l,e.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.LineChartView,Object.assign({},p,{result:u[0],query:a[0]}))},z=function(e,t,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,null,r.limit);O(k(e),L(u)?[u]:[],t,n,o,i)},B=function(e){var t=I(),i=t.apiConfig,u=t.component,a=t.setResults,s=t.results,c=t.queries,l=t.version,p=o.mergeProps(e,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return z(i,null==u?void 0:u.id,p,a,e.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.PieChartView,Object.assign({},p,{result:s[0],query:c[0]}))},K=function(e,t,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(k(e),L(u)?[u]:[],t,n,o,i)},U=function(e){var t=D(),i=t.apiConfig,u=t.component,a=t.setResults,s=t.results,c=t.queries,l=t.version,p=o.mergeProps(e,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return K(i,null==u?void 0:u.id,p,a,e.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.AreaChartView,Object.assign({},p,{result:s[0],query:c[0]}))},W=function(e){if("scatterChart"==e.type)return r.createElement(R,Object.assign({},e.componentProps));if("barChart"==e.type)return r.createElement(G,Object.assign({},e.componentProps));if("areaChart"==e.type)return r.createElement(U,Object.assign({},e.componentProps));if("lineChart"==e.type)return r.createElement(J,Object.assign({},e.componentProps));if("pieChart"==e.type)return r.createElement(B,Object.assign({},e.componentProps));throw"Unsupported component in generic component."},Y=["lineChart","barChart","areaChart"],Z=function(e,t){return Y.includes(e)?function(e,t){var r="",o=t.measure,i=t.dimension,u=t.timeDimension;return o[0]&&i&&(r=n.capitalize(o[0].aggregate)+" of '"+f(o[0].field)+"'",i&&(r+=", grouped by '"+i+"'"),u&&(r+=", on a "+function(e){if("day"==e)return"daily";if("month"==e)return"monthly";if("year"==e)return"annually";if("second"==e)return"per second";if("hour"==e)return"per hour";if("minute"==e)return"per minute";throw"Unsupported titme truncate value."}(u.truncate)+" basis.")),r}(0,t):"scatterChart"==e?function(e){var t="",r=e.xMeasure,o=e.yMeasure,i=e.dimension;return r&&o&&(t=n.capitalize(r.aggregate)+" of '"+f(r.field)+"' by "+o.aggregate+" of '"+f(o.field)+"'",i&&(t+=", grouped by '"+i+"'.")),t}(t):(console.warn("Summary requested for unsupported component "+e+"."),"")};function H(e,t){return new Date(e.getTime()+6e4*t)}var X=function(e){return function(){var t=c(a().mark((function t(r){var n,o;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return n=e.privateKey,t.next=3,u.JWK.asKey(n,"pem");case 3:return o=t.sent,t.next=6,u.JWS.createSign({alg:"ES256",format:"compact"},o).update(JSON.stringify(r),"utf8").final();case 6:return t.abrupt("return",t.sent);case 8:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()},$=function(e){return c(a().mark((function t(){return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,X(e)({expires:H(new Date,e.ttlInMinutes).toISOString()});case 2:return t.abrupt("return",t.sent);case 3:case"end":return t.stop()}}),t)})))},ee=function(e){return function(){var t=c(a().mark((function t(r){return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,X(e)({filter:r,expires:H(new Date,e.ttlInMinutes).toISOString()});case 2:return t.abrupt("return",t.sent);case 4:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()};exports.AreaChart=U,exports.BarChart=G,exports.ComponentContextProvider=V,exports.LineChart=J,exports.ScatterChart=R,exports.Studio=function(e){var n=e.organisationId,i=e.studioComponentsTag,u=e.apiConfig,s=function(e,n,o){var i=t.useState(null),u=i[0],s=i[1];return r.useEffect((function(){u||function(){var t=c(a().mark((function t(){var r;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,e.getStudioComponents(n,o);case 2:(r=v(r=t.sent,j))&&s(r);case 5:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}()()}),[n,o]),u}(k(u),n,i),p=t.useState(null),f=p[0],h=p[1],d=t.useState({}),y=d[0],g=d[1],x=null!=f;return s?r.createElement(o.Components.StudioView,{onSelectComponent:function(e){if(f){var t,n=s[e],o=m(n);g(l({},y,((t={})[f]=function(){return r.createElement(r.Fragment,null,r.createElement(V,{componentId:n.id,apiConfig:u},r.createElement(W,{type:null==o?void 0:o.type,componentProps:null==o?void 0:o.props})))},t))),h(null)}},onSelectComponentPlaceholder:h,componentOptions:[].concat(s).map((function(e){var t=m(e);return{title:null==t?void 0:t.title,summary:Z(null==t?void 0:t.type,null==t?void 0:t.props),type:null==t?void 0:t.type}})),templateRenderCallbacks:y,showDrawer:x,onCloseDrawer:function(){return h(null)},templateId:"demo"}):r.createElement("p",null,"loading studio components")},exports.auth=function(e){return{accessToken:$(e),signFilter:ee(e)}},exports.componentSummary=Z,exports.createQueryResult=x,exports.httpClient=E,exports.useAreaChart=D,exports.useAreaChartQueryEffect=K,exports.useBarChart=T,exports.useBarChartQueryEffect=M,exports.useComponentContext=function(){return r.useContext(_)},exports.useLineChart=F,exports.useLineChartQueryEffect=Q,exports.usePieChart=I,exports.usePieChartQueryEffect=z,exports.useScatterChart=A,exports.useScatterChartQueryEffect=N;
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t.default:t}Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=t(e),n=require("lodash"),o=require("@vizzly/puppet"),i=t(require("isomorphic-fetch")),u=require("node-jose");function a(){a=function(){return t};var t={},e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",u=n.toStringTag||"@@toStringTag";function s(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{s({},"")}catch(t){s=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o=Object.create((e&&e.prototype instanceof f?e:f).prototype),i=new k(n||[]);return o._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return{value:void 0,done:!0}}for(r.method=o,r.arg=i;;){var u=r.delegate;if(u){var a=b(u,r);if(a){if(a===l)continue;return a}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var s=p(t,e,r);if("normal"===s.type){if(n=r.done?"completed":"suspendedYield",s.arg===l)continue;return{value:s.arg,done:r.done}}"throw"===s.type&&(n="completed",r.method="throw",r.arg=s.arg)}}}(t,r,i),o}function p(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var l={};function f(){}function d(){}function h(){}var m={};s(m,o,(function(){return this}));var v=Object.getPrototypeOf,y=v&&v(v(S([])));y&&y!==e&&r.call(y,o)&&(m=y);var g=h.prototype=f.prototype=Object.create(m);function x(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function w(t,e){var n;this._invoke=function(o,i){function u(){return new e((function(n,u){!function n(o,i,u,a){var s=p(t[o],t,i);if("throw"!==s.type){var c=s.arg,l=c.value;return l&&"object"==typeof l&&r.call(l,"__await")?e.resolve(l.__await).then((function(t){n("next",t,u,a)}),(function(t){n("throw",t,u,a)})):e.resolve(l).then((function(t){c.value=t,u(c)}),(function(t){return n("throw",t,u,a)}))}a(s.arg)}(o,i,n,u)}))}return n=n?n.then(u,u):u()}}function b(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,b(t,e),"throw"===e.method))return l;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}var n=p(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,l;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,l):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,l)}function C(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(C,this),this.reset(!0)}function S(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:L}}function L(){return{value:void 0,done:!0}}return d.prototype=h,s(g,"constructor",h),s(h,"constructor",d),d.displayName=s(h,u,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===d||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,s(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t},t.awrap=function(t){return{__await:t}},x(w.prototype),s(w.prototype,i,(function(){return this})),t.AsyncIterator=w,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var u=new w(c(e,r,n,o),i);return t.isGeneratorFunction(r)?u:u.next().then((function(t){return t.done?t.value:u.next()}))},x(g),s(g,u,"Generator"),s(g,o,(function(){return this})),s(g,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=S,k.prototype={constructor:k,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return u.type="throw",u.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],u=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var a=r.call(i,"catchLoc"),s=r.call(i,"finallyLoc");if(a&&s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(a){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var u=i?i.completion:{};return u.type=t,u.arg=e,i?(this.method="next",this.next=i.finallyLoc,l):this.complete(u)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),E(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;E(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:S(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},t}function s(t,e,r,n,o,i,u){try{var a=t[i](u),s=a.value}catch(t){return void r(t)}a.done?e(s):Promise.resolve(s).then(n,o)}function c(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function u(t){s(i,n,o,u,a,"next",t)}function a(t){s(i,n,o,u,a,"throw",t)}u(void 0)}))}}function p(){return(p=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}var l=function(t){return{id:t.id,dataType:t.type,title:t.title}},f=function(t){return n.replace(t,"_"," ")},d=function(t){return{fields:[].concat(t.fields).map(l)}},h=function(t){var e=t.versions.map((function(t){return{type:t.frontend_context.type,title:t.title,description:t.description,props:t.frontend_context.props,libraryVersion:t.frontend_context.libraryVersion,secureFilters:t.secure_filters.map((function(t){return{field:t.field,op:t.operator,exampleValue:t.example_value}})),savedAt:t.inserted_at}}));return{id:t.id,dataSets:t.data_sets.map(d),versions:e}},m=function(t){return n.last(t.versions)},v=function(t,e){return n.flatMap([].concat(t),(function(t){var r;return(null==(r=m(t))?void 0:r.libraryVersion)==e?[t]:[]}))},y=function(t){return function(){var e=c(a().mark((function e(r){var n,o;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:"/api/component/"+r,method:"get"});case 2:if(o=(n=e.sent).body,200!=n.status){e.next=7;break}return e.abrupt("return",h(o));case 7:return e.abrupt("return",void 0);case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},g=function(t){return t.content=t.content.map((function(e){return e.map((function(e,r){return function(t,e){if(null===t)return null;switch(e){case"date_time":return new Date(t);case"number":case"string":return t;case"boolean":return!!t}throw"Cannot parse value of unrecognised type."}(e,t.fields[r].dataType)}))})),t},x=function(t){return function(){var e=c(a().mark((function e(r,n,o){var i,u;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:"/api/create-result",method:"post",body:{queries:n.map((function(t){return w(t,r)}))},abortSignal:o});case 2:if(u=(i=e.sent).body,200!=i.status){e.next=7;break}return e.abrupt("return",u.results.map(g));case 7:return e.abrupt("return",void 0);case 8:case"end":return e.stop()}}),e)})));return function(t,r,n){return e.apply(this,arguments)}}()},w=function(t,e){var r,n=t.timeDimension;return n&&(n=p({},n,{timeZone:null!=(r=n.timeZone)?r:o.Utils.DateTime.currentTimezone()})),p({},t,{componentId:e,timeDimension:n})},b=function(t){return function(){var e=c(a().mark((function e(r,n){var o,i;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:"/api/organisation/"+r+"/studio-components/"+n,method:"get"});case 2:if(i=(o=e.sent).body,200!=o.status){e.next=7;break}return e.abrupt("return",i.components.map(h));case 7:return e.abrupt("return",void 0);case 8:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}()},C=function(t){return function(){var e=c(a().mark((function e(r,n,o){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:"/api/dashboard/"+r+"/studio-component",method:"post",body:{component_id:n,position:o}});case 2:return e.abrupt("return",200==e.sent.status);case 5:case"end":return e.stop()}}),e)})));return function(t,r,n){return e.apply(this,arguments)}}()},E=function(t){return function(){var e=c(a().mark((function e(r,n){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:"/api/dashboard/"+r+"/studio-component/remove",method:"post",body:{position:n}});case 2:return e.abrupt("return",200==e.sent.status);case 5:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}()},k=function(t){return function(){var e=c(a().mark((function e(r){var n,o,u;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.authToken?{auth:"Bearer "+t.authToken}:{},o=r.headers||{},e.next=4,i(""+t.host+r.path,{method:r.method,headers:p({"Content-Type":"application/json",Accept:"application/json"},n,o),redirect:"follow",referrerPolicy:"no-referrer",body:r.body?JSON.stringify(r.body):null,signal:r.abortSignal});case 4:return u=e.sent,e.next=7,u.json();case 7:return e.abrupt("return",{body:e.sent,status:u.status});case 9:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},S=function(t,e,r,n,o,i,u){var a={measure:t,order:e,filter:r,dimension:n,timeDimension:o,limit:i,secureFilter:u||[]};return L(a)?a:null},L=function(t){return null!==t&&!n.isEmpty(t.measure)},P=function(t,e){return p({},t,{secureFilter:e})},O=function(t,r,o,i,u,s){r=r.map((function(t){return function(t,e){return n.isEmpty(t.filter)&&(t.filter=[[]]),p({},t,{filter:[].concat(t.filter).map((function(t){return[].concat(t,e.map((function(t){return{field:t.field,op:t.op,value:t.exampleValue}})))}))})}(t,s||[])})),e.useEffect((function(){var e=new AbortController,s=function(){var n=c(a().mark((function n(){var s,c,p;return a().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(s=[],!u){n.next=6;break}return n.next=4,u();case 4:(c=n.sent)&&(s=[].concat(c));case 6:return r=r.map((function(t){return P(t,s)})),n.next=9,t.createQueryResult(o,r,e.signal);case 9:(p=n.sent)&&i(p,r);case 11:case"end":return n.stop()}}),n)})));return function(){return n.apply(this,arguments)}}();return o&&!n.isEmpty(r)&&s(),function(){e.abort()}}),[JSON.stringify(o),JSON.stringify(r)])},j=function(t){if(!t)return null;var e=k(t);return{config:t,getComponent:y(e),createQueryResult:x(e),getStudioComponents:b(e),addComponentToDashboard:C(e),removeComponentFromDashboard:E(e)}},q=require("../package.json").version,_=function(){throw"Function not initialised."},D=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setResults:_,setProps:_,setStyleProps:_,setTitle:_,setChartType:_,setDescription:_,setLibraryVersion:_,setVersion:_,setSavedAt:_,setSecureFilters:_}),F=function(t){var o=t.children,i=t.apiConfig,u=t.componentId,s=r.useState({apiConfig:i,results:[],queries:[],component:null,version:null}),l=s[0],f=s[1];e.useEffect((function(){!function(){var t=c(a().mark((function t(){var e,r,o;return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,null==(e=j(i))?void 0:e.getComponent(u);case 2:(r=t.sent)&&(o=m(r),n.isEmpty(null==o?void 0:o.secureFilters),f(p({},l,{queries:[],results:[],component:r,version:o||null})));case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}()()}),[u]);var d=p({},l,{setChartType:function(t){return function(t,e,r){e(p({},t,{results:[],queries:[],version:p({},t.version,{type:r})}))}(l,f,t)},setDescription:function(t){return function(t,e,r){e(p({},t,{version:p({},t.version,{description:r})}))}(l,f,t)},setTitle:function(t){return function(t,e,r){e(p({},t,{version:p({},t.version,{title:r})}))}(l,f,t)},setLibraryVersion:function(t){return function(t,e,r){e(p({},t,{results:[],queries:[],version:p({},t.version,{libraryVersion:r})}))}(l,f,t)},setProps:function(t){return function(t,e,r){e(p({},t,{results:[],queries:[],version:p({},t.version,{props:p({},r)})}))}(l,f,t)},setStyleProps:function(t){return function(t,e,r){e(p({},t,{version:p({},t.version,{props:p({},r)})}))}(l,f,t)},setResults:function(t,e){return function(t,e,r,n){e(p({},t,{results:r,queries:n}))}(l,f,t,e)},setVersion:function(t){return function(t,e,r){e(p({},t,{version:r,results:[],queries:[]}))}(l,f,t)},setSavedAt:function(t){return function(t,e,r){e(p({},t,{version:p({},t.version,{savedAt:r})}))}(l,f,t)},setSecureFilters:function(t){return function(t,e,r){e(p({},t,{version:p({},t.version,{secureFilters:r}),results:[],queries:[]}))}(l,f,t)}});return r.createElement(D.Provider,{value:d},o)},V=function(){return r.useContext(D)},T=function(){return r.useContext(D)},I=function(){return r.useContext(D)},A=function(){return r.useContext(D)},N=function(){return r.useContext(D)},R=function(t,e,r,n,o,i){var u=[];r.xMeasure&&u.push(r.xMeasure),r.yMeasure&&u.push(r.yMeasure);var a=S(u,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(j(t),L(a)?[a]:[],e,n,o,i)},M=function(t){var e=A(),i=e.apiConfig,u=e.setResults,a=e.component,s=e.results,c=e.queries,p=e.version,l=o.mergeProps(t,null==p?void 0:p.props,o.Components.LineChartView.defaultProps);return R(i,null==a?void 0:a.id,l,u,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.ScatterChartView,Object.assign({},l,{result:s[0],query:c[0]}))},G=function(t,e,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(j(t),L(u)?[u]:[],e,n,o,i)},Q=function(t){var e=T(),i=e.apiConfig,u=e.results,a=e.component,s=e.queries,c=e.version,p=e.setResults,l=o.mergeProps(t,null==c?void 0:c.props,o.Components.LineChartView.defaultProps);return G(i,null==a?void 0:a.id,l,p,t.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.BarChartView,Object.assign({},l,{result:u[0],query:s[0]}))},J=function(t,e,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(j(t),L(u)?[u]:[],e,n,o,i)},z=function(t){var e=V(),i=e.apiConfig,u=e.results,a=e.queries,s=e.version,c=e.component,p=e.setResults,l=o.mergeProps(t,null==s?void 0:s.props,o.Components.LineChartView.defaultProps);return J(i,null==c?void 0:c.id,l,p,t.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.LineChartView,Object.assign({},l,{result:u[0],query:a[0]}))},B=function(t,e,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,null,r.limit);O(j(t),L(u)?[u]:[],e,n,o,i)},K=function(t){var e=N(),i=e.apiConfig,u=e.component,a=e.setResults,s=e.results,c=e.queries,p=e.version,l=o.mergeProps(t,null==p?void 0:p.props,o.Components.LineChartView.defaultProps);return B(i,null==u?void 0:u.id,l,a,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.PieChartView,Object.assign({},l,{result:s[0],query:c[0]}))},U=function(t,e,r,n,o,i){var u=S(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);O(j(t),L(u)?[u]:[],e,n,o,i)},W=function(t){var e=I(),i=e.apiConfig,u=e.component,a=e.setResults,s=e.results,c=e.queries,p=e.version,l=o.mergeProps(t,null==p?void 0:p.props,o.Components.LineChartView.defaultProps);return U(i,null==u?void 0:u.id,l,a,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.AreaChartView,Object.assign({},l,{result:s[0],query:c[0]}))},Y=function(t){if("scatterChart"==t.type)return r.createElement(M,Object.assign({},t.componentProps));if("barChart"==t.type)return r.createElement(Q,Object.assign({},t.componentProps));if("areaChart"==t.type)return r.createElement(W,Object.assign({},t.componentProps));if("lineChart"==t.type)return r.createElement(z,Object.assign({},t.componentProps));if("pieChart"==t.type)return r.createElement(K,Object.assign({},t.componentProps));throw"Unsupported component in generic component."},Z=["lineChart","barChart","areaChart"],H=function(t,e){var r="",o=e.measure,i=e.dimension,u=e.timeDimension;return o[0]&&i&&(r=n.capitalize(o[0].aggregate)+" of '"+f(o[0].field)+"'",i&&(r+=", grouped by '"+i+"'"),u&&(r+=", on a "+function(t){if("day"==t)return"daily";if("month"==t)return"monthly";if("year"==t)return"annually";if("second"==t)return"per second";if("hour"==t)return"per hour";if("minute"==t)return"per minute";throw"Unsupported titme truncate value."}(u.truncate)+" basis.")),r},X=function(t,e){return Z.includes(t)?H(0,e):"scatterChart"==t?function(t){var e="",r=t.xMeasure,o=t.yMeasure,i=t.dimension;return r&&o&&(e=n.capitalize(r.aggregate)+" of '"+f(r.field)+"' by "+o.aggregate+" of '"+f(o.field)+"'",i&&(e+=", grouped by '"+i+"'.")),e}(e):"pieChart"==t?H(0,e):(console.warn("Summary requested for unsupported component "+t+"."),"")},$=function(){var t=c(a().mark((function t(e,r,n,o){return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(t.t0=!r,t.t0){t.next=8;break}if(t.t1=r,!t.t1){t.next=7;break}return t.next=6,null==e?void 0:e.addComponentToDashboard(r,o,n);case 6:t.t1=t.sent;case 7:t.t0=t.t1;case 8:return t.abrupt("return",t.t0);case 9:case"end":return t.stop()}}),t)})));return function(e,r,n,o){return t.apply(this,arguments)}}(),tt=function(){var t=c(a().mark((function t(e,r,n){return a().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(t.t0=!r,t.t0){t.next=5;break}return t.next=4,e.removeComponentFromDashboard(r,n);case 4:t.t0=t.sent;case 5:return t.abrupt("return",t.t0);case 6:case"end":return t.stop()}}),t)})));return function(e,r,n){return t.apply(this,arguments)}}();function et(t,e){return new Date(t.getTime()+6e4*e)}var rt=function(t){return function(){var e=c(a().mark((function e(r){var n,o;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.privateKey,e.next=3,u.JWK.asKey(n,"pem");case 3:return o=e.sent,e.next=6,u.JWS.createSign({alg:"ES256",format:"compact"},o).update(JSON.stringify(r),"utf8").final();case 6:return e.abrupt("return",e.sent);case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()},nt=function(t){return c(a().mark((function e(){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,rt(t)({expires:et(new Date,t.ttlInMinutes).toISOString()});case 2:return e.abrupt("return",e.sent);case 3:case"end":return e.stop()}}),e)})))},ot=function(t){return function(){var e=c(a().mark((function e(r){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,rt(t)({filter:r,expires:et(new Date,t.ttlInMinutes).toISOString()});case 2:return e.abrupt("return",e.sent);case 4:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()};exports.AreaChart=W,exports.BarChart=Q,exports.ComponentContextProvider=F,exports.LineChart=z,exports.ScatterChart=M,exports.Studio=function(t){var i,u,s=t.organisationId,l=t.studioComponentsTag,f=t.apiConfig,d=j(f),h=function(t,n,o){var i=e.useState(null),u=i[0],s=i[1];return r.useEffect((function(){u||function(){var e=c(a().mark((function e(){var r;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.getStudioComponents(n,o);case 2:(r=v(r=e.sent,q))&&s(r);case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()()}),[n,o]),u}(d,s,l),y=function(t,n){var o=r.useState(null),i=o[0],u=o[1];return e.useEffect((function(){n&&function(){var e=c(a().mark((function e(){return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t.getDashboard();case 2:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()()}),[n]),{dashboard:i,setComponents:function(t){u(p({},i,{components:t}))}}}(d,t.dashboardId),g=y.dashboard,x=y.setComponents,w=e.useState(null),b=w[0],C=w[1],E=null!=b,k=n.mapValues(p({},null==g?void 0:g.components),(function(t){var e=m(t);return function(){return r.createElement(r.Fragment,null,r.createElement(F,{componentId:t.id,apiConfig:f},r.createElement(Y,{type:null==e?void 0:e.type,componentProps:null==e?void 0:e.props})))}}));return h?r.createElement(o.Components.StudioView,{onRemove:(u=c(a().mark((function e(r){var n;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=p({},null==g?void 0:g.components),e.next=3,tt(d,t.dashboardId,r);case 3:e.sent&&(delete n[r],x(n));case 5:case"end":return e.stop()}}),e)}))),function(t){return u.apply(this,arguments)}),onSelectComponent:(i=c(a().mark((function e(r){var n,o;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!b){e.next=6;break}return n=h[r],e.next=4,$(d,t.dashboardId,b,n.id);case 4:e.sent&&(x(p({},null==g?void 0:g.components,((o={})[b]=n,o))),C(null));case 6:case"end":return e.stop()}}),e)}))),function(t){return i.apply(this,arguments)}),onSelectComponentPlaceholder:C,componentOptions:[].concat(h).map((function(t){var e=m(t);return{title:null==e?void 0:e.title,summary:X(null==e?void 0:e.type,null==e?void 0:e.props),type:null==e?void 0:e.type}})),templateRenderCallbacks:k,showDrawer:E,onCloseDrawer:function(){return C(null)},templateId:"demo"}):null},exports.auth=function(t){return{accessToken:nt(t),signFilter:ot(t)}},exports.componentSummary=X,exports.createQueryResult=x,exports.httpClient=k,exports.useAreaChart=I,exports.useAreaChartQueryEffect=U,exports.useBarChart=T,exports.useBarChartQueryEffect=G,exports.useComponentContext=function(){return r.useContext(D)},exports.useLineChart=V,exports.useLineChartQueryEffect=J,exports.usePieChart=N,exports.usePieChartQueryEffect=B,exports.useScatterChart=A,exports.useScatterChartQueryEffect=R;
 //# sourceMappingURL=components.cjs.production.min.js.map

dist/components.esm.js

 import React, { useEffect, useState } from 'react';
-import { replace, last, flatMap, isEmpty, capitalize } from 'lodash-es';
+import { replace, last, flatMap, isEmpty, capitalize, mapValues } from 'lodash-es';
 import { Utils, mergeProps, Components } from '@vizzly/puppet';
@@ -681,2 +681,39 @@ import fetch from 'isomorphic-fetch';
 
+var removeComponentFromDashboard = function removeComponentFromDashboard(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dashboardId, position) {
+      var _yield$httpClient, status;
+
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return httpClient({
+                path: "/api/dashboard/" + dashboardId + "/studio-component/remove",
+                method: 'post',
+                body: {
+                  position: position
+                }
+              });
+
+            case 2:
+              _yield$httpClient = _context.sent;
+              status = _yield$httpClient.status;
+              return _context.abrupt("return", status == 200);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
 var httpClient = function httpClient(config) {
@@ -840,3 +877,4 @@ return /*#__PURE__*/function () {
     getStudioComponents: getStudioComponents(client),
-    addComponentToDashboard: addComponentToDashboard(client)
+    addComponentToDashboard: addComponentToDashboard(client),
+    removeComponentFromDashboard: removeComponentFromDashboard(client)
   };
@@ -889,2 +927,45 @@ };
 
+var useDashboard = function useDashboard(api, dashboardId) {
+  var _React$useState = React.useState(null),
+      dashboard = _React$useState[0],
+      setDashboard = _React$useState[1];
+
+  useEffect(function () {
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.getDashboard();
+
+              case 2:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    dashboardId && doWork();
+  }, [dashboardId]);
+
+  var setComponents = function setComponents(components) {
+    setDashboard(_extends({}, dashboard, {
+      components: components
+    }));
+  };
+
+  return {
+    dashboard: dashboard,
+    setComponents: setComponents
+  };
+};
+
 var setSavedAt = function setSavedAt(state, setState, savedAt) {
@@ -1287,2 +1368,6 @@ setState(_extends({}, state, {
 
+  if (type == 'pieChart') {
+    return timeDimensionChartSummary(type, props);
+  }
+
   console.warn("Summary requested for unsupported component " + type + ".");
@@ -1292,2 +1377,81 @@ return '';
 
+var addComponentToDashboard$1 = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(vizzlyApi, dashboardId, position, componentId) {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.t0 = !dashboardId;
+
+            if (_context.t0) {
+              _context.next = 8;
+              break;
+            }
+
+            _context.t1 = dashboardId;
+
+            if (!_context.t1) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 6;
+            return vizzlyApi == null ? void 0 : vizzlyApi.addComponentToDashboard(dashboardId, componentId, position);
+
+          case 6:
+            _context.t1 = _context.sent;
+
+          case 7:
+            _context.t0 = _context.t1;
+
+          case 8:
+            return _context.abrupt("return", _context.t0);
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function addComponentToDashboard(_x, _x2, _x3, _x4) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var removeComponentFromDashboard$1 = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(vizzlyApi, dashboardId, position) {
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.t0 = !dashboardId;
+
+            if (_context2.t0) {
+              _context2.next = 5;
+              break;
+            }
+
+            _context2.next = 4;
+            return vizzlyApi.removeComponentFromDashboard(dashboardId, position);
+
+          case 4:
+            _context2.t0 = _context2.sent;
+
+          case 5:
+            return _context2.abrupt("return", _context2.t0);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function removeComponentFromDashboard(_x5, _x6, _x7) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+
 var Studio = function Studio(props) {
@@ -1300,2 +1464,6 @@ var organisationId = props.organisationId,
 
+  var _useDashboard = useDashboard(vizzlyApi, props.dashboardId),
+      dashboard = _useDashboard.dashboard,
+      setComponents = _useDashboard.setComponents;
+
   var _useState = useState(null),
@@ -1305,29 +1473,92 @@ selectedStudioComponentPlaceholder = _useState[0],
 
-  var _useState2 = useState({}),
-      renderCallbacks = _useState2[0],
-      setRenderCallbacks = _useState2[1];
+  var showDrawer = selectedStudioComponentPlaceholder != null;
 
-  var showDrawer = selectedStudioComponentPlaceholder != null;
-  if (!studioComponents) return React.createElement("p", null, "loading studio components");
+  var buildRenderFunc = function buildRenderFunc(component) {
+    var latestVersion$1 = latestVersion(component);
+    return function () {
+      return React.createElement(React.Fragment, null, React.createElement(ComponentContextProvider, {
+        componentId: component.id,
+        apiConfig: apiConfig
+      }, React.createElement(Component, {
+        type: latestVersion$1 == null ? void 0 : latestVersion$1.type,
+        componentProps: latestVersion$1 == null ? void 0 : latestVersion$1.props
+      })));
+    };
+  };
+
+  var renderCallbacks = mapValues(_extends({}, dashboard == null ? void 0 : dashboard.components), buildRenderFunc);
+  if (!studioComponents) return null;
   return React.createElement(Components.StudioView, {
-    onSelectComponent: function onSelectComponent(componentIndex) {
-      if (selectedStudioComponentPlaceholder) {
-        var _extends2;
+    onRemove: function () {
+      var _onRemove = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(position) {
+        var newComponents, removedFromDashboard;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                newComponents = _extends({}, dashboard == null ? void 0 : dashboard.components);
+                _context.next = 3;
+                return removeComponentFromDashboard$1(vizzlyApi, props.dashboardId, position);
 
-        var component = studioComponents[componentIndex];
-        var latestVersion$1 = latestVersion(component); // const addedToDashboard = vizzlyApi?.addComponentToDashboard(props.dashboardId, component.id, selectedStudioComponentPlaceholder);
-        // if(addedToDashboard) {
+              case 3:
+                removedFromDashboard = _context.sent;
 
-        setRenderCallbacks(_extends({}, renderCallbacks, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = function () {
-          return React.createElement(React.Fragment, null, React.createElement(ComponentContextProvider, {
-            componentId: component.id,
-            apiConfig: apiConfig
-          }, React.createElement(Component, {
-            type: latestVersion$1 == null ? void 0 : latestVersion$1.type,
-            componentProps: latestVersion$1 == null ? void 0 : latestVersion$1.props
-          })));
-        }, _extends2)));
-        setSelectedStudioComponentPlaceholder(null); // };
+                if (removedFromDashboard) {
+                  delete newComponents[position];
+                  setComponents(newComponents);
+                }
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function onRemove(_x) {
+        return _onRemove.apply(this, arguments);
       }
-    },
+
+      return onRemove;
+    }(),
+    onSelectComponent: function () {
+      var _onSelectComponent = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(componentIndex) {
+        var component, addedToDashboard, _extends2;
+
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (!selectedStudioComponentPlaceholder) {
+                  _context2.next = 6;
+                  break;
+                }
+
+                component = studioComponents[componentIndex];
+                _context2.next = 4;
+                return addComponentToDashboard$1(vizzlyApi, props.dashboardId, selectedStudioComponentPlaceholder, component.id);
+
+              case 4:
+                addedToDashboard = _context2.sent;
+
+                if (addedToDashboard) {
+                  setComponents(_extends({}, dashboard == null ? void 0 : dashboard.components, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = component, _extends2)));
+                  setSelectedStudioComponentPlaceholder(null);
+                }
+
+              case 6:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      function onSelectComponent(_x2) {
+        return _onSelectComponent.apply(this, arguments);
+      }
+
+      return onSelectComponent;
+    }(),
     onSelectComponentPlaceholder: setSelectedStudioComponentPlaceholder,
@@ -1334,0 +1565,0 @@ componentOptions: [].concat(studioComponents).map(function (studioComponent) {

dist/components/Studio.d.ts

@@ -9,2 +9,2 @@ /// <reference types="react" />
 };
-export declare const Studio: (props: Props) => JSX.Element;
+export declare const Studio: (props: Props) => JSX.Element | null;

package.json

 {
   "name": "@vizzly/components",
   "author": "James Bowers",
-  "version": "0.0.101",
+  "version": "0.0.102",
   "license": "MIT",
@@ -68,4 +68,4 @@ "main": "dist/index.js",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-is": "^18.2.0",
@@ -79,3 +79,3 @@ "size-limit": "^7.0.8",
     "@types/node-jose": "^1.1.10",
-    "@vizzly/puppet": "0.0.55",
+    "@vizzly/puppet": "0.0.59",
     "isomorphic-fetch": "^3.0.0",
@@ -82,0 +82,0 @@ "lodash": "^4.17.21",

src/api/index.ts

@@ -6,2 +6,3 @@ import { VizzlyComponents } from '../types';
 import { addComponentToDashboard } from './addComponentToDashboard';
+import { removeComponentFromDashboard } from './removeComponentFromDashboard';
 import { httpClient } from './httpClient';
@@ -21,3 +22,4 @@ export * from './useQueryEffect';
     addComponentToDashboard: addComponentToDashboard(client),
+    removeComponentFromDashboard: removeComponentFromDashboard(client),
   };
 };

src/api/useDashboard.ts

 import React, { useEffect } from 'react';
 import { VizzlyComponents } from '../types';
 
-export const useDashboard = (api: any, dashboardId: string) => {
-  const [dashboard] = React.useState<VizzlyComponents.Dashboard | null>(null);
+type Components = { [key: string]: VizzlyComponents.Component };
 
+type DashboardState =
+  | null
+  | (Partial<VizzlyComponents.Dashboard> & {
+      components: Components;
+    });
+
+type ContextProvided = {
+  dashboard: DashboardState;
+  setComponents: (components: Components) => void;
+};
+
+export const useDashboard = (
+  api: any,
+  dashboardId: string | undefined
+): ContextProvided => {
+  const [dashboard, setDashboard] = React.useState<DashboardState>(null);
+
   useEffect(() => {
@@ -12,6 +28,12 @@ const doWork = async () => {
 
-    doWork();
+    dashboardId && doWork();
   }, [dashboardId]);
 
-  return { dashboard };
+  const setComponents = (components: {
+    [key: string]: VizzlyComponents.Component;
+  }) => {
+    setDashboard({ ...dashboard, components });
+  };
+
+  return { dashboard, setComponents };
 };

src/componentSummary.ts

@@ -70,2 +70,6 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 
+  if (type == 'pieChart') {
+    return timeDimensionChartSummary(type, props as TimeSeriesProps);
+  }
+
   console.warn(`Summary requested for unsupported component ${type}.`);
@@ -72,0 +76,0 @@

No alert changes

Improved metrics

Total package byte prevSize

423686

increased by9.12%

Number of package files

96

increased by4.35%

Lines of code

4853

increased by11.33%

Dependency changes

• Updated@vizzly/puppet@0.0.59