Merge pull request #2067 from plotly/lisp-case-class-names

Lisp-casing class, id names and factoring them out in `table`, `parcoords`, `sankey`

Author: monfera

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'
+
     }
 };

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,22 +301,22 @@ 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
         .style('transform', function(d) {
             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,43 +640,43 @@ 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);
 
     axisExtentTopText
         .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);
 
     axisExtentBottomText
         .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

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'
+    }
 };

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;