fix update of colors

lineupjs · Nov 23, 2018 · a7a200f · a7a200f
1 parent 8fceca0
commit a7a200f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/renderer/CategoricalCellRenderer.ts b/src/renderer/CategoricalCellRenderer.ts
@@ -101,15 +101,18 @@ function hist(col: ICategoricalColumn, showLabels: boolean, unfilteredHist: ICat
   const bins = col.categories.map((c) => `<div class="${cssClass('histogram-bin')}" title="${c.label}: 0" data-cat="${c.name}" ${showLabels ? `data-title="${c.label}"` : ''}><div style="height: 0; background-color: ${mapping.apply(c)}"></div></div>`).join('');
   const template = `<div class="${cssClass('histogram')} ${col.dataLength! > DENSE_HISTOGRAM ? cssClass('dense'): ''}">${bins}`; // no closing div to be able to append things
 
-  const selected = col.categories.map((d) => {
-    const c = color(mapping.apply(d))!;
-    c.opacity = FILTERED_OPACITY;
-    return c.toString();
-  });
 
   return {
     template,
     update: (n: HTMLElement, lMaxBin: number, hist: ICategoricalBin[]) => {
+      const mapping = col.getColorMapping();
+
+      const selected = col.categories.map((d) => {
+        const c = color(mapping.apply(d))!;
+        c.opacity = FILTERED_OPACITY;
+        return c.toString();
+      });
+
       const gHist = unfilteredHist ? unfilteredHist.hist! : null;
       const maxBin = unfilteredHist ? unfilteredHist.maxBin : lMaxBin;
       forEach(n, '[data-cat]', (d: HTMLElement, i) => {
@@ -121,11 +124,12 @@ function hist(col: ICategoricalColumn, showLabels: boolean, unfilteredHist: ICat
           d.title = `${cat.label}: ${y} of ${gY}`;
           inner.style.height = `${round(gY * 100 / maxBin, 2)}%`;
           const relY = 100 - round(y * 100 / gY, 2);
-          inner.style.background = relY === 0 ? cat.color : (relY === 100 ? selected[i] : `linear-gradient(${selected[i]} ${relY}%, ${cat.color} ${relY}%, ${mapping.apply(cat)} 100%)`);
+          inner.style.background = relY === 0 ? mapping.apply(cat) : (relY === 100 ? selected[i] : `linear-gradient(${selected[i]} ${relY}%, ${mapping.apply(cat)} ${relY}%, ${mapping.apply(cat)} 100%)`);
         } else {
           d.title = `${col.categories[i].label}: ${y}`;
           const inner = <HTMLElement>d.firstElementChild!;
           inner.style.height = `${Math.round(y * 100 / maxBin)}%`;
+          inner.style.background = mapping.apply(cat);
         }
       });
     }

diff --git a/src/styles/_dialogs.scss b/src/styles/_dialogs.scss
@@ -127,6 +127,14 @@
   }
 }
 
+.#{$lu_css_prefix}-dialog-color-table-entry {
+  min-width: 10em;
+
+  > input {
+    width: 3em;
+  }
+}
+
 .#{$lu_css_prefix}-dialog-filter-table-color {
   width: 1.2em;
   margin: 0 0.5em;

diff --git a/src/ui/dialogs/CategoricalColorMappingDialog.ts b/src/ui/dialogs/CategoricalColorMappingDialog.ts
@@ -5,6 +5,7 @@ import {cssClass} from '../../styles';
 import { DEFAULT_COLOR_FUNCTION, ReplacmentColorMappingFunction} from '../../model/CategoricalColorMappingFunction';
 import CategoricalsColumn from '../../model/CategoricalsColumn';
 import CategoricalMapColumn from '../../model/CategoricalMapColumn';
+import {color} from 'd3-color';
 
 /** @internal */
 export default class CategoricalColorMappingDialog extends ADialog {
@@ -21,7 +22,7 @@ export default class CategoricalColorMappingDialog extends ADialog {
     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)}>
+            <input id="${id}${d.name}" data-cat="${d.name}" type="color" value="${color(mapping.apply(d))!.hex()}">
             <label for="${id}${d.name}">${d.label}</label>
           </div>`).join('')}
     </div>`);
@@ -30,7 +31,7 @@ export default class CategoricalColorMappingDialog extends ADialog {
   reset() {
     const cats = this.column.categories;
     this.forEach('[data-cat]', (n: HTMLInputElement, i) => {
-      n.value = cats[i]!.color;
+      n.value = color(cats[i]!.color)!.hex();
     });
     this.column.setColorMapping(DEFAULT_COLOR_FUNCTION);
   }
@@ -40,7 +41,7 @@ export default class CategoricalColorMappingDialog extends ADialog {
     const map = new Map<ICategory, string>();
     this.forEach('input[data-cat]', (n: HTMLInputElement, i) => {
       const cat = cats[i];
-      if (cat.color !== n.value) {
+      if (color(cat.color)!.hex() !== n.value) {
         map.set(cat, n.value);
       }
     });