@bygd/nc-report-ui 0.1.4 → 0.1.6

package/dist/default/esm/index.js

@@ -1,1010 +0,0 @@
-import * as React from 'react';
-import React__default, { useEffect, useMemo, useState, useRef } from 'react';
-import Paper from '@material-ui/core/Paper';
-import { makeStyles } from '@material-ui/core/styles';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import { Chart as Chart$1 } from 'react-google-charts';
-import numeral from 'numeral';
-import axios from 'axios';
-import Typography from '@material-ui/core/Typography';
-import nunjucks from 'nunjucks';
-import FormControl$2 from '@material-ui/core/FormControl';
-import Select$1 from '@material-ui/core/Select';
-import MenuItem$1 from '@material-ui/core/MenuItem';
-import { useInView } from 'react-intersection-observer';
-import { CronJob } from 'cron';
-import { FormControl, Autocomplete, TextField, CircularProgress, Chip, Checkbox, FormHelperText } from '@mui/material';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import Box from '@mui/material/Box';
-import InputLabel from '@mui/material/InputLabel';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl$1 from '@mui/material/FormControl';
-import Select from '@mui/material/Select';
-import EventEmitter from 'eventemitter3';
-import Grid from '@material-ui/core/Grid';
-import Container from '@material-ui/core/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 = makeStyles(theme => ({
-  root: {
-    width: '100%',
-    '& > * + *': {
-      marginTop: theme.spacing(2)
-    }
-  }
-}));
-function LinearIndeterminate(props) {
-  const classes = useStyles$1();
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: classes.root
-  }, props), /*#__PURE__*/React__default.createElement(LinearProgress, 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(value).format(ref.format)
-      };else if (ref.format) formatted = {
-        v: +value,
-        f: numeral(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.create({
-  baseURL: BASE_URL,
-  headers: {
-    'Content-Type': 'application/json'
-  }
-});
-const Api = {
-  getDashboard: async ({
-    id
-  }) => {
-    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
-   * @returns {Promise} Axios response promise
-   */
-  getChart: async ({
-    id
-  }) => {
-    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
-   * @returns {Promise} Axios response promise
-   */
-  getReport: async ({
-    id
-  }) => {
-    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
-   * @returns {Promise} Axios response promise
-   */
-  getReportSchema: async ({
-    id,
-    query = {}
-  }) => {
-    // 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 () => {
-    const {
-      data
-    } = await apiClient.get(`/globals/date-ranges`);
-    return data;
-  }
-};
-
-const useStyles = 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__default.useState([]);
-  const classes = useStyles();
-  const [dateRanges, setDateRanges] = React__default.useState([]);
-  useEffect(() => {
-    (async () => {
-      const data = await Api.getDateRanges();
-      setDateRanges(data);
-    })();
-  }, []);
-  const dateRangeFormat = 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__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__default.createElement(Chart$1, _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__default.createElement("div", null);
-}
-
-function LabelChart({
-  chart,
-  source,
-  view,
-  report,
-  schema
-}) {
-  const [data, setData] = React__default.useState([]);
-  const [value, setValue] = React__default.useState();
-  const [subText, setSubText] = React__default.useState();
-  React__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.configure({
-        autoescape: false
-      });
-      const valuePickerObj = ValuePicker(view, schema, 'object');
-      const val = valuePickerObj(source[0]);
-      const subTextRendered = nunjucks.renderString(options.subText?.format, val);
-      setSubText(subTextRendered);
-    }
-  }, [chart, source, view, report, schema]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "center",
-      alignContent: "center",
-      alignItems: "center",
-      height: "100%",
-      flexDirection: "column"
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "h6"
-  }, value?.f || value), /*#__PURE__*/React__default.createElement(Typography, {
-    variant: "subtitle1"
-  }, subText));
-}
-
-const Components = {
-  GoogleChart,
-  LabelChart
-};
-function Internal(name, props) {
-  if (typeof Components[name] !== "undefined") {
-    return /*#__PURE__*/React__default.createElement(Components[name], props);
-  } else return /*#__PURE__*/React__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 = useRef(fn);
-  const timer = useRef(null);
-  fnRef.current = fn;
-  useEffect(() => () => {
-    if (timer.current) window.clearTimeout(timer.current);
-  }, []);
-  return React.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.createElement(CheckBoxOutlineBlankIcon, {
-  fontSize: "small"
-});
-const checkedIcon = /*#__PURE__*/React.createElement(CheckBoxIcon, {
-  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 = useMemo(() => Array.isArray(items) ? items : [], [items]);
-
-  // Controlled/uncontrolled selection
-  const isSelectionControlled = Array.isArray(selectedKeys);
-  const [innerKeys, setInnerKeys] = useState(Array.isArray(defaultSelectedKeys) ? defaultSelectedKeys : []);
-  const currentKeys = isSelectionControlled ? selectedKeys : innerKeys;
-
-  // Map lookups for efficiency
-  const byKey = useMemo(() => {
-    const m = new Map();
-    for (const it of safeItems) m.set(it && it.key, it);
-    return m;
-  }, [safeItems]);
-  const selectedItems = 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] = 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.createElement(FormControl, {
-    fullWidth: true,
-    error: error,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(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.createElement("li", _extends({}, props, {
-      key: option && option.key || Math.random().toString(36)
-    }), /*#__PURE__*/React.createElement(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.createElement(Chip, _extends({}, getTagProps({
-      index
-    }), {
-      key: option && option.key || index,
-      label: option && option.value || ""
-    }))),
-    renderInput: params => /*#__PURE__*/React.createElement(TextField, _extends({}, params, {
-      label: label,
-      placeholder: placeholder,
-      InputProps: {
-        ...params.InputProps,
-        endAdornment: /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(CircularProgress, {
-          size: 18
-        }) : null, params.InputProps.endAdornment)
-      },
-      size: size
-    }, textFieldProps))
-  }), helperText ? /*#__PURE__*/React.createElement(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] = useState([]);
-  const [selected, setSelected] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [inputQuery, setInputQuery] = useState("");
-  useEffect(() => {
-    setSelected(query?.filter?.[filter?.filter] || []);
-  }, [query]);
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const data = await fetchItems(query, filter);
-      setItems(data);
-      setLoading(false);
-    })();
-  }, [inputQuery]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: "flex"
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      maxWidth: 640,
-      minWidth: 200
-    }
-  }, /*#__PURE__*/React__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__default.createElement(Box, {
-    sx: sx
-  }, /*#__PURE__*/React__default.createElement(FormControl$1, {
-    fullWidth: true
-  }, /*#__PURE__*/React__default.createElement(InputLabel, {
-    id: "demo-simple-select-label"
-  }, label), /*#__PURE__*/React__default.createElement(Select, {
-    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__default.createElement(MenuItem, {
-      key: key,
-      value: key
-    }, value);
-  }))));
-}
-
-const ChartFilterDateRange = ({
-  filter,
-  channel,
-  query
-}) => {
-  const [items, setItems] = useState([]);
-  const [selected, setSelected] = useState("");
-  useEffect(() => {
-    setSelected(query?.date_range?.name);
-  }, [query]);
-  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__default.createElement("div", {
-    style: {
-      minWidth: "200px",
-      maxWidth: "640px"
-    }
-  }, /*#__PURE__*/React__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__default.createElement("div", {
-    style: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "8px"
-    }
-  }, filters.map(f => {
-    if (f.type === 'multi-select') {
-      return /*#__PURE__*/React__default.createElement(ChartFilterMultiSelect, {
-        key: f.title,
-        channel: channel,
-        filter: f,
-        query: query
-      });
-    } else if (f.type === 'date-range') {
-      return /*#__PURE__*/React__default.createElement(ChartFilterDateRange, {
-        key: f.title,
-        channel: channel,
-        filter: f,
-        query: query
-      });
-    } else {
-      return null;
-    }
-  }));
-};
-
-var useChannel = channel => {
-  const channelRef = React__default.useRef(channel || new EventEmitter());
-  // React.useEffect(() => {
-  // }, []);
-  return channelRef.current;
-};
-
-var useFilterManager = channel => {
-  const filterRef = React__default.useState({});
-  const onFilterChanged = React__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__default.useEffect(() => {
-    channel?.on('filterChanged', onFilterChanged);
-    return () => {
-      channel?.off('filterChanged', onFilterChanged);
-    };
-  }, [channel]);
-};
-
-var Chart = ({
-  id,
-  cache,
-  dashboard,
-  channel,
-  ...props
-}) => {
-  const [chart, setChart] = React__default.useState();
-  const [report, setReport] = React__default.useState();
-  const [schema, setSchema] = React__default.useState();
-  const [source, setSource] = React__default.useState();
-  const [chartType, setChartType] = React__default.useState(Internal());
-  const [activeView, setActiveView] = React__default.useState();
-  const [activeViewIndex, setActiveViewIndex] = React__default.useState(0);
-  const [loading, setLoading] = React__default.useState(false);
-  const [filter, setFilter] = React__default.useState();
-  const [dirty, setDirty] = React__default.useState(false);
-  const filterRef = React__default.useRef({
-    value: props?.filter
-  });
-  const [currentQuery, setCurrentQuery] = React__default.useState({});
-  const {
-    ref,
-    inView,
-    entry
-  } = 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__default.useCallback(event => {
-    const viewIndex = event.target.value;
-    setActiveViewIndex(viewIndex);
-    setActiveView(chart.doc.view[viewIndex]);
-  }, [chart]);
-  React__default.useEffect(() => {
-    let cron;
-    if (chart?.doc?.refresh?.enabled === true) {
-      cron = new CronJob(chart.doc.refresh.cron, () => {
-        if (inView) {
-          loadSource(filterRef.current);
-        }
-      });
-      cron.start();
-    }
-    return () => {
-      cron && cron.stop();
-    };
-  }, [chart, inView]);
-  React__default.useEffect(() => {
-    if (!id) return;
-    init().catch(error => {
-      console.error(error.message);
-    });
-  }, [id]);
-  React__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__default.useEffect(() => {
-    channelUsed?.on('mergedFilterChanged', onMergedFilterChanged);
-    return () => {
-      channelUsed?.off('mergedFilterChanged', onMergedFilterChanged);
-    };
-  }, [channelUsed, report, chart, inView]);
-  React__default.useEffect(() => {
-    if (inView && dirty) loadSource(filter);
-  }, [inView, dirty]);
-  return /*#__PURE__*/React__default.createElement(Paper, {
-    ref: ref,
-    style: {
-      margin: "4px",
-      padding: "16px",
-      flexGrow: dashboard ? undefined : 1,
-      display: "flex",
-      flexDirection: "column",
-      gap: '16px'
-    },
-    elevation: 0
-  }, /*#__PURE__*/React__default.createElement(LinearIndeterminate, {
-    style: {
-      visibility: loading ? 'visible' : 'hidden'
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: "flex"
-    }
-  }, /*#__PURE__*/React__default.createElement("div", null, chart && /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      lineHeight: 0
-    }
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    noWrap: true,
-    variant: "h6"
-  }, props?.title || chart.doc.name, " "))), /*#__PURE__*/React__default.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }), /*#__PURE__*/React__default.createElement("div", null, chart?.doc?.view?.length > 1 && /*#__PURE__*/React__default.createElement(FormControl$2, null, /*#__PURE__*/React__default.createElement(Select$1, {
-    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__default.createElement(MenuItem$1, {
-    key: index,
-    value: index
-  }, item.title)))))), /*#__PURE__*/React__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__default.createElement(ChartFilters, {
-    filters: chart?.doc?.filters,
-    channel: channelUsed,
-    query: currentQuery
-  }), chartType));
-};
-
-function Dashboard({
-  id,
-  auth,
-  params
-}) {
-  const [dashboard, setDashboard] = React__default.useState();
-  //const [schema, setSchema] = React.useState();
-  const [schema] = React__default.useState();
-  const [rows, setRows] = React__default.useState([]);
-  const cache = React__default.useRef({});
-  const channel = useChannel();
-  useFilterManager(channel);
-  const init = async () => {
-    // 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__default.useEffect(() => {
-    if (!id) return;
-    init().catch(error => console.error(error.message));
-  }, [id]);
-  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true
-  }, rows?.map((row, index) =>
-  /*#__PURE__*/
-  // hasResourceRole(row) &&
-  React__default.createElement(Grid, {
-    key: index,
-    container: true,
-    item: true
-  }, row?.columns?.map((column, index) => /*#__PURE__*/React__default.createElement(Grid, _extends({
-    key: index,
-    item: true
-  }, column.layout), /*#__PURE__*/React__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
-};
-
-export { index as default };