blixify-ui-web-mcp 0.1.59 → 0.1.61

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

@@ -89,6 +89,46 @@ Radar chart comparing multiple attributes across query groups:
 }
 ```
 
+Grouped by any column, top 5 with the rest as "Others", highest first:
+
+```jsx
+{
+  gridSize: 2,
+  type: "table",
+  title: "Leads by Agent",
+  spaceId: "leads",
+  query: [],
+  queryBaseType: "count",
+  groupBy: "agent",
+  sortBy: "value",
+  sortDirection: "desc",
+  topN: 5,
+}
+```
+
+Revenue per month as a running total, split by status:
+
+```jsx
+{
+  gridSize: 2,
+  type: "bar",
+  title: "Revenue per Month",
+  spaceId: "orders",
+  query: [],
+  queryBaseType: "sum",
+  queryAttributeId: ["amount"],
+  queryBaseDateId: "paidAt",
+  queryDateInterval: "month",
+  cumulative: true,
+  segmentBy: "status",
+}
+```
+
+A chart that can't load or draw shows an error card in its place — a plain
+message, Retry, and the technical cause under Details — and the other charts
+keep drawing. Pass `structure` so a sum or average of a text column is caught
+before any request is sent.
+
 Custom layout via renderSettings:
 
 ```jsx
@@ -114,6 +154,9 @@ Custom layout via renderSettings:
 | ---------------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | `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. |
+| `structure`      | `DataStructure[]`                          | —       | The datasheet's columns. Groups read by their labels, and a chart measuring a column that is not a number shows why before any request. |
+| `personOptions`  | `Option[]`                                 | —       | Names for the user ids a `person` column groups by.                                                                                    |
+| `onDrillDown`    | `(drillDown: ChartDrillDown) => void`      | —       | Called when a bar, slice or table row is clicked, with its label and the query that finds its records.                                 |
 
 ##### Charts
 
@@ -139,6 +182,13 @@ Custom layout via renderSettings:
 | `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                                                                                                        |
+| `groupBy`          | `string`                                        | Column of any type to group by in one request. A `reference` or `person` column reads by name.                                           |
+| `queryDateInterval`| `"day" \| "week" \| "month"`                    | With `queryBaseDateId`, buckets records by day, week or month. Defaults to the last 30 days, 12 weeks or 12 months.                      |
+| `segmentBy`        | `string`                                        | Second column split into stacked series (bar, line, table), at most 10 values plus "Others".                                             |
+| `sortBy`           | `"value" \| "label"`                             | Sort the groups. `sortDirection` is `"asc"` or `"desc"` (default).                                                                       |
+| `topN`             | `number`                                        | Keep the first N groups; the rest are added up as "Others" unless `showOthers` is `false` (averages never get "Others").                 |
+| `showPercent`      | `boolean`                                       | Show each group as a percentage of the total (count and sum, unsplit charts).                                                            |
+| `cumulative`       | `boolean`                                       | Running total over the date buckets.                                                                                                     |
 
 ##### WorkspaceDevSettings
 

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

@@ -753,7 +753,7 @@ A `type: "formula"` column is a monday.com-style formula. It is worked out from
 
 ### With activity log (comments + audit trail)
 
-Enable `edit.activityLog` to open the activity panel from list and read views. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
+Enable `edit.activityLog` to open the activity panel from list and read views, in a drawer on the right (a bottom sheet on phones). In the new table each record also gets a chat bubble beside its title, for anyone who can see the row. It uses the new feeds and pagination UI, an inline comment composer, editable comments, confirmed deletion, and before/after audit values. It follows `organise.darkMode`, including when opened from a legacy table.
 
 In the modern table (`bareNewDTW`), the outlined chat bubble at the right of the first visible column opens that data's Comments first without navigating away. The column is pinned by default when no left pins are configured; mobile cards put the icon beside the title. Read views use the same outlined chat bubble with an accessible Comments and activity label. The collection-wide clock opens Logs first. Both entry points retain both enabled tabs, falling back to the available tab if only one is enabled.
 

package/lib/components/data/dataTemplate/dataTemplate.stories.tsx

@@ -513,14 +513,24 @@ const CHART_SCHEMA: DataStructure[] = [
     listSelection: ["web", "store", "phone"],
     listSelectionLabel: ["Web", "Store", "Phone"],
   },
+  { id: "agent", name: "Agent", type: "person" },
   { id: "amount", name: "Amount", type: "number" },
   { id: "items", name: "Items", type: "number" },
   { id: "createdAt", name: "Created At", type: "date" },
 ];
 
+const CHART_MEMBERS = [
+  { key: "u1", label: "Aisha" },
+  { key: "u2", label: "Ben" },
+  { key: "u3", label: "Chong" },
+  { key: "u4", label: "Devi" },
+  { key: "u5", label: "Eli" },
+];
+
 const renderChartRecords = () => {
   const statuses = ["pending", "paid", "shipped", "cancelled"];
   const channels = ["web", "store", "phone"];
+  const agents = ["u1", "u2", "u3", "u1", "u4", "u1", "u2", "u5"];
   return Array.from({ length: 40 }, (_, index) => ({
     _id: `o${index + 1}`,
     orderNo: `ORD-${1000 + index}`,
@@ -528,7 +538,16 @@ const renderChartRecords = () => {
     channel: channels[(index * 5) % channels.length],
     amount: 20 + ((index * 37) % 180),
     items: 1 + ((index * 3) % 6),
-    createdAt: new Date(Date.now() - (index % 7) * 24 * 60 * 60 * 1000),
+    agent: index % 9 === 0 ? undefined : agents[index % agents.length],
+    // INFO: half in the last week for the daily line, the rest over months
+    createdAt: new Date(
+      Date.now() -
+        (index % 2 === 0 ? index % 7 : (index * 11) % 300) *
+          24 *
+          60 *
+          60 *
+          1000,
+    ),
   }));
 };
 
@@ -552,12 +571,26 @@ const handleInstallChartMock = (store: any[]) => {
       return {};
     }
   };
-  // INFO: "=" for chart groups, "search" for the search box — enough to show
+  // INFO: the conditions charts and their drill-downs send — enough to show
   // the table's filters reaching the charts
   const handleMatch = (record: any, query: any[] = []) =>
     query.every((eachQuery) => {
-      if (eachQuery.type === "=")
-        return record[eachQuery.queryId] === eachQuery.value;
+      const value = record[eachQuery.queryId];
+      // INFO: null matches a missing value too, as Mongo's { column: null }
+      if (eachQuery.type === "=") return (value ?? null) === eachQuery.value;
+      if (eachQuery.type === "in")
+        return eachQuery.value.includes(value ?? null);
+      if (eachQuery.type === "!in")
+        return !eachQuery.value.includes(value ?? null);
+      if (eachQuery.type === "exists")
+        return (value !== undefined && value !== null) === eachQuery.value;
+      if (eachQuery.type === "><")
+        return (
+          new Date(value) >= new Date(eachQuery.value[0]) &&
+          new Date(value) <= new Date(eachQuery.value[1])
+        );
+      if (eachQuery.type === "<")
+        return new Date(value) < new Date(eachQuery.value);
       if (eachQuery.type === "search")
         return Object.values(record).some((eachValue) =>
           String(eachValue)
@@ -602,6 +635,20 @@ const handleInstallChartMock = (store: any[]) => {
             );
           })
         : matched;
+      if (body.aggregate.groupId) {
+        const groups = new Map<any, any[]>();
+        inRange.forEach((eachRecord) => {
+          const key = eachRecord[body.aggregate.groupId] ?? null;
+          groups.set(key, [...(groups.get(key) ?? []), eachRecord]);
+        });
+        return {
+          _id: eachRange,
+          value: Array.from(groups.entries()).map(([key, records]) => ({
+            _id: key,
+            value: handleAggregate(records, body.aggregate),
+          })),
+        };
+      }
       return {
         _id: eachRange,
         value: handleAggregate(inRange, body.aggregate),
@@ -705,6 +752,55 @@ const ChartViewDemo = () => {
           seriesLabels: ["Pending", "Paid", "Shipped", "Cancelled"],
           queryBaseType: "count",
         },
+        {
+          title: "Top Agents",
+          type: "table",
+          gridSize: 2,
+          spaceId: CHART_COLLECTION,
+          query: [],
+          queryBaseType: "count",
+          groupBy: "agent",
+          sortBy: "value",
+          sortDirection: "desc",
+          topN: 3,
+        },
+        {
+          title: "Revenue Per Month",
+          type: "bar",
+          orientation: "col",
+          gridSize: 2,
+          spaceId: CHART_COLLECTION,
+          query: [],
+          queryBaseType: "sum",
+          queryAttributeId: ["amount"],
+          queryBaseDateId: "createdAt",
+          queryDateInterval: "month",
+          cumulative: true,
+        },
+        {
+          title: "Channel By Status",
+          type: "bar",
+          orientation: "col",
+          gridSize: 2,
+          spaceId: CHART_COLLECTION,
+          query: ["web", "store", "phone"].map((eachValue) => ({
+            type: "=" as const,
+            queryId: "channel",
+            value: eachValue,
+          })),
+          seriesLabels: ["Web", "Store", "Phone"],
+          queryBaseType: "count",
+          segmentBy: "status",
+        },
+        {
+          title: "Sum Of Order No",
+          type: "card",
+          gridSize: 2,
+          spaceId: CHART_COLLECTION,
+          query: [],
+          queryBaseType: "sum",
+          queryAttributeId: ["orderNo"],
+        },
       ],
     },
   ]);
@@ -719,7 +815,7 @@ const ChartViewDemo = () => {
         collectionId={CHART_COLLECTION}
         model={CHART_SCHEMA}
         localURLEndpoint=""
-        devSettings={demoDevSettings}
+        devSettings={{ ...demoDevSettings, organisationMembers: CHART_MEMBERS }}
         lib={{ axios, Menu, Transition, papaParser: Papa }}
         limit={10}
         edit={{ allEditable: true }}

package/lib/components/display/newTable/README.md

@@ -6,6 +6,10 @@ Tabular display with a List-shaped mobile breakpoint. The architectural key: **`
 
 Pass `onRowActivity={(id) => ...}` to show a keyboard-accessible chat button at the right of the first visible cell (beside the title on mobile cards). It stops row navigation and does not enter inline editing. When no left pins are configured, the first ungrouped column is pinned automatically; existing pin configurations are preserved. DTW wires this callback automatically when `edit.activityLog` is enabled with `bareNewDTW`.
 
+## Adding a row
+
+With `addable.active`, a `+` row at the bottom starts a new record where the click lands. While it is filled in, ✓ and ✕ sit in the Actions column and **Save** and **Cancel** are repeated under the row, held at the left edge as the table scrolls sideways. Enter saves and opens the next row, Escape cancels, and clicking another row saves it.
+
 ## Mobile column flags
 
 Columns expose three optional booleans that map them to the `NewListItem` shape:
@@ -75,7 +79,7 @@ used, not only inside a DataTemplate.
 
 ##### Adding a column from the table
 
-`advSettings.addColumnEnabled` puts a `+` at the end of the header row. It opens a portalled popover beside the button on desktop and a modal on mobile — the panel has to be portalled or the table's own scroll container clips it. What it
+`advSettings.addColumnEnabled` puts a `+` at the end of the header row, pinned at the right edge (just left of the Actions column) so it stays in view on a wide table. It opens a portalled popover beside the button on desktop and a modal on mobile — the panel has to be portalled or the table's own scroll container clips it. What it
 opens depends on which callback you give it:
 
 | Provide                                | You get                                                 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blixify-ui-web-mcp",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "license": "MIT",
   "main": "lib/mcp/server.js",
   "bin": {