gridviz 2.1.16 → 3.0.0

package/src/legend/SizeLegend.js

@@ -1,8 +1,9 @@
 //@ts-check
 'use strict'
 
-import { Legend } from '../Legend.js'
-import { format } from 'd3-format'
+import { Legend } from '../core/Legend.js'
+import { nice } from '../utils/utils.js'
+import { max } from 'd3-array'
 
 /**
  * A legend element for proportional symbols.
@@ -15,103 +16,78 @@ export class SizeLegend extends Legend {
         super(opts)
         opts = opts || {}
 
-        //exageration
-        this.exaggerationFactor = opts.exaggerationFactor || 0.8
+        /** A function returning the text label
+         *  @type { function(object, Array.<import('../core/Dataset.js').Cell>):(number|string) } */
+        this.label = opts.label || undefined
 
-        //if value is to be forced
-        this.value = opts.value || undefined
-
-        //title
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
+        /** A function returning the size of the legend symbol
+         *  @type { function(object):number } */
+        this.size = opts.size || undefined
 
         //symbol
-        /**
-         * @private
-         * @type {import("../Style").Shape} */
+        /**  @type {(import("../core/Style").Shape)|"line"} */
         this.shape = opts.shape || 'circle'
+
+        //general case
         this.fillColor = opts.fillColor || 'none'
         this.strokeColor = opts.strokeColor || 'gray'
         this.strokeWidth = opts.strokeWidth || 1
 
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
-        this.labelUnitText = opts.labelUnitText || ''
-        this.labelFormat = opts.labelFormat || ',.2r'
-
-        //
-        //this.div.style("text-align", "center")
+        //for line shape
+        //TODO this.orientation = opts.orientation || 0
+        this.color = opts.color || 'gray'
+        this.length = opts.length || ((resolution, z, viewScale) => resolution)
     }
 
     /**
-     * @param {{ style: import("../style/ShapeColorSizeStyle").ShapeColorSizeStyle, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     * @param {{ viewScale:object, resolution: number, z:number, cells:Array.<import('../core/Dataset.js').Cell> }} opts
      */
     update(opts) {
-        //could happen when data is still loading
-        if (!opts.sSize) return
 
         //clear
         this.div.selectAll('*').remove()
 
-        //get value
-        let value = this.value
-        if (value == undefined) {
-            //compute 'nice value
-
-            //get max value
-            const value_ = opts.sSize.max * this.exaggerationFactor
-
-            //take 'nice' value (power of ten, or multiple)
-            let pow10 = Math.log10(value_)
-            pow10 = Math.floor(pow10)
-            value = Math.pow(10, pow10)
-            if (value * 8 <= value_) value *= 8
-            else if (value * 6 <= value_) value *= 6
-            else if (value * 5 <= value_) value *= 5
-            else if (value * 4 <= value_) value *= 4
-            else if (value * 2.5 <= value_) value *= 2.5
-            else if (value * 2 <= value_) value *= 2
-        }
+        //title
+        this.makeTitle()
 
-        if (!value) return
+        //get label. May not be a number (!)
+        let label = this.label(opts.viewScale, opts.cells)
+
+        //compute size of symbol, in pix
+        let sizePix
+        if (this.size)
+            sizePix = this.size(opts.viewScale) / opts.z
+        else
+            sizePix = opts.viewScale(+label) / opts.z
+        if (!sizePix) return
+
+        //format label, if specified and possible
+        if (this.labelFormat && !isNaN(+label)) label = this.labelFormat(label)
 
         const d = this.div.append('div')
         //to enable vertical centering
         //.style("position", "relative")
 
-        //title
-        if (this.title) {
-            d.append('div')
-                .attr('class', 'title')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .text(this.title)
-        }
-
-        //compute size of symbol, in pix
-        const size = opts.style.size(value, opts.r, opts.sSize, opts.zf) / opts.zf
-
-        const svg = d
+        //default svg construction, for square and circle
+        const svg = () => d
             .append('svg')
-            .attr('width', size + this.strokeWidth + 2)
-            .attr('height', size + this.strokeWidth + 2)
+            .attr('width', sizePix + this.strokeWidth + 2)
+            .attr('height', sizePix + this.strokeWidth + 2)
             .style('', 'inline-block')
 
         if (this.shape === 'square') {
-            svg.append('rect')
+            svg().append('rect')
                 .attr('x', 0)
                 .attr('y', 0)
-                .attr('width', size)
-                .attr('height', size)
+                .attr('width', sizePix)
+                .attr('height', sizePix)
                 .style('fill', this.fillColor)
                 .style('stroke', this.strokeColor)
                 .style('stroke-width', this.strokeWidth)
-            //TODO test
         } else if (this.shape === 'circle') {
             // <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
-            const r = (size + this.strokeWidth) * 0.5
-            svg.append('circle')
+            const r = (sizePix + this.strokeWidth) * 0.5
+            svg().append('circle')
                 .attr('cx', r + 1)
                 .attr('cy', r + 1)
                 .attr('r', r)
@@ -122,20 +98,125 @@ export class SizeLegend extends Legend {
             //TODO
         } else if (this.shape === 'diamond') {
             //TODO
+        } else if (this.shape === 'line') {
+
+            //get segment length
+            let lengthPix = this.length ? this.length(opts.resolution, opts.z, opts.viewScale) : opts.resolution
+            lengthPix /= opts.z
+
+            const svg = d.append('svg').attr('width', lengthPix).attr('height', sizePix).style('', 'inline-block')
+
+            //TODO orientation
+            //<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
+            svg.append('line')
+                .attr('x1', 0)
+                .attr('y1', sizePix / 2)
+                .attr('x2', lengthPix)
+                .attr('y2', sizePix / 2)
+                .style('stroke', this.color)
+                .style('stroke-width', sizePix)
         } else {
             throw new Error('Unexpected shape:' + this.shape)
         }
 
-        const valueT = format(this.labelFormat)(value)
+        //label
         d.append('div')
-            //show on right of graphic
             .style('display', 'inline')
-
-            //center vertically
-            //.style("position", "absolute").style("top", "0").style("bottom", "0")
-
             .style('padding-left', '5px')
             .style('font-size', this.labelFontSize)
-            .text(valueT + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
+            .text(label + (this.labelUnitText ? ' ' : '') + this.labelUnitText)
+    }
+}
+
+
+
+
+
+
+
+/**
+ * @param {Array.<number>} values 
+ * @param {function(number):number} size 
+ * @param { object } opts 
+ * @returns {Array.<SizeLegend>}
+ */
+export function sizeLegend(values, size, opts = {}) {
+    const legends = []
+    for (let value of values) {
+        opts.title = value == values[0] ? opts.title : undefined;
+        opts.size = () => size(value)
+        opts.label = () => value
+        legends.push(new SizeLegend(opts))
+    }
+    return legends
+}
+
+/**
+ * @param { function(import('../core/Dataset.js').Cell):number } value 
+ * @param {*} opts 
+ * @returns {Array.<SizeLegend>}
+ */
+export function sizeLegendViewScale(value, opts = {}) {
+    const k = opts.k || [0.9, 0.5, 0.2, 0.05]
+    const legends = []
+    for (let k_ of k) {
+        opts.title = k_ == k[0] ? opts.title : undefined
+        opts.label = (viewScale, cells) => nice(k_ * max(cells, value))
+        legends.push(new SizeLegend(opts))
+    }
+    return legends
+}
+
+/**
+ * A function which return a stack of size legends for a discrete classification.
+ * 
+ * @param { Array.<number> } breaks 
+ * @param { Array.<number> } sizes 
+ * @param { object } opts 
+ * @returns {Array.<SizeLegend>}
+ */
+export function sizeDiscreteLegend(breaks, sizes, opts = {}) {
+    const f = opts.labelFormat || (x => x)
+    const labelText = opts.labelText || defaultLabelText(f)
+    const legends = []
+    for (let i = sizes.length - 1; i >= 0; i--) {
+        opts.title = i == sizes.length - 1 ? opts.title : undefined
+        opts.size = () => sizes[i]
+        opts.label = () => labelText(breaks[i - 1], breaks[i])
+        legends.push(new SizeLegend(opts))
+    }
+    return legends
+}
+
+/**
+ * A function which return a stack of size legends for a discrete classification using a viewscale.
+ * @param { number } classNumber 
+ * @param { object } opts 
+ * @returns {Array.<SizeLegend>}
+ */
+export function sizeDiscreteViewScaleLegend(classNumber, opts = {}) {
+    const f = opts.labelFormat || (x => x)
+    const labelText = opts.labelText || defaultLabelText(f)
+    const legends = []
+    for (let i = classNumber - 1; i >= 0; i--) {
+        opts.title = i == classNumber - 1 ? opts.title : undefined
+        opts.size = (viewScale) => viewScale.values[i]
+        opts.label = (viewScale) => labelText(viewScale.breaks[i - 1], viewScale.breaks[i])
+        legends.push(new SizeLegend(opts))
+    }
+    return legends
+}
+
+/**
+ * A function that returns a function to format laberls for discrete scale legends.
+ * @param { function(number):string } format 
+ * @returns { function(number|undefined, number|undefined): string }
+ */
+function defaultLabelText(format) {
+    return (v0, v1) => {
+        if (v0 == undefined && v1 == undefined) return ""
+        if (v1 == undefined) return "> " + format(v0)
+        if (v0 == undefined) return "< " + format(v1)
+        return format(v0) + " - " + format(v1)
     }
 }

package/src/style/CompositionStyle.js

@@ -1,7 +1,7 @@
 //@ts-check
 'use strict'
 
-import { Style } from '../Style.js'
+import { Style } from '../core/Style.js'
 
 /** @typedef {"flag"|"piechart"|"ring"|"segment"|"radar"|"agepyramid"|"halftone"} CompositionType */
 
@@ -26,29 +26,25 @@ export class CompositionStyle extends Style {
 
         /**
          * A function returning the type of decomposition symbol of a cell, @see CompositionType
-         * @type {function(import("../Dataset").Cell):CompositionType} */
-        this.type = opts.type
+         * @type {function(import("../core/Dataset.js").Cell,number, number,object):CompositionType} */
+        this.type = opts.type || (() => "flag") //(c,r,z,vs) => {}
 
-        /** The column where to get the size values.
-         * @type {string} */
-        this.sizeCol = opts.sizeCol
-
-        /** A function returning the size of a cell.
-         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-        this.size = opts.size || ((v, r, s, zf) => r)
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
+        this.size = opts.size || ((c, r) => r) //(c,r,z,vs) => {}
 
         /** For style types with stripes (flag, segment), the orientation of the stripes (0 for horizontal, other for vertical).
-         * @type {function(import("../Dataset").Cell,number,number):number} */
-        this.stripesOrientation = opts.stripesOrientation || (() => 0) //(c,r,zf) => ...
+         * @type {function(import("../core/Dataset.js").Cell,number,number,object):number} */
+        this.stripesOrientation = opts.stripesOrientation || (() => 0) //(c,r,z,vs) => ...
 
         /** The function specifying an offset angle for a radar, halftone or pie chart style.
          * The angle is specified in degree. The rotation is anti-clockwise.
-         * @type {function(import("../Dataset").Cell,number,number):number} */
-        this.offsetAngle = opts.offsetAngle || (() => 0) //(cell,r,zf) => ...
+         * @type {function(import("../core/Dataset.js").Cell,number,number,object):number} */
+        this.offsetAngle = opts.offsetAngle || (() => 0) //(c,r,z,vs) => ...
 
         /** The function specifying the height of the age pyramid, in geo unit.
-         * @type {function(import("../Dataset").Cell,number,number):number} */
-        this.agePyramidHeight = opts.agePyramidHeight || ((c, r, zf) => r) //(cell,r,zf) => ...
+         * @type {function(import("../core/Dataset.js").Cell,number,number,object):number} */
+        this.agePyramidHeight = opts.agePyramidHeight || ((c, r) => r) //(c,r,z,vs) => ...
 
         /** For pie chart, this is parameter for internal radius, so that the pie chart looks like a donut.
          * 0 for normal pie charts, 0.5 to empty half of the radius.
@@ -59,52 +55,43 @@ export class CompositionStyle extends Style {
     /**
      * Draw cells as squares depending on their value.
      *
-     * @param {Array.<import("../Dataset").Cell>} cells
-     * @param {number} r
-     * @param {import("../GeoCanvas").GeoCanvas} cg
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
      */
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, resolution) {
+
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        //zoom factor
-        const zf = cg.getZf()
+        //
+        const z = geoCanvas.view.z
 
-        let stat
-        if (this.sizeCol) {
-            //if size is used, sort cells by size so that the biggest are drawn first
-            cells.sort((c1, c2) => c2[this.sizeCol] - c1[this.sizeCol])
-            //and compute statistics
-            stat = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
-        }
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         //nb categories - used for radar and agepyramid
         const nbCat = Object.entries(this.color).length
 
-        //draw in geo coordinates
-        cg.setCanvasTransform()
-
         //draw calls
         for (let cell of cells) {
+
             //size
-            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
-            let s_ = this.size || (() => r)
-            //size - in geo
-            /** @type {number} */
-            const sG = s_(cell[this.sizeCol], r, stat, zf)
+            const sG = this.size ? this.size(cell, resolution, z, viewScale) : resolution
+            if (!sG) continue
 
             //get offset
-            const offset = this.offset(cell, r, zf)
+            const offset = this.offset(cell, resolution, z)
 
             //get symbol type
-            const type_ = this.type ? this.type(cell) : 'flag'
+            const type_ = this.type ? this.type(cell, resolution, z, viewScale) : 'flag'
 
             //compute center position
-            const xc = cell.x + offset.dx + (type_ === 'agepyramid' ? 0 : r * 0.5)
-            const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : r * 0.5)
+            const xc = cell.x + offset.dx + (type_ === 'agepyramid' ? 0 : resolution * 0.5)
+            const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : resolution * 0.5)
 
             //compute offset angle, when relevant
-            const offAng = this.offsetAngle ? (this.offsetAngle(cell, r, zf) * Math.PI) / 180 : 0
+            const offAng = this.offsetAngle ? (this.offsetAngle(cell, resolution, z, viewScale) * Math.PI) / 180 : 0
 
             if (type_ === 'agepyramid' || type_ === 'radar' || type_ === 'halftone') {
                 //get cell category max value
@@ -117,22 +104,22 @@ export class CompositionStyle extends Style {
                 //cumul
                 let cumul = 0
                 if (type_ === 'agepyramid' && this.agePyramidHeight)
-                    cumul = (r - this.agePyramidHeight(cell, r, zf)) / 2
+                    cumul = (resolution - this.agePyramidHeight(cell, resolution, z, viewScale)) / 2
                 if (type_ === 'radar' || type_ === 'halftone') cumul = Math.PI / 2 + offAng
 
                 //compute the increment, which is the value to increment the cumul for each category
                 const incr =
                     type_ === 'agepyramid'
-                        ? (this.agePyramidHeight ? this.agePyramidHeight(cell, r, zf) : r) / nbCat
+                        ? (this.agePyramidHeight ? this.agePyramidHeight(cell, resolution, z, viewScale) : resolution) / nbCat
                         : type_ === 'radar' || type_ === 'halftone'
-                        ? (2 * Math.PI) / nbCat
-                        : undefined
+                            ? (2 * Math.PI) / nbCat
+                            : undefined
                 if (incr === undefined) throw new Error('Unexpected symbol type:' + type_)
 
                 for (let [column, color] of Object.entries(this.color)) {
                     if (type_ === 'agepyramid') {
                         //set category color
-                        cg.ctx.fillStyle = color
+                        geoCanvas.ctx.fillStyle = color
 
                         //get category value
                         const val = cell[column]
@@ -142,34 +129,34 @@ export class CompositionStyle extends Style {
                         const wG = (sG * val) / maxVal
 
                         //draw bar
-                        cg.ctx.fillRect(xc + (r - wG) / 2, yc + cumul, wG, incr)
+                        geoCanvas.ctx.fillRect(xc + (resolution - wG) / 2, yc + cumul, wG, incr)
 
                         //next height
                         cumul += incr
                     } else if (type_ === 'radar') {
                         //set category color
-                        cg.ctx.fillStyle = color
+                        geoCanvas.ctx.fillStyle = color
 
                         //get categroy value
                         const val = cell[column]
 
                         //compute category radius - in geo
                         /** @type {number} */
-                        //const rG = this.radius(val, r, stat, cellStat, zf)
+                        //const rG = this.radius(val, r, stat, cellStat, z)
                         const rG = (sG / 2) * Math.sqrt(val / maxVal)
 
                         //draw angular sector
-                        cg.ctx.beginPath()
-                        cg.ctx.moveTo(xc, yc)
-                        cg.ctx.arc(xc, yc, rG, cumul - incr, cumul)
-                        cg.ctx.lineTo(xc, yc)
-                        cg.ctx.fill()
+                        geoCanvas.ctx.beginPath()
+                        geoCanvas.ctx.moveTo(xc, yc)
+                        geoCanvas.ctx.arc(xc, yc, rG, cumul - incr, cumul)
+                        geoCanvas.ctx.lineTo(xc, yc)
+                        geoCanvas.ctx.fill()
 
                         //next angular sector
                         cumul += incr
                     } else if (type_ === 'halftone') {
                         //set category color
-                        cg.ctx.fillStyle = color
+                        geoCanvas.ctx.fillStyle = color
 
                         //get categroy value
                         const val = cell[column]
@@ -179,15 +166,15 @@ export class CompositionStyle extends Style {
                         const rG = sG * 0.333 * Math.sqrt(val / maxVal)
 
                         //draw circle
-                        cg.ctx.beginPath()
-                        cg.ctx.arc(
-                            xc + r * 0.25 * Math.cos(cumul),
-                            yc + r * 0.25 * Math.sin(cumul),
+                        geoCanvas.ctx.beginPath()
+                        geoCanvas.ctx.arc(
+                            xc + resolution * 0.25 * Math.cos(cumul),
+                            yc + resolution * 0.25 * Math.sin(cumul),
                             rG,
                             0,
                             2 * Math.PI
                         )
-                        cg.ctx.fill()
+                        geoCanvas.ctx.fill()
 
                         //next angular sector
                         cumul += incr
@@ -207,8 +194,8 @@ export class CompositionStyle extends Style {
 
                 //draw decomposition symbol
                 let cumul = 0
-                const d = r * (1 - sG / r) * 0.5
-                const ori = this.stripesOrientation(cell, r, zf)
+                const d = resolution * (1 - sG / resolution) * 0.5
+                const ori = this.stripesOrientation(cell, resolution, z, viewScale)
 
                 for (let [column, color] of Object.entries(this.color)) {
                     //get share
@@ -216,14 +203,14 @@ export class CompositionStyle extends Style {
                     if (!share || isNaN(share)) continue
 
                     //set color
-                    cg.ctx.fillStyle = color
+                    geoCanvas.ctx.fillStyle = color
 
                     //draw symbol part
                     if (type_ === 'flag') {
                         //draw flag stripe
                         if (ori == 0) {
                             //horizontal
-                            cg.ctx.fillRect(
+                            geoCanvas.ctx.fillRect(
                                 cell.x + d + offset.dx,
                                 cell.y + d + cumul * sG + offset.dy,
                                 sG,
@@ -231,7 +218,7 @@ export class CompositionStyle extends Style {
                             )
                         } else {
                             //vertical
-                            cg.ctx.fillRect(
+                            geoCanvas.ctx.fillRect(
                                 cell.x + d + cumul * sG + offset.dx,
                                 cell.y + d + offset.dy,
                                 share * sG,
@@ -246,11 +233,11 @@ export class CompositionStyle extends Style {
                         const a2 = (cumul + share) * 2 * Math.PI
 
                         //draw
-                        cg.ctx.beginPath()
-                        cg.ctx.moveTo(xc, yc)
-                        cg.ctx.arc(xc, yc, sG * 0.5, a1 + offAng, a2 + offAng)
+                        geoCanvas.ctx.beginPath()
+                        geoCanvas.ctx.moveTo(xc, yc)
+                        geoCanvas.ctx.arc(xc, yc, sG * 0.5, a1 + offAng, a2 + offAng)
                         if (this.pieChartInternalRadiusFactor)
-                            cg.ctx.arc(
+                            geoCanvas.ctx.arc(
                                 xc,
                                 yc,
                                 sG * 0.5 * this.pieChartInternalRadiusFactor,
@@ -258,30 +245,30 @@ export class CompositionStyle extends Style {
                                 a2 + offAng,
                                 true
                             )
-                        cg.ctx.closePath()
-                        cg.ctx.fill()
+                        geoCanvas.ctx.closePath()
+                        geoCanvas.ctx.fill()
                     } else if (type_ === 'ring') {
                         //draw ring
-                        cg.ctx.beginPath()
-                        cg.ctx.arc(xc, yc, Math.sqrt(1 - cumul) * sG * 0.5, 0, 2 * Math.PI)
-                        cg.ctx.fill()
+                        geoCanvas.ctx.beginPath()
+                        geoCanvas.ctx.arc(xc, yc, Math.sqrt(1 - cumul) * sG * 0.5, 0, 2 * Math.PI)
+                        geoCanvas.ctx.fill()
                     } else if (type_ === 'segment') {
                         //draw segment sections
-                        const wG = (sG * sG) / r
+                        const wG = (sG * sG) / resolution
                         if (ori == 0) {
                             //horizontal
-                            cg.ctx.fillRect(
+                            geoCanvas.ctx.fillRect(
                                 cell.x + offset.dx,
-                                cell.y + (r - wG) / 2 + cumul * wG + offset.dy,
-                                r,
+                                cell.y + (resolution - wG) / 2 + cumul * wG + offset.dy,
+                                resolution,
                                 share * wG
                             )
                         } else {
                             //vertical
-                            cg.ctx.fillRect(
-                                cell.x + cumul * r + offset.dx,
-                                cell.y + (r - wG) / 2 + offset.dy,
-                                share * r,
+                            geoCanvas.ctx.fillRect(
+                                cell.x + cumul * resolution + offset.dx,
+                                cell.y + (resolution - wG) / 2 + offset.dy,
+                                share * resolution,
                                 wG
                             )
                         }
@@ -295,6 +282,6 @@ export class CompositionStyle extends Style {
         }
 
         //update legends
-        this.updateLegends({ style: this, r: r, zf: zf, sSize: stat })
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
     }
 }

package/src/style/ContourStyle.js

@@ -13,42 +13,8 @@ export class ContourStyle extends SideStyle {
     /** @param {object} opts */
     constructor(opts) {
         super(opts)
-        opts = opts || {}
+        //opts = opts || {}
 
-        /** @type {number} */
-        //opts.interval = opts.interval || 100
-
-        /** @type {Array.<number>} */
-        opts.breaks = opts.breaks || [100, 1000, 10000, 100000, 1000000]
-
-        /** @type {function(Side,number,number):string} */
-        opts.width = opts.width || (() => 1) //(s, r, zf) => ...
-
-        /** @type {function(Side,number,number):string} */
-        opts.color = opts.color || (() => '#E7A935') //(s, r, zf) => ...
-
-        //override method for contour drawing
-
-        const getClass = function (v) {
-            if (v == undefined) return 0
-            for (let i = 0; i < opts.breaks.length; i++) if (v < opts.breaks[i]) return i
-            return opts.breaks.length
-        }
-
-        this.value = (v1, v2, r, s, zf) => {
-            //if (!v1 || !v2) return 0
-            return Math.abs(getClass(v2) - getClass(v1))
-
-            //check if v1 - v2 cross a contour line
-            //const r1 = Math.floor(v1 / opts.interval);
-            //const r2 = Math.floor(v2 / opts.interval);
-            //return Math.abs(r2 - r1);
-        }
-
-        //same color for all
-        this.color = (side, r, s, zf) => (side.value ? opts.color(side, r, zf) : undefined)
-
-        //width: multiple of
-        this.width = (side, r, s, zf) => side.value * zf * opts.width(side, r, zf)
+        //TODO
     }
 }