chart-lib.js

({
  requires: [
    { 'import-type': 'builtin', 'name': 'image-lib' },
  ],
  nativeRequires: [
    'pyret-base/js/js-numbers',
    'google-charts',
  ],
  provides: {
    values: {
      'pie-chart': "tany",
      'bar-chart': "tany",
      'multi-bar-chart': "tany",
      'histogram': "tany",
      'box-plot': "tany",
      'plot': "tany",
      'geochart': "tany"
    }
  },
  theModule: function (RUNTIME, NAMESPACE, uri, IMAGELIB, jsnums , google) {
  'use strict';

  // Load google library via editor.html to avoid loading issues

  //const google = _google.google;
  const isTrue = RUNTIME.isPyretTrue;
  const get = RUNTIME.getField;
  const toFixnum = jsnums.toFixnum;
  const cases = RUNTIME.ffi.cases;

  var IMAGE = get(IMAGELIB, "internal");

  const ann = function(name, pred) {
    return RUNTIME.makePrimitiveAnn(name, pred);
  };

  var checkListWith = function(checker) {
    return function(val) {
      if (!RUNTIME.ffi.isList(val)) return false;
      var cur = val;
      var gf = RUNTIME.getField;
      while (RUNTIME.unwrap(RUNTIME.ffi.isLink(cur))) {
        var f = gf(cur, "first");
        if (!checker(f)) {
          return false;
        }
        cur = gf(cur, "rest");
      }
      return true;
    }
  }

  var checkOptionWith = function(checker) {
    return function(val) {
      if (!(RUNTIME.ffi.isNone(val) || RUNTIME.ffi.isSome(val))) return false;
      var gf = RUNTIME.getField;
      if (RUNTIME.unwrap(RUNTIME.ffi.isSome(val))) {
        var f = gf(val, "value");
        if (!checker(f)) {
          return false;
        }
      }
      return true;
    }
  }
  
  google.charts.load('current', {'packages' : ['corechart', 'geochart']});

  //////////////////////////////////////////////////////////////////////////////

  function getPrettyNumToStringDigits(d) {
    // this accepts Pyret num
    return n =>
      jsnums.toStringDigits(n, d, RUNTIME.NumberErrbacks).replace(/\.?0*$/, '');
  }

  const prettyNumToStringDigits5 = getPrettyNumToStringDigits(5);

  function convertColor(v) {
    function p(pred, name) {
        return val => {
            RUNTIME.makeCheckType(pred, name)(val);
            return val;
        };
    }

    const colorDb = IMAGE.colorDb;
    const _checkColor = p(IMAGE.isColorOrColorString, 'Color');

    function checkColor(val) {
        let aColor = _checkColor(val);
        if (colorDb.get(aColor)) {
            aColor = colorDb.get(aColor);
        }
        return aColor;
    }

    function rgb2hex(rgb){
      // From http://jsfiddle.net/Mottie/xcqpF/1/light/
      rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
      return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
    }
    return rgb2hex(IMAGE.colorString(checkColor(v)));
  }

  function convertPointer(p) {
    return {v: toFixnum(get(p, 'value')) , f: get(p, 'label')}
  }


  //////////////////////////////////////////////////////////////////////////////

  function getNewWindow(xMinC, xMaxC, yMinC, yMaxC, numSamplesC) {
    return cases(RUNTIME.ffi.isOption, 'Option',
                 RUNTIME.string_to_number(xMinC.val()), {
      none: function () {
        xMinC.addClass('error-bg');
        xMinC.removeClass('ok-bg');
        return null;
      },
      some: function (xMinVal) {
        xMinC.removeClass('error-bg');
        xMinC.addClass('ok-bg');
        return cases(RUNTIME.ffi.isOption, 'Option',
                     RUNTIME.string_to_number(xMaxC.val()), {
          none: function () {
            xMaxC.addClass('error-bg');
            xMaxC.removeClass('ok-bg');
            return null;
          },
          some: function (xMaxVal) {
            xMaxC.removeClass('error-bg');
            xMaxC.addClass('ok-bg');

            if (jsnums.greaterThanOrEqual(xMinVal, xMaxVal,
                                          RUNTIME.NumberErrbacks)) {
              xMinC.addClass('error-bg');
              xMaxC.addClass('error-bg');
              xMinC.removeClass('ok-bg');
              xMaxC.removeClass('ok-bg');
              return null;
            }

            return cases(RUNTIME.ffi.isOption, 'Option',
                         RUNTIME.string_to_number(yMinC.val()), {
              none: function () {
                yMinC.addClass('error-bg');
                yMinC.removeClass('ok-bg');
                return null;
              },
              some: function (yMinVal) {
                yMinC.removeClass('error-bg');
                yMinC.addClass('ok-bg');

                return cases(RUNTIME.ffi.isOption, 'Option',
                             RUNTIME.string_to_number(yMaxC.val()), {
                  none: function () {
                    yMaxC.addClass('error-bg');
                    yMaxC.removeClass('ok-bg');
                    return null;
                  },
                  some: function (yMaxVal) {
                    yMaxC.removeClass('error-bg');
                    yMaxC.addClass('ok-bg');

                    if (jsnums.greaterThanOrEqual(xMinVal, xMaxVal,
                                                  RUNTIME.NumberErrbacks)) {
                      yMinC.addClass('error-bg');
                      yMaxC.addClass('error-bg');
                      yMinC.removeClass('ok-bg');
                      yMaxC.removeClass('ok-bg');
                      return null;
                    }

                    return cases(RUNTIME.ffi.isOption, 'Option',
                                 RUNTIME.string_to_number(numSamplesC.val()), {
                      none: function () {
                        numSamplesC.addClass('error-bg');
                        numSamplesC.removeClass('ok-bg');
                        return null;
                      },
                      some: function (numSamplesVal) {
                        numSamplesC.removeClass('error-bg');
                        numSamplesC.addClass('ok-bg');

                        if (!isTrue(RUNTIME.num_is_integer(numSamplesVal)) ||
                            jsnums.lessThanOrEqual(numSamplesVal, 1,
                                                   RUNTIME.NumberErrbacks)) {
                          numSamplesC.addClass('error-bg');
                          numSamplesC.removeClass('ok-bg');
                          return null;
                        }

                        return {
                          'x-min': RUNTIME.ffi.makeSome(xMinVal),
                          'x-max': RUNTIME.ffi.makeSome(xMaxVal),
                          'y-min': RUNTIME.ffi.makeSome(yMinVal),
                          'y-max': RUNTIME.ffi.makeSome(yMaxVal),
                          'num-samples': numSamplesVal
                        };
                      }
                    });
                  }
                });
              }
            });
          }
        });
      }
    });
  }

  //////////////////////////////////////////////////////////////////////////////

  /**
   * Adds multiple columns with the given properties and values after data
   * columns
   * 
   * For example, if given:
   * colProperties:
   *   {type: 'string', role: 'style'}
   * colValues:
   *   [
   *     [['red', 'black'], ['white', 'blue'], ['green', 'purple']],
   *     []
   *   ]
   * addNSpecialColumns will add 2 style columns after the first data column
   * and no columns after the second data column.
   * 
   * The number of columns added after a particular data column do not have to
   * agree. It is possible to add one special value on one row and two
   * special values on another row.
   * 
   * https://jsfiddle.net/eyanje/u83kaf92/
   * 
   * @param {DataTable} table a table to expand
   * @param {object} colProperties an object specifying column properties
   * @param {Array<Array<*>>>} colValues rows of groups of values to insert
   */
  function addNSpecialColumns(table, colProperties, colValues) {
    let dataColNums = [];
    let nDataCols;
    let groupWidths;
    for (let i = 1; i < table.getNumberOfColumns(); i++) {
      const role = table.getColumnRole(i);
      if (role === '' || role === 'data') {
        dataColNums.push(i);
      }
    }
    nDataCols = dataColNums.length;
    // Check column count
    // Should never run -- Pyret checks all column counts properly
    // This should be somewhat caught in the try-catch around setup(restarter),
    // unless it's been moved
    colValues.forEach((row, rowN) => {
      if (row.length !== nDataCols) {
        throw new Error(`Incorrect column count in row ${rowN}.`
          + ` Expected ${nDataCols}, given ${row.length}.`);
      }
    });
    // Tally columns needed for each group
    groupWidths = dataColNums.map(() => 0);
    colValues.forEach(row => {
      row.forEach((group, groupN) => {
        groupWidths[groupN] = Math.max(group.length, groupWidths[groupN]);
      });
    });
    // Add columns in reverse order
    for (let groupIndex = nDataCols - 1; groupIndex >= 0; groupIndex--) {
      for (let i = 0; i < groupWidths[groupIndex]; i++) {
        table.insertColumn(dataColNums[groupIndex] + 1, colProperties);
      }
    }
    // Adjust dataColNums to match expanded table
    let sum = 0;
    dataColNums.forEach((dataColNum, i) => {
        dataColNums[i] += sum;
      sum += groupWidths[i];
    });
    // Add columns in reverse order to avoid extra calculations
    colValues.forEach((row, rowN) => {
        row.forEach((group, groupN) => {
          group.forEach((val, i) => {
          table.setValue(rowN, dataColNums[groupN] + i + 1, val);
        });
      })
    });
  }

  /**
   * Adds columns with the given properties and values after data columns
   * 
   * For example, you may use this function to add columns with properties
   * {type: 'string', role: 'style'} and values
   * [['red', 'black'] ['white', 'blue'], ['green', 'purple']], to add
   * two style columns to a table with 3 rows and 2 columns.
   * 
   * @param {DataTable} table a table to expand
   * @param {object} colProperties an object specifying column properties
   * @param {Array<Array<*>>>} colValues rows of values to insert
   */
  function addSpecialColumns(table, colProperties, colValues) {
    addNSpecialColumns(table, colProperties,
      colValues.map(r => r.map(c => [c])));
  }

  function addAnnotations(table, rawData) {
    const rawAnnotations = get(rawData, 'annotations').map(row =>
      row.map(col =>
        cases(RUNTIME.ffi.isOption, 'Option', col, {
          none: function () {},
          some: function (annotation) { return annotation; }
        })
      )
    );
    const colProperties = { type: 'string', role: 'annotation' };
    addSpecialColumns(table, colProperties, rawAnnotations);
  }

  function addIntervals(table, rawData) {
    const colProperties = {type: 'number', role: 'interval'};
    addNSpecialColumns(table, colProperties, get(rawData, 'intervals'));
  }

  function axesNameMutator(options, globalOptions, _) {
    const hAxis = ('hAxis' in options) ? options.hAxis : {};
    const vAxis = ('vAxis' in options) ? options.vAxis : {};
    hAxis.title = get(globalOptions, 'x-axis');
    vAxis.title = get(globalOptions, 'y-axis');
    $.extend(options, {hAxis: hAxis, vAxis: vAxis});
  }

  function gridlinesMutator(options, globalOptions, _) {
    const hAxis = ('hAxis' in options) ? options.hAxis : {};
    const vAxis = ('vAxis' in options) ? options.vAxis : {};
    hAxis.gridlines = {color: '#aaa'};
    vAxis.gridlines = {color: '#aaa'};
    if (get(globalOptions, 'show-minor-grid-lines')) {
      hAxis.minorGridlines = {color: '#ddd', minSpacing: 10};
      vAxis.minorGridlines = {color: '#ddd', minSpacing: 10};
    } else {
      hAxis.minorGridlines = {count: 0};
      vAxis.minorGridlines = {count: 0};
    }
    $.extend(options, {hAxis: hAxis, vAxis: vAxis});
  }

  function yAxisRangeMutator(options, globalOptions, _) {
    const vAxis = ('vAxis' in options) ? options.vAxis : {};
    const viewWindow = ('viewWindow' in vAxis) ? vAxis.viewWindow : {};

    cases(RUNTIME.ffi.isOption, 'Option', get(globalOptions, 'y-min'), {
      none: function () {},
      some: function (minValue) {
        const v = toFixnum(minValue);
        vAxis.minValue = v;
        viewWindow.min = v;
      }
    });
    cases(RUNTIME.ffi.isOption, 'Option', get(globalOptions, 'y-max'), {
      none: function () {},
      some: function (maxValue) {
        const v = toFixnum(maxValue);
        vAxis.maxValue = v;
        viewWindow.max = v;
      }
    });
    vAxis.viewWindow = viewWindow;
    $.extend(options, {vAxis: vAxis});
  }

  function xAxisRangeMutator(options, globalOptions, _) {
    const hAxis = ('hAxis' in options) ? options.hAxis : {};
    const viewWindow = ('viewWindow' in hAxis) ? hAxis.viewWindow : {};

    const minValue = get(globalOptions, 'x-min');
    const maxValue = get(globalOptions, 'x-max');

    cases(RUNTIME.ffi.isOption, 'Option', minValue, {
      none: function () {},
      some: function (realMinValue) {
        hAxis.minValue = toFixnum(realMinValue);
        viewWindow.min = toFixnum(realMinValue);
      }
    });
    cases(RUNTIME.ffi.isOption, 'Option', maxValue, {
      none: function () {},
      some: function (realMaxValue) {
        hAxis.maxValue = toFixnum(realMaxValue);
        viewWindow.max = toFixnum(realMaxValue);
      }
    });

    hAxis.viewWindow = viewWindow;
    $.extend(options, {hAxis: hAxis});
  }

  //////////////////////////////////////////////////////////////////////////////

  function pieChart(globalOptions, rawData) {
    const table = get(rawData, 'tab');
    const data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(table.map(row => [row[0], toFixnum(row[1])]));
    return {
      data: data,
      options: {
        slices: table.map(row => ({offset: toFixnum(row[2])})),
        legend: {
          alignment: 'end'
        }
      },
      chartType: google.visualization.PieChart,
      onExit: defaultImageReturn,
    };
  }

  //////////// Bar Chart Getter Functions /////////////////

  function get_colors_list(rawData) {
    // Sets up the color list [Each Bar Colored Individually]
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'colors'), {
        none: function () {
          return [];
        },
        some: function (colors) {
          return colors.map(convertColor);
        }
    });
  }

  function get_default_color(rawData) { 
    // Sets up the default color [Default Bar Color if not specified in color_list]
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'color'), {
        none: function () {
          return "";
        },
        some: function (color) {
          return convertColor(color);
        }
    });
  }

  function get_pointers_list(rawData) {
    // Sets up the pointers list [Coloring each group memeber/stack]
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'pointers'), {
        none: function () {
          return [];
        },
        some: function (pointers) {
          return pointers.map(convertPointer);
        }
    });
  }

  function get_pointer_color(rawData) { 
    // Sets up the pointer color
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'pointer-color'), {
        none: function () {
          return 'black';
        },
        some: function (color) {
          return convertColor(color);
        }
    });
  }

  function get_axis(rawData) {
    // Sets up the calculated axis properties/data
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'axisdata'), {
        none: function () {
          return undefined;
        },
        some: function (axisdata) {
          return {
            top : toFixnum(get(axisdata, 'axisTop')), 
            bottom : toFixnum(get(axisdata, 'axisBottom')),
            ticks : get(axisdata, 'ticks').map(convertPointer)
          };
        }
    });
  }

  function get_interval_color(rawData) { 
    // Sets up the default interval color
    return cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'default-interval-color'), {
        none: function () {
          return 'black';
        },
        some: function (color) {
          return convertColor(color);
        }
    });
  }

  /////////////////////////////////////////////////////////
  function barChart(globalOptions, rawData) {
    // Variables and constants 
    const table = get(rawData, 'tab');
    const horizontal = get(rawData, 'horizontal');
    const axisloc = horizontal ? 'hAxes' : 'vAxes';
    const data = new google.visualization.DataTable();
    const colors_list = get_colors_list(rawData);
    const default_color = get_default_color(rawData);
    const pointers_list = get_pointers_list(rawData);
    const pointer_color = get_pointer_color(rawData);
    const axis = get_axis(rawData);
    const interval_color = get_interval_color(rawData); 
    const colors_list_length = colors_list.length;

    // Initializes the Columns of the data 
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Values');
    data.addColumn({type: 'string', role: 'style'});

    // Adds each row of bar data and bar_color data
    table.forEach(function (row, idx) {
      const bar_color = idx < colors_list_length ? colors_list[idx] : default_color;
      data.addRow([row[0], toFixnum(row[1]), bar_color]);
    });
    addAnnotations(data, rawData);
    addIntervals(data, rawData);

    let options = {
        legend: {
          position: 'none'
        }, 
        intervals: {
          color : interval_color, 
        }
      };
 
    options[axisloc] = { 
      0: { 
        viewWindow: { max: axis.top, min: axis.bottom }, 
        ticks: axis.ticks
      }
    };
    
     /* NOTE(John & Edward, Dec 2020): 
       Our goal for the part below was to add pointers (Specific Named Ticks) on another VAxis. 
       The Current Chart library necessitates that we assign at least one stack/bar to the 
       second axis in order for it to show up, and we have to fix the min/max of each axis 
       manually to make sure that both are consistent with each other rather than being relative 
       to the data. There is also a problem: When the pointers are too close to each other, one or 
       both of them disappear!
    */
    if (pointers_list.length > 0) {

      // Add and Attach Empty Data Stack/bar to 2nd axis + Color it
      data.addColumn('number', 'Pointers');
      options['series'] = { 1: { color: pointer_color, targetAxisIndex: 1 } };

      // Update Options to include the new axis ticks consistent with the first axis
      options[axisloc][1] = { 
        viewWindow: { 
          max: axis.top, 
          min: axis.bottom
        },
        gridlines: { color: pointer_color },
        ticks: pointers_list, 
        textStyle: { color: pointer_color }
      };
    }

    return {
      data: data,
      options: options,
      chartType: horizontal ? google.visualization.BarChart : google.visualization.ColumnChart,
      onExit: defaultImageReturn,
      mutators: [axesNameMutator, yAxisRangeMutator],
    };
  }

  function multiBarChart(globalOptions, rawData) {
    // Variables and Constants
    const table = get(rawData, 'tab');
    const legends = get(rawData, 'legends');
    const horizontal = get(rawData, 'horizontal');
    const axisloc = horizontal ? 'hAxes' : 'vAxes';
    const data = new google.visualization.DataTable();
    const pointers_list = get_pointers_list(rawData);
    const pointer_color = get_pointer_color(rawData);
    const axis = get_axis(rawData);
    const interval_color = get_interval_color(rawData); 
    const default_colors = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099',
                            '#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E',
                            '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC',
                            '#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC']
    var colors_list = get_colors_list(rawData);
    if (colors_list.length < default_colors.length) {
      default_colors.splice(0, colors_list.length, ...colors_list);
      colors_list = default_colors;
      colors_list = colors_list.slice(0, legends.length);
    }

    // Initializes the Columns of the data 
    data.addColumn('string', 'Label');
    legends.forEach(legend => data.addColumn('number', legend));

    // Adds each row of bar data
    data.addRows(table.map(row => [row[0]].concat(row[1].map(n => toFixnum(n)))));
    addAnnotations(data, rawData);
    addIntervals(data, rawData);

    let options = {
      isStacked: get(rawData, 'is-stacked'),
      series: colors_list.map(c => ({color: c, targetAxisIndex: 0})),
      legend: {
        position: horizontal ? 'right' : 'top', 
        maxLines: data.getNumberOfColumns() - 1
      }, 
      intervals: { 
        color : interval_color, 
      }
    };

    
    options[axisloc] = { 
      0: { 
        viewWindow: { max: axis.top, min: axis.bottom }, 
        ticks: axis.ticks 
      }
    };
         
    /* NOTE(John & Edward, Dec 2020): 
       Our goal for the part below was to add pointers (Specific Named Ticks) on another VAxis. 
       The Current Chart library necessitates that we assign at least one stack/bar to the 
       second axis in order for it to show up, and we have to fix the min/max of each axis 
       manually to make sure that both are consistent with each other rather than being relative 
       to the data. There is also a problem: When the pointers are too close to each other, one or 
       both of them disappear!
    */

    if (pointers_list.length > 0) { 
      colors_list = colors_list.slice(0, legends.length);
      
      // Add and Attach Empty Data Stack/bar to 2nd axis + Color it
      data.addColumn('number', 'Pointers')

      for (let i = 0; i < data.getNumberOfColumns() - 1; i++) {
        if (options['series'][i] == null) {
          options['series'][i] = {color: pointer_color, targetAxisIndex: 1};
        }
      }

      // Update Options to include the new axis ticks consistent with the first axis
      options[axisloc][1] = { 
        viewWindow: { 
          max: axis.top, 
          min: axis.bottom
        },
        gridlines: { color: pointer_color },
        ticks: pointers_list, 
        textStyle: { color: pointer_color }
      };
    } else {
      for (let i = 0; i < data.getNumberOfColumns() - 1; i++) {
        if (options['series'][i] == null) {
          options['series'][i] = {color: 'black', targetAxisIndex: 0};
        }
      }
    }
      
    return {
      data: data,
      options: options,
      chartType: horizontal ? google.visualization.BarChart : google.visualization.ColumnChart,
      onExit: defaultImageReturn,
      mutatorgraphs: [axesNameMutator, yAxisRangeMutator],
    };
  }

  function boxPlot(globalOptions, rawData) {
    let table = get(rawData, 'tab');
    const dimension = toFixnum(get(rawData, 'height'));
    // TODO: are these two supposed to be on ChartWindow or DataSeries?
    const horizontal = get(rawData, 'horizontal');
    const showOutliers = get(rawData, 'show-outliers');
    const axisName = horizontal ? 'hAxis' : 'vAxis';
    const chartType = horizontal ? google.visualization.BarChart : google.visualization.ColumnChart;
    const data = new google.visualization.DataTable();

    const intervalOptions = {
      lowNonOutlier: {
        style: 'bars',
        fillOpacity: 1,
        color: '#777'
      },
      highNonOutlier: {
        style: 'bars',
        fillOpacity: 1,
        color: '#777'
      }
    };

    data.addColumn('string', 'Label');
    data.addColumn('number', 'Total');
    data.addColumn({id: 'firstQuartile', type: 'number', role: 'interval'});
    data.addColumn({id: 'median', type: 'number', role: 'interval'});
    data.addColumn({id: 'thirdQuartile', type: 'number', role: 'interval'});
    data.addColumn({id: 'highNonOutlier', type: 'number', role: 'interval'});
    data.addColumn({id: 'lowNonOutlier', type: 'number', role: 'interval'});
    data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});

    // NOTE(joe & emmanuel, Aug 2019): With the current chart library, it seems
    // like we can only get outliers to work as a variable-length row if we
    // have a single row of data. It's an explicit error to mix row lengths.
    // Since the main use case where outliers matter is for single-column
    // box-plots, this maintains existing behavior (if anyone was relying on
    // multiple series), while adding the ability to render outliers for BS:DS.
    if(table.length === 1 && showOutliers) {
      var extraCols = table[0][8].length + table[0][9].length;
      for(var i = 0; i < extraCols; i += 1) {
        data.addColumn({id: 'outlier', type: 'number', role: 'interval'});
      }
      intervalOptions['outlier'] = { 'style':'points', 'color':'grey', 'pointSize': 10, 'lineWidth': 0, 'fillOpacity': 0.3 };
    }
    else {
      // NOTE(joe & emmanuel, Aug 2019 cont.): This forces the low and high
      // whiskers to be equal to the min/max when there are multiple rows since we
      // won't be able to render the outliers, and the whiskers need to cover
      //  the whole span of data.
      table = table.map(function(row) {
        row = row.slice(0, row.length);
        // force whisker to be max/min
        row[7] = row[2];
        row[6] = row[1];
        // empty outliers
        row[9] = [];
        row[8] = [];
        return row;
      });
    }

    const rowsToAdd = table.map(row => {
      const summaryValues = row.slice(3, 8).map(n => toFixnum(n));
      let tooltip = `<p><b>${row[0]}</b></p>
            <p>minimum: <b>${row[2]}</b></p>
            <p>maximum: <b>${row[1]}</b></p>
            <p>first quartile: <b>${summaryValues[0]}</b></p>
            <p>median: <b>${summaryValues[1]}</b></p>
            <p>third quartile: <b>${summaryValues[2]}</b></p>`;
      // ONLY if we're showing outliers, add whiskers to the tooltip
      // (otherwise, the min/max ARE the bottom/top whiskers)
      if(table.length == 1 && showOutliers) {
        tooltip += 
          ` <p>bottom whisker: <b>${summaryValues[4]}</b></p>
            <p>top whisker: <b>${summaryValues[3]}</b></p>`;
      }
      return [row[0], toFixnum(dimension)]
        .concat(summaryValues)
        .concat([tooltip])
        .concat(row[9]).concat(row[8]);
    });

    data.addRows(rowsToAdd);
    const options = {
      tooltip: {isHtml: true},
      legend: {position: 'none'},
      lineWidth: 0,
      intervals: {
        barWidth: 0.25,
        boxWidth: 0.8,
        lineWidth: 2,
        style: 'boxes'
      },
      interval: intervalOptions,
      dataOpacity: 0,
    };

    /* NOTE(Oak): manually set the default max to coincide with bar charts' height
     * so that the bar charts are concealed (the automatic value from Google
     * is likely to screw this up)
     */
    const axisOpts = {
      maxValue: dimension,
      viewWindow: {
        max: dimension
      },      
    };
    /* NOTE(Emmanuel): if min and max are set, override these defaults
     * 
     */
    cases(RUNTIME.ffi.isOption, 'Option', get(globalOptions, 'min'), {
      none: function () {},
      some: function (min) {
          axisOpts.viewWindow.min = toFixnum(min);
        }
    });
    cases(RUNTIME.ffi.isOption, 'Option', get(globalOptions, 'max'), {
      none: function () {},
      some: function (max) {
          axisOpts.viewWindow.max = toFixnum(max);
        }
    });
    options[axisName] = axisOpts;

    return {
      data: data,
      options: options,
      chartType: chartType,
      onExit: defaultImageReturn,
      mutators: [axesNameMutator],
    };
  }

  function histogram(globalOptions, rawData) {
    const table = get(rawData, 'tab');
    const data = new google.visualization.DataTable();

    data.addColumn('string', 'Label');
    data.addColumn('number', '');
    
    var max, min;
    var val = null;
    var hasAtLeastTwoValues = false;
    data.addRows(table.map(row => {
      var valfix = toFixnum(row[1]);
      if(val !== null && val !== valfix) { hasAtLeastTwoValues = true; }
      if(val === null) { val = valfix; }
      if(max === undefined) { max = valfix; }
      if(min === undefined) { min = valfix; }
      if(valfix > max) { max = valfix; }
      if(valfix < min) { min = valfix; }
      return [row[0], valfix];
    }));

    // set legend to none because there's only one data set
    const options = {legend: {position: 'none'}, histogram: {}};

    cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'bin-width'), {
      none: function () {},
      some: function (binWidth) {
        // NOTE(joe, aug 2019): The chart library has a bug for histograms with
        // a single unique value (https://jsfiddle.net/L0y64fbo/2/), so thisi
        // hackaround makes it so this case can't come up.
        if(hasAtLeastTwoValues) {
          options.histogram.bucketSize = toFixnum(binWidth);
        }
      }
    });

    cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'max-num-bins'), {
      none: function () {},
      some: function (maxNumBins) {
        options.histogram.maxNumBuckets = toFixnum(maxNumBins);
      }
    });

    cases(RUNTIME.ffi.isOption, 'Option', get(rawData, 'min-num-bins'), {
      none: function () {
        if(options.histogram.bucketSize !== undefined) {
          options.histogram.minNumBuckets = Math.floor((max - min) / options.histogram.bucketSize) + 1; 
        }
      },
      some: function (minNumBins) {
        options.histogram.minNumBuckets = toFixnum(minNumBins);
      }
    });

    /*
    The main reason to use `x-min`, `x-max` is so that students can compare
    different histogram agaisnt each other. Setting `x-min`, `x-max` on `hAxis`
    is more accurate than setting it to `histogram`

    const xMin = toFixnum(get(globalOptions, 'x-min'));
    const xMax = toFixnum(get(globalOptions, 'x-max'));
    if (xMin < xMax) {
      options.histogram.minValue = xMin;
      options.histogram.maxValue = xMax;
    }
    */

    return {
      data: data,
      options: options,
      chartType: google.visualization.Histogram,
      onExit: defaultImageReturn,
      mutators: [axesNameMutator, yAxisRangeMutator, xAxisRangeMutator],
    };
  }

  function geoChart(globalOptions, rawData) {
      const table = get(rawData, 'tab');
      const data = new google.visualization.DataTable();
      const region = get(rawData, 'region');
      data.addColumn('string', 'Region');
      data.addColumn('number', "Value");
      data.addRows(table.map(row => [row[0], toFixnum(row[1])]));
      console.log("test123");
      console.log(region);
      const options = {region: region};

      return {
          data: data,
          options: options,
          chartType: google.visualization.GeoChart,
          onExit: defaultImageReturn,
      };
  }


  function plot(globalOptions, rawData) {
    const scatters = get(rawData, 'scatters');
    const lines = get(rawData, 'lines');
    const data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    const combined = scatters.concat(lines);
    const legends = [];
    let cnt = 1;
    const legendEnabled = combined.length > 1;
    combined.forEach(p => {
      let legend = get(p, 'legend');
      if (legend === '') {
        legend = `Plot ${cnt}`;
        cnt++;
      }
      legends.push(legend);
      data.addColumn('number', legend);
      data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
    });

    combined.forEach((p, i) => {
      /*
      x | n n n | y | n n n n n n n n n n n n
            i         combined.length - i - 1
      */
      const prefix = new Array(2 * i).fill(null);
      const suffix = new Array(2 * (combined.length - i - 1)).fill(null);
      const rowTemplate = [0].concat(prefix).concat([null, null]).concat(suffix);
      data.addRows(get(p, 'ps').map(row => {
        const currentRow = rowTemplate.slice();
        if (row.length != 0) {
          currentRow[0] = toFixnum(row[0]);
          currentRow[2*i + 1] = toFixnum(row[1]);
          let labelRow = null;
          if (row.length >= 3 && row[2] !== '') {
            labelRow = `<p>label: <b>${row[2]}</b></p>`;
          } else {
            labelRow = '';
          }
          currentRow[2*i + 2] = `<p>${legends[i]}</p>
<p>x: <b>${currentRow[0]}</b></p>
<p>y: <b>${currentRow[2*i + 1]}</b></p>
${labelRow}`;
        }
        return currentRow;
      }));
    });

    // ASSERT: if we're using custom images, *every* series will have idx 3 defined
    const hasImage = combined.every(p => get(p, 'ps').filter(p => p[3]).length > 0);

    const options = {
      tooltip: {isHtml: true},
      series: combined.map((p, i) => {
        
        // scatters and then lines
        const seriesOptions = {};

        cases(RUNTIME.ffi.isOption, 'Option', get(p, 'color'), {
          none: function () {},
          some: function (color) {
            seriesOptions.color = convertColor(color);
          }
        });
        // If we have our own image, make the point small and transparent
        if (i < scatters.length) {
          $.extend(seriesOptions, {
            pointSize: hasImage ? 1 : toFixnum(get(p, 'point-size')),
            lineWidth: 0,
            dataOpacity: hasImage ? 0 : 1,
          });
        }
        return seriesOptions;
      }),
      legend: {position: legendEnabled ? 'bottom' : 'none'},
      crosshair: {trigger: 'selection'}
    };

    if (isTrue(get(globalOptions, 'interact'))) {
      $.extend(options, {
        chartArea: {
          left: '12%',
          width: '56%',
        }
      });
    }

    return {
      data: data,
      options: options,
      chartType: google.visualization.LineChart,
      onExit: (restarter, result) => {
        let svg = result.chart.container.querySelector('svg');
        let svg_xml = (new XMLSerializer()).serializeToString(svg);
        let dataURI = "data:image/svg+xml;base64," + btoa(svg_xml);
        imageReturn(
          dataURI,
          restarter,
          RUNTIME.ffi.makeRight)
      },
      mutators: [axesNameMutator,
                 yAxisRangeMutator,
                 xAxisRangeMutator,
                 gridlinesMutator],
      overlay: (overlay, restarter, chart, container) => {
        overlay.css({
          width: '30%',
          position: 'absolute',
          right: '0px',
          top: '50%',
          transform: 'translateY(-50%)',
        });

        const controller = $('<div/>');

        overlay.append(controller);

        const inputSize = 16;

        const xMinC = $('<input/>', {
          'class': 'controller',
          type: 'text',
          placeholder: 'x-min',
        }).attr('size', inputSize);
        const xMaxC = $('<input/>', {
          'class': 'controller',
          type: 'text',
          placeholder: 'x-max',
        }).attr('size', inputSize);
        const yMinC = $('<input/>', {
          'class': 'controller',
          type: 'text',
          placeholder: 'y-min',
        }).attr('size', inputSize);
        const yMaxC = $('<input/>', {
          'class': 'controller',
          type: 'text',
          placeholder: 'y-max',
        }).attr('size', inputSize);
        const numSamplesC = $('<input/>', {
          'class': 'controller',
          type: 'text',
          placeholder: '#samples',
        }).attr('size', inputSize).val('2');
        // dummy value so that a new window can be constructed correctly
        // when numSamplesC is not used. The value must be at least 2

        const redrawC = $('<button/>', {
          'class': 'controller',
          text: 'Redraw',
        }).click(() => {
          const newWindow = getNewWindow(xMinC, xMaxC, yMinC, yMaxC, numSamplesC);
          if (newWindow === null) return;
          const toRet = RUNTIME.ffi.makeLeft(
            RUNTIME.extendObj(
              RUNTIME.makeSrcloc('dummy location'),
              globalOptions,
              newWindow
            )
          );
          RUNTIME.getParam('remove-chart-port')();
          restarter.resume(toRet);
        });

        function getBoundControl(control, name) {
          control.val(prettyNumToStringDigits5(
            get(get(globalOptions, name), 'value')));
          return $('<p/>')
           .append($('<label/>', {'class': 'controller', text: name + ': '}))
           .append(control);
        }

        const xMinG = getBoundControl(xMinC, 'x-min');
        const xMaxG = getBoundControl(xMaxC, 'x-max');
        const yMinG = getBoundControl(yMinC, 'y-min');
        const yMaxG = getBoundControl(yMaxC, 'y-max');
        const redrawG = $('<p/>').append(redrawC);

        if (isTrue(get(globalOptions, 'is-show-samples'))) {
          numSamplesC.val(RUNTIME.num_to_string(get(globalOptions, 'num-samples')));
          const numSamplesG = $('<p/>')
            .append($('<label/>', {'class': 'controller', text: '#samples: '}))
            .append(numSamplesC);
          controller
            .append(xMinG)
            .append(xMaxG)
            .append(yMinG)
            .append(yMaxG)
            .append(numSamplesG)
            .append(redrawG);
        } else {
          controller
            .append(xMinG)
            .append(xMaxG)
            .append(yMinG)
            .append(yMaxG)
            .append(redrawG);
        }

        // If we don't have images, our work is done!
        if(!hasImage) { return; }
        
        // if custom images is defined, use the image at that location
        // and overlay it atop each dot
        google.visualization.events.addListener(chart, 'ready', function () {
          // HACK(Emmanuel): 
          // The only way to hijack marker events is to walk the DOM here
          // If Google changes the DOM, these lines will likely break
          const svgRoot = chart.container.querySelector('svg');
          const markers = svgRoot.children[2].children[2].children;          

          const layout = chart.getChartLayoutInterface();
          // remove any labels that have previously been drawn
          $('.__img_labels').each((idx, n) => $(n).remove());

          // for each point, (1) find the x,y location, (2) render the SVGImage,
          // (3) center it on the datapoint, (4) steal all the events
          // and (5) add it to the chart
          combined.forEach((p, i) => {
            get(p, 'ps').filter(p => p[3]).forEach((p, i) => {
              const xPos = layout.getXLocation(data.getValue(i, 0));
              const yPos = layout.getYLocation(data.getValue(i, 1));
              const imgDOM = p[3].val.toDomNode();
              p[3].val.render(imgDOM.getContext('2d'), 0, 0);
              // make an image element from the SVG namespace
              let imageElt = document.createElementNS("http://www.w3.org/2000/svg", 'image');
              imageElt.classList.add('__img_labels'); // tag for later garbage collection
              imageElt.setAttributeNS(null, 'href', imgDOM.toDataURL());
              imageElt.setAttribute('x', xPos - imgDOM.width/2);  // center the image
              imageElt.setAttribute('y', yPos - imgDOM.height/2); // center the image
              Object.assign(imageElt, markers[i]); // we should probably not steal *everything*...
              svgRoot.appendChild(imageElt);
            });
          });
        });
      },
    };
  }

  //////////////////////////////////////////////////////////////////////////////


  function onExitRetry(resultGetter, restarter) {
    const result = resultGetter();
    if (result !== null) {
      result.onExit(restarter, result);
    } else {
      setTimeout(onExitRetry, 100, resultGetter, restarter);
    }
  }


  function imageReturn(url, restarter, hook) {
    const rawImage = new Image();
    rawImage.onload = () => {
      restarter.resume(
        hook(
          RUNTIME.makeOpaque(
            IMAGE.makeFileImage(url, rawImage),
            IMAGE.imageEquals
          )
        )
      );
    };
    rawImage.onerror = e => {
      restarter.error(
        RUNTIME.ffi.makeMessageException(
          'unable to load the image: ' + e.message));
    };
    rawImage.src = url;
  }

  function defaultImageReturn(restarter, result) {
    /*
    We in fact should put imageReturn(...) inside

    google.visualization.events.addListener(result.chart, 'ready', () => {
      ...
    });

    However, somehow this event is never triggered, so we will just call
    it here to guarantee that it will return.
    */
    imageReturn(result.chart.getImageURI(), restarter, x => x);
  }

  function makeFunction(f) {
    return RUNTIME.makeFunction((globalOptions, rawData) => {
      const root = $('<div/>');
      const overlay = $('<div/>', {style: 'position: absolute'});
      const isInteractive = isTrue(get(globalOptions, 'interact'));

      let result = null;

      function draw(optMutator) {
        optMutator = optMutator ? optMutator : x => x;
        if (result != null) {
          result.chart.draw(result.data, optMutator(result.options));
        }
      }

      function setup(restarter) {
        var tmp = f(globalOptions, rawData);
        tmp.chart = new tmp.chartType(root[0]);
        const options = {
          backgroundColor: {fill: 'transparent'},
          title: get(globalOptions, 'title'),
        };

        if ('mutators' in tmp) {
          tmp.mutators.forEach(fn => fn(options, globalOptions, rawData));
        }

        tmp.options = $.extend({}, options, 'options' in tmp ? tmp.options : {});

        if ('overlay' in tmp) tmp.overlay(overlay, restarter, tmp.chart, root);

        // only mutate result when everything is setup
        result = tmp;
        // this draw will have a wrong width / height, but do it for now so
        // that overlay works
        draw();
        // must append the overlay _after_ drawing to make the overlay appear
        // correctly
        root.append(overlay);
        // return true;
      }

      return RUNTIME.pauseStack(restarter => {
        google.charts.setOnLoadCallback(() => {
          try{
            setup(restarter)
          } catch (e) {
            return restarter.error(e);
          }
          RUNTIME.getParam('chart-port')({
            root: root[0],
            onExit: () => onExitRetry(() => result, restarter),
            draw: draw,
            windowOptions: {
              width: toFixnum(get(globalOptions, 'width')),
              height: toFixnum(get(globalOptions, 'height'))
            },
            isInteractive: isInteractive,
            getImageURI: () => result.chart.getImageURI(),
            // thunk it here b/c apparently getImageURI is going to be mutated
            // by Google
          });
        });
      });
    });
  }

  return RUNTIME.makeModuleReturn(
    {
      'pie-chart': makeFunction(pieChart),
      'bar-chart': makeFunction(barChart),
      'multi-bar-chart': makeFunction(multiBarChart),
      'histogram': makeFunction(histogram),
      'box-plot': makeFunction(boxPlot),
      'plot': makeFunction(plot),
      'geochart': makeFunction(geoChart),
    }, 
    {
      "LoC": ann("List<Color>", checkListWith(IMAGE.isColorOrColorString)),
      "LoS": ann("List<String>", checkListWith(RUNTIME.isString)), 
      "LoN": ann("List<Number>", checkListWith(RUNTIME.isNumber)),
      "LoLoN": ann("List<List<Number>>", checkListWith(checkListWith(RUNTIME.isNumber))),
      "LoLoLoN": ann("List<List<List<<Number>>>", checkListWith(checkListWith(checkListWith(RUNTIME.isNumber)))),
      "LoOoS": ann("List<Option<String>>", checkListWith(checkOptionWith(RUNTIME.isString))),
      "LoLoOoS": ann("List<List<Option<String>>>", checkListWith(checkListWith(checkOptionWith(RUNTIME.isString))))
    }
  )
}
})