@vizzly/components - npm Package Compare versions

Comparing version 0.0.56 to 0.0.57

dist/api/index.d.ts

 import { VizzlyComponents } from '../types';
-export declare const api: (config: VizzlyComponents.ApiConfig) => {
+export * from './useQueryEffect';
+export declare const api: (config: VizzlyComponents.ApiConfig | null) => {
     config: VizzlyComponents.ApiConfig;
@@ -9,2 +10,2 @@ getComponent: (componentId: string) => Promise<VizzlyComponents.Component | undefined>;
     createQueryResult: (componentId: string, queries: import("@vizzly/puppet").VizzlyPuppet.Query[], abortSignal: AbortSignal) => Promise<import("@vizzly/puppet").VizzlyPuppet.Result[] | undefined>;
-};
+} | null;

dist/components.cjs.development.js

@@ -471,14 +471,2 @@ 'use strict';
 
-var initial = function initial(type) {
-  return {
-    type: type,
-    title: '',
-    description: '',
-    secureFilters: [],
-    savedAt: null,
-    libraryVersion: '0.0.51',
-    props: {}
-  };
-};
-
 var getComponent = function getComponent(httpClient) {
@@ -690,3 +678,45 @@ return /*#__PURE__*/function () {
 
+var useQueryEffect = function useQueryEffect(api, queries, component, onResultsCallback) {
+  console.log('usequeryeffect', queries); // TODO re-introduce fetching secure filters using auth config...
+
+  React.useEffect(function () {
+    var abortController = new AbortController();
+
+    var fetch = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var results;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.createQueryResult(component == null ? void 0 : component.id, queries, abortController.signal);
+
+              case 2:
+                results = _context.sent;
+                console.log('fetched query result', component, queries, results);
+                results && onResultsCallback(results, queries);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetch() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    component && !lodash.isEmpty(queries) && fetch();
+    return function () {
+      abortController.abort();
+    };
+  }, [JSON.stringify(component), JSON.stringify(queries)]);
+};
+
 var api = function api(config) {
+  if (!config) return null;
   var client = httpClient(config);
@@ -733,2 +763,4 @@ return {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _api;
+
         var component, version;
@@ -740,3 +772,3 @@ return _regeneratorRuntime().wrap(function _callee$(_context) {
                 _context.next = 2;
-                return api(apiConfig).getComponent(componentId);
+                return (_api = api(apiConfig)) == null ? void 0 : _api.getComponent(componentId);
 
@@ -748,7 +780,2 @@ case 2:
                   version = latestVersion(component);
-
-                  if (!version) {
-                    version = initial(props.initialComponentType || 'lineChart');
-                  }
-
                   setState(_extends({}, state, {
@@ -820,13 +847,34 @@ queries: [],
 
+var build = function build(measure, order, filter, dimension, timeDimension) {
+  var query = {
+    measure: measure,
+    order: order,
+    filter: filter,
+    dimension: dimension,
+    timeDimension: timeDimension
+  };
+  if (!isRunnable(query)) return null;
+  return query;
+};
+var isRunnable = function isRunnable(query) {
+  if (query === null) return false;
+  if (lodash.isEmpty(query.measure)) return false;
+  return true;
+};
+
 var LineChart = function LineChart(explicitProps) {
   var _useLineChart = useLineChart(),
+      apiConfig = _useLineChart.apiConfig,
       results = _useLineChart.results,
-      queries = _useLineChart.queries,
-      version = _useLineChart.version;
+      version = _useLineChart.version,
+      component = _useLineChart.component,
+      setResults = _useLineChart.setResults;
 
-  if (!version) return null;
-  var componentProps = puppet.mergeProps(explicitProps, version.props, puppet.Components.LineChartView.defaultProps);
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (lodash.isEmpty(results)) return null;
   return React__default.createElement(puppet.Components.LineChartView, Object.assign({}, componentProps, {
     result: results[0],
-    query: queries[0]
+    query: query
   }));
@@ -837,8 +885,13 @@ };
   var _useBarChart = useBarChart(),
+      apiConfig = _useBarChart.apiConfig,
       results = _useBarChart.results,
+      component = _useBarChart.component,
       queries = _useBarChart.queries,
-      version = _useBarChart.version;
+      version = _useBarChart.version,
+      setResults = _useBarChart.setResults;
 
-  if (!version) return null;
-  var componentProps = puppet.mergeProps(explicitProps, version.props, puppet.Components.BarChartView.defaultProps);
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (lodash.isEmpty(results)) return null;
   return React__default.createElement(puppet.Components.BarChartView, Object.assign({}, componentProps, {
@@ -852,2 +905,5 @@ result: results[0],
   var _useAreaChart = useAreaChart(),
+      apiConfig = _useAreaChart.apiConfig,
+      component = _useAreaChart.component,
+      setResults = _useAreaChart.setResults,
       results = _useAreaChart.results,
@@ -857,4 +913,6 @@ queries = _useAreaChart.queries,
 
-  if (!version) return null;
-  var componentProps = puppet.mergeProps(explicitProps, version.props, puppet.Components.AreaChartView.defaultProps);
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (lodash.isEmpty(results)) return null;
   return React__default.createElement(puppet.Components.AreaChartView, Object.assign({}, componentProps, {
@@ -868,2 +926,5 @@ result: results[0],
   var _useScatterChart = useScatterChart(),
+      apiConfig = _useScatterChart.apiConfig,
+      setResults = _useScatterChart.setResults,
+      component = _useScatterChart.component,
       results = _useScatterChart.results,
@@ -873,4 +934,9 @@ queries = _useScatterChart.queries,
 
-  if (!version) return null;
-  var componentProps = puppet.mergeProps(explicitProps, version.props, puppet.Components.ScatterChartView.defaultProps);
+  var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
+  var measures = [];
+  componentProps.xMeasure && measures.push(componentProps.xMeasure);
+  componentProps.yMeasure && measures.push(componentProps.yMeasure);
+  var query = build(measures, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (lodash.isEmpty(results)) return null;
   return React__default.createElement(puppet.Components.ScatterChartView, Object.assign({}, componentProps, {
@@ -887,2 +953,3 @@ result: results[0],
 exports.ScatterChart = ScatterChart;
+exports.createQueryResult = createQueryResult;
 exports.useAreaChart = useAreaChart;
@@ -889,0 +956,0 @@ exports.useBarChart = useBarChart;

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"));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 l?e:l).prototype),i=new E(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 a=r.delegate;if(a){var u=b(a,r);if(u){if(u===p)continue;return u}}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=f(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 f(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 l(){}function h(){}function d(){}var v={};s(v,o,(function(){return this}));var y=Object.getPrototypeOf,m=y&&y(y(_([])));m&&m!==e&&r.call(m,o)&&(v=m);var g=d.prototype=l.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function x(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,u){var s=f(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,a,u)}),(function(t){n("throw",t,a,u)})):e.resolve(p).then((function(t){c.value=t,a(c)}),(function(t){return n("throw",t,a,u)}))}u(s.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}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=f(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 L(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function E(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(C,this),this.reset(!0)}function _(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:j}}function j(){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}},w(x.prototype),s(x.prototype,i,(function(){return this})),t.AsyncIterator=x,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new x(c(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},w(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=_,E.prototype={constructor:E,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(L),!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 a.type="throw",a.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],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var u=r.call(i,"catchLoc"),s=r.call(i,"finallyLoc");if(u&&s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(u){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 a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,p):this.complete(a)},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),L(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;L(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:_(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),p}},t}function u(t,e,r,n,o,i,a){try{var u=t[i](a),s=u.value}catch(t){return void r(t)}u.done?e(s):Promise.resolve(s).then(n,o)}function s(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function a(t){u(i,n,o,a,s,"next",t)}function s(t){u(i,n,o,a,s,"throw",t)}a(void 0)}))}}function c(){return(c=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)}},l=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}})),savedAt:t.inserted_at}}));return{id:t.id,dataSets:t.data_sets.map(p),versions:e}},h=function(t){return o.last(t.versions)},d=function(t){return function(){var e=s(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:r,method:"get",headers:c({},n)});case 2:if(i=(o=e.sent).body,200!=o.status){e.next=7;break}return e.abrupt("return",i);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)}}()},v=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=s(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 m(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(v));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)}}()},m=function(t,e){return c({},t,{componentId:e})},g=function(t){var e,r=function(t){return function(){var e=s(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:c({"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)}}()}(t);return{config:t,getComponent:(e=r,function(){var t=s(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",l(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)}}()),getComponentAuth:d(r),createQueryResult:y(r)}},w=function(){throw"Function not initialised."},x=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setVersion:w,setResults:w,setProps:w}),b=function(){return r.useContext(x)},C=function(){return r.useContext(x)},L=function(){return r.useContext(x)},E=function(){return r.useContext(x)};exports.AreaChart=function(t){var e=L(),o=e.results,i=e.queries,a=e.version;if(!a)return null;var u=n.mergeProps(t,a.props,n.Components.AreaChartView.defaultProps);return r.createElement(n.Components.AreaChartView,Object.assign({},u,{result:o[0],query:i[0]}))},exports.BarChart=function(t){var e=C(),o=e.results,i=e.queries,a=e.version;if(!a)return null;var u=n.mergeProps(t,a.props,n.Components.BarChartView.defaultProps);return r.createElement(n.Components.BarChartView,Object.assign({},u,{result:o[0],query:i[0]}))},exports.ComponentContextProvider=function(t){var n=t.children,o=t.apiConfig,i=t.componentId,u=r.useState({apiConfig:o,results:[],queries:[],component:null,version:null}),f=u[0],p=u[1];e.useEffect((function(){!function(){var e=s(a().mark((function e(){var r,n;return a().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,g(o).getComponent(i);case 2:(r=e.sent)&&((n=h(r))||(n={type:t.initialComponentType||"lineChart",title:"",description:"",secureFilters:[],savedAt:null,libraryVersion:"0.0.51",props:{}}),p(c({},f,{queries:[],results:[],component:r,version:n})));case 4:case"end":return e.stop()}}),e)})));return function(){return e.apply(this,arguments)}}()()}),[i]);var l=function(t){p(c({},f,{version:t}))},d=c({},f,{setVersion:l,setProps:function(t){l(c({},f.version,{props:t}))},setResults:function(t,e){return p(c({},f,{results:t,queries:e}))}});return r.createElement(x.Provider,{value:d},n)},exports.LineChart=function(t){var e=b(),o=e.results,i=e.queries,a=e.version;if(!a)return null;var u=n.mergeProps(t,a.props,n.Components.LineChartView.defaultProps);return r.createElement(n.Components.LineChartView,Object.assign({},u,{result:o[0],query:i[0]}))},exports.ScatterChart=function(t){var e=E(),o=e.results,i=e.queries,a=e.version;if(!a)return null;var u=n.mergeProps(t,a.props,n.Components.ScatterChartView.defaultProps);return r.createElement(n.Components.ScatterChartView,Object.assign({},u,{result:o[0],query:i[0]}))},exports.useAreaChart=L,exports.useBarChart=C,exports.useComponentContext=function(){return r.useContext(x)},exports.useLineChart=b,exports.useScatterChart=E;
+"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"));function u(){u=function(){return t};var t={},e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=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 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 a=b(u,r);if(a){if(a===f)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===f)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 f={};function p(){}function h(){}function d(){}var v={};s(v,o,(function(){return this}));var y=Object.getPrototypeOf,m=y&&y(y(O([])));m&&m!==e&&r.call(m,o)&&(v=m);var g=d.prototype=p.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){s(t,e,(function(t){return this._invoke(e,t)}))}))}function x(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,f=c.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,u,a)}),(function(t){n("throw",t,u,a)})):e.resolve(f).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 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 O(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:_}}function _(){return{value:void 0,done:!0}}return h.prototype=d,s(g,"constructor",d),s(d,"constructor",h),h.displayName=s(d,a,"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,a,"GeneratorFunction")),t.prototype=Object.create(g),t},t.awrap=function(t){return{__await:t}},w(x.prototype),s(x.prototype,i,(function(){return this})),t.AsyncIterator=x,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var u=new x(c(e,r,n,o),i);return t.isGeneratorFunction(r)?u:u.next().then((function(t){return t.done?t.value:u.next()}))},w(g),s(g,a,"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=O,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 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,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:O(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 a=t[i](u),s=a.value}catch(t){return void r(t)}a.done?e(s):Promise.resolve(s).then(n,o)}function s(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 c(){return(c=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{fields:[].concat(t.fields).map(l)}},p=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}})),savedAt:t.inserted_at}}));return{id:t.id,dataSets:t.data_sets.map(f),versions:e}},h=function(t){return o.last(t.versions)},d=function(t){return function(){var e=s(u().mark((function e(r,n){var o,i;return u().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,t({path:r,method:"get",headers:c({},n)});case 2:if(i=(o=e.sent).body,200!=o.status){e.next=7;break}return e.abrupt("return",i);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)}}()},v=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=s(u().mark((function e(r,n,o){var i,a;return u().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 m(t,r)}))},abortSignal:o});case 2:if(a=(i=e.sent).body,200!=i.status){e.next=7;break}return e.abrupt("return",a.results.map(v));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)}}()},m=function(t,e){return c({},t,{componentId:e})},g=function(t,r,n,i){console.log("usequeryeffect",r),e.useEffect((function(){var e=new AbortController,a=function(){var o=s(u().mark((function o(){var a;return u().wrap((function(o){for(;;)switch(o.prev=o.next){case 0:return o.next=2,t.createQueryResult(null==n?void 0:n.id,r,e.signal);case 2:a=o.sent,console.log("fetched query result",n,r,a),a&&i(a,r);case 5: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)])},w=function(t){if(!t)return null;var e,r=function(t){return function(){var e=s(u().mark((function e(r){var n,o,a;return u().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:c({"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 a=e.sent,e.next=7,a.json();case 7:return e.abrupt("return",{body:e.sent,status:a.status});case 9:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()}(t);return{config:t,getComponent:(e=r,function(){var t=s(u().mark((function t(r){var n,o;return u().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",p(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)}}()),getComponentAuth:d(r),createQueryResult:y(r)}},x=function(){throw"Function not initialised."},b=r.createContext({component:null,version:null,apiConfig:null,results:[],queries:[],setVersion:x,setResults:x,setProps:x}),C=function(){return r.useContext(b)},E=function(){return r.useContext(b)},L=function(){return r.useContext(b)},O=function(){return r.useContext(b)},_=function(t,e,r,n,o){var i={measure:t,order:e,filter:r,dimension:n,timeDimension:o};return j(i)?i:null},j=function(t){return null!==t&&!o.isEmpty(t.measure)};exports.AreaChart=function(t){var e=L(),i=e.apiConfig,u=e.component,a=e.setResults,s=e.results,c=e.queries,l=e.version,f=n.mergeProps(t,null==l?void 0:l.props,n.Components.LineChartView.defaultProps),p=_(f.measure,f.order,f.filter,f.dimension,f.timeDimension);return g(w(i),j(p)?[p]:[],u,a),o.isEmpty(s)?null:r.createElement(n.Components.AreaChartView,Object.assign({},f,{result:s[0],query:c[0]}))},exports.BarChart=function(t){var e=E(),i=e.apiConfig,u=e.results,a=e.component,s=e.queries,c=e.version,l=e.setResults,f=n.mergeProps(t,null==c?void 0:c.props,n.Components.LineChartView.defaultProps),p=_(f.measure,f.order,f.filter,f.dimension,f.timeDimension);return g(w(i),j(p)?[p]:[],a,l),o.isEmpty(u)?null:r.createElement(n.Components.BarChartView,Object.assign({},f,{result:u[0],query:s[0]}))},exports.ComponentContextProvider=function(t){var n=t.children,o=t.apiConfig,i=t.componentId,a=r.useState({apiConfig:o,results:[],queries:[],component:null,version:null}),l=a[0],f=a[1];e.useEffect((function(){!function(){var t=s(u().mark((function t(){var e,r,n;return u().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,null==(e=w(o))?void 0:e.getComponent(i);case 2:(r=t.sent)&&(n=h(r),f(c({},l,{queries:[],results:[],component:r,version:n})));case 4:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}()()}),[i]);var p=function(t){f(c({},l,{version:t}))},d=c({},l,{setVersion:p,setProps:function(t){p(c({},l.version,{props:t}))},setResults:function(t,e){return f(c({},l,{results:t,queries:e}))}});return r.createElement(b.Provider,{value:d},n)},exports.LineChart=function(t){var e=C(),i=e.apiConfig,u=e.results,a=e.version,s=e.component,c=e.setResults,l=n.mergeProps(t,null==a?void 0:a.props,n.Components.LineChartView.defaultProps),f=_(l.measure,l.order,l.filter,l.dimension,l.timeDimension);return g(w(i),j(f)?[f]:[],s,c),o.isEmpty(u)?null:r.createElement(n.Components.LineChartView,Object.assign({},l,{result:u[0],query:f}))},exports.ScatterChart=function(t){var e=O(),i=e.apiConfig,u=e.setResults,a=e.component,s=e.results,c=e.queries,l=e.version,f=n.mergeProps(t,null==l?void 0:l.props,n.Components.LineChartView.defaultProps),p=[];f.xMeasure&&p.push(f.xMeasure),f.yMeasure&&p.push(f.yMeasure);var h=_(p,f.order,f.filter,f.dimension,f.timeDimension);return g(w(i),j(h)?[h]:[],a,u),o.isEmpty(s)?null:r.createElement(n.Components.ScatterChartView,Object.assign({},f,{result:s[0],query:c[0]}))},exports.createQueryResult=y,exports.useAreaChart=L,exports.useBarChart=E,exports.useComponentContext=function(){return r.useContext(b)},exports.useLineChart=C,exports.useScatterChart=O;
 //# sourceMappingURL=components.cjs.production.min.js.map

dist/components.esm.js

 import React, { useEffect } from 'react';
 import { mergeProps, Components } from '@vizzly/puppet';
-import { last } from 'lodash-es';
+import { last, isEmpty } from 'lodash-es';
 import fetch from 'isomorphic-fetch';
@@ -464,14 +464,2 @@
 
-var initial = function initial(type) {
-  return {
-    type: type,
-    title: '',
-    description: '',
-    secureFilters: [],
-    savedAt: null,
-    libraryVersion: '0.0.51',
-    props: {}
-  };
-};
-
 var getComponent = function getComponent(httpClient) {
@@ -683,3 +671,45 @@ return /*#__PURE__*/function () {
 
+var useQueryEffect = function useQueryEffect(api, queries, component, onResultsCallback) {
+  console.log('usequeryeffect', queries); // TODO re-introduce fetching secure filters using auth config...
+
+  useEffect(function () {
+    var abortController = new AbortController();
+
+    var fetch = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var results;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return api.createQueryResult(component == null ? void 0 : component.id, queries, abortController.signal);
+
+              case 2:
+                results = _context.sent;
+                console.log('fetched query result', component, queries, results);
+                results && onResultsCallback(results, queries);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetch() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    component && !isEmpty(queries) && fetch();
+    return function () {
+      abortController.abort();
+    };
+  }, [JSON.stringify(component), JSON.stringify(queries)]);
+};
+
 var api = function api(config) {
+  if (!config) return null;
   var client = httpClient(config);
@@ -726,2 +756,4 @@ return {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _api;
+
         var component, version;
@@ -733,3 +765,3 @@ return _regeneratorRuntime().wrap(function _callee$(_context) {
                 _context.next = 2;
-                return api(apiConfig).getComponent(componentId);
+                return (_api = api(apiConfig)) == null ? void 0 : _api.getComponent(componentId);
 
@@ -741,7 +773,2 @@ case 2:
                   version = latestVersion(component);
-
-                  if (!version) {
-                    version = initial(props.initialComponentType || 'lineChart');
-                  }
-
                   setState(_extends({}, state, {
@@ -813,13 +840,34 @@ queries: [],
 
+var build = function build(measure, order, filter, dimension, timeDimension) {
+  var query = {
+    measure: measure,
+    order: order,
+    filter: filter,
+    dimension: dimension,
+    timeDimension: timeDimension
+  };
+  if (!isRunnable(query)) return null;
+  return query;
+};
+var isRunnable = function isRunnable(query) {
+  if (query === null) return false;
+  if (isEmpty(query.measure)) return false;
+  return true;
+};
+
 var LineChart = function LineChart(explicitProps) {
   var _useLineChart = useLineChart(),
+      apiConfig = _useLineChart.apiConfig,
       results = _useLineChart.results,
-      queries = _useLineChart.queries,
-      version = _useLineChart.version;
+      version = _useLineChart.version,
+      component = _useLineChart.component,
+      setResults = _useLineChart.setResults;
 
-  if (!version) return null;
-  var componentProps = mergeProps(explicitProps, version.props, Components.LineChartView.defaultProps);
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (isEmpty(results)) return null;
   return React.createElement(Components.LineChartView, Object.assign({}, componentProps, {
     result: results[0],
-    query: queries[0]
+    query: query
   }));
@@ -830,8 +878,13 @@ };
   var _useBarChart = useBarChart(),
+      apiConfig = _useBarChart.apiConfig,
       results = _useBarChart.results,
+      component = _useBarChart.component,
       queries = _useBarChart.queries,
-      version = _useBarChart.version;
+      version = _useBarChart.version,
+      setResults = _useBarChart.setResults;
 
-  if (!version) return null;
-  var componentProps = mergeProps(explicitProps, version.props, Components.BarChartView.defaultProps);
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (isEmpty(results)) return null;
   return React.createElement(Components.BarChartView, Object.assign({}, componentProps, {
@@ -845,2 +898,5 @@ result: results[0],
   var _useAreaChart = useAreaChart(),
+      apiConfig = _useAreaChart.apiConfig,
+      component = _useAreaChart.component,
+      setResults = _useAreaChart.setResults,
       results = _useAreaChart.results,
@@ -850,4 +906,6 @@ queries = _useAreaChart.queries,
 
-  if (!version) return null;
-  var componentProps = mergeProps(explicitProps, version.props, Components.AreaChartView.defaultProps);
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  var query = build(componentProps.measure, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (isEmpty(results)) return null;
   return React.createElement(Components.AreaChartView, Object.assign({}, componentProps, {
@@ -861,2 +919,5 @@ result: results[0],
   var _useScatterChart = useScatterChart(),
+      apiConfig = _useScatterChart.apiConfig,
+      setResults = _useScatterChart.setResults,
+      component = _useScatterChart.component,
       results = _useScatterChart.results,
@@ -866,4 +927,9 @@ queries = _useScatterChart.queries,
 
-  if (!version) return null;
-  var componentProps = mergeProps(explicitProps, version.props, Components.ScatterChartView.defaultProps);
+  var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
+  var measures = [];
+  componentProps.xMeasure && measures.push(componentProps.xMeasure);
+  componentProps.yMeasure && measures.push(componentProps.yMeasure);
+  var query = build(measures, componentProps.order, componentProps.filter, componentProps.dimension, componentProps.timeDimension);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], component, setResults);
+  if (isEmpty(results)) return null;
   return React.createElement(Components.ScatterChartView, Object.assign({}, componentProps, {
@@ -875,3 +941,3 @@ result: results[0],
 
-export { AreaChart, BarChart, ComponentContextProvider, LineChart, ScatterChart, useAreaChart, useBarChart, useComponentContext, useLineChart, useScatterChart };
+export { AreaChart, BarChart, ComponentContextProvider, LineChart, ScatterChart, createQueryResult, useAreaChart, useBarChart, useComponentContext, useLineChart, useScatterChart };
 //# sourceMappingURL=components.esm.js.map

dist/index.d.ts

 export * from './components';
 export * from './types';
+export { createQueryResult } from "./api/createQueryResult";

package.json

 {
   "name": "@vizzly/components",
   "author": "James Bowers",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

src/api/index.ts

@@ -6,4 +6,7 @@ import { VizzlyComponents } from '../types';
 import { httpClient } from './httpClient';
+export * from './useQueryEffect';
 
-export const api = (config: VizzlyComponents.ApiConfig) => {
+export const api = (config: VizzlyComponents.ApiConfig | null) => {
+  if (!config) return null;
+
   const client = httpClient(config);
@@ -10,0 +13,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

201810

increased by17.87%

Number of package files

54

increased by8%

Lines of code

2464

increased by11.19%

Worsened metrics

Number of medium supply chain risk alerts

7

increased by40%

No dependency changes