From 29b6f30c2a345fce8536a7cceab5e32bd0b12941 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Sun, 13 Feb 2022 21:53:17 +1100
Subject: [PATCH] Add Logarithmic Scale Control

---
 .../components/src/stories/SquiggleChart.tsx  | 49 ++++++++++++++-----
 1 file changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/stories/SquiggleChart.tsx b/packages/components/src/stories/SquiggleChart.tsx
index 4b3c7f11..bfa08362 100644
--- a/packages/components/src/stories/SquiggleChart.tsx
+++ b/packages/components/src/stories/SquiggleChart.tsx
@@ -2,13 +2,14 @@ import * as React  from 'react';
 import * as PropTypes  from 'prop-types';
 import * as _ from 'lodash';
 import './button.css';
-import type { LinearScale, Spec } from 'vega';
+import type { PowScale, Spec } from 'vega';
 import { run } from '@squiggle/squiggle-lang';
 import { createClassFromSpec } from 'react-vega';
 
-let scales : LinearScale[] = [{
+let scales : PowScale[] = [{
     "name": "xscale",
-    "type": "linear",
+    "type": "pow",
+    "exponent": {"signal": "xscale"},
     "range": "width",
     "zero": false,
     "nice": false,
@@ -20,7 +21,8 @@ let scales : LinearScale[] = [{
       }
   }, {
     "name": "yscale",
-    "type": "linear",
+    "type": "pow",
+    "exponent": {"signal": "yscale"},
     "range": "height",
     "nice": true,
     "zero": true,
@@ -48,6 +50,26 @@ let specification : Spec = {
       "description": "x position of mouse",
       "update": "0",
       "on": [{"events": "mousemove", "update": "1-x()/width"}]
+    },
+    {
+      "name": "xscale",
+      "description": "The transform of the x scale",
+      "value": 1.0,
+      "bind": {
+        "input": "range",
+        "min": 0.1,
+        "max": 1
+        }
+    },
+    {
+      "name": "yscale",
+      "description": "The transform of the y scale",
+      "value": 1.0,
+      "bind": {
+        "input": "range",
+        "min": 0.1,
+        "max": 1
+        }
     }
   ],
 
@@ -64,12 +86,12 @@ let specification : Spec = {
       "from": {"data": "con"},
       "encode": {
         "enter": {
-          "x": {"scale": "xscale", "field": "x"},
-          "y": {"scale": "yscale", "field": "y"},
-          "y2": {"scale": "yscale", "value": 0},
           "tooltip": {"signal": "datum.cdf"}
         },
         "update": {
+          "x": {"scale": "xscale", "field": "x"},
+          "y": {"scale": "yscale", "field": "y"},
+          "y2": {"scale": "yscale", "value": 0},
           "fill": {
               "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
             },
@@ -83,10 +105,13 @@ let specification : Spec = {
       "from": {"data": "dis"},
       "encode": {
         "enter": {
-          "x": {"scale": "xscale", "field": "x"},
-          "y": {"scale": "yscale", "field": "y"},
           "y2": {"scale": "yscale", "value": 0},
           "width": {"value": 1}
+        },
+        "update": {
+          "x": {"scale": "xscale", "field": "x"},
+          "y": {"scale": "yscale", "field": "y"},
+
         }
       }
     },
@@ -96,10 +121,12 @@ let specification : Spec = {
       "encode": {
         "enter": {
           "shape": {"value": "circle"},
-          "x": {"scale": "xscale", "field": "x"},
-          "y": {"scale": "yscale", "field": "y"},
           "width": {"value": 5},
           "tooltip": {"signal": "datum.y"},
+        },
+        "update": {
+          "x": {"scale": "xscale", "field": "x"},
+          "y": {"scale": "yscale", "field": "y"},
         }
       }
     }