@vizzly/components - npm Package Compare versions

Comparing version 0.0.93 to 0.0.94

dist/api/index.d.ts

@@ -7,2 +7,4 @@ import { VizzlyComponents } from '../types';
     createQueryResult: (componentId: string, queries: import("@vizzly/puppet").VizzlyPuppet.Query[], abortSignal: AbortSignal) => Promise<import("@vizzly/puppet").VizzlyPuppet.Result[] | undefined>;
+    getStudioComponents: (organisationId: string, tag: string) => Promise<VizzlyComponents.Component[] | undefined>;
+    addComponentToDashboard: (dashboardId: string, componentId: string, position: string) => Promise<boolean>;
 } | null;

dist/components.cjs.development.js

@@ -9,4 +9,4 @@ 'use strict';
 var React__default = _interopDefault(React);
+var lodash = require('lodash');
 var puppet = require('@vizzly/puppet');
-var lodash = require('lodash');
 var fetch = _interopDefault(require('isomorphic-fetch'));
@@ -473,3 +473,11 @@ var jose = require('node-jose');
 };
+var filterOutUnsupportedComponents = function filterOutUnsupportedComponents(components, supportedVersion) {
+  return lodash.flatMap([].concat(components), function (component) {
+    var _latestVersion;
 
+    var supported = ((_latestVersion = latestVersion(component)) == null ? void 0 : _latestVersion.libraryVersion) == supportedVersion;
+    return supported ? [component] : [];
+  });
+};
+
 var getComponent = function getComponent(httpClient) {
@@ -596,2 +604,84 @@ return /*#__PURE__*/function () {
 
+var getStudioComponents = function getStudioComponents(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(organisationId, tag) {
+      var _yield$httpClient, body, status;
+
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return httpClient({
+                path: "/api/organisation/" + organisationId + "/studio-components/" + tag,
+                method: 'get'
+              });
+
+            case 2:
+              _yield$httpClient = _context.sent;
+              body = _yield$httpClient.body;
+              status = _yield$httpClient.status;
+
+              if (!(status == 200)) {
+                _context.next = 7;
+                break;
+              }
+
+              return _context.abrupt("return", body.components.map(fromRawComponent));
+
+            case 7:
+              return _context.abrupt("return", undefined);
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
+var addComponentToDashboard = function addComponentToDashboard(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dashboardId, componentId, 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",
+                method: 'post',
+                body: {
+                  component_id: componentId,
+                  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, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
 var httpClient = function httpClient(config) {
@@ -753,6 +843,52 @@ return /*#__PURE__*/function () {
     getComponent: getComponent(client),
-    createQueryResult: createQueryResult(client)
+    createQueryResult: createQueryResult(client),
+    getStudioComponents: getStudioComponents(client),
+    addComponentToDashboard: addComponentToDashboard(client)
   };
 };
 
+var LIBRARY_VERSION = /*#__PURE__*/require('../package.json').version;
+
+var useStudioComponents = function useStudioComponents(api, organisationId, tag) {
+  var _useState = React.useState(null),
+      components = _useState[0],
+      setComponents = _useState[1];
+
+  React__default.useEffect(function () {
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var fetchedComponents;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.getStudioComponents(organisationId, tag);
+
+              case 2:
+                fetchedComponents = _context.sent;
+                fetchedComponents = filterOutUnsupportedComponents(fetchedComponents, LIBRARY_VERSION); // TODO
+                // Filter out the versions of each component that is not for the current library version.
+                // Filter out any components which have 0 versions.
+
+                if (fetchedComponents) setComponents(fetchedComponents);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    if (!components) doWork();
+  }, [organisationId, tag]);
+  return components;
+};
+
 var setSavedAt = function setSavedAt(state, setState, savedAt) {
@@ -971,2 +1107,5 @@ setState(_extends({}, state, {
 };
+var usePieChart = function usePieChart() {
+  return React__default.useContext(ComponentContext);
+};
 var useComponentContext = function useComponentContext() {
@@ -976,20 +1115,23 @@ return React__default.useContext(ComponentContext);
 
-var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
+var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var measures = [];
+  props.xMeasure && measures.push(props.xMeasure);
+  props.yMeasure && measures.push(props.yMeasure);
+  var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
   useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
 };
 
-var LineChart = function LineChart(explicitProps) {
-  var _useLineChart = useLineChart(),
-      apiConfig = _useLineChart.apiConfig,
-      results = _useLineChart.results,
-      queries = _useLineChart.queries,
-      version = _useLineChart.version,
-      component = _useLineChart.component,
-      setResults = _useLineChart.setResults;
+var ScatterChart = function ScatterChart(explicitProps) {
+  var _useScatterChart = useScatterChart(),
+      apiConfig = _useScatterChart.apiConfig,
+      setResults = _useScatterChart.setResults,
+      component = _useScatterChart.component,
+      results = _useScatterChart.results,
+      queries = _useScatterChart.queries,
+      version = _useScatterChart.version;
 
   var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
-  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
   if (lodash.isEmpty(results)) return null;
-  return React__default.createElement(puppet.Components.LineChartView, Object.assign({}, componentProps, {
+  return React__default.createElement(puppet.Components.ScatterChartView, Object.assign({}, componentProps, {
     result: results[0],
@@ -1023,2 +1165,48 @@ query: queries[0]
 
+var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+};
+
+var LineChart = function LineChart(explicitProps) {
+  var _useLineChart = useLineChart(),
+      apiConfig = _useLineChart.apiConfig,
+      results = _useLineChart.results,
+      queries = _useLineChart.queries,
+      version = _useLineChart.version,
+      component = _useLineChart.component,
+      setResults = _useLineChart.setResults;
+
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  if (lodash.isEmpty(results)) return null;
+  return React__default.createElement(puppet.Components.LineChartView, Object.assign({}, componentProps, {
+    result: results[0],
+    query: queries[0]
+  }));
+};
+
+var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+};
+
+var PieChart = function PieChart(explicitProps) {
+  var _usePieChart = usePieChart(),
+      apiConfig = _usePieChart.apiConfig,
+      component = _usePieChart.component,
+      setResults = _usePieChart.setResults,
+      results = _usePieChart.results,
+      queries = _usePieChart.queries,
+      version = _usePieChart.version;
+
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  usePieChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  if (lodash.isEmpty(results)) return null;
+  return React__default.createElement(puppet.Components.PieChartView, Object.assign({}, componentProps, {
+    result: results[0],
+    query: queries[0]
+  }));
+};
+
 var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
@@ -1047,26 +1235,67 @@ var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
 
-var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var measures = [];
-  props.xMeasure && measures.push(props.xMeasure);
-  props.yMeasure && measures.push(props.yMeasure);
-  var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+var Component = function Component(props) {
+  if (props.type == 'scatterChart') return React__default.createElement(ScatterChart, Object.assign({}, props.componentProps));
+  if (props.type == 'barChart') return React__default.createElement(BarChart, Object.assign({}, props.componentProps));
+  if (props.type == 'areaChart') return React__default.createElement(AreaChart, Object.assign({}, props.componentProps));
+  if (props.type == 'lineChart') return React__default.createElement(LineChart, Object.assign({}, props.componentProps));
+  if (props.type == 'pieChart') return React__default.createElement(PieChart, Object.assign({}, props.componentProps));
+  throw 'Unsupported component in generic component.';
 };
 
-var ScatterChart = function ScatterChart(explicitProps) {
-  var _useScatterChart = useScatterChart(),
-      apiConfig = _useScatterChart.apiConfig,
-      setResults = _useScatterChart.setResults,
-      component = _useScatterChart.component,
-      results = _useScatterChart.results,
-      queries = _useScatterChart.queries,
-      version = _useScatterChart.version;
+var Studio = function Studio(props) {
+  var organisationId = props.organisationId,
+      studioComponentsTag = props.studioComponentsTag,
+      apiConfig = props.apiConfig;
+  var vizzlyApi = api(apiConfig);
+  var studioComponents = useStudioComponents(vizzlyApi, organisationId, studioComponentsTag);
 
-  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
-  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
-  if (lodash.isEmpty(results)) return null;
-  return React__default.createElement(puppet.Components.ScatterChartView, Object.assign({}, componentProps, {
-    result: results[0],
-    query: queries[0]
-  }));
+  var _useState = React.useState(null),
+      selectedStudioComponentPlaceholder = _useState[0],
+      setSelectedStudioComponentPlaceholder = _useState[1];
+
+  var _useState2 = React.useState({}),
+      renderCallbacks = _useState2[0],
+      setRenderCallbacks = _useState2[1];
+
+  var showDrawer = selectedStudioComponentPlaceholder != null;
+  if (!studioComponents) return React__default.createElement("p", null, "loading studio components");
+  return React__default.createElement(puppet.Components.StudioView, {
+    onSelectComponent: function onSelectComponent(componentIndex) {
+      if (selectedStudioComponentPlaceholder) {
+        var _extends2;
+
+        var component = studioComponents[componentIndex];
+        var latestVersion$1 = latestVersion(component); // const addedToDashboard = vizzlyApi?.addComponentToDashboard(props.dashboardId, component.id, selectedStudioComponentPlaceholder);
+        // if(addedToDashboard) {
+
+        setRenderCallbacks(_extends({}, renderCallbacks, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = function () {
+          return React__default.createElement(React__default.Fragment, null, React__default.createElement(ComponentContextProvider, {
+            componentId: component.id,
+            apiConfig: {
+              host: 'http://0.0.0.0:7080'
+            }
+          }, 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); // };
+      }
+    },
+    onSelectComponentPlaceholder: setSelectedStudioComponentPlaceholder,
+    componentOptions: [].concat(studioComponents).map(function (studioComponent) {
+      var latestVersion$1 = latestVersion(studioComponent);
+      return {
+        title: latestVersion$1 == null ? void 0 : latestVersion$1.title,
+        summary: 'a summary',
+        type: latestVersion$1 == null ? void 0 : latestVersion$1.type
+      };
+    }),
+    templateRenderCallbacks: renderCallbacks,
+    showDrawer: showDrawer,
+    onCloseDrawer: function onCloseDrawer() {
+      return setSelectedStudioComponentPlaceholder(null);
+    },
+    templateId: "demo"
+  });
 };
@@ -1178,7 +1407,2 @@
 
-var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
-};
-
 exports.AreaChart = AreaChart;
@@ -1189,2 +1413,3 @@ exports.BarChart = BarChart;
 exports.ScatterChart = ScatterChart;
+exports.Studio = Studio;
 exports.auth = auth;
@@ -1200,2 +1425,3 @@ exports.createQueryResult = createQueryResult;
 exports.useLineChartQueryEffect = useLineChartQueryEffect;
+exports.usePieChart = usePieChart;
 exports.usePieChartQueryEffect = usePieChartQueryEffect;
@@ -1202,0 +1428,0 @@ exports.useScatterChart = useScatterChart;

dist/components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"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("@vizzly/puppet"),o=require("lodash"),i=t(require("isomorphic-fetch")),u=require("node-jose");function s(){s=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 a(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{a({},"")}catch(t){a=function(t,e,r){return t[e]=r}}function c(t,e,r,n){var o=Object.create((e&&e.prototype instanceof p?e:p).prototype),i=new L(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 s=b(u,r);if(s){if(s===f)continue;return s}}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 a=l(t,e,r);if("normal"===a.type){if(n=r.done?"completed":"suspendedYield",a.arg===f)continue;return{value:a.arg,done:r.done}}"throw"===a.type&&(n="completed",r.method="throw",r.arg=a.arg)}}}(t,r,i),o}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var f={};function p(){}function h(){}function v(){}var d={};a(d,o,(function(){return this}));var m=Object.getPrototypeOf,y=m&&m(m(S([])));y&&y!==e&&r.call(y,o)&&(d=y);var g=v.prototype=p.prototype=Object.create(d);function x(t){["next","throw","return"].forEach((function(e){a(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,s){var a=l(t[o],t,i);if("throw"!==a.type){var c=a.arg,f=c.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,u,s)}),(function(t){n("throw",t,u,s)})):e.resolve(f).then((function(t){c.value=t,u(c)}),(function(t){return n("throw",t,u,s)}))}s(a.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 f;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return f}var n=l(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,f;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,f):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,f)}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 L(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:O}}function O(){return{value:void 0,done:!0}}return h.prototype=v,a(g,"constructor",v),a(v,"constructor",h),h.displayName=a(v,u,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,v):(t.__proto__=v,a(t,u,"GeneratorFunction")),t.prototype=Object.create(g),t},t.awrap=function(t){return{__await:t}},x(w.prototype),a(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),a(g,u,"Generator"),a(g,o,(function(){return this})),a(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,L.prototype={constructor:L,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 s=r.call(i,"catchLoc"),a=r.call(i,"finallyLoc");if(s&&a){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!a)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,f):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),f},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),f}},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),f}},t}function a(t,e,r,n,o,i,u){try{var s=t[i](u),a=s.value}catch(t){return void r(t)}s.done?e(a):Promise.resolve(a).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){a(i,n,o,u,s,"next",t)}function s(t){a(i,n,o,u,s,"throw",t)}u(void 0)}))}}function l(){return(l=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 f=function(t){return{id:t.id,dataType:t.type,title:t.title}},p=function(t){return{fields:[].concat(t.fields).map(f)}},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(p),versions:e}},v=function(t){return o.last(t.versions)},d=function(t){return function(){var e=c(s().mark((function e(r){var n,o;return s().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)}}()},m=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},y=function(t){return function(){var e=c(s().mark((function e(r,n,o){var i,u;return s().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 g(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(m));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)}}()},g=function(t,e){var r,o=t.timeDimension;return o&&(o=l({},o,{timeZone:null!=(r=o.timeZone)?r:n.Utils.DateTime.currentTimezone()})),l({},t,{componentId:e,timeDimension:o})},x=function(t){return function(){var e=c(s().mark((function e(r){var n,o,u;return s().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: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=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)}}()},w=function(t,e,r,n,o,i,u){var s={measure:t,order:e,filter:r,dimension:n,timeDimension:o,limit:i,secureFilter:u||[]};return b(s)?s:null},b=function(t){return null!==t&&!o.isEmpty(t.measure)},C=function(t,e){return l({},t,{secureFilter:e})},E=function(t,r,n,i,u,a){r=r.map((function(t){return function(t,e){return o.isEmpty(t.filter)&&(t.filter=[[]]),l({},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,a||[])})),e.useEffect((function(){var e=new AbortController,a=function(){var o=c(s().mark((function o(){var a,c,l;return s().wrap((function(o){for(;;)switch(o.prev=o.next){case 0:if(a=[],!u){o.next=6;break}return o.next=4,u();case 4:(c=o.sent)&&(a=[].concat(c));case 6:return r=r.map((function(t){return C(t,a)})),o.next=9,t.createQueryResult(n,r,e.signal);case 9:(l=o.sent)&&i(l,r);case 11:case"end":return o.stop()}}),o)})));return function(){return o.apply(this,arguments)}}();return n&&!o.isEmpty(r)&&a(),function(){e.abort()}}),[JSON.stringify(n),JSON.stringify(r)])},L=function(t){if(!t)return null;var e=x(t);return{config:t,getComponent:d(e),createQueryResult:y(e)}},S=function(){throw"Function not initialised."},O=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setResults:S,setProps:S,setStyleProps:S,setTitle:S,setChartType:S,setDescription:S,setLibraryVersion:S,setVersion:S,setSavedAt:S,setSecureFilters:S}),k=function(){return r.useContext(O)},P=function(){return r.useContext(O)},_=function(){return r.useContext(O)},j=function(){return r.useContext(O)},q=function(t,e,r,n,o,i){var u=w(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);E(L(t),b(u)?[u]:[],e,n,o,i)},F=function(t,e,r,n,o,i){var u=w(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);E(L(t),b(u)?[u]:[],e,n,o,i)},T=function(t,e,r,n,o,i){var u=w(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);E(L(t),b(u)?[u]:[],e,n,o,i)},V=function(t,e,r,n,o,i){var u=[];r.xMeasure&&u.push(r.xMeasure),r.yMeasure&&u.push(r.yMeasure);var s=w(u,r.order,r.filter,r.dimension,r.timeDimension,r.limit);E(L(t),b(s)?[s]:[],e,n,o,i)};function D(t,e){return new Date(t.getTime()+6e4*e)}var A=function(t){return function(){var e=c(s().mark((function e(r){var n,o;return s().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)}}()},N=function(t){return c(s().mark((function e(){return s().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,A(t)({expires:D(new Date,t.ttlInMinutes).toISOString()});case 2:return e.abrupt("return",e.sent);case 3:case"end":return e.stop()}}),e)})))},I=function(t){return function(){var e=c(s().mark((function e(r){return s().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,A(t)({filter:r,expires:D(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=function(t){var e=_(),i=e.apiConfig,u=e.component,s=e.setResults,a=e.results,c=e.queries,l=e.version,f=n.mergeProps(t,null==l?void 0:l.props,n.Components.LineChartView.defaultProps);return T(i,null==u?void 0:u.id,f,s,t.secureFilterCallback),o.isEmpty(a)?null:r.createElement(n.Components.AreaChartView,Object.assign({},f,{result:a[0],query:c[0]}))},exports.BarChart=function(t){var e=P(),i=e.apiConfig,u=e.results,s=e.component,a=e.queries,c=e.version,l=e.setResults,f=n.mergeProps(t,null==c?void 0:c.props,n.Components.LineChartView.defaultProps);return F(i,null==s?void 0:s.id,f,l,t.secureFilterCallback),o.isEmpty(u)?null:r.createElement(n.Components.BarChartView,Object.assign({},f,{result:u[0],query:a[0]}))},exports.ComponentContextProvider=function(t){var n=t.children,i=t.apiConfig,u=t.componentId,a=r.useState({apiConfig:i,results:[],queries:[],component:null,version:null}),f=a[0],p=a[1];e.useEffect((function(){!function(){var t=c(s().mark((function t(){var e,r,n;return s().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,null==(e=L(i))?void 0:e.getComponent(u);case 2:(r=t.sent)&&(n=v(r),o.isEmpty(null==n?void 0:n.secureFilters),p(l({},f,{queries:[],results:[],component:r,version:n||null})));case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}()()}),[u]);var h=l({},f,{setChartType:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{type:r})}))}(f,p,t)},setDescription:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{description:r})}))}(f,p,t)},setTitle:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{title:r})}))}(f,p,t)},setLibraryVersion:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{libraryVersion:r})}))}(f,p,t)},setProps:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{props:l({},r)})}))}(f,p,t)},setStyleProps:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{props:l({},r)})}))}(f,p,t)},setResults:function(t,e){return function(t,e,r,n){e(l({},t,{results:r,queries:n}))}(f,p,t,e)},setVersion:function(t){return function(t,e,r){e(l({},t,{version:r,results:[],queries:[]}))}(f,p,t)},setSavedAt:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{savedAt:r})}))}(f,p,t)},setSecureFilters:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{secureFilters:r}),results:[],queries:[]}))}(f,p,t)}});return r.createElement(O.Provider,{value:h},n)},exports.LineChart=function(t){var e=k(),i=e.apiConfig,u=e.results,s=e.queries,a=e.version,c=e.component,l=e.setResults,f=n.mergeProps(t,null==a?void 0:a.props,n.Components.LineChartView.defaultProps);return q(i,null==c?void 0:c.id,f,l,t.secureFilterCallback),o.isEmpty(u)?null:r.createElement(n.Components.LineChartView,Object.assign({},f,{result:u[0],query:s[0]}))},exports.ScatterChart=function(t){var e=j(),i=e.apiConfig,u=e.setResults,s=e.component,a=e.results,c=e.queries,l=e.version,f=n.mergeProps(t,null==l?void 0:l.props,n.Components.LineChartView.defaultProps);return V(i,null==s?void 0:s.id,f,u,t.secureFilterCallback),o.isEmpty(a)?null:r.createElement(n.Components.ScatterChartView,Object.assign({},f,{result:a[0],query:c[0]}))},exports.auth=function(t){return{accessToken:N(t),signFilter:I(t)}},exports.createQueryResult=y,exports.httpClient=x,exports.useAreaChart=_,exports.useAreaChartQueryEffect=T,exports.useBarChart=P,exports.useBarChartQueryEffect=F,exports.useComponentContext=function(){return r.useContext(O)},exports.useLineChart=k,exports.useLineChartQueryEffect=q,exports.usePieChartQueryEffect=function(t,e,r,n,o,i){var u=w(r.measure,r.order,r.filter,r.dimension,null,r.limit);E(L(t),b(u)?[u]:[],e,n,o,i)},exports.useScatterChart=j,exports.useScatterChartQueryEffect=V;
+"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 S(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===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(t,e,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)}}}(t,r,i),o}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.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!==e&&r.call(y,o)&&(m=y);var g=d.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=l(t[o],t,i);if("throw"!==s.type){var c=s.arg,p=c.value;return p&&"object"==typeof p&&r.call(p,"__await")?e.resolve(p.__await).then((function(t){n("next",t,u,a)}),(function(t){n("throw",t,u,a)})):e.resolve(p).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 p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var n=l(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,p;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,p):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}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 S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(C,this),this.reset(!0)}function L(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: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"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===h||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,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=L,S.prototype={constructor:S,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,p):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),p},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),p}},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:L(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),p}},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 l(){return(l=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 p=function(t){return{id:t.id,dataType:t.type,title:t.title}},f=function(t){return{fields:[].concat(t.fields).map(p)}},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(f),versions:e}},d=function(t){return n.last(t.versions)},m=function(t,e){return n.flatMap([].concat(t),(function(t){var r;return(null==(r=d(t))?void 0:r.libraryVersion)==e?[t]:[]}))},v=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)}}()},y=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},g=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 x(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(y));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)}}()},x=function(t,e){var r,n=t.timeDimension;return n&&(n=l({},n,{timeZone:null!=(r=n.timeZone)?r:o.Utils.DateTime.currentTimezone()})),l({},t,{componentId:e,timeDimension:n})},w=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)}}()},b=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)}}()},C=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: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=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)}}()},E=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 S(a)?a:null},S=function(t){return null!==t&&!n.isEmpty(t.measure)},L=function(t,e){return l({},t,{secureFilter:e})},P=function(t,r,o,i,u,s){r=r.map((function(t){return function(t,e){return n.isEmpty(t.filter)&&(t.filter=[[]]),l({},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,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(t){return L(t,s)})),n.next=9,t.createQueryResult(o,r,e.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(){e.abort()}}),[JSON.stringify(o),JSON.stringify(r)])},O=function(t){if(!t)return null;var e=C(t);return{config:t,getComponent:v(e),createQueryResult:g(e),getStudioComponents:w(e),addComponentToDashboard:b(e)}},k=require("../package.json").version,j=function(){throw"Function not initialised."},q=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setResults:j,setProps:j,setStyleProps:j,setTitle:j,setChartType:j,setDescription:j,setLibraryVersion:j,setVersion:j,setSavedAt:j,setSecureFilters:j}),_=function(t){var o=t.children,i=t.apiConfig,u=t.componentId,s=r.useState({apiConfig:i,results:[],queries:[],component:null,version:null}),p=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=O(i))?void 0:e.getComponent(u);case 2:(r=t.sent)&&(o=d(r),n.isEmpty(null==o?void 0:o.secureFilters),f(l({},p,{queries:[],results:[],component:r,version:o||null})));case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}()()}),[u]);var h=l({},p,{setChartType:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{type:r})}))}(p,f,t)},setDescription:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{description:r})}))}(p,f,t)},setTitle:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{title:r})}))}(p,f,t)},setLibraryVersion:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{libraryVersion:r})}))}(p,f,t)},setProps:function(t){return function(t,e,r){e(l({},t,{results:[],queries:[],version:l({},t.version,{props:l({},r)})}))}(p,f,t)},setStyleProps:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{props:l({},r)})}))}(p,f,t)},setResults:function(t,e){return function(t,e,r,n){e(l({},t,{results:r,queries:n}))}(p,f,t,e)},setVersion:function(t){return function(t,e,r){e(l({},t,{version:r,results:[],queries:[]}))}(p,f,t)},setSavedAt:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{savedAt:r})}))}(p,f,t)},setSecureFilters:function(t){return function(t,e,r){e(l({},t,{version:l({},t.version,{secureFilters:r}),results:[],queries:[]}))}(p,f,t)}});return r.createElement(q.Provider,{value:h},o)},V=function(){return r.useContext(q)},F=function(){return r.useContext(q)},T=function(){return r.useContext(q)},D=function(){return r.useContext(q)},A=function(){return r.useContext(q)},I=function(t,e,r,n,o,i){var u=[];r.xMeasure&&u.push(r.xMeasure),r.yMeasure&&u.push(r.yMeasure);var a=E(u,r.order,r.filter,r.dimension,r.timeDimension,r.limit);P(O(t),S(a)?[a]:[],e,n,o,i)},N=function(t){var e=D(),i=e.apiConfig,u=e.setResults,a=e.component,s=e.results,c=e.queries,l=e.version,p=o.mergeProps(t,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return I(i,null==a?void 0:a.id,p,u,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.ScatterChartView,Object.assign({},p,{result:s[0],query:c[0]}))},R=function(t,e,r,n,o,i){var u=E(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);P(O(t),S(u)?[u]:[],e,n,o,i)},G=function(t){var e=F(),i=e.apiConfig,u=e.results,a=e.component,s=e.queries,c=e.version,l=e.setResults,p=o.mergeProps(t,null==c?void 0:c.props,o.Components.LineChartView.defaultProps);return R(i,null==a?void 0:a.id,p,l,t.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.BarChartView,Object.assign({},p,{result:u[0],query:s[0]}))},M=function(t,e,r,n,o,i){var u=E(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);P(O(t),S(u)?[u]:[],e,n,o,i)},Q=function(t){var e=V(),i=e.apiConfig,u=e.results,a=e.queries,s=e.version,c=e.component,l=e.setResults,p=o.mergeProps(t,null==s?void 0:s.props,o.Components.LineChartView.defaultProps);return M(i,null==c?void 0:c.id,p,l,t.secureFilterCallback),n.isEmpty(u)?null:r.createElement(o.Components.LineChartView,Object.assign({},p,{result:u[0],query:a[0]}))},J=function(t,e,r,n,o,i){var u=E(r.measure,r.order,r.filter,r.dimension,null,r.limit);P(O(t),S(u)?[u]:[],e,n,o,i)},B=function(t){var e=A(),i=e.apiConfig,u=e.component,a=e.setResults,s=e.results,c=e.queries,l=e.version,p=o.mergeProps(t,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return J(i,null==u?void 0:u.id,p,a,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.PieChartView,Object.assign({},p,{result:s[0],query:c[0]}))},z=function(t,e,r,n,o,i){var u=E(r.measure,r.order,r.filter,r.dimension,r.timeDimension,r.limit);P(O(t),S(u)?[u]:[],e,n,o,i)},K=function(t){var e=T(),i=e.apiConfig,u=e.component,a=e.setResults,s=e.results,c=e.queries,l=e.version,p=o.mergeProps(t,null==l?void 0:l.props,o.Components.LineChartView.defaultProps);return z(i,null==u?void 0:u.id,p,a,t.secureFilterCallback),n.isEmpty(s)?null:r.createElement(o.Components.AreaChartView,Object.assign({},p,{result:s[0],query:c[0]}))},U=function(t){if("scatterChart"==t.type)return r.createElement(N,Object.assign({},t.componentProps));if("barChart"==t.type)return r.createElement(G,Object.assign({},t.componentProps));if("areaChart"==t.type)return r.createElement(K,Object.assign({},t.componentProps));if("lineChart"==t.type)return r.createElement(Q,Object.assign({},t.componentProps));if("pieChart"==t.type)return r.createElement(B,Object.assign({},t.componentProps));throw"Unsupported component in generic component."};function W(t,e){return new Date(t.getTime()+6e4*e)}var 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 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)}}()},Z=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,Y(t)({expires:W(new Date,t.ttlInMinutes).toISOString()});case 2:return e.abrupt("return",e.sent);case 3:case"end":return e.stop()}}),e)})))},H=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,Y(t)({filter:r,expires:W(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=K,exports.BarChart=G,exports.ComponentContextProvider=_,exports.LineChart=Q,exports.ScatterChart=N,exports.Studio=function(t){var n=t.organisationId,i=t.studioComponentsTag,u=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=m(r=e.sent,k))&&s(r);case 5:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()()}),[n,o]),u}(O(t.apiConfig),n,i),s=e.useState(null),p=s[0],f=s[1],h=e.useState({}),v=h[0],y=h[1],g=null!=p;return u?r.createElement(o.Components.StudioView,{onSelectComponent:function(t){if(p){var e,n=u[t],o=d(n);y(l({},v,((e={})[p]=function(){return r.createElement(r.Fragment,null,r.createElement(_,{componentId:n.id,apiConfig:{host:"http://0.0.0.0:7080"}},r.createElement(U,{type:null==o?void 0:o.type,componentProps:null==o?void 0:o.props})))},e))),f(null)}},onSelectComponentPlaceholder:f,componentOptions:[].concat(u).map((function(t){var e=d(t);return{title:null==e?void 0:e.title,summary:"a summary",type:null==e?void 0:e.type}})),templateRenderCallbacks:v,showDrawer:g,onCloseDrawer:function(){return f(null)},templateId:"demo"}):r.createElement("p",null,"loading studio components")},exports.auth=function(t){return{accessToken:Z(t),signFilter:H(t)}},exports.createQueryResult=g,exports.httpClient=C,exports.useAreaChart=T,exports.useAreaChartQueryEffect=z,exports.useBarChart=F,exports.useBarChartQueryEffect=R,exports.useComponentContext=function(){return r.useContext(q)},exports.useLineChart=V,exports.useLineChartQueryEffect=M,exports.usePieChart=A,exports.usePieChartQueryEffect=J,exports.useScatterChart=D,exports.useScatterChartQueryEffect=I;
 //# sourceMappingURL=components.cjs.production.min.js.map

dist/components.esm.js

@@ -1,4 +0,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { last, flatMap, isEmpty } from 'lodash-es';
 import { Utils, mergeProps, Components } from '@vizzly/puppet';
-import { last, isEmpty } from 'lodash-es';
 import fetch from 'isomorphic-fetch';
@@ -465,3 +465,11 @@ import { JWS, JWK } from 'node-jose';
 };
+var filterOutUnsupportedComponents = function filterOutUnsupportedComponents(components, supportedVersion) {
+  return flatMap([].concat(components), function (component) {
+    var _latestVersion;
 
+    var supported = ((_latestVersion = latestVersion(component)) == null ? void 0 : _latestVersion.libraryVersion) == supportedVersion;
+    return supported ? [component] : [];
+  });
+};
+
 var getComponent = function getComponent(httpClient) {
@@ -588,2 +596,84 @@ return /*#__PURE__*/function () {
 
+var getStudioComponents = function getStudioComponents(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(organisationId, tag) {
+      var _yield$httpClient, body, status;
+
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return httpClient({
+                path: "/api/organisation/" + organisationId + "/studio-components/" + tag,
+                method: 'get'
+              });
+
+            case 2:
+              _yield$httpClient = _context.sent;
+              body = _yield$httpClient.body;
+              status = _yield$httpClient.status;
+
+              if (!(status == 200)) {
+                _context.next = 7;
+                break;
+              }
+
+              return _context.abrupt("return", body.components.map(fromRawComponent));
+
+            case 7:
+              return _context.abrupt("return", undefined);
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
+var addComponentToDashboard = function addComponentToDashboard(httpClient) {
+  return /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dashboardId, componentId, 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",
+                method: 'post',
+                body: {
+                  component_id: componentId,
+                  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, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+};
+
 var httpClient = function httpClient(config) {
@@ -745,6 +835,52 @@ return /*#__PURE__*/function () {
     getComponent: getComponent(client),
-    createQueryResult: createQueryResult(client)
+    createQueryResult: createQueryResult(client),
+    getStudioComponents: getStudioComponents(client),
+    addComponentToDashboard: addComponentToDashboard(client)
   };
 };
 
+var LIBRARY_VERSION = /*#__PURE__*/require('../package.json').version;
+
+var useStudioComponents = function useStudioComponents(api, organisationId, tag) {
+  var _useState = useState(null),
+      components = _useState[0],
+      setComponents = _useState[1];
+
+  React.useEffect(function () {
+    var doWork = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var fetchedComponents;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.getStudioComponents(organisationId, tag);
+
+              case 2:
+                fetchedComponents = _context.sent;
+                fetchedComponents = filterOutUnsupportedComponents(fetchedComponents, LIBRARY_VERSION); // TODO
+                // Filter out the versions of each component that is not for the current library version.
+                // Filter out any components which have 0 versions.
+
+                if (fetchedComponents) setComponents(fetchedComponents);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function doWork() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    if (!components) doWork();
+  }, [organisationId, tag]);
+  return components;
+};
+
 var setSavedAt = function setSavedAt(state, setState, savedAt) {
@@ -963,2 +1099,5 @@ setState(_extends({}, state, {
 };
+var usePieChart = function usePieChart() {
+  return React.useContext(ComponentContext);
+};
 var useComponentContext = function useComponentContext() {
@@ -968,20 +1107,23 @@ return React.useContext(ComponentContext);
 
-var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
+var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var measures = [];
+  props.xMeasure && measures.push(props.xMeasure);
+  props.yMeasure && measures.push(props.yMeasure);
+  var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
   useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
 };
 
-var LineChart = function LineChart(explicitProps) {
-  var _useLineChart = useLineChart(),
-      apiConfig = _useLineChart.apiConfig,
-      results = _useLineChart.results,
-      queries = _useLineChart.queries,
-      version = _useLineChart.version,
-      component = _useLineChart.component,
-      setResults = _useLineChart.setResults;
+var ScatterChart = function ScatterChart(explicitProps) {
+  var _useScatterChart = useScatterChart(),
+      apiConfig = _useScatterChart.apiConfig,
+      setResults = _useScatterChart.setResults,
+      component = _useScatterChart.component,
+      results = _useScatterChart.results,
+      queries = _useScatterChart.queries,
+      version = _useScatterChart.version;
 
   var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
-  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
   if (isEmpty(results)) return null;
-  return React.createElement(Components.LineChartView, Object.assign({}, componentProps, {
+  return React.createElement(Components.ScatterChartView, Object.assign({}, componentProps, {
     result: results[0],
@@ -1015,2 +1157,48 @@ query: queries[0]
 
+var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+};
+
+var LineChart = function LineChart(explicitProps) {
+  var _useLineChart = useLineChart(),
+      apiConfig = _useLineChart.apiConfig,
+      results = _useLineChart.results,
+      queries = _useLineChart.queries,
+      version = _useLineChart.version,
+      component = _useLineChart.component,
+      setResults = _useLineChart.setResults;
+
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  if (isEmpty(results)) return null;
+  return React.createElement(Components.LineChartView, Object.assign({}, componentProps, {
+    result: results[0],
+    query: queries[0]
+  }));
+};
+
+var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+  var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+};
+
+var PieChart = function PieChart(explicitProps) {
+  var _usePieChart = usePieChart(),
+      apiConfig = _usePieChart.apiConfig,
+      component = _usePieChart.component,
+      setResults = _usePieChart.setResults,
+      results = _usePieChart.results,
+      queries = _usePieChart.queries,
+      version = _usePieChart.version;
+
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  usePieChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  if (isEmpty(results)) return null;
+  return React.createElement(Components.PieChartView, Object.assign({}, componentProps, {
+    result: results[0],
+    query: queries[0]
+  }));
+};
+
 var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
@@ -1039,26 +1227,67 @@ var query = build(props.measure, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
 
-var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var measures = [];
-  props.xMeasure && measures.push(props.xMeasure);
-  props.yMeasure && measures.push(props.yMeasure);
-  var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+var Component = function Component(props) {
+  if (props.type == 'scatterChart') return React.createElement(ScatterChart, Object.assign({}, props.componentProps));
+  if (props.type == 'barChart') return React.createElement(BarChart, Object.assign({}, props.componentProps));
+  if (props.type == 'areaChart') return React.createElement(AreaChart, Object.assign({}, props.componentProps));
+  if (props.type == 'lineChart') return React.createElement(LineChart, Object.assign({}, props.componentProps));
+  if (props.type == 'pieChart') return React.createElement(PieChart, Object.assign({}, props.componentProps));
+  throw 'Unsupported component in generic component.';
 };
 
-var ScatterChart = function ScatterChart(explicitProps) {
-  var _useScatterChart = useScatterChart(),
-      apiConfig = _useScatterChart.apiConfig,
-      setResults = _useScatterChart.setResults,
-      component = _useScatterChart.component,
-      results = _useScatterChart.results,
-      queries = _useScatterChart.queries,
-      version = _useScatterChart.version;
+var Studio = function Studio(props) {
+  var organisationId = props.organisationId,
+      studioComponentsTag = props.studioComponentsTag,
+      apiConfig = props.apiConfig;
+  var vizzlyApi = api(apiConfig);
+  var studioComponents = useStudioComponents(vizzlyApi, organisationId, studioComponentsTag);
 
-  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
-  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
-  if (isEmpty(results)) return null;
-  return React.createElement(Components.ScatterChartView, Object.assign({}, componentProps, {
-    result: results[0],
-    query: queries[0]
-  }));
+  var _useState = useState(null),
+      selectedStudioComponentPlaceholder = _useState[0],
+      setSelectedStudioComponentPlaceholder = _useState[1];
+
+  var _useState2 = useState({}),
+      renderCallbacks = _useState2[0],
+      setRenderCallbacks = _useState2[1];
+
+  var showDrawer = selectedStudioComponentPlaceholder != null;
+  if (!studioComponents) return React.createElement("p", null, "loading studio components");
+  return React.createElement(Components.StudioView, {
+    onSelectComponent: function onSelectComponent(componentIndex) {
+      if (selectedStudioComponentPlaceholder) {
+        var _extends2;
+
+        var component = studioComponents[componentIndex];
+        var latestVersion$1 = latestVersion(component); // const addedToDashboard = vizzlyApi?.addComponentToDashboard(props.dashboardId, component.id, selectedStudioComponentPlaceholder);
+        // if(addedToDashboard) {
+
+        setRenderCallbacks(_extends({}, renderCallbacks, (_extends2 = {}, _extends2[selectedStudioComponentPlaceholder] = function () {
+          return React.createElement(React.Fragment, null, React.createElement(ComponentContextProvider, {
+            componentId: component.id,
+            apiConfig: {
+              host: 'http://0.0.0.0:7080'
+            }
+          }, React.createElement(Component, {
+            type: latestVersion$1 == null ? void 0 : latestVersion$1.type,
+            componentProps: latestVersion$1 == null ? void 0 : latestVersion$1.props
+          })));
+        }, _extends2)));
+        setSelectedStudioComponentPlaceholder(null); // };
+      }
+    },
+    onSelectComponentPlaceholder: setSelectedStudioComponentPlaceholder,
+    componentOptions: [].concat(studioComponents).map(function (studioComponent) {
+      var latestVersion$1 = latestVersion(studioComponent);
+      return {
+        title: latestVersion$1 == null ? void 0 : latestVersion$1.title,
+        summary: 'a summary',
+        type: latestVersion$1 == null ? void 0 : latestVersion$1.type
+      };
+    }),
+    templateRenderCallbacks: renderCallbacks,
+    showDrawer: showDrawer,
+    onCloseDrawer: function onCloseDrawer() {
+      return setSelectedStudioComponentPlaceholder(null);
+    },
+    templateId: "demo"
+  });
 };
@@ -1170,8 +1399,3 @@
 
-var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
-  var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
-};
-
-export { AreaChart, BarChart, ComponentContextProvider, LineChart, ScatterChart, auth, createQueryResult, httpClient, useAreaChart, useAreaChartQueryEffect, useBarChart, useBarChartQueryEffect, useComponentContext, useLineChart, useLineChartQueryEffect, usePieChartQueryEffect, useScatterChart, useScatterChartQueryEffect };
+export { AreaChart, BarChart, ComponentContextProvider, LineChart, ScatterChart, Studio, auth, createQueryResult, httpClient, useAreaChart, useAreaChartQueryEffect, useBarChart, useBarChartQueryEffect, useComponentContext, useLineChart, useLineChartQueryEffect, usePieChart, usePieChartQueryEffect, useScatterChart, useScatterChartQueryEffect };
 //# sourceMappingURL=components.esm.js.map

dist/components/context/useComponentContext.d.ts

@@ -7,2 +7,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 export declare const useScatterChart: () => ComponentContextType<VizzlyPuppet.Component.ScatterChart.Props>;
+export declare const usePieChart: () => ComponentContextType<VizzlyPuppet.Component.PieChart.Props>;
 export declare const useComponentContext: () => ComponentContextType<VizzlyPuppet.Component.Props>;

dist/components/index.d.ts

@@ -0,1 +1,2 @@
+export * from './Studio';
 export * from './LineChart';
@@ -2,0 +3,0 @@ export * from './BarChart';

dist/models/Component.d.ts

@@ -34,2 +34,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 export declare const latestVersion: (component: VizzlyComponents.Component) => VizzlyComponents.Version<VizzlyPuppet.Component.Props> | undefined;
+export declare const filterOutUnsupportedComponents: (components: VizzlyComponents.Component[], supportedVersion: string) => VizzlyComponents.Component[];
 export {};

dist/types.d.ts

@@ -33,2 +33,14 @@ import { VizzlyPuppet } from '@vizzly/puppet';
     type SecureFilterCallback = () => Promise<VizzlyPuppet.Query.SecureFilter[]> | Promise<null>;
+    type Dashboard = {
+        id: string;
+        title: string;
+        templateId: string;
+        organisation: {
+            id: string;
+            title: string;
+        };
+        components: {
+            [position: string]: Component;
+        };
+    };
 }

package.json

 {
   "name": "@vizzly/components",
   "author": "James Bowers",
-  "version": "0.0.93",
+  "version": "0.0.94",
   "license": "MIT",
@@ -78,3 +78,3 @@ "main": "dist/index.js",
     "@types/node-jose": "^1.1.10",
-    "@vizzly/puppet": "0.0.50",
+    "@vizzly/puppet": "0.0.51",
     "isomorphic-fetch": "^3.0.0",
@@ -81,0 +81,0 @@ "lodash": "^4.17.21",

src/api/index.ts

 import { VizzlyComponents } from '../types';
 import { getComponent } from './getComponent';
 import { createQueryResult } from './createQueryResult';
+import { getStudioComponents } from './getStudioComponents';
+import { addComponentToDashboard } from './addComponentToDashboard';
 import { httpClient } from './httpClient';
@@ -16,3 +18,5 @@ export * from './useQueryEffect';
     createQueryResult: createQueryResult(client),
+    getStudioComponents: getStudioComponents(client),
+    addComponentToDashboard: addComponentToDashboard(client),
   };
 };

src/components/context/useComponentContext.ts

@@ -26,2 +26,7 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 
+export const usePieChart = () =>
+  React.useContext<ComponentContextType<VizzlyPuppet.Component.PieChart.Props>>(
+    ComponentContext
+  );
+
 export const useComponentContext = () =>
@@ -28,0 +33,0 @@ React.useContext<ComponentContextType<VizzlyPuppet.Component.Props>>(

src/components/index.ts

@@ -0,1 +1,2 @@
+export * from './Studio';
 export * from './LineChart';
@@ -2,0 +3,0 @@ export * from './BarChart';

src/models/Component.ts

 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
 import { RawDataSet, fromRawDataSet } from './DataSet';
-import { last } from 'lodash';
+import { flatMap, last } from 'lodash';
 
@@ -66,1 +66,13 @@ type RawOrganisation = {
 };
+
+export const filterOutUnsupportedComponents = (
+  components: VizzlyComponents.Component[],
+  supportedVersion: string
+) => {
+  return flatMap([...components], (component) => {
+    const supported =
+      latestVersion(component)?.libraryVersion == supportedVersion;
+
+    return supported ? [component] : [];
+  });
+};

src/types.ts

@@ -39,2 +39,10 @@ import { VizzlyPuppet } from '@vizzly/puppet';
     | Promise<null>;
+
+  export type Dashboard = {
+    id: string;
+    title: string;
+    templateId: string;
+    organisation: { id: string; title: string };
+    components: { [position: string]: Component };
+  };
 }

No alert changes

Improved metrics

Total package byte prevSize

365488

increased by25.55%

Number of package files

88

increased by29.41%

Lines of code

4179

increased by22.44%

Dependency changes

• Updated@vizzly/puppet@0.0.51