blixify-ui-web-mcp 0.1.2 → 0.1.3

package/lib/components/chat/chatDashboard/README.md

@@ -4,7 +4,7 @@
 
 <hr>
 
-Chat Dashboard
+A two-panel chat layout with a scrollable conversation list on the left and a `ChatBase` chat window on the right. On mobile, the two panels toggle — the list hides when a conversation is selected and reappears when the user navigates back. The conversation list is sorted and updated automatically as new messages are sent.
 
 ##### Import
 
@@ -16,146 +16,104 @@ import { ChatDashboard } from "blixify-ui-web/components/chat/chatDashboard";
 
 ```jsx
 const [message, setMessage] = useState("");
-const [search, setSearch] = useState("");
-const [isLoading, setIsLoading] = useState(false);
+const [conversation, setConversation] = useState<Conversation>(conversationList[0]);
+const [conversationList, setConversationList] = useState<Conversation[]>(seedList);
 const [mobileSelectedChat, setMobileSelectedChat] = useState(false);
-const [filteredConversation, setFilteredConversation] =
-  useState<Conversation | null>();
-const [conversation, setConversation] = useState<Conversation>({
-  id: "",
-  members: [],
-  messageList: [],
-});
-const [conversationList, setConversationList] = useState<Conversation[]>([]);
-
-const handleOnSendMessage = (conversation: Conversation) => {
-  setConversation({
-    id: conversation.id,
-    members: [...conversation.members],
-    messageList: [...conversation.messageList],
-  });
-  setMessage("");
-  const dupConvoList = conversationList.map((eachConvo, i) => {
-    if (eachConvo.id === conversation.id) {
-      return conversation;
-    }
-    return eachConvo;
-  });
-
-  handleSortConvoList(dupConvoList);
-};
-
-const handleSortConvoList = (convoList: Conversation[]) => {
-  const sortedConvoList = convoList.sort((a, b) => {
-    return moment(b.messageList[b.messageList.length - 1].createdAt).diff(
-      moment(a.messageList[a.messageList.length - 1].createdAt)
-    );
-  });
-  setConversationList(sortedConvoList);
-  setConversation(sortedConvoList[0]);
-};
 
-const handleMessageList = (id: string) => {
-  setIsLoading(true);
+const handleSelectConversation = (id: string) => {
   setMobileSelectedChat(true);
-  setTimeout(() => {
-    setIsLoading(false);
-    conversationList.map((eachConversation) => {
-      if (eachConversation.id === id) {
-        setConversation(eachConversation);
-      }
-      return null;
-    });
-  }, 1000);
+  const found = conversationList.find((c) => c.id === id);
+  if (found) setConversation(found);
 };
 
-const handleOnSearch = (searchMessage: string) => {
-  if (searchMessage.length === 0) {
-    setSearch("");
-    setFilteredConversation(null);
-  } else {
-    const dupMessageList = conversation.messageList.filter((eachMessage) => {
-      return eachMessage.messageBody
-        .toLowerCase()
-        .includes(searchMessage.toLowerCase());
-    });
-    const dupConversation = {
-      id: conversation.id,
-      members: [...conversation.members],
-      messageList: [...dupMessageList],
-    };
-    setFilteredConversation(dupConversation);
-  }
+const handleSendMessage = (updated: Conversation) => {
+  setConversation(updated);
+  setMessage("");
+  setConversationList((prev) =>
+    prev.map((c) => (c.id === updated.id ? updated : c))
+  );
 };
 
-return (
-  <ChatDashboard
-    value={message}
-    searchMessage={search}
-    currentUser={currentUser}
-    selectedConversation={filteredConversation ?? conversation}
-    conversationList={conversationList}
-    mobileSelectedChat={mobileSelectedChat}
-    sizeClassName="w-full h-[50vh] sm:h-[50vh]"
-    chatBaseSizeClassName="w-full h-[50vh] sm:h-[50vh]"
-    headerElement={renderHeaderElement()}
-    bodyElement={renderBodyElement()}
-    onChangeMessage={(e) => setMessage(e.target.value)}
-    handleSelectedConversation={handleMessageList}
-    onSendMessage={handleOnSendMessage}
-    onChangeSearch={(e) => setSearch(e.target.value)}
-    onSearch={handleOnSearch}
-  />
+// Custom header with a back button for mobile
+const headerElement = (
+  <div className="flex items-center h-12 bg-primary-500 text-white px-4">
+    <button
+      className="sm:hidden mr-2"
+      onClick={() => setMobileSelectedChat(false)}
+    >
+      ←
+    </button>
+    <span>{otherUser?.name}</span>
+  </div>
 );
+
+<ChatDashboard
+  value={message}
+  currentUser={currentUser}
+  selectedConversation={conversation}
+  conversationList={conversationList}
+  mobileSelectedChat={mobileSelectedChat}
+  sizeClassName="w-64 h-[60vh]"
+  chatBaseSizeClassName="w-full h-[60vh]"
+  headerElement={headerElement}
+  onChangeMessage={(e) => setMessage(e.target.value)}
+  onSendMessage={handleSendMessage}
+  handleSelectedConversation={handleSelectConversation}
+/>
 ```
 
 ##### Required props
 
-| Name                 | Type             | Description                             |
-| -------------------- | ---------------- | --------------------------------------- |
-| value                | `string`         | Message input text                      |
-| currentUser          | `User`           | User Object                             |
-| selectedConversation | `Conversation`   | Selected Conversation Object to display |
-| conversationList     | `Conversation[]` | List of Conversation Objects            |
+| Name                         | Type                   | Description                                                                                                         |
+| ---------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `value`                      | `string`               | Current message input value                                                                                         |
+| `currentUser`                | `User`                 | The logged-in user — used to identify which side messages appear on and to find the other user in each conversation |
+| `selectedConversation`       | `Conversation`         | The conversation currently displayed in the chat panel                                                              |
+| `conversationList`           | `Conversation[]`       | All conversations shown in the left panel list                                                                      |
+| `handleSelectedConversation` | `(id: string) => void` | Called with the conversation `id` when a list item is clicked                                                       |
 
 ##### Optional props
 
-| Name                       | Type                 | Default                         | Description                       |
-| -------------------------- | -------------------- | ------------------------------- | --------------------------------- |
-| mobileSelectedChat         | `boolean`            | false                           | Mobile state for selected chat    |
-| searchMessage              | `string`             | ""                              | Search input text                 |
-| headerElement              | `React Element`      | null                            | Replaces default component Header |
-| bodyElement                | `React Element`      | null                            | Replaces default component Body   |
-| className                  | `tailwind classname` | ""                              | For component container           |
-| sizeClassName              | `tailwind classname` | ""                              | For component size                |
-| chatBaseClassName          | `tailwind classname` | ""                              | For Chat Base component container |
-| chatBaseSizeClassName      | `tailwind classname` | ""                              | For Chat Base component size      |
-| onSendMessage              | `function`           | `(event: any) => {}`            | To send message                   |
-| onChangeMessage            | `function`           | `(event: any) => {}`            | To type in message input          |
-| onChangeSearch             | `function`           | `(event: any) => {}`            | To type in search input           |
-| onSearch                   | `function`           | `(searchMessage: string) => {}` | To search in messages             |
-| handleSelectedConversation | `function`           | `(id: string) => {}`            | Display selected conversation     |
-
-##### Interface User
-
-| Name       | Type     | Description       |
-| ---------- | -------- | ----------------- |
-| `id`       | `string` | Required id       |
-| `name`     | `string` | Required name     |
-| `imageUrl` | `string` | Optional imageURL |
-
-##### Interface Conversation
-
-| Name          | Type        | Description               |
-| ------------- | ----------- | ------------------------- |
-| `id`          | `string`    | Required id               |
-| `members`     | `User[]`    | Required list of Users    |
-| `messageList` | `Message[]` | Required list of Messages |
-
-##### Interface Message
-
-| Name          | Type     | Description          |
-| ------------- | -------- | -------------------- |
-| `sender`      | `User`   | Required User        |
-| `messageBody` | `string` | Required messageBody |
-| `createdAt`   | `Date`   | Required date        |
+| Name                    | Type                                   | Default    | Description                                                                                                         |
+| ----------------------- | -------------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------- |
+| `mobileSelectedChat`    | `boolean`                              | `false`    | When `true`, hides the conversation list and shows the chat panel on mobile. Set to `false` to go back to the list. |
+| `searchMessage`         | `string`                               | —          | Current search input value. Pass a filtered conversation to `selectedConversation` to show results.                 |
+| `headerElement`         | `ReactElement`                         | —          | Replaces the default `ChatBase` header. Use this to show the other user's name and a mobile back button.            |
+| `bodyElement`           | `ReactElement`                         | —          | Replaces the `ChatBase` message list. Useful for showing a loading spinner while fetching messages.                 |
+| `className`             | `string`                               | —          | Tailwind classes for the conversation list panel container                                                          |
+| `sizeClassName`         | `string`                               | `h-[75vh]` | Tailwind classes controlling the height/width of the conversation list panel                                        |
+| `chatBaseClassName`     | `string`                               | —          | Tailwind classes for the `ChatBase` container                                                                       |
+| `chatBaseSizeClassName` | `string`                               | —          | Tailwind classes controlling the height/width of the `ChatBase` panel                                               |
+| `onSendMessage`         | `(conversation: Conversation) => void` | —          | Called with the updated conversation when a message is sent                                                         |
+| `onChangeMessage`       | `(event: any) => void`                 | —          | Called on every keystroke in the message input                                                                      |
+| `onSearch`              | `(searchMessage: string) => void`      | —          | Called when the search form is submitted inside `ChatBase`                                                          |
+| `onChangeSearch`        | `(event: any) => void`                 | —          | Called on every keystroke in the search input inside `ChatBase`                                                     |
+
+##### Conversation list behaviour
+
+Each item in `conversationList` renders the other user's avatar and name (the member whose `id` differs from `currentUser.id`) and the last message body as a preview. Items with a `FileObj` message body show an empty preview string.
+
+##### User
+
+| Name       | Type     | Description                                       |
+| ---------- | -------- | ------------------------------------------------- |
+| `id`       | `string` | Unique identifier                                 |
+| `name`     | `string` | Display name                                      |
+| `imageUrl` | `string` | Avatar URL — shown in the conversation list items |
+
+##### Conversation
+
+| Name          | Type        | Description                                                  |
+| ------------- | ----------- | ------------------------------------------------------------ |
+| `id`          | `string`    | Unique conversation identifier                               |
+| `members`     | `User[]`    | Participants — must include `currentUser` and one other user |
+| `messageList` | `Message[]` | Ordered list of messages                                     |
+
+##### Message
+
+| Name           | Type                | Description                                                       |
+| -------------- | ------------------- | ----------------------------------------------------------------- |
+| `sender`       | `User`              | The user who sent the message                                     |
+| `messageBody`  | `string \| FileObj` | Text content or a file object for image/video messages            |
+| `reactElement` | `ReactElement`      | Optional — replaces `messageBody` rendering with a custom element |
+| `createdAt`    | `Date`              | Timestamp                                                         |

package/lib/components/chat/chatDashboard/chatDashboard.stories.tsx

@@ -3,11 +3,11 @@ import { storiesOf } from "@storybook/react";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { ChatDashboard } from ".";
-import Logo from "../../../assets/logo.png";
+import { StorySection } from "../../storyUtils";
 import { IconButton } from "../../action/iconButton";
 import { Loading } from "../../display/loading";
 import { Conversation } from "../chatBase";
-import { conversationList as convoList, currentUser } from "../chatUtils";
+import { conversationList as seedConvoList, currentUser } from "../chatUtils";
 import README from "./README.md";
 
 const stories = storiesOf("Chat", module);
@@ -18,137 +18,114 @@ stories.addParameters({
   },
 });
 
+const sortByLatest = (list: Conversation[]) =>
+  [...list].sort((a, b) =>
+    moment(b.messageList[b.messageList.length - 1].createdAt).diff(
+      moment(a.messageList[a.messageList.length - 1].createdAt)
+    )
+  );
+
 stories.add("Chat Dashboard", () => {
   const [message, setMessage] = useState("");
   const [search, setSearch] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [mobileSelectedChat, setMobileSelectedChat] = useState(false);
   const [filteredConversation, setFilteredConversation] =
-    useState<Conversation | null>();
+    useState<Conversation | null>(null);
+  const [conversationList, setConversationList] = useState<Conversation[]>([]);
   const [conversation, setConversation] = useState<Conversation>({
     id: "",
     members: [],
     messageList: [],
   });
-  const [conversationList, setConversationList] = useState<Conversation[]>([]);
 
   useEffect(() => {
-    handleSortConvoList(convoList);
+    const sorted = sortByLatest(seedConvoList);
+    setConversationList(sorted);
+    setConversation(sorted[0]);
   }, []);
 
-  const handleOnSearch = (searchMessage: string) => {
-    if (searchMessage.length === 0) {
-      setSearch("");
-      setFilteredConversation(null);
-    } else {
-      const dupMessageList = conversation.messageList.filter((eachMessage) => {
-        if (typeof eachMessage.messageBody === "string") {
-          return eachMessage.messageBody
-            .toLowerCase()
-            .includes(searchMessage.toLowerCase());
-        }
-        return null;
-      });
-      const dupConversation = {
-        id: conversation.id,
-        members: [...conversation.members],
-        messageList: [...dupMessageList],
-      };
-      setFilteredConversation(dupConversation);
-    }
-  };
-
-  const handleOnSendMessage = (conversation: Conversation) => {
-    setConversation({
-      id: conversation.id,
-      members: [...conversation.members],
-      messageList: [...conversation.messageList],
-    });
-    setMessage("");
-    const dupConvoList = conversationList.map((eachConvo, i) => {
-      if (eachConvo.id === conversation.id) {
-        return conversation;
-      }
-      return eachConvo;
-    });
-
-    handleSortConvoList(dupConvoList);
-  };
-
-  const handleSortConvoList = (convoList: Conversation[]) => {
-    const sortedConvoList = convoList.sort((a, b) => {
-      return moment(b.messageList[b.messageList.length - 1].createdAt).diff(
-        moment(a.messageList[a.messageList.length - 1].createdAt)
-      );
-    });
-    setConversationList(sortedConvoList);
-    setConversation(sortedConvoList[0]);
-  };
-
-  const handleMessageList = (id: string) => {
+  const handleSelectConversation = (id: string) => {
     setIsLoading(true);
     setMobileSelectedChat(true);
     setTimeout(() => {
       setIsLoading(false);
-      conversationList.map((eachConversation) => {
-        if (eachConversation.id === id) {
-          setConversation(eachConversation);
-        }
-        return null;
-      });
-    }, 1000);
+      const found = conversationList.find((c) => c.id === id);
+      if (found) setConversation(found);
+    }, 800);
   };
 
-  const renderBodyElement = () => {
-    return isLoading ? (
-      <div className="w-full">
-        <Loading />
-      </div>
-    ) : undefined;
+  const handleSendMessage = (updated: Conversation) => {
+    setConversation(updated);
+    setMessage("");
+    const updatedList = conversationList.map((c) =>
+      c.id === updated.id ? updated : c
+    );
+    setConversationList(sortByLatest(updatedList));
   };
 
-  const renderHeaderElement = () => {
-    const otherUser = conversation.members.find((eachMember) => {
-      return eachMember.id !== currentUser.id;
-    });
-    const userName = otherUser ? otherUser.name : "";
-
-    return (
-      <div className="w-full flex items-center h-12 text-white bg-primary-500 text-center">
-        <IconButton
-          icon={<ChevronLeftIcon className="w-6 h-6" />}
-          background="bg-transparent"
-          onClick={() => setMobileSelectedChat(false)}
-          className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
-        />
-        <p className="ml-2 sm:ml-12">{userName}</p>
-      </div>
-    );
+  const handleSearch = (searchMessage: string) => {
+    if (!searchMessage) {
+      setSearch("");
+      setFilteredConversation(null);
+    } else {
+      setFilteredConversation({
+        ...conversation,
+        messageList: conversation.messageList.filter(
+          (m) =>
+            typeof m.messageBody === "string" &&
+            m.messageBody.toLowerCase().includes(searchMessage.toLowerCase())
+        ),
+      });
+    }
   };
 
-  return (
-    <div>
-      <div className="flex justify-center items-center py-2 space-x-4">
-        <img src={Logo} alt="" className="h-14" />
-        <h1 className="text-2xl text-primary-400">Chat App</h1>
-      </div>
-      <ChatDashboard
-        value={message}
-        searchMessage={search}
-        currentUser={currentUser}
-        selectedConversation={filteredConversation ?? conversation}
-        conversationList={conversationList}
-        mobileSelectedChat={mobileSelectedChat}
-        sizeClassName="w-full h-[50vh] sm:h-[50vh]"
-        chatBaseSizeClassName="w-full h-[50vh] sm:h-[50vh]"
-        headerElement={renderHeaderElement()}
-        bodyElement={renderBodyElement()}
-        onChangeMessage={(e) => setMessage(e.target.value)}
-        handleSelectedConversation={handleMessageList}
-        onSendMessage={handleOnSendMessage}
-        onChangeSearch={(e) => setSearch(e.target.value)}
-        onSearch={handleOnSearch}
+  const otherUser = conversation.members.find((m) => m.id !== currentUser.id);
+
+  const headerElement = (
+    <div className="w-full flex items-center h-12 text-white bg-primary-500">
+      <IconButton
+        icon={<ChevronLeftIcon className="w-6 h-6" />}
+        background="bg-transparent"
+        onClick={() => setMobileSelectedChat(false)}
+        className={`${!mobileSelectedChat ? "hidden sm:flex" : ""} sm:hidden`}
       />
+      <p className="ml-2 sm:ml-4 font-medium">{otherUser?.name ?? "Chat"}</p>
+    </div>
+  );
+
+  const bodyElement = isLoading ? (
+    <div className="w-full h-full flex items-center justify-center">
+      <Loading />
     </div>
+  ) : undefined;
+
+  return (
+    <>
+      <StorySection
+        title="Chat Dashboard"
+        description="A two-panel layout: a conversation list on the left and the active chat on the right. handleSelectedConversation is called with the conversation id when a list item is clicked. On mobile, the list and chat panels toggle via mobileSelectedChat — the header's back button sets it to false."
+      >
+        <div className="w-full">
+          <ChatDashboard
+            value={message}
+            searchMessage={search}
+            currentUser={currentUser}
+            selectedConversation={filteredConversation ?? conversation}
+            conversationList={conversationList}
+            mobileSelectedChat={mobileSelectedChat}
+            sizeClassName="w-64 h-[60vh]"
+            chatBaseSizeClassName="w-full h-[60vh]"
+            headerElement={headerElement}
+            bodyElement={bodyElement}
+            onChangeMessage={(e) => setMessage(e.target.value)}
+            onSendMessage={handleSendMessage}
+            onChangeSearch={(e) => setSearch(e.target.value)}
+            onSearch={handleSearch}
+            handleSelectedConversation={handleSelectConversation}
+          />
+        </div>
+      </StorySection>
+    </>
   );
 });

package/lib/components/data/dataGraph/README.md

@@ -4,10 +4,144 @@
 
 <hr>
 
-Data Graph for Dashboard
+A dashboard chart grid that fetches and renders analytics data from a remote API. Supports card, bar, line, pie, and radar chart types in a responsive grid layout. Each chart handles its own data fetching, date range filtering, and attribute filtering.
 
 ##### Import
 
 ```js
 import { DataGraph } from "blixify-ui-web/components/data/dataGraph";
 ```
+
+##### Usage
+
+Basic dashboard with card and bar charts:
+
+```jsx
+<DataGraph
+  charts={[
+    {
+      gridSize: 1,
+      type: "card",
+      title: "Total Products",
+      spaceId: "products",
+      query: [],
+      queryBaseType: "count",
+    },
+    {
+      gridSize: 1,
+      type: "card",
+      title: "Total Revenue",
+      spaceId: "orders",
+      query: [],
+      queryBaseType: "sum",
+      queryAttributeId: ["price"],
+      queryBaseDateId: "createdAt",
+    },
+    {
+      gridSize: 2,
+      type: "bar",
+      title: "Sales by Product",
+      spaceId: "orders",
+      query: [
+        { type: "=", queryId: "code", value: "P001" },
+        { type: "=", queryId: "code", value: "P002" },
+      ],
+      queryBaseType: "sum",
+      queryAttributeId: ["price"],
+    },
+  ]}
+  workspace={{
+    apiEndpoint: "http://localhost:3000/api",
+    apiEndpointType: "mongoDB",
+  }}
+/>
+```
+
+Line chart with date range:
+
+```jsx
+{
+  gridSize: 2,
+  type: "line",
+  title: "Orders Over Time",
+  spaceId: "orders",
+  query: [],
+  queryBaseType: "count",
+  queryBaseDateId: "createdAt",
+}
+```
+
+Radar chart comparing multiple attributes across query groups:
+
+```jsx
+{
+  gridSize: 2,
+  type: "radar",
+  title: "Performance",
+  spaceId: "reports",
+  query: [
+    { type: "=", queryId: "status", value: "Completed" },
+    { type: "=", queryId: "status", value: "Pending" },
+  ],
+  queryBaseType: "sum",
+  queryAttributeId: ["revenue", "units", "returns"],
+  queryBaseDateId: "createdAt",
+}
+```
+
+Custom layout via renderSettings:
+
+```jsx
+<DataGraph
+  charts={charts}
+  workspace={workspace}
+  renderSettings={(chartsElement, data) => (
+    <div className="my-custom-wrapper">{chartsElement}</div>
+  )}
+/>
+```
+
+##### Required props
+
+| Name        | Type                   | Description                                              |
+| ----------- | ---------------------- | -------------------------------------------------------- |
+| `charts`    | `Charts[]`             | List of chart definitions — see Charts below             |
+| `workspace` | `WorkspaceDevSettings` | API connection settings — see WorkspaceDevSettings below |
+
+##### Optional props
+
+| Name             | Type                                       | Default | Description                                                                                                                            |
+| ---------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `gridSize`       | `2 \| 3`                                   | —       | Override the grid column layout. Default is a responsive `1 → 2 → 4` column grid. `2` forces 2 cols, `3` forces 3 cols.                |
+| `renderSettings` | `(charts: ReactElement, data: any) => any` | —       | Custom render function. Receives the rendered charts element and the raw analytics data object. Use to wrap charts in a custom layout. |
+
+##### Charts
+
+| Name               | Type                                            | Description                                                                                                                               |
+| ------------------ | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`             | `"card" \| "bar" \| "line" \| "pie" \| "radar"` | Chart type to render                                                                                                                      |
+| `title`            | `string`                                        | Chart title — also used as the key for internal state                                                                                     |
+| `spaceId`          | `string`                                        | The collection/space ID to query data from                                                                                                |
+| `gridSize`         | `number`                                        | Number of grid columns this chart spans                                                                                                   |
+| `query`            | `Query[]`                                       | Data series definitions. Each query entry produces one data point or series segment. Pass `[]` for a single aggregate.                    |
+| `queryBaseType`    | `"count" \| "sum" \| "avg" \| "value"`          | Aggregate function. Defaults to `"count"`.                                                                                                |
+| `queryAttributeId` | `string[]`                                      | Required when `queryBaseType` is `"sum"`, `"avg"`, or `"value"`. The field(s) to aggregate. For `radar`, each entry becomes a radar axis. |
+| `queryBaseDateId`  | `string`                                        | Field used for date range filtering. When set, a date range picker is shown on the chart.                                                 |
+| `queryReferenceId` | `string`                                        | Field used for reference-based filtering when a reference filter is active.                                                               |
+| `baseQuery`        | `Query[]`                                       | Static filter queries always applied alongside any dynamic filters.                                                                       |
+| `description`      | `string`                                        | Subtitle shown on `card` type charts                                                                                                      |
+| `cardIcon`         | `string`                                        | Heroicon name (solid) for the card icon, e.g. `"UserIcon"`. Defaults to `FolderIcon`.                                                     |
+| `cardIconBgColor`  | `string`                                        | Tailwind bg class for the card icon background                                                                                            |
+| `colors`           | `string[]`                                      | Custom color array for chart segments/bars/lines                                                                                          |
+| `orientation`      | `"col" \| "row"`                                | Bar chart orientation. Defaults to `"row"`.                                                                                               |
+| `stackedVertical`  | `boolean`                                       | Enables stacked bars on bar charts                                                                                                        |
+
+##### WorkspaceDevSettings
+
+| Name               | Type                                                                       | Description                     |
+| ------------------ | -------------------------------------------------------------------------- | ------------------------------- |
+| `apiEndpoint`      | `string`                                                                   | Base URL for the data API       |
+| `apiEndpointType`  | `"mongoDB" \| "firebase" \| "mongoServer" \| "fbServer" \| "mondayServer"` | Server/DB type driving the API  |
+| `apiEndpointToken` | `string`                                                                   | Auth token for the API endpoint |
+| `apiUserToken`     | `string`                                                                   | Per-user auth token             |
+| `assetEndpoint`    | `string`                                                                   | Base URL for asset/file storage |