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

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

@@ -1,218 +0,0 @@
-/*
- * 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

@@ -1,61 +0,0 @@
-/*
- * 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

@@ -1,147 +0,0 @@
-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()
-    });
-});

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

@@ -1,133 +0,0 @@
-import {ActivityTrackingModel} from '@xh/hoist/admin/tabs/activity/tracking/ActivityTrackingModel';
-import {FormModel, SubformsFieldModel} from '@xh/hoist/cmp/form';
-import {HoistModel, managed} from '@xh/hoist/core';
-import {AggregatorToken, FieldType, genDisplayName, required} from '@xh/hoist/data';
-import {action, observable, makeObservable} from '@xh/hoist/mobx';
-import {computed} from '@xh/hoist/mobx';
-import {last, uniqBy} from 'lodash';
-
-/**
- * Slimmed down {@link CubeFieldSpec} for persisted specs of fields to be extracted from the `data`
- * block of loaded track statements and promoted to top-level columns in the grids. These are the
- * entities (stored on parent `ActivityTrackingModel`) that are edited by the this component.
- */
-export interface ActivityTrackingDataFieldSpec {
-    /**
-     * Path to field data within the `data` block of each track log entry. Can be dot-delimited for
-     * nested data (e.g. `timings.preAuth`). See {@link ActivityTrackingModel.processRawTrackLog}.
-     */
-    path: string;
-    /**
-     * Normalized name for the field for use in Cube/Grid - adds `df_` prefix to avoid conflicts
-     * and strips out dot-delimiters. See {@link ActivityTrackingModel.setDataFields}.
-     */
-    name: string;
-    displayName?: string;
-    type?: FieldType;
-    isDimension?: boolean;
-    aggregator?: AggregatorToken;
-}
-
-export class DataFieldsEditorModel extends HoistModel {
-    @observable showEditor = false;
-
-    @managed formModel: FormModel;
-    private parentModel: ActivityTrackingModel;
-
-    aggTokens: AggregatorToken[] = ['AVG', 'MAX', 'MIN', 'SINGLE', 'SUM', 'UNIQUE'];
-
-    get dataFields(): SubformsFieldModel {
-        return this.formModel.fields.dataFields as SubformsFieldModel;
-    }
-
-    @computed
-    get appliedDataFieldCount(): number {
-        return this.parentModel.dataFields.length;
-    }
-
-    get hasAppliedDataFields(): boolean {
-        return this.appliedDataFieldCount > 0;
-    }
-
-    constructor(parentModel: ActivityTrackingModel) {
-        super();
-        makeObservable(this);
-
-        this.parentModel = parentModel;
-
-        this.formModel = new FormModel({
-            fields: [
-                {
-                    name: 'dataFields',
-                    subforms: {
-                        fields: [
-                            {name: 'path', rules: [required]},
-                            {name: 'displayName'},
-                            {name: 'type', initialValue: 'auto'},
-                            {name: 'isDimension'},
-                            {name: 'aggregator'}
-                        ]
-                    }
-                }
-            ]
-        });
-
-        this.addReaction({
-            track: () => this.parentModel.dataFields,
-            run: () => this.syncFromParent(),
-            fireImmediately: true
-        });
-    }
-
-    @action
-    show() {
-        this.syncFromParent();
-        this.showEditor = true;
-    }
-
-    @action
-    applyAndClose() {
-        this.syncToParent();
-        this.showEditor = false;
-    }
-
-    @action
-    close() {
-        this.showEditor = false;
-    }
-
-    addField() {
-        this.dataFields.add();
-    }
-
-    cloneField(formModel: FormModel) {
-        const {dataFields} = this,
-            srcIdx = dataFields.value.indexOf(formModel);
-
-        dataFields.add({initialValues: formModel.getData(), index: srcIdx + 1});
-    }
-
-    private syncFromParent() {
-        this.formModel.init({
-            dataFields: this.parentModel.dataFields
-        });
-    }
-
-    /**
-     * Normalize field specs and set onto parent.
-     * Note, will de-dupe fields by name w/o any alert to user.
-     */
-    private syncToParent() {
-        const raw = this.formModel.getData().dataFields,
-            specs: ActivityTrackingDataFieldSpec[] = raw.map(it => {
-                const {displayName, path, aggregator: agg} = it;
-                return {
-                    ...it,
-                    name: 'df_' + path.replaceAll('.', '') + (agg ? `_${agg}` : ''),
-                    displayName: displayName || genDisplayName(last(path.split('.')))
-                };
-            });
-
-        this.parentModel.setDataFields(uniqBy(specs, 'name'));
-    }
-}

package/build/types/admin/tabs/activity/tracking/chart/AggChartModel.d.ts

@@ -1,33 +0,0 @@
-import { ChartModel } from '@xh/hoist/cmp/chart';
-import { HoistModel, SelectOption } from '@xh/hoist/core';
-import { ActivityTrackingModel } from '../ActivityTrackingModel';
-export declare class AggChartModel extends HoistModel {
-    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
-     */
-    metric: string;
-    get metricLabel(): string;
-    incWeekends: boolean;
-    chartModel: ChartModel;
-    get showAsTimeseries(): boolean;
-    get selectableMetrics(): SelectOption[];
-    constructor();
-    onLinked(): void;
-    private get cube();
-    private get dimensions();
-    private get primaryDim();
-    private get primaryDimLabel();
-    private get secondaryDim();
-    private get secondaryDimLabel();
-    private get data();
-    private createChartModel;
-    private selectRow;
-    private loadChart;
-    private getSeriesData;
-    private getDisplayName;
-}

package/build/types/admin/tabs/activity/tracking/chart/AggChartPanel.d.ts

@@ -1,2 +0,0 @@
-import { AggChartModel } from './AggChartModel';
-export declare const aggChartPanel: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<AggChartModel>>;

package/build/types/admin/tabs/activity/tracking/datafields/DataFieldsEditor.d.ts

@@ -1,2 +0,0 @@
-import { DataFieldsEditorModel } from '@xh/hoist/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel';
-export declare const dataFieldsEditor: import("@xh/hoist/core").ElementFactory<import("@xh/hoist/core").DefaultHoistProps<DataFieldsEditorModel>>;

package/build/types/admin/tabs/activity/tracking/datafields/DataFieldsEditorModel.d.ts

@@ -1,46 +0,0 @@
-import { ActivityTrackingModel } from '@xh/hoist/admin/tabs/activity/tracking/ActivityTrackingModel';
-import { FormModel, SubformsFieldModel } from '@xh/hoist/cmp/form';
-import { HoistModel } from '@xh/hoist/core';
-import { AggregatorToken, FieldType } from '@xh/hoist/data';
-/**
- * Slimmed down {@link CubeFieldSpec} for persisted specs of fields to be extracted from the `data`
- * block of loaded track statements and promoted to top-level columns in the grids. These are the
- * entities (stored on parent `ActivityTrackingModel`) that are edited by the this component.
- */
-export interface ActivityTrackingDataFieldSpec {
-    /**
-     * Path to field data within the `data` block of each track log entry. Can be dot-delimited for
-     * nested data (e.g. `timings.preAuth`). See {@link ActivityTrackingModel.processRawTrackLog}.
-     */
-    path: string;
-    /**
-     * Normalized name for the field for use in Cube/Grid - adds `df_` prefix to avoid conflicts
-     * and strips out dot-delimiters. See {@link ActivityTrackingModel.setDataFields}.
-     */
-    name: string;
-    displayName?: string;
-    type?: FieldType;
-    isDimension?: boolean;
-    aggregator?: AggregatorToken;
-}
-export declare class DataFieldsEditorModel extends HoistModel {
-    showEditor: boolean;
-    formModel: FormModel;
-    private parentModel;
-    aggTokens: AggregatorToken[];
-    get dataFields(): SubformsFieldModel;
-    get appliedDataFieldCount(): number;
-    get hasAppliedDataFields(): boolean;
-    constructor(parentModel: ActivityTrackingModel);
-    show(): void;
-    applyAndClose(): void;
-    close(): void;
-    addField(): void;
-    cloneField(formModel: FormModel): void;
-    private syncFromParent;
-    /**
-     * Normalize field specs and set onto parent.
-     * Note, will de-dupe fields by name w/o any alert to user.
-     */
-    private syncToParent;
-}