announcer for hover values

packages/components/src/components/DistributionChart.tsx

@@ -47,6 +47,8 @@ export function makePlot(record: {
 
 export const DistributionChart: React.FC<DistributionChartProps> = (props) => {
   const { plot, height, showSummary, width, logX, actions = false } = props;
+  // const [xAxis, setXAxis] = React.useState<"dateAndTime" | "numbers">("dateAndTime")
+  
   const [sized] = useSize((size) => {
     let shapes = flattenResult(
       plot.distributions.map((x) =>

packages/components/src/lib/distributionSpecBuilder.ts

@@ -91,7 +91,21 @@ export function buildVegaSpec(
         name: "domain",
       },
     ],
-    signals: [],
+    signals: [
+      {
+        "name": "hover",
+        "value": null,
+        "on": [
+          {"events": "symbol:mouseover", "update": "datum"},
+          {"events": "symbol:mouseout", "update": "null"}
+        ]
+      },
+      {
+        "name": "announcer",
+        "value": "",
+        "update": "hover ? 'Probability: ' + hover.y + ', Value: ' + hover.x : ''"
+      }
+    ],
     scales: [
       xScale,
       expY ? expYScale : linearYScale,
@@ -239,7 +253,7 @@ export function buildVegaSpec(
                     x: {
                       scale: "xscale",
                       field: "x",
-                      offset: 0.5,
+                      offset: 0.5, // if this is not included, the circles are slightly left of center. 
                     },
                     y: {
                       scale: "yscale",
@@ -256,6 +270,22 @@ export function buildVegaSpec(
           },
         ],
       },
+      {
+        "type": "text",
+        "interactive": false,
+        "encode": {
+          "enter": {
+            "x": {"signal": "width", "offset": 1},
+            "y": {"value": 0},
+            "fill": {"value": "black"},
+            "fontSize": {"value": 20},
+            "align": {"value": "right"}
+          },
+          "update": {
+            "text": {"signal": "announcer"}
+          }
+        }
+      }
     ],
     legends: [
       {