gridviz 3.0.27 → 3.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.27",
+    "version": "3.0.28",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/index.js

@@ -23,6 +23,7 @@ export { SegmentStyle } from './style/SegmentStyle.js'
 export { TextStyle } from './style/TextStyle.js'
 export { PillarStyle } from './style/PillarStyle.js'
 export { SideStyle } from './style/SideStyle.js'
+export { ShadingStyle } from './style/ShadingStyle.js'
 //export { ContourStyle } from './style/ContourStyle.js'
 export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'

package/src/layer/GridLayer.js

@@ -13,7 +13,7 @@ export class GridLayer extends Layer {
     /**
      * @param {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} dataset The dataset to show.
      * @param {Array.<import("../core/Style").Style>} styles The styles, ordered in drawing order.
-     * @param {{visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minPixelsPerCell?:number,cellInfoHTML?:function(import("../core/Dataset").Cell):string}} opts
+     * @param {{visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minPixelsPerCell?:number,cellInfoHTML?:'none'|function(import("../core/Dataset").Cell):string}} opts
      */
     constructor(dataset, styles, opts = {}) {
         super(opts)
@@ -38,7 +38,8 @@ export class GridLayer extends Layer {
         /**
          * The function returning cell information as HTML.
          * This is typically used for tooltip information.
-         * @type {function(import("../core/Dataset").Cell, number):string} */
+         * Set to 'none' to disable cell info.
+         * @type {'none'|function(import("../core/Dataset").Cell, number):string} */
         this.cellInfoHTML = opts.cellInfoHTML || GridLayer.defaultCellInfoHTML
     }
 

package/src/style/ShadingStyle.js

@@ -0,0 +1,61 @@
+//@ts-check
+'use strict'
+
+import { SideStyle } from './SideStyle.js'
+import { max } from 'd3-array'
+import { exponentialScale } from '../utils/stretching.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class ShadingStyle extends SideStyle {
+
+    /** @param {object} opts
+     * @param {string} opts.elevation
+     * @param {boolean} opts.diamond
+     * @param {function} opts.scale
+     * @param {function} opts.width
+     * @param {number} opts.reliefDirection
+     * @param {string} opts.colorTopLeft
+     * @param {string} opts.colorBottomRight
+     */
+    constructor(opts = {}) {
+        super(opts)
+
+        /** The cell elevation field name
+         * @type {string} */
+        const elevation = opts.elevation
+
+        // compute side value as elevation difference and attach to side
+        const sideValue = (side) => {
+            if (!side.c1) side.v = 0
+            else if (!side.c2) side.v = 0
+            else if (!side.c1[elevation]) side.v = 0
+            else if (!side.c2[elevation]) side.v = 0
+            else side.v = +side.c2[elevation] - side.c1[elevation]
+            return side.v
+        }
+
+        // compute maximum side value for normalization
+        this.viewScale = sides => max(sides, s => sideValue(s))
+
+        const colorTopLeft = opts.colorTopLeft || '255,255,255'
+        const colorBottomRight = opts.colorBottomRight || '0,0,0'
+        const scale = opts.scale || (t=>t)
+
+        this.color = (side, resolution, z, max) => {
+            if (side.v == 0) return
+            let coeff = Math.abs(side.v / max)
+            coeff = scale(coeff)
+            if ((side.v < 0 && side.or === 'h') || (side.v > 0 && side.or === 'v'))
+                return 'rgba(' + colorTopLeft + ',' + coeff + ')'
+            return 'rgba(' + colorBottomRight + ',' + coeff + ')'
+        }
+
+        this.width = (_, r, z) => opts.width | Math.min(2 * z, r / 3)
+        this.diamond = opts.diamond
+
+    }
+
+}