Merge pull request #468 from Kitware/linechart-dots

Add option to LineChart to display data dots

app/examples/index.json

@@ -11,6 +11,10 @@
     "title": "Line Chart",
     "link": "line"
   },
+  {
+    "title": "Line Chart with Points",
+    "link": "linechart-points"
+  },
   {
     "title": "Scatter Plot Matrix",
     "link": "scattermatrix"

app/examples/linechart-points/index.js

@@ -0,0 +1,22 @@
+import { msft } from '../util/datasets';
+import showComponent from '../util/showComponent';
+
+window.onload = () => {
+  showComponent('LineChart', 'div', {
+    data: msft,
+    x: 'date',
+    y: ['price'],
+    width: 735,
+    height: 535,
+    hoverSize: 50,
+    padding: {
+      top: 20,
+      bottom: 45,
+      left: 45,
+      right: 20
+    },
+    showPoints: true,
+    pointSize: 25,
+    renderer: 'svg'
+  });
+};

python/pycandela/pycandela/__init__.py

@@ -89,6 +89,7 @@ def __dir__(self):
     def __getattr__(self, name):
         return partial(Component, name)
 
+
 components = ComponentAccessor()
 
 init()

src/candela/components/LineChart/spec.json

@@ -7,7 +7,7 @@
 
     // Default to showing the x and y fields on hover.
     ["hover", ["@merge", [["@get", "x"]], ["@get", "y"]]],
-    ["hoverSize", 20],
+    ["pointSize", 25],
 
     // Default axis titles to x and y field names.
     ["xAxis.title", ["@get", "x"]],
@@ -174,12 +174,10 @@
                   "update": {
                     "x": {"scale": "x", "field": "x"},
                     "y": {"scale": "y", "field": "y"},
-                    "stroke": {"scale": "color", "field": "color"},
                     "shape": {"value": "circle"},
-                    "fill": {"scale": "color", "field": "color"},
-                    "opacity": {"value": 0},
-                    "strokeWidth": {"value": 2},
-                    "size": {"value": ["@get", "hoverSize"]}
+                    "fill": {"scale": "color", "value": ["@get", "yfield"]},
+                    "opacity": {"value": ["@if", ["@get", "showPoints"], 1, 0]},
+                    "size": {"value": ["@add", 0, ["@get", "pointSize"]]}
                   }
                 }
               },

src/candela/components/LineChart/test/linechart-points.image.js

@@ -0,0 +1,9 @@
+import imageTest from '../../../util/imageTest';
+
+imageTest({
+  name: 'linechart-points',
+  url: 'http://localhost:28000/examples/linechart-points',
+  selector: '#vis-element',
+  delay: 1000,
+  threshold: 0.001
+});