@bygd/nc-report-ui 0.1.31 → 0.1.32

package/dist/default/esm/index.js

@@ -175,6 +175,9 @@ const Api = {
       reportMetadata: data.reportMetadata || {},
       dateRanges: data.dateRanges || []
     };
+    console.log({
+      dashboardMeta: dashboardMetaCache[dashboardId]
+    });
     return dashboardMetaCache[dashboardId];
   },
   getDashboard: async ({
@@ -757,7 +760,10 @@ function CheckboxMultiAutocomplete({
 async function fetchItems(query, filter) {
   if (!filter?.source) return [];
   const data = await Api.runReport({
-    id: filter.source
+    id: filter.source,
+    query: {
+      parameters: query?.parameters || {}
+    }
   });
   return data.map(d => {
     const m = {
@@ -772,13 +778,22 @@ const ChartFilterMultiSelect = ({
   channel,
   query
 }) => {
+  const selectionsFromQuery = query?.filter?.and?.find(f => !!f[filter?.filter])?.[filter?.filter] || [];
   const [items, setItems] = useState([]);
-  const [selected, setSelected] = useState([]);
+  const [selected, setSelected] = useState(selectionsFromQuery);
   const [loading, setLoading] = useState(false);
   const [inputQuery, setInputQuery] = useState("");
-  useEffect(() => {
-    setSelected(query?.filter?.[filter?.filter] || []);
-  }, [query]);
+
+  // useEffect(()=>{
+  //   console.log({ChartFilterMultiSelect:{filter,query}})
+  // },[filter,query])
+
+  // useEffect(() => {
+
+  //   setSelected(selectionsFromQuery);
+
+  // }, [query]);
+
   useEffect(() => {
     (async () => {
       setLoading(true);
@@ -985,27 +1000,45 @@ var useChannel = channel => {
   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]);
+// const store = {merged:{}}
+
+function useMergedFilter(channel) {
+  const mergedRef = React__default.useRef({});
   React__default.useEffect(() => {
-    channel?.on('filterChanged', onFilterChanged);
+    if (!channel) return;
+    const onFilterChanged = function (entity, value) {
+      const merged = {
+        // ...store.merged,
+        ...mergedRef.current,
+        ...value
+      };
+
+      // store.merged = merged;
+      mergedRef.current = merged;
+      channel.emit("mergedFilterChanged", {
+        value: merged
+      });
+    };
+    channel.on("filterChanged", onFilterChanged);
     return () => {
-      channel?.off('filterChanged', onFilterChanged);
+      channel.off("filterChanged", onFilterChanged);
     };
   }, [channel]);
+}
+
+const ConfigContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * useConfig - Hook to access the config inside any child component.
+ *
+ * @returns {Object} The config object from config.json
+ *
+ * @example
+ * const config = useConfig();
+ * console.log(config.base_url);
+ */
+const useConfig = () => {
+  return useContext(ConfigContext);
 };
 
 var Chart = ({
@@ -1029,6 +1062,18 @@ var Chart = ({
     value: props?.filter
   });
   const [currentQuery, setCurrentQuery] = React__default.useState({});
+
+  // sample label 
+  // if(id!=='financing_applications') return null;
+  // sample pie 
+  // if(id!=='overdue_order_ranges') return null;
+  // sample table (invoiced_and_financed)
+  //if(id!=='invoiced_and_financed') return null;
+  // sample table (double filter test based on invoiced_and_financed)
+  //if(id!=='double_filter_test') return null;
+
+  const config = useConfig();
+  if (config && config.mode === 'chart' && config.chart && id !== config.chart) return null;
   const {
     ref,
     inView,
@@ -1039,7 +1084,7 @@ var Chart = ({
     delay: 1000
   });
   const channelUsed = useChannel(channel);
-  useFilterManager(channelUsed);
+  useMergedFilter(channelUsed);
 
   // console.log(id, inView);
 
@@ -1113,18 +1158,31 @@ var Chart = ({
   }, [chart, source, activeView, report, schema]);
   const loadSource = userFilter => {
     const queryFilter = report?.doc.query.filter || {};
+
+    // const finalFilter = {
+    //   ...queryFilter,
+    //   ...props?.filter,
+    //   ...userFilter?.value,
+    // };
+
+    const uf_date_range = userFilter?.value?.date_range;
+    const date_range = uf_date_range || report?.doc.query.date_range;
     const finalFilter = {
-      ...queryFilter,
-      ...props?.filter,
-      ...userFilter?.value
+      and: [...(queryFilter.and || []), ...Object.entries(props?.filter || {}).map(([key, value]) => ({
+        [key]: value
+      })), ...Object.entries(userFilter?.value || {}).map(([key, value]) => ({
+        [key]: value
+      })).filter(f => !f.date_range)]
     };
 
     // 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;
+    //const date_range = finalFilter.date_range || report?.doc.query.date_range;
+
+    //delete finalFilter.date_range;
+
     setDirty(false);
     setFilter();
     setLoading(true);
@@ -1144,6 +1202,9 @@ var Chart = ({
     //console.log('loadSource',{reportId: report.id, query});
 
     setCurrentQuery(query);
+
+    // console.log({queryRunning:query});
+
     Api.runReport({
       id: report.id,
       query
@@ -1170,6 +1231,11 @@ var Chart = ({
     };
   }, [channelUsed, report, chart, inView]);
   React__default.useEffect(() => {
+    console.log('loadSource, inView,dirty', {
+      filter,
+      inView,
+      dirty
+    });
     if (inView && dirty) loadSource(filter);
   }, [inView, dirty]);
   React__default.useEffect(() => {
@@ -1344,17 +1410,12 @@ function Dashboard({
   const [schema] = React__default.useState();
   const [rows, setRows] = React__default.useState([]);
   const cache = React__default.useRef({});
-  const channel = useChannel();
-  useFilterManager(channel);
-  console.log({
-    rows
-  }, {
-    dashboard
-  }, {
-    schema
-  }, {
-    params: finalParams
-  });
+  // const channel = useChannel();
+
+  // useFilterManager(channel);
+
+  // console.log({ rows }, { dashboard }, { schema }, { params: finalParams });
+
   useEffect(() => {
     // console.log('token changed',finalApi);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bygd/nc-report-ui",
-	"version": "0.1.31",
+	"version": "0.1.32",
 	"files": [
 		"dist/*",
 		"fnet/input.yaml",

package/dist/app/esm/index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@bygd/nc-report-ui</title>
-  </head>
-  <body style="height: 100vh; margin: 0; padding: 0; background-color: #eeeeee">
-    <div id="container" style="height: 100%"></div>
-
-    <script type="module">
-      import { createApp } from "./index.js";
-      const run = createApp({
-        container: document.getElementById("container"),
-      });
-
-      const dispose = run();
-    </script>
-  </body>
-</html>