Taggle Fusion Canvas Texture Renderer

package.json

@@ -86,9 +86,11 @@
  "devDependencies": {
  "@types/d3-array": "^1.2.3",
  "@types/d3-color": "^1.2.1",
+ "@types/d3-drag": "^1.2.1",
  "@types/d3-dispatch": "^1.0.6",
  "@types/d3-scale": "^2.0.2",
  "@types/d3-scale-chromatic": "^1.3.0",
+ "@types/d3-selection": "^1.3.2",
  "@types/d3-time": "^1.0.9",
  "@types/d3-time-format": "^2.1.0",
  "@types/detect-browser": "^2.0.1",
@@ -97,10 +99,12 @@
  "css-loader": "^1.0.0",
  "d3-array": "^1.2.4",
  "d3-color": "^1.2.3",
+ "d3-drag": "^1.2.3",
  "d3-dispatch": "^1.0.5",
  "d3-format": "^1.3.2",
  "d3-scale": "^2.1.2",
  "d3-scale-chromatic": "^1.3.3",
+ "d3-selection": "^1.3.2",
  "d3-time": "^1.0.10",
  "d3-time-format": "^2.1.3",
  "detect-browser": "^3.0.1",

src/model/OverviewDetailColumn.ts

@@ -0,0 +1,99 @@
+import {Category, SupportType, toolbar} from './annotations';
+import {IDataRow, IGroup} from './interfaces';
+import ValueColumn, {IValueColumnDesc} from './ValueColumn';
+
+/**
+ * factory for creating a description creating a rank column
+ * @param label
+ * @returns {{type: string, label: string}}
+ */
+export function createDetailDesc(label: string = 'Detail Checkboxes') {
+ return {type: 'detail', label, fixed: true};
+}
+
+export interface IDetailColumnDesc extends IValueColumnDesc<boolean> {
+ /**
+ * setter for selecting/deselecting the given row
+ */
+ setter(row: IDataRow, value: boolean): void;
+
+ /**
+ * setter for selecting/deselecting the given row
+ */
+ setterAll(rows: IDataRow[], value: boolean): void;
+}
+
+/**
+ * a checkbox column for selections
+ */
+@SupportType()
+@toolbar('sort', 'sortBy', 'group', 'groupBy', 'selectionToOverviewDetail', 'overviewDetailToSelection')
+@Category('support')
+export default class OverviewDetailColumn extends ValueColumn<boolean> {
+ private static DETAILED_GROUP: IGroup = {
+ name: 'Detailed',
+ color: 'blue'
+ };
+ private static NOT_DETAILED_GROUP: IGroup = {
+ name: 'Undetailed',
+ color: 'gray'
+ };
+ static readonly EVENT_DETAIL = 'detail';
+
+ constructor(id: string, desc: Readonly<IDetailColumnDesc>) {
+ super(id, desc);
+ this.setDefaultWidth(20);
+ }
+
+ get frozen() {
+ return this.desc.frozen !== false;
+ }
+
+ protected createEventList() {
+ return super.createEventList().concat([OverviewDetailColumn.EVENT_DETAIL]);
+ }
+
+ setValue(row: IDataRow, value: boolean) {
+ const old = this.getValue(row);
+ if (old === value) {
+ return true;
+ }
+ return this.setImpl(row, value);
+ }
+
+ setValues(rows: IDataRow[], value: boolean) {
+ if (rows.length === 0) {
+ return;
+ }
+ if ((<IDetailColumnDesc>this.desc).setterAll) {
+ (<IDetailColumnDesc>this.desc).setterAll(rows, value);
+ }
+ this.fire(OverviewDetailColumn.EVENT_DETAIL, rows[0], value, rows);
+ return true;
+ }
+
+ private setImpl(row: IDataRow, value: boolean) {
+ if ((<IDetailColumnDesc>this.desc).setter) {
+ (<IDetailColumnDesc>this.desc).setter(row, value);
+ }
+ this.fire(OverviewDetailColumn.EVENT_DETAIL, row, value);
+ return true;
+ }
+
+ toggleValue(row: IDataRow) {
+ const old = this.getValue(row);
+ this.setImpl(row, !old);
+ return !old;
+ }
+
+ compare(a: IDataRow, b: IDataRow) {
+ const va = this.getValue(a) === true;
+ const vb = this.getValue(b) === true;
+ return va === vb ? 0 : (va < vb ? -1 : +1);
+ }
+
+ group(row: IDataRow) {
+ const isSelected = this.getValue(row);
+ return isSelected ? OverviewDetailColumn.DETAILED_GROUP : OverviewDetailColumn.NOT_DETAILED_GROUP;
+ }
+}

src/model/index.ts

@@ -31,6 +31,7 @@ import StringMapColumn from './StringMapColumn';
 import StringsColumn from './StringsColumn';
 import ValueColumn, {IValueColumnDesc} from './ValueColumn';
 import ImpositionBoxPlotColumn from './ImpositionBoxPlotColumn';
+import OverviewDetailColumn from './OverviewDetailColumn';
 import LinkColumn from './LinkColumn';
 import LinkMapColumn from './LinkMapColumn';
 import LinksColumn from './LinksColumn';
@@ -91,6 +92,7 @@ export {default as Ranking, ISortCriteria} from './Ranking';
 export {default as ReduceColumn, createReduceDesc, IReduceDesc, IReduceColumnDesc} from './ReduceColumn';
 export {default as ScriptColumn, createScriptDesc, IScriptDesc, IScriptColumnDesc} from './ScriptColumn';
 export {default as SelectionColumn, createSelectionDesc, ISelectionColumnDesc} from './SelectionColumn';
+export {default as DetailColumn, createDetailDesc, IDetailColumnDesc} from './OverviewDetailColumn';
 export * from './SetColumn';
 export {default as SetColumn} from './SetColumn';
 export {default as StackColumn, createStackDesc} from './StackColumn';
@@ -150,6 +152,7 @@ export function models() {
  date: DateColumn,
  dateMap: DatesMapColumn,
  dates: DatesColumn,
+ detail: OverviewDetailColumn,
  group: GroupColumn,
  hierarchy: HierarchyColumn,
  imposition: ImpositionCompositeColumn,

src/provider/ACommonDataProvider.ts

@@ -2,6 +2,7 @@ import {createAggregateDesc, createRankDesc, createSelectionDesc, IColumnDesc, I
 import {IOrderedGroup} from '../model/Group';
 import Ranking from '../model/Ranking';
 import ADataProvider, {IDataProviderOptions} from './ADataProvider';
+import {createDetailDesc} from '../model/OverviewDetailColumn';
 
 
 function isComplexAccessor(column: any) {
@@ -146,6 +147,7 @@ abstract class ACommonDataProvider extends ADataProvider {
  if (this.multiSelections) {
  r.push(this.create(createSelectionDesc())!);
  }
+ r.push(this.create(createDetailDesc())!);
  }
  this.getColumns().forEach((col) => {
  const c = this.create(col);