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

package/admin/tabs/activity/tracking/charts/ChartsModel.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 {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

@@ -1,76 +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 {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
-            })
-        ]
-    });
-});

package/build/types/admin/tabs/activity/tracking/charts/ChartsModel.d.ts

@@ -1,34 +0,0 @@
-/// <reference types="react" />
-import { ChartModel } from '@xh/hoist/cmp/chart';
-import { HoistModel } from '@xh/hoist/core';
-import { PanelModel } from '@xh/hoist/desktop/cmp/panel';
-import { ActivityTrackingModel } from '../ActivityTrackingModel';
-export declare class ChartsModel extends HoistModel {
-    panelModel: PanelModel;
-    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.
-     */
-    metric: 'entryCount' | 'count' | 'elapsed';
-    /** show weekends on the activity chart */
-    incWeekends: boolean;
-    categoryChartModel: ChartModel;
-    timeseriesChartModel: ChartModel;
-    get showAsTimeseries(): boolean;
-    get chartModel(): ChartModel;
-    get primaryDim(): string;
-    get secondaryDim(): string;
-    get data(): import("../../../../../data").StoreRecord[];
-    get dimensions(): string[];
-    constructor();
-    getLabelForMetric(metric: any, multiline: any): string | import("react").ReactElement<{
-        children?: import("react").ReactNode;
-    }, any>;
-    private selectRow;
-    onLinked(): void;
-    private loadChart;
-    private getSeriesData;
-    private getUnitsForDim;
-}

package/build/types/admin/tabs/activity/tracking/charts/ChartsPanel.d.ts

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