Add Scale type

js/src/Bars.ts

@@ -24,6 +24,10 @@ import * as _ from 'underscore';
 import { Mark } from './Mark'
 import { BarsModel } from './BarsModel'
 
+import {
+    Scale
+} from './scales/Scale';
+
 export class Bars extends Mark {
 
     render() {
@@ -65,11 +69,11 @@ export class Bars extends Mark {
         const dom = (orient === "vertical") ? "x" : "y";
         const rang = (orient === "vertical") ? "y" : "x";
         if(dom_scale.model.type !== "ordinal") {
-            dom_scale.set_range(this.parent.padded_range(dom, dom_scale.model));
+            dom_scale.setRange(this.parent.padded_range(dom, dom_scale.model));
         } else {
-            dom_scale.set_range(this.parent.padded_range(dom, dom_scale.model), this.model.get("padding"));
+            dom_scale.setRange(this.parent.padded_range(dom, dom_scale.model), this.model.get("padding"));
         }
-        range_scale.set_range(this.parent.padded_range(rang, range_scale.model));
+        range_scale.setRange(this.parent.padded_range(rang, range_scale.model));
         // x_offset is set later by the adjust_offset method
         // This differs because it is not constant for a scale.
         // Changes based on the data.
@@ -695,11 +699,11 @@ export class Bars extends Mark {
     }
 
     dom_offset: any;
-    dom_scale: any;
+    dom_scale: Scale;
     legend_el: any;
     pixel_coords: any;
     range_offset: any;
-    range_scale: any;
+    range_scale: Scale;
     x_pixels: any;
     x: any;
     x1: any;

js/src/BarsModel.ts

@@ -149,7 +149,7 @@ export class BarsModel extends markmodel.MarkModel {
             return;
         }
         const color = this.get("color") || [];
-        const color_scale = this.get("scales").color;
+        const color_scale = this.getScales().color;
         const color_mode = this.get("color_mode");
         const apply_color_to_groups = ((color_mode === "group") ||
                                      (color_mode === "auto" && !(this.is_y_2d)));
@@ -161,9 +161,9 @@ export class BarsModel extends markmodel.MarkModel {
         });
         if(color_scale && color.length > 0) {
                 if(!this.get("preserve_domain").color) {
-                    color_scale.compute_and_set_domain(color, this.model_id + "_color");
+                    color_scale.computeAndSetDomain(color, this.model_id + "_color");
                 } else {
-                    color_scale.del_domain([], this.model_id + "_color");
+                    color_scale.delDomain([], this.model_id + "_color");
                 }
         }
     }
@@ -172,22 +172,22 @@ export class BarsModel extends markmodel.MarkModel {
         if(!this.mark_data) {
             return;
         }
-        const scales = this.get("scales");
+        const scales = this.getScales();
         const dom_scale = scales.x;
         const range_scale = scales.y;
 
         if(!this.get("preserve_domain").x) {
-            dom_scale.compute_and_set_domain(this.mark_data.map(function(elem) {
+            dom_scale.computeAndSetDomain(this.mark_data.map(function(elem) {
                 return elem.key;
             }), this.model_id + "_x");
         }
         else {
-            dom_scale.del_domain([], this.model_id + "_x");
+            dom_scale.delDomain([], this.model_id + "_x");
         }
 
         if(!this.get("preserve_domain").y) {
             if(this.get("type") === "stacked") {
-                range_scale.compute_and_set_domain([d3.min(this.mark_data, function(c: any) { return c.neg_max; }),
+                range_scale.computeAndSetDomain([d3.min(this.mark_data, function(c: any) { return c.neg_max; }),
                                                 d3.max(this.mark_data, function(c: any) { return c.pos_max; }), this.base_value],
                                                 this.model_id + "_y");
             } else {
@@ -202,10 +202,10 @@ export class BarsModel extends markmodel.MarkModel {
                         return val.y_ref;
                     });
                 });
-                range_scale.compute_and_set_domain([min, max, this.base_value], this.model_id + "_y");
+                range_scale.computeAndSetDomain([min, max, this.base_value], this.model_id + "_y");
             }
         } else {
-            range_scale.del_domain([], this.model_id + "_y");
+            range_scale.delDomain([], this.model_id + "_y");
         }
     }
 

js/src/Boxplot.ts

@@ -42,11 +42,11 @@ export class Boxplot extends Mark {
     set_ranges() {
         const x_scale = this.scales.x;
         if(x_scale) {
-            x_scale.set_range(this.parent.padded_range("x", x_scale.model));
+            x_scale.setRange(this.parent.padded_range("x", x_scale.model));
         }
         const y_scale = this.scales.y;
         if(y_scale) {
-            y_scale.set_range(this.parent.padded_range("y", y_scale.model));
+            y_scale.setRange(this.parent.padded_range("y", y_scale.model));
         }
     }
 

js/src/BoxplotModel.ts

@@ -74,16 +74,16 @@ export class BoxplotModel extends MarkModel {
         // color scale needs an issue in DateScaleModel to be fixed. It
         // should be moved here as soon as that is fixed.
 
-        const scales = this.get("scales");
+        const scales = this.getScales();
         const x_scale = scales.x;
         const y_scale = scales.y;
 
         if(!this.get("preserve_domain").x && this.mark_data) {
-            x_scale.compute_and_set_domain(this.mark_data.map(function(elem) {
+            x_scale.computeAndSetDomain(this.mark_data.map(function(elem) {
                 return elem[0];
             }), this.model_id + "_x");
         } else {
-            x_scale.del_domain([], this.model_id + "_x");
+            x_scale.delDomain([], this.model_id + "_x");
         }
         if(!this.get("preserve_domain").y && this.mark_data) {
            //The values are sorted, so we are using that to calculate the min/max
@@ -96,10 +96,10 @@ export class BoxplotModel extends MarkModel {
                 return values[values.length-1];
             }));
 
-            y_scale.set_domain([min,max], this.model_id + "_y");
+            y_scale.setDomain([min,max], this.model_id + "_y");
 
         } else {
-            y_scale.del_domain([], this.model_id + "_y");
+            y_scale.delDomain([], this.model_id + "_y");
         }
     }
 

js/src/FastIntervalSelector.ts

@@ -19,6 +19,14 @@ import * as d3 from 'd3';
 import { BaseXSelector } from './Selector';
 import * as sel_utils from './selector_utils';
 
+import {
+    LinearScale
+} from './scales/LinearScale';
+
+import {
+    OrdinalScale
+} from './scales/OrdinalScale';
+
 export class FastIntervalSelector extends BaseXSelector {
 
     render() {
@@ -112,7 +120,7 @@ export class FastIntervalSelector extends BaseXSelector {
         this.rect.attr("width", interval_size);
         const pixel_extent = [start, start + interval_size];
         this.set_selected("selected",
-                                   this.scale.invert_range(pixel_extent));
+                                   this.scale.invertRange(pixel_extent));
         this.update_mark_selected(pixel_extent, undefined);
         this.touch();
         this.dirty = false;
@@ -222,4 +230,5 @@ export class FastIntervalSelector extends BaseXSelector {
     size: any;
     background: any;
     rect: any;
+    scale: LinearScale | OrdinalScale;
 }

js/src/Figure.ts

@@ -14,6 +14,11 @@
  */
 
 import * as widgets from '@jupyter-widgets/base';
+
+import {
+    Scale
+} from './scales/Scale';
+
 import * as d3 from 'd3';
 import 'd3-selection-multi';
 // var d3 =Object.assign({}, require("d3-selection"), require("d3-selection-multi"));
@@ -352,17 +357,19 @@ export class Figure extends widgets.DOMWidgetView {
         // See the scale_x and scale_y attributes of the python Figure
         const that = this;
         const x_scale_promise = this.create_child_view(this.model.get("scale_x"))
-            .then(function(view) {
+        // @ts-ignore
+            .then(function(view: Scale) {
                 that.scale_x = view;
                 that.scale_x.scale.clamp(true);
-                that.scale_x.set_range([0, that.plotarea_width]);
+                that.scale_x.setRange([0, that.plotarea_width]);
             });
 
         const y_scale_promise = this.create_child_view(this.model.get("scale_y"))
-            .then(function(view) {
+        // @ts-ignore
+            .then(function(view: Scale) {
                 that.scale_y = view;
                 that.scale_y.scale.clamp(true);
-                that.scale_y.set_range([that.plotarea_height, 0]);
+                that.scale_y.setRange([that.plotarea_height, 0]);
             });
         return Promise.all([x_scale_promise, y_scale_promise]);
     }
@@ -584,12 +591,12 @@ export class Figure extends widgets.DOMWidgetView {
             that.update_plotarea_dimensions();
 
             if (that.scale_x !== undefined && that.scale_x !== null) {
-                that.scale_x.set_range([0, that.plotarea_width]);
+                that.scale_x.setRange([0, that.plotarea_width]);
             }
 
 
             if (that.scale_y !== undefined && that.scale_y !== null) {
-                that.scale_y.set_range([that.plotarea_height, 0]);
+                that.scale_y.setRange([that.plotarea_height, 0]);
             }
 
             // transform figure
@@ -971,8 +978,8 @@ export class Figure extends widgets.DOMWidgetView {
     popper_reference: any;
     popper: any;
     renderer: any;
-    scale_x: any;
-    scale_y: any;
+    scale_x: Scale;
+    scale_y: Scale;
     svg: d3.Selection<SVGElement, any, any, any>;
     svg_background: d3.Selection<SVGElement, any, any, any>;
     title: any;

js/src/FlexLine.ts

@@ -33,7 +33,7 @@ export class FlexLine extends Lines {
         super.set_ranges();
         const width_scale = this.scales.width;
         if(width_scale) {
-            width_scale.set_range([0.5, this.model.get("stroke_width")]);
+            width_scale.setRange([0.5, this.model.get("stroke_width")]);
         }
     }
 

js/src/Graph.ts

@@ -83,10 +83,10 @@ export class Graph extends Mark {
         const x_scale = this.scales.x,
             y_scale = this.scales.y;
         if (x_scale) {
-            x_scale.set_range(this.parent.padded_range("x", x_scale.model));
+            x_scale.setRange(this.parent.padded_range("x", x_scale.model));
         }
         if (y_scale) {
-            y_scale.set_range(this.parent.padded_range("y", y_scale.model));
+            y_scale.setRange(this.parent.padded_range("y", y_scale.model));
         }
     }
 

js/src/GraphModel.ts

@@ -50,7 +50,7 @@ export class GraphModel extends MarkModel {
         const y = this.get("y");
         const color = this.get("color") || [];
 
-        const scales = this.get("scales");
+        const scales = this.getScales();
         const color_scale = scales.color;
 
         function get_shape_attrs(shape, attrs) {
@@ -95,10 +95,10 @@ export class GraphModel extends MarkModel {
         if (x.length !== 0 && y.length !== 0) {
             if (color_scale) {
                 if (!this.get("preserve_domain").color) {
-                    color_scale.compute_and_set_domain(color,
+                    color_scale.computeAndSetDomain(color,
                                                        this.model_id + "_color");
                 } else {
-                    color_scale.del_domain([], this.model_id + "_color");
+                    color_scale.delDomain([], this.model_id + "_color");
                 }
             }
 
@@ -111,7 +111,7 @@ export class GraphModel extends MarkModel {
     }
 
     update_link_data() {
-        const link_color_scale = this.get("scales").link_color;
+        const link_color_scale = this.getScales().link_color;
         this.link_data = this.get("link_data");
         let link_matrix = this.get("link_matrix");
         const link_color = this.get("link_color");
@@ -156,16 +156,16 @@ export class GraphModel extends MarkModel {
             return;
         }
 
-        const scales = this.get("scales");
+        const scales = this.getScales();
         for (let key in scales) {
             if (scales.hasOwnProperty(key)) {
                 const scale = scales[key];
                 if (!this.get("preserve_domain")[key]) {
-                    scale.compute_and_set_domain(this.mark_data.map(function(d) {
+                    scale.computeAndSetDomain(this.mark_data.map(function(d) {
                         return d[key] || d[data_scale_key_map[key]];
                     }), this.model_id + key);
                 } else {
-                    scale.del_domain([], this.model_id + key);
+                    scale.delDomain([], this.model_id + key);
                 }
             }
        }

js/src/GridHeatMap.ts

@@ -66,12 +66,12 @@ export class GridHeatMap extends Mark {
             // The y_range is reversed because we want the first row
             // to start at the top of the plotarea and not the bottom.
             const row_range = this.parent.padded_range("y", row_scale.model);
-            row_scale.set_range(row_range);
-            // row_scale.set_range([row_range[1], row_range[0]]);
+            row_scale.setRange(row_range);
+            // row_scale.setRange([row_range[1], row_range[0]]);
         }
         const col_scale = this.scales.column;
         if(col_scale) {
-            col_scale.set_range(this.parent.padded_range("x", col_scale.model));
+            col_scale.setRange(this.parent.padded_range("x", col_scale.model));
         }
     }
 
@@ -413,15 +413,15 @@ export class GridHeatMap extends Mark {
             new_domain = this.expand_scale_domain(row_scale, this.model.rows, this.model.modes.row, (row_start_aligned));
             if(d3.min(new_domain) < d3.min(row_scale.model.domain) || d3.max(new_domain) > d3.max(row_scale.model.domain)) {
                 // Update domain if domain has changed
-                row_scale.model.compute_and_set_domain(new_domain, row_scale.model.model_id);
+                row_scale.model.computeAndSetDomain(new_domain, row_scale.model.model_id);
             }
         }
 
         if(this.model.modes.column !== "middle" && this.model.modes.column !== "boundaries") {
             new_domain = this.expand_scale_domain(column_scale, this.model.columns, this.model.modes.column, col_start_aligned);
             if(d3.min(new_domain) < d3.min(column_scale.model.domain) || d3.max(new_domain) > d3.max(column_scale.model.domain)) {
                 // Update domain if domain has changed
-                column_scale.model.compute_and_set_domain(new_domain, column_scale.model.model_id);
+                column_scale.model.computeAndSetDomain(new_domain, column_scale.model.model_id);
             }
         }
 

js/src/GridHeatMapModel.ts

@@ -90,28 +90,28 @@ export class GridHeatMapModel extends MarkModel {
         if(!this.mark_data) {
             return;
         }
-        const scales = this.get("scales");
+        const scales = this.getScales();
         const y_scale = scales.row, x_scale = scales.column;
         const color_scale = scales.color;
 
         if(!this.get("preserve_domain").row) {
-            y_scale.compute_and_set_domain(this.rows, this.model_id + "_row");
+            y_scale.computeAndSetDomain(this.rows, this.model_id + "_row");
         } else {
-            y_scale.del_domain([], this.model_id + "_row");
+            y_scale.delDomain([], this.model_id + "_row");
         }
 
         if(!this.get("preserve_domain").column) {
-            x_scale.compute_and_set_domain(this.columns, this.model_id + "_column");
+            x_scale.computeAndSetDomain(this.columns, this.model_id + "_column");
         } else {
-            x_scale.del_domain([], this.model_id + "_column");
+            x_scale.delDomain([], this.model_id + "_column");
         }
         if(color_scale !== null && color_scale !== undefined) {
             if(!this.get("preserve_domain").color) {
-                color_scale.compute_and_set_domain(this.mark_data.map(function(elem) {
+                color_scale.computeAndSetDomain(this.mark_data.map(function(elem) {
                     return elem.color;
                 }), this.model_id + "_color");
             } else {
-                color_scale.del_domain([], this.model_id + "_color");
+                color_scale.delDomain([], this.model_id + "_color");
             }
         }
     }
@@ -124,7 +124,7 @@ export class GridHeatMapModel extends MarkModel {
         //based on the data, identify the mode in which the heatmap should
         //be plotted.
         const modes : any = {};
-        const scales = this.get("scales");
+        const scales = this.getScales();
         const row_scale = scales.row;
         const column_scale = scales.column;
         const data_nrow = this.colors.length;