@xh/hoist 73.0.0-SNAPSHOT.1745976013413 → 73.0.0-SNAPSHOT.1746050068813

package/admin/tabs/activity/tracking/ActivityTrackingPanel.ts

@@ -4,22 +4,24 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {dataFieldsEditor} from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditor';
+import {errorMessage} from '@xh/hoist/cmp/error';
 import {form} from '@xh/hoist/cmp/form';
 import {grid} from '@xh/hoist/cmp/grid';
-import {div, hframe} from '@xh/hoist/cmp/layout';
+import {div, filler, hframe} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {button, buttonGroup, colChooserButton, exportButton} from '@xh/hoist/desktop/cmp/button';
-import {errorMessage} from '@xh/hoist/cmp/error';
 import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
 import {formField} from '@xh/hoist/desktop/cmp/form';
 import {groupingChooser} from '@xh/hoist/desktop/cmp/grouping';
 import {dateInput, DateInputProps, select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
+import {viewManager} from '@xh/hoist/desktop/cmp/viewmanager';
 import {Icon} from '@xh/hoist/icon';
 import {LocalDate} from '@xh/hoist/utils/datetime';
 import {ActivityTrackingModel} from './ActivityTrackingModel';
-import {chartsPanel} from './charts/ChartsPanel';
+import {aggChartPanel} from '@xh/hoist/admin/tabs/activity/tracking/chart/AggChartPanel';
 import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
 
@@ -36,14 +38,20 @@ export const activityTrackingPanel = hoistCmp.factory({
         return panel({
             className: 'xh-admin-activity-panel',
             tbar: tbar(),
-            item: hframe(aggregateView(), activityDetailView({flex: 1})),
+            items: [filterBar(), hframe(aggregateView(), activityDetailView({flex: 1}))],
             mask: 'onLoad'
         });
     }
 });
 
 const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
+    const dateBtn = {outlined: true, width: 40} as const;
     return toolbar(
+        viewManager({
+            model: model.viewManagerModel,
+            showSaveButton: 'always'
+        }),
+        '-',
         form({
             fieldDefaults: {label: null},
             items: [
@@ -65,74 +73,96 @@ const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
                     onClick: () => model.adjustDates('add'),
                     disabled: model.endDay >= LocalDate.currentAppDay()
                 }),
-                buttonGroup(
-                    button({
-                        text: '6m',
-                        outlined: true,
-                        width: 40,
-                        onClick: () => model.adjustStartDate(6, 'months'),
-                        active: model.isInterval(6, 'months')
-                    }),
-                    button({
-                        text: '1m',
-                        outlined: true,
-                        width: 40,
-                        onClick: () => model.adjustStartDate(1, 'months'),
-                        active: model.isInterval(1, 'months')
-                    }),
-                    button({
-                        text: '7d',
-                        outlined: true,
-                        width: 40,
-                        onClick: () => model.adjustStartDate(7, 'days'),
-                        active: model.isInterval(7, 'days')
-                    }),
-                    button({
-                        text: '1d',
-                        outlined: true,
-                        width: 40,
-                        onClick: () => model.adjustStartDate(1, 'days'),
-                        active: model.isInterval(1, 'days')
-                    })
-                ),
-                toolbarSep(),
-                filterChooser({
-                    flex: 1,
-                    enableClear: true
+                buttonGroup({
+                    items: [
+                        button({
+                            text: '6m',
+                            onClick: () => model.adjustStartDate(6, 'months'),
+                            active: model.isInterval(6, 'months'),
+                            ...dateBtn
+                        }),
+                        button({
+                            text: '1m',
+                            onClick: () => model.adjustStartDate(1, 'months'),
+                            active: model.isInterval(1, 'months'),
+                            ...dateBtn
+                        }),
+                        button({
+                            text: '7d',
+                            onClick: () => model.adjustStartDate(7, 'days'),
+                            active: model.isInterval(7, 'days'),
+                            ...dateBtn
+                        }),
+                        button({
+                            text: '1d',
+                            onClick: () => model.adjustStartDate(1, 'days'),
+                            active: model.isInterval(1, 'days'),
+                            ...dateBtn
+                        })
+                    ]
                 }),
                 toolbarSep(),
+                filterChooserToggleButton(),
+                toolbarSep(),
+                dataFieldsEditor(),
+                filler(),
                 formField({
                     field: 'maxRows',
-                    label: 'Max rows:',
+                    label: 'Max rows',
                     width: 140,
                     item: select({
                         enableFilter: false,
                         hideDropdownIndicator: true,
                         options: model.maxRowOptions
                     })
-                }),
-                toolbarSep(),
-                button({
-                    icon: Icon.reset(),
-                    intent: 'danger',
-                    title: 'Reset query to defaults',
-                    onClick: () => model.resetQuery()
                 })
             ]
         })
     );
 });
 
+const filterChooserToggleButton = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
+    const {hasFilter, showFilterChooser} = model;
+
+    return button({
+        text: 'Filter',
+        icon: Icon.filter({prefix: hasFilter ? 'fas' : 'far'}),
+        intent: hasFilter ? 'warning' : null,
+        outlined: showFilterChooser,
+        onClick: () => model.toggleFilterChooser()
+    });
+});
+
+const filterBar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
+    return model.showFilterChooser
+        ? toolbar(
+              filterChooser({
+                  flex: 1,
+                  enableClear: true
+              })
+          )
+        : null;
+});
+
 const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
     return panel({
-        title: 'Aggregate Activity Report',
-        icon: Icon.users(),
+        collapsedTitle: 'Aggregate Activity',
+        collapsedIcon: Icon.users(),
         compactHeader: true,
         modelConfig: {
             side: 'left',
-            defaultSize: 500
+            defaultSize: 500,
+            persistWith: {...model.persistWith, path: 'aggPanel'}
         },
-        tbar: [groupingChooser({flex: 1}), colChooserButton(), exportButton()],
+        tbar: toolbar({
+            // compact: true,
+            items: [
+                groupingChooser({flex: 10, maxWidth: 300}),
+                filler(),
+                colChooserButton(),
+                exportButton()
+            ]
+        }),
         items: [
             grid({
                 flex: 1,
@@ -146,7 +176,7 @@ const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
                 ],
                 omit: !model.maxRowsReached
             }),
-            chartsPanel()
+            aggChartPanel()
         ]
     });
 });

package/admin/tabs/activity/tracking/chart/AggChartModel.ts

@@ -0,0 +1,218 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {ChartModel} from '@xh/hoist/cmp/chart';
+import {HoistModel, lookup, managed, SelectOption} from '@xh/hoist/core';
+import {Cube, StoreRecord} from '@xh/hoist/data';
+import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+import {pluralize} from '@xh/hoist/utils/js';
+import {isEmpty, last, sortBy} from 'lodash';
+import moment from 'moment';
+import {ActivityTrackingModel} from '../ActivityTrackingModel';
+
+export class AggChartModel extends HoistModel {
+    @lookup(ActivityTrackingModel)
+    activityTrackingModel: ActivityTrackingModel;
+
+    /**
+     * Metric to chart on Y axis - one of:
+     *  - entryCount - count of total track log entries within the primary dim group.
+     *  - count - count of unique secondary dim values within the primary dim group.
+     *  - elapsed - avg elapsed time in ms for the primary dim group.
+     *  - any other numeric, aggregated custom data field metrics, if so configured
+     */
+    @bindable metric: string = 'entryCount';
+
+    @computed
+    get metricLabel() {
+        return this.selectableMetrics.find(it => it.value === this.metric)?.label ?? this.metric;
+    }
+
+    @bindable incWeekends: boolean = true;
+
+    @managed chartModel: ChartModel;
+
+    get showAsTimeseries(): boolean {
+        return this.primaryDim === 'day';
+    }
+
+    get selectableMetrics(): SelectOption[] {
+        const {activityTrackingModel, secondaryDim, secondaryDimLabel} = this;
+        if (!activityTrackingModel) return [];
+
+        const ret: SelectOption[] = [
+            {
+                label: 'Entries [count]',
+                value: 'entryCount'
+            },
+            {
+                label: 'Elapsed ms [avg]',
+                value: 'elapsed'
+            }
+        ];
+
+        if (secondaryDim) {
+            ret.push({
+                label: `Unique ${pluralize(secondaryDimLabel)} [count]`,
+                value: 'count'
+            });
+        }
+
+        const dfMetrics = activityTrackingModel.dataFields.filter(
+            it => (it.type === 'int' || it.type === 'number') && it.aggregator
+        );
+
+        dfMetrics.forEach(it => {
+            ret.push({
+                label: `${it.displayName} [${it.aggregator.toLowerCase()}]`,
+                value: it.name
+            });
+        });
+
+        return sortBy(ret, 'label');
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override onLinked() {
+        this.chartModel = this.createChartModel();
+
+        const {persistWith} = this.activityTrackingModel;
+        this.markPersist('metric', {...persistWith, path: 'chartMetric'});
+        this.markPersist('incWeekends', {...persistWith, path: 'chartIncWeekends'});
+
+        this.addReaction({
+            track: () => [this.data, this.metric, this.incWeekends],
+            run: () => this.loadChart()
+        });
+    }
+
+    //-----------------
+    // Implementation
+    //-----------------
+    private get cube(): Cube {
+        return this.activityTrackingModel?.cube;
+    }
+
+    private get dimensions() {
+        return this.activityTrackingModel.dimensions;
+    }
+
+    private get primaryDim(): string {
+        return this.dimensions[0];
+    }
+
+    private get primaryDimLabel(): string {
+        return this.getDisplayName(this.primaryDim);
+    }
+
+    private get secondaryDim(): string {
+        const {dimensions} = this;
+        return dimensions.length >= 2 ? dimensions[1] : null;
+    }
+
+    private get secondaryDimLabel(): string {
+        return this.getDisplayName(this.secondaryDim);
+    }
+
+    private get data() {
+        const roots = this.activityTrackingModel.gridModel.store.allRootRecords;
+        return roots.length ? roots[0].children : [];
+    }
+
+    private createChartModel(): ChartModel {
+        return new ChartModel({
+            highchartsConfig: {
+                chart: {type: 'column', animation: false},
+                plotOptions: {
+                    column: {
+                        animation: false,
+                        borderWidth: 0,
+                        events: {
+                            click: e => this.selectRow(e)
+                        }
+                    }
+                },
+                legend: {enabled: false},
+                title: {text: null},
+                xAxis: {type: 'category', title: {}},
+                yAxis: [{title: {text: null}, allowDecimals: false}]
+            }
+        });
+    }
+
+    private selectRow(e) {
+        const id = `root>>${this.primaryDim}=[${e.point.name}]`;
+        this.activityTrackingModel.gridModel.selectAsync(id);
+    }
+
+    private loadChart() {
+        const {primaryDim, chartModel, primaryDimLabel} = this,
+            xAxisTitle = ['day', 'month'].includes(primaryDim) ? null : primaryDimLabel,
+            series = this.getSeriesData();
+
+        chartModel.setSeries(series);
+        chartModel.updateHighchartsConfig({
+            xAxis: {title: {text: xAxisTitle}}
+        });
+    }
+
+    private getSeriesData() {
+        const {data, metric, metricLabel, primaryDim, showAsTimeseries, incWeekends} = this,
+            sortedData = sortBy(data, aggRow => {
+                const {cubeLabel} = aggRow.data;
+                switch (primaryDim) {
+                    case 'month':
+                        return moment(cubeLabel, 'MMM YYYY').valueOf();
+                    default:
+                        return cubeLabel;
+                }
+            }),
+            chartData = [];
+
+        // Early out if no data.
+        if (isEmpty(sortedData)) {
+            return [{metric: metricLabel, data: chartData}];
+        }
+
+        // Special handling for timeseries - pad series internally so we can use a category axis
+        // with option to skip weekends, while retaining relative spacing between included days.
+        if (showAsTimeseries) {
+            // Index data we do have by day, for quick retrieval below.
+            const byDay: Record<string, StoreRecord> = {};
+            sortedData.forEach(it => {
+                byDay[it.data.cubeLabel] = it;
+            });
+
+            // Walk from first to last day, ensuring we have a point or placeholder for each one.
+            let dataDay = LocalDate.get(sortedData[0].data.cubeLabel);
+            const lastDay = LocalDate.get(last(sortedData).data.cubeLabel);
+            while (dataDay <= lastDay) {
+                if (incWeekends || dataDay.isWeekday) {
+                    const xVal = dataDay.toString(),
+                        yVal = byDay[xVal]?.data[metric] ?? null;
+                    chartData.push([xVal, Math.round(yVal)]);
+                }
+
+                dataDay = dataDay.nextDay();
+            }
+        } else {
+            sortedData.forEach(it => {
+                chartData.push([it.data.cubeLabel, Math.round(it.data[metric])]);
+            });
+        }
+
+        return [{name: metricLabel, data: chartData}];
+    }
+
+    private getDisplayName(fieldName: string) {
+        return this.activityTrackingModel?.getDisplayName(fieldName) ?? fieldName;
+    }
+}

package/admin/tabs/activity/tracking/chart/AggChartPanel.ts

@@ -0,0 +1,61 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {chart} from '@xh/hoist/cmp/chart';
+import {creates, hoistCmp} from '@xh/hoist/core';
+import {modalToggleButton} from '@xh/hoist/desktop/cmp/button';
+import {checkbox, select} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {Icon} from '@xh/hoist/icon/Icon';
+import {AggChartModel} from './AggChartModel';
+
+export const aggChartPanel = hoistCmp.factory({
+    model: creates(AggChartModel),
+
+    render({model, ...props}) {
+        return panel({
+            collapsedTitle: 'Aggregate Activity Chart',
+            collapsedIcon: Icon.chartBar(),
+            modelConfig: {
+                modalSupport: {width: '90vw', height: '60vh'},
+                side: 'bottom',
+                defaultSize: 400,
+                persistWith: {...model.activityTrackingModel.persistWith, path: 'aggChartPanel'}
+            },
+            compactHeader: true,
+            item: chart({model: model.chartModel}),
+            bbar: toolbar({
+                items: [
+                    Icon.chartBar(),
+                    metricSwitcher(),
+                    incWeekendsCheckbox(),
+                    '-',
+                    modalToggleButton()
+                ]
+            }),
+            ...props
+        });
+    }
+});
+
+const metricSwitcher = hoistCmp.factory<AggChartModel>(({model}) => {
+    return select({
+        bind: 'metric',
+        options: model.selectableMetrics,
+        enableFilter: false,
+        flex: 1
+    });
+});
+
+const incWeekendsCheckbox = hoistCmp.factory<AggChartModel>(({model}) =>
+    checkbox({
+        omit: !model.showAsTimeseries,
+        bind: 'incWeekends',
+        label: 'Weekends',
+        style: {marginLeft: '10px'}
+    })
+);

package/admin/tabs/activity/tracking/datafields/DataFieldsEditor.ts

@@ -0,0 +1,147 @@
+import {DataFieldsEditorModel} from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel';
+import {form, FormModel} from '@xh/hoist/cmp/form';
+import {br, filler, hbox, hspacer, placeholder, span, vspacer} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {FieldType} from '@xh/hoist/data';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {formField} from '@xh/hoist/desktop/cmp/form';
+import {checkbox, select, textInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {popover} from '@xh/hoist/kit/blueprint';
+import {isEmpty} from 'lodash';
+
+export const dataFieldsEditor = hoistCmp.factory({
+    model: uses(DataFieldsEditorModel),
+
+    render({model}) {
+        const {showEditor, appliedDataFieldCount, hasAppliedDataFields} = model;
+
+        return popover({
+            isOpen: showEditor,
+            item: button({
+                text: `Extract Data Fields${appliedDataFieldCount ? ' (' + appliedDataFieldCount + ')' : ''}`,
+                icon: Icon.json({prefix: hasAppliedDataFields ? 'fas' : 'far'}),
+                intent: hasAppliedDataFields ? 'primary' : null,
+                outlined: showEditor,
+                onClick: () => model.show()
+            }),
+            content: formPanel(),
+            popoverClassName: 'xh-popup xh-popup--framed',
+            onClose: () => model.close()
+        });
+    }
+});
+
+const formPanel = hoistCmp.factory<DataFieldsEditorModel>(({model}) => {
+    const {formModel, dataFields} = model;
+    return panel({
+        className: 'xh-admin-activity-panel__data-fields-editor',
+        item: form({
+            model: formModel,
+            items: isEmpty(dataFields.value)
+                ? emptyPlaceholder()
+                : [
+                      ...dataFields.value.map((dfModel: FormModel) => {
+                          return form({
+                              model: dfModel,
+                              fieldDefaults: {label: null, commitOnChange: true},
+                              item: hbox({
+                                  className: 'xh-admin-activity-panel__data-fields-editor__row',
+                                  alignItems: 'flex-start',
+                                  flex: 'none',
+                                  items: [
+                                      formField({
+                                          field: 'path',
+                                          flex: 1,
+                                          item: textInput({placeholder: 'Path (dot-delimited)'})
+                                      }),
+                                      formField({
+                                          field: 'displayName',
+                                          width: 180,
+                                          item: textInput({placeholder: 'Display Name'})
+                                      }),
+                                      formField({
+                                          field: 'type',
+                                          width: 120,
+                                          item: select({
+                                              placeholder: 'Data Type',
+                                              options: Object.values(FieldType).sort()
+                                          })
+                                      }),
+                                      formField({
+                                          field: 'aggregator',
+                                          width: 120,
+                                          item: select({
+                                              placeholder: 'Aggregator',
+                                              // TODO - cascade select with type?
+                                              options: model.aggTokens,
+                                              enableClear: true
+                                          })
+                                      }),
+                                      formField({
+                                          field: 'isDimension',
+                                          marginTop: 8,
+                                          item: checkbox({label: 'dimension'})
+                                      }),
+                                      button({
+                                          icon: Icon.copy(),
+                                          marginTop: 3,
+                                          marginRight: 4,
+                                          onClick: () => model.cloneField(dfModel)
+                                      }),
+                                      button({
+                                          icon: Icon.delete(),
+                                          intent: 'danger',
+                                          marginTop: 3,
+                                          marginRight: 4,
+                                          onClick: () => dataFields.remove(dfModel)
+                                      })
+                                  ]
+                              })
+                          });
+                      }),
+                      hbox(filler(), addButton(), filler()),
+                      filler({minHeight: 10})
+                  ]
+        }),
+        bbar: [
+            filler(),
+            button({
+                text: 'Cancel',
+                onClick: () => model.close()
+            }),
+            hspacer(5),
+            button({
+                text: 'Apply + Reload',
+                icon: Icon.check(),
+                outlined: true,
+                intent: 'success',
+                disabled: !formModel.isValid,
+                onClick: () => model.applyAndClose()
+            })
+        ]
+    });
+});
+
+const emptyPlaceholder = hoistCmp.factory<DataFieldsEditorModel>(({model}) => {
+    return placeholder(
+        span(
+            'Define fields to extract from the optional data payload on each activity record.',
+            br(),
+            'Extracted data can then be viewed on both aggregate and detail levels.'
+        ),
+        vspacer(),
+        addButton()
+    );
+});
+
+const addButton = hoistCmp.factory<DataFieldsEditorModel>(({model}) => {
+    return button({
+        text: 'Add field...',
+        icon: Icon.add(),
+        intent: 'primary',
+        outlined: true,
+        onClick: () => model.addField()
+    });
+});