Merge pull request #267 from lineupjs/sgratzl/config

Improve customization of column types, toolbar actions and dialogs
lineupjs · Mar 31, 2020 · 9d9c5de · 9d9c5de
2 parents 2fcc3d6 + 9a97a80
commit 9d9c5de
Show file tree

Hide file tree

Showing 45 changed files with 283 additions and 118 deletions.
diff --git a/demo/custom_column.html b/demo/custom_column.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+  <meta charset="UTF-8">
+  <title>LineUp Builder Test</title>
+
+  <link href="./LineUpJS.css" rel="stylesheet">
+  <link href="./demo.css" rel="stylesheet">
+  <style>
+    .lu-action-my-action::before {
+      content: "My";
+    }
+  </style>
+</head>
+<body>
+<script src="./LineUpJS.js"></script>
+
+<script>
+  window.onload = function () {
+    const arr = [];
+    const cats = ['c1', 'c2', 'c3'];
+    for (let i = 0; i < 100; ++i) {
+      arr.push({
+        s: 'Row ' + i,
+        a: Math.random() * 10,
+        cat: cats[Math.floor(Math.random() * 3)],
+        d: new Date(Date.now() - Math.floor(Math.random() * 1000000000000))
+      });
+    }
+    const b = LineUpJS.builder(arr);
+
+    class MyColumn extends LineUpJS.Column {
+      firstN = 1;
+
+      setFirstN(val) {
+        if (this.firstN === val) {
+          return;
+        }
+        this.fire(['groupingChanged', LineUpJS.Column.EVENT_DIRTY_VALUES, LineUpJS.Column.EVENT_DIRTY], this.firstN, this.firstN = val);
+      }
+
+     createEventList() {
+        return super.createEventList().concat(['groupingChanged']);
+      }
+
+      getValue(row) {
+        return row.v[this.desc.column];
+      }
+
+      group(row) {
+        const v = this.getValue(row);
+        if (!v) {
+          return super.group(row);
+        }
+        const g = v.slice(0, this.firstN);
+        return {
+          name: g,
+          color: 'grey'
+        };
+      }
+    }
+    LineUpJS.toolbar('group', 'groupBy', 'rename', 'my')(MyColumn);
+    LineUpJS.dialogAddons('group', 'myGroupAddon')(MyColumn);
+
+    b.registerColumnType('my', MyColumn);
+    b.registerToolbarAction('my', {
+      title: 'My Action',
+      onClick: () => {
+        window.alert('clicked');
+      },
+      options: {
+        mode: 'menu+shortcut'
+      }
+    })
+    b.registerToolbarDialogAddon('myGroupAddon', {
+      title: 'Group by the X first characters',
+      order: 1,
+      livePreview: true, // optional, default = false
+      append(col, node, dialog, ctx) {
+        const val = col.firstN;
+        node.insertAdjacentHTML('beforeend', `
+          <input type="number" name="count" step="1" min="1" value="${val}">
+        `);
+        const input = node.lastElementChild;
+        return {
+          elems: [input],
+          submit() {
+            col.setFirstN(input.valueAsNumber);
+          },
+          cancel() {
+            col.setFirstN(val);
+          },
+          reset() {
+            input.value = '1';
+          }
+        };
+      }
+    })
+
+    b.column({
+      type: 'my',
+      column: 's',
+      renderer: 'default',
+      groupRenderer: 'string',
+    });
+
+    const lineup = b.build(document.body);
+  };
+</script>
+
+</body>
+</html>
diff --git a/src/builder/LineUpBuilder.ts b/src/builder/LineUpBuilder.ts
@@ -9,7 +9,8 @@ import {IToolbarAction, IToolbarDialogAddon} from '../ui';
 export default class LineUpBuilder {
   protected readonly options: Partial<ITaggleOptions> = {
     renderers: {},
-    toolbar: {},
+    toolbarActions: {},
+    toolbarDialogAddons: {},
     flags: {}
   };
 
@@ -126,7 +127,7 @@ export default class LineUpBuilder {
    * @param action
    */
   registerToolbarAction(id: string, action: IToolbarAction) {
-    this.options.toolbar![id] = action;
+    this.options.toolbarActions![id] = action;
     return this;
   }
 
@@ -136,7 +137,7 @@ export default class LineUpBuilder {
    * @param addon addon description
    */
   registerToolbarDialogAddon(id: string, addon: IToolbarDialogAddon) {
-    this.options.toolbar![id] = addon;
+    this.options.toolbarDialogAddons![id] = addon;
     return this;
   }
 

diff --git a/src/builder/adapter/lineup.ts b/src/builder/adapter/lineup.ts
@@ -7,7 +7,7 @@ import {equal, isSame, pick} from './utils';
 
 
 const providerOptions: (keyof IDataProviderOptions | keyof ILocalDataProviderOptions)[] = ['singleSelection', 'filterGlobally', 'columnTypes', 'taskExecutor', 'jumpToSearchResult'];
-const lineupOptions: (keyof IBuilderAdapterProps)[] = ['animated', 'sidePanel', 'sidePanelCollapsed', 'hierarchyIndicator', 'defaultSlopeGraphMode', 'summaryHeader', 'expandLineOnHover', 'overviewMode', 'renderers', 'canRender', 'toolbar', 'rowHeight', 'rowPadding', 'groupHeight', 'groupPadding', 'dynamicHeight', 'labelRotation', 'ignoreUnsupportedBrowser', 'livePreviews'];
+const lineupOptions: (keyof IBuilderAdapterProps)[] = ['animated', 'sidePanel', 'sidePanelCollapsed', 'hierarchyIndicator', 'defaultSlopeGraphMode', 'summaryHeader', 'expandLineOnHover', 'overviewMode', 'renderers', 'canRender', 'toolbarActions', 'toolbarDialogAddons', 'rowHeight', 'rowPadding', 'groupHeight', 'groupPadding', 'dynamicHeight', 'labelRotation', 'ignoreUnsupportedBrowser', 'livePreviews'];
 
 interface IRankingContext {
   builders: IBuilderAdapterRankingProps[];

diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,5 @@
 import {renderers} from './renderer/renderers';
-import {toolbarActions} from './ui/toolbar';
+import {toolbarActions, toolbarDialogAddons} from './ui/toolbar';
 import {Column, Ranking, IGroupData, IGroupItem} from './model';
 import {IDataProvider} from './provider';
 import {ICellRendererFactory, ERenderMode} from './renderer';
@@ -52,6 +52,10 @@ export interface ILineUpFlags {
   advancedUIFeatures: boolean;
 }
 
+export interface IToolbarLookup<T> {
+  [key: string]: T;
+}
+
 export interface ILivePreviewOptions {
   search: boolean;
   filter: boolean;
@@ -66,7 +70,6 @@ export interface ILivePreviewOptions {
   cutOff: boolean;
 }
 
-
 export interface ILineUpOptions {
   /**
    * option to enable/disable showing a summary (histogram, ...) in the header
@@ -167,7 +170,18 @@ export interface ILineUpOptions {
   /**
    * register custom toolbar actions and dialog addons
    */
-  toolbar: {[key: string]: IToolbarAction | IToolbarDialogAddon};
+  toolbarActions: IToolbarLookup<IToolbarAction>;
+  toolbarDialogAddons: IToolbarLookup<IToolbarDialogAddon>;
+
+  /**
+   * hook for postprocess the toolbar actions for a column
+   */
+  resolveToolbarActions: (col: Column, keys: string[], lookup: IToolbarLookup<IToolbarAction>) => IToolbarAction[];
+  /**
+   * hook for postprocess the toolbar dialog addons for a column
+   */
+  resolveToolbarDialogAddons: (col: Column, keys: string[], lookup: IToolbarLookup<IToolbarDialogAddon>) => IToolbarDialogAddon[];
+
   /**
    * register custom renderer factories
    */
@@ -207,10 +221,39 @@ export interface ILineUpLike {
   destroy(): void;
 }
 
+function resolveToolbarActions(col: Column, keys: string[], lookup: IToolbarLookup<IToolbarAction>) {
+  const actions: IToolbarAction[] = [];
+
+  keys.forEach((key) => {
+    if (lookup.hasOwnProperty(key)) {
+      actions.push(lookup[key]);
+    } else {
+      console.warn(`cannot find toolbar action of type: "${col.desc.type}" with key "${key}"`);
+    }
+  });
+  return actions;
+}
+
+function resolveToolbarDialogAddons(col: Column, keys: string[], lookup: IToolbarLookup<IToolbarDialogAddon>) {
+  const actions: IToolbarDialogAddon[] = [];
+
+  keys.forEach((key) => {
+    if (lookup.hasOwnProperty(key)) {
+      actions.push(lookup[key]);
+    } else {
+      console.warn(`cannot find toolbar dialog addon of type: "${col.desc.type}" with key "${key}"`);
+    }
+  });
+  return actions;
+}
+
 
 export function defaultOptions(): ITaggleOptions {
   return {
-    toolbar: Object.assign({}, toolbarActions),
+    toolbarActions,
+    toolbarDialogAddons,
+    resolveToolbarActions,
+    resolveToolbarDialogAddons,
     renderers: Object.assign({}, renderers),
     canRender: () => true,
 

diff --git a/src/model/AggregateGroupColumn.ts b/src/model/AggregateGroupColumn.ts
@@ -38,7 +38,7 @@ export declare function aggregate(ranking: Ranking, group: IGroup, value: boolea
 /**
  * a checkbox column for selections
  */
-@toolbar('setShowTopN')
+@toolbar('setShowTopN', 'rename')
 @SupportType()
 @Category('support')
 export default class AggregateGroupColumn extends Column {

diff --git a/src/model/BooleanColumn.ts b/src/model/BooleanColumn.ts
@@ -40,7 +40,7 @@ export declare function filterChanged_BC(previous: boolean | null, current: bool
 /**
  * a string column with optional alignment
  */
-@toolbar('group', 'groupBy', 'filterBoolean', 'colorMappedCategorical')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'group', 'groupBy', 'filterBoolean', 'colorMappedCategorical')
 @Category('categorical')
 export default class BooleanColumn extends ValueColumn<boolean> implements ICategoricalColumn {
   static readonly EVENT_FILTER_CHANGED = 'filterChanged';

diff --git a/src/model/BooleansColumn.ts b/src/model/BooleansColumn.ts
@@ -8,6 +8,7 @@ import Column, {labelChanged, metaDataChanged, dirty, dirtyHeader, dirtyValues,
 import {IEventListener} from '../internal';
 import {chooseUIntByDataLength, integrateDefaults} from './internal';
 import {toCategory} from './internalCategorical';
+import {toolbar} from './annotations';
 
 
 export declare type IBooleansColumnDesc = IArrayColumnDesc<boolean>;
@@ -19,7 +20,7 @@ export declare type IBooleansColumnDesc = IArrayColumnDesc<boolean>;
  */
 export declare function colorMappingChanged_BCS(previous: ICategoricalColorMappingFunction, current: ICategoricalColorMappingFunction): void;
 
-
+@toolbar('rename', 'clone', 'sort', 'sortBy')
 export default class BooleansColumn extends ArrayColumn<boolean> implements ISetColumn {
   static readonly EVENT_COLOR_MAPPING_CHANGED = CategoricalColumn.EVENT_COLOR_MAPPING_CHANGED;
 

diff --git a/src/model/BoxPlotColumn.ts b/src/model/BoxPlotColumn.ts
@@ -46,7 +46,7 @@ export declare function colorMappingChanged_BPC(previous: IColorMappingFunction,
 export declare function filterChanged_BPC(previous: INumberFilter | null, current: INumberFilter | null): void;
 
 
-@toolbar('filterNumber', 'colorMapped', 'editMapping')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'filterNumber', 'colorMapped', 'editMapping')
 @dialogAddons('sort', 'sortBoxPlot')
 @Category('array')
 @SortByDefault('descending')

diff --git a/src/model/CategoricalColumn.ts b/src/model/CategoricalColumn.ts
@@ -27,7 +27,7 @@ export declare function filterChanged_CC(previous: ICategoricalFilter | null, cu
 /**
  * column for categorical values
  */
-@toolbar('group', 'groupBy', 'sortGroupBy', 'filterCategorical', 'colorMappedCategorical')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'group', 'groupBy', 'sortGroupBy', 'filterCategorical', 'colorMappedCategorical')
 @Category('categorical')
 export default class CategoricalColumn extends ValueColumn<string> implements ICategoricalColumn {
   static readonly EVENT_FILTER_CHANGED = 'filterChanged';

diff --git a/src/model/CategoricalMapColumn.ts b/src/model/CategoricalMapColumn.ts
@@ -19,7 +19,7 @@ export declare type ICategoricalMapColumnDesc = ICategoricalDesc & IMapColumnDes
  */
 export declare function colorMappingChanged_CMC(previous: ICategoricalColorMappingFunction, current: ICategoricalColorMappingFunction): void;
 
-@toolbar('colorMappedCategorical')
+@toolbar('rename', 'colorMappedCategorical')
 export default class CategoricalMapColumn extends MapColumn<string | null> implements ICategoricalLikeColumn {
   static readonly EVENT_COLOR_MAPPING_CHANGED = CategoricalColumn.EVENT_COLOR_MAPPING_CHANGED;
 

diff --git a/src/model/CategoricalsColumn.ts b/src/model/CategoricalsColumn.ts
@@ -21,7 +21,7 @@ export declare function colorMappingChanged_CCS(previous: ICategoricalColorMappi
 /**
  * a string column with optional alignment
  */
-@toolbar('colorMappedCategorical')
+@toolbar('rename', 'colorMappedCategorical')
 export default class CategoricalsColumn extends ArrayColumn<string | null> implements ICategoricalsColumn {
   static readonly EVENT_COLOR_MAPPING_CHANGED = CategoricalColumn.EVENT_COLOR_MAPPING_CHANGED;
 

diff --git a/src/model/CompositeNumberColumn.ts b/src/model/CompositeNumberColumn.ts
@@ -3,7 +3,7 @@ import CompositeColumn from './CompositeColumn';
 import {IDataRow, IGroup, IColumnDesc} from './interfaces';
 import {isMissingValue} from './missing';
 import NumberColumn from './NumberColumn';
-import {SortByDefault} from './annotations';
+import {SortByDefault, toolbar} from './annotations';
 import {ISequence} from '../internal';
 import {INumberColumn} from './INumberColumn';
 
@@ -20,6 +20,7 @@ export declare type ICompositeNumberColumnDesc = ICompositeNumberDesc & IColumnD
 /**
  * implementation of a combine column, standard operations how to select
  */
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'group', 'groupBy')
 @SortByDefault('descending')
 export default class CompositeNumberColumn extends CompositeColumn implements INumberColumn {
   private readonly numberFormat: (n: number) => string = format('.3n');

diff --git a/src/model/DateColumn.ts b/src/model/DateColumn.ts
@@ -26,7 +26,7 @@ export declare function filterChanged_DC(previous: IDateFilter | null, current:
  */
 export declare function groupingChanged_DC(previous: IDateGrouper | null, current: IDateGrouper | null): void;
 
-@toolbar('groupBy', 'sortGroupBy', 'filterDate')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'groupBy', 'sortGroupBy', 'filterDate')
 @dialogAddons('group', 'groupDate')
 @Category('date')
 export default class DateColumn extends ValueColumn<Date> implements IDateColumn {

diff --git a/src/model/DatesColumn.ts b/src/model/DatesColumn.ts
@@ -37,7 +37,7 @@ export declare function sortMethodChanged_DCS(previous: EDateSort, current: EDat
  */
 export declare function filterChanged_DCS(previous: IDateFilter | null, current: IDateFilter | null): void;
 
-@toolbar('filterDate')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'filterDate')
 @dialogAddons('sort', 'sortDates')
 export default class DatesColumn extends ArrayColumn<Date | null> implements IDatesColumn {
   static readonly EVENT_SORTMETHOD_CHANGED = 'sortMethodChanged';

diff --git a/src/model/DatesMapColumn.ts b/src/model/DatesMapColumn.ts
@@ -30,7 +30,7 @@ export declare function sortMethodChanged_DMC(previous: EDateSort, current: EDat
 export declare function filterChanged_DMC(previous: IDateFilter | null, current: IDateFilter | null): void;
 
 
-@toolbar('filterDate')
+@toolbar('rename', 'filterDate')
 @dialogAddons('sort', 'sortDates')
 export default class DatesMapColumn extends MapColumn<Date | null> implements IDateColumn {
   static readonly EVENT_SORTMETHOD_CHANGED = DatesColumn.EVENT_SORTMETHOD_CHANGED;

diff --git a/src/model/GroupColumn.ts b/src/model/GroupColumn.ts
@@ -22,7 +22,7 @@ export declare function sortMethodChanged(previous: EGroupSortMethod, current: E
 
 
 @SupportType()
-@toolbar('sortGroupBy')
+@toolbar('rename', 'sortGroupBy')
 @dialogAddons('sortGroup', 'sortGroups')
 @Category('support')
 export default class GroupColumn extends Column {

diff --git a/src/model/HierarchyColumn.ts b/src/model/HierarchyColumn.ts
@@ -52,7 +52,7 @@ export declare function cutOffChanged(previous: ICutOffNode, current: ICutOffNod
 /**
  * column for hierarchical categorical values
  */
-@toolbar('cutoff', 'group', 'groupBy', 'colorMappedCategorical')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'cutoff', 'group', 'groupBy', 'colorMappedCategorical')
 @Category('categorical')
 export default class HierarchyColumn extends ValueColumn<string> implements ICategoricalColumn {
   static readonly EVENT_CUTOFF_CHANGED = 'cutOffChanged';

diff --git a/src/model/ImpositionBoxPlotColumn.ts b/src/model/ImpositionBoxPlotColumn.ts
@@ -40,7 +40,7 @@ export declare function colorMappingChanged_IPBC(previous: IColorMappingFunction
 /**
  * implementation of a combine column, standard operations how to select
  */
-@toolbar('filterNumber', 'colorMapped', 'editMapping')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'filterNumber', 'colorMapped', 'editMapping')
 @dialogAddons('sort', 'sortBoxPlot')
 @SortByDefault('descending')
 export default class ImpositionBoxPlotColumn extends CompositeColumn implements IBoxPlotColumn {

diff --git a/src/model/ImpositionCompositeColumn.ts b/src/model/ImpositionCompositeColumn.ts
@@ -37,7 +37,7 @@ export declare function colorMappingChanged_ICC(previous: IColorMappingFunction,
 /**
  * implementation of a combine column, standard operations how to select
  */
-@toolbar('filterNumber', 'colorMapped', 'editMapping')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'filterNumber', 'colorMapped', 'editMapping')
 @SortByDefault('descending')
 export default class ImpositionCompositeColumn extends CompositeColumn implements INumberColumn, IMapAbleColumn {
   static readonly EVENT_MAPPING_CHANGED = NumberColumn.EVENT_MAPPING_CHANGED;

diff --git a/src/model/ImpositionCompositesColumn.ts b/src/model/ImpositionCompositesColumn.ts
@@ -38,7 +38,7 @@ export declare function colorMappingChanged_ICCS(previous: IColorMappingFunction
 /**
  * implementation of a combine column, standard operations how to select
  */
-@toolbar('filterNumber', 'colorMapped', 'editMapping')
+@toolbar('rename', 'clone', 'sort', 'sortBy', 'filterNumber', 'colorMapped', 'editMapping')
 @dialogAddons('sort', 'sortNumbers')
 @SortByDefault('descending')
 export default class ImpositionCompositesColumn extends CompositeColumn implements INumbersColumn {