Merge pull request #448 from Kitware/linechart-hover

Implement "hover" property for LineChart
Kitware · Oct 17, 2016 · 57683d4 · 57683d4
2 parents 21a7f7d + d5e4882
commit 57683d4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 0 deletions.
diff --git a/app/examples/line/index.js b/app/examples/line/index.js
@@ -8,6 +8,7 @@ window.onload = () => {
     y: ['price'],
     width: 735,
     height: 535,
+    hoverSize: 50,
     padding: {
       top: 20,
       bottom: 45,

diff --git a/docs/components/linechart.rst b/docs/components/linechart.rst
@@ -94,5 +94,9 @@ width (Number)
 height (Number)
     Height of the chart in pixels. See :ref:`sizing`.
 
+hoverSize (Number)
+    Displays the hover value when the pointer is within this number of pixels
+    (default 20).
+
 renderer (String)
     Whether to render in ``"svg"`` or ``"canvas"`` mode (default ``"canvas"``).
diff --git a/src/candela/components/LineChart/index.js b/src/candela/components/LineChart/index.js
@@ -29,6 +29,17 @@ export default class LineChart extends VegaChart(VisComponent, spec) {
           from: 'data',
           fieldTypes: ['date', 'number', 'integer', 'boolean']
         }
+      },
+      {
+        name: 'hover',
+        type: 'string_list',
+        format: 'string_list',
+        optional: true,
+        domain: {
+          mode: 'field',
+          from: 'data',
+          fieldTypes: ['string', 'date', 'number', 'integer', 'boolean']
+        }
       }
     ];
   }

diff --git a/src/candela/components/LineChart/spec.json b/src/candela/components/LineChart/spec.json
@@ -7,6 +7,7 @@
 
     // Default to showing the x and y fields on hover.
     ["hover", ["@merge", [["@get", "x"]], ["@get", "y"]]],
+    ["hoverSize", 20],
 
     // Default axis titles to x and y field names.
     ["xAxis.title", ["@get", "x"]],
@@ -165,6 +166,61 @@
                     "strokeWidth": {"value": 2}
                   }
                 }
+              },
+              {
+                "type": "symbol",
+                "from": {"data": "data"},
+                "properties": {
+                  "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"]}
+                  }
+                }
+              },
+              {
+                "type": "group",
+                "marks": [
+                  "@map",
+                  ["@get", "hover"],
+                  "h",
+                  {
+                    "type": "text",
+                    "properties": {
+                      "enter": {
+                        "align": {"value": "center"},
+                        "fill": {"value": "#333"}
+                      },
+                      "update": {
+                        "x": {"scale": "x", "signal": "d.x"},
+                        "y": {"scale": "y", "signal": "d.y", "offset": ["@add", -15, ["@mult", -15, ["@get", "index"]]]},
+                        "text": {
+                          "template": [
+                            "@join", "",
+                            [["@get", "h"], ": ", "{{d['", ["@get", "h"], "']}}"]
+                          ]
+                        },
+                        "fillOpacity": {
+                          "rule": [
+                            {
+                              "predicate": {
+                                "name": "tooltip",
+                                "id": {"value": null}
+                              },
+                              "value": 0
+                            },
+                            {"value": 1}
+                          ]
+                        }
+                      }
+                    }
+                  }
+                ]
               }
             ]
           }