From 037cebf07dbc391450b6efaa6f621192f79841e3 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Fri, 6 Oct 2017 17:39:39 +0200 Subject: [PATCH 1/3] lisp casing and factoring out class names - table --- src/traces/table/constants.js | 27 +++++++++- src/traces/table/plot.js | 92 +++++++++++++++++------------------ 2 files changed, 72 insertions(+), 47 deletions(-) diff --git a/src/traces/table/constants.js b/src/traces/table/constants.js index a105a581520..9017761bc24 100644 --- a/src/traces/table/constants.js +++ b/src/traces/table/constants.js @@ -28,5 +28,30 @@ module.exports = { scrollbarCaptureWidth: 18, scrollbarOffset: 5, scrollbarHideDelay: 1000, - scrollbarHideDuration: 1000 + scrollbarHideDuration: 1000, + cn: { + // general class names + table: 'table', + tableControlView: 'table-control-view', + scrollBackground: 'scroll-background', + yColumn: 'y-column', + columnBlock: 'column-block', + scrollAreaClip: 'scroll-area-clip', + scrollAreaClipRect: 'scroll-area-clip-rect', + columnBoundary: 'column-boundary', + columnBoundaryClippath: 'column-boundary-clippath', + columnBoundaryRect: 'column-boundary-rect', + columnCells: 'column-cells', + columnCell: 'column-cell', + cellRect: 'cell-rect', + cellText: 'cell-text', + cellTextHolder: 'cell-text-holder', + + // scroll related class names + scrollbarKit: 'scrollbar-kit', + scrollbar: 'scrollbar', + scrollbarSlider: 'scrollbar-slider', + scrollbarGlyph: 'scrollbar-glyph', + scrollbarCaptureZone: 'scrollbar-capture-zone' + } }; diff --git a/src/traces/table/plot.js b/src/traces/table/plot.js index 92565f15ca3..e53d2b620b9 100644 --- a/src/traces/table/plot.js +++ b/src/traces/table/plot.js @@ -21,7 +21,7 @@ var Color = require('../../components/color'); module.exports = function plot(gd, wrappedTraceHolders) { - var table = gd._fullLayout._paper.selectAll('.table') + var table = gd._fullLayout._paper.selectAll('.' + c.cn.table) .data(wrappedTraceHolders.map(function(wrappedTraceHolder) { var traceHolder = gup.unwrap(wrappedTraceHolder); var trace = traceHolder.trace; @@ -32,7 +32,7 @@ module.exports = function plot(gd, wrappedTraceHolders) { table.enter() .append('g') - .classed('table', true) + .classed(c.cn.table, true) .attr('overflow', 'visible') .style('box-sizing', 'content-box') .style('position', 'absolute') @@ -48,12 +48,12 @@ module.exports = function plot(gd, wrappedTraceHolders) { return 'translate(' + d.translateX + ',' + d.translateY + ')'; }); - var tableControlView = table.selectAll('.tableControlView') + var tableControlView = table.selectAll('.' + c.cn.tableControlView) .data(gup.repeat, gup.keyFun); tableControlView.enter() .append('g') - .classed('tableControlView', true) + .classed(c.cn.tableControlView, true) .style('box-sizing', 'content-box') .on('mousemove', function(d) {tableControlView.filter(function(dd) {return d === dd;}).call(renderScrollbarKit, gd);}) .on('mousewheel', function(d) { @@ -71,12 +71,12 @@ module.exports = function plot(gd, wrappedTraceHolders) { // scrollBackground merely ensures that mouse events are captured even on crazy fast scrollwheeling // otherwise rendering glitches may occur - var scrollBackground = tableControlView.selectAll('.scrollBackground') + var scrollBackground = tableControlView.selectAll('.' + c.cn.scrollBackground) .data(gup.repeat, gup.keyFun); scrollBackground.enter() .append('rect') - .classed('scrollBackground', true) + .classed(c.cn.scrollBackground, true) .attr('fill', 'none'); scrollBackground @@ -86,12 +86,12 @@ module.exports = function plot(gd, wrappedTraceHolders) { tableControlView .each(function(d) {Drawing.setClipUrl(d3.select(this), scrollAreaBottomClipKey(gd, d));}); - var yColumn = tableControlView.selectAll('.yColumn') + var yColumn = tableControlView.selectAll('.' + c.cn.yColumn) .data(function(vm) {return vm.columns;}, gup.keyFun); yColumn.enter() .append('g') - .classed('yColumn', true); + .classed(c.cn.yColumn, true); yColumn .attr('transform', function(d) {return 'translate(' + d.x + ' 0)';}) @@ -137,12 +137,12 @@ module.exports = function plot(gd, wrappedTraceHolders) { yColumn.each(function(d) {Drawing.setClipUrl(d3.select(this), columnBoundaryClipKey(gd, d));}); - var columnBlock = yColumn.selectAll('.columnBlock') + var columnBlock = yColumn.selectAll('.' + c.cn.columnBlock) .data(splitData.splitToPanels, gup.keyFun); columnBlock.enter() .append('g') - .classed('columnBlock', true) + .classed(c.cn.columnBlock, true) .attr('id', function(d) {return d.key;}); columnBlock @@ -170,20 +170,20 @@ module.exports = function plot(gd, wrappedTraceHolders) { renderColumnCellTree(gd, tableControlView, headerColumnBlock, columnBlock); renderColumnCellTree(gd, tableControlView, cellsColumnBlock, columnBlock); - var scrollAreaClip = tableControlView.selectAll('.scrollAreaClip') + var scrollAreaClip = tableControlView.selectAll('.' + c.cn.scrollAreaClip) .data(gup.repeat, gup.keyFun); scrollAreaClip.enter() .append('clipPath') - .classed('scrollAreaClip', true) + .classed(c.cn.scrollAreaClip, true) .attr('id', function(d) {return scrollAreaBottomClipKey(gd, d);}); - var scrollAreaClipRect = scrollAreaClip.selectAll('.scrollAreaClipRect') + var scrollAreaClipRect = scrollAreaClip.selectAll('.' + c.cn.scrollAreaClipRect) .data(gup.repeat, gup.keyFun); scrollAreaClipRect.enter() .append('rect') - .classed('scrollAreaClipRect', true) + .classed(c.cn.scrollAreaClipRect, true) .attr('x', -c.overdrag) .attr('y', -c.uplift) .attr('fill', 'none'); @@ -192,30 +192,30 @@ module.exports = function plot(gd, wrappedTraceHolders) { .attr('width', function(d) {return d.width + 2 * c.overdrag;}) .attr('height', function(d) {return d.height + c.uplift;}); - var columnBoundary = yColumn.selectAll('.columnBoundary') + var columnBoundary = yColumn.selectAll('.' + c.cn.columnBoundary) .data(gup.repeat, gup.keyFun); columnBoundary.enter() .append('g') - .classed('columnBoundary', true); + .classed(c.cn.columnBoundary, true); - var columnBoundaryClippath = yColumn.selectAll('.columnBoundaryClippath') + var columnBoundaryClippath = yColumn.selectAll('.' + c.cn.columnBoundaryClippath) .data(gup.repeat, gup.keyFun); // SVG spec doesn't mandate wrapping into a and doesn't seem to cause a speed difference columnBoundaryClippath.enter() .append('clipPath') - .classed('columnBoundaryClippath', true); + .classed(c.cn.columnBoundaryClippath, true); columnBoundaryClippath .attr('id', function(d) {return columnBoundaryClipKey(gd, d);}); - var columnBoundaryRect = columnBoundaryClippath.selectAll('.columnBoundaryRect') + var columnBoundaryRect = columnBoundaryClippath.selectAll('.' + c.cn.columnBoundaryRect) .data(gup.repeat, gup.keyFun); columnBoundaryRect.enter() .append('rect') - .classed('columnBoundaryRect', true) + .classed(c.cn.columnBoundaryRect, true) .attr('fill', 'none'); columnBoundaryRect @@ -245,12 +245,12 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) { return firstRowAnchor(blocks, blocks.length - 1) + rowsHeight(blocks[blocks.length - 1], Infinity); } - var scrollbarKit = tableControlView.selectAll('.scrollbarKit') + var scrollbarKit = tableControlView.selectAll('.' + c.cn.scrollbarKit) .data(gup.repeat, gup.keyFun); scrollbarKit.enter() .append('g') - .classed('scrollbarKit', true) + .classed(c.cn.scrollbarKit, true) .style('shape-rendering', 'geometricPrecision'); scrollbarKit @@ -272,31 +272,31 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) { return 'translate(' + xPosition + ' ' + headerHeight(d) + ')'; }); - var scrollbar = scrollbarKit.selectAll('.scrollbar') + var scrollbar = scrollbarKit.selectAll('.' + c.cn.scrollbar) .data(gup.repeat, gup.keyFun); scrollbar.enter() .append('g') - .classed('scrollbar', true); + .classed(c.cn.scrollbar, true); - var scrollbarSlider = scrollbar.selectAll('.scrollbarSlider') + var scrollbarSlider = scrollbar.selectAll('.' + c.cn.scrollbarSlider) .data(gup.repeat, gup.keyFun); scrollbarSlider.enter() .append('g') - .classed('scrollbarSlider', true); + .classed(c.cn.scrollbarSlider, true); scrollbarSlider .attr('transform', function(d) { return 'translate(0 ' + d.scrollbarState.topY + ')'; }); - var scrollbarGlyph = scrollbarSlider.selectAll('.scrollbarGlyph') + var scrollbarGlyph = scrollbarSlider.selectAll('.' + c.cn.scrollbarGlyph) .data(gup.repeat, gup.keyFun); scrollbarGlyph.enter() .append('line') - .classed('scrollbarGlyph', true) + .classed(c.cn.scrollbarGlyph, true) .attr('stroke', 'black') .attr('stroke-width', c.scrollbarWidth) .attr('stroke-linecap', 'round') @@ -318,12 +318,12 @@ function renderScrollbarKit(tableControlView, gd, bypassVisibleBar) { .transition().delay(c.scrollbarHideDelay).duration(c.scrollbarHideDuration) .attr('stroke-opacity', 0); - var scrollbarCaptureZone = scrollbar.selectAll('.scrollbarCaptureZone') + var scrollbarCaptureZone = scrollbar.selectAll('.' + c.cn.scrollbarCaptureZone) .data(gup.repeat, gup.keyFun); scrollbarCaptureZone.enter() .append('line') - .classed('scrollbarCaptureZone', true) + .classed(c.cn.scrollbarCaptureZone, true) .attr('stroke', 'white') .attr('stroke-opacity', 0.01) // some browser might get rid of a 0 opacity element .attr('stroke-width', c.scrollbarCaptureWidth) @@ -385,12 +385,12 @@ function renderColumnCellTree(gd, tableControlView, columnBlock, allColumnBlock) function renderColumnCells(columnBlock) { - var columnCells = columnBlock.selectAll('.columnCells') + var columnCells = columnBlock.selectAll('.' + c.cn.columnCells) .data(gup.repeat, gup.keyFun); columnCells.enter() .append('g') - .classed('columnCells', true); + .classed(c.cn.columnCells, true); columnCells.exit() .remove(); @@ -400,12 +400,12 @@ function renderColumnCells(columnBlock) { function renderColumnCell(columnCells) { - var columnCell = columnCells.selectAll('.columnCell') + var columnCell = columnCells.selectAll('.' + c.cn.columnCell) .data(splitData.splitToCells, function(d) {return d.keyWithinBlock;}); columnCell.enter() .append('g') - .classed('columnCell', true); + .classed(c.cn.columnCell, true); columnCell.exit() .remove(); @@ -415,24 +415,24 @@ function renderColumnCell(columnCells) { function renderCellRect(columnCell) { - var cellRect = columnCell.selectAll('.cellRect') + var cellRect = columnCell.selectAll('.' + c.cn.cellRect) .data(gup.repeat, function(d) {return d.keyWithinBlock;}); cellRect.enter() .append('rect') - .classed('cellRect', true); + .classed(c.cn.cellRect, true); return cellRect; } function renderCellText(cellTextHolder) { - var cellText = cellTextHolder.selectAll('.cellText') + var cellText = cellTextHolder.selectAll('.' + c.cn.cellText) .data(gup.repeat, function(d) {return d.keyWithinBlock;}); cellText.enter() .append('text') - .classed('cellText', true) + .classed(c.cn.cellText, true) .style('cursor', function() {return 'auto';}) .on('mousedown', function() {d3.event.stopPropagation();}); @@ -441,12 +441,12 @@ function renderCellText(cellTextHolder) { function renderCellTextHolder(columnCell) { - var cellTextHolder = columnCell.selectAll('.cellTextHolder') + var cellTextHolder = columnCell.selectAll('.' + c.cn.cellTextHolder) .data(gup.repeat, function(d) {return d.keyWithinBlock;}); cellTextHolder.enter() .append('g') - .classed('cellTextHolder', true) + .classed(c.cn.cellTextHolder, true) .style('shape-rendering', 'geometricPrecision'); return cellTextHolder; @@ -692,7 +692,7 @@ function makeDragRow(gd, allTableControlView, optionalMultiplier, optionalPositi var tableControlView = allTableControlView.filter(function(dd) {return d.key === dd.key;}); var multiplier = optionalMultiplier || d.scrollbarState.dragMultiplier; d.scrollY = optionalPosition === void(0) ? d.scrollY + multiplier * d3.event.dy : optionalPosition; - var cellsColumnBlock = tableControlView.selectAll('.yColumn').selectAll('.columnBlock').filter(cellsBlock); + var cellsColumnBlock = tableControlView.selectAll('.' + c.cn.yColumn).selectAll('.' + c.cn.columnBlock).filter(cellsBlock); updateBlockYPosition(gd, cellsColumnBlock, tableControlView); }; } @@ -749,7 +749,7 @@ function wrapTextMaker(columnBlock, element, tableControlView) { cellTextHolder.selectAll('tspan.line').remove(); // resupply text, now wrapped - populateCellText(cellTextHolder.select('.cellText'), tableControlView, columnBlock); + populateCellText(cellTextHolder.select('.' + c.cn.cellText), tableControlView, columnBlock); d3.select(element.parentNode.parentNode).call(setCellHeightAndPositionY); }; } @@ -774,7 +774,7 @@ function updateYPositionMaker(columnBlock, element, tableControlView, gd, d) { l.rows[rowIndex].rowHeight = finalHeight; columnBlock - .selectAll('.columnCell') + .selectAll('.' + c.cn.columnCell) .call(setCellHeightAndPositionY); updateBlockYPosition(null, columnBlock.filter(cellsBlock), 0); @@ -791,10 +791,10 @@ function updateYPositionMaker(columnBlock, element, tableControlView, gd, d) { var element = this; var columnCellElement = element.parentNode; var box = columnCellElement.getBoundingClientRect(); - var rectBox = d3.select(element.parentNode).select('.cellRect').node().getBoundingClientRect(); + var rectBox = d3.select(element.parentNode).select('.' + c.cn.cellRect).node().getBoundingClientRect(); var currentTransform = element.transform.baseVal.consolidate(); var yPosition = rectBox.top - box.top + (currentTransform ? currentTransform.matrix.f : c.cellPad); - return 'translate(' + xPosition(d, d3.select(element.parentNode).select('.cellTextHolder').node().getBoundingClientRect().width) + ' ' + yPosition + ')'; + return 'translate(' + xPosition(d, d3.select(element.parentNode).select('.' + c.cn.cellTextHolder).node().getBoundingClientRect().width) + ' ' + yPosition + ')'; }); d.settledY = true; @@ -819,7 +819,7 @@ function setCellHeightAndPositionY(columnCell) { var yOffset = rowAnchor + headerHeight; return 'translate(0 ' + yOffset + ')'; }) - .selectAll('.cellRect') + .selectAll('.' + c.cn.cellRect) .attr('height', function(d) {return getRow(getBlock(d), d.key).rowHeight;}); } From a5d95f6e55ef6c91befd059ff8b5a53b9b0461a7 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Fri, 6 Oct 2017 18:05:50 +0200 Subject: [PATCH 2/3] factoring out class names - parcoords --- src/traces/parcoords/constants.js | 22 +++++++++ src/traces/parcoords/parcoords.js | 74 ++++++++++++++-------------- test/jasmine/tests/parcoords_test.js | 8 +-- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/src/traces/parcoords/constants.js b/src/traces/parcoords/constants.js index 25ef3fda72e..05a19f09e57 100644 --- a/src/traces/parcoords/constants.js +++ b/src/traces/parcoords/constants.js @@ -31,5 +31,27 @@ module.exports = { handleheight: 16, // Height of the filter bar vertical resize areas on top and bottom handleopacity: 1, // Opacity of the filter bar vertical resize areas on top and bottom handleoverlap: 0 // A larger than 0 value causes overlaps with the filter bar, represented as pixels.' + }, + cn: { + axisExtentText: 'axis-extent-text', + parcoordsLineLayers: 'parcoords-line-layers', + parcoordsLineLayer: 'parcoords-lines', + parcoords: 'parcoords', + parcoordsControlView: 'parcoords-control-view', + yAxis: 'y-axis', + axisOverlays: 'axis-overlays', + axis: 'axis', + axisHeading: 'axis-heading', + axisTitle: 'axis-title', + axisExtent: 'axis-extent', + axisExtentTop: 'axis-extent-top', + axisExtentTopText: 'axis-extent-top-text', + axisExtentBottom: 'axis-extent-bottom', + axisExtentBottomText: 'axis-extent-bottom-text', + axisBrush: 'axis-brush' + }, + id: { + filterBarPattern: 'filter-bar-pattern' + } }; diff --git a/src/traces/parcoords/parcoords.js b/src/traces/parcoords/parcoords.js index 455e76f08f9..a002eee00da 100644 --- a/src/traces/parcoords/parcoords.js +++ b/src/traces/parcoords/parcoords.js @@ -247,7 +247,7 @@ function lineLayerModel(vm) { function styleExtentTexts(selection) { selection - .classed('axisExtentText', true) + .classed(c.cn.axisExtentText, true) .attr('text-anchor', 'middle') .style('cursor', 'default') .style('user-select', 'none'); @@ -265,12 +265,12 @@ module.exports = function(root, svg, styledData, layout, callbacks) { defs.enter() .append('defs'); - var filterBarPattern = defs.selectAll('#filterBarPattern') + var filterBarPattern = defs.selectAll('#' + c.id.filterBarPattern) .data(repeat, keyFun); filterBarPattern.enter() .append('pattern') - .attr('id', 'filterBarPattern') + .attr('id', c.id.filterBarPattern) .attr('patternUnits', 'userSpaceOnUse'); filterBarPattern @@ -301,14 +301,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .map(model.bind(0, layout)) .map(viewModel); - root.selectAll('.parcoords-line-layers').remove(); + root.selectAll('.' + c.cn.parcoordsLineLayers).remove(); - var parcoordsLineLayers = root.selectAll('.parcoords-line-layers') + var parcoordsLineLayers = root.selectAll('.' + c.cn.parcoordsLineLayers) .data(vm, keyFun); parcoordsLineLayers.enter() .insert('div', '.' + svg.attr('class').split(' ').join(' .')) // not hardcoding .main-svg - .classed('parcoords-line-layers', true) + .classed(c.cn.parcoordsLineLayers, true) .style('box-sizing', 'content-box'); parcoordsLineLayers @@ -316,7 +316,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) { return 'translate(' + (d.model.translateX - c.overdrag) + 'px,' + d.model.translateY + 'px)'; }); - var parcoordsLineLayer = parcoordsLineLayers.selectAll('.parcoords-lines') + var parcoordsLineLayer = parcoordsLineLayers.selectAll('.' + c.cn.parcoordsLineLayer) .data(lineLayerModel, keyFun); var tweakables = {renderers: [], dimensions: []}; @@ -325,13 +325,13 @@ module.exports = function(root, svg, styledData, layout, callbacks) { parcoordsLineLayer.enter() .append('canvas') - .attr('class', function(d) {return 'parcoords-lines ' + (d.context ? 'context' : d.pick ? 'pick' : 'focus');}) + .attr('class', function(d) {return c.cn.parcoordsLineLayer + ' ' + (d.context ? 'context' : d.pick ? 'pick' : 'focus');}) .style('box-sizing', 'content-box') .style('float', 'left') .style('clear', 'both') .style('left', 0) .style('overflow', 'visible') - .style('position', function(d, i) {return i > 0 ? 'absolute' : 'absolute';}) + .style('position', 'absolute') .filter(function(d) {return d.pick;}) .on('mousemove', function(d) { if(linePickActive && d.lineLayer && callbacks && callbacks.hover) { @@ -380,14 +380,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .style('opacity', function(d) {return d.pick ? 0.01 : 1;}); svg.style('background', 'rgba(255, 255, 255, 0)'); - var parcoordsControlOverlay = svg.selectAll('.parcoords') + var parcoordsControlOverlay = svg.selectAll('.' + c.cn.parcoords) .data(vm, keyFun); parcoordsControlOverlay.exit().remove(); parcoordsControlOverlay.enter() .append('g') - .classed('parcoords', true) + .classed(c.cn.parcoords, true) .attr('overflow', 'visible') .style('box-sizing', 'content-box') .style('position', 'absolute') @@ -404,18 +404,18 @@ module.exports = function(root, svg, styledData, layout, callbacks) { return 'translate(' + d.model.translateX + ',' + d.model.translateY + ')'; }); - var parcoordsControlView = parcoordsControlOverlay.selectAll('.parcoordsControlView') + var parcoordsControlView = parcoordsControlOverlay.selectAll('.' + c.cn.parcoordsControlView) .data(repeat, keyFun); parcoordsControlView.enter() .append('g') - .classed('parcoordsControlView', true) + .classed(c.cn.parcoordsControlView, true) .style('box-sizing', 'content-box'); parcoordsControlView .attr('transform', function(d) {return 'translate(' + d.model.pad.l + ',' + d.model.pad.t + ')';}); - var yAxis = parcoordsControlView.selectAll('.yAxis') + var yAxis = parcoordsControlView.selectAll('.' + c.cn.yAxis) .data(function(vm) {return vm.dimensions;}, keyFun); function someFiltersActive(view) { @@ -470,7 +470,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) { yAxis.enter() .append('g') - .classed('yAxis', true) + .classed(c.cn.yAxis, true) .each(function(d) {tweakables.dimensions.push(d);}); parcoordsControlView.each(function(vm) { @@ -543,21 +543,21 @@ module.exports = function(root, svg, styledData, layout, callbacks) { yAxis.exit() .remove(); - var axisOverlays = yAxis.selectAll('.axisOverlays') + var axisOverlays = yAxis.selectAll('.' + c.cn.axisOverlays) .data(repeat, keyFun); axisOverlays.enter() .append('g') - .classed('axisOverlays', true); + .classed(c.cn.axisOverlays, true); - axisOverlays.selectAll('.axis').remove(); + axisOverlays.selectAll('.' + c.cn.axis).remove(); - var axis = axisOverlays.selectAll('.axis') + var axis = axisOverlays.selectAll('.' + c.cn.axis) .data(repeat, keyFun); axis.enter() .append('g') - .classed('axis', true); + .classed(c.cn.axis, true); axis .each(function(d) { @@ -591,19 +591,19 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .style('cursor', 'default') .style('user-select', 'none'); - var axisHeading = axisOverlays.selectAll('.axisHeading') + var axisHeading = axisOverlays.selectAll('.' + c.cn.axisHeading) .data(repeat, keyFun); axisHeading.enter() .append('g') - .classed('axisHeading', true); + .classed(c.cn.axisHeading, true); - var axisTitle = axisHeading.selectAll('.axisTitle') + var axisTitle = axisHeading.selectAll('.' + c.cn.axisTitle) .data(repeat, keyFun); axisTitle.enter() .append('text') - .classed('axisTitle', true) + .classed(c.cn.axisTitle, true) .attr('text-anchor', 'middle') .style('cursor', 'ew-resize') .style('user-select', 'none') @@ -614,24 +614,24 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .text(function(d) {return d.label;}) .each(function(d) {Drawing.font(axisTitle, d.model.labelFont);}); - var axisExtent = axisOverlays.selectAll('.axisExtent') + var axisExtent = axisOverlays.selectAll('.' + c.cn.axisExtent) .data(repeat, keyFun); axisExtent.enter() .append('g') - .classed('axisExtent', true); + .classed(c.cn.axisExtent, true); - var axisExtentTop = axisExtent.selectAll('.axisExtentTop') + var axisExtentTop = axisExtent.selectAll('.' + c.cn.axisExtentTop) .data(repeat, keyFun); axisExtentTop.enter() .append('g') - .classed('axisExtentTop', true); + .classed(c.cn.axisExtentTop, true); axisExtentTop .attr('transform', 'translate(' + 0 + ',' + -c.axisExtentOffset + ')'); - var axisExtentTopText = axisExtentTop.selectAll('.axisExtentTopText') + var axisExtentTopText = axisExtentTop.selectAll('.' + c.cn.axisExtentTopText) .data(repeat, keyFun); function formatExtreme(d) { @@ -640,7 +640,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) { axisExtentTopText.enter() .append('text') - .classed('axisExtentTopText', true) + .classed(c.cn.axisExtentTopText, true) .attr('alignment-baseline', 'after-edge') .call(styleExtentTexts); @@ -648,22 +648,22 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);}) .each(function(d) {Drawing.font(axisExtentTopText, d.model.rangeFont);}); - var axisExtentBottom = axisExtent.selectAll('.axisExtentBottom') + var axisExtentBottom = axisExtent.selectAll('.' + c.cn.axisExtentBottom) .data(repeat, keyFun); axisExtentBottom.enter() .append('g') - .classed('axisExtentBottom', true); + .classed(c.cn.axisExtentBottom, true); axisExtentBottom .attr('transform', function(d) {return 'translate(' + 0 + ',' + (d.model.height + c.axisExtentOffset) + ')';}); - var axisExtentBottomText = axisExtentBottom.selectAll('.axisExtentBottomText') + var axisExtentBottomText = axisExtentBottom.selectAll('.' + c.cn.axisExtentBottomText) .data(repeat, keyFun); axisExtentBottomText.enter() .append('text') - .classed('axisExtentBottomText', true) + .classed(c.cn.axisExtentBottomText, true) .attr('alignment-baseline', 'before-edge') .call(styleExtentTexts); @@ -671,12 +671,12 @@ module.exports = function(root, svg, styledData, layout, callbacks) { .text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);}) .each(function(d) {Drawing.font(axisExtentBottomText, d.model.rangeFont);}); - var axisBrush = axisOverlays.selectAll('.axisBrush') + var axisBrush = axisOverlays.selectAll('.' + c.cn.axisBrush) .data(repeat, keyFun); var axisBrushEnter = axisBrush.enter() .append('g') - .classed('axisBrush', true); + .classed(c.cn.axisBrush, true); axisBrush .each(function(d) { @@ -700,7 +700,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) { axisBrushEnter .selectAll('rect.extent') - .attr('fill', 'url(#filterBarPattern)') + .attr('fill', 'url(#' + c.id.filterBarPattern + ')') .style('cursor', 'ns-resize') .filter(function(d) {return d.filter[0] === 0 && d.filter[1] === 1;}) .attr('y', -100); // // zero-size rectangle pointer issue workaround diff --git a/test/jasmine/tests/parcoords_test.js b/test/jasmine/tests/parcoords_test.js index 643839742c9..66efc5b3df0 100644 --- a/test/jasmine/tests/parcoords_test.js +++ b/test/jasmine/tests/parcoords_test.js @@ -806,23 +806,23 @@ describe('@noCI parcoords', function() { Plotly.plot(gd, mockCopy) .then(function() { expect(gd.data.length).toEqual(1); - expect(document.querySelectorAll('.yAxis').length).toEqual(10); + expect(document.querySelectorAll('.y-axis').length).toEqual(10); return Plotly.plot(gd, mockCopy2); }) .then(function() { expect(gd.data.length).toEqual(2); - expect(document.querySelectorAll('.yAxis').length).toEqual(10 + 7); + expect(document.querySelectorAll('.y-axis').length).toEqual(10 + 7); return Plotly.deleteTraces(gd, [0]); }) .then(function() { expect(document.querySelectorAll('.parcoords-line-layers').length).toEqual(1); - expect(document.querySelectorAll('.yAxis').length).toEqual(7); + expect(document.querySelectorAll('.y-axis').length).toEqual(7); expect(gd.data.length).toEqual(1); return Plotly.deleteTraces(gd, 0); }) .then(function() { expect(document.querySelectorAll('.parcoords-line-layers').length).toEqual(0); - expect(document.querySelectorAll('.yAxis').length).toEqual(0); + expect(document.querySelectorAll('.y-axis').length).toEqual(0); expect(gd.data.length).toEqual(0); done(); }); From 6f0b512794ffb14cdce7b9be571098f73e620855 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Fri, 6 Oct 2017 18:37:39 +0200 Subject: [PATCH 3/3] factoring out and uppercasing class names - sankey --- src/traces/sankey/constants.js | 15 ++++++++++- src/traces/sankey/plot.js | 15 ++++++----- src/traces/sankey/render.js | 44 +++++++++++++++---------------- test/jasmine/tests/sankey_test.js | 2 +- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/traces/sankey/constants.js b/src/traces/sankey/constants.js index 3c407c14bfb..003c3fd70a7 100644 --- a/src/traces/sankey/constants.js +++ b/src/traces/sankey/constants.js @@ -16,5 +16,18 @@ module.exports = { forceIterations: 5, forceTicksPerFrame: 10, duration: 500, - ease: 'cubic-in-out' + ease: 'cubic-in-out', + cn: { + sankey: 'sankey', + sankeyLinks: 'sankey-links', + sankeyLink: 'sankey-link', + sankeyNodeSet: 'sankey-node-set', + sankeyNode: 'sankey-node', + nodeRect: 'node-rect', + nodeCapture: 'node-capture', + nodeCentered: 'node-entered', + nodeLabelGuide: 'node-label-guide', + nodeLabel: 'node-label', + nodeLabelTextPath: 'node-label-text-path' + } }; diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 05075b6e9bb..cf53c53857d 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -13,6 +13,7 @@ var render = require('./render'); var Fx = require('../../components/fx'); var Color = require('../../components/color'); var Lib = require('../../lib'); +var cn = require('./constants').cn; function renderableValuePresent(d) {return d !== '';} @@ -50,7 +51,7 @@ function relatedNodes(l) { function nodeHoveredStyle(sankeyNode, d, sankey) { if(d && sankey) { ownTrace(sankey, d) - .selectAll('.sankeyLink') + .selectAll('.' + cn.sankeyLink) .filter(relatedLinks(d)) .call(linkHoveredStyle.bind(0, d, sankey, false)); } @@ -59,7 +60,7 @@ function nodeHoveredStyle(sankeyNode, d, sankey) { function nodeNonHoveredStyle(sankeyNode, d, sankey) { if(d && sankey) { ownTrace(sankey, d) - .selectAll('.sankeyLink') + .selectAll('.' + cn.sankeyLink) .filter(relatedLinks(d)) .call(linkNonHoveredStyle.bind(0, d, sankey, false)); } @@ -73,14 +74,14 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { if(label) { ownTrace(sankey, d) - .selectAll('.sankeyLink') + .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) .style('fill-opacity', 0.4); } if(visitNodes) { ownTrace(sankey, d) - .selectAll('.sankeyNode') + .selectAll('.' + cn.sankeyNode) .filter(relatedNodes(d)) .call(nodeHoveredStyle); } @@ -94,14 +95,14 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { if(label) { ownTrace(sankey, d) - .selectAll('.sankeyLink') + .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) .style('fill-opacity', function(d) {return d.tinyColorAlpha;}); } if(visitNodes) { ownTrace(sankey, d) - .selectAll('.sankeyNode') + .selectAll(cn.sankeyNode) .filter(relatedNodes(d)) .call(nodeNonHoveredStyle); } @@ -192,7 +193,7 @@ module.exports = function plot(gd, calcData) { var nodeHoverFollow = function(element, d) { var trace = d.node.trace; - var nodeRect = d3.select(element).select('.nodeRect'); + var nodeRect = d3.select(element).select('.' + cn.nodeRect); var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect(); var boundingBox = nodeRect.node().getBoundingClientRect(); var hoverCenterX0 = boundingBox.left - 2 - rootBBox.left; diff --git a/src/traces/sankey/render.js b/src/traces/sankey/render.js index 53334540c36..b81ef3ba4a9 100644 --- a/src/traces/sankey/render.js +++ b/src/traces/sankey/render.js @@ -414,7 +414,7 @@ function snappingForce(sankeyNode, forceKey, nodes, d) { // scene graph module.exports = function(svg, styledData, layout, callbacks) { - var sankey = svg.selectAll('.sankey') + var sankey = svg.selectAll('.' + c.cn.sankey) .data(styledData .filter(function(d) {return unwrap(d).trace.visible;}) .map(sankeyModel.bind(null, layout)), @@ -425,7 +425,7 @@ module.exports = function(svg, styledData, layout, callbacks) { sankey.enter() .append('g') - .classed('sankey', true) + .classed(c.cn.sankey, true) .style('box-sizing', 'content-box') .style('position', 'absolute') .style('left', 0) @@ -438,15 +438,15 @@ module.exports = function(svg, styledData, layout, callbacks) { .ease(c.ease).duration(c.duration) .attr('transform', sankeyTransform); - var sankeyLinks = sankey.selectAll('.sankeyLinks') + var sankeyLinks = sankey.selectAll('.' + c.cn.sankeyLinks) .data(repeat, keyFun); sankeyLinks.enter() .append('g') - .classed('sankeyLinks', true) + .classed(c.cn.sankeyLinks, true) .style('fill', 'none'); - var sankeyLink = sankeyLinks.selectAll('.sankeyLink') + var sankeyLink = sankeyLinks.selectAll('.' + c.cn.sankeyLink) .data(function(d) { var uniqueKeys = {}; return d.sankey.links() @@ -456,7 +456,7 @@ module.exports = function(svg, styledData, layout, callbacks) { sankeyLink.enter() .append('path') - .classed('sankeyLink', true) + .classed(c.cn.sankeyLink, true) .attr('d', linkPath) .call(attachPointerEvents, sankey, callbacks.linkEvents); @@ -480,12 +480,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .style('opacity', 0) .remove(); - var sankeyNodeSet = sankey.selectAll('.sankeyNodeSet') + var sankeyNodeSet = sankey.selectAll('.' + c.cn.sankeyNodeSet) .data(repeat, keyFun); sankeyNodeSet.enter() .append('g') - .classed('sankeyNodeSet', true); + .classed(c.cn.sankeyNodeSet, true); sankeyNodeSet .style('cursor', function(d) { @@ -496,7 +496,7 @@ module.exports = function(svg, styledData, layout, callbacks) { } }); - var sankeyNode = sankeyNodeSet.selectAll('.sankeyNode') + var sankeyNode = sankeyNodeSet.selectAll('.' + c.cn.sankeyNode) .data(function(d) { var nodes = d.sankey.nodes(); var uniqueKeys = {}; @@ -508,7 +508,7 @@ module.exports = function(svg, styledData, layout, callbacks) { sankeyNode.enter() .append('g') - .classed('sankeyNode', true) + .classed(c.cn.sankeyNode, true) .call(updateNodePositions) .call(attachPointerEvents, sankey, callbacks.nodeEvents); @@ -524,12 +524,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .style('opacity', 0) .remove(); - var nodeRect = sankeyNode.selectAll('.nodeRect') + var nodeRect = sankeyNode.selectAll('.' + c.cn.nodeRect) .data(repeat); nodeRect.enter() .append('rect') - .classed('nodeRect', true) + .classed(c.cn.nodeRect, true) .call(sizeNode); nodeRect @@ -543,12 +543,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .ease(c.ease).duration(c.duration) .call(sizeNode); - var nodeCapture = sankeyNode.selectAll('.nodeCapture') + var nodeCapture = sankeyNode.selectAll('.' + c.cn.nodeCapture) .data(repeat); nodeCapture.enter() .append('rect') - .classed('nodeCapture', true) + .classed(c.cn.nodeCapture, true) .style('fill-opacity', 0); nodeCapture @@ -557,12 +557,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .attr('width', function(d) {return d.zoneWidth;}) .attr('height', function(d) {return d.zoneHeight;}); - var nodeCentered = sankeyNode.selectAll('.nodeCentered') + var nodeCentered = sankeyNode.selectAll('.' + c.cn.nodeCentered) .data(repeat); nodeCentered.enter() .append('g') - .classed('nodeCentered', true) + .classed(c.cn.nodeCentered, true) .attr('transform', nodeCentering); nodeCentered @@ -570,12 +570,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .ease(c.ease).duration(c.duration) .attr('transform', nodeCentering); - var nodeLabelGuide = nodeCentered.selectAll('.nodeLabelGuide') + var nodeLabelGuide = nodeCentered.selectAll('.' + c.cn.nodeLabelGuide) .data(repeat); nodeLabelGuide.enter() .append('path') - .classed('nodeLabelGuide', true) + .classed(c.cn.nodeLabelGuide, true) .attr('id', function(d) {return d.uniqueNodeLabelPathId;}) .attr('d', textGuidePath) .attr('transform', sankeyInverseTransform); @@ -586,12 +586,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .attr('d', textGuidePath) .attr('transform', sankeyInverseTransform); - var nodeLabel = nodeCentered.selectAll('.nodeLabel') + var nodeLabel = nodeCentered.selectAll('.' + c.cn.nodeLabel) .data(repeat); nodeLabel.enter() .append('text') - .classed('nodeLabel', true) + .classed(c.cn.nodeLabel, true) .attr('transform', textFlip) .style('user-select', 'none') .style('cursor', 'default') @@ -608,12 +608,12 @@ module.exports = function(svg, styledData, layout, callbacks) { .ease(c.ease).duration(c.duration) .attr('transform', textFlip); - var nodeLabelTextPath = nodeLabel.selectAll('.nodeLabelTextPath') + var nodeLabelTextPath = nodeLabel.selectAll('.' + c.cn.nodeLabelTextPath) .data(repeat); nodeLabelTextPath.enter() .append('textPath') - .classed('nodeLabelTextPath', true) + .classed(c.cn.nodeLabelTextPath, true) .attr('alignment-baseline', 'middle') .attr('xlink:href', function(d) {return '#' + d.uniqueNodeLabelPathId;}) .attr('startOffset', nodeTextOffset) diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 965575eba9c..33e36cee22d 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -365,7 +365,7 @@ describe('sankey tests', function() { }]; Plotly.plot(gd, minimock) .then(function() { - expect(d3.selectAll('.sankey .nodeRect')[0].reduce(function(prevMin, rect) { + expect(d3.selectAll('.sankey .node-rect')[0].reduce(function(prevMin, rect) { return Math.min(prevMin, d3.select(rect).attr('height')); }, Infinity)).toEqual(0.5); done();