Skip to content

Commit a5d95f6

Browse files
monferamonfera
committed
factoring out class names - parcoords
1 parent 037cebf commit a5d95f6

File tree

3 files changed

+63
-41
lines changed

3 files changed

+63
-41
lines changed

‎src/traces/parcoords/constants.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,27 @@ module.exports = {
3131
handleheight: 16, // Height of the filter bar vertical resize areas on top and bottom
3232
handleopacity: 1, // Opacity of the filter bar vertical resize areas on top and bottom
3333
handleoverlap: 0 // A larger than 0 value causes overlaps with the filter bar, represented as pixels.'
34+
},
35+
cn: {
36+
axisExtentText: 'axis-extent-text',
37+
parcoordsLineLayers: 'parcoords-line-layers',
38+
parcoordsLineLayer: 'parcoords-lines',
39+
parcoords: 'parcoords',
40+
parcoordsControlView: 'parcoords-control-view',
41+
yAxis: 'y-axis',
42+
axisOverlays: 'axis-overlays',
43+
axis: 'axis',
44+
axisHeading: 'axis-heading',
45+
axisTitle: 'axis-title',
46+
axisExtent: 'axis-extent',
47+
axisExtentTop: 'axis-extent-top',
48+
axisExtentTopText: 'axis-extent-top-text',
49+
axisExtentBottom: 'axis-extent-bottom',
50+
axisExtentBottomText: 'axis-extent-bottom-text',
51+
axisBrush: 'axis-brush'
52+
},
53+
id: {
54+
filterBarPattern: 'filter-bar-pattern'
55+
3456
}
3557
};

‎src/traces/parcoords/parcoords.js‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ function lineLayerModel(vm) {
247247

248248
function styleExtentTexts(selection) {
249249
selection
250-
.classed('axisExtentText', true)
250+
.classed(c.cn.axisExtentText, true)
251251
.attr('text-anchor', 'middle')
252252
.style('cursor', 'default')
253253
.style('user-select', 'none');
@@ -265,12 +265,12 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
265265
defs.enter()
266266
.append('defs');
267267

268-
var filterBarPattern = defs.selectAll('#filterBarPattern')
268+
var filterBarPattern = defs.selectAll('#' + c.id.filterBarPattern)
269269
.data(repeat, keyFun);
270270

271271
filterBarPattern.enter()
272272
.append('pattern')
273-
.attr('id', 'filterBarPattern')
273+
.attr('id', c.id.filterBarPattern)
274274
.attr('patternUnits', 'userSpaceOnUse');
275275

276276
filterBarPattern
@@ -301,22 +301,22 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
301301
.map(model.bind(0, layout))
302302
.map(viewModel);
303303

304-
root.selectAll('.parcoords-line-layers').remove();
304+
root.selectAll('.' + c.cn.parcoordsLineLayers).remove();
305305

306-
var parcoordsLineLayers = root.selectAll('.parcoords-line-layers')
306+
var parcoordsLineLayers = root.selectAll('.' + c.cn.parcoordsLineLayers)
307307
.data(vm, keyFun);
308308

309309
parcoordsLineLayers.enter()
310310
.insert('div', '.' + svg.attr('class').split(' ').join(' .')) // not hardcoding .main-svg
311-
.classed('parcoords-line-layers', true)
311+
.classed(c.cn.parcoordsLineLayers, true)
312312
.style('box-sizing', 'content-box');
313313

314314
parcoordsLineLayers
315315
.style('transform', function(d) {
316316
return 'translate(' + (d.model.translateX - c.overdrag) + 'px,' + d.model.translateY + 'px)';
317317
});
318318

319-
var parcoordsLineLayer = parcoordsLineLayers.selectAll('.parcoords-lines')
319+
var parcoordsLineLayer = parcoordsLineLayers.selectAll('.' + c.cn.parcoordsLineLayer)
320320
.data(lineLayerModel, keyFun);
321321

322322
var tweakables = {renderers: [], dimensions: []};
@@ -325,13 +325,13 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
325325

326326
parcoordsLineLayer.enter()
327327
.append('canvas')
328-
.attr('class', function(d) {return 'parcoords-lines ' + (d.context ? 'context' : d.pick ? 'pick' : 'focus');})
328+
.attr('class', function(d) {return c.cn.parcoordsLineLayer + ' ' + (d.context ? 'context' : d.pick ? 'pick' : 'focus');})
329329
.style('box-sizing', 'content-box')
330330
.style('float', 'left')
331331
.style('clear', 'both')
332332
.style('left', 0)
333333
.style('overflow', 'visible')
334-
.style('position', function(d, i) {return i > 0 ? 'absolute' : 'absolute';})
334+
.style('position', 'absolute')
335335
.filter(function(d) {return d.pick;})
336336
.on('mousemove', function(d) {
337337
if(linePickActive && d.lineLayer && callbacks && callbacks.hover) {
@@ -380,14 +380,14 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
380380
.style('opacity', function(d) {return d.pick ? 0.01 : 1;});
381381

382382
svg.style('background', 'rgba(255, 255, 255, 0)');
383-
var parcoordsControlOverlay = svg.selectAll('.parcoords')
383+
var parcoordsControlOverlay = svg.selectAll('.' + c.cn.parcoords)
384384
.data(vm, keyFun);
385385

386386
parcoordsControlOverlay.exit().remove();
387387

388388
parcoordsControlOverlay.enter()
389389
.append('g')
390-
.classed('parcoords', true)
390+
.classed(c.cn.parcoords, true)
391391
.attr('overflow', 'visible')
392392
.style('box-sizing', 'content-box')
393393
.style('position', 'absolute')
@@ -404,18 +404,18 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
404404
return 'translate(' + d.model.translateX + ',' + d.model.translateY + ')';
405405
});
406406

407-
var parcoordsControlView = parcoordsControlOverlay.selectAll('.parcoordsControlView')
407+
var parcoordsControlView = parcoordsControlOverlay.selectAll('.' + c.cn.parcoordsControlView)
408408
.data(repeat, keyFun);
409409

410410
parcoordsControlView.enter()
411411
.append('g')
412-
.classed('parcoordsControlView', true)
412+
.classed(c.cn.parcoordsControlView, true)
413413
.style('box-sizing', 'content-box');
414414

415415
parcoordsControlView
416416
.attr('transform', function(d) {return 'translate(' + d.model.pad.l + ',' + d.model.pad.t + ')';});
417417

418-
var yAxis = parcoordsControlView.selectAll('.yAxis')
418+
var yAxis = parcoordsControlView.selectAll('.' + c.cn.yAxis)
419419
.data(function(vm) {return vm.dimensions;}, keyFun);
420420

421421
function someFiltersActive(view) {
@@ -470,7 +470,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
470470

471471
yAxis.enter()
472472
.append('g')
473-
.classed('yAxis', true)
473+
.classed(c.cn.yAxis, true)
474474
.each(function(d) {tweakables.dimensions.push(d);});
475475

476476
parcoordsControlView.each(function(vm) {
@@ -543,21 +543,21 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
543543
yAxis.exit()
544544
.remove();
545545

546-
var axisOverlays = yAxis.selectAll('.axisOverlays')
546+
var axisOverlays = yAxis.selectAll('.' + c.cn.axisOverlays)
547547
.data(repeat, keyFun);
548548

549549
axisOverlays.enter()
550550
.append('g')
551-
.classed('axisOverlays', true);
551+
.classed(c.cn.axisOverlays, true);
552552

553-
axisOverlays.selectAll('.axis').remove();
553+
axisOverlays.selectAll('.' + c.cn.axis).remove();
554554

555-
var axis = axisOverlays.selectAll('.axis')
555+
var axis = axisOverlays.selectAll('.' + c.cn.axis)
556556
.data(repeat, keyFun);
557557

558558
axis.enter()
559559
.append('g')
560-
.classed('axis', true);
560+
.classed(c.cn.axis, true);
561561

562562
axis
563563
.each(function(d) {
@@ -591,19 +591,19 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
591591
.style('cursor', 'default')
592592
.style('user-select', 'none');
593593

594-
var axisHeading = axisOverlays.selectAll('.axisHeading')
594+
var axisHeading = axisOverlays.selectAll('.' + c.cn.axisHeading)
595595
.data(repeat, keyFun);
596596

597597
axisHeading.enter()
598598
.append('g')
599-
.classed('axisHeading', true);
599+
.classed(c.cn.axisHeading, true);
600600

601-
var axisTitle = axisHeading.selectAll('.axisTitle')
601+
var axisTitle = axisHeading.selectAll('.' + c.cn.axisTitle)
602602
.data(repeat, keyFun);
603603

604604
axisTitle.enter()
605605
.append('text')
606-
.classed('axisTitle', true)
606+
.classed(c.cn.axisTitle, true)
607607
.attr('text-anchor', 'middle')
608608
.style('cursor', 'ew-resize')
609609
.style('user-select', 'none')
@@ -614,24 +614,24 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
614614
.text(function(d) {return d.label;})
615615
.each(function(d) {Drawing.font(axisTitle, d.model.labelFont);});
616616

617-
var axisExtent = axisOverlays.selectAll('.axisExtent')
617+
var axisExtent = axisOverlays.selectAll('.' + c.cn.axisExtent)
618618
.data(repeat, keyFun);
619619

620620
axisExtent.enter()
621621
.append('g')
622-
.classed('axisExtent', true);
622+
.classed(c.cn.axisExtent, true);
623623

624-
var axisExtentTop = axisExtent.selectAll('.axisExtentTop')
624+
var axisExtentTop = axisExtent.selectAll('.' + c.cn.axisExtentTop)
625625
.data(repeat, keyFun);
626626

627627
axisExtentTop.enter()
628628
.append('g')
629-
.classed('axisExtentTop', true);
629+
.classed(c.cn.axisExtentTop, true);
630630

631631
axisExtentTop
632632
.attr('transform', 'translate(' + 0 + ',' + -c.axisExtentOffset + ')');
633633

634-
var axisExtentTopText = axisExtentTop.selectAll('.axisExtentTopText')
634+
var axisExtentTopText = axisExtentTop.selectAll('.' + c.cn.axisExtentTopText)
635635
.data(repeat, keyFun);
636636

637637
function formatExtreme(d) {
@@ -640,43 +640,43 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
640640

641641
axisExtentTopText.enter()
642642
.append('text')
643-
.classed('axisExtentTopText', true)
643+
.classed(c.cn.axisExtentTopText, true)
644644
.attr('alignment-baseline', 'after-edge')
645645
.call(styleExtentTexts);
646646

647647
axisExtentTopText
648648
.text(function(d) {return formatExtreme(d)(d.domainScale.domain().slice(-1)[0]);})
649649
.each(function(d) {Drawing.font(axisExtentTopText, d.model.rangeFont);});
650650

651-
var axisExtentBottom = axisExtent.selectAll('.axisExtentBottom')
651+
var axisExtentBottom = axisExtent.selectAll('.' + c.cn.axisExtentBottom)
652652
.data(repeat, keyFun);
653653

654654
axisExtentBottom.enter()
655655
.append('g')
656-
.classed('axisExtentBottom', true);
656+
.classed(c.cn.axisExtentBottom, true);
657657

658658
axisExtentBottom
659659
.attr('transform', function(d) {return 'translate(' + 0 + ',' + (d.model.height + c.axisExtentOffset) + ')';});
660660

661-
var axisExtentBottomText = axisExtentBottom.selectAll('.axisExtentBottomText')
661+
var axisExtentBottomText = axisExtentBottom.selectAll('.' + c.cn.axisExtentBottomText)
662662
.data(repeat, keyFun);
663663

664664
axisExtentBottomText.enter()
665665
.append('text')
666-
.classed('axisExtentBottomText', true)
666+
.classed(c.cn.axisExtentBottomText, true)
667667
.attr('alignment-baseline', 'before-edge')
668668
.call(styleExtentTexts);
669669

670670
axisExtentBottomText
671671
.text(function(d) {return formatExtreme(d)(d.domainScale.domain()[0]);})
672672
.each(function(d) {Drawing.font(axisExtentBottomText, d.model.rangeFont);});
673673

674-
var axisBrush = axisOverlays.selectAll('.axisBrush')
674+
var axisBrush = axisOverlays.selectAll('.' + c.cn.axisBrush)
675675
.data(repeat, keyFun);
676676

677677
var axisBrushEnter = axisBrush.enter()
678678
.append('g')
679-
.classed('axisBrush', true);
679+
.classed(c.cn.axisBrush, true);
680680

681681
axisBrush
682682
.each(function(d) {
@@ -700,7 +700,7 @@ module.exports = function(root, svg, styledData, layout, callbacks) {
700700

701701
axisBrushEnter
702702
.selectAll('rect.extent')
703-
.attr('fill', 'url(#filterBarPattern)')
703+
.attr('fill', 'url(#' + c.id.filterBarPattern + ')')
704704
.style('cursor', 'ns-resize')
705705
.filter(function(d) {return d.filter[0] === 0 && d.filter[1] === 1;})
706706
.attr('y', -100); // // zero-size rectangle pointer issue workaround

‎test/jasmine/tests/parcoords_test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -806,23 +806,23 @@ describe('@noCI parcoords', function() {
806806
Plotly.plot(gd, mockCopy)
807807
.then(function() {
808808
expect(gd.data.length).toEqual(1);
809-
expect(document.querySelectorAll('.yAxis').length).toEqual(10);
809+
expect(document.querySelectorAll('.y-axis').length).toEqual(10);
810810
return Plotly.plot(gd, mockCopy2);
811811
})
812812
.then(function() {
813813
expect(gd.data.length).toEqual(2);
814-
expect(document.querySelectorAll('.yAxis').length).toEqual(10 + 7);
814+
expect(document.querySelectorAll('.y-axis').length).toEqual(10 + 7);
815815
return Plotly.deleteTraces(gd, [0]);
816816
})
817817
.then(function() {
818818
expect(document.querySelectorAll('.parcoords-line-layers').length).toEqual(1);
819-
expect(document.querySelectorAll('.yAxis').length).toEqual(7);
819+
expect(document.querySelectorAll('.y-axis').length).toEqual(7);
820820
expect(gd.data.length).toEqual(1);
821821
return Plotly.deleteTraces(gd, 0);
822822
})
823823
.then(function() {
824824
expect(document.querySelectorAll('.parcoords-line-layers').length).toEqual(0);
825-
expect(document.querySelectorAll('.yAxis').length).toEqual(0);
825+
expect(document.querySelectorAll('.y-axis').length).toEqual(0);
826826
expect(gd.data.length).toEqual(0);
827827
done();
828828
});

0 commit comments

Comments
 (0)