@bygd/nc-report-ui 0.1.13 → 0.1.14

package/dist/default/cjs/index.cjs

@@ -1,1140 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var Paper = require('@material-ui/core/Paper');
-var styles = require('@material-ui/core/styles');
-var LinearProgress = require('@material-ui/core/LinearProgress');
-var reactGoogleCharts = require('react-google-charts');
-var numeral = require('numeral');
-var axios = require('axios');
-var Typography = require('@material-ui/core/Typography');
-var nunjucks = require('nunjucks');
-var FormControl$1 = require('@material-ui/core/FormControl');
-var Select$1 = require('@material-ui/core/Select');
-var MenuItem$1 = require('@material-ui/core/MenuItem');
-var reactIntersectionObserver = require('react-intersection-observer');
-var material = require('@mui/material');
-var CheckBoxOutlineBlankIcon = require('@mui/icons-material/CheckBoxOutlineBlank');
-var CheckBoxIcon = require('@mui/icons-material/CheckBox');
-var Box = require('@mui/material/Box');
-var InputLabel = require('@mui/material/InputLabel');
-var MenuItem = require('@mui/material/MenuItem');
-var FormControl = require('@mui/material/FormControl');
-var Select = require('@mui/material/Select');
-var EventEmitter = require('eventemitter3');
-var Grid = require('@material-ui/core/Grid');
-var Container = require('@material-ui/core/Container');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Paper__default = /*#__PURE__*/_interopDefault(Paper);
-var LinearProgress__default = /*#__PURE__*/_interopDefault(LinearProgress);
-var numeral__default = /*#__PURE__*/_interopDefault(numeral);
-var axios__default = /*#__PURE__*/_interopDefault(axios);
-var Typography__default = /*#__PURE__*/_interopDefault(Typography);
-var nunjucks__default = /*#__PURE__*/_interopDefault(nunjucks);
-var FormControl__default$1 = /*#__PURE__*/_interopDefault(FormControl$1);
-var Select__default$1 = /*#__PURE__*/_interopDefault(Select$1);
-var MenuItem__default$1 = /*#__PURE__*/_interopDefault(MenuItem$1);
-var CheckBoxOutlineBlankIcon__default = /*#__PURE__*/_interopDefault(CheckBoxOutlineBlankIcon);
-var CheckBoxIcon__default = /*#__PURE__*/_interopDefault(CheckBoxIcon);
-var Box__default = /*#__PURE__*/_interopDefault(Box);
-var InputLabel__default = /*#__PURE__*/_interopDefault(InputLabel);
-var MenuItem__default = /*#__PURE__*/_interopDefault(MenuItem);
-var FormControl__default = /*#__PURE__*/_interopDefault(FormControl);
-var Select__default = /*#__PURE__*/_interopDefault(Select);
-var EventEmitter__default = /*#__PURE__*/_interopDefault(EventEmitter);
-var Grid__default = /*#__PURE__*/_interopDefault(Grid);
-var Container__default = /*#__PURE__*/_interopDefault(Container);
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-const useStyles$1 = styles.makeStyles(theme => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2)
-    }
-  }
-}));
-function LinearIndeterminate(props) {
-  const classes = useStyles$1();
-  return /*#__PURE__*/React__namespace.default.createElement("div", _extends({
-    className: classes.root
-  }, props), /*#__PURE__*/React__namespace.default.createElement(LinearProgress__default.default, null));
-}
-
-function ValuePicker(view, schema, outputFormat = 'array') {
-  const columns = view.columns;
-  const metrics = schema.doc.metrics;
-  const dimensions = schema.doc.dimensions;
-  const all = [...metrics, ...dimensions];
-  const mapped = all.reduce((result, item) => {
-    result[item.name] = item;
-    return result;
-  }, {});
-  const _get = row => {
-    const output = outputFormat === 'array' ? [] : {};
-    const resp = columns.reduce((result, item) => {
-      const value = row[item.name];
-      const ref = mapped[item.name];
-      let formatted = value;
-      if (ref.type === 'timestamp') formatted = new Date(value);else if (!ref.format) formatted = value;else if (ref.format && ref.prefix) formatted = {
-        v: +value,
-        f: ref.prefix + " " + numeral__default.default(value).format(ref.format)
-      };else if (ref.format) formatted = {
-        v: +value,
-        f: numeral__default.default(value).format(ref.format)
-      };else formatted = value;
-      if (outputFormat === 'array') result.push(formatted);else result[item.name] = formatted?.f || formatted;
-      return result;
-    }, output);
-    return resp;
-  };
-  return _get;
-}
-function HeaderPicker(view, schema) {
-  const metrics = schema.doc.metrics;
-  const dimensions = schema.doc.dimensions;
-  const all = [...metrics, ...dimensions];
-  const result = view.columns.reduce((result, item) => {
-    const column = all.find(f => f.name === item.name) || item;
-    result.push(column.title || column.name);
-    return result;
-  }, []);
-  return result;
-}
-
-//const BASE_URL = 'http://localhost:8081';
-const BASE_URL = 'https://report-api.netcapital.pro';
-const apiClient = axios__default.default.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json'
-  }
-});
-
-// Cache for dashboard metadata
-const dashboardMetaCache = {};
-
-/**
- * Helper function to get the first available dashboard ID from cache
- * @returns {string|null} First dashboard ID or null if cache is empty
- */
-const getFirstCachedDashboardId = () => {
-  const cachedIds = Object.keys(dashboardMetaCache);
-  return cachedIds.length > 0 ? cachedIds[0] : null;
-};
-const Api = {
-  setAuth(auth) {
-    this.auth = auth;
-    const token = auth?.token;
-    const accessToken = token?.accessToken;
-    if (!accessToken) return;
-    apiClient.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;
-  },
-  /**
-   * Load and cache dashboard metadata
-   * @param {Object} params - Parameters object
-   * @param {string} params.dashboardId - Dashboard ID
-   * @returns {Promise} Dashboard metadata object
-   */
-  loadDashboardMeta: async ({
-    dashboardId
-  }) => {
-    const {
-      data
-    } = await apiClient.get(`/dashboard-meta/${dashboardId}`);
-
-    // Cache the metadata
-    dashboardMetaCache[dashboardId] = {
-      dashboards: data.dashboards || {},
-      charts: data.charts || {},
-      reports: data.reports || {},
-      reportMetadata: data.reportMetadata || {},
-      dateRanges: data.dateRanges || []
-    };
-    return dashboardMetaCache[dashboardId];
-  },
-  getDashboard: async ({
-    id,
-    dashboardId
-  }) => {
-    // Use provided dashboardId or fall back to first cached dashboard
-    const cacheKey = dashboardId || getFirstCachedDashboardId();
-
-    // Check cache first
-    if (cacheKey && dashboardMetaCache[cacheKey]?.dashboards?.[id]) {
-      return dashboardMetaCache[cacheKey].dashboards[id];
-    }
-
-    // Fall back to HTTP request
-    const {
-      data
-    } = await apiClient.get(`/entity/dashboards/${id}`);
-    return data;
-  },
-  /**
-   * Get chart by ID
-   * @param {Object} params - Parameters object
-   * @param {string} params.id - Chart ID
-   * @param {string} [params.dashboardId] - Optional dashboard ID for cache lookup
-   * @returns {Promise} Axios response promise
-   */
-  getChart: async ({
-    id,
-    dashboardId
-  }) => {
-    // Use provided dashboardId or fall back to first cached dashboard
-    const cacheKey = dashboardId || getFirstCachedDashboardId();
-
-    // Check cache first
-    if (cacheKey && dashboardMetaCache[cacheKey]?.charts?.[id]) {
-      return dashboardMetaCache[cacheKey].charts[id];
-    }
-
-    // Fall back to HTTP request
-    const {
-      data
-    } = await apiClient.get(`/entity/charts/${id}`);
-    return data;
-  },
-  /**
-   * Get report by ID
-   * @param {Object} params - Parameters object
-   * @param {string} params.id - Report ID
-   * @param {string} [params.dashboardId] - Optional dashboard ID for cache lookup
-   * @returns {Promise} Axios response promise
-   */
-  getReport: async ({
-    id,
-    dashboardId
-  }) => {
-    // Use provided dashboardId or fall back to first cached dashboard
-    const cacheKey = dashboardId || getFirstCachedDashboardId();
-
-    // Check cache first
-    if (cacheKey && dashboardMetaCache[cacheKey]?.reports?.[id]) {
-      return dashboardMetaCache[cacheKey].reports[id];
-    }
-
-    // Fall back to HTTP request
-    const {
-      data
-    } = await apiClient.get(`/entity/reports/${id}`);
-    return data;
-  },
-  /**
-   * Get report schema/metadata by ID
-   * @param {Object} params - Parameters object
-   * @param {string} params.id - Report ID
-   * @param {string} [params.dashboardId] - Optional dashboard ID for cache lookup
-   * @returns {Promise} Axios response promise
-   */
-  getReportSchema: async ({
-    id,
-    dashboardId,
-    query = {}
-  }) => {
-    // Use provided dashboardId or fall back to first cached dashboard
-    const cacheKey = dashboardId || getFirstCachedDashboardId();
-
-    // Check cache first
-    if (cacheKey && dashboardMetaCache[cacheKey]?.reportMetadata?.[id]) {
-      return dashboardMetaCache[cacheKey].reportMetadata[id];
-    }
-
-    // Fall back to HTTP request
-    // console.log({getReportSchema:{id,query}});
-    const {
-      data
-    } = await apiClient.post(`/reports/${id}/metadata`, query);
-    return data;
-  },
-  /**
-   * Run report with optional query parameters
-   * @param {Object} params - Parameters object
-   * @param {string} params.id - Report ID
-   * @param {Object} [params.query] - Optional query object to send in request body
-   * @returns {Promise} Axios response promise
-   */
-  runReport: async ({
-    id,
-    query = {}
-  }) => {
-    // console.log({runReport:{id,query}});
-
-    const {
-      data
-    } = await apiClient.post(`/reports/${id}/run`, query);
-    return data;
-  },
-  getDateRanges: async ({
-    dashboardId
-  } = {}) => {
-    // Use provided dashboardId or fall back to first cached dashboard
-    const cacheKey = dashboardId || getFirstCachedDashboardId();
-
-    // Check cache first
-    if (cacheKey && dashboardMetaCache[cacheKey]?.dateRanges) {
-      return dashboardMetaCache[cacheKey].dateRanges;
-    }
-
-    // Fall back to HTTP request
-    const {
-      data
-    } = await apiClient.get(`/globals/date-ranges`);
-    return data;
-  }
-};
-
-const useStyles = styles.makeStyles(theme => ({
-  headerRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  tableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  oddTableRow: {
-    fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.fontSize
-  },
-  headerCell: {
-    backgroundColor: "white",
-    padding: "4px !important"
-  }
-  // tableCell:{
-  //     // padding:"4px !important"
-  // },
-}));
-const dateRangeFormats = {
-  "none": "YYYY-MM-dd",
-  "day": "MMM dd",
-  "week": "MMM dd",
-  "month": "YYYY MMM",
-  "year": "YYYY"
-};
-function GoogleChart({
-  chart,
-  source,
-  view,
-  report,
-  schema,
-  dashboard,
-  query
-}) {
-  const [data, setData] = React__namespace.default.useState([]);
-  const classes = useStyles();
-  const [dateRanges, setDateRanges] = React__namespace.default.useState([]);
-  React.useEffect(() => {
-    (async () => {
-      const data = await Api.getDateRanges();
-      setDateRanges(data);
-    })();
-  }, []);
-  const dateRangeFormat = React.useMemo(() => {
-    const defaultFormat = 'YYYY-MM-dd';
-    const name = query?.date_range?.name;
-    const dateRange = dateRanges.find(f => f.name === name);
-    if (!dateRange) return defaultFormat;
-    const format = dateRangeFormats[dateRange?.granularity] || defaultFormat;
-    return format;
-  }, [dateRanges, query]);
-  const getOptions = data => {
-    if (chart?.doc.chart?.type === 'Table') {
-      return {
-        ...chart?.doc.chart?.options,
-        cssClassNames: classes
-      };
-    } else if (chart?.doc.chart?.type === 'AreaChart') {
-      const hAxisFromChart = chart?.doc.chart?.options?.hAxis || {};
-      const hAxisDefaults = {
-        ticks: data.slice(1).map(row => row[0]),
-        format: dateRangeFormat
-      };
-      const hAxis = {
-        ...hAxisDefaults,
-        ...hAxisFromChart
-      };
-
-      // console.log({GoogleChart:{chart,source,view,report,schema,query,dateRanges,dateRangeFormat,ticks:hAxis.ticks}})
-
-      return {
-        ...chart?.doc.chart?.options,
-        ...{
-          hAxis,
-          focusTarget: 'category'
-        }
-      };
-    } else return chart?.doc.chart?.options;
-  };
-  React__namespace.default.useEffect(() => {
-    if (!chart || !view || !source || !report || !schema) return;
-    let result = [];
-    result.push(HeaderPicker(view, schema));
-    const valuePicker = ValuePicker(view, schema);
-    source?.forEach(item => {
-      const val = valuePicker(item);
-      result.push(val);
-    });
-    source?.length ? setData(result) : setData();
-  }, [chart, source, view, report, schema]);
-  return data ? /*#__PURE__*/React__namespace.default.createElement(reactGoogleCharts.Chart, _extends({
-    width: chart?.doc.size?.width || '100%',
-    height: dashboard ? chart?.doc.size?.height || '300px' : '100%',
-    chartType: chart?.doc.chart?.type,
-    data: data,
-    options: getOptions(data)
-  }, chart?.doc.chart?.props)) : /*#__PURE__*/React__namespace.default.createElement("div", null);
-}
-
-function LabelChart({
-  chart,
-  source,
-  view,
-  report,
-  schema
-}) {
-  const [data, setData] = React__namespace.default.useState([]);
-  const [value, setValue] = React__namespace.default.useState();
-  const [subText, setSubText] = React__namespace.default.useState();
-  React__namespace.default.useEffect(() => {
-    if (!chart || !view || !source || !report || !schema) return;
-    let result = [];
-    // result.push(HeaderPicker(view, schema));
-    const valuePicker = ValuePicker(view, schema);
-    source.forEach(item => result.push(valuePicker(item)));
-    setData(result);
-    const options = chart?.doc?.chart?.options || {};
-    const valueIndex = options?.index || 0;
-    if (result.length > 0) setValue(result[0][valueIndex]);
-    if (options.subText?.format) {
-      nunjucks__default.default.configure({
-        autoescape: false
-      });
-      const valuePickerObj = ValuePicker(view, schema, 'object');
-      const val = valuePickerObj(source[0]);
-      const subTextRendered = nunjucks__default.default.renderString(options.subText?.format, val);
-      setSubText(subTextRendered);
-    }
-  }, [chart, source, view, report, schema]);
-  return /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      alignContent: "center",
-      alignItems: "center",
-      height: "100%",
-      flexDirection: "column"
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(Typography__default.default, {
-    variant: "h6"
-  }, value?.f || value), /*#__PURE__*/React__namespace.default.createElement(Typography__default.default, {
-    variant: "subtitle1"
-  }, subText));
-}
-
-const Components = {
-  GoogleChart,
-  LabelChart
-};
-function Internal(name, props) {
-  if (typeof Components[name] !== "undefined") {
-    return /*#__PURE__*/React__namespace.default.createElement(Components[name], props);
-  } else return /*#__PURE__*/React__namespace.default.createElement(LinearIndeterminate, props);
-}
-
-/**
- * CheckboxMultiAutocomplete
- *
- * Props:
- * - items: Array<{ key: string, value: string }>
- * - selectedKeys?: string[] (controlled)
- * - defaultSelectedKeys?: string[] (uncontrolled)
- * - onChange?: (selectedKeys: string[], selectedItems: {key, value}[]) => void
- * - inputValue?: string (controlled input)
- * - defaultInputValue?: string (uncontrolled input)
- * - onInputChange?: (text: string) => void (debounced by debounceMs)
- * - debounceMs?: number (default 300)
- * - label?, placeholder?, loading?, disabled?, size? = 'small', error?, helperText?,
- *   limitTags? = 3, disableClearable?, id?, textFieldProps?
- */
-
-function useDebouncedCallback(fn, delay = 300) {
-  const fnRef = React.useRef(fn);
-  const timer = React.useRef(null);
-  fnRef.current = fn;
-  React.useEffect(() => () => {
-    if (timer.current) window.clearTimeout(timer.current);
-  }, []);
-  return React__namespace.useCallback((...args) => {
-    if (!fnRef.current) return;
-    if (timer.current) window.clearTimeout(timer.current);
-    timer.current = window.setTimeout(() => {
-      fnRef.current && fnRef.current(...args);
-    }, delay);
-  }, [delay]);
-}
-const icon = /*#__PURE__*/React__namespace.createElement(CheckBoxOutlineBlankIcon__default.default, {
-  fontSize: "small"
-});
-const checkedIcon = /*#__PURE__*/React__namespace.createElement(CheckBoxIcon__default.default, {
-  fontSize: "small"
-});
-function CheckboxMultiAutocomplete({
-  items,
-  selectedKeys,
-  defaultSelectedKeys,
-  onChange,
-  inputValue,
-  defaultInputValue,
-  onInputChange,
-  debounceMs = 300,
-  label,
-  placeholder,
-  loading,
-  disabled,
-  size = "small",
-  error,
-  helperText,
-  limitTags = 3,
-  disableClearable,
-  id,
-  textFieldProps
-}) {
-  // Normalize props to avoid "is not iterable" and similar runtime errors
-  const safeItems = React.useMemo(() => Array.isArray(items) ? items : [], [items]);
-
-  // Controlled/uncontrolled selection
-  const isSelectionControlled = Array.isArray(selectedKeys);
-  const [innerKeys, setInnerKeys] = React.useState(Array.isArray(defaultSelectedKeys) ? defaultSelectedKeys : []);
-  const currentKeys = isSelectionControlled ? selectedKeys : innerKeys;
-
-  // Map lookups for efficiency
-  const byKey = React.useMemo(() => {
-    const m = new Map();
-    for (const it of safeItems) m.set(it && it.key, it);
-    return m;
-  }, [safeItems]);
-  const selectedItems = React.useMemo(() => (Array.isArray(currentKeys) ? currentKeys : []).map(k => byKey.get(k)).filter(Boolean), [currentKeys, byKey]);
-
-  // Controlled/uncontrolled input
-  const isInputControlled = typeof inputValue === "string";
-  const [innerInput, setInnerInput] = React.useState(typeof defaultInputValue === "string" ? defaultInputValue : "");
-  const currentInput = isInputControlled ? inputValue : innerInput;
-  const debouncedInput = useDebouncedCallback(text => {
-    onInputChange && onInputChange(text);
-  }, debounceMs);
-  const valueForAutocomplete = selectedItems; // MUI expects full option objects
-
-  return /*#__PURE__*/React__namespace.createElement(material.FormControl, {
-    fullWidth: true,
-    error: error,
-    disabled: disabled
-  }, /*#__PURE__*/React__namespace.createElement(material.Autocomplete, {
-    openOnFocus: true,
-    forcePopupIcon: true,
-    id: id,
-    multiple: true,
-    disableCloseOnSelect: true,
-    options: safeItems,
-    value: valueForAutocomplete,
-    inputValue: currentInput,
-    getOptionLabel: o => o && typeof o === "object" ? o.value ?? "" : "",
-    isOptionEqualToValue: (option, value) => option && value && option.key === value.key,
-    loading: loading,
-    limitTags: limitTags,
-    disableClearable: disableClearable,
-    onChange: (event, newValue /* array of option objects */) => {
-      const newKeys = Array.isArray(newValue) ? newValue.map(o => o && o.key) : [];
-      if (!isSelectionControlled) setInnerKeys(newKeys);
-      onChange && onChange(newKeys, Array.isArray(newValue) ? newValue : []);
-    },
-    onInputChange: (event, newInput, reason) => {
-      if (!isInputControlled) setInnerInput(newInput ?? "");
-      if (reason === "input") {
-        debouncedInput(newInput ?? "");
-      } else if (reason === "clear") {
-        debouncedInput("");
-      }
-    },
-    renderOption: (props, option, {
-      selected
-    }) => /*#__PURE__*/React__namespace.createElement("li", _extends({}, props, {
-      key: option && option.key || Math.random().toString(36)
-    }), /*#__PURE__*/React__namespace.createElement(material.Checkbox, {
-      icon: icon,
-      checkedIcon: checkedIcon,
-      style: {
-        marginRight: 8
-      },
-      checked: !!selected
-    }), option && option.value),
-    renderTags: (tagValue, getTagProps) => (Array.isArray(tagValue) ? tagValue : []).map((option, index) => /*#__PURE__*/React__namespace.createElement(material.Chip, _extends({}, getTagProps({
-      index
-    }), {
-      key: option && option.key || index,
-      label: option && option.value || ""
-    }))),
-    renderInput: params => /*#__PURE__*/React__namespace.createElement(material.TextField, _extends({}, params, {
-      label: label,
-      placeholder: placeholder,
-      InputProps: {
-        ...params.InputProps,
-        endAdornment: /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, loading ? /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
-          size: 18
-        }) : null, params.InputProps.endAdornment)
-      },
-      size: size
-    }, textFieldProps))
-  }), helperText ? /*#__PURE__*/React__namespace.createElement(material.FormHelperText, null, helperText) : null);
-}
-
-async function fetchItems(query, filter) {
-  if (!filter?.source) return [];
-  const data = await Api.runReport({
-    id: filter.source
-  });
-  return data.map(d => {
-    const m = {
-      key: d[filter.field],
-      value: d[filter.field]
-    };
-    return m;
-  });
-}
-const ChartFilterMultiSelect = ({
-  filter,
-  channel,
-  query
-}) => {
-  const [items, setItems] = React.useState([]);
-  const [selected, setSelected] = React.useState([]);
-  const [loading, setLoading] = React.useState(false);
-  const [inputQuery, setInputQuery] = React.useState("");
-  React.useEffect(() => {
-    setSelected(query?.filter?.[filter?.filter] || []);
-  }, [query]);
-  React.useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const data = await fetchItems(query, filter);
-      setItems(data);
-      setLoading(false);
-    })();
-  }, [inputQuery]);
-  return /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: "flex"
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      maxWidth: 640,
-      minWidth: 200
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(CheckboxMultiAutocomplete, {
-    id: filter?.title,
-    label: filter?.title,
-    placeholder: "Type to search\u2026",
-    items: items,
-    selectedKeys: selected,
-    onChange: (keys, selectedItems) => {
-      setSelected(keys);
-      channel.emit('filterChanged', filter, {
-        [filter.filter]: keys
-      });
-    },
-    onInputChange: text => {
-      setInputQuery(text);
-    },
-    loading: loading,
-    debounceMs: 300,
-    helperText: selected.length ? `${selected.length} selected` : ""
-  })));
-};
-
-function SingleSelect({
-  items,
-  value,
-  label,
-  onChange,
-  sx = {
-    width: '100%'
-  }
-}) {
-  // Check if the current value exists in items, otherwise use empty string
-  const validValue = items.some(itm => itm.key === value) ? value : '';
-  return /*#__PURE__*/React__namespace.default.createElement(Box__default.default, {
-    sx: sx
-  }, /*#__PURE__*/React__namespace.default.createElement(FormControl__default.default, {
-    fullWidth: true
-  }, /*#__PURE__*/React__namespace.default.createElement(InputLabel__default.default, {
-    id: "demo-simple-select-label"
-  }, label), /*#__PURE__*/React__namespace.default.createElement(Select__default.default, {
-    labelId: "demo-simple-select-label",
-    id: "demo-simple-select",
-    value: validValue,
-    label: label,
-    onChange: onChange,
-    MenuProps: {
-      style: {
-        maxHeight: '300px'
-      }
-    }
-    //   sx={{height:'40px'}}
-    ,
-    size: "small"
-  }, items.map(itm => {
-    const {
-      key,
-      value
-    } = itm;
-    return /*#__PURE__*/React__namespace.default.createElement(MenuItem__default.default, {
-      key: key,
-      value: key
-    }, value);
-  }))));
-}
-
-const ChartFilterDateRange = ({
-  filter,
-  channel,
-  query
-}) => {
-  const [items, setItems] = React.useState([]);
-  const [selected, setSelected] = React.useState("");
-  React.useEffect(() => {
-    setSelected(query?.date_range?.name);
-  }, [query]);
-  React.useEffect(() => {
-    (async () => {
-      const data = await Api.getDateRanges();
-      const items = data.filter(f => filter.allowedOptions.length > 0 ? filter.allowedOptions.some(o => o === f.name) : true).map(d => {
-        return {
-          key: d.name,
-          value: d.title
-        };
-      });
-      setItems(items);
-    })();
-  }, []);
-  return /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      minWidth: "200px",
-      maxWidth: "640px"
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(SingleSelect, {
-    items: items,
-    value: selected,
-    label: filter?.title,
-    onChange: (e, newValue) => {
-      const val = e.target.value;
-      setSelected(val);
-      channel.emit('filterChanged', filter, {
-        date_range: {
-          name: val
-        }
-      });
-    }
-  }));
-};
-
-const ChartFilters = ({
-  filters = [],
-  channel,
-  query
-}) => {
-  return /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "8px"
-    }
-  }, filters.map(f => {
-    if (f.type === 'multi-select') {
-      return /*#__PURE__*/React__namespace.default.createElement(ChartFilterMultiSelect, {
-        key: f.title,
-        channel: channel,
-        filter: f,
-        query: query
-      });
-    } else if (f.type === 'date-range') {
-      return /*#__PURE__*/React__namespace.default.createElement(ChartFilterDateRange, {
-        key: f.title,
-        channel: channel,
-        filter: f,
-        query: query
-      });
-    } else {
-      return null;
-    }
-  }));
-};
-
-var useChannel = channel => {
-  const channelRef = React__namespace.default.useRef(channel || new EventEmitter__default.default());
-  // React.useEffect(() => {
-  // }, []);
-  return channelRef.current;
-};
-
-var useFilterManager = channel => {
-  const filterRef = React__namespace.default.useState({});
-  const onFilterChanged = React__namespace.default.useCallback((entity, value) => {
-    let merged = {
-      ...filterRef.current,
-      ...value
-    };
-    filterRef.current = merged;
-    for (var field in merged) {
-      if (field !== 'date_range' && !merged[field].length) delete merged[field];
-    }
-    channel?.emit('mergedFilterChanged', {
-      value: merged
-    });
-  }, [channel]);
-  React__namespace.default.useEffect(() => {
-    channel?.on('filterChanged', onFilterChanged);
-    return () => {
-      channel?.off('filterChanged', onFilterChanged);
-    };
-  }, [channel]);
-};
-
-var Chart = ({
-  id,
-  cache,
-  dashboard,
-  channel,
-  ...props
-}) => {
-  const [chart, setChart] = React__namespace.default.useState();
-  const [report, setReport] = React__namespace.default.useState();
-  const [schema, setSchema] = React__namespace.default.useState();
-  const [source, setSource] = React__namespace.default.useState();
-  const [chartType, setChartType] = React__namespace.default.useState(Internal());
-  const [activeView, setActiveView] = React__namespace.default.useState();
-  const [activeViewIndex, setActiveViewIndex] = React__namespace.default.useState(0);
-  const [loading, setLoading] = React__namespace.default.useState(false);
-  const [filter, setFilter] = React__namespace.default.useState();
-  const [dirty, setDirty] = React__namespace.default.useState(false);
-  const filterRef = React__namespace.default.useRef({
-    value: props?.filter
-  });
-  const [currentQuery, setCurrentQuery] = React__namespace.default.useState({});
-  const {
-    ref,
-    inView,
-    entry
-  } = reactIntersectionObserver.useInView({
-    /* Optional options */
-    threshold: 0.10,
-    delay: 1000
-  });
-  const channelUsed = useChannel(channel);
-  useFilterManager(channelUsed);
-
-  // console.log(id, inView);
-
-  const init = async () => {
-    // CHART
-    const chartId = id;
-    const chartTemp = cache?.[chartId] || (await Api.getChart({
-      id: chartId
-    }));
-
-    // console.log({chartTemp});
-
-    // REPORT
-    const reportId = chartTemp.doc.source?.id;
-    const reportTemp = reportId ? cache?.[reportId] || (await Api.getReport({
-      id: reportId
-    })) : undefined;
-
-    // SCHEMA
-    const schemaTemp = cache?.[`schema_${reportId}`] || props?.schema || (await Api.getReportSchema({
-      id: reportId
-    }));
-
-    // console.log({schemaTemp});
-
-    // ACTIVE VIEW
-    const activeViewTemp = chartTemp.doc?.view?.[0];
-    setActiveViewIndex(0);
-    setReport(reportTemp);
-    setChart(chartTemp);
-    setActiveView(activeViewTemp);
-    setSchema(schemaTemp);
-    //setSchema({});
-
-    setDirty(true);
-
-    // // SOURCE
-    // if (inView) {
-    //   const sourceId = chartTemp.doc.source.id;
-    //   const sourceTemp = await Report.run(undefined, { id: sourceId });
-    //   setSource(chartTemp.doc.source.reverse ? sourceTemp.reverse() : sourceTemp);
-    // }
-  };
-  const reload = async () => {
-    setChartType(Internal(chart.doc.chart?.component, {
-      view: activeView,
-      source: source,
-      chart: chart,
-      report: report,
-      schema: schema,
-      dashboard: dashboard,
-      query: currentQuery
-    }));
-  };
-  const onViewChanged = React__namespace.default.useCallback(event => {
-    const viewIndex = event.target.value;
-    setActiveViewIndex(viewIndex);
-    setActiveView(chart.doc.view[viewIndex]);
-  }, [chart]);
-  React__namespace.default.useEffect(() => {
-    if (!id) return;
-    init().catch(error => {
-      console.error(error.message);
-    });
-  }, [id]);
-  React__namespace.default.useEffect(() => {
-    if (!chart || !source || chart?.doc?.source?.id && !report || !schema) return;
-    reload().catch(error => {
-      console.error(error.message);
-    });
-  }, [chart, source, activeView, report, schema]);
-  const loadSource = userFilter => {
-    const queryFilter = report?.doc.query.filter || {};
-    const finalFilter = {
-      ...queryFilter,
-      ...props?.filter,
-      ...userFilter?.value
-    };
-
-    // const finalFilter = {...props?.filter,...userFilter?.value };
-
-    // console.log({queryFilter,userFilter,propsFilter:props.filter,finalFilter});
-
-    const date_range = finalFilter.date_range || report?.doc.query.date_range;
-    delete finalFilter.date_range;
-    setDirty(false);
-    setFilter();
-    setLoading(true);
-    if (chart?.doc?.source?.type === 'context') {
-      setSource({
-        filter: finalFilter
-      });
-      setLoading(false);
-      return;
-    }
-    const query = {
-      filter: finalFilter,
-      date_range,
-      parameters: props?.params
-    };
-
-    //console.log('loadSource',{reportId: report.id, query});
-
-    setCurrentQuery(query);
-    Api.runReport({
-      id: report.id,
-      query
-    }).then(response => {
-      setSource(chart.doc.source.reverse ? response.reverse() : response);
-    }).catch(error => {
-      setSource([]);
-    }).finally(() => {
-      setLoading(false);
-    });
-  };
-  const onMergedFilterChanged = merged => {
-    // console.log({onMergedFilterChanged:merged});
-    filterRef.current = merged;
-    if (inView) loadSource(merged);else {
-      setFilter(merged);
-      setDirty(true);
-    }
-  };
-  React__namespace.default.useEffect(() => {
-    channelUsed?.on('mergedFilterChanged', onMergedFilterChanged);
-    return () => {
-      channelUsed?.off('mergedFilterChanged', onMergedFilterChanged);
-    };
-  }, [channelUsed, report, chart, inView]);
-  React__namespace.default.useEffect(() => {
-    if (inView && dirty) loadSource(filter);
-  }, [inView, dirty]);
-  return /*#__PURE__*/React__namespace.default.createElement(Paper__default.default, {
-    ref: ref,
-    style: {
-      margin: "4px",
-      padding: "16px",
-      flexGrow: dashboard ? undefined : 1,
-      display: "flex",
-      flexDirection: "column",
-      gap: '16px'
-    },
-    elevation: 0
-  }, /*#__PURE__*/React__namespace.default.createElement(LinearIndeterminate, {
-    style: {
-      visibility: loading ? 'visible' : 'hidden'
-    }
-  }), /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: "flex"
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement("div", null, chart && /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      lineHeight: 0
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(Typography__default.default, {
-    noWrap: true,
-    variant: "h6"
-  }, props?.title || chart.doc.name, " "))), /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), /*#__PURE__*/React__namespace.default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__namespace.default.createElement(FormControl__default$1.default, null, /*#__PURE__*/React__namespace.default.createElement(Select__default$1.default, {
-    labelId: "date-range-select-label",
-    id: "date-range-select",
-    value: activeViewIndex,
-    onChange: onViewChanged,
-    style: {
-      fontSize: "12px"
-    },
-    disableUnderline: true
-  }, chart.doc.view.map((item, index) => /*#__PURE__*/React__namespace.default.createElement(MenuItem__default$1.default, {
-    key: index,
-    value: index
-  }, item.title)))))), /*#__PURE__*/React__namespace.default.createElement("div", {
-    style: {
-      minHeight: chart?.doc?.size?.height || (dashboard ? "300px" : "0"),
-      position: "relative",
-      paddingTop: chart?.doc?.size?.vpad,
-      paddingBottom: chart?.doc?.size?.vpad,
-      flexGrow: dashboard ? undefined : 1
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(ChartFilters, {
-    filters: chart?.doc?.filters,
-    channel: channelUsed,
-    query: currentQuery
-  }), chartType));
-};
-
-function Dashboard({
-  id = "sample_dashboard",
-  auth,
-  params
-}) {
-  const [dashboard, setDashboard] = React__namespace.default.useState();
-  //const [schema, setSchema] = React.useState();
-  const [schema] = React__namespace.default.useState();
-  const [rows, setRows] = React__namespace.default.useState([]);
-  const cache = React__namespace.default.useRef({});
-  const channel = useChannel();
-  useFilterManager(channel);
-  const init = async () => {
-    Api.setAuth(auth);
-    await Api.loadDashboardMeta({
-      dashboardId: id
-    });
-
-    // get dashboard entity
-    const dashboardTemp = await Api.getDashboard({
-      id: id
-    });
-    cache.current[dashboardTemp?.id] = dashboardTemp;
-    setDashboard(dashboardTemp);
-
-    // create rows and columns
-    await create_rows_and_columns(dashboardTemp);
-  };
-  const create_rows_and_columns = async entity => {
-    const srcRows = entity?.doc?.rows || [];
-    const targetRows = [];
-    for (let i = 0; i < srcRows.length; i++) {
-      const row = srcRows[i];
-      row.columns?.forEach(column => {
-        // filter
-        if (column.override?.filter?.length) {
-          const filter = {};
-          column.override.filter.forEach(item => {
-            if (item.hasOwnProperty('value')) filter[item.field] = [item.value];
-            // else filter[item.field] = [sourceDataRow[item.field]];
-          });
-          column.filter = filter;
-        }
-      });
-      targetRows.push(row);
-    }
-    setRows(targetRows);
-  };
-  React__namespace.default.useEffect(() => {
-    if (!id) return;
-    init().catch(error => console.error(error.message));
-  }, [id]);
-  return /*#__PURE__*/React__namespace.default.createElement(Container__default.default, null, /*#__PURE__*/React__namespace.default.createElement(Grid__default.default, {
-    container: true
-  }, rows?.map((row, index) =>
-  /*#__PURE__*/
-  // hasResourceRole(row) &&
-  React__namespace.default.createElement(Grid__default.default, {
-    key: index,
-    container: true,
-    item: true
-  }, row?.columns?.map((column, index) => /*#__PURE__*/React__namespace.default.createElement(Grid__default.default, _extends({
-    key: index,
-    item: true
-  }, column.layout), /*#__PURE__*/React__namespace.default.createElement(Chart, {
-    auth: auth,
-    cache: cache.current,
-    id: column.id,
-    dashboard: dashboard,
-    schema: schema,
-    channel: null,
-    title: column.title,
-    filter: column.filter,
-    params: params
-  })))))));
-}
-
-var index = {
-  Chart,
-  Dashboard
-};
-
-exports.default = index;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@material-ui/core/Paper"),a=require("@material-ui/core/styles"),r=require("@material-ui/core/LinearProgress"),n=require("react-google-charts"),l=require("numeral"),o=require("axios"),u=require("@material-ui/core/Typography"),i=require("nunjucks"),s=require("@material-ui/core/FormControl"),d=require("@material-ui/core/Select"),c=require("@material-ui/core/MenuItem"),f=require("react-intersection-observer"),m=require("@mui/material"),p=require("@mui/icons-material/CheckBoxOutlineBlank"),h=require("@mui/icons-material/CheckBox"),y=require("@mui/material/Box"),g=require("@mui/material/InputLabel"),b=require("@mui/material/MenuItem"),v=require("@mui/material/FormControl"),E=require("@mui/material/Select"),w=require("eventemitter3"),x=require("@material-ui/core/Grid"),S=require("@material-ui/core/Container");function C(e){return e&&e.__esModule?e:{default:e}}function k(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var q=k(e),M=C(t),I=C(r),R=C(l),T=C(o),A=C(u),z=C(i),O=C(s),F=C(d),_=C(c),Y=C(p),j=C(h),P=C(y),D=C(g),B=C(b),$=C(v),W=C(E),L=C(w),V=C(x),G=C(S);function U(){return U=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)({}).hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},U.apply(null,arguments)}const H=a.makeStyles(e=>({root:{width:"100%","& > * + *":{marginTop:e.spacing(2)}}}));function K(e){const t=H();return q.default.createElement("div",U({className:t.root},e),q.default.createElement(I.default,null))}function N(e,t,a="array"){const r=e.columns,n=[...t.doc.metrics,...t.doc.dimensions].reduce((e,t)=>(e[t.name]=t,e),{});return e=>{const t="array"===a?[]:{};return r.reduce((t,r)=>{const l=e[r.name],o=n[r.name];let u=l;return u="timestamp"===o.type?new Date(l):o.format?o.format&&o.prefix?{v:+l,f:o.prefix+" "+R.default(l).format(o.format)}:o.format?{v:+l,f:R.default(l).format(o.format)}:l:l,"array"===a?t.push(u):t[r.name]=u?.f||u,t},t)}}const J="https://report-api.netcapital.pro",Q=T.default.create({baseURL:J,headers:{"Content-Type":"application/json"}}),X={},Z=()=>{const e=Object.keys(X);return e.length>0?e[0]:null},ee={setBaseUrl(e){Q.defaults.baseURL=e||J},setToken(e){e&&(Q.defaults.headers.common.Authorization=`Bearer ${e}`)},loadDashboardMeta:async({dashboardId:e})=>{const{data:t}=await Q.get(`/dashboard-meta/${e}`);return X[e]={dashboards:t.dashboards||{},charts:t.charts||{},reports:t.reports||{},reportMetadata:t.reportMetadata||{},dateRanges:t.dateRanges||[]},X[e]},getDashboard:async({id:e,dashboardId:t})=>{const a=t||Z();if(a&&X[a]?.dashboards?.[e])return X[a].dashboards[e];const{data:r}=await Q.get(`/entity/dashboards/${e}`);return r},getChart:async({id:e,dashboardId:t})=>{const a=t||Z();if(a&&X[a]?.charts?.[e])return X[a].charts[e];const{data:r}=await Q.get(`/entity/charts/${e}`);return r},getReport:async({id:e,dashboardId:t})=>{const a=t||Z();if(a&&X[a]?.reports?.[e])return X[a].reports[e];const{data:r}=await Q.get(`/entity/reports/${e}`);return r},getReportSchema:async({id:e,dashboardId:t,query:a={}})=>{const r=t||Z();if(r&&X[r]?.reportMetadata?.[e])return X[r].reportMetadata[e];const{data:n}=await Q.post(`/reports/${e}/metadata`,a);return n},runReport:async({id:e,query:t={}})=>{const{data:a}=await Q.post(`/reports/${e}/run`,t);return a},getDateRanges:async({dashboardId:e}={})=>{const t=e||Z();if(t&&X[t]?.dateRanges)return X[t].dateRanges;const{data:a}=await Q.get("/globals/date-ranges");return a}},te=a.makeStyles(e=>({headerRow:{fontFamily:e.typography.fontFamily,fontSize:e.typography.fontSize},tableRow:{fontFamily:e.typography.fontFamily,fontSize:e.typography.fontSize},oddTableRow:{fontFamily:e.typography.fontFamily,fontSize:e.typography.fontSize},headerCell:{backgroundColor:"white",padding:"4px !important"}})),ae={none:"YYYY-MM-dd",day:"MMM dd",week:"MMM dd",month:"YYYY MMM",year:"YYYY"};const re={GoogleChart:function({chart:t,source:a,view:r,report:l,schema:o,dashboard:u,query:i}){const[s,d]=q.default.useState([]),c=te(),[f,m]=q.default.useState([]);e.useEffect(()=>{(async()=>{const e=await ee.getDateRanges();m(e)})()},[]);const p=e.useMemo(()=>{const e="YYYY-MM-dd",t=i?.date_range?.name,a=f.find(e=>e.name===t);if(!a)return e;return ae[a?.granularity]||e},[f,i]);return q.default.useEffect(()=>{if(!(t&&r&&a&&l&&o))return;let e=[];e.push(function(e,t){const a=[...t.doc.metrics,...t.doc.dimensions];return e.columns.reduce((e,t)=>{const r=a.find(e=>e.name===t.name)||t;return e.push(r.title||r.name),e},[])}(r,o));const n=N(r,o);a?.forEach(t=>{const a=n(t);e.push(a)}),a?.length?d(e):d()},[t,a,r,l,o]),s?q.default.createElement(n.Chart,U({width:t?.doc.size?.width||"100%",height:u?t?.doc.size?.height||"300px":"100%",chartType:t?.doc.chart?.type,data:s,options:(e=>{if("Table"===t?.doc.chart?.type)return{...t?.doc.chart?.options,cssClassNames:c};if("AreaChart"===t?.doc.chart?.type){const a=t?.doc.chart?.options?.hAxis||{},r={...{ticks:e.slice(1).map(e=>e[0]),format:p},...a};return{...t?.doc.chart?.options,hAxis:r,focusTarget:"category"}}return t?.doc.chart?.options})(s)},t?.doc.chart?.props)):q.default.createElement("div",null)},LabelChart:function({chart:e,source:t,view:a,report:r,schema:n}){const[l,o]=q.default.useState([]),[u,i]=q.default.useState(),[s,d]=q.default.useState();return q.default.useEffect(()=>{if(!(e&&a&&t&&r&&n))return;let l=[];const u=N(a,n);t.forEach(e=>l.push(u(e))),o(l);const s=e?.doc?.chart?.options||{},c=s?.index||0;if(l.length>0&&i(l[0][c]),s.subText?.format){z.default.configure({autoescape:!1});const e=N(a,n,"object")(t[0]),r=z.default.renderString(s.subText?.format,e);d(r)}},[e,t,a,r,n]),q.default.createElement("div",{style:{display:"flex",justifyContent:"center",alignContent:"center",alignItems:"center",height:"100%",flexDirection:"column"}},q.default.createElement(A.default,{variant:"h6"},u?.f||u),q.default.createElement(A.default,{variant:"subtitle1"},s))}};function ne(e,t){return void 0!==re[e]?q.default.createElement(re[e],t):q.default.createElement(K,t)}const le=q.createElement(Y.default,{fontSize:"small"}),oe=q.createElement(j.default,{fontSize:"small"});function ue({items:t,selectedKeys:a,defaultSelectedKeys:r,onChange:n,inputValue:l,defaultInputValue:o,onInputChange:u,debounceMs:i=300,label:s,placeholder:d,loading:c,disabled:f,size:p="small",error:h,helperText:y,limitTags:g=3,disableClearable:b,id:v,textFieldProps:E}){const w=e.useMemo(()=>Array.isArray(t)?t:[],[t]),x=Array.isArray(a),[S,C]=e.useState(Array.isArray(r)?r:[]),k=x?a:S,M=e.useMemo(()=>{const e=new Map;for(const t of w)e.set(t&&t.key,t);return e},[w]),I=e.useMemo(()=>(Array.isArray(k)?k:[]).map(e=>M.get(e)).filter(Boolean),[k,M]),R="string"==typeof l,[T,A]=e.useState("string"==typeof o?o:""),z=R?l:T,O=function(t,a=300){const r=e.useRef(t),n=e.useRef(null);return r.current=t,e.useEffect(()=>()=>{n.current&&window.clearTimeout(n.current)},[]),q.useCallback((...e)=>{r.current&&(n.current&&window.clearTimeout(n.current),n.current=window.setTimeout(()=>{r.current&&r.current(...e)},a))},[a])}(e=>{u&&u(e)},i),F=I;return q.createElement(m.FormControl,{fullWidth:!0,error:h,disabled:f},q.createElement(m.Autocomplete,{openOnFocus:!0,forcePopupIcon:!0,id:v,multiple:!0,disableCloseOnSelect:!0,options:w,value:F,inputValue:z,getOptionLabel:e=>e&&"object"==typeof e?e.value??"":"",isOptionEqualToValue:(e,t)=>e&&t&&e.key===t.key,loading:c,limitTags:g,disableClearable:b,onChange:(e,t)=>{const a=Array.isArray(t)?t.map(e=>e&&e.key):[];x||C(a),n&&n(a,Array.isArray(t)?t:[])},onInputChange:(e,t,a)=>{R||A(t??""),"input"===a?O(t??""):"clear"===a&&O("")},renderOption:(e,t,{selected:a})=>q.createElement("li",U({},e,{key:t&&t.key||Math.random().toString(36)}),q.createElement(m.Checkbox,{icon:le,checkedIcon:oe,style:{marginRight:8},checked:!!a}),t&&t.value),renderTags:(e,t)=>(Array.isArray(e)?e:[]).map((e,a)=>q.createElement(m.Chip,U({},t({index:a}),{key:e&&e.key||a,label:e&&e.value||""}))),renderInput:e=>q.createElement(m.TextField,U({},e,{label:s,placeholder:d,InputProps:{...e.InputProps,endAdornment:q.createElement(q.Fragment,null,c?q.createElement(m.CircularProgress,{size:18}):null,e.InputProps.endAdornment)},size:p},E))}),y?q.createElement(m.FormHelperText,null,y):null)}const ie=({filter:t,channel:a,query:r})=>{const[n,l]=e.useState([]),[o,u]=e.useState([]),[i,s]=e.useState(!1),[d,c]=e.useState("");return e.useEffect(()=>{u(r?.filter?.[t?.filter]||[])},[r]),e.useEffect(()=>{(async()=>{s(!0);const e=await async function(e,t){return t?.source?(await ee.runReport({id:t.source})).map(e=>({key:e[t.field],value:e[t.field]})):[]}(0,t);l(e),s(!1)})()},[d]),q.default.createElement("div",{style:{display:"flex"}},q.default.createElement("div",{style:{maxWidth:640,minWidth:200}},q.default.createElement(ue,{id:t?.title,label:t?.title,placeholder:"Type to search…",items:n,selectedKeys:o,onChange:(e,r)=>{u(e),a.emit("filterChanged",t,{[t.filter]:e})},onInputChange:e=>{c(e)},loading:i,debounceMs:300,helperText:o.length?`${o.length} selected`:""})))};function se({items:e,value:t,label:a,onChange:r,sx:n={width:"100%"}}){const l=e.some(e=>e.key===t)?t:"";return q.default.createElement(P.default,{sx:n},q.default.createElement($.default,{fullWidth:!0},q.default.createElement(D.default,{id:"demo-simple-select-label"},a),q.default.createElement(W.default,{labelId:"demo-simple-select-label",id:"demo-simple-select",value:l,label:a,onChange:r,MenuProps:{style:{maxHeight:"300px"}},size:"small"},e.map(e=>{const{key:t,value:a}=e;return q.default.createElement(B.default,{key:t,value:t},a)}))))}const de=({filter:t,channel:a,query:r})=>{const[n,l]=e.useState([]),[o,u]=e.useState("");return e.useEffect(()=>{u(r?.date_range?.name)},[r]),e.useEffect(()=>{(async()=>{const e=(await ee.getDateRanges()).filter(e=>!(t.allowedOptions.length>0)||t.allowedOptions.some(t=>t===e.name)).map(e=>({key:e.name,value:e.title}));l(e)})()},[]),q.default.createElement("div",{style:{minWidth:"200px",maxWidth:"640px"}},q.default.createElement(se,{items:n,value:o,label:t?.title,onChange:(e,r)=>{const n=e.target.value;u(n),a.emit("filterChanged",t,{date_range:{name:n}})}}))},ce=({filters:e=[],channel:t,query:a})=>q.default.createElement("div",{style:{display:"flex",flexWrap:"wrap",gap:"8px"}},e.map(e=>"multi-select"===e.type?q.default.createElement(ie,{key:e.title,channel:t,filter:e,query:a}):"date-range"===e.type?q.default.createElement(de,{key:e.title,channel:t,filter:e,query:a}):null));var fe=e=>q.default.useRef(e||new L.default).current,me=e=>{const t=q.default.useState({}),a=q.default.useCallback((a,r)=>{let n={...t.current,...r};for(var l in t.current=n,n)"date_range"===l||n[l].length||delete n[l];e?.emit("mergedFilterChanged",{value:n})},[e]);q.default.useEffect(()=>(e?.on("filterChanged",a),()=>{e?.off("filterChanged",a)}),[e])},pe=({id:e,cache:t,dashboard:a,channel:r,...n})=>{const[l,o]=q.default.useState(),[u,i]=q.default.useState(),[s,d]=q.default.useState(),[c,m]=q.default.useState(),[p,h]=q.default.useState(ne()),[y,g]=q.default.useState(),[b,v]=q.default.useState(0),[E,w]=q.default.useState(!1),[x,S]=q.default.useState(),[C,k]=q.default.useState(!1),I=q.default.useRef({value:n?.filter}),[R,T]=q.default.useState({}),{ref:z,inView:Y,entry:j}=f.useInView({threshold:.1,delay:1e3}),P=fe(r);me(P);const D=q.default.useCallback(e=>{const t=e.target.value;v(t),g(l.doc.view[t])},[l]);q.default.useEffect(()=>{e&&(async()=>{const a=e,r=t?.[a]||await ee.getChart({id:a}),l=r.doc.source?.id,u=l?t?.[l]||await ee.getReport({id:l}):void 0,s=t?.[`schema_${l}`]||n?.schema||await ee.getReportSchema({id:l}),c=r.doc?.view?.[0];v(0),i(u),o(r),g(c),d(s),k(!0)})().catch(e=>{console.error(e.message)})},[e]),q.default.useEffect(()=>{l&&c&&(!l?.doc?.source?.id||u)&&s&&(async()=>{h(ne(l.doc.chart?.component,{view:y,source:c,chart:l,report:u,schema:s,dashboard:a,query:R}))})().catch(e=>{console.error(e.message)})},[l,c,y,u,s]);const B=e=>{const t={...u?.doc.query.filter||{},...n?.filter,...e?.value},a=t.date_range||u?.doc.query.date_range;if(delete t.date_range,k(!1),S(),w(!0),"context"===l?.doc?.source?.type)return m({filter:t}),void w(!1);const r={filter:t,date_range:a,parameters:n?.params};T(r),ee.runReport({id:u.id,query:r}).then(e=>{m(l.doc.source.reverse?e.reverse():e)}).catch(e=>{m([])}).finally(()=>{w(!1)})},$=e=>{I.current=e,Y?B(e):(S(e),k(!0))};return q.default.useEffect(()=>(P?.on("mergedFilterChanged",$),()=>{P?.off("mergedFilterChanged",$)}),[P,u,l,Y]),q.default.useEffect(()=>{Y&&C&&B(x)},[Y,C]),q.default.createElement(M.default,{ref:z,style:{margin:"4px",padding:"16px",flexGrow:a?void 0:1,display:"flex",flexDirection:"column",gap:"16px"},elevation:0},q.default.createElement(K,{style:{visibility:E?"visible":"hidden"}}),q.default.createElement("div",{style:{display:"flex"}},q.default.createElement("div",null,l&&q.default.createElement("div",{style:{display:"flex",alignItems:"center",lineHeight:0}},q.default.createElement(A.default,{noWrap:!0,variant:"h6"},n?.title||l.doc.name," "))),q.default.createElement("div",{style:{flexGrow:1}}),q.default.createElement("div",null,l?.doc?.view?.length>1&&q.default.createElement(O.default,null,q.default.createElement(F.default,{labelId:"date-range-select-label",id:"date-range-select",value:b,onChange:D,style:{fontSize:"12px"},disableUnderline:!0},l.doc.view.map((e,t)=>q.default.createElement(_.default,{key:t,value:t},e.title)))))),q.default.createElement("div",{style:{minHeight:l?.doc?.size?.height||(a?"300px":"0"),position:"relative",paddingTop:l?.doc?.size?.vpad,paddingBottom:l?.doc?.size?.vpad,flexGrow:a?void 0:1}},q.default.createElement(ce,{filters:l?.doc?.filters,channel:P,query:R}),p))};var he={Chart:pe,Dashboard:function({id:e="sample_dashboard",token:t,params:a,base_url:r}){const[n,l]=q.default.useState(),[o]=q.default.useState(),[u,i]=q.default.useState([]),s=q.default.useRef({}),d=fe();me(d);const c=async e=>{const t=e?.doc?.rows||[],a=[];for(let e=0;e<t.length;e++){const r=t[e];r.columns?.forEach(e=>{if(e.override?.filter?.length){const t={};e.override.filter.forEach(e=>{e.hasOwnProperty("value")&&(t[e.field]=[e.value])}),e.filter=t}}),a.push(r)}i(a)};return q.default.useEffect(()=>{e&&(async()=>{ee.setBaseUrl(r),ee.setToken(t),await ee.loadDashboardMeta({dashboardId:e});const a=await ee.getDashboard({id:e});s.current[a?.id]=a,l(a),await c(a)})().catch(e=>console.error(e.message))},[e]),q.default.createElement(G.default,null,q.default.createElement(V.default,{container:!0},u?.map((e,r)=>q.default.createElement(V.default,{key:r,container:!0,item:!0},e?.columns?.map((e,r)=>q.default.createElement(V.default,U({key:r,item:!0},e.layout),q.default.createElement(pe,{token:t,cache:s.current,id:e.id,dashboard:n,schema:o,channel:null,title:e.title,filter:e.filter,params:a})))))))}};exports.default=he;