-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #169 from plantinformatics/feature/axisFinishSplit
Master release v1.3.0
- Loading branch information
Showing
48 changed files
with
4,216 additions
and
1,165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # debugging techniques for d3 | ||
|
|
||
| ## Web Inspector : Console, Elements tab, Ember Inspector | ||
|
|
||
| - nodes(), node(), data(), .__data__ | ||
|
|
||
| - click in Elements tab to select an element, then in console can inspect the element details with | ||
| $0, $0.__data__ | ||
|
|
||
| - d3 stores .data(), .datum() on element.__data__, so $0.__data__ shows the d3 datum | ||
|
|
||
| - in console, selection .node() shows the element as it appears in the Elements panel; | ||
| right-click on this -> view in Elements panel | ||
|
|
||
| - when single-stepping through d3 attribute changes, note that in a transition the change won't take place until later, so commenting out the .transition().duration() line makes it easy to observe element changes while stepping through code | ||
|
|
||
| - Elements panel highlights attribute changes for about 1 second, so have this displayed and continue (eg. to the next breakpoint) | ||
|
|
||
| - use ember inspector to get component handle, from there get element and datum | ||
|
|
||
| - d3 selection in console : can be used to inspect the app at any time - no need to breakpoint the app | ||
|
|
||
| - Chrome and Firefox Web Inspector are similar, each has at least 1 thing which the other doesn't do or isn't as easy to use | ||
|
|
||
| - more : | ||
| https://developers.google.com/web/tools/chrome-devtools/console/utilities | ||
| http://anti-code.com/devtools-cheatsheet/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,6 +6,8 @@ import AxisEvents from '../utils/draw/axis-events'; | |
|
|
||
| /* global d3 */ | ||
|
|
||
| const dLog = console.debug; | ||
|
|
||
| const axisTransitionTime = 750; | ||
|
|
||
|
|
||
|
|
@@ -35,6 +37,10 @@ export default Ember.Component.extend(Ember.Evented, AxisEvents, { | |
| console.log('axis1d', axis1d, axesPCount); | ||
| return axis1d; | ||
| }), | ||
| /** @return the blocks of this axis. | ||
| * Result type is [] of (stack.js) Block. | ||
| * For the Ember data Object blocks, @see dataBlocks(). | ||
| */ | ||
| blocks : Ember.computed('axis', function() { | ||
| let axis = this.get('axis'); | ||
| return axis && axis.blocks; | ||
|
|
@@ -69,6 +75,17 @@ export default Ember.Component.extend(Ember.Evented, AxisEvents, { | |
| return dataBlocks; | ||
| }), | ||
|
|
||
| /** @return blocks which are viewedChartable, and whose axis is this axis. | ||
| */ | ||
| viewedChartable : Ember.computed('blockService.viewedChartable.[]', 'axisID', | ||
| function () { | ||
| let | ||
| id = this.get('axisID'), | ||
| viewedChartable = this.get('blockService.viewedChartable') | ||
| .filter((b) => { let axis = b.get('axis'); return axis && axis.axisName === id; }); | ||
| console.log('viewedChartable', id, viewedChartable); | ||
| return viewedChartable; | ||
| }), | ||
|
|
||
| /*--------------------------------------------------------------------------*/ | ||
|
|
||
|
|
@@ -153,12 +170,6 @@ export default Ember.Component.extend(Ember.Evented, AxisEvents, { | |
| remove: function(){ | ||
| this.remove(); | ||
| console.log("components/axis-2d remove()"); | ||
| }, | ||
| /** | ||
| * @param componentName e.g. 'axis-tracks' | ||
| */ | ||
| contentWidth : function (componentName, axisID, width) { | ||
| this.contentWidth(componentName, axisID, width); | ||
| } | ||
| }, | ||
|
|
||
|
|
@@ -177,7 +188,53 @@ export default Ember.Component.extend(Ember.Evented, AxisEvents, { | |
| && (currentWidth = use_data[0]); | ||
| return currentWidth; | ||
| }, | ||
| childWidths : {}, | ||
| /** width of sub-components within this axis-2d. Indexed by componentName. | ||
| * For each sub-component, [min, max] : the minimum required width, and the | ||
| * maximum useful width, i.e. the maximum width that the component can fill | ||
| * with content. | ||
| * Measured nominally in pixels, but space may be allocated proportional to the width allocated to this axis-2d. | ||
| */ | ||
| childWidths : undefined, | ||
| /** Allocate the available width among the children listed in .childWidths | ||
| * @return [horizontal start offset, width] for each child. | ||
| * The key of the result is the same as the input .childWidths | ||
| */ | ||
| allocatedWidths : Ember.computed('[email protected]', 'childWidths.chart.1', function () { | ||
| let allocatedWidths, | ||
| childWidths = this.get('childWidths'), | ||
| groupNames = Object.keys(childWidths), | ||
| requested = | ||
| groupNames.reduce((result, groupName) => { | ||
| let cw = childWidths[groupName]; | ||
| result[0] += cw[0]; // min | ||
| result[1] += cw[1]; // max | ||
| }, [0, 0]); | ||
| /** Calculate the spare width after each child is assigned its requested | ||
| * minimum width, and apportion the spare width among them. | ||
| * If spare < 0 then each child will get < min, but not <0. | ||
| */ | ||
| let | ||
| startWidth = this.get('startWidth'), | ||
| available = (this.get('axisUse') && this.rectWidth()) || startWidth || 120, | ||
| /** spare and share may be -ve */ | ||
| spare = available - requested[0], | ||
| share = 0; | ||
| if (groupNames.length > 0) { | ||
| share = spare / groupNames.length; | ||
| } | ||
| /** horizontal offset to the start (left) of the child. */ | ||
| let offset = 0; | ||
| allocatedWidths = groupNames.map((groupName) => { | ||
| let w = childWidths[groupName][0] + share; | ||
| if (w < 0) | ||
| w = 0; | ||
| let allocated = [offset, w]; | ||
| offset += w; | ||
| return allocated; | ||
| }); | ||
| dLog('allocatedWidths', allocatedWidths, childWidths); | ||
| return allocatedWidths; | ||
| }), | ||
| contentWidth : function (componentName, axisID, width) { | ||
| let | ||
| childWidths = this.get('childWidths'), | ||
|
|
@@ -200,6 +257,16 @@ export default Ember.Component.extend(Ember.Evented, AxisEvents, { | |
| Ember.run.later(call_setWidth); | ||
| }, | ||
|
|
||
| init() { | ||
| this._super(...arguments); | ||
| this.set('childWidths', Ember.Object.create()); | ||
| }, | ||
|
|
||
| /*--------------------------------------------------------------------------*/ | ||
|
|
||
| resizeEffect : Ember.computed.alias('drawMap.resizeEffect'), | ||
|
|
||
| /*--------------------------------------------------------------------------*/ | ||
|
|
||
| didInsertElement() { | ||
| let oa = this.get('data'), | ||
|
|
||
Oops, something went wrong.