Merge branch 'lineup-v4' into clehner/203_lineupv4_remove_internal_fr…

…om_renderers
lineupjs · Mar 17, 2020 · c6ee30e · c6ee30e
2 parents 5f787cd + 928d481
commit c6ee30e
Show file tree

Hide file tree

Showing 25 changed files with 289 additions and 69 deletions.
diff --git a/demo/complex_accessor.html b/demo/complex_accessor.html
@@ -0,0 +1,69 @@
+<!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" />
+  </head>
+  <body>
+    <script src="./LineUpJS.js"></script>
+
+    <script>
+      window.onload = function() {
+        const data = [
+          {
+            a: 1,
+            b: {
+              b: 2,
+              b0: 3,
+              b0b: 4,
+              arr: [5]
+            }
+          },
+          {
+            a: 1,
+            b: {
+              b: 2,
+              b0: 3,
+              b0b: 4,
+              arr: [5]
+            }
+          }
+        ];
+
+        const builder = LineUpJS.builder(data);
+
+        builder
+          .column(
+            LineUpJS.buildNumberColumn("a")
+              .label("A simple accessor")
+              .width(250)
+          )
+          .column(
+            LineUpJS.buildNumberColumn("b.b")
+              .label("B complex accessor 1")
+              .width(250)
+          )
+          .column(
+            LineUpJS.buildNumberColumn("b.b0")
+              .label("B complex accessor 2")
+              .width(250)
+          )
+          .column(
+            LineUpJS.buildNumberColumn("b.b0b")
+              .label("B complex accessor 3")
+              .width(250)
+          )
+          .column(
+            LineUpJS.buildNumberColumn("b.arr[0]")
+              .label("B complex accessor 4")
+              .width(250)
+          );
+
+        builder.build(document.body);
+      };
+    </script>
+  </body>
+</html>
diff --git a/demo/subtitle_summary.html b/demo/subtitle_summary.html
@@ -0,0 +1,41 @@
+<!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">
+</head>
+<body>
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<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 builder = LineUpJS.builder(arr);
+
+    builder
+      .deriveColumns()
+      .column(LineUpJS.buildStringColumn('s').summary('Test'))
+      .column(LineUpJS.buildStringColumn('s').label('Long label that will take up space').summary('Test'))
+      .column(LineUpJS.buildStringColumn('s').label('Teset').summary('Long summary that will take up space'))
+      .column(LineUpJS.buildStringColumn('s').label('Long label that will take up space2').summary('Long summary that will take up space'))
+
+    const lineup = builder.build(document.body);
+
+  };
+</script>
+
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -93,9 +93,10 @@
   },
   "devDependencies": {
     "@types/jest": "^24.0.14",
+    "@types/lodash": "4.14.121",
     "cache-loader": "^4.0.0",
-    "css-loader": "^3.0.0",
     "cross-zip-cli": "^1.0.0",
+    "css-loader": "^3.0.0",
     "extract-loader": "^3.1.0",
     "file-loader": "^4.0.0",
     "font-awesome": "^4.7.0",
@@ -130,12 +131,13 @@
   "dependencies": {
     "@types/d3-color": "^1.2.2",
     "@types/d3-dispatch": "^1.0.7",
+    "@types/d3-format": "^1.3.1",
     "@types/d3-scale": "^2.1.1",
     "@types/d3-scale-chromatic": "^1.3.1",
     "@types/d3-time": "^1.0.10",
     "@types/d3-time-format": "^2.1.1",
     "@types/detect-browser": "^4.0.0",
-    "@types/d3-format": "^1.3.1",
+    "@types/lodash.get": "4.4.5",
     "d3-color": "^1.2.3",
     "d3-dispatch": "^1.0.5",
     "d3-format": "^1.3.2",
@@ -145,8 +147,9 @@
     "d3-time-format": "^2.1.3",
     "detect-browser": "^4.5.1",
     "fast-deep-equal": "^2.0.1",
-    "popper.js": "^1.15.0",
     "lineupengine": "^2.1.0",
+    "lodash.get": "^4.4.2",
+    "popper.js": "^1.15.0",
     "reflect-metadata": "^0.1.13"
   }
 }
diff --git a/src/builder/adapter/column.ts b/src/builder/adapter/column.ts
@@ -1,4 +1,4 @@
-import {extent} from '../../internal';
+import {extent, resolveValue} from '../../internal';
 import {IActionColumnDesc, IArrayDesc, IBooleanColumnDesc, ICategoricalColumnDesc, IColumnDesc, IDateColumnDesc, IHierarchyColumnDesc, ILinkColumnDesc, INumberColumnDesc} from '../../model';
 import {IBuilderAdapterActionsColumnDescProps, IBuilderAdapterBooleanColumnDescProps, IBuilderAdapterCategoricalColumnDescProps, IBuilderAdapterColumnDescProps, IBuilderAdapterDateColumnDescProps, IBuilderAdapterHierarchyColumnDescProps, IBuilderAdapterNumberColumnDescProps, IBuilderAdapterStringColumnDescProps} from '.';
 
@@ -57,7 +57,7 @@ export function buildCategorical(props: IBuilderAdapterCategoricalColumnDescProp
 
   if (!props.categories) {
     // derive categories
-    const categories = new Set(data.map((d) => <string>d[(<any>desc).column]));
+    const categories = new Set(data.map((d) => <string>resolveValue(d, (<any>desc).column)));
     desc.categories = Array.from(categories).sort();
   } else {
     desc.categories = props.categories;
@@ -90,7 +90,7 @@ export function buildHierarchy(props: Partial<IBuilderAdapterHierarchyColumnDesc
 export function buildNumber(props: IBuilderAdapterNumberColumnDescProps, data: any[]): INumberColumnDesc {
   const desc: any = build({...props, type: 'number'});
 
-  const domain = props.domain ? props.domain : <[number, number]>extent(data, (d) => <number>d[(<any>desc).column]);
+  const domain = props.domain ? props.domain : <[number, number]>extent(data, (d) => <number>resolveValue(d, (<any>desc).column));
 
   if (props.hasOwnProperty('color')) {
     desc.colorMapping = props.color;

diff --git a/src/builder/column/CategoricalColumnBuilder.ts b/src/builder/column/CategoricalColumnBuilder.ts
@@ -1,6 +1,7 @@
 import {ICategoricalColumnDesc, ICategory} from '../../model';
 import ColumnBuilder from './ColumnBuilder';
 import {cleanCategories} from '../../provider/utils';
+import {resolveValue} from '../../internal';
 
 export default class CategoricalColumnBuilder extends ColumnBuilder<ICategoricalColumnDesc> {
 
@@ -51,8 +52,9 @@ export default class CategoricalColumnBuilder extends ColumnBuilder<ICategorical
       }
       return null;
     };
+    const col = (<any>this.desc).column;
     data.forEach((d) => {
-      const v = d[(<any>this.desc).column];
+      const v = resolveValue(d, col);
       if (Array.isArray(v)) {
         v.forEach((vi) => categories.add(val(vi)));
       } else if (v != null && v !== '') {

diff --git a/src/builder/column/ColumnBuilder.ts b/src/builder/column/ColumnBuilder.ts
@@ -15,6 +15,14 @@ export default class ColumnBuilder<T extends IColumnDesc = IColumnDesc> {
     return this;
   }
 
+  /**
+   * column summary text (subtitle)
+   */
+  summary(summary: string) {
+    this.desc.summary = summary;
+    return this;
+  }
+
   /**
    * column description
    */

diff --git a/src/builder/column/NumberColumnBuilder.ts b/src/builder/column/NumberColumnBuilder.ts
@@ -1,4 +1,4 @@
-import {min, max} from '../../internal';
+import {min, max, resolveValue} from '../../internal';
 import {EAdvancedSortMethod, ESortMethod, INumberColumnDesc, ITypedDump} from '../../model';
 import ColumnBuilder from './ColumnBuilder';
 import {IScriptMappingFunctionType} from '../../model/MappingFunction';
@@ -117,12 +117,12 @@ export default class NumberColumnBuilder extends ColumnBuilder<INumberColumnDesc
     };
 
     const minv = min(data, (d) => {
-      const v = d[col];
+      const v = resolveValue(d, col);
       const vs: number[] = asArray(v, 'min');
       return vs.length === 0 ? Infinity : min(vs);
     });
     const maxv = max(data, (d) => {
-      const v = d[col];
+      const v = resolveValue(d, col);
       const vs: number[] = asArray(v, 'max');
       return vs.length === 0 ? -Infinity : max(vs);
     });

diff --git a/src/provider/accessor.ts → src/internal/accessor.ts b/src/provider/accessor.ts → src/internal/accessor.ts
@@ -1,33 +1,29 @@
 import {IDataRow} from '../model';
-
+import get from 'lodash.get';
 
 /**
  * @internal
  */
 export function isComplexAccessor(column: any) {
   // something like a.b or a[4]
-  return typeof column === 'string' && column.includes('.');
+  return typeof column === 'string' && (column.includes('.') || column.includes('['));
 }
 
+/**
+ * @internal
+ */
+export function resolveValue(value: any, column: string | number) {
+  if (value != null && value.hasOwnProperty(column)) { // well complex but a direct hit
+    return value[column];
+  }
+  return get(value, column);
+}
 
 /**
  * @internal
  */
 export function rowComplexGetter(row: IDataRow, desc: any) {
-  const column = desc.column;
-  if (row.v.hasOwnProperty(column)) { // well complex but a direct hit
-    return row.v[column];
-  }
-  const resolve = (obj: any, col: string) => {
-    if (obj === undefined) {
-      return obj; // propagate invalid values
-    }
-    if (/\d+/.test(col)) { // index
-      return obj[+col];
-    }
-    return obj[col];
-  };
-  return column.split('.').reduce(resolve, row.v);
+  return resolveValue(row.v, desc.column);
 }
 
 

diff --git a/src/internal/index.ts b/src/internal/index.ts
@@ -11,3 +11,4 @@ export {default as merge} from './merge';
 export {default as OrderedSet} from './OrderedSet';
 export * from './utils';
 export * from './worker';
+export * from './accessor';
diff --git a/src/model/Column.ts b/src/model/Column.ts
@@ -136,6 +136,7 @@ export default class Column extends AEventDispatcher {
 
     this.metadata = {
       label: desc.label || this.id,
+      summary: desc.summary || '',
       description: desc.description || ''
     };
   }
@@ -252,13 +253,14 @@ export default class Column extends AEventDispatcher {
   }
 
   setMetaData(value: Readonly<IColumnMetaData>) {
-    if (value.label === this.label && this.description === value.description) {
+    if (value.label === this.label && this.description === value.description && this.metadata.summary === value.summary) {
       return;
     }
     const bak = this.getMetaData();
     //copy to avoid reference
     this.metadata = {
       label: value.label,
+      summary: value.summary,
       description: value.description
     };
 
@@ -420,6 +422,9 @@ export default class Column extends AEventDispatcher {
     if (this.label !== (this.desc.label || this.id)) {
       r.label = this.label;
     }
+    if (this.metadata.summary) {
+      r.summary = this.metadata.summary;
+    }
     if (this.getRenderer() !== this.desc.type) {
       r.renderer = this.getRenderer();
     }
@@ -441,6 +446,7 @@ export default class Column extends AEventDispatcher {
     this.width = dump.width || this.width;
     this.metadata = {
       label: dump.label || this.label,
+      summary: dump.summary || '',
       description: this.description
     };
     if (dump.renderer || dump.rendererType) {