gridviz 2.1.11 → 2.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/gridviz.js +30 -3
- package/dist/gridviz.min.js +1 -1
- package/package.json +1 -1
- package/src/style/ShapeColorSizeStyle.js +28 -2
package/package.json
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
'use strict'
|
|
3
3
|
|
|
4
4
|
import { Style } from '../Style.js'
|
|
5
|
+
import { color } from 'd3-color'
|
|
5
6
|
|
|
6
7
|
/**
|
|
7
8
|
* A very generic style that shows grid cells with specific color, size and shape.
|
|
@@ -34,6 +35,14 @@ export class ShapeColorSizeStyle extends Style {
|
|
|
34
35
|
/** A function returning the shape of a cell.
|
|
35
36
|
* @type {function(import("../Dataset").Cell):import("../Style").Shape} */
|
|
36
37
|
this.shape = opts.shape || (() => 'square')
|
|
38
|
+
|
|
39
|
+
/** The name of the column/attribute of the tabular data where to retrieve the variable for color alpha.
|
|
40
|
+
* @type {string} */
|
|
41
|
+
this.alphaCol = opts.alphaCol
|
|
42
|
+
|
|
43
|
+
/** A function returning the color alpha of the cell.
|
|
44
|
+
* @type {function(number,number,import("../Style").Stat|undefined,number):number} */
|
|
45
|
+
this.alphaF = opts.alphaF
|
|
37
46
|
}
|
|
38
47
|
|
|
39
48
|
/**
|
|
@@ -64,6 +73,12 @@ export class ShapeColorSizeStyle extends Style {
|
|
|
64
73
|
statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
|
|
65
74
|
}
|
|
66
75
|
|
|
76
|
+
let statAlpha
|
|
77
|
+
if (this.alphaCol) {
|
|
78
|
+
//compute color alpha variable statistics
|
|
79
|
+
statAlpha = Style.getStatistics(cells, (c) => c[this.alphaCol], true)
|
|
80
|
+
}
|
|
81
|
+
|
|
67
82
|
//draw with HTML canvas
|
|
68
83
|
//in geo coordinates
|
|
69
84
|
cg.setCanvasTransform()
|
|
@@ -71,9 +86,19 @@ export class ShapeColorSizeStyle extends Style {
|
|
|
71
86
|
const r2 = r * 0.5
|
|
72
87
|
for (let cell of cells) {
|
|
73
88
|
//color
|
|
74
|
-
|
|
89
|
+
let col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
|
|
75
90
|
if (!col || col === 'none') continue
|
|
76
|
-
|
|
91
|
+
|
|
92
|
+
//alpha
|
|
93
|
+
if (this.alphaCol && this.alphaF) {
|
|
94
|
+
//get alpha
|
|
95
|
+
const alpha = this.alphaF(cell[this.alphaCol], r, statAlpha, zf)
|
|
96
|
+
if (alpha == 0) continue
|
|
97
|
+
//apply alpha to color col
|
|
98
|
+
const col_ = color(col);
|
|
99
|
+
if (col_) col = `rgba(${col_.r}, ${col_.g}, ${col_.b}, ${alpha})`;
|
|
100
|
+
else console.warn("Could not decode color " + col + " in ShapeColorSizeStyle")
|
|
101
|
+
}
|
|
77
102
|
|
|
78
103
|
//shape
|
|
79
104
|
const shape = this.shape ? this.shape(cell) : 'square'
|
|
@@ -88,6 +113,7 @@ export class ShapeColorSizeStyle extends Style {
|
|
|
88
113
|
//get offset
|
|
89
114
|
const offset = this.offset(cell, r, zf)
|
|
90
115
|
|
|
116
|
+
cg.ctx.fillStyle = col
|
|
91
117
|
if (shape === 'square') {
|
|
92
118
|
//draw square
|
|
93
119
|
const d = r * (1 - sG / r) * 0.5
|