@ironm00n/pyret-lang 0.0.4 → 0.0.6

package/src/js/trove/charts-lib.js

@@ -1,6 +1,7 @@
 ({
   requires: [
     { 'import-type': 'builtin', 'name': 'image-lib' },
+    { "import-type": "builtin", 'name': "charts-util" },
   ],
   nativeRequires: [
     'pyret-base/js/js-numbers',
@@ -19,7 +20,7 @@
       'plot': "tany",
     }
   },
-  theModule: function (RUNTIME, NAMESPACE, uri, IMAGELIB, jsnums, vega, canvasLib) {
+  theModule: function (RUNTIME, NAMESPACE, uri, IMAGELIB, CHARTSUTILLIB, jsnums, vega, canvasLib) {
     'use strict';
 
     
@@ -59,6 +60,7 @@
     const cases = RUNTIME.ffi.cases;
 
     var IMAGE = get(IMAGELIB, "internal");
+    var CHARTSUTIL = get(CHARTSUTILLIB, "values");
 
     const ann = function(name, pred) {
       return RUNTIME.makePrimitiveAnn(name, pred);
@@ -207,6 +209,28 @@
 
     //////////////////////////////////////////////////////////////////////////////
 
+    const chartFontConfig = {
+      signals: [
+        { name: 'fontSizeScale', value: 14 }
+      ],
+      mark: {
+        fontSize: { signal: 'fontSizeScale' }
+      },
+      text: {
+        fontSize: { signal: 'fontSizeScale' }
+      },
+      title: {
+        fontSize: { signal: '1.2 * fontSizeScale' },
+      },
+      axis: {
+        labelFontSize: { signal: 'fontSizeScale' },
+        titleFontSize: { signal: 'fontSizeScale' },
+      },
+      legend: {
+        labelFontSize: { signal: 'fontSizeScale' },
+      }
+    };
+
     function pieChart(globalOptions, rawData) {
       /*
         Note: Most of the complexity here is due to supporting the "collapsed" wedge of values,
@@ -457,6 +481,7 @@
         marks,
         legends,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -902,6 +927,9 @@
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
       const axesConfig = dimensions[horizontal ? 'horizontal' : 'vertical']
       const axis = get_axis(rawData);
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
+      const bandwidth = toFixnum(get(rawData, 'bandwidth') || 1);
 
       const data = [];
       
@@ -934,14 +962,15 @@
           name: 'primary',
           type: 'band',
           range: axesConfig.primary.range,
-          domain: { data: 'table', field: 'label' }
+          domain: { data: 'table', field: 'label' },
+          padding: 1 - bandwidth,
         },
         {
           name: 'secondary',
-          type: 'linear',
           range: axesConfig.secondary.range,
           nice: true, zero: true,
-          domain: axis ? { signal: 'extent(domain("secondaryLabels"))' } : { data: 'table', field: 'value' }
+          domain: axis ? { signal: 'extent(domain("secondaryLabels"))' } : { data: 'table', field: 'value' },
+          ...(axesConfig.secondary.name === 'x' ? xAxisType : yAxisType)
         },
         {
           name: 'color',
@@ -1015,6 +1044,7 @@
         axes,
         marks,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -1034,6 +1064,9 @@
       const stackType = get(rawData, 'is-stacked');
       const isStacked = stackType !== 'none';
       const isNotFullStacked = (stackType !== 'relative') && (stackType !== 'percent');
+      const bandwidth = toFixnum(get(rawData, 'bandwidth') || 1);
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
 
       const data = [];
 
@@ -1114,13 +1147,13 @@
         type: 'band',
         range: axesConfig.primary.range,
         domain: { data: 'table', field: 'label' },
-        padding: 0.2
+        padding: 1 - bandwidth
       };
       const secondaryScale = {
         name: 'secondary',
-        type: 'linear',
         range: axesConfig.secondary.range,
-        nice: true, zero: true,
+        ...(axesConfig.secondary.name === 'x' ? xAxisType : yAxisType),
+        nice: true, zero: false,
         domain: (axis && isNotFullStacked) ? { signal: 'extent(domain("secondaryLabels"))' } : { data: 'table', field: 'value1' }
       };
       const scales = [
@@ -1300,6 +1333,7 @@
         marks,
         legends,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       }
     }
 
@@ -1317,6 +1351,8 @@
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
       const min = getNumOrDefault(globalOptions['min'], undefined);
       const max = getNumOrDefault(globalOptions['max'], undefined);
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
 
       const data = [
         {
@@ -1403,8 +1439,8 @@
                 },
                 update: {
                   [PC]: { scale: 'primary', field: 'label', offset: { scale: 'primary', band: 0.5 } },
-                  [S]: { scale: 'secondary',  field: 'lowWhisker' },
-                  [S2]: { scale: 'secondary', field: 'highWhisker' },
+                  [S]: { scale: 'secondary',  field: showOutliers ? 'lowWhisker' : 'minVal' },
+                  [S2]: { scale: 'secondary', field: showOutliers ? 'highWhisker' : 'maxVal' },
                   tooltip: { signal: tooltip }
                 },
               }
@@ -1421,7 +1457,7 @@
                 update: {
                   [PC]: { scale: 'primary', field: 'label', offset: { scale: 'primary', band: 0.5 } },
                   [axesConfig.primary.range]: { scale: 'primary', band: 0.25 },
-                  [S]: { scale: 'secondary', field: 'lowWhisker' },
+                  [S]: { scale: 'secondary', field: showOutliers ? 'lowWhisker' : 'minVal' },
                   tooltip: { signal: tooltip }
                 }
               }
@@ -1438,7 +1474,7 @@
                 update: {
                   [PC]: { scale: 'primary', field: 'label', offset: { scale: 'primary', band: 0.5 } },
                   [axesConfig.primary.range]: { scale: 'primary', band: 0.25 },
-                  [S]: { scale: 'secondary', field: 'highWhisker' },
+                  [S]: { scale: 'secondary', field: showOutliers ? 'highWhisker' : 'maxVal' },
                   tooltip: { signal: tooltip }
                 }
               }
@@ -1534,7 +1570,7 @@
         },
         {
           name: 'secondary',
-          type: 'linear',
+          ...(axesConfig.secondary.name === 'x' ? xAxisType : yAxisType),
           range: axesConfig.secondary.range,
           nice: true, zero: false,
           domain: [{ signal: 'minValue' },{ signal: 'maxValue' }],
@@ -1572,6 +1608,7 @@
         axes,
         marks,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -1585,6 +1622,7 @@
       const width = globalOptions['width'];
       const height = globalOptions['height'];
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
+      const yAxisType = globalOptions['y-axis-type'];
 
       const data = [
         {
@@ -1714,12 +1752,14 @@
           name: 'binScale',
           type: 'linear',
           range: 'width',
-          domain: { data: 'rawTable', field: 'bin1' }
+          zero: false,
+          domain: { data: 'rawTable', fields: ['bin0', 'bin1'] }
         },
         {
           name: 'countScale',
-          type: 'linear',
           range: 'height',
+          ...yAxisType,
+          zero: true,
           domain: { data: 'rawTable', field: 'y1' }
         }
       ];
@@ -1751,6 +1791,7 @@
         axes,
         marks,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -1768,6 +1809,9 @@
       const height = globalOptions['height'];
       const xAxisLabel = globalOptions['x-axis'];
       const yAxisLabel = globalOptions['y-axis'];
+      const xMinValue = getNumOrDefault(globalOptions['x-min'], undefined);
+      const xMaxValue = getNumOrDefault(globalOptions['x-max'], undefined);
+      const yAxisType = globalOptions['y-axis-type'];
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
 
       const data = [
@@ -1819,18 +1863,23 @@
         { name: 'binSize', update: 'invert("binScale", dotSize)' },
         { name: 'actualDotSize', update: 'scale("dotScale", 0) - scale("dotScale", 1)' },
         { name: 'headspace', value: '0.25' },
-        { name: 'wrapMaxY', update: 'floor(domain("dotScale")[1] * (1 - headspace))' }
+        { name: 'wrapMaxY', update: 'floor(domain("dotScale")[1] * (1 - headspace))' },
+        { name: 'xMinValue', value: xMinValue },
+        { name: 'xMaxValue', value: xMaxValue },
       ];
       const scales = [
         {
           name: 'binScale',
           type: 'linear',
+          zero: false,
           range: { signal: '[0, width - dotSize / 2]' },
-          domain: { data: 'rawTable', field: 'value' }
+          domain: { data: 'rawTable', field: 'value' },
+          domainMin: { signal: 'xMinValue' }, domainMax: { signal: 'xMaxValue' },
         },
         {
           name: 'dotScale',
-          type: 'linear',
+          ...yAxisType,
+          zero: true,
           range: { signal: '[height, dotSize / 2]' },
           domain: { signal: '[0, floor(height / dotSize)]' }
         }
@@ -1911,6 +1960,7 @@
         axes,
         marks,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -1926,6 +1976,7 @@
       const height = globalOptions['height'];
       const xAxisLabel = globalOptions['x-axis'];
       const yAxisLabel = globalOptions['y-axis'];
+      const yAxisType = globalOptions['y-axis-type'];
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
 
 
@@ -1958,8 +2009,8 @@
         },
         {
           name: 'secondary',
-          type: 'linear',
           range: 'height',
+          ...yAxisType,
           nice: true, zero: true,
           domain: { data: 'bars', field: 'count' }
         }
@@ -2028,6 +2079,7 @@
         axes,
         marks,
         onExit: defaultImageReturn,
+        config: chartFontConfig,
       };
     }
 
@@ -2107,6 +2159,8 @@
     function scatterPlot(globalOptions, rawData, config) {
       const xAxisLabel = globalOptions['x-axis'];
       const yAxisLabel = globalOptions['y-axis'];
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
       const prefix = config.prefix || ''
       const defaultColor = config.defaultColor || default_colors[0];
       const color = getColorOrDefault(get(rawData, 'color'), defaultColor);
@@ -2122,43 +2176,57 @@
       const trendlineWidth = toFixnum(get(rawData, 'trendlineWidth'));
       const trendlineOpacity = toFixnum(get(rawData, 'trendlineOpacity'));
       const trendlineDegree = toFixnum(get(rawData, 'trendlineDegree'));
-      const xMinValue = getNumOrDefault(globalOptions['x-min'], undefined);
-      const xMaxValue = getNumOrDefault(globalOptions['x-max'], undefined);
       const yMinValue = getNumOrDefault(globalOptions['y-min'], undefined);
       const yMaxValue = getNumOrDefault(globalOptions['y-max'], undefined);
+      const imageScaleFactorX = autosizeImage ? '-datum.imageWidth' : -pointSize;
+      const imageScaleFactorY = autosizeImage ? '-datum.imageHeight' : -pointSize;
 
       const points = RUNTIME.ffi.toArray(get(rawData, 'ps'));
-
+      const pointValues = points.map((p) => ({
+        label: get(p, 'label'),
+        x: toFixnum(get(p, 'x')),
+        y: toFixnum(get(p, 'y')),
+        image: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
+          none: () => undefined,
+          some: (opaqueImg) => imageToCanvas(opaqueImg.val)
+        }),
+        imageWidth: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
+          none: () => undefined,
+          some: (opaqueImg) => opaqueImg.val.getWidth()
+        }),
+        imageHeight: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
+          none: () => undefined,
+          some: (opaqueImg) => opaqueImg.val.getHeight()
+        }),
+        imageOffsetX: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
+          none: () => undefined,
+          some: (opaqueImg) => opaqueImg.val.getPinholeX() / opaqueImg.val.getWidth()
+        }),
+        imageOffsetY: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
+          none: () => undefined,
+          some: (opaqueImg) => opaqueImg.val.getPinholeY() / opaqueImg.val.getHeight()
+        }),
+      }));
       const data = [
         {
           name: `${prefix}rawTable`,
-          values: points.map((p) => ({
-            label: get(p, 'label'),
-            x: toFixnum(get(p, 'x')),
-            y: toFixnum(get(p, 'y')),
-            image: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
-              none: () => undefined,
-              some: (opaqueImg) => imageToCanvas(opaqueImg.val)
-            }),
-            imageWidth: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
-              none: () => undefined,
-              some: (opaqueImg) => opaqueImg.val.getWidth()
-            }),
-            imageHeight: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
-              none: () => undefined,
-              some: (opaqueImg) => opaqueImg.val.getHeight()
-            }),
-            imageOffsetX: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
-              none: () => undefined,
-              some: (opaqueImg) => opaqueImg.val.getPinholeX() / opaqueImg.val.getWidth()
-            }),
-            imageOffsetY: cases(RUNTIME.ffi.isOption, 'Option', get(p, 'image'), {
-              none: () => undefined,
-              some: (opaqueImg) => opaqueImg.val.getPinholeY() / opaqueImg.val.getHeight()
-            }),
-          })),
+          values: pointValues,
           transform: []
         },
+        {
+          name: `${prefix}tableMarkExtents`,
+          source: `${prefix}rawTable`,
+          transform: [
+            { type: 'formula', as: 'left',
+              expr: `datum.x + (isValid(datum.image) ? datum.imageOffsetX * ${imageScaleFactorX}: ${-pointSize / 2}) / ${prefix}rawDomainUnitInPx` },
+            { type: 'formula', as: 'right',
+              expr: `datum.x + (isValid(datum.image) ? (datum.imageOffsetX * ${imageScaleFactorY} - datum.imageWidth) : ${pointSize}) / ${prefix}rawDomainUnitInPx` },
+            { type: 'formula', as: 'top',
+              expr: `datum.y + (isValid(datum.image) ? datum.imageOffsetY * ${imageScaleFactorY} : ${-pointSize / 2}) / ${prefix}rawRangeUnitInPx` },
+            { type: 'formula', as: 'bot',
+              expr: `datum.y + (isValid(datum.image) ? (datum.imageOffsetY * ${imageScaleFactorY} - datum.imageHeight) : ${pointSize}) / ${prefix}rawRangeUnitInPx` },
+          ],
+        },
         {
           name: `${prefix}table`,
           source: `${prefix}rawTable`,
@@ -2171,22 +2239,87 @@
         },
       ];
 
-      const domain = computeDomain(data[0].values.map((v) => v.x));
-
+      // these are measured in pixels
+      let imageOverhangX, imageOverhangY;
+      const imageWidths = pointValues.map((v) => v.imageWidth).filter((v) => v !== undefined);
+      const imageHeights = pointValues.map((v) => v.imageHeight).filter((v) => v !== undefined);
+      if (imageWidths.length === 0 || autosizeImage) {
+        imageOverhangX = pointSize;
+        imageOverhangY = pointSize;
+      } else {
+        let temp;
+        temp = computeDomain(imageWidths);
+        imageOverhangX = temp[1] - temp[0];
+        temp = computeDomain(imageHeights);
+        imageOverhangY = temp[1] - temp[0];
+      }
+      let windowWidth = toFixnum(globalOptions['width']);
+      let windowHeight = toFixnum(globalOptions['height']);
+
+      const rawDomain = computeDomain(pointValues.map((v) => v.x));
+      const rawRange = computeDomain(pointValues.map((v) => v.y));
+      const reducedWidth = windowWidth - imageOverhangX;
+      const reducedHeight = windowHeight - imageOverhangY;
+      const rawDomainUnitInPx = reducedWidth / (rawDomain[1] - rawDomain[0]);
+      const rawRangeUnitInPx = reducedHeight / (rawRange[1] - rawRange[0]);
+      const domain = computeDomain(pointValues.map((v) => {
+        let left, right;
+        if (!autosizeImage || !v.image) {
+          let halfPointSize = pointSize / 2;
+          let inDomainHalfPointSize = halfPointSize / rawDomainUnitInPx;
+          return [v.x - inDomainHalfPointSize, v.x + inDomainHalfPointSize];
+        }
+        left = v.x - v.imageOffsetX * v.imageWidth / rawDomainUnitInPx;
+        right = left + v.imageWidth / rawDomainUnitInPx;
+        return [left, right];
+      }).flat());
+      // console.log("Raw domain", computeDomain(pointValues.map((v) => v.x)), "Point size", pointSize);
+      // console.log({reducedWidth, imageOverhangX, rawDomainUnitInPx});
+      // console.log("Extended domain", domain);
+
+      const range = computeDomain(pointValues.map((v) => {
+        let top, bot;
+        if (!autosizeImage || !v.image) {
+          let halfPointSize = pointSize / 2;
+          let inDomainHalfPointSize = halfPointSize / rawDomainUnitInPx;
+          return [v.y - inDomainHalfPointSize, v.y + inDomainHalfPointSize];
+        }
+        top = v.y + v.imageOffsetY * v.imageHeight / rawDomainUnitInPx;
+        bot = top - v.imageHeight / rawDomainUnitInPx;
+        return [top, bot];
+      }).flat());
+      // console.log("Raw range", computeDomain(pointValues.map((v) => v.y)), "Point size", pointSize);
+      // console.log("Extended range", range);
+
+      function unionExtents(...names) {
+        const names0 = names.map((s) => `${s}[0]`);
+        const names1 = names.map((s) => `${s}[1]`);
+        return `[min(${names0.join(',')}), max(${names1.join(',')})]`
+      }
       const signals = [
-        { name: `${prefix}extentX`, update: `extent(pluck(data("${prefix}rawTable"), "x"))` },
-        { name: `${prefix}extentY`, update: `extent(pluck(data("${prefix}rawTable"), "y"))` },
+        { name: `${prefix}reducedWidth`, update: `width - ${imageOverhangX}` },
+        { name: `${prefix}reducedHeight`, update: `height - ${imageOverhangY}` },
+        { name: `${prefix}rawDomainUnitInPx`, update: `${prefix}reducedWidth / ${rawDomain[1] - rawDomain[0]}` },
+        { name: `${prefix}rawRangeUnitInPx`, update: `${prefix}reducedHeight / ${rawRange[1] - rawRange[0]}` },
+        { name: `${prefix}extentLeft`, update: `extent(pluck(data("${prefix}tableMarkExtents"), "left"))` },
+        { name: `${prefix}extentRight`, update: `extent(pluck(data("${prefix}tableMarkExtents"), "right"))` },
+        { name: `${prefix}extentTop`, update: `extent(pluck(data("${prefix}tableMarkExtents"), "top"))` },
+        { name: `${prefix}extentBot`, update: `extent(pluck(data("${prefix}tableMarkExtents"), "bot"))` },
+        { name: `${prefix}extentX`, update: unionExtents(`${prefix}extentLeft`, `${prefix}extentRight`) },
+        { name: `${prefix}extentY`, update: unionExtents(`${prefix}extentTop`, `${prefix}extentBot`) },
       ];
       const scales = [
         { name: `${prefix}xscale`,
-          type: 'linear',
+          ...xAxisType,
           domain: { signal: `${prefix}extentX` },
           range: 'width',
+          zero: false,
           nice: true },
         { name: `${prefix}yscale`,
-          type: 'linear',
+          ...yAxisType,
           domain: { signal: `${prefix}extentY` },
           range: 'height',
+          zero: false,
           nice: true }
       ];
       const marks = [];
@@ -2290,8 +2423,6 @@
           signal: `{ title: "${legend}", Label: datum.label, x: datum.x, y: datum.y }` },
         { signal: `{ title: "${legend}", x: datum.x, y: datum.y }` },
       ];
-      const imageScaleFactorX = autosizeImage ? '-datum.imageWidth' : -pointSize;
-      const imageScaleFactorY = autosizeImage ? '-datum.imageHeight' : -pointSize;
       marks.push({
         type: 'image',
         from: { data: `${prefix}images` },
@@ -2447,6 +2578,8 @@
     function intervalPlot(globalOptions, rawData, config) {
       const xAxisLabel = globalOptions['x-axis'];
       const yAxisLabel = globalOptions['y-axis'];
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
       const legend = get(rawData, 'legend') || config.legend;
       const prefix = config.prefix || ''
       const defaultColor = config.defaultColor || default_colors[0];
@@ -2480,7 +2613,7 @@
             }),
           })),
           transform: [
-            { type: 'formula', as: 'yprime', expr: 'datum.y + datum.delta' }
+            { type: 'formula', as: 'yprime', expr: 'datum.y - datum.delta' }
           ]
         },
         {
@@ -2516,15 +2649,17 @@
 
       const scales = [
         { name: `${prefix}xscale`,
-          type: 'linear',
+          ...xAxisType,
           domain: { signal: `${prefix}extentX` },
           range: 'width',
-          nice: false },
+          nice: false,
+          zero: false },
         { name: `${prefix}yscale`,
-          type: 'linear',
+          ...yAxisType,
           domain: { signal: `${prefix}extentY` },
           range: 'height',
-          nice: false }
+          nice: false,
+          zero: false }
       ];
       const tooltip = {
         signal: `{ title: datum.label, x: datum.x, y: datum.y, ŷ: datum.yprime, 'y - ŷ': datum.delta }`
@@ -2663,6 +2798,8 @@
       const domain = config.domain;
       const xMinValue = domain[0];
       const xMaxValue = domain[1];
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
 
       const fraction = (xMaxValue - xMinValue) / (numSamples - 1);
 
@@ -2676,10 +2813,11 @@
         // from the surrounding chart context
         {
           name: `${prefix}yscale`,
-          type: 'linear',
+          ...yAxisType,
           domain: { signal: `${prefix}extentY` },
           range: 'height',
-          nice: true
+          nice: true,
+          zero: false
         }
       ];
       const tooltip = {
@@ -2775,6 +2913,8 @@
       const numSamples = toFixnum(globalOptions['num-samples']);
       const xAxisLabel = globalOptions['x-axis'];
       const yAxisLabel = globalOptions['y-axis'];
+      const xAxisType = globalOptions['x-axis-type'];
+      const yAxisType = globalOptions['y-axis-type'];
       const width = toFixnum(globalOptions['width']);
       const height = toFixnum(globalOptions['height']);
       const background = getColorOrDefault(globalOptions['backgroundColor'], 'transparent');
@@ -2795,10 +2935,10 @@
         { name: 'yscaleSignal', update: unionScaleSignal(scales.filter((s) => s.name.endsWith('yscale'))) }
       );
       scales.push(
-        { name: 'xscale', domain: { signal: 'xscaleSignal' }, range: 'width',
-          domainMin: { signal: 'xMinValue' }, domainMax: { signal: 'xMaxValue' } },
-        { name: 'yscale', domain: { signal: 'yscaleSignal' }, range: 'height',
-          domainMin: { signal: 'yMinValue' }, domainMax: { signal: 'yMaxValue' } }
+        { name: 'xscale', domain: { signal: 'xscaleSignal' }, range: 'width', ...xAxisType,
+          domainMin: { signal: 'xMinValue' }, domainMax: { signal: 'xMaxValue' }, zero: false },
+        { name: 'yscale', domain: { signal: 'yscaleSignal' }, range: 'height', ...yAxisType,
+          domainMin: { signal: 'yMinValue' }, domainMax: { signal: 'yMaxValue' }, zero: false }
       );
 
       // NOTE: For the axes, we're going to want to put the bar lines at the zeros
@@ -2995,7 +3135,9 @@
         marks,
         legends,
         config: {
+          ...chartFontConfig,
           legend: {
+            ...chartFontConfig.legend,
             orient: 'bottom',
             layout: { bottom: { anchor: 'middle' } },
           }
@@ -3131,10 +3273,16 @@
     }
 
     function renderStaticImage(processed, globalOptions, rawData) {
+      function isImageOrCanvas(v) {
+        if (!v) return false;
+        if (IMAGE.isImage(v)) return true;
+        return canvasLib && canvasLib.Canvas && v instanceof canvasLib.Canvas;
+      }
+      const isVegaString = isTrue(globalOptions['vega']);
       return RUNTIME.pauseStack(restarter => {
         try {
-          if (canvasLib && canvasLib.Canvas) {
-            console.log(JSON.stringify(processed, (k, v) => (v && (IMAGE.isImage(v) || (v instanceof canvasLib.Canvas))) ? v.ariaText : v, 2));
+          if (isVegaString) {
+            return restarter.resume(JSON.stringify(processed, (k, v) => isImageOrCanvas(v) ? v.ariaText : v, 2));
           }
           const width = toFixnum(globalOptions['width']);
           const height = toFixnum(globalOptions['height']);
@@ -3159,15 +3307,20 @@
         let height = toFixnum(globalOptions['height']);
         const vegaTooltipHandler = new vegaTooltip.Handler({
           formatTooltip: (value, valueToHtml, maxDepth, baseURL) => {
-            if (typeof value === 'object') {
+            let ans;
+            if (typeof value === 'object' && value.title instanceof Array) {
               const { title, ...rest } = value;
               if (title instanceof Array) {
                 const titleStr = `<h2>${title.map(valueToHtml).join('<br/>')}</h2>`;
                 const restStr = vegaTooltip.formatValue(rest, valueToHtml, maxDepth, baseURL);
-                return titleStr + restStr;
+                ans = titleStr + restStr;
               }
+            } else {
+              ans = vegaTooltip.formatValue(value, valueToHtml, maxDepth, baseURL);
             }
-            return vegaTooltip.formatValue(value, valueToHtml, maxDepth, baseURL);
+            ans = ans.replaceAll("<table>", "<table class=\"pyret-row\">");
+            ans = ans.replaceAll("<td class=\"value\">", "<td class=\"value replTextOutput\"> ");
+            return ans;
           }
         });
         const view = new vega.View(vega.parse(processed), {
@@ -3232,10 +3385,21 @@
     }
         
 
+    function configScale(val) {
+      return cases(get(CHARTSUTIL, "is-AxisType"), "AxisType", val, {
+        'at-linear': () => ({ type: 'linear' }),
+        'at-power': (pow) => ({ type: 'pow', exponent: toFixnum(pow) }),
+        'at-log': (base) => ({ type: 'log', base: toFixnum(base) }),
+        'at-symlog': (base) => ({ type: 'symlog', constant: toFixnum(base) })
+      });
+    }
     function pyretObjToObj(globalOptions) {
       const ret = {};
       for (const field of RUNTIME.getFields(globalOptions)) {
         ret[field] = get(globalOptions, field);
+        if (get(CHARTSUTIL, 'is-AxisType').app(ret[field])) {
+          ret[field] = configScale(ret[field]);
+        }
       }
       return ret;
     }