@vizzly/components - npm Package Compare versions

Comparing version 0.0.102 to 0.0.103

dist/api/useAreaChartQueryEffect.d.ts

@@ -0,4 +1,5 @@
+import { FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
-export declare const useAreaChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.AreaChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare const useAreaChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.AreaChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/api/useBarChartQueryEffect.d.ts

@@ -0,4 +1,5 @@
+import { FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
-export declare const useBarChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.AreaChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare const useBarChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.BarChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/api/useLineChartQueryEffect.d.ts

@@ -0,4 +1,5 @@
+import { FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
-export declare const useLineChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.LineChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare const useLineChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.LineChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/api/usePieChartQueryEffect.d.ts

@@ -0,4 +1,5 @@
+import { FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
-export declare const usePieChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.PieChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare const usePieChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.PieChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/api/useQueryEffect.d.ts

 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
 import * as Query from '../models/Query';
-export declare const useQueryEffect: (api: any, queries: VizzlyPuppet.Query[], componentId: string | undefined, onResultsCallback: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare type FilterConfig = {
+    secureFilterCallback?: VizzlyComponents.SecureFilterCallback;
+    secureFilterExamples?: VizzlyComponents.SecureFilter[];
+    localFilters?: {
+        [key: number]: VizzlyPuppet.Query.Filter;
+    };
+};
+export declare const useQueryEffect: (api: any, queries: VizzlyPuppet.Query[], componentId: string | undefined, onResultsCallback: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/api/useScatterChartQueryEffect.d.ts

@@ -0,4 +1,5 @@
+import { FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
-export declare const useScatterChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.ScatterChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, secureFilterCallback?: VizzlyComponents.SecureFilterCallback | undefined, secureFilterExamples?: VizzlyComponents.SecureFilter[] | undefined) => void;
+export declare const useScatterChartQueryEffect: (apiConfig: VizzlyComponents.ApiConfig | null, componentId: string | undefined, props: VizzlyPuppet.Component.ScatterChart.Props, setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void, filterConfig: FilterConfig) => void;

dist/components.cjs.development.js

@@ -776,2 +776,9 @@ 'use strict';
 
+var addAndFilters = function addAndFilters(filter, filterToAddToAll) {
+  if (!filter || lodash.isEmpty(filter)) filter = [[]];
+  return [].concat(filter).map(function (andFilter) {
+    return [].concat(andFilter, filterToAddToAll);
+  });
+};
+
 var build = function build(measure, order, filter, dimension, timeDimension, limit, secureFilter) {
@@ -795,17 +802,17 @@ var query = {
 };
-var addExampleSecureFilter = function addExampleSecureFilter(query, secureFilters) {
+var addFilters = function addFilters(query, filters) {
   if (lodash.isEmpty(query.filter)) query.filter = [[]];
-  var newFilter = [].concat(query.filter).map(function (andFilter) {
-    return [].concat(andFilter, secureFilters.map(function (secureFilter) {
-      return {
-        field: secureFilter.field,
-        op: secureFilter.op,
-        value: secureFilter.exampleValue
-      };
-    }));
-  });
   return _extends({}, query, {
-    filter: newFilter
+    filter: addAndFilters(query.filter, filters)
   });
 };
+var addExampleSecureFilter = function addExampleSecureFilter(query, secureFilters) {
+  return addFilters(query, secureFilters.map(function (secureFilter) {
+    return {
+      field: secureFilter.field,
+      op: secureFilter.op,
+      value: secureFilter.exampleValue
+    };
+  }));
+};
 var setSecureFilter = function setSecureFilter(query, secureFilter) {
@@ -817,7 +824,22 @@ return _extends({}, query, {
 
-var useQueryEffect = function useQueryEffect(api, queries, componentId, onResultsCallback, secureFilterCallback, secureFilterExamples) {
-  // TODO re-introduce fetching secure filters using auth config...
+var MAIN_QUERY_INDEX = 0;
+/*
+Queries:
+  The query at position 0 is the main query that fetches results for the
+  line/bar/scatter/.... chart. The queries from index 1 and onwards are for
+  the add-ons, which are in the same order as the add-ons were supplied in.
+*/
+
+var useQueryEffect = function useQueryEffect(api, queries, componentId, onResultsCallback, filterConfig) {
+  var secureFilterExamples = filterConfig.secureFilterExamples,
+      secureFilterCallback = filterConfig.secureFilterCallback,
+      localFilters = filterConfig.localFilters;
   queries = queries.map(function (query) {
     return addExampleSecureFilter(query, secureFilterExamples || []);
-  });
+  }); // add local filters to the main query.
+
+  if (queries[0]) {
+    queries[MAIN_QUERY_INDEX].filter = addAndFilters(queries[0].filter, Object.values(localFilters || {}));
+  }
+
   React.useEffect(function () {
@@ -1043,2 +1065,8 @@ var abortController = new AbortController();
 };
+var setQueries = function setQueries(state, setState, queries) {
+  setState(_extends({}, state, {
+    results: [],
+    queries: [].concat(queries)
+  }));
+};
 var setVersion = function setVersion(state, setState, version) {
@@ -1060,2 +1088,9 @@ setState(_extends({}, state, {
 };
+var setLocalFilters = function setLocalFilters(state, setState, filters) {
+  setState(_extends({}, state, {
+    results: [],
+    queries: [],
+    localFilters: filters
+  }));
+};
 
@@ -1072,3 +1107,6 @@ var noOp = function noOp() {
   queries: [],
+  localFilters: [],
+  setLocalFilters: noOp,
   setResults: noOp,
+  setQueries: noOp,
   setProps: noOp,
@@ -1093,2 +1131,3 @@ setStyleProps: noOp,
     queries: [],
+    localFilters: [],
     component: null,
@@ -1167,2 +1206,5 @@ version: null
     },
+    setQueries: function setQueries$1(queries) {
+      return setQueries(state, setState, queries);
+    },
     setVersion: function setVersion$1(version) {
@@ -1176,2 +1218,5 @@ return setVersion(state, setState, version);
       return setSecureFilters(state, setState, secureFilters);
+    },
+    setLocalFilters: function setLocalFilters$1(localFilters) {
+      return setLocalFilters(state, setState, localFilters);
     }
@@ -1204,3 +1249,31 @@ });
 
-var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+// when given a list of add-ons, it generates a list of queries
+
+var prepareAddOnQueries = function prepareAddOnQueries(addOnComponents) {
+  // Currently all add ons are for select filters.
+  // so we don't need to check the type of the add on component.
+  return [].concat(addOnComponents).map(function (_ref) {
+    var componentProps = _ref.componentProps;
+    var p = componentProps;
+    var field = p.field;
+    var measure = [{
+      field: field,
+      aggregate: 'distinct'
+    }];
+    var order = [{
+      field: field,
+      direction: 'asc',
+      aggregate: 'none'
+    }];
+    var filter = [];
+    var dimension = [field];
+    var timeDimension = null;
+    var limit = 1500;
+    var secureFilter = [];
+    return build(measure, order, filter, dimension, timeDimension, limit, secureFilter);
+  });
+};
+
+var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   var measures = [];
@@ -1210,5 +1283,51 @@ props.xMeasure && measures.push(props.xMeasure);
   var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
 
+var MAIN_QUERY_OFFSET = 1;
+
+var hydrateSelectFilterAddOn = function hydrateSelectFilterAddOn(component, componentIndex, localFilters, results, callbacks) {
+  var _localFilters$compone;
+
+  var uniqueFieldIndex = lodash.findIndex(results[MAIN_QUERY_OFFSET + componentIndex].fields, function (f) {
+    return f.title == component.componentProps.field;
+  });
+  var optionValues = results[1].content.map(function (row) {
+    return row[uniqueFieldIndex];
+  });
+  return _extends({}, component, {
+    componentProps: _extends({}, component.componentProps, {
+      currentValue: "" + ((_localFilters$compone = localFilters[componentIndex]) == null ? void 0 : _localFilters$compone.value),
+      options: optionValues.map(function (value) {
+        return {
+          value: value,
+          label: value
+        };
+      }),
+      onChange: function onChange(filter) {
+        var _callbacks$setLocalFi;
+
+        // TODO this parsing of the value needs to be handled nicely.
+        // Currently it's also causing the string interpolation where the `currentValue`
+        // is passed.
+        filter.value = parseInt(filter.value);
+        callbacks.setLocalFilters((_callbacks$setLocalFi = {}, _callbacks$setLocalFi[componentIndex] = filter, _callbacks$setLocalFi));
+      }
+    })
+  });
+};
+
+var hydrateAddOns = function hydrateAddOns(addOns, localFilters, results, callbacks) {
+  if (!addOns || !results[1]) return null;
+  return {
+    components: [].concat(addOns.components).map(function (component, componentIndex) {
+      if (component.type == 'selectFilter') {
+        return hydrateSelectFilterAddOn(component, componentIndex, localFilters, results, callbacks);
+      }
+
+      throw "Did not recognise add on component " + component.type;
+    })
+  };
+};
+
 var ScatterChart = function ScatterChart(explicitProps) {
@@ -1221,8 +1340,17 @@ var _useScatterChart = useScatterChart(),
       queries = _useScatterChart.queries,
-      version = _useScatterChart.version;
+      version = _useScatterChart.version,
+      localFilters = _useScatterChart.localFilters,
+      setLocalFilters = _useScatterChart.setLocalFilters;
 
   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);
+  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (lodash.isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React__default.createElement(puppet.Components.ScatterChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1233,5 +1361,6 @@ query: queries[0]
 
-var useBarChartQueryEffect = function useBarChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useBarChartQueryEffect = function useBarChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1246,8 +1375,17 @@
       version = _useBarChart.version,
-      setResults = _useBarChart.setResults;
+      setResults = _useBarChart.setResults,
+      localFilters = _useBarChart.localFilters,
+      setLocalFilters = _useBarChart.setLocalFilters;
 
   var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
-  useBarChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useBarChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (lodash.isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React__default.createElement(puppet.Components.BarChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1258,5 +1396,6 @@ query: queries[0]
 
-var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1271,8 +1410,17 @@
       component = _useLineChart.component,
-      setResults = _useLineChart.setResults;
+      setResults = _useLineChart.setResults,
+      localFilters = _useLineChart.localFilters,
+      setLocalFilters = _useLineChart.setLocalFilters;
 
   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);
+  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (lodash.isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React__default.createElement(puppet.Components.LineChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1283,5 +1431,6 @@ query: queries[0]
 
-var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1296,8 +1445,17 @@
       queries = _usePieChart.queries,
-      version = _usePieChart.version;
+      version = _usePieChart.version,
+      localFilters = _usePieChart.localFilters,
+      setLocalFilters = _usePieChart.setLocalFilters;
 
   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);
+  usePieChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (lodash.isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React__default.createElement(puppet.Components.PieChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1308,5 +1466,6 @@ query: queries[0]
 
-var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1321,8 +1480,17 @@
       queries = _useAreaChart.queries,
-      version = _useAreaChart.version;
+      version = _useAreaChart.version,
+      localFilters = _useAreaChart.localFilters,
+      setLocalFilters = _useAreaChart.setLocalFilters;
 
   var componentProps = puppet.mergeProps(explicitProps, version == null ? void 0 : version.props, puppet.Components.LineChartView.defaultProps);
-  useAreaChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useAreaChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (lodash.isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React__default.createElement(puppet.Components.AreaChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1329,0 +1497,0 @@ query: queries[0]

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

dist/components.esm.js

 import React, { useEffect, useState } from 'react';
-import { replace, last, flatMap, isEmpty, capitalize, mapValues } from 'lodash-es';
+import { replace, last, flatMap, isEmpty, findIndex, capitalize, mapValues } from 'lodash-es';
 import { Utils, mergeProps, Components } from '@vizzly/puppet';
@@ -769,2 +769,9 @@ import fetch from 'isomorphic-fetch';
 
+var addAndFilters = function addAndFilters(filter, filterToAddToAll) {
+  if (!filter || isEmpty(filter)) filter = [[]];
+  return [].concat(filter).map(function (andFilter) {
+    return [].concat(andFilter, filterToAddToAll);
+  });
+};
+
 var build = function build(measure, order, filter, dimension, timeDimension, limit, secureFilter) {
@@ -788,17 +795,17 @@ var query = {
 };
-var addExampleSecureFilter = function addExampleSecureFilter(query, secureFilters) {
+var addFilters = function addFilters(query, filters) {
   if (isEmpty(query.filter)) query.filter = [[]];
-  var newFilter = [].concat(query.filter).map(function (andFilter) {
-    return [].concat(andFilter, secureFilters.map(function (secureFilter) {
-      return {
-        field: secureFilter.field,
-        op: secureFilter.op,
-        value: secureFilter.exampleValue
-      };
-    }));
-  });
   return _extends({}, query, {
-    filter: newFilter
+    filter: addAndFilters(query.filter, filters)
   });
 };
+var addExampleSecureFilter = function addExampleSecureFilter(query, secureFilters) {
+  return addFilters(query, secureFilters.map(function (secureFilter) {
+    return {
+      field: secureFilter.field,
+      op: secureFilter.op,
+      value: secureFilter.exampleValue
+    };
+  }));
+};
 var setSecureFilter = function setSecureFilter(query, secureFilter) {
@@ -810,7 +817,22 @@ return _extends({}, query, {
 
-var useQueryEffect = function useQueryEffect(api, queries, componentId, onResultsCallback, secureFilterCallback, secureFilterExamples) {
-  // TODO re-introduce fetching secure filters using auth config...
+var MAIN_QUERY_INDEX = 0;
+/*
+Queries:
+  The query at position 0 is the main query that fetches results for the
+  line/bar/scatter/.... chart. The queries from index 1 and onwards are for
+  the add-ons, which are in the same order as the add-ons were supplied in.
+*/
+
+var useQueryEffect = function useQueryEffect(api, queries, componentId, onResultsCallback, filterConfig) {
+  var secureFilterExamples = filterConfig.secureFilterExamples,
+      secureFilterCallback = filterConfig.secureFilterCallback,
+      localFilters = filterConfig.localFilters;
   queries = queries.map(function (query) {
     return addExampleSecureFilter(query, secureFilterExamples || []);
-  });
+  }); // add local filters to the main query.
+
+  if (queries[0]) {
+    queries[MAIN_QUERY_INDEX].filter = addAndFilters(queries[0].filter, Object.values(localFilters || {}));
+  }
+
   useEffect(function () {
@@ -1036,2 +1058,8 @@ var abortController = new AbortController();
 };
+var setQueries = function setQueries(state, setState, queries) {
+  setState(_extends({}, state, {
+    results: [],
+    queries: [].concat(queries)
+  }));
+};
 var setVersion = function setVersion(state, setState, version) {
@@ -1053,2 +1081,9 @@ setState(_extends({}, state, {
 };
+var setLocalFilters = function setLocalFilters(state, setState, filters) {
+  setState(_extends({}, state, {
+    results: [],
+    queries: [],
+    localFilters: filters
+  }));
+};
 
@@ -1065,3 +1100,6 @@ var noOp = function noOp() {
   queries: [],
+  localFilters: [],
+  setLocalFilters: noOp,
   setResults: noOp,
+  setQueries: noOp,
   setProps: noOp,
@@ -1086,2 +1124,3 @@ setStyleProps: noOp,
     queries: [],
+    localFilters: [],
     component: null,
@@ -1160,2 +1199,5 @@ version: null
     },
+    setQueries: function setQueries$1(queries) {
+      return setQueries(state, setState, queries);
+    },
     setVersion: function setVersion$1(version) {
@@ -1169,2 +1211,5 @@ return setVersion(state, setState, version);
       return setSecureFilters(state, setState, secureFilters);
+    },
+    setLocalFilters: function setLocalFilters$1(localFilters) {
+      return setLocalFilters(state, setState, localFilters);
     }
@@ -1197,3 +1242,31 @@ });
 
-var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+// when given a list of add-ons, it generates a list of queries
+
+var prepareAddOnQueries = function prepareAddOnQueries(addOnComponents) {
+  // Currently all add ons are for select filters.
+  // so we don't need to check the type of the add on component.
+  return [].concat(addOnComponents).map(function (_ref) {
+    var componentProps = _ref.componentProps;
+    var p = componentProps;
+    var field = p.field;
+    var measure = [{
+      field: field,
+      aggregate: 'distinct'
+    }];
+    var order = [{
+      field: field,
+      direction: 'asc',
+      aggregate: 'none'
+    }];
+    var filter = [];
+    var dimension = [field];
+    var timeDimension = null;
+    var limit = 1500;
+    var secureFilter = [];
+    return build(measure, order, filter, dimension, timeDimension, limit, secureFilter);
+  });
+};
+
+var useScatterChartQueryEffect = function useScatterChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   var measures = [];
@@ -1203,5 +1276,51 @@ props.xMeasure && measures.push(props.xMeasure);
   var query = build(measures, props.order, props.filter, props.dimension, props.timeDimension, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
 
+var MAIN_QUERY_OFFSET = 1;
+
+var hydrateSelectFilterAddOn = function hydrateSelectFilterAddOn(component, componentIndex, localFilters, results, callbacks) {
+  var _localFilters$compone;
+
+  var uniqueFieldIndex = findIndex(results[MAIN_QUERY_OFFSET + componentIndex].fields, function (f) {
+    return f.title == component.componentProps.field;
+  });
+  var optionValues = results[1].content.map(function (row) {
+    return row[uniqueFieldIndex];
+  });
+  return _extends({}, component, {
+    componentProps: _extends({}, component.componentProps, {
+      currentValue: "" + ((_localFilters$compone = localFilters[componentIndex]) == null ? void 0 : _localFilters$compone.value),
+      options: optionValues.map(function (value) {
+        return {
+          value: value,
+          label: value
+        };
+      }),
+      onChange: function onChange(filter) {
+        var _callbacks$setLocalFi;
+
+        // TODO this parsing of the value needs to be handled nicely.
+        // Currently it's also causing the string interpolation where the `currentValue`
+        // is passed.
+        filter.value = parseInt(filter.value);
+        callbacks.setLocalFilters((_callbacks$setLocalFi = {}, _callbacks$setLocalFi[componentIndex] = filter, _callbacks$setLocalFi));
+      }
+    })
+  });
+};
+
+var hydrateAddOns = function hydrateAddOns(addOns, localFilters, results, callbacks) {
+  if (!addOns || !results[1]) return null;
+  return {
+    components: [].concat(addOns.components).map(function (component, componentIndex) {
+      if (component.type == 'selectFilter') {
+        return hydrateSelectFilterAddOn(component, componentIndex, localFilters, results, callbacks);
+      }
+
+      throw "Did not recognise add on component " + component.type;
+    })
+  };
+};
+
 var ScatterChart = function ScatterChart(explicitProps) {
@@ -1214,8 +1333,17 @@ var _useScatterChart = useScatterChart(),
       queries = _useScatterChart.queries,
-      version = _useScatterChart.version;
+      version = _useScatterChart.version,
+      localFilters = _useScatterChart.localFilters,
+      setLocalFilters = _useScatterChart.setLocalFilters;
 
   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);
+  useScatterChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React.createElement(Components.ScatterChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1226,5 +1354,6 @@ query: queries[0]
 
-var useBarChartQueryEffect = function useBarChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useBarChartQueryEffect = function useBarChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1239,8 +1368,17 @@
       version = _useBarChart.version,
-      setResults = _useBarChart.setResults;
+      setResults = _useBarChart.setResults,
+      localFilters = _useBarChart.localFilters,
+      setLocalFilters = _useBarChart.setLocalFilters;
 
   var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
-  useBarChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useBarChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React.createElement(Components.BarChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1251,5 +1389,6 @@ query: queries[0]
 
-var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useLineChartQueryEffect = function useLineChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1264,8 +1403,17 @@
       component = _useLineChart.component,
-      setResults = _useLineChart.setResults;
+      setResults = _useLineChart.setResults,
+      localFilters = _useLineChart.localFilters,
+      setLocalFilters = _useLineChart.setLocalFilters;
 
   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);
+  useLineChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React.createElement(Components.LineChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1276,5 +1424,6 @@ query: queries[0]
 
-var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var usePieChartQueryEffect = function usePieChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   var query = build(props.measure, props.order, props.filter, props.dimension, null, props.limit);
-  useQueryEffect(api(apiConfig), isRunnable(query) ? [query] : [], componentId, setResults, secureFilterCallback, secureFilterExamples);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1289,8 +1438,17 @@
       queries = _usePieChart.queries,
-      version = _usePieChart.version;
+      version = _usePieChart.version,
+      localFilters = _usePieChart.localFilters,
+      setLocalFilters = _usePieChart.setLocalFilters;
 
   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);
+  usePieChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React.createElement(Components.PieChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1301,5 +1459,6 @@ query: queries[0]
 
-var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, secureFilterCallback, secureFilterExamples) {
+var useAreaChartQueryEffect = function useAreaChartQueryEffect(apiConfig, componentId, props, setResults, filterConfig) {
+  var addOnQueries = props.addOns ? prepareAddOnQueries(props.addOns.components) : [];
   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);
+  useQueryEffect(api(apiConfig), isRunnable(query) ? [query].concat(addOnQueries) : [], componentId, setResults, filterConfig);
 };
@@ -1314,8 +1473,17 @@
       queries = _useAreaChart.queries,
-      version = _useAreaChart.version;
+      version = _useAreaChart.version,
+      localFilters = _useAreaChart.localFilters,
+      setLocalFilters = _useAreaChart.setLocalFilters;
 
   var componentProps = mergeProps(explicitProps, version == null ? void 0 : version.props, Components.LineChartView.defaultProps);
-  useAreaChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, explicitProps.secureFilterCallback);
+  useAreaChartQueryEffect(apiConfig, component == null ? void 0 : component.id, componentProps, setResults, {
+    secureFilterCallback: explicitProps.secureFilterCallback,
+    localFilters: localFilters
+  });
   if (isEmpty(results)) return null;
+  var addOns = hydrateAddOns(componentProps.addOns, localFilters, results, {
+    setLocalFilters: setLocalFilters
+  });
   return React.createElement(Components.AreaChartView, Object.assign({}, componentProps, {
+    addOns: addOns,
     result: results[0],
@@ -1322,0 +1490,0 @@ query: queries[0]

dist/components/context/actions.d.ts

@@ -14,4 +14,8 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 export declare const setResults: (state: State, setState: SetStateCallback, results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void;
+export declare const setQueries: (state: State, setState: SetStateCallback, queries: VizzlyPuppet.Query[]) => void;
 export declare const setVersion: (state: State, setState: SetStateCallback, version: VizzlyComponents.Version) => void;
 export declare const setSecureFilters: (state: State, setState: SetStateCallback, secureFilters: VizzlyComponents.SecureFilter[]) => void;
+export declare const setLocalFilters: (state: State, setState: SetStateCallback, filters: {
+    [key: number]: VizzlyPuppet.Query.Filter;
+}) => void;
 export {};

dist/components/context/types.d.ts

@@ -9,2 +9,5 @@ import { VizzlyPuppet } from '@vizzly/puppet';
     apiConfig: VizzlyComponents.ApiConfig | null;
+    localFilters: {
+        [key: number]: VizzlyPuppet.Query.Filter;
+    };
 }
@@ -18,2 +21,3 @@ export interface ComponentContextMethods<ComponentProps> {
     setResults: (results: VizzlyPuppet.Result[], queries: VizzlyPuppet.Query[]) => void;
+    setQueries: (queries: VizzlyPuppet.Query[]) => void;
     setProps: (props: ComponentProps) => void;
@@ -23,3 +27,6 @@ setStyleProps: (styleProps: ComponentProps) => void;
     setSecureFilters: (secureFilters: VizzlyComponents.SecureFilter[]) => void;
+    setLocalFilters: (localFilters: {
+        [key: number]: VizzlyPuppet.Query.Filter;
+    }) => void;
 }
 export declare type ComponentContextType<ComponentProps> = ComponentContextState<ComponentProps> & ComponentContextMethods<ComponentProps>;

dist/models/Query.d.ts

 import { VizzlyPuppet } from '@vizzly/puppet';
 import { VizzlyComponents } from '../types';
+import * as Filter from './Filter';
 export declare const build: (measure: VizzlyPuppet.Query.Measure[], order: VizzlyPuppet.Query.Order[], filter: VizzlyPuppet.Query.Filter[][], dimension: VizzlyPuppet.Query.Dimension[], timeDimension: VizzlyPuppet.Query.TimeDimension | null, limit?: number | undefined, secureFilter?: string[] | undefined) => VizzlyPuppet.Query | null;
 export declare const isRunnable: (query: VizzlyPuppet.Query | null) => boolean;
+export declare const addFilters: (query: VizzlyPuppet.Query, filters: VizzlyPuppet.Query.Filter[]) => {
+    filter: VizzlyPuppet.Query.Filter[][];
+    measure: VizzlyPuppet.Query.Measure[];
+    dimension: string[];
+    timeDimension: VizzlyPuppet.Query.TimeDimension | null;
+    order: VizzlyPuppet.Query.Order[];
+    limit?: number | undefined;
+    offset?: number | undefined;
+    secureFilter: string[];
+};
 export declare const addExampleSecureFilter: (query: VizzlyPuppet.Query, secureFilters: VizzlyComponents.SecureFilter[]) => {
@@ -6,0 +17,0 @@ filter: VizzlyPuppet.Query.Filter[][];

package.json

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

src/api/useAreaChartQueryEffect.ts

@@ -1,2 +0,2 @@
-import { useQueryEffect } from './useQueryEffect';
+import { useQueryEffect, FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
@@ -6,2 +6,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 import { api } from '../api';
+import prepareAddOnQueries from '../prepareAddOnQueries';
 
@@ -16,5 +17,8 @@ export const useAreaChartQueryEffect = (
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
+  const addOnQueries = props.addOns
+    ? prepareAddOnQueries(props.addOns.components)
+    : [];
+
   let query = Query.build(
@@ -31,8 +35,9 @@ props.measure,
     api(apiConfig),
-    (Query.isRunnable(query) ? [query] : []) as VizzlyPuppet.Query[],
+    (Query.isRunnable(query)
+      ? [query, ...addOnQueries]
+      : []) as VizzlyPuppet.Query[],
     componentId,
     setResults,
-    secureFilterCallback,
-    secureFilterExamples
+    filterConfig
   );
 };

src/api/useBarChartQueryEffect.ts

@@ -1,2 +0,2 @@
-import { useQueryEffect } from './useQueryEffect';
+import { useQueryEffect, FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
@@ -6,2 +6,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 import { api } from '../api';
+import prepareAddOnQueries from '../prepareAddOnQueries';
 
@@ -11,3 +12,3 @@ export const useBarChartQueryEffect = (
   componentId: string | undefined,
-  props: VizzlyPuppet.Component.AreaChart.Props,
+  props: VizzlyPuppet.Component.BarChart.Props,
   setResults: (
@@ -17,5 +18,8 @@ results: VizzlyPuppet.Result[],
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
+  const addOnQueries = props.addOns
+    ? prepareAddOnQueries(props.addOns.components)
+    : [];
+
   let query = Query.build(
@@ -32,8 +36,9 @@ props.measure,
     api(apiConfig),
-    (Query.isRunnable(query) ? [query] : []) as VizzlyPuppet.Query[],
+    (Query.isRunnable(query)
+      ? [query, ...addOnQueries]
+      : []) as VizzlyPuppet.Query[],
     componentId,
     setResults,
-    secureFilterCallback,
-    secureFilterExamples
+    filterConfig
   );
 };

src/api/useLineChartQueryEffect.ts

@@ -1,2 +0,2 @@
-import { useQueryEffect } from './useQueryEffect';
+import { useQueryEffect, FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
@@ -6,2 +6,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 import { api } from '../api';
+import prepareAddOnQueries from '../prepareAddOnQueries';
 
@@ -16,5 +17,8 @@ export const useLineChartQueryEffect = (
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
+  const addOnQueries = props.addOns
+    ? prepareAddOnQueries(props.addOns.components)
+    : [];
+
   let query = Query.build(
@@ -31,8 +35,9 @@ props.measure,
     api(apiConfig),
-    (Query.isRunnable(query) ? [query] : []) as VizzlyPuppet.Query[],
+    (Query.isRunnable(query)
+      ? [query, ...addOnQueries]
+      : []) as VizzlyPuppet.Query[],
     componentId,
     setResults,
-    secureFilterCallback,
-    secureFilterExamples
+    filterConfig
   );
 };

src/api/usePieChartQueryEffect.ts

@@ -1,2 +0,2 @@
-import { useQueryEffect } from './useQueryEffect';
+import { useQueryEffect, FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
@@ -6,2 +6,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 import { api } from '../api';
+import prepareAddOnQueries from '../prepareAddOnQueries';
 
@@ -16,5 +17,8 @@ export const usePieChartQueryEffect = (
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
+  const addOnQueries = props.addOns
+    ? prepareAddOnQueries(props.addOns.components)
+    : [];
+
   let query = Query.build(
@@ -31,8 +35,9 @@ props.measure,
     api(apiConfig),
-    (Query.isRunnable(query) ? [query] : []) as VizzlyPuppet.Query[],
+    (Query.isRunnable(query)
+      ? [query, ...addOnQueries]
+      : []) as VizzlyPuppet.Query[],
     componentId,
     setResults,
-    secureFilterCallback,
-    secureFilterExamples
+    filterConfig
   );
 };

src/api/useQueryEffect.ts

@@ -6,3 +6,20 @@ import { isEmpty } from 'lodash';
 import * as Query from '../models/Query';
+import * as Filter from '../models/Filter';
 
+export type FilterConfig = {
+  secureFilterCallback?: VizzlyComponents.SecureFilterCallback;
+  secureFilterExamples?: VizzlyComponents.SecureFilter[];
+  localFilters?: {
+    [key: number]: VizzlyPuppet.Query.Filter;
+  };
+};
+
+const MAIN_QUERY_INDEX = 0;
+
+/*
+Queries:
+  The query at position 0 is the main query that fetches results for the
+  line/bar/scatter/.... chart. The queries from index 1 and onwards are for
+  the add-ons, which are in the same order as the add-ons were supplied in.
+*/
 export const useQueryEffect = (
@@ -16,6 +33,6 @@ api: any,
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
-  // TODO re-introduce fetching secure filters using auth config...
+  const { secureFilterExamples, secureFilterCallback, localFilters } =
+    filterConfig;
 
@@ -26,2 +43,10 @@ queries = queries.map((query) =>
 
+  // add local filters to the main query.
+  if (queries[0]) {
+    queries[MAIN_QUERY_INDEX].filter = Filter.addAndFilters(
+      queries[0].filter,
+      Object.values(localFilters || {})
+    );
+  }
+
   useEffect(() => {
@@ -28,0 +53,0 @@ const abortController = new AbortController();

src/api/useScatterChartQueryEffect.ts

@@ -1,2 +0,2 @@
-import { useQueryEffect } from './useQueryEffect';
+import { useQueryEffect, FilterConfig } from './useQueryEffect';
 import * as Query from '../models/Query';
@@ -6,2 +6,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 import { api } from '../api';
+import prepareAddOnQueries from '../prepareAddOnQueries';
 
@@ -16,5 +17,8 @@ export const useScatterChartQueryEffect = (
   ) => void,
-  secureFilterCallback?: VizzlyComponents.SecureFilterCallback,
-  secureFilterExamples?: VizzlyComponents.SecureFilter[]
+  filterConfig: FilterConfig
 ) => {
+  const addOnQueries = props.addOns
+    ? prepareAddOnQueries(props.addOns.components)
+    : [];
+
   let measures = [];
@@ -36,8 +40,9 @@
     api(apiConfig),
-    (Query.isRunnable(query) ? [query] : []) as VizzlyPuppet.Query[],
+    (Query.isRunnable(query)
+      ? [query, ...addOnQueries]
+      : []) as VizzlyPuppet.Query[],
     componentId,
     setResults,
-    secureFilterCallback,
-    secureFilterExamples
+    filterConfig
   );
 };

src/components/context/actions.ts

@@ -113,2 +113,10 @@ import { VizzlyPuppet } from '@vizzly/puppet';
 
+export const setQueries = (
+  state: State,
+  setState: SetStateCallback,
+  queries: VizzlyPuppet.Query[]
+): void => {
+  setState({ ...state, results: [], queries: [...queries] });
+};
+
 export const setVersion = (
@@ -134,1 +142,14 @@ state: State,
 };
+
+export const setLocalFilters = (
+  state: State,
+  setState: SetStateCallback,
+  filters: { [key: number]: VizzlyPuppet.Query.Filter }
+) => {
+  setState({
+    ...state,
+    results: [],
+    queries: [],
+    localFilters: filters,
+  });
+};

src/components/context/types.ts

@@ -10,2 +10,3 @@ import { VizzlyPuppet } from '@vizzly/puppet';
   apiConfig: VizzlyComponents.ApiConfig | null;
+  localFilters: { [key: number]: VizzlyPuppet.Query.Filter };
 }
@@ -23,2 +24,3 @@
   ) => void;
+  setQueries: (queries: VizzlyPuppet.Query[]) => void;
   setProps: (props: ComponentProps) => void;
@@ -28,2 +30,5 @@ setStyleProps: (styleProps: ComponentProps) => void;
   setSecureFilters: (secureFilters: VizzlyComponents.SecureFilter[]) => void;
+  setLocalFilters: (localFilters: {
+    [key: number]: VizzlyPuppet.Query.Filter;
+  }) => void;
 }
@@ -30,0 +35,0 @@

src/models/Query.ts

 import { VizzlyPuppet } from '@vizzly/puppet';
 import { isEmpty } from 'lodash';
 import { VizzlyComponents } from '../types';
+import * as Filter from './Filter';
 
@@ -36,20 +37,23 @@ export const build = (
 
-export const addExampleSecureFilter = (
+export const addFilters = (
   query: VizzlyPuppet.Query,
-  secureFilters: VizzlyComponents.SecureFilter[]
+  filters: VizzlyPuppet.Query.Filter[]
 ) => {
   if (isEmpty(query.filter)) query.filter = [[]];
 
-  let newFilter = [...query.filter].map((andFilter) => {
-    return [
-      ...andFilter,
-      ...secureFilters.map((secureFilter) => ({
-        field: secureFilter.field,
-        op: secureFilter.op,
-        value: secureFilter.exampleValue,
-      })),
-    ];
-  });
+  return { ...query, filter: Filter.addAndFilters(query.filter, filters) };
+};
 
-  return { ...query, filter: newFilter };
+export const addExampleSecureFilter = (
+  query: VizzlyPuppet.Query,
+  secureFilters: VizzlyComponents.SecureFilter[]
+) => {
+  return addFilters(
+    query,
+    secureFilters.map((secureFilter) => ({
+      field: secureFilter.field,
+      op: secureFilter.op,
+      value: secureFilter.exampleValue,
+    }))
+  );
 };
@@ -56,0 +60,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

484787

increased by14.42%

Number of package files

102

increased by6.25%

Lines of code

5516

increased by13.66%

Dependency changes

• Updated@vizzly/puppet@0.0.64