Fix bug with unknown values and multidata plots

Author: keller-mark

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueplotlib",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open ./examples-src/index.js",

src/components/plots/MultiDataRectPlot.vue

@@ -58,6 +58,7 @@ import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
 
 import mixin from './mixin.js';
+import ContinuousScale from './../../scales/ContinuousScale.js';
 import CategoricalScale from './../../scales/CategoricalScale.js';
 
 let uuid = 0;
@@ -382,32 +383,42 @@ export default {
             }
 
             point.forEach((pointValue, i) => {
-                const col = genColor();
-                colToNode[col] = { "i": i, "c": point[i][vm.cArray[i]] };
-                contextHidden.fillStyle = col;
-
-                const textValue = this._cScales[i].toHuman(point[i][vm.cArray[i]]);
-
-                const rect = two.makeRectangle(
-                    0.5 + rectWidth/2, y(i) + rectHeight/2, 
-                    rectWidth, rectHeight - rectMargin
-                );
-                contextHidden.fillRect(
-                    0.5, y(i), 
-                    rectWidth, rectHeight
-                );
-
-                const text = two.makeText(
-                    textOffsetX + 4, y(i) + (rectHeight/2) + 7, 
-                    textWidth, rectHeight, textValue
-                );
-
-                text.textalign = "left";
-                rect.fill = cScales[i].color(point[i][vm.cArray[i]]);
-                rect.noStroke();
-
-                text.fontsize = vm.textSize;
-                text.fill = vm.textColor;
+                const d = point[i][vm.cArray[i]];
+                if(
+                    AbstractScale.isUnknown(d) ||
+                    (
+                        (cScales[i] instanceof CategoricalScale && cScales[i].domainFiltered.includes(d))
+                        || 
+                        (cScales[i] instanceof ContinuousScale && cScales[i].domainFiltered[0] <= d && cScales[i].domainFiltered[1] >= d)
+                    )
+                ) {
+                    const col = genColor();
+                    colToNode[col] = { "i": i, "c": d };
+                    contextHidden.fillStyle = col;
+
+                    const textValue = this._cScales[i].toHuman(d);
+
+                    const rect = two.makeRectangle(
+                        0.5 + rectWidth/2, y(i) + rectHeight/2, 
+                        rectWidth, rectHeight - rectMargin
+                    );
+                    contextHidden.fillRect(
+                        0.5, y(i), 
+                        rectWidth, rectHeight
+                    );
+
+                    const text = two.makeText(
+                        textOffsetX + 4, y(i) + (rectHeight/2) + 7, 
+                        textWidth, rectHeight, textValue
+                    );
+
+                    text.textalign = "left";
+                    rect.fill = cScales[i].color(d);
+                    rect.noStroke();
+
+                    text.fontsize = vm.textSize;
+                    text.fill = vm.textColor;
+                }
             });
             
 

src/components/plots/MultiDataTrackPlot.vue

@@ -85,6 +85,8 @@ import AbstractScale from './../../scales/AbstractScale.js';
 import DataContainer from './../../data/DataContainer.js';
 
 import mixin from './mixin.js';
+import ContinuousScale from './../../scales/ContinuousScale.js';
+import CategoricalScale from './../../scales/CategoricalScale.js';
 
 let uuid = 0;
 /**
@@ -398,21 +400,29 @@ export default {
             
             vm.dataArray.forEach((dataKey, i) => {
                 datas[i].forEach((d) => {
-
-                    const col = genColor();
-                    colToNode[col] = { "x": d[vm.x], "i": i, "c": d[vm.cArray[i]] };
-                    contextHidden.fillStyle = col;
-
-                    const rect = two.makeRectangle(
-                        x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2 + 0.5, 
-                        y(i) + (barMarginY/2) + (barHeight - barMarginY)/2, 
-                        barWidth - barMarginX, 
-                        barHeight - barMarginY
-                    );
-                    rect.fill = cScales[i].color(d[vm.cArray[i]]);
-                    rect.noStroke();
-
-                    contextHidden.fillRect(x(d[vm.x]) + 0.5, y(i), barWidth, barHeight);
+                    if(
+                        AbstractScale.isUnknown(d[vm.cArray[i]]) ||
+                        (
+                            (cScales[i] instanceof CategoricalScale && cScales[i].domainFiltered.includes(d[vm.cArray[i]]))
+                            || 
+                            (cScales[i] instanceof ContinuousScale && cScales[i].domainFiltered[0] <= d[vm.cArray[i]] && cScales[i].domainFiltered[1] >= d[vm.cArray[i]])
+                        )
+                    ) {
+                        const col = genColor();
+                        colToNode[col] = { "x": d[vm.x], "i": i, "c": d[vm.cArray[i]] };
+                        contextHidden.fillStyle = col;
+
+                        const rect = two.makeRectangle(
+                            x(d[vm.x]) + (barMarginX/2) + (barWidth - barMarginX)/2 + 0.5, 
+                            y(i) + (barMarginY/2) + (barHeight - barMarginY)/2, 
+                            barWidth - barMarginX, 
+                            barHeight - barMarginY
+                        );
+                        rect.fill = cScales[i].color(d[vm.cArray[i]]);
+                        rect.noStroke();
+
+                        contextHidden.fillRect(x(d[vm.x]) + 0.5, y(i), barWidth, barHeight);
+                    }
                 });
             });