color mapping dialog

lineupjs · Nov 23, 2018 · 41c4511 · 41c4511
1 parent 119c5ef
commit 41c4511
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/src/ui/dialogs/CategoricalColorMappingDialog.ts b/src/ui/dialogs/CategoricalColorMappingDialog.ts
@@ -0,0 +1,54 @@
+import {ICategoricalColumn, ICategory} from '../../model/ICategoricalColumn';
+import ADialog, {IDialogContext} from './ADialog';
+import {uniqueId} from './utils';
+import {cssClass} from '../../styles';
+import { DEFAULT_COLOR_FUNCTION, ReplacmentColorMappingFunction} from '../../model/CategoricalColorMappingFunction';
+import CategoricalsColumn from '../../model/CategoricalsColumn';
+import CategoricalMapColumn from '../../model/CategoricalMapColumn';
+
+/** @internal */
+export default class CategoricalColorMappingDialog extends ADialog {
+
+  constructor(private readonly column: ICategoricalColumn | CategoricalsColumn | CategoricalMapColumn, dialog: IDialogContext) {
+    super(dialog, {
+      fullDialog: true
+    });
+  }
+
+  protected build(node: HTMLElement) {
+    const id = uniqueId(this.dialog.idPrefix);
+    const mapping = this.column.getColorMapping();
+    node.insertAdjacentHTML('beforeend', `<div class="${cssClass('dialog-table')}">
+        ${this.column.categories.map((d) => `
+          <div class="${cssClass('dialog-color-table-entry')}">
+            <input id="${id}${d.name}" data-cat="${d.name}" type="color" value="${mapping.apply(d)}>
+            <label for="${id}${d.name}">${d.label}</label>
+          </div>`).join('')}
+    </div>`);
+  }
+
+  reset() {
+    const cats = this.column.categories;
+    this.forEach('[data-cat]', (n: HTMLInputElement, i) => {
+      n.value = cats[i]!.color;
+    });
+    this.column.setColorMapping(DEFAULT_COLOR_FUNCTION);
+  }
+
+  submit() {
+    const cats = this.column.categories;
+    const map = new Map<ICategory, string>();
+    this.forEach('input[data-cat]', (n: HTMLInputElement, i) => {
+      const cat = cats[i];
+      if (cat.color !== n.value) {
+        map.set(cat, n.value);
+      }
+    });
+    if (map.size === 0) {
+      this.column.setColorMapping(DEFAULT_COLOR_FUNCTION);
+    } else {
+      this.column.setColorMapping(new ReplacmentColorMappingFunction(map));
+    }
+    return true;
+  }
+}
diff --git a/src/ui/toolbar.ts b/src/ui/toolbar.ts
@@ -311,6 +311,7 @@ export const toolbarActions: { [key: string]: IToolbarAction | IToolbarDialogAdd
   filterOrdinal: uiDialog('Filter &hellip;', CategoricalMappingFilterDialog, () => [], { shortcut: true, featureCategory: 'ranking', featureLevel: 'basic' }),
   filterBoolean: uiDialog('Filter &hellip;', BooleanFilterDialog, () => [], { shortcut: true, featureCategory: 'ranking', featureLevel: 'basic' }),
   colorMapped: uiDialog('Color Mapping &hellip;', ColorMappingDialog, () => [], { shortcut: false, featureCategory: 'ui', featureLevel: 'advanced' }),
+  colorMappedCategorical: uiDialog('Color Mapping &hellip;', CategoricalColorMappingDialog, () => [], { shortcut: false, featureCategory: 'ui', featureLevel: 'advanced' }),
   script: uiDialog('Edit Combine Script &hellip;', ScriptEditDialog, () => [], { shortcut: true, featureCategory: 'model', featureLevel: 'advanced' }),
   reduce: uiDialog('Reduce by &hellip;', ReduceDialog, () => [], { featureCategory: 'model', featureLevel: 'advanced' }),
   cutoff: uiDialog('Set Cut Off &hellip;', CutOffHierarchyDialog, (ctx) => [ctx.idPrefix], { featureCategory: 'model', featureLevel: 'advanced' }),