Merge pull request #8071 from Lexachoc/fix-scattergl-marker-symbol-display

Fix numeric and numeric-string marker symbol variant detection in `scattergl`

Author: camdecoster

draftlogs/8071_fix.md

@@ -0,0 +1 @@
+- Fix numeric and numeric-string marker symbol variant detection in `scattergl` [[#8071](https://github.com/plotly/plotly.js/pull/8071)]

src/traces/scattergl/constants.ts

@@ -6,9 +6,6 @@ export const SYMBOL_SDF_SIZE = 200;
 export const SYMBOL_SIZE = 20;
 export const SYMBOL_STROKE = SYMBOL_SIZE / 20;
 
-export const DOT_RE = /-dot/;
-export const OPEN_RE = /-open/;
-
 export const DASHES = {
     solid: [1],
     dot: [1, 1],

src/traces/scattergl/helpers.js

@@ -1,15 +1,7 @@
 'use strict';
 
-var constants = require('./constants');
+const { symbolNumber } = require('../../components/drawing');
 
-exports.isOpenSymbol = function(symbol) {
-    return (typeof symbol === 'string') ?
-        constants.OPEN_RE.test(symbol) :
-        symbol % 200 > 100;
-};
+exports.isOpenSymbol = (symbol) => symbolNumber(symbol) % 200 >= 100;
 
-exports.isDotSymbol = function(symbol) {
-    return (typeof symbol === 'string') ?
-        constants.DOT_RE.test(symbol) :
-        symbol > 200;
-};
+exports.isDotSymbol = (symbol) => symbolNumber(symbol) >= 200;

test/jasmine/tests/scattergl_test.js

@@ -2,6 +2,7 @@ var Plotly = require('../../../lib/index');
 var Lib = require('../../../src/lib');
 
 var ScatterGl = require('../../../src/traces/scattergl');
+var ScatterGlHelpers = require('../../../src/traces/scattergl/helpers');
 var TOO_MANY_POINTS = require('../../../src/traces/scattergl/constants').TOO_MANY_POINTS;
 
 var createGraphDiv = require('../assets/create_graph_div');
@@ -11,6 +12,37 @@ var delay = require('../assets/delay');
 var readPixel = require('../assets/read_pixel');
 var checkTextTemplate = require('../assets/check_texttemplate');
 
+describe('scattergl marker symbol variants', function() {
+    var symbolCases = [
+        {symbols: ['circle', 0, '0'], isOpen: false, isDot: false},
+        {symbols: ['circle-open', 100, '100'], isOpen: true, isDot: false},
+        {symbols: ['circle-dot', 200, '200'], isOpen: false, isDot: true},
+        {symbols: ['circle-open-dot', 300, '300'], isOpen: true, isDot: true}
+    ];
+
+    it('should detect open symbol variants', function() {
+        symbolCases.forEach(function(symbolCase) {
+            symbolCase.symbols.forEach(function(symbol) {
+                expect(ScatterGlHelpers.isOpenSymbol(symbol)).toBe(
+                    symbolCase.isOpen,
+                    'symbol: ' + JSON.stringify(symbol)
+                );
+            });
+        });
+    });
+
+    it('should detect dot symbol variants', function() {
+        symbolCases.forEach(function(symbolCase) {
+            symbolCase.symbols.forEach(function(symbol) {
+                expect(ScatterGlHelpers.isDotSymbol(symbol)).toBe(
+                    symbolCase.isDot,
+                    'symbol: ' + JSON.stringify(symbol)
+                );
+            });
+        });
+    });
+});
+
 describe('end-to-end scattergl tests', function() {
     var gd;