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

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

@@ -4,24 +4,22 @@
  *
  * 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, filler, hframe} from '@xh/hoist/cmp/layout';
+import {div, 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 {aggChartPanel} from '@xh/hoist/admin/tabs/activity/tracking/chart/AggChartPanel';
+import {chartsPanel} from './charts/ChartsPanel';
 import {activityDetailView} from './detail/ActivityDetailView';
 import './ActivityTracking.scss';
 
@@ -38,20 +36,14 @@ export const activityTrackingPanel = hoistCmp.factory({
         return panel({
             className: 'xh-admin-activity-panel',
             tbar: tbar(),
-            items: [filterBar(), hframe(aggregateView(), activityDetailView({flex: 1}))],
+            item: 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: [
@@ -73,96 +65,74 @@ const tbar = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
                     onClick: () => model.adjustDates('add'),
                     disabled: model.endDay >= LocalDate.currentAppDay()
                 }),
-                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
-                        })
-                    ]
-                }),
+                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(),
-                filterChooserToggleButton(),
+                filterChooser({
+                    flex: 1,
+                    enableClear: true
+                }),
                 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 ? 'primary' : 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({
-        collapsedTitle: 'Aggregate Activity',
-        collapsedIcon: Icon.users(),
+        title: 'Aggregate Activity Report',
+        icon: Icon.users(),
         compactHeader: true,
         modelConfig: {
             side: 'left',
-            defaultSize: 500,
-            persistWith: {...model.persistWith, path: 'aggPanel'}
+            defaultSize: 500
         },
-        tbar: toolbar({
-            compact: true,
-            items: [
-                groupingChooser({flex: 1, maxWidth: 300}),
-                filler(),
-                colChooserButton(),
-                exportButton()
-            ]
-        }),
+        tbar: [groupingChooser({flex: 1}), colChooserButton(), exportButton()],
         items: [
             grid({
                 flex: 1,
@@ -176,7 +146,7 @@ const aggregateView = hoistCmp.factory<ActivityTrackingModel>(({model}) => {
                 ],
                 omit: !model.maxRowsReached
             }),
-            aggChartPanel()
+            chartsPanel()
         ]
     });
 });

package/admin/tabs/activity/tracking/charts/ChartsModel.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 {br, fragment} from '@xh/hoist/cmp/layout';
+import {HoistModel, managed, lookup} from '@xh/hoist/core';
+import {capitalizeWords, fmtDate} from '@xh/hoist/format';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+import {filter, sortBy, isEmpty} from 'lodash';
+import moment from 'moment';
+import {PanelModel} from '@xh/hoist/desktop/cmp/panel';
+import {ActivityTrackingModel} from '../ActivityTrackingModel';
+import {ONE_DAY} from '@xh/hoist/utils/datetime/DateTimeUtils';
+
+export class ChartsModel extends HoistModel {
+    @managed panelModel = new PanelModel({
+        modalSupport: {width: '90vw', height: '60vh'},
+        side: 'bottom',
+        defaultSize: 370
+    });
+
+    @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.
+     */
+    @bindable
+    metric: 'entryCount' | 'count' | 'elapsed' = 'entryCount';
+
+    /** show weekends on the activity chart */
+    @bindable
+    incWeekends: boolean = false;
+
+    @managed
+    categoryChartModel: ChartModel = new ChartModel({
+        highchartsConfig: {
+            chart: {type: 'column', animation: false},
+            plotOptions: {column: {animation: false}},
+            legend: {enabled: false},
+            title: {text: null},
+            xAxis: {type: 'category', title: {}},
+            yAxis: [{title: {text: null}, allowDecimals: false}]
+        }
+    });
+
+    @managed
+    timeseriesChartModel: ChartModel = new ChartModel({
+        highchartsConfig: {
+            chart: {type: 'line', animation: false},
+            plotOptions: {
+                line: {
+                    events: {
+                        click: e => this.selectRow(e)
+                    },
+                    width: 1,
+                    animation: false,
+                    step: 'left'
+                }
+            },
+            legend: {enabled: false},
+            title: {text: null},
+            xAxis: {
+                type: 'datetime',
+                title: {},
+                units: [
+                    ['day', [1]],
+                    ['week', [2]],
+                    ['month', [1]]
+                ],
+                labels: {
+                    formatter: function () {
+                        return fmtDate(this.value, 'D MMM');
+                    }
+                }
+            },
+            yAxis: [{title: {text: null}, allowDecimals: false}]
+        }
+    });
+
+    get showAsTimeseries(): boolean {
+        return this.dimensions[0] === 'day';
+    }
+
+    get chartModel(): ChartModel {
+        return this.showAsTimeseries ? this.timeseriesChartModel : this.categoryChartModel;
+    }
+
+    get primaryDim(): string {
+        return this.dimensions[0];
+    }
+
+    get secondaryDim(): string {
+        const {dimensions} = this;
+        return dimensions.length >= 2 ? dimensions[1] : null;
+    }
+
+    get data() {
+        const roots = this.activityTrackingModel.gridModel.store.allRootRecords;
+        return roots.length ? roots[0].children : [];
+    }
+
+    get dimensions() {
+        return this.activityTrackingModel.dimensions;
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    getLabelForMetric(metric, multiline) {
+        switch (metric) {
+            case 'count':
+                return multiline
+                    ? fragment(`Unique`, br(), `${this.getUnitsForDim(this.secondaryDim)} Count`)
+                    : `Unique ${this.getUnitsForDim(this.secondaryDim)} Count`;
+            case 'entryCount':
+                return multiline ? fragment('Total', br(), 'Entry Count') : 'Total Entry Count';
+            case 'elapsed':
+                return 'Elapsed ms';
+            default:
+                return '???';
+        }
+    }
+
+    //-----------------
+    // Implementation
+    //-----------------
+
+    private selectRow(e) {
+        const date = moment(e.point.x).format('YYYY-MM-DD'),
+            id = `root>>day=[${date}]`;
+        this.activityTrackingModel.gridModel.selectAsync(id);
+    }
+
+    override onLinked() {
+        this.addReaction({
+            track: () => [this.data, this.metric, this.incWeekends],
+            run: () => this.loadChart()
+        });
+    }
+
+    private loadChart() {
+        const {showAsTimeseries, chartModel, primaryDim} = this,
+            series = this.getSeriesData();
+
+        if (!showAsTimeseries) {
+            chartModel.updateHighchartsConfig({
+                xAxis: {title: {text: this.getUnitsForDim(primaryDim)}}
+            });
+        }
+
+        chartModel.setSeries(series);
+    }
+
+    private getSeriesData() {
+        const {data, metric, primaryDim, showAsTimeseries} = this,
+            metricLabel = this.getLabelForMetric(metric, false);
+        let sortedData = sortBy(data, aggRow => {
+                const {cubeLabel} = aggRow.data;
+                switch (primaryDim) {
+                    case 'day':
+                        return LocalDate.from(cubeLabel).timestamp;
+                    case 'month':
+                        return moment(cubeLabel, 'MMM YYYY').valueOf();
+                    default:
+                        return cubeLabel;
+                }
+            }),
+            chartData = sortedData.map(aggRow => {
+                const {cubeLabel} = aggRow.data,
+                    xVal = showAsTimeseries ? LocalDate.from(cubeLabel).timestamp : cubeLabel,
+                    yVal = Math.round(aggRow.data[metric]);
+                return [xVal, yVal];
+            });
+
+        // Insert data where no activity was logged
+        if (showAsTimeseries) {
+            const fillData = [];
+            for (let i = 1; i < chartData.length; i++) {
+                const skippedDayCount = Math.floor(
+                    (chartData[i][0] - chartData[i - 1][0]) / ONE_DAY - 1
+                );
+                if (skippedDayCount > 0) {
+                    for (let j = 1; j <= skippedDayCount; j++) {
+                        const skippedDate = chartData[i - 1][0] + j * ONE_DAY;
+                        fillData.push([skippedDate, 0]);
+                    }
+                }
+            }
+            if (!isEmpty(fillData)) {
+                chartData.push(...fillData);
+                chartData = sortBy(chartData, data => data[0]);
+            }
+
+            if (!this.incWeekends) {
+                chartData = filter(chartData, data => LocalDate.from(data[0]).isWeekday);
+            }
+        }
+        return [{name: metricLabel, data: chartData}];
+    }
+
+    private getUnitsForDim(dim) {
+        return (
+            {
+                username: 'User',
+                msg: 'Message'
+            }[dim] ?? capitalizeWords(dim)
+        );
+    }
+}

package/admin/tabs/activity/tracking/charts/ChartsPanel.ts

@@ -0,0 +1,76 @@
+/*
+ * 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 {hoistCmp, creates} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {buttonGroupInput} from '@xh/hoist/desktop/cmp/input';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon/Icon';
+import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
+import {checkbox} from '@xh/hoist/desktop/cmp/input';
+import {hspacer} from '@xh/hoist/cmp/layout';
+import {ChartsModel} from './ChartsModel';
+
+export const chartsPanel = hoistCmp.factory({
+    model: creates(ChartsModel),
+    render({model, ...props}) {
+        const {chartModel, activityTrackingModel, panelModel} = model,
+            {isModal} = panelModel;
+        return panel({
+            title: !isModal ? 'Aggregate Activity Chart' : activityTrackingModel.queryDisplayString,
+            icon: Icon.chartBar(),
+            model: panelModel,
+            compactHeader: !isModal,
+            item: chart({model: chartModel}),
+            bbar: bbar(),
+            height: '100%',
+            ...props
+        });
+    }
+});
+
+const bbar = hoistCmp.factory<ChartsModel>(() =>
+    toolbar(metricSwitcher({multiline: true}), hspacer(), incWeekendsCheckbox())
+);
+
+const incWeekendsCheckbox = hoistCmp.factory<ChartsModel>(({model}) =>
+    checkbox({
+        omit: !model.showAsTimeseries,
+        bind: 'incWeekends',
+        label: 'Inc Wknds'
+    })
+);
+
+const metricSwitcher = hoistCmp.factory<ChartsModel>(({model, multiline}) => {
+    return buttonGroupInput({
+        className: 'xh-admin-activity-panel__metric-switcher',
+        bind: 'metric',
+        outlined: true,
+        flex: 2,
+        items: [
+            button({
+                text: model.getLabelForMetric('entryCount', multiline),
+                value: 'entryCount',
+                outlined: true,
+                flex: 1
+            }),
+            button({
+                text: model.getLabelForMetric('count', multiline),
+                value: 'count',
+                outlined: true,
+                flex: 1,
+                omit: !model.secondaryDim
+            }),
+            button({
+                text: model.getLabelForMetric('elapsed', multiline),
+                value: 'elapsed',
+                outlined: true,
+                flex: 1
+            })
+        ]
+    });
+});