Customized chart context menu on lineChart.

client-app/src/desktop/tabs/charts/LineChartModel.ts

@@ -1,24 +1,56 @@
 import {ChartModel} from '@xh/hoist/cmp/chart';
-import {HoistModel, managed, XH} from '@xh/hoist/core';
+import {ChartMenuContext, ChartMenuToken} from '@xh/hoist/cmp/chart/Types';
+import {div, hr} from '@xh/hoist/cmp/layout';
+import {type ContextMenuSpec, HoistModel, managed, XH} from '@xh/hoist/core';
+import {fmtDate} from '@xh/hoist/format';
 import {observable, makeObservable, runInAction, bindable} from '@xh/hoist/mobx';
+import {Icon} from '@xh/hoist/icon';
+import {pluralize} from '@xh/hoist/utils/js';
 import Highcharts from 'highcharts/highstock';
 import {isEmpty} from 'lodash';
 
 export class LineChartModel extends HoistModel {
-    @bindable currentSymbol: string = '';
+    @bindable currentSymbols: string[] = [];
     @observable.ref symbols: string[] = [];
 
+    @bindable currentContextMenu = null;
+    contextMenuOptions = [
+        {
+            label: 'Default',
+            value: null
+        },
+        {
+            label: 'None',
+            value: false
+        },
+        {
+            label: 'Custom',
+            value: 'custom'
+        }
+    ];
+
     @managed
-    chartModel = new ChartModel({highchartsConfig: this.getChartModelCfg()});
+    @observable.ref
+    chartModel: ChartModel;
 
     constructor() {
         super();
         makeObservable(this);
 
         this.addReaction({
-            track: () => this.currentSymbol,
+            track: () => this.currentSymbols,
             run: () => this.loadAsync()
         });
+
+        this.addReaction({
+            track: () => this.currentContextMenu,
+            run: () => {
+                this.chartModel = this.getChartModel();
+                this.loadAsync();
+            }
+        });
+
+        this.chartModel = this.getChartModel();
     }
 
     override async doLoadAsync(loadSpec) {
@@ -27,36 +59,51 @@ export class LineChartModel extends HoistModel {
             runInAction(() => (this.symbols = symbols.slice(0, 5)));
         }
 
-        if (!this.currentSymbol) {
-            runInAction(() => (this.currentSymbol = this.symbols[0]));
+        if (isEmpty(this.currentSymbols)) {
+            runInAction(() => (this.currentSymbols = [this.symbols[0]]));
             return; // Reaction to `currentSymbol` value change will trigger final run.
         }
 
-        let series =
-            (await XH.portfolioService
-                .getLineChartSeriesAsync({
-                    symbol: this.currentSymbol,
-                    dimension: 'close',
-                    loadSpec
-                })
-                .catchDefault()) ?? {};
+        let series = await Promise.all(
+            this.currentSymbols.map(
+                it =>
+                    XH.portfolioService
+                        .getLineChartSeriesAsync({
+                            symbol: it,
+                            dimension: 'close',
+                            loadSpec
+                        })
+                        .catchDefault() ?? {}
+            )
+        );
 
-        Object.assign(series, {
+        Object.assign(series[0], {
             type: 'area',
             animation: true
         });
 
         this.chartModel.setSeries(series);
     }
 
+    private getChartModel() {
+        return new ChartModel({
+            highchartsConfig: this.getChartModelCfg(),
+            contextMenu:
+                this.currentContextMenu === 'custom'
+                    ? this.customContextMenu
+                    : this.currentContextMenu
+        });
+    }
+
     private getChartModelCfg() {
         const fillColor = Highcharts.getOptions().colors[0];
         return {
             chart: {zoomType: 'x'},
             navigator: {enabled: true},
             rangeSelector: {enabled: true},
-            exporting: {enabled: true},
+            exporting: {enabled: false},
             legend: {enabled: false},
+            tooltip: {shared: true},
             scrollbar: {enabled: false},
             xAxis: {type: 'datetime'},
             yAxis: {title: {text: 'USD'}},
@@ -78,4 +125,45 @@ export class LineChartModel extends HoistModel {
             }
         };
     }
+
+    private customContextMenu: ContextMenuSpec<ChartMenuToken, ChartMenuContext> = [
+        'viewFullscreen',
+        'copyToClipboard',
+        'printChart',
+        '-',
+        {
+            text: 'Images',
+            items: ['downloadJPEG', 'downloadPNG', 'downloadSVG', 'downloadPDF']
+        },
+        '-',
+        {
+            text: 'Data',
+            items: ['downloadCSV', 'downloadXLS']
+        },
+        '-',
+        {
+            text: 'Sample Custom Function',
+            icon: Icon.json(),
+            actionFn: (menuItemEvent, {point, points}) => {
+                const otherPtsCount = points.length - 1,
+                    message = div({
+                        items: point
+                            ? [
+                                  'Custom chart menu items have access to the clicked point(s) in the series.',
+                                  div(`${point.series.name}: (${fmtDate(point.x)}, ${point.y})`),
+                                  ...(!otherPtsCount
+                                      ? []
+                                      : [
+                                            hr(),
+                                            `${otherPtsCount} other ${pluralize('point', otherPtsCount)} available.`
+                                        ])
+                              ]
+                            : [
+                                  'Custom chart menu items have access to the clicked point in the series, when a point is active when opening the context menu.'
+                              ]
+                    });
+                XH.successToast({message});
+            }
+        }
+    ];
 }

client-app/src/desktop/tabs/charts/LineChartPanel.tsx

@@ -1,5 +1,5 @@
 import {chart} from '@xh/hoist/cmp/chart';
-import {span} from '@xh/hoist/cmp/layout';
+import {filler, span} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp} from '@xh/hoist/core';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
@@ -62,10 +62,18 @@ const tbar = hoistCmp.factory<LineChartModel>(({model}) => {
     return toolbar(
         span('Symbol'),
         select({
-            bind: 'currentSymbol',
+            bind: 'currentSymbols',
             options: model.symbols,
             enableFilter: false,
-            width: 120
+            enableMulti: true,
+            width: '40%'
+        }),
+        filler(),
+        span('Context Menu'),
+        select({
+            bind: 'currentContextMenu',
+            options: model.contextMenuOptions,
+            enableFilter: false
         })
     );
 });

client-app/src/desktop/tabs/charts/OHLCChartModel.ts

@@ -1,5 +1,7 @@
+import {div} from '@xh/hoist/cmp/layout';
 import {HoistModel, managed, XH} from '@xh/hoist/core';
 import {ChartModel} from '@xh/hoist/cmp/chart';
+import {Icon} from '@xh/hoist/icon';
 import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {fmtDate, fmtPrice} from '@xh/hoist/format';
 import {isEmpty} from 'lodash';
@@ -10,7 +12,43 @@ export class OHLCChartModel extends HoistModel {
     @bindable aspectRatio: number = null;
 
     @managed
-    chartModel = new ChartModel({highchartsConfig: this.getChartModelCfg()});
+    chartModel = new ChartModel({
+        highchartsConfig: this.getChartModelCfg(),
+        contextMenu: [
+            'viewFullscreen',
+            'copyToClipboard',
+            'printChart',
+            '-',
+            {
+                text: 'Images',
+                items: ['downloadJPEG', 'downloadPNG', 'downloadSVG', 'downloadPDF']
+            },
+            '-',
+            {
+                text: 'Data',
+                items: ['downloadCSV', 'downloadXLS']
+            },
+            '-',
+            {
+                text: 'Sample Custom Function',
+                icon: Icon.json(),
+                actionFn: (menuItemEvent, {point}) => {
+                    const message = div({
+                        items: point
+                            ? [
+                                  'Custom chart menu items have access to the clicked point in the series.',
+                                  div(`X: ${fmtDate(point.x)}`),
+                                  div(`Y: ${point.y}`)
+                              ]
+                            : [
+                                  'Custom chart menu items have access to the clicked point in the series, when a point is active when opening the context menu.'
+                              ]
+                    });
+                    XH.successToast({message});
+                }
+            }
+        ]
+    });
 
     constructor() {
         super();

client-app/src/desktop/tabs/charts/OHLCChartPanel.tsx

@@ -1,7 +1,7 @@
 import {chart} from '@xh/hoist/cmp/chart';
 import {filler, span} from '@xh/hoist/cmp/layout';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
-import {button} from '@xh/hoist/desktop/cmp/button/index';
+import {button} from '@xh/hoist/desktop/cmp/button';
 import {numberInput, select} from '@xh/hoist/desktop/cmp/input';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {toolbar, toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';

client-app/src/desktop/tabs/panels/BasicPanel.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import {creates, hoistCmp, XH} from '@xh/hoist/core';
-import {div, filler, p} from '@xh/hoist/cmp/layout';
+import {div, filler, p, span} from '@xh/hoist/cmp/layout';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
 import {panel} from '@xh/hoist/desktop/cmp/panel';
 import {select, switchInput} from '@xh/hoist/desktop/cmp/input';
 import {toolbarSep} from '@xh/hoist/desktop/cmp/toolbar';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {Icon} from '@xh/hoist/icon';
 import {wait} from '@xh/hoist/promise';
-import {clipboardMenuItem} from '@xh/hoist/desktop/cmp/clipboard';
 import {wrapper} from '../../common';
 import {usStates} from '../../../core/data';
 import {BasicPanelModel} from './BasicPanelModel';
@@ -70,22 +69,7 @@ export const basicPanel = hoistCmp.factory({
                             })
                     })
                 ],
-                contextMenu: [
-                    clipboardMenuItem({
-                        text: 'Copy Text',
-                        getCopyText: () => model.demoText.join('\n')
-                    }),
-                    {
-                        text: 'Increase Text Size',
-                        icon: Icon.plusCircle(),
-                        actionFn: () => model.changeTextSize(true)
-                    },
-                    {
-                        text: 'Decrease Text Size',
-                        icon: Icon.minusCircle(),
-                        actionFn: () => model.changeTextSize(false)
-                    }
-                ],
+                contextMenu: model.appliedContextMenu,
                 tbar: [
                     popover({
                         position: 'bottom-left',
@@ -113,6 +97,11 @@ export const basicPanel = hoistCmp.factory({
                                 ]
                             })
                         )
+                    }),
+                    filler(),
+                    span('Context Menu'),
+                    switchInput({
+                        bind: 'showContextMenu'
                     })
                 ],
                 items: [