@bygd/nc-report-ui 0.1.6 → 0.1.8

package/dist/default/esm/index.js

@@ -0,0 +1,1012 @@
+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 { 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.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 };