SquiggleChart accepts a height, and doesn't have a hover, because it was broken for mixed distributions

packages/components/src/SquiggleChart.tsx

@@ -43,6 +43,7 @@ export interface SquiggleChartProps {
   onEnvChange?(env: exportEnv): void;
   /** CSS width of the element */
   width?: number;
+  height?: number;
 }
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
@@ -57,6 +58,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   environment = [],
   onEnvChange = () => {},
   width = 500,
+  height = 60,
 }: SquiggleChartProps) => {
   let samplingInputs: SamplingInputs = {
     sampleCount: sampleCount,
@@ -92,6 +94,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
           return (
             <SquiggleVegaChart
               width={width}
+              height={height}
               data={{ con: values }}
               actions={false}
             />

packages/components/src/SquigglePlayground.tsx

@@ -55,6 +55,7 @@ let SquigglePlayground: FC<Props> = (props) => {
       diagramStop={diagramStop}
       diagramCount={diagramCount}
       pointDistLength={pointDistLength}
+      height={150}
     />
   );
   return (

packages/components/src/spec-distributions.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "description": "A basic area chart example.",
+  "description": "A basic area chart example",
   "width": 500,
-  "height": 200,
+  "height": 100,
   "padding": 5,
   "data": [
     {
@@ -13,17 +13,6 @@
     }
   ],
   "signals": [
-    {
-      "name": "mousex",
-      "description": "x position of mouse",
-      "update": "0",
-      "on": [
-        {
-          "events": "mousemove",
-          "update": "1-x()/width"
-        }
-      ]
-    },
     {
       "name": "xscale",
       "description": "The transform of the x scale",
@@ -93,6 +82,9 @@
     {
       "orient": "bottom",
       "scale": "xscale",
+      "labelColor": "#666",
+      "tickColor": "#ddd",
+      "format": "~s",
       "tickCount": 20
     }
   ],
@@ -103,11 +95,6 @@
         "data": "con"
       },
       "encode": {
-        "enter": {
-          "tooltip": {
-            "signal": "datum.cdf"
-          }
-        },
         "update": {
           "x": {
             "scale": "xscale",
@@ -122,8 +109,7 @@
             "value": 0
           },
           "fill": {
-            "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
+            "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#4C78A8'}] }"
-            "color": "#000"
           },
           "interpolate": {
             "value": "monotone"
@@ -186,6 +172,9 @@
           "y": {
             "scale": "yscale",
             "field": "y"
+          },
+          "fill": {
+            "value": "#1e4577"
           }
         }
       }