Skip to content

Commit

Permalink
FLOE-437: move various dataKey functions into d3ViewComponent
Browse files Browse the repository at this point in the history
  • Loading branch information
@waharnum
waharnum committed Feb 8, 2016
1 parent 02e0325 commit 6610980
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 69 deletions.
61 changes: 0 additions & 61 deletions src/js/d3Utils.js
View file
Expand Up @@ -44,67 +44,6 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
);
};

// Given an array "elements" consisting of element IDs, returns a joined
// string of IDs suitable for use as a jQuery selector
floe.d3.getElementIdsAsSelector = function(elementIds) {
if(fluid.isArrayable(elementIds)) {
var elemIdCollectionWithPreface = fluid.transform(elementIds, function(elemId) {
return "#" + elemId;
});
var keyedElements = elemIdCollectionWithPreface.join(",");
return keyedElements;
}
return undefined;
};

// Given a D3 data key, return the affiliated D3-bound elements using the model's
// dataKeys information
// TODO: test
floe.d3.getElementsByDataKey = function(dataKey, that) {
var elemIdCollection = that.model.dataKeys[dataKey];
return $(floe.d3.getElementIdsAsSelector(elemIdCollection));
};

// Given a D3 data key, returns all D3-bound elements that aren't associated
// with that key
// TOOD: test

floe.d3.getElementsNotMatchingDataKey = function(dataKey, that) {
var dataKeys = that.model.dataKeys;
var matchedElements = [];
fluid.each(dataKeys, function(elementIds, currentKey) {
if(currentKey !== dataKey) {
var selector = floe.d3.getElementIdsAsSelector(elementIds);
matchedElements.push(selector);
}
});
return $(matchedElements.join(","));
};

// Given a selection of D3 elements, an ID and a CSS class, turns that
// class on for any elements matching the ID and makes sure it's turn off
// for any elements not matching it
// TODO: needs test coverage outside of overall chartAuthoring tests
floe.d3.toggleCSSClassByDataId = function (d3Selection, id, toggleClass, that) {
var associatedElements = floe.d3.getElementsByDataKey(id, that);

if(associatedElements !== undefined) {
associatedElements.addClass(toggleClass);
associatedElements.each(function (idx, elem) {
elem.classList.add(toggleClass);
});
}

var unassociatedElements = floe.d3.getElementsNotMatchingDataKey(id, that);

if(unassociatedElements !== undefined) {
unassociatedElements.removeClass(toggleClass);
unassociatedElements.each(function (idx, elem) {
elem.classList.remove(toggleClass);
});
}
};

floe.d3.addD3Listeners = function (jQueryElem, eventName, listener, that) {
var d3Elem = floe.d3.jQueryToD3(jQueryElem);
d3Elem.on(eventName, function (data, i) {
Expand Down
71 changes: 68 additions & 3 deletions src/js/d3ViewComponent.js
View file
Expand Up @@ -49,13 +49,13 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
});

floe.d3ViewComponent.updateDataKeys = function (d3Key, elemId, that) {
var keyPath = "dataKeys."+d3Key;
var keyPath = "dataKeys." + d3Key;
var elements = fluid.get(that.model, keyPath);
if(elements === undefined) {
if (elements === undefined) {
that.applier.change(keyPath, []);
elements = fluid.get(that.model, keyPath);
}
if(!elements.includes(elemId)) {
if (!elements.includes(elemId)) {
elements.push(elemId);
}
that.applier.change(keyPath, elements);
Expand Down Expand Up @@ -142,4 +142,69 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
return output;
};

// Given an array "elements" consisting of element IDs, returns a joined
// string of IDs suitable for use as a jQuery selector
floe.d3ViewComponent.getElementIdsAsSelector = function (elementIds) {
if (fluid.isArrayable(elementIds)) {
var elemIdCollectionWithPreface = fluid.transform(elementIds, function (elemId) {
return "#" + elemId;
});
var keyedElements = elemIdCollectionWithPreface.join(",");
return keyedElements;
}
};

// Given an array of D3 data keys, returns all affiliated D3-bound elements
// using the model's dataKeys information
floe.d3ViewComponent.getElementsByDataKeys = function (dataKeys, that) {
var matchedElements = [];
fluid.each(dataKeys, function (dataKey) {
var elementIds = that.model.dataKeys[dataKey];
var selector = floe.d3ViewComponent.getElementIdsAsSelector(elementIds);
matchedElements.push(selector);
});
return $(matchedElements.join(","));
};

// Given a D3 data key, return the affiliated D3-bound elements using the
// model's dataKeys information
// TODO: test
floe.d3ViewComponent.getElementsByDataKey = function (dataKey, that) {
return floe.d3ViewComponent.getElementsByDataKeys([dataKey], that);
};

// Given a D3 data key, returns all D3-bound elements that aren't associated
// with that key
// TOOD: test

floe.d3ViewComponent.getElementsNotMatchingDataKey = function (dataKey, that) {
var dataKeys = fluid.copy(that.model.dataKeys);
fluid.remove_if(dataKeys, function (currentObj, currentKey) {
return currentKey === dataKey;
});

return floe.d3ViewComponent.getElementsByDataKeys(Object.keys(dataKeys), that);
};

// Given a selection of D3 elements, an ID and a CSS class, turns that
// class on for any elements matching the ID and makes sure it's turn off
// for any elements not matching it
// TODO: needs test coverage outside of overall chartAuthoring tests
floe.d3ViewComponent.toggleCSSClassByDataId = function (d3Selection, id, toggleClass, that) {
var associatedElements = floe.d3ViewComponent.getElementsByDataKey(id, that);

associatedElements.addClass(toggleClass);
associatedElements.each(function (idx, elem) {
elem.classList.add(toggleClass);
});

var unassociatedElements = floe.d3ViewComponent.getElementsNotMatchingDataKey(id, that);

unassociatedElements.removeClass(toggleClass);
unassociatedElements.each(function (idx, elem) {
elem.classList.remove(toggleClass);
});

};

})(jQuery, fluid);
2 changes: 1 addition & 1 deletion src/js/legend.js
View file
Expand Up @@ -98,7 +98,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
excludeSource: "init"
},
activeRowId: {
func: "floe.d3.toggleCSSClassByDataId",
func: "floe.d3ViewComponent.toggleCSSClassByDataId",
args: ["{that}.rows", "{that}.model.activeRowId", "{that}.options.styles.highlight", "{that}"]
}
},
Expand Down
4 changes: 2 additions & 2 deletions src/js/pie.js
View file
Expand Up @@ -96,7 +96,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
excludeSource: "init"
},
activeSliceId: {
func: "floe.d3.toggleCSSClassByDataId",
func: "floe.d3ViewComponent.toggleCSSClassByDataId",
args: ["{that}.paths", "{that}.model.activeSliceId", "{that}.options.styles.highlight", "{that}"]
}
},
Expand Down Expand Up @@ -168,7 +168,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
return floe.d3ViewComponent.getTemplatedDisplayValue(totalValue, percentageDigits, sliceTextDisplayTemplate, d);
});

that.paths.each(function(d) {
that.paths.each(function (d) {
// Assign unique ID for the path element
var pathId = fluid.allocateSimpleId(this);
that.updateDataKeys(d.data.id, pathId);
Expand Down
4 changes: 2 additions & 2 deletions tests/js/d3UtilsTests.js
View file
Expand Up @@ -118,7 +118,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
jqUnit.assertEquals("Inverse filtered row's second item has expected ID", "id3", inverseFilteredRow[0][1].__data__.id);
});

// jqUnit.test("Test floe.d3.toggleCSSClassByDataId", function () {
// jqUnit.test("Test floe.d3ViewComponent.toggleCSSClassByDataId", function () {
// var testToggleClass = "floc-testToggleClass";
// jqUnit.expect(3);
// var dataSet = [
Expand All @@ -130,7 +130,7 @@ https://raw.githubusercontent.com/fluid-project/chartAuthoring/master/LICENSE.tx
//
// testRows.data(dataSet);
//
// floe.d3.toggleCSSClassByDataId(testRows, "id1", testToggleClass);
// floe.d3ViewComponent.toggleCSSClassByDataId(testRows, "id1", testToggleClass);
//
// jqUnit.assertTrue("Class is toggled on to row with specified ID", testRows[0][0].className.indexOf(testToggleClass) > -1);
// jqUnit.assertTrue("Class is not present on second row without specified ID", testRows[0][1].className.indexOf(testToggleClass) === -1);
Expand Down

0 comments on commit 6610980

Please sign in to comment.