New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
visual-heatmap
Advanced tools
visual-heatmap - npm Package Compare versions
Comparing version 1.1.0 to 2.0.0
| /*! | ||
| * Heatmap v1.0.5 | ||
| * Heatmap v1.1.0 | ||
| * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) | ||
@@ -13,25 +13,59 @@ * @license BSD-3-Clause | ||
| let pLen = 0; | ||
| let dataMinValue = null; | ||
| let dataMaxValue = null; | ||
| let maxTextureSize = null; | ||
| let imgWidth; | ||
| let imgHeight; | ||
| let hearmapExData; | ||
| let imageConfig; | ||
| let configMin = 0; | ||
| let configMax = 0; | ||
| function isNullUndefined (val) { | ||
| return val === null || val === undefined; | ||
| } | ||
| function isNotNumber (val) { | ||
| return typeof val !== 'number'; | ||
| } | ||
| function isSortedAscending (arr) { | ||
| for (let i = 0; i < arr.length - 1; i++) { | ||
| if (arr[i + 1].offset - arr[i].offset < 0) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| function gradientMapper (grad) { | ||
| const arr = []; | ||
| if (grad.constructor !== Array) { | ||
| throw new Error('Invalid gradient: Wrong Gradient type, expected Array'); | ||
| } | ||
| if (grad.length < 2) { | ||
| throw new Error('Invalid gradient: 2 or more values expected'); | ||
| } | ||
| if (!isSortedAscending(grad)) { | ||
| throw new Error('Invalid gradient: Gradient is not sorted'); | ||
| } | ||
| const gradLength = grad.length; | ||
| const offSetsArray = []; | ||
| const values = new Float32Array(gradLength * 4); | ||
| const offsets = new Array(gradLength); | ||
| grad.forEach(function (d) { | ||
| arr.push(d.color[0] / 255); | ||
| arr.push(d.color[1] / 255); | ||
| arr.push(d.color[2] / 255); | ||
| arr.push(d.color[3] === undefined ? 1.0 : d.color[3]); | ||
| offSetsArray.push(d.offset); | ||
| grad.forEach(function (d, i) { | ||
| const baseIndex = i * 4; | ||
| values[baseIndex] = d.color[0] / 255; | ||
| values[baseIndex + 1] = d.color[1] / 255; | ||
| values[baseIndex + 2] = d.color[2] / 255; | ||
| values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0; | ||
| offsets[i] = d.offset; | ||
| }); | ||
| return { | ||
| value: new Float32Array(arr), | ||
| value: values, | ||
| length: gradLength, | ||
| offset: offSetsArray | ||
| offset: offsets | ||
| }; | ||
@@ -47,4 +81,4 @@ } | ||
| var lastError = ctx.getShaderInfoLog(shader); | ||
| console.error("*** Error compiling shader '" + shader + "':" + lastError); | ||
| ctx.deleteShader(shader); | ||
| throw new Error("*** Error compiling shader '" + shader + "':" + lastError); | ||
| } | ||
@@ -67,5 +101,4 @@ return shader; | ||
| var lastError = ctx.getProgramInfoLog(program); | ||
| console.error('Error in program linking:' + lastError); | ||
| ctx.deleteProgram(program); | ||
| return null; | ||
| throw new Error('Error in program linking:' + lastError); | ||
| } else { | ||
@@ -199,64 +232,107 @@ return program; | ||
| function Chart (context, config) { | ||
| let res; | ||
| if (typeof context === 'string') { | ||
| res = document.querySelector(context); | ||
| } else if (context instanceof Element) { | ||
| res = context; | ||
| } else { | ||
| throw new Error('Context must be either a string or an Element'); | ||
| } | ||
| const height = res.clientHeight; | ||
| const width = res.clientWidth; | ||
| const layer = document.createElement('canvas'); | ||
| const ctx = layer.getContext('webgl2', { | ||
| premultipliedAlpha: false, | ||
| depth: false, | ||
| antialias: true, | ||
| alpha: true, | ||
| preserveDrawingBuffer: false | ||
| }); | ||
| ratio = getPixlRatio(ctx); | ||
| ctx.clearColor(0, 0, 0, 0); | ||
| ctx.enable(ctx.BLEND); | ||
| ctx.blendEquation(ctx.FUNC_ADD); | ||
| ctx.blendFunc(ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA); | ||
| ctx.depthMask(true); | ||
| layer.setAttribute('height', height * ratio); | ||
| layer.setAttribute('width', width * ratio); | ||
| layer.style.height = `${height}px`; | ||
| layer.style.width = `${width}px`; | ||
| layer.style.position = 'absolute'; | ||
| res.appendChild(layer); | ||
| try { | ||
| let res; | ||
| if (typeof context === 'string') { | ||
| res = document.querySelector(context); | ||
| } else if (context instanceof Element) { | ||
| res = context; | ||
| } else { | ||
| throw new Error('Context must be either a string or an Element'); | ||
| } | ||
| const height = res.clientHeight; | ||
| const width = res.clientWidth; | ||
| const layer = document.createElement('canvas'); | ||
| const ctx = layer.getContext('webgl2', { | ||
| premultipliedAlpha: false, | ||
| depth: false, | ||
| antialias: true, | ||
| alpha: true, | ||
| preserveDrawingBuffer: false | ||
| }); | ||
| ratio = getPixlRatio(ctx); | ||
| ctx.clearColor(0, 0, 0, 0); | ||
| ctx.enable(ctx.BLEND); | ||
| ctx.blendEquation(ctx.FUNC_ADD); | ||
| ctx.blendFunc(ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA); | ||
| ctx.depthMask(true); | ||
| layer.setAttribute('height', height * ratio); | ||
| layer.setAttribute('width', width * ratio); | ||
| layer.style.height = `${height}px`; | ||
| layer.style.width = `${width}px`; | ||
| layer.style.position = 'absolute'; | ||
| res.appendChild(layer); | ||
| this.gradient = gradientMapper(config.gradient); | ||
| this.ctx = ctx; | ||
| this.width = width; | ||
| this.height = height; | ||
| this.layer = layer; | ||
| this.dom = res; | ||
| this.gradShadOP = createGradiantShader(this.ctx); | ||
| this.colorShadOP = createColorShader(this.ctx); | ||
| this.imageShaOP = createImageShader(this.ctx); | ||
| this.fbTexObj = ctx.createTexture(); | ||
| this.fbo = ctx.createFramebuffer(); | ||
| this.ctx = ctx; | ||
| this.width = width; | ||
| this.height = height; | ||
| this.layer = layer; | ||
| this.dom = res; | ||
| this.gradShadOP = createGradiantShader(this.ctx); | ||
| this.colorShadOP = createColorShader(this.ctx); | ||
| this.imageShaOP = createImageShader(this.ctx); | ||
| this.fbTexObj = ctx.createTexture(); | ||
| this.fbo = ctx.createFramebuffer(); | ||
| this.size = config.size ? config.size : 20.0; | ||
| dataMaxValue = config.max ? config.max : null; | ||
| dataMinValue = config.min ? config.min : null; | ||
| this.intensity = config.intensity ? config.intensity : 1.0; | ||
| this.translate = (config.translate && config.translate.length === 2) ? config.translate : [0, 0]; | ||
| this.zoom = (config.zoom ? config.zoom : 1.0); | ||
| this.angle = (config.rotationAngle ? config.rotationAngle : 0.0); | ||
| this.opacity = config.opacity ? config.opacity : 1.0; | ||
| this.ratio = ratio; | ||
| if (!isNullUndefined(config.size)) { | ||
| this.setSize(config.size); | ||
| } else { | ||
| this.size = 20.0; | ||
| } | ||
| if (config.backgroundImage && config.backgroundImage.url) { | ||
| this.setBackgroundImage(config.backgroundImage); | ||
| } | ||
| if (!isNullUndefined(config.max)) { | ||
| this.setMax(config.max); | ||
| } else { | ||
| configMax = null; | ||
| } | ||
| this.rawData = []; | ||
| if (!isNullUndefined(config.min)) { | ||
| this.setMin(config.min); | ||
| } else { | ||
| configMin = null; | ||
| } | ||
| ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height); | ||
| if (!isNullUndefined(config.intensity)) { | ||
| this.setIntensity(config.intensity); | ||
| } else { | ||
| this.intensity = 1.0; | ||
| } | ||
| this.render(this.exData || {}); | ||
| if (!isNullUndefined(config.translate)) { | ||
| this.setTranslate(config.translate); | ||
| } else { | ||
| this.translate = [0, 0]; | ||
| } | ||
| if (!isNullUndefined(config.zoom)) { | ||
| this.setZoom(config.zoom); | ||
| } else { | ||
| this.zoom = 1.0; | ||
| } | ||
| if (!isNullUndefined(config.angle)) { | ||
| this.setRotationAngle(config.angle); | ||
| } else { | ||
| this.angle = 0.0; | ||
| } | ||
| if (!isNullUndefined(config.opacity)) { | ||
| this.setOpacity(config.opacity); | ||
| } else { | ||
| this.opacity = 1.0; | ||
| } | ||
| this.gradient = gradientMapper(config.gradient); | ||
| this.ratio = ratio; | ||
| if (config.backgroundImage && config.backgroundImage.url) { | ||
| this.setBackgroundImage(config.backgroundImage); | ||
| } | ||
| this.heatmapData = []; | ||
| this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| } | ||
@@ -274,5 +350,4 @@ | ||
| this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); | ||
| console.log('resize'); | ||
| /* Perform update */ | ||
| this.render(this.exData); | ||
| this.render(hearmapExData); | ||
| }; | ||
@@ -285,39 +360,86 @@ | ||
| Chart.prototype.setMax = function (max) { | ||
| dataMaxValue = max; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(max) || isNotNumber(max)) { | ||
| throw new Error('Invalid max: Expected Number'); | ||
| } | ||
| configMax = max; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setMin = function (min) { | ||
| dataMinValue = min; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(min) || isNotNumber(min)) { | ||
| throw new Error('Invalid min: Expected Number'); | ||
| } | ||
| configMin = min; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setGradient = function (gradient) { | ||
| this.gradient = gradientMapper(gradient); | ||
| return this; | ||
| }; | ||
| Chart.prototype.setTranslate = function (translate) { | ||
| this.translate = (translate.length === 2) ? translate : [0, 0]; | ||
| this.render(this.exData); | ||
| if (translate.constructor !== Array) { | ||
| throw new Error('Invalid Translate: Translate has to be of Array type'); | ||
| } | ||
| if (translate.length !== 2) { | ||
| throw new Error('Translate has to be of length 2'); | ||
| } | ||
| this.translate = translate; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setZoom = function (zoom) { | ||
| this.zoom = zoom !== undefined ? zoom : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(zoom) || isNotNumber(zoom)) { | ||
| throw new Error('Invalid zoom: Expected Number'); | ||
| } | ||
| this.zoom = zoom; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setRotationAngle = function (angle) { | ||
| this.angle = angle !== undefined ? angle : 0.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(angle) || isNotNumber(angle)) { | ||
| throw new Error('Invalid Angle: Expected Number'); | ||
| } | ||
| this.angle = angle; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setSize = function (size) { | ||
| this.size = size !== undefined ? size : 20.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(size) || isNotNumber(size)) { | ||
| throw new Error('Invalid Size: Expected Number'); | ||
| } | ||
| this.size = size; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setIntensity = function (intensity) { | ||
| this.intensity = intensity !== undefined ? intensity : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(intensity) || isNotNumber(intensity)) { | ||
| this.intensity = 1.0; // applying default intensity | ||
| throw new Error('Invalid Intensity: Expected Number'); | ||
| } | ||
| if (intensity > 1 || intensity < 0) { | ||
| this.intensity = intensity > 1 ? 1 : 0; // Setting bound value | ||
| throw new Error('Invalid Intensity value ' + intensity); | ||
| } | ||
| this.intensity = intensity; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setOpacity = function (opacity) { | ||
| this.opacity = opacity !== undefined ? opacity : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(opacity) || isNotNumber(opacity)) { | ||
| throw new Error('Invalid Opacity: Expected Number'); | ||
| } | ||
| if (opacity > 1 || opacity < 0) { | ||
| throw new Error('Invalid Opacity value ' + opacity); | ||
| } | ||
| this.opacity = opacity; | ||
| return this; | ||
| }; | ||
@@ -334,3 +456,3 @@ | ||
| this.type = 'TEXTURE_2D'; | ||
| this.imageConfig = null; | ||
| imageConfig = null; | ||
@@ -363,3 +485,3 @@ imgWidth = config.width || this.width; | ||
| self.imageConfig = { | ||
| imageConfig = { | ||
| x: config.x || 0, | ||
@@ -372,8 +494,15 @@ y: config.y || 0, | ||
| self.render(self.exData || {}); | ||
| self.render(); | ||
| }, function onErrorCallBack (error) { | ||
| console.error('Image Load Error', error); | ||
| throw new Error('Image Load Error', error); | ||
| }); | ||
| return this; | ||
| }; | ||
| Chart.prototype.clearData = function () { | ||
| this.heatmapData = []; | ||
| hearmapExData = {}; | ||
| this.render(); | ||
| }; | ||
| Chart.prototype.addData = function (data, transIntactFlag) { | ||
@@ -385,13 +514,22 @@ const self = this; | ||
| } | ||
| this.rawData.push(data[i]); | ||
| this.heatmapData.push(data[i]); | ||
| } | ||
| this.renderData(this.rawData); | ||
| this.renderData(this.heatmapData); | ||
| return this; | ||
| }; | ||
| Chart.prototype.renderData = function (data) { | ||
| const exData = extractData(data); | ||
| this.rawData = data; | ||
| this.render(exData); | ||
| if (data.constructor !== Array) { | ||
| throw new Error('Expected Array type'); | ||
| } | ||
| hearmapExData = extractData(data); | ||
| this.heatmapData = data; | ||
| this.render(); | ||
| return this; | ||
| }; | ||
| Chart.prototype.render = function () { | ||
| renderExec.call(this); | ||
| }; | ||
| Chart.prototype.projection = function (data) { | ||
@@ -431,5 +569,4 @@ // Pre-compute constants and repetitive calculations | ||
| Chart.prototype.render = function (exData) { | ||
| function renderExec () { | ||
| const ctx = this.ctx; | ||
| this.exData = exData; | ||
@@ -447,18 +584,19 @@ ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | ||
| renderHeatGrad.call(this, ctx, exData); | ||
| if (hearmapExData) { | ||
| renderHeatGrad.call(this, ctx, hearmapExData); | ||
| } | ||
| ctx.bindFramebuffer(ctx.FRAMEBUFFER, null); | ||
| if (this.imageConfig) { | ||
| renderImage.call(this, ctx); | ||
| if (imageConfig) { | ||
| renderImage.call(this, ctx, imageConfig); | ||
| } | ||
| renderColorGradiant.call(this, ctx); | ||
| }; | ||
| } | ||
| function renderHeatGrad (ctx, exData) { | ||
| ctx.useProgram(this.gradShadOP.program); | ||
| this.min = dataMinValue !== null ? dataMinValue : exData?.minMax?.min ?? 0; | ||
| this.max = dataMaxValue !== null ? dataMaxValue : exData?.minMax?.max ?? 0; | ||
| this.min = configMin !== null ? configMin : exData?.minMax?.min ?? 0; | ||
| this.max = configMax !== null ? configMax : exData?.minMax?.max ?? 0; | ||
| this.gradShadOP.attr[0].data = exData.posVec || []; | ||
| this.gradShadOP.attr[1].data = exData.rVec || []; | ||
| console.log(this.width, this.height); | ||
| ctx.uniform2fv(this.gradShadOP.uniform.u_resolution, new Float32Array([this.width * this.ratio, this.height * this.ratio])); | ||
@@ -481,7 +619,7 @@ ctx.uniform2fv(this.gradShadOP.uniform.u_translate, new Float32Array([this.translate[0], this.translate[1]])); | ||
| ctx.drawArrays(ctx.POINTS, 0, (this.exData.posVec || []).length / 2); | ||
| ctx.drawArrays(ctx.POINTS, 0, (exData.posVec || []).length / 2); | ||
| } | ||
| function renderImage (ctx) { | ||
| const { x = 0, y = 0, width = 0, height = 0 } = this.imageConfig; | ||
| function renderImage (ctx, imageConfig) { | ||
| const { x = 0, y = 0, width = 0, height = 0 } = imageConfig; | ||
@@ -556,2 +694,5 @@ ctx.useProgram(this.imageShaOP.program); | ||
| data.x = posX; | ||
| data.y = posY; | ||
| return { x: posX, y: posY }; | ||
@@ -586,53 +727,47 @@ } | ||
| vertex: `#version 300 es | ||
| in vec2 a_position; | ||
| in float a_intensity; | ||
| uniform float u_size; | ||
| uniform vec2 u_resolution; | ||
| uniform vec2 u_translate; | ||
| uniform float u_zoom; | ||
| uniform float u_angle; | ||
| uniform float u_density; | ||
| out float v_i; | ||
| in vec2 a_position; | ||
| in float a_intensity; | ||
| uniform float u_size; | ||
| uniform vec2 u_resolution; | ||
| uniform vec2 u_translate; | ||
| uniform float u_zoom; | ||
| uniform float u_angle; | ||
| uniform float u_density; | ||
| out float v_i; | ||
| vec2 rotation(vec2 v, float a, float aspect) { | ||
| float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); | ||
| mat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0); | ||
| mat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0); | ||
| return scaleMatInv * m * scaleMat * v; | ||
| } | ||
| vec2 rotation(vec2 v, float a, float aspect) { | ||
| float s = sin(a); float c = cos(a); mat2 rotationMat = mat2(c, -s, s, c); | ||
| mat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0); | ||
| mat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0); | ||
| return scaleMatInv * rotationMat * scaleMat * v; | ||
| } | ||
| void main() { | ||
| vec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution); | ||
| vec2 zeroToTwo = zeroToOne * 2.0 - 1.0; | ||
| float zoomFactor = u_zoom; | ||
| if (zoomFactor == 0.0) { | ||
| zoomFactor = 0.1; | ||
| } | ||
| zeroToTwo = zeroToTwo / zoomFactor; | ||
| if (u_angle != 0.0) { | ||
| zeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y); | ||
| } | ||
| gl_Position = vec4(zeroToTwo , 0, 1); | ||
| gl_PointSize = u_size * u_density; | ||
| v_i = a_intensity; | ||
| }`, | ||
| void main() { | ||
| vec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution); | ||
| vec2 zeroToTwo = zeroToOne * 2.0 - 1.0; | ||
| float zoomFactor = max(u_zoom, 0.1); | ||
| zeroToTwo = zeroToTwo / zoomFactor; | ||
| if (u_angle != 0.0) { | ||
| zeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y); | ||
| } | ||
| gl_Position = vec4(zeroToTwo , 0, 1); | ||
| gl_PointSize = u_size * u_density; | ||
| v_i = a_intensity; | ||
| }`, | ||
| fragment: `#version 300 es | ||
| precision mediump float; | ||
| uniform float u_max; | ||
| uniform float u_min; | ||
| uniform float u_intensity; | ||
| in float v_i; | ||
| out vec4 fragColor; | ||
| void main() { | ||
| float r = 0.0; | ||
| vec2 cxy = 2.0 * gl_PointCoord - 1.0; | ||
| r = dot(cxy, cxy); | ||
| float deno = u_max - u_min; | ||
| if (deno <= 0.0) { | ||
| deno = 1.0; | ||
| } | ||
| if(r <= 1.0) { | ||
| fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); | ||
| } | ||
| }` | ||
| precision mediump float; | ||
| uniform float u_max; | ||
| uniform float u_min; | ||
| uniform float u_intensity; | ||
| in float v_i; | ||
| out vec4 fragColor; | ||
| void main() { | ||
| float r = 0.0; | ||
| vec2 cxy = 2.0 * gl_PointCoord - 1.0; | ||
| r = dot(cxy, cxy); | ||
| float deno = max(u_max - u_min, 1.0); | ||
| if(r <= 1.0) { | ||
| fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); | ||
| } | ||
| }` | ||
| }; | ||
@@ -639,0 +774,0 @@ |
| /*! | ||
| * Heatmap v1.0.5 | ||
| * Heatmap v1.1.0 | ||
| * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) | ||
| * @license BSD-3-Clause | ||
| */ | ||
| function t(t,r={}){let n,a,s,u,f,h=[],c=[],l=0,m=null,_=null,d=null;function g(t,e,o){var i=t.createShader(t[e]);if(t.shaderSource(i,o),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){var r=t.getShaderInfoLog(i);console.error("*** Error compiling shader '"+i+"':"+r),t.deleteShader(i)}return i}function T(t,e){var o=g(t,"VERTEX_SHADER",e.vertex),i=g(t,"FRAGMENT_SHADER",e.fragment),r=t.createProgram();if(t.attachShader(r,o),t.attachShader(r,i),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS))return r;var n=t.getProgramInfoLog(r);return console.error("Error in program linking:"+n),t.deleteProgram(r),null}function x(t,r){let a;if("string"==typeof t)a=document.querySelector(t);else{if(!(t instanceof Element))throw new Error("Context must be either a string or an Element");a=t}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.gradient=function(t){const e=[],o=t.length,i=[];return t.forEach((function(t){e.push(t.color[0]/255),e.push(t.color[1]/255),e.push(t.color[2]/255),e.push(void 0===t.color[3]?1:t.color[3]),i.push(t.offset)})),{value:new Float32Array(e),length:o,offset:i}}(r.gradient),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(t){var o=T(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:1,attribute:t.getAttribLocation(o,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:t.getUniformLocation(o,"u_resolution"),u_max:t.getUniformLocation(o,"u_max"),u_min:t.getUniformLocation(o,"u_min"),u_size:t.getUniformLocation(o,"u_size"),u_intensity:t.getUniformLocation(o,"u_intensity"),u_translate:t.getUniformLocation(o,"u_translate"),u_zoom:t.getUniformLocation(o,"u_zoom"),u_angle:t.getUniformLocation(o,"u_angle"),u_density:t.getUniformLocation(o,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var e=T(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(e,"u_framebuffer"),u_colorArr:t.getUniformLocation(e,"u_colorArr"),u_colorCount:t.getUniformLocation(e,"u_colorCount"),u_opacity:t.getUniformLocation(e,"u_opacity"),u_offset:t.getUniformLocation(e,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=T(t,i);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),this.size=r.size?r.size:20,_=r.max?r.max:null,m=r.min?r.min:null,this.intensity=r.intensity?r.intensity:1,this.translate=r.translate&&2===r.translate.length?r.translate:[0,0],this.zoom=r.zoom?r.zoom:1,this.angle=r.rotationAngle?r.rotationAngle:0,this.opacity=r.opacity?r.opacity:1,this.ratio=n,r.backgroundImage&&r.backgroundImage.url&&this.setBackgroundImage(r.backgroundImage),this.rawData=[],h.viewport(0,0,h.canvas.width,h.canvas.height),this.render(this.exData||{})}function p(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==m?m:e?.minMax?.min??0,this.max=null!==_?_:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],console.log(this.width,this.height),t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function y(t){const{x:e=0,y:o=0,width:i=0,height:r=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([e,o,e+i,o,e,o+r,e,o+r,e+i,o,e+i,o+r]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function v(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function E(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.angle;let n=(t.x-o)/o*e,a=(t.y-i)/i*e;if(0!==r){const t=Math.cos(r),e=Math.sin(r),o=t*n-e*a;a=e*n+t*a,n=o}return n=n*o+o-this.translate[0],a=a*i+i-this.translate[1],{x:n,y:a}}return x.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height),console.log("resize"),this.render(this.exData)},x.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},x.prototype.setMax=function(t){_=t,this.render(this.exData)},x.prototype.setMin=function(t){m=t,this.render(this.exData)},x.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},x.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},x.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},x.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},x.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setBackgroundImage=function(t){const e=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,o){const i=new Image;i.crossOrigin="anonymous",i.onload=e,i.onerror=o,i.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),e.imageConfig={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render(e.exData||{})}),(function(t){console.error("Image Load Error",t)})))},x.prototype.addData=function(t,e){const o=this;for(let i=0;i<t.length;i++)e&&E.call(o,t[i]),this.rawData.push(t[i]);this.renderData(this.rawData)},x.prototype.renderData=function(t){const e=function(t){const e=t.length;l!==e&&(a=new ArrayBuffer(8*e),h=new Float32Array(a),s=new ArrayBuffer(4*e),c=new Float32Array(s),l=e);const o={min:1/0,max:-1/0};for(let i=0;i<e;i++)h[2*i]=t[i].x,h[2*i+1]=t[i].y,c[i]=t[i].value,o.min>t[i].value&&(o.min=t[i].value),o.max<t[i].value&&(o.max=t[i].value);return{posVec:h,rVec:c,minMax:o}}(t);this.rawData=t,this.render(e)},x.prototype.projection=function(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.translate[0],n=this.translate[1],a=this.angle,s=this.width/this.height;let u=(t.x+r-o)/(o*e),f=(t.y+n-i)/(i*e);if(u*=s,0!==a){const t=Math.cos(-a),e=Math.sin(-a),o=t*u-e*f;f=e*u+t*f,u=o}return u*=1/s,u=u*o+o,f=f*i+i,{x:u,y:f}},x.prototype.render=function(t){const e=this.ctx;this.exData=t,e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.bindTexture(e.TEXTURE_2D,this.fbTexObj),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.width*this.ratio,this.height*this.ratio,0,e.RGBA,e.UNSIGNED_BYTE,null),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.bindFramebuffer(e.FRAMEBUFFER,this.fbo),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,this.fbTexObj,0),p.call(this,e,t),e.bindFramebuffer(e.FRAMEBUFFER,null),this.imageConfig&&y.call(this,e),v.call(this,e)},new x(t,r)}var e={vertex:"#version 300 es\n\tin vec2 a_position;\n\tin float a_intensity;\n\tuniform float u_size;\n\tuniform vec2 u_resolution;\n\tuniform vec2 u_translate; \n\tuniform float u_zoom; \n\tuniform float u_angle; \n\tuniform float u_density;\n\tout float v_i;\n\n\tvec2 rotation(vec2 v, float a, float aspect) {\n\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); \n\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\treturn scaleMatInv * m * scaleMat * v;\n\t}\n\n\tvoid main() {\n\t\tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\tfloat zoomFactor = u_zoom;\n\t\tif (zoomFactor == 0.0) {\n\t\t\tzoomFactor = 0.1;\n\t\t}\n\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\tif (u_angle != 0.0) {\n\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y);\n\t\t}\n\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\tgl_PointSize = u_size * u_density;\n\t\tv_i = a_intensity;\n\t}",fragment:"#version 300 es\n\tprecision mediump float;\n\tuniform float u_max;\n\tuniform float u_min;\n\tuniform float u_intensity;\n\tin float v_i;\n\tout vec4 fragColor;\n\tvoid main() {\n\t\tfloat r = 0.0; \n\t\tvec2 cxy = 2.0 * gl_PointCoord - 1.0;\n\t\tr = dot(cxy, cxy);\n\t\tfloat deno = u_max - u_min;\n\t\tif (deno <= 0.0) {\n\t\t\tdeno = 1.0;\n\t\t}\n\t\tif(r <= 1.0) {\n\t\t\tfragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r)));\n\t\t}\n\t}"},o={vertex:"#version 300 es\n\t\t\t\tprecision highp float;\n\t\t\t\tin vec2 a_texCoord;\n\t\t\t\tout vec2 v_texCoord;\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 clipSpace = a_texCoord * 2.0 - 1.0;\n\t\t\t\t\tgl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\t\t\t\t\tv_texCoord = a_texCoord;\n\t\t\t\t}\n\t",fragment:"#version 300 es\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t\tin vec2 v_texCoord;\n\t\t\t\t\tout vec4 fragColor;\n\t\t\t\t\tuniform sampler2D u_framebuffer;\n\t\t\t\t\tuniform vec4 u_colorArr[20];\n\t\t\t\t\tuniform float u_colorCount;\n\t\t\t\t\tuniform float u_opacity;\n\t\t\t\t\tuniform float u_offset[20];\n\n\t\t\t\t\tfloat remap ( float minval, float maxval, float curval ) {\n\t\t\t\t\t\treturn ( curval - minval ) / ( maxval - minval );\n\t\t\t\t\t}\n\n\t\t\t\t\tvoid main() {\n\t\t\t\t\t\tfloat alpha = texture(u_framebuffer, v_texCoord.xy).a;\n\t\t\t\t\t\tif (alpha > 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 20; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},i={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};export{t as default}; | ||
| function t(t,i={}){let n,a,s,u,f,h,c,l=[],m=[],_=0,d=null,g=0,T=0;function p(t){return null==t}function x(t){return"number"!=typeof t}function y(t){if(t.constructor!==Array)throw new Error("Invalid gradient: Wrong Gradient type, expected Array");if(t.length<2)throw new Error("Invalid gradient: 2 or more values expected");if(!function(t){for(let e=0;e<t.length-1;e++)if(t[e+1].offset-t[e].offset<0)return!1;return!0}(t))throw new Error("Invalid gradient: Gradient is not sorted");const e=t.length,r=new Float32Array(4*e),o=new Array(e);return t.forEach((function(t,e){const i=4*e;r[i]=t.color[0]/255,r[i+1]=t.color[1]/255,r[i+2]=t.color[2]/255,r[i+3]=void 0!==t.color[3]?t.color[3]:1,o[e]=t.offset})),{value:r,length:e,offset:o}}function E(t,e,r){var o=t.createShader(t[e]);if(t.shaderSource(o,r),t.compileShader(o),!t.getShaderParameter(o,t.COMPILE_STATUS)){var i=t.getShaderInfoLog(o);throw t.deleteShader(o),new Error("*** Error compiling shader '"+o+"':"+i)}return o}function v(t,e){var r=E(t,"VERTEX_SHADER",e.vertex),o=E(t,"FRAGMENT_SHADER",e.fragment),i=t.createProgram();if(t.attachShader(i,r),t.attachShader(i,o),t.linkProgram(i),t.getProgramParameter(i,t.LINK_STATUS))return i;var n=t.getProgramInfoLog(i);throw t.deleteProgram(i),new Error("Error in program linking:"+n)}function A(t,i){try{let a;if("string"==typeof t)a=document.querySelector(t);else{if(!(t instanceof Element))throw new Error("Context must be either a string or an Element");a=t}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,r=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/r}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(t){var r=v(t,e);return{program:r,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(r,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:1,attribute:t.getAttribLocation(r,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:t.getUniformLocation(r,"u_resolution"),u_max:t.getUniformLocation(r,"u_max"),u_min:t.getUniformLocation(r,"u_min"),u_size:t.getUniformLocation(r,"u_size"),u_intensity:t.getUniformLocation(r,"u_intensity"),u_translate:t.getUniformLocation(r,"u_translate"),u_zoom:t.getUniformLocation(r,"u_zoom"),u_angle:t.getUniformLocation(r,"u_angle"),u_density:t.getUniformLocation(r,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var e=v(t,r);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(e,"u_framebuffer"),u_colorArr:t.getUniformLocation(e,"u_colorArr"),u_colorCount:t.getUniformLocation(e,"u_colorCount"),u_opacity:t.getUniformLocation(e,"u_opacity"),u_offset:t.getUniformLocation(e,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=v(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),p(i.size)?this.size=20:this.setSize(i.size),p(i.max)?T=null:this.setMax(i.max),p(i.min)?g=null:this.setMin(i.min),p(i.intensity)?this.intensity=1:this.setIntensity(i.intensity),p(i.translate)?this.translate=[0,0]:this.setTranslate(i.translate),p(i.zoom)?this.zoom=1:this.setZoom(i.zoom),p(i.angle)?this.angle=0:this.setRotationAngle(i.angle),p(i.opacity)?this.opacity=1:this.setOpacity(i.opacity),this.gradient=y(i.gradient),this.ratio=n,i.backgroundImage&&i.backgroundImage.url&&this.setBackgroundImage(i.backgroundImage),this.heatmapData=[],this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height)}catch(t){console.error(t)}}function w(){const t=this.ctx;t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width*this.ratio,this.height*this.ratio,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.bindFramebuffer(t.FRAMEBUFFER,this.fbo),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.fbTexObj,0),h&&b.call(this,t,h),t.bindFramebuffer(t.FRAMEBUFFER,null),c&&R.call(this,t,c),P.call(this,t)}function b(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==g?g:e?.minMax?.min??0,this.max=null!==T?T:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(e.posVec||[]).length/2)}function R(t,e){const{x:r=0,y:o=0,width:i=0,height:n=0}=e;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([r,o,r+i,o,r,o+n,r,o+n,r+i,o,r+i,o+n]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function P(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function S(t){const e=this.zoom||.1,r=this.width/2,o=this.height/2,i=this.angle;let n=(t.x-r)/r*e,a=(t.y-o)/o*e;if(0!==i){const t=Math.cos(i),e=Math.sin(i),r=t*n-e*a;a=e*n+t*a,n=r}return n=n*r+r-this.translate[0],a=a*o+o-this.translate[1],t.x=n,t.y=a,{x:n,y:a}}return A.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.render(h)},A.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},A.prototype.setMax=function(t){if(p(t)||x(t))throw new Error("Invalid max: Expected Number");return T=t,this},A.prototype.setMin=function(t){if(p(t)||x(t))throw new Error("Invalid min: Expected Number");return g=t,this},A.prototype.setGradient=function(t){return this.gradient=y(t),this},A.prototype.setTranslate=function(t){if(t.constructor!==Array)throw new Error("Invalid Translate: Translate has to be of Array type");if(2!==t.length)throw new Error("Translate has to be of length 2");return this.translate=t,this},A.prototype.setZoom=function(t){if(p(t)||x(t))throw new Error("Invalid zoom: Expected Number");return this.zoom=t,this},A.prototype.setRotationAngle=function(t){if(p(t)||x(t))throw new Error("Invalid Angle: Expected Number");return this.angle=t,this},A.prototype.setSize=function(t){if(p(t)||x(t))throw new Error("Invalid Size: Expected Number");return this.size=t,this},A.prototype.setIntensity=function(t){if(p(t)||x(t))throw this.intensity=1,new Error("Invalid Intensity: Expected Number");if(t>1||t<0)throw this.intensity=t>1?1:0,new Error("Invalid Intensity value "+t);return this.intensity=t,this},A.prototype.setOpacity=function(t){if(p(t)||x(t))throw new Error("Invalid Opacity: Expected Number");if(t>1||t<0)throw new Error("Invalid Opacity value "+t);return this.opacity=t,this},A.prototype.setBackgroundImage=function(t){const e=this;if(t.url)return d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",c=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,r){const o=new Image;o.crossOrigin="anonymous",o.onload=e,o.onerror=r,o.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),c={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render()}),(function(t){throw new Error("Image Load Error",t)})),this},A.prototype.clearData=function(){this.heatmapData=[],h={},this.render()},A.prototype.addData=function(t,e){const r=this;for(let o=0;o<t.length;o++)e&&S.call(r,t[o]),this.heatmapData.push(t[o]);return this.renderData(this.heatmapData),this},A.prototype.renderData=function(t){if(t.constructor!==Array)throw new Error("Expected Array type");return h=function(t){const e=t.length;_!==e&&(a=new ArrayBuffer(8*e),l=new Float32Array(a),s=new ArrayBuffer(4*e),m=new Float32Array(s),_=e);const r={min:1/0,max:-1/0};for(let o=0;o<e;o++)l[2*o]=t[o].x,l[2*o+1]=t[o].y,m[o]=t[o].value,r.min>t[o].value&&(r.min=t[o].value),r.max<t[o].value&&(r.max=t[o].value);return{posVec:l,rVec:m,minMax:r}}(t),this.heatmapData=t,this.render(),this},A.prototype.render=function(){w.call(this)},A.prototype.projection=function(t){const e=this.zoom||.1,r=this.width/2,o=this.height/2,i=this.translate[0],n=this.translate[1],a=this.angle,s=this.width/this.height;let u=(t.x+i-r)/(r*e),f=(t.y+n-o)/(o*e);if(u*=s,0!==a){const t=Math.cos(-a),e=Math.sin(-a),r=t*u-e*f;f=e*u+t*f,u=r}return u*=1/s,u=u*r+r,f=f*o+o,{x:u,y:f}},new A(t,i)}var e={vertex:"#version 300 es\n\t\t\t\tin vec2 a_position;\n\t\t\t\tin float a_intensity;\n\t\t\t\tuniform float u_size;\n\t\t\t\tuniform vec2 u_resolution;\n\t\t\t\tuniform vec2 u_translate; \n\t\t\t\tuniform float u_zoom; \n\t\t\t\tuniform float u_angle; \n\t\t\t\tuniform float u_density;\n\t\t\t\tout float v_i;\n\n\t\t\t\tvec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 rotationMat = mat2(c, -s, s, c); \n\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\treturn scaleMatInv * rotationMat * scaleMat * v;\n\t\t\t\t}\n\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\tfloat zoomFactor = max(u_zoom, 0.1);\n\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y);\n\t\t\t\t\t}\n\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\tgl_PointSize = u_size * u_density;\n\t\t\t\t\tv_i = a_intensity;\n\t\t\t\t}",fragment:"#version 300 es\n\t\t\t\tprecision mediump float;\n\t\t\t\tuniform float u_max;\n\t\t\t\tuniform float u_min;\n\t\t\t\tuniform float u_intensity;\n\t\t\t\tin float v_i;\n\t\t\t\tout vec4 fragColor;\n\t\t\t\tvoid main() {\n\t\t\t\t\tfloat r = 0.0; \n\t\t\t\t\tvec2 cxy = 2.0 * gl_PointCoord - 1.0;\n\t\t\t\t\tr = dot(cxy, cxy);\n\t\t\t\t\tfloat deno = max(u_max - u_min, 1.0);\n\t\t\t\t\tif(r <= 1.0) {\n\t\t\t\t\t\tfragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r)));\n\t\t\t\t\t}\n\t\t\t\t}"},r={vertex:"#version 300 es\n\t\t\t\tprecision highp float;\n\t\t\t\tin vec2 a_texCoord;\n\t\t\t\tout vec2 v_texCoord;\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 clipSpace = a_texCoord * 2.0 - 1.0;\n\t\t\t\t\tgl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\t\t\t\t\tv_texCoord = a_texCoord;\n\t\t\t\t}\n\t",fragment:"#version 300 es\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t\tin vec2 v_texCoord;\n\t\t\t\t\tout vec4 fragColor;\n\t\t\t\t\tuniform sampler2D u_framebuffer;\n\t\t\t\t\tuniform vec4 u_colorArr[20];\n\t\t\t\t\tuniform float u_colorCount;\n\t\t\t\t\tuniform float u_opacity;\n\t\t\t\t\tuniform float u_offset[20];\n\n\t\t\t\t\tfloat remap ( float minval, float maxval, float curval ) {\n\t\t\t\t\t\treturn ( curval - minval ) / ( maxval - minval );\n\t\t\t\t\t}\n\n\t\t\t\t\tvoid main() {\n\t\t\t\t\t\tfloat alpha = texture(u_framebuffer, v_texCoord.xy).a;\n\t\t\t\t\t\tif (alpha > 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 20; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},o={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};export{t as default}; |
| /*! | ||
| * Heatmap v1.0.5 | ||
| * Heatmap v1.1.0 | ||
| * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) | ||
@@ -19,25 +19,59 @@ * @license BSD-3-Clause | ||
| let pLen = 0; | ||
| let dataMinValue = null; | ||
| let dataMaxValue = null; | ||
| let maxTextureSize = null; | ||
| let imgWidth; | ||
| let imgHeight; | ||
| let hearmapExData; | ||
| let imageConfig; | ||
| let configMin = 0; | ||
| let configMax = 0; | ||
| function isNullUndefined (val) { | ||
| return val === null || val === undefined; | ||
| } | ||
| function isNotNumber (val) { | ||
| return typeof val !== 'number'; | ||
| } | ||
| function isSortedAscending (arr) { | ||
| for (let i = 0; i < arr.length - 1; i++) { | ||
| if (arr[i + 1].offset - arr[i].offset < 0) { | ||
| return false; | ||
| } | ||
| } | ||
| return true; | ||
| } | ||
| function gradientMapper (grad) { | ||
| const arr = []; | ||
| if (grad.constructor !== Array) { | ||
| throw new Error('Invalid gradient: Wrong Gradient type, expected Array'); | ||
| } | ||
| if (grad.length < 2) { | ||
| throw new Error('Invalid gradient: 2 or more values expected'); | ||
| } | ||
| if (!isSortedAscending(grad)) { | ||
| throw new Error('Invalid gradient: Gradient is not sorted'); | ||
| } | ||
| const gradLength = grad.length; | ||
| const offSetsArray = []; | ||
| const values = new Float32Array(gradLength * 4); | ||
| const offsets = new Array(gradLength); | ||
| grad.forEach(function (d) { | ||
| arr.push(d.color[0] / 255); | ||
| arr.push(d.color[1] / 255); | ||
| arr.push(d.color[2] / 255); | ||
| arr.push(d.color[3] === undefined ? 1.0 : d.color[3]); | ||
| offSetsArray.push(d.offset); | ||
| grad.forEach(function (d, i) { | ||
| const baseIndex = i * 4; | ||
| values[baseIndex] = d.color[0] / 255; | ||
| values[baseIndex + 1] = d.color[1] / 255; | ||
| values[baseIndex + 2] = d.color[2] / 255; | ||
| values[baseIndex + 3] = d.color[3] !== undefined ? d.color[3] : 1.0; | ||
| offsets[i] = d.offset; | ||
| }); | ||
| return { | ||
| value: new Float32Array(arr), | ||
| value: values, | ||
| length: gradLength, | ||
| offset: offSetsArray | ||
| offset: offsets | ||
| }; | ||
@@ -53,4 +87,4 @@ } | ||
| var lastError = ctx.getShaderInfoLog(shader); | ||
| console.error("*** Error compiling shader '" + shader + "':" + lastError); | ||
| ctx.deleteShader(shader); | ||
| throw new Error("*** Error compiling shader '" + shader + "':" + lastError); | ||
| } | ||
@@ -73,5 +107,4 @@ return shader; | ||
| var lastError = ctx.getProgramInfoLog(program); | ||
| console.error('Error in program linking:' + lastError); | ||
| ctx.deleteProgram(program); | ||
| return null; | ||
| throw new Error('Error in program linking:' + lastError); | ||
| } else { | ||
@@ -205,64 +238,107 @@ return program; | ||
| function Chart (context, config) { | ||
| let res; | ||
| if (typeof context === 'string') { | ||
| res = document.querySelector(context); | ||
| } else if (context instanceof Element) { | ||
| res = context; | ||
| } else { | ||
| throw new Error('Context must be either a string or an Element'); | ||
| } | ||
| const height = res.clientHeight; | ||
| const width = res.clientWidth; | ||
| const layer = document.createElement('canvas'); | ||
| const ctx = layer.getContext('webgl2', { | ||
| premultipliedAlpha: false, | ||
| depth: false, | ||
| antialias: true, | ||
| alpha: true, | ||
| preserveDrawingBuffer: false | ||
| }); | ||
| ratio = getPixlRatio(ctx); | ||
| ctx.clearColor(0, 0, 0, 0); | ||
| ctx.enable(ctx.BLEND); | ||
| ctx.blendEquation(ctx.FUNC_ADD); | ||
| ctx.blendFunc(ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA); | ||
| ctx.depthMask(true); | ||
| layer.setAttribute('height', height * ratio); | ||
| layer.setAttribute('width', width * ratio); | ||
| layer.style.height = `${height}px`; | ||
| layer.style.width = `${width}px`; | ||
| layer.style.position = 'absolute'; | ||
| res.appendChild(layer); | ||
| try { | ||
| let res; | ||
| if (typeof context === 'string') { | ||
| res = document.querySelector(context); | ||
| } else if (context instanceof Element) { | ||
| res = context; | ||
| } else { | ||
| throw new Error('Context must be either a string or an Element'); | ||
| } | ||
| const height = res.clientHeight; | ||
| const width = res.clientWidth; | ||
| const layer = document.createElement('canvas'); | ||
| const ctx = layer.getContext('webgl2', { | ||
| premultipliedAlpha: false, | ||
| depth: false, | ||
| antialias: true, | ||
| alpha: true, | ||
| preserveDrawingBuffer: false | ||
| }); | ||
| ratio = getPixlRatio(ctx); | ||
| ctx.clearColor(0, 0, 0, 0); | ||
| ctx.enable(ctx.BLEND); | ||
| ctx.blendEquation(ctx.FUNC_ADD); | ||
| ctx.blendFunc(ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA); | ||
| ctx.depthMask(true); | ||
| layer.setAttribute('height', height * ratio); | ||
| layer.setAttribute('width', width * ratio); | ||
| layer.style.height = `${height}px`; | ||
| layer.style.width = `${width}px`; | ||
| layer.style.position = 'absolute'; | ||
| res.appendChild(layer); | ||
| this.gradient = gradientMapper(config.gradient); | ||
| this.ctx = ctx; | ||
| this.width = width; | ||
| this.height = height; | ||
| this.layer = layer; | ||
| this.dom = res; | ||
| this.gradShadOP = createGradiantShader(this.ctx); | ||
| this.colorShadOP = createColorShader(this.ctx); | ||
| this.imageShaOP = createImageShader(this.ctx); | ||
| this.fbTexObj = ctx.createTexture(); | ||
| this.fbo = ctx.createFramebuffer(); | ||
| this.ctx = ctx; | ||
| this.width = width; | ||
| this.height = height; | ||
| this.layer = layer; | ||
| this.dom = res; | ||
| this.gradShadOP = createGradiantShader(this.ctx); | ||
| this.colorShadOP = createColorShader(this.ctx); | ||
| this.imageShaOP = createImageShader(this.ctx); | ||
| this.fbTexObj = ctx.createTexture(); | ||
| this.fbo = ctx.createFramebuffer(); | ||
| this.size = config.size ? config.size : 20.0; | ||
| dataMaxValue = config.max ? config.max : null; | ||
| dataMinValue = config.min ? config.min : null; | ||
| this.intensity = config.intensity ? config.intensity : 1.0; | ||
| this.translate = (config.translate && config.translate.length === 2) ? config.translate : [0, 0]; | ||
| this.zoom = (config.zoom ? config.zoom : 1.0); | ||
| this.angle = (config.rotationAngle ? config.rotationAngle : 0.0); | ||
| this.opacity = config.opacity ? config.opacity : 1.0; | ||
| this.ratio = ratio; | ||
| if (!isNullUndefined(config.size)) { | ||
| this.setSize(config.size); | ||
| } else { | ||
| this.size = 20.0; | ||
| } | ||
| if (config.backgroundImage && config.backgroundImage.url) { | ||
| this.setBackgroundImage(config.backgroundImage); | ||
| } | ||
| if (!isNullUndefined(config.max)) { | ||
| this.setMax(config.max); | ||
| } else { | ||
| configMax = null; | ||
| } | ||
| this.rawData = []; | ||
| if (!isNullUndefined(config.min)) { | ||
| this.setMin(config.min); | ||
| } else { | ||
| configMin = null; | ||
| } | ||
| ctx.viewport(0, 0, ctx.canvas.width, ctx.canvas.height); | ||
| if (!isNullUndefined(config.intensity)) { | ||
| this.setIntensity(config.intensity); | ||
| } else { | ||
| this.intensity = 1.0; | ||
| } | ||
| this.render(this.exData || {}); | ||
| if (!isNullUndefined(config.translate)) { | ||
| this.setTranslate(config.translate); | ||
| } else { | ||
| this.translate = [0, 0]; | ||
| } | ||
| if (!isNullUndefined(config.zoom)) { | ||
| this.setZoom(config.zoom); | ||
| } else { | ||
| this.zoom = 1.0; | ||
| } | ||
| if (!isNullUndefined(config.angle)) { | ||
| this.setRotationAngle(config.angle); | ||
| } else { | ||
| this.angle = 0.0; | ||
| } | ||
| if (!isNullUndefined(config.opacity)) { | ||
| this.setOpacity(config.opacity); | ||
| } else { | ||
| this.opacity = 1.0; | ||
| } | ||
| this.gradient = gradientMapper(config.gradient); | ||
| this.ratio = ratio; | ||
| if (config.backgroundImage && config.backgroundImage.url) { | ||
| this.setBackgroundImage(config.backgroundImage); | ||
| } | ||
| this.heatmapData = []; | ||
| this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| } | ||
@@ -280,5 +356,4 @@ | ||
| this.ctx.viewport(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); | ||
| console.log('resize'); | ||
| /* Perform update */ | ||
| this.render(this.exData); | ||
| this.render(hearmapExData); | ||
| }; | ||
@@ -291,39 +366,86 @@ | ||
| Chart.prototype.setMax = function (max) { | ||
| dataMaxValue = max; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(max) || isNotNumber(max)) { | ||
| throw new Error('Invalid max: Expected Number'); | ||
| } | ||
| configMax = max; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setMin = function (min) { | ||
| dataMinValue = min; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(min) || isNotNumber(min)) { | ||
| throw new Error('Invalid min: Expected Number'); | ||
| } | ||
| configMin = min; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setGradient = function (gradient) { | ||
| this.gradient = gradientMapper(gradient); | ||
| return this; | ||
| }; | ||
| Chart.prototype.setTranslate = function (translate) { | ||
| this.translate = (translate.length === 2) ? translate : [0, 0]; | ||
| this.render(this.exData); | ||
| if (translate.constructor !== Array) { | ||
| throw new Error('Invalid Translate: Translate has to be of Array type'); | ||
| } | ||
| if (translate.length !== 2) { | ||
| throw new Error('Translate has to be of length 2'); | ||
| } | ||
| this.translate = translate; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setZoom = function (zoom) { | ||
| this.zoom = zoom !== undefined ? zoom : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(zoom) || isNotNumber(zoom)) { | ||
| throw new Error('Invalid zoom: Expected Number'); | ||
| } | ||
| this.zoom = zoom; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setRotationAngle = function (angle) { | ||
| this.angle = angle !== undefined ? angle : 0.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(angle) || isNotNumber(angle)) { | ||
| throw new Error('Invalid Angle: Expected Number'); | ||
| } | ||
| this.angle = angle; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setSize = function (size) { | ||
| this.size = size !== undefined ? size : 20.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(size) || isNotNumber(size)) { | ||
| throw new Error('Invalid Size: Expected Number'); | ||
| } | ||
| this.size = size; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setIntensity = function (intensity) { | ||
| this.intensity = intensity !== undefined ? intensity : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(intensity) || isNotNumber(intensity)) { | ||
| this.intensity = 1.0; // applying default intensity | ||
| throw new Error('Invalid Intensity: Expected Number'); | ||
| } | ||
| if (intensity > 1 || intensity < 0) { | ||
| this.intensity = intensity > 1 ? 1 : 0; // Setting bound value | ||
| throw new Error('Invalid Intensity value ' + intensity); | ||
| } | ||
| this.intensity = intensity; | ||
| return this; | ||
| }; | ||
| Chart.prototype.setOpacity = function (opacity) { | ||
| this.opacity = opacity !== undefined ? opacity : 1.0; | ||
| this.render(this.exData); | ||
| if (isNullUndefined(opacity) || isNotNumber(opacity)) { | ||
| throw new Error('Invalid Opacity: Expected Number'); | ||
| } | ||
| if (opacity > 1 || opacity < 0) { | ||
| throw new Error('Invalid Opacity value ' + opacity); | ||
| } | ||
| this.opacity = opacity; | ||
| return this; | ||
| }; | ||
@@ -340,3 +462,3 @@ | ||
| this.type = 'TEXTURE_2D'; | ||
| this.imageConfig = null; | ||
| imageConfig = null; | ||
@@ -369,3 +491,3 @@ imgWidth = config.width || this.width; | ||
| self.imageConfig = { | ||
| imageConfig = { | ||
| x: config.x || 0, | ||
@@ -378,8 +500,15 @@ y: config.y || 0, | ||
| self.render(self.exData || {}); | ||
| self.render(); | ||
| }, function onErrorCallBack (error) { | ||
| console.error('Image Load Error', error); | ||
| throw new Error('Image Load Error', error); | ||
| }); | ||
| return this; | ||
| }; | ||
| Chart.prototype.clearData = function () { | ||
| this.heatmapData = []; | ||
| hearmapExData = {}; | ||
| this.render(); | ||
| }; | ||
| Chart.prototype.addData = function (data, transIntactFlag) { | ||
@@ -391,13 +520,22 @@ const self = this; | ||
| } | ||
| this.rawData.push(data[i]); | ||
| this.heatmapData.push(data[i]); | ||
| } | ||
| this.renderData(this.rawData); | ||
| this.renderData(this.heatmapData); | ||
| return this; | ||
| }; | ||
| Chart.prototype.renderData = function (data) { | ||
| const exData = extractData(data); | ||
| this.rawData = data; | ||
| this.render(exData); | ||
| if (data.constructor !== Array) { | ||
| throw new Error('Expected Array type'); | ||
| } | ||
| hearmapExData = extractData(data); | ||
| this.heatmapData = data; | ||
| this.render(); | ||
| return this; | ||
| }; | ||
| Chart.prototype.render = function () { | ||
| renderExec.call(this); | ||
| }; | ||
| Chart.prototype.projection = function (data) { | ||
@@ -437,5 +575,4 @@ // Pre-compute constants and repetitive calculations | ||
| Chart.prototype.render = function (exData) { | ||
| function renderExec () { | ||
| const ctx = this.ctx; | ||
| this.exData = exData; | ||
@@ -453,18 +590,19 @@ ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | ||
| renderHeatGrad.call(this, ctx, exData); | ||
| if (hearmapExData) { | ||
| renderHeatGrad.call(this, ctx, hearmapExData); | ||
| } | ||
| ctx.bindFramebuffer(ctx.FRAMEBUFFER, null); | ||
| if (this.imageConfig) { | ||
| renderImage.call(this, ctx); | ||
| if (imageConfig) { | ||
| renderImage.call(this, ctx, imageConfig); | ||
| } | ||
| renderColorGradiant.call(this, ctx); | ||
| }; | ||
| } | ||
| function renderHeatGrad (ctx, exData) { | ||
| ctx.useProgram(this.gradShadOP.program); | ||
| this.min = dataMinValue !== null ? dataMinValue : exData?.minMax?.min ?? 0; | ||
| this.max = dataMaxValue !== null ? dataMaxValue : exData?.minMax?.max ?? 0; | ||
| this.min = configMin !== null ? configMin : exData?.minMax?.min ?? 0; | ||
| this.max = configMax !== null ? configMax : exData?.minMax?.max ?? 0; | ||
| this.gradShadOP.attr[0].data = exData.posVec || []; | ||
| this.gradShadOP.attr[1].data = exData.rVec || []; | ||
| console.log(this.width, this.height); | ||
| ctx.uniform2fv(this.gradShadOP.uniform.u_resolution, new Float32Array([this.width * this.ratio, this.height * this.ratio])); | ||
@@ -487,7 +625,7 @@ ctx.uniform2fv(this.gradShadOP.uniform.u_translate, new Float32Array([this.translate[0], this.translate[1]])); | ||
| ctx.drawArrays(ctx.POINTS, 0, (this.exData.posVec || []).length / 2); | ||
| ctx.drawArrays(ctx.POINTS, 0, (exData.posVec || []).length / 2); | ||
| } | ||
| function renderImage (ctx) { | ||
| const { x = 0, y = 0, width = 0, height = 0 } = this.imageConfig; | ||
| function renderImage (ctx, imageConfig) { | ||
| const { x = 0, y = 0, width = 0, height = 0 } = imageConfig; | ||
@@ -562,2 +700,5 @@ ctx.useProgram(this.imageShaOP.program); | ||
| data.x = posX; | ||
| data.y = posY; | ||
| return { x: posX, y: posY }; | ||
@@ -592,53 +733,47 @@ } | ||
| vertex: `#version 300 es | ||
| in vec2 a_position; | ||
| in float a_intensity; | ||
| uniform float u_size; | ||
| uniform vec2 u_resolution; | ||
| uniform vec2 u_translate; | ||
| uniform float u_zoom; | ||
| uniform float u_angle; | ||
| uniform float u_density; | ||
| out float v_i; | ||
| in vec2 a_position; | ||
| in float a_intensity; | ||
| uniform float u_size; | ||
| uniform vec2 u_resolution; | ||
| uniform vec2 u_translate; | ||
| uniform float u_zoom; | ||
| uniform float u_angle; | ||
| uniform float u_density; | ||
| out float v_i; | ||
| vec2 rotation(vec2 v, float a, float aspect) { | ||
| float s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); | ||
| mat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0); | ||
| mat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0); | ||
| return scaleMatInv * m * scaleMat * v; | ||
| } | ||
| vec2 rotation(vec2 v, float a, float aspect) { | ||
| float s = sin(a); float c = cos(a); mat2 rotationMat = mat2(c, -s, s, c); | ||
| mat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0); | ||
| mat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0); | ||
| return scaleMatInv * rotationMat * scaleMat * v; | ||
| } | ||
| void main() { | ||
| vec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution); | ||
| vec2 zeroToTwo = zeroToOne * 2.0 - 1.0; | ||
| float zoomFactor = u_zoom; | ||
| if (zoomFactor == 0.0) { | ||
| zoomFactor = 0.1; | ||
| } | ||
| zeroToTwo = zeroToTwo / zoomFactor; | ||
| if (u_angle != 0.0) { | ||
| zeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y); | ||
| } | ||
| gl_Position = vec4(zeroToTwo , 0, 1); | ||
| gl_PointSize = u_size * u_density; | ||
| v_i = a_intensity; | ||
| }`, | ||
| void main() { | ||
| vec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution); | ||
| vec2 zeroToTwo = zeroToOne * 2.0 - 1.0; | ||
| float zoomFactor = max(u_zoom, 0.1); | ||
| zeroToTwo = zeroToTwo / zoomFactor; | ||
| if (u_angle != 0.0) { | ||
| zeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y); | ||
| } | ||
| gl_Position = vec4(zeroToTwo , 0, 1); | ||
| gl_PointSize = u_size * u_density; | ||
| v_i = a_intensity; | ||
| }`, | ||
| fragment: `#version 300 es | ||
| precision mediump float; | ||
| uniform float u_max; | ||
| uniform float u_min; | ||
| uniform float u_intensity; | ||
| in float v_i; | ||
| out vec4 fragColor; | ||
| void main() { | ||
| float r = 0.0; | ||
| vec2 cxy = 2.0 * gl_PointCoord - 1.0; | ||
| r = dot(cxy, cxy); | ||
| float deno = u_max - u_min; | ||
| if (deno <= 0.0) { | ||
| deno = 1.0; | ||
| } | ||
| if(r <= 1.0) { | ||
| fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); | ||
| } | ||
| }` | ||
| precision mediump float; | ||
| uniform float u_max; | ||
| uniform float u_min; | ||
| uniform float u_intensity; | ||
| in float v_i; | ||
| out vec4 fragColor; | ||
| void main() { | ||
| float r = 0.0; | ||
| vec2 cxy = 2.0 * gl_PointCoord - 1.0; | ||
| r = dot(cxy, cxy); | ||
| float deno = max(u_max - u_min, 1.0); | ||
| if(r <= 1.0) { | ||
| fragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r))); | ||
| } | ||
| }` | ||
| }; | ||
@@ -645,0 +780,0 @@ |
| /*! | ||
| * Heatmap v1.0.5 | ||
| * Heatmap v1.1.0 | ||
| * (c) 2024 Narayana Swamy (narayanaswamy14@gmail.com) | ||
| * @license BSD-3-Clause | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).visualHeatmap=e()}(this,(function(){"use strict";var t={vertex:"#version 300 es\n\tin vec2 a_position;\n\tin float a_intensity;\n\tuniform float u_size;\n\tuniform vec2 u_resolution;\n\tuniform vec2 u_translate; \n\tuniform float u_zoom; \n\tuniform float u_angle; \n\tuniform float u_density;\n\tout float v_i;\n\n\tvec2 rotation(vec2 v, float a, float aspect) {\n\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c); \n\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\treturn scaleMatInv * m * scaleMat * v;\n\t}\n\n\tvoid main() {\n\t\tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\tfloat zoomFactor = u_zoom;\n\t\tif (zoomFactor == 0.0) {\n\t\t\tzoomFactor = 0.1;\n\t\t}\n\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\tif (u_angle != 0.0) {\n\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y);\n\t\t}\n\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\tgl_PointSize = u_size * u_density;\n\t\tv_i = a_intensity;\n\t}",fragment:"#version 300 es\n\tprecision mediump float;\n\tuniform float u_max;\n\tuniform float u_min;\n\tuniform float u_intensity;\n\tin float v_i;\n\tout vec4 fragColor;\n\tvoid main() {\n\t\tfloat r = 0.0; \n\t\tvec2 cxy = 2.0 * gl_PointCoord - 1.0;\n\t\tr = dot(cxy, cxy);\n\t\tfloat deno = u_max - u_min;\n\t\tif (deno <= 0.0) {\n\t\t\tdeno = 1.0;\n\t\t}\n\t\tif(r <= 1.0) {\n\t\t\tfragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r)));\n\t\t}\n\t}"},e={vertex:"#version 300 es\n\t\t\t\tprecision highp float;\n\t\t\t\tin vec2 a_texCoord;\n\t\t\t\tout vec2 v_texCoord;\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 clipSpace = a_texCoord * 2.0 - 1.0;\n\t\t\t\t\tgl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\t\t\t\t\tv_texCoord = a_texCoord;\n\t\t\t\t}\n\t",fragment:"#version 300 es\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t\tin vec2 v_texCoord;\n\t\t\t\t\tout vec4 fragColor;\n\t\t\t\t\tuniform sampler2D u_framebuffer;\n\t\t\t\t\tuniform vec4 u_colorArr[20];\n\t\t\t\t\tuniform float u_colorCount;\n\t\t\t\t\tuniform float u_opacity;\n\t\t\t\t\tuniform float u_offset[20];\n\n\t\t\t\t\tfloat remap ( float minval, float maxval, float curval ) {\n\t\t\t\t\t\treturn ( curval - minval ) / ( maxval - minval );\n\t\t\t\t\t}\n\n\t\t\t\t\tvoid main() {\n\t\t\t\t\t\tfloat alpha = texture(u_framebuffer, v_texCoord.xy).a;\n\t\t\t\t\t\tif (alpha > 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 20; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},o={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};return function(i,r={}){let n,a,s,u,f,h=[],c=[],l=0,m=null,_=null,d=null;function g(t,e,o){var i=t.createShader(t[e]);if(t.shaderSource(i,o),t.compileShader(i),!t.getShaderParameter(i,t.COMPILE_STATUS)){var r=t.getShaderInfoLog(i);console.error("*** Error compiling shader '"+i+"':"+r),t.deleteShader(i)}return i}function T(t,e){var o=g(t,"VERTEX_SHADER",e.vertex),i=g(t,"FRAGMENT_SHADER",e.fragment),r=t.createProgram();if(t.attachShader(r,o),t.attachShader(r,i),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS))return r;var n=t.getProgramInfoLog(r);return console.error("Error in program linking:"+n),t.deleteProgram(r),null}function x(i,r){let a;if("string"==typeof i)a=document.querySelector(i);else{if(!(i instanceof Element))throw new Error("Context must be either a string or an Element");a=i}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,o=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/o}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.gradient=function(t){const e=[],o=t.length,i=[];return t.forEach((function(t){e.push(t.color[0]/255),e.push(t.color[1]/255),e.push(t.color[2]/255),e.push(void 0===t.color[3]?1:t.color[3]),i.push(t.offset)})),{value:new Float32Array(e),length:o,offset:i}}(r.gradient),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(e){var o=T(e,t);return{program:o,attr:[{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:2,attribute:e.getAttribLocation(o,"a_position"),data:new Float32Array([])},{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:1,attribute:e.getAttribLocation(o,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:e.getUniformLocation(o,"u_resolution"),u_max:e.getUniformLocation(o,"u_max"),u_min:e.getUniformLocation(o,"u_min"),u_size:e.getUniformLocation(o,"u_size"),u_intensity:e.getUniformLocation(o,"u_intensity"),u_translate:e.getUniformLocation(o,"u_translate"),u_zoom:e.getUniformLocation(o,"u_zoom"),u_angle:e.getUniformLocation(o,"u_angle"),u_density:e.getUniformLocation(o,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var o=T(t,e);return{program:o,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(o,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(o,"u_framebuffer"),u_colorArr:t.getUniformLocation(o,"u_colorArr"),u_colorCount:t.getUniformLocation(o,"u_colorCount"),u_opacity:t.getUniformLocation(o,"u_opacity"),u_offset:t.getUniformLocation(o,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=T(t,o);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),this.size=r.size?r.size:20,_=r.max?r.max:null,m=r.min?r.min:null,this.intensity=r.intensity?r.intensity:1,this.translate=r.translate&&2===r.translate.length?r.translate:[0,0],this.zoom=r.zoom?r.zoom:1,this.angle=r.rotationAngle?r.rotationAngle:0,this.opacity=r.opacity?r.opacity:1,this.ratio=n,r.backgroundImage&&r.backgroundImage.url&&this.setBackgroundImage(r.backgroundImage),this.rawData=[],h.viewport(0,0,h.canvas.width,h.canvas.height),this.render(this.exData||{})}function p(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==m?m:e?.minMax?.min??0,this.max=null!==_?_:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],console.log(this.width,this.height),t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(this.exData.posVec||[]).length/2)}function y(t){const{x:e=0,y:o=0,width:i=0,height:r=0}=this.imageConfig;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([e,o,e+i,o,e,o+r,e,o+r,e+i,o,e+i,o+r]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function v(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function E(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.angle;let n=(t.x-o)/o*e,a=(t.y-i)/i*e;if(0!==r){const t=Math.cos(r),e=Math.sin(r),o=t*n-e*a;a=e*n+t*a,n=o}return n=n*o+o-this.translate[0],a=a*i+i-this.translate[1],{x:n,y:a}}return x.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height),console.log("resize"),this.render(this.exData)},x.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},x.prototype.setMax=function(t){_=t,this.render(this.exData)},x.prototype.setMin=function(t){m=t,this.render(this.exData)},x.prototype.setTranslate=function(t){this.translate=2===t.length?t:[0,0],this.render(this.exData)},x.prototype.setZoom=function(t){this.zoom=void 0!==t?t:1,this.render(this.exData)},x.prototype.setRotationAngle=function(t){this.angle=void 0!==t?t:0,this.render(this.exData)},x.prototype.setSize=function(t){this.size=void 0!==t?t:20,this.render(this.exData)},x.prototype.setIntensity=function(t){this.intensity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setOpacity=function(t){this.opacity=void 0!==t?t:1,this.render(this.exData)},x.prototype.setBackgroundImage=function(t){const e=this;t.url&&(d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",this.imageConfig=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,o){const i=new Image;i.crossOrigin="anonymous",i.onload=e,i.onerror=o,i.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),e.imageConfig={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render(e.exData||{})}),(function(t){console.error("Image Load Error",t)})))},x.prototype.addData=function(t,e){const o=this;for(let i=0;i<t.length;i++)e&&E.call(o,t[i]),this.rawData.push(t[i]);this.renderData(this.rawData)},x.prototype.renderData=function(t){const e=function(t){const e=t.length;l!==e&&(a=new ArrayBuffer(8*e),h=new Float32Array(a),s=new ArrayBuffer(4*e),c=new Float32Array(s),l=e);const o={min:1/0,max:-1/0};for(let i=0;i<e;i++)h[2*i]=t[i].x,h[2*i+1]=t[i].y,c[i]=t[i].value,o.min>t[i].value&&(o.min=t[i].value),o.max<t[i].value&&(o.max=t[i].value);return{posVec:h,rVec:c,minMax:o}}(t);this.rawData=t,this.render(e)},x.prototype.projection=function(t){const e=this.zoom||.1,o=this.width/2,i=this.height/2,r=this.translate[0],n=this.translate[1],a=this.angle,s=this.width/this.height;let u=(t.x+r-o)/(o*e),f=(t.y+n-i)/(i*e);if(u*=s,0!==a){const t=Math.cos(-a),e=Math.sin(-a),o=t*u-e*f;f=e*u+t*f,u=o}return u*=1/s,u=u*o+o,f=f*i+i,{x:u,y:f}},x.prototype.render=function(t){const e=this.ctx;this.exData=t,e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.bindTexture(e.TEXTURE_2D,this.fbTexObj),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,this.width*this.ratio,this.height*this.ratio,0,e.RGBA,e.UNSIGNED_BYTE,null),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.bindFramebuffer(e.FRAMEBUFFER,this.fbo),e.framebufferTexture2D(e.FRAMEBUFFER,e.COLOR_ATTACHMENT0,e.TEXTURE_2D,this.fbTexObj,0),p.call(this,e,t),e.bindFramebuffer(e.FRAMEBUFFER,null),this.imageConfig&&y.call(this,e),v.call(this,e)},new x(i,r)}})); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).visualHeatmap=e()}(this,(function(){"use strict";var t={vertex:"#version 300 es\n\t\t\t\tin vec2 a_position;\n\t\t\t\tin float a_intensity;\n\t\t\t\tuniform float u_size;\n\t\t\t\tuniform vec2 u_resolution;\n\t\t\t\tuniform vec2 u_translate; \n\t\t\t\tuniform float u_zoom; \n\t\t\t\tuniform float u_angle; \n\t\t\t\tuniform float u_density;\n\t\t\t\tout float v_i;\n\n\t\t\t\tvec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 rotationMat = mat2(c, -s, s, c); \n\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\treturn scaleMatInv * rotationMat * scaleMat * v;\n\t\t\t\t}\n\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\tfloat zoomFactor = max(u_zoom, 0.1);\n\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle, u_resolution.x / u_resolution.y);\n\t\t\t\t\t}\n\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\tgl_PointSize = u_size * u_density;\n\t\t\t\t\tv_i = a_intensity;\n\t\t\t\t}",fragment:"#version 300 es\n\t\t\t\tprecision mediump float;\n\t\t\t\tuniform float u_max;\n\t\t\t\tuniform float u_min;\n\t\t\t\tuniform float u_intensity;\n\t\t\t\tin float v_i;\n\t\t\t\tout vec4 fragColor;\n\t\t\t\tvoid main() {\n\t\t\t\t\tfloat r = 0.0; \n\t\t\t\t\tvec2 cxy = 2.0 * gl_PointCoord - 1.0;\n\t\t\t\t\tr = dot(cxy, cxy);\n\t\t\t\t\tfloat deno = max(u_max - u_min, 1.0);\n\t\t\t\t\tif(r <= 1.0) {\n\t\t\t\t\t\tfragColor = vec4(0, 0, 0, ((v_i - u_min) / (deno)) * u_intensity * (1.0 - sqrt(r)));\n\t\t\t\t\t}\n\t\t\t\t}"},e={vertex:"#version 300 es\n\t\t\t\tprecision highp float;\n\t\t\t\tin vec2 a_texCoord;\n\t\t\t\tout vec2 v_texCoord;\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 clipSpace = a_texCoord * 2.0 - 1.0;\n\t\t\t\t\tgl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n\t\t\t\t\tv_texCoord = a_texCoord;\n\t\t\t\t}\n\t",fragment:"#version 300 es\n\t\t\t\t\tprecision mediump float;\n\t\t\t\t\tin vec2 v_texCoord;\n\t\t\t\t\tout vec4 fragColor;\n\t\t\t\t\tuniform sampler2D u_framebuffer;\n\t\t\t\t\tuniform vec4 u_colorArr[20];\n\t\t\t\t\tuniform float u_colorCount;\n\t\t\t\t\tuniform float u_opacity;\n\t\t\t\t\tuniform float u_offset[20];\n\n\t\t\t\t\tfloat remap ( float minval, float maxval, float curval ) {\n\t\t\t\t\t\treturn ( curval - minval ) / ( maxval - minval );\n\t\t\t\t\t}\n\n\t\t\t\t\tvoid main() {\n\t\t\t\t\t\tfloat alpha = texture(u_framebuffer, v_texCoord.xy).a;\n\t\t\t\t\t\tif (alpha > 0.0 && alpha <= 1.0) {\n\t\t\t\t\t\t\tvec4 color_;\n\n\t\t\t\t\t\t\tif (alpha <= u_offset[0]) {\n\t\t\t\t\t\t\t\tcolor_ = u_colorArr[0];\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfor (int i = 1; i <= 20; ++i) {\n\t\t\t\t\t\t\t\t\tif (alpha <= u_offset[i]) {\n\t\t\t\t\t\t\t\t\t\tcolor_ = mix( u_colorArr[i - 1], u_colorArr[i], remap( u_offset[i - 1], u_offset[i], alpha ) );\n\t\t\t\t\t\t\t\t\t\tcolor_ = color_ * mix( u_colorArr[i - 1][3], u_colorArr[i][3], remap( u_offset[i - 1], u_offset[i], alpha ));\n\n\t\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tcolor_ = color_ * u_opacity;\n\t\t\t\t\t\t\tif (color_.a < 0.0) {\n\t\t\t\t\t\t\t\tcolor_.a = 0.0;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfragColor = color_;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tfragColor = vec4(0.0, 0.0, 0.0, 0.0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t"},r={vertex:"#version 300 es\n precision highp float;\n in vec2 a_position;\n in vec2 a_texCoord;\n uniform vec2 u_resolution;\n\t\t\t\t\tuniform vec2 u_translate; \n\t\t\t\t\tuniform float u_zoom; \n\t\t\t\t\tuniform float u_angle; \n\t\t\t\t\tuniform float u_density;\n out vec2 v_texCoord;\n\n vec2 rotation(vec2 v, float a, float aspect) {\n\t\t\t\t\t\tfloat s = sin(a); float c = cos(a); mat2 m = mat2(c, -s, s, c);\n\t\t\t\t\t\tmat2 scaleMat = mat2(aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\tmat2 scaleMatInv = mat2(1.0/aspect, 0.0, 0.0, 1.0);\n\t\t\t\t\t\treturn scaleMatInv * m * scaleMat * v;\n\t\t\t\t\t}\n\n void main() {\n \tvec2 zeroToOne = (a_position * u_density + u_translate * u_density) / (u_resolution);\n \tzeroToOne.y = 1.0 - zeroToOne.y;\n\t\t\t\t\t\tvec2 zeroToTwo = zeroToOne * 2.0 - 1.0;\n\t\t\t\t\t\tfloat zoomFactor = u_zoom;\n\t\t\t\t\t\tif (zoomFactor == 0.0) {\n\t\t\t\t\t\t\tzoomFactor = 0.1;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tzeroToTwo = zeroToTwo / zoomFactor;\n\t\t\t\t\t\tif (u_angle != 0.0) {\n\t\t\t\t\t\t\tzeroToTwo = rotation(zeroToTwo, u_angle * -1.0, u_resolution.x / u_resolution.y);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tgl_Position = vec4(zeroToTwo , 0, 1);\n\t\t\t\t\t\tv_texCoord = a_texCoord;\n }\n \t\t",fragment:"#version 300 es\n precision mediump float;\n uniform sampler2D u_image;\n in vec2 v_texCoord;\n out vec4 fragColor;\n void main() {\n fragColor = texture(u_image, v_texCoord);\n }\n "};return function(o,i={}){let n,a,s,u,f,h,c,l=[],m=[],_=0,d=null,g=0,T=0;function p(t){return null==t}function x(t){return"number"!=typeof t}function y(t){if(t.constructor!==Array)throw new Error("Invalid gradient: Wrong Gradient type, expected Array");if(t.length<2)throw new Error("Invalid gradient: 2 or more values expected");if(!function(t){for(let e=0;e<t.length-1;e++)if(t[e+1].offset-t[e].offset<0)return!1;return!0}(t))throw new Error("Invalid gradient: Gradient is not sorted");const e=t.length,r=new Float32Array(4*e),o=new Array(e);return t.forEach((function(t,e){const i=4*e;r[i]=t.color[0]/255,r[i+1]=t.color[1]/255,r[i+2]=t.color[2]/255,r[i+3]=void 0!==t.color[3]?t.color[3]:1,o[e]=t.offset})),{value:r,length:e,offset:o}}function v(t,e,r){var o=t.createShader(t[e]);if(t.shaderSource(o,r),t.compileShader(o),!t.getShaderParameter(o,t.COMPILE_STATUS)){var i=t.getShaderInfoLog(o);throw t.deleteShader(o),new Error("*** Error compiling shader '"+o+"':"+i)}return o}function E(t,e){var r=v(t,"VERTEX_SHADER",e.vertex),o=v(t,"FRAGMENT_SHADER",e.fragment),i=t.createProgram();if(t.attachShader(i,r),t.attachShader(i,o),t.linkProgram(i),t.getProgramParameter(i,t.LINK_STATUS))return i;var n=t.getProgramInfoLog(i);throw t.deleteProgram(i),new Error("Error in program linking:"+n)}function A(o,i){try{let a;if("string"==typeof o)a=document.querySelector(o);else{if(!(o instanceof Element))throw new Error("Context must be either a string or an Element");a=o}const s=a.clientHeight,u=a.clientWidth,f=document.createElement("canvas"),h=f.getContext("webgl2",{premultipliedAlpha:!1,depth:!1,antialias:!0,alpha:!0,preserveDrawingBuffer:!1});n=function(t){const e=window.devicePixelRatio||1,r=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return e/r}(h),h.clearColor(0,0,0,0),h.enable(h.BLEND),h.blendEquation(h.FUNC_ADD),h.blendFunc(h.ONE,h.ONE_MINUS_SRC_ALPHA),h.depthMask(!0),f.setAttribute("height",s*n),f.setAttribute("width",u*n),f.style.height=`${s}px`,f.style.width=`${u}px`,f.style.position="absolute",a.appendChild(f),this.ctx=h,this.width=u,this.height=s,this.layer=f,this.dom=a,this.gradShadOP=function(e){var r=E(e,t);return{program:r,attr:[{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:2,attribute:e.getAttribLocation(r,"a_position"),data:new Float32Array([])},{bufferType:e.ARRAY_BUFFER,buffer:e.createBuffer(),drawType:e.STATIC_DRAW,valueType:e.FLOAT,size:1,attribute:e.getAttribLocation(r,"a_intensity"),data:new Float32Array([])}],uniform:{u_resolution:e.getUniformLocation(r,"u_resolution"),u_max:e.getUniformLocation(r,"u_max"),u_min:e.getUniformLocation(r,"u_min"),u_size:e.getUniformLocation(r,"u_size"),u_intensity:e.getUniformLocation(r,"u_intensity"),u_translate:e.getUniformLocation(r,"u_translate"),u_zoom:e.getUniformLocation(r,"u_zoom"),u_angle:e.getUniformLocation(r,"u_angle"),u_density:e.getUniformLocation(r,"u_density")}}}(this.ctx),this.colorShadOP=function(t){var r=E(t,e);return{program:r,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(r,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_framebuffer:t.getUniformLocation(r,"u_framebuffer"),u_colorArr:t.getUniformLocation(r,"u_colorArr"),u_colorCount:t.getUniformLocation(r,"u_colorCount"),u_opacity:t.getUniformLocation(r,"u_opacity"),u_offset:t.getUniformLocation(r,"u_offset")}}}(this.ctx),this.imageShaOP=function(t){var e=E(t,r);return{program:e,attr:[{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_position"),data:new Float32Array([])},{bufferType:t.ARRAY_BUFFER,buffer:t.createBuffer(),drawType:t.STATIC_DRAW,valueType:t.FLOAT,size:2,attribute:t.getAttribLocation(e,"a_texCoord"),data:new Float32Array([0,0,1,0,0,1,0,1,1,0,1,1])}],uniform:{u_resolution:t.getUniformLocation(e,"u_resolution"),u_image:t.getUniformLocation(e,"u_image"),u_translate:t.getUniformLocation(e,"u_translate"),u_zoom:t.getUniformLocation(e,"u_zoom"),u_angle:t.getUniformLocation(e,"u_angle"),u_density:t.getUniformLocation(e,"u_density")}}}(this.ctx),this.fbTexObj=h.createTexture(),this.fbo=h.createFramebuffer(),p(i.size)?this.size=20:this.setSize(i.size),p(i.max)?T=null:this.setMax(i.max),p(i.min)?g=null:this.setMin(i.min),p(i.intensity)?this.intensity=1:this.setIntensity(i.intensity),p(i.translate)?this.translate=[0,0]:this.setTranslate(i.translate),p(i.zoom)?this.zoom=1:this.setZoom(i.zoom),p(i.angle)?this.angle=0:this.setRotationAngle(i.angle),p(i.opacity)?this.opacity=1:this.setOpacity(i.opacity),this.gradient=y(i.gradient),this.ratio=n,i.backgroundImage&&i.backgroundImage.url&&this.setBackgroundImage(i.backgroundImage),this.heatmapData=[],this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height)}catch(t){console.error(t)}}function w(){const t=this.ctx;t.clear(t.COLOR_BUFFER_BIT|t.DEPTH_BUFFER_BIT),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.texImage2D(t.TEXTURE_2D,0,t.RGBA,this.width*this.ratio,this.height*this.ratio,0,t.RGBA,t.UNSIGNED_BYTE,null),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.bindFramebuffer(t.FRAMEBUFFER,this.fbo),t.framebufferTexture2D(t.FRAMEBUFFER,t.COLOR_ATTACHMENT0,t.TEXTURE_2D,this.fbTexObj,0),h&&b.call(this,t,h),t.bindFramebuffer(t.FRAMEBUFFER,null),c&&R.call(this,t,c),P.call(this,t)}function b(t,e){t.useProgram(this.gradShadOP.program),this.min=null!==g?g:e?.minMax?.min??0,this.max=null!==T?T:e?.minMax?.max??0,this.gradShadOP.attr[0].data=e.posVec||[],this.gradShadOP.attr[1].data=e.rVec||[],t.uniform2fv(this.gradShadOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.gradShadOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.gradShadOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.gradShadOP.uniform.u_angle,this.angle),t.uniform1f(this.gradShadOP.uniform.u_density,this.ratio),t.uniform1f(this.gradShadOP.uniform.u_max,this.max),t.uniform1f(this.gradShadOP.uniform.u_min,this.min),t.uniform1f(this.gradShadOP.uniform.u_size,this.size),t.uniform1f(this.gradShadOP.uniform.u_intensity,this.intensity),this.gradShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.drawArrays(t.POINTS,0,(e.posVec||[]).length/2)}function R(t,e){const{x:r=0,y:o=0,width:i=0,height:n=0}=e;t.useProgram(this.imageShaOP.program),t.uniform2fv(this.imageShaOP.uniform.u_resolution,new Float32Array([this.width*this.ratio,this.height*this.ratio])),t.uniform2fv(this.imageShaOP.uniform.u_translate,new Float32Array([this.translate[0],this.translate[1]])),t.uniform1f(this.imageShaOP.uniform.u_zoom,this.zoom?this.zoom:.01),t.uniform1f(this.imageShaOP.uniform.u_angle,this.angle),t.uniform1f(this.imageShaOP.uniform.u_density,this.ratio),this.imageShaOP.attr[0].data=new Float32Array([r,o,r+i,o,r,o+n,r,o+n,r+i,o,r+i,o+n]),this.imageShaOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.imageShaOP.uniform.u_image,0),t.activeTexture(this.ctx.TEXTURE0),t.bindTexture(this.ctx.TEXTURE_2D,this.imageTexture),t.drawArrays(t.TRIANGLES,0,6)}function P(t){t.useProgram(this.colorShadOP.program),t.uniform4fv(this.colorShadOP.uniform.u_colorArr,this.gradient.value),t.uniform1f(this.colorShadOP.uniform.u_colorCount,this.gradient.length),t.uniform1fv(this.colorShadOP.uniform.u_offset,new Float32Array(this.gradient.offset)),t.uniform1f(this.colorShadOP.uniform.u_opacity,this.opacity),this.colorShadOP.attr.forEach((function(e){t.bindBuffer(e.bufferType,e.buffer),t.bufferData(e.bufferType,e.data,e.drawType),t.enableVertexAttribArray(e.attribute),t.vertexAttribPointer(e.attribute,e.size,e.valueType,!0,0,0)})),t.uniform1i(this.colorShadOP.uniform.u_framebuffer,0),t.activeTexture(t.TEXTURE0),t.bindTexture(t.TEXTURE_2D,this.fbTexObj),t.drawArrays(t.TRIANGLES,0,6)}function S(t){const e=this.zoom||.1,r=this.width/2,o=this.height/2,i=this.angle;let n=(t.x-r)/r*e,a=(t.y-o)/o*e;if(0!==i){const t=Math.cos(i),e=Math.sin(i),r=t*n-e*a;a=e*n+t*a,n=r}return n=n*r+r-this.translate[0],a=a*o+o-this.translate[1],t.x=n,t.y=a,{x:n,y:a}}return A.prototype.resize=function(){const t=this.dom.clientHeight,e=this.dom.clientWidth;this.layer.setAttribute("height",t*n),this.layer.setAttribute("width",e*n),this.layer.style.height=`${t}px`,this.layer.style.width=`${e}px`,this.width=e,this.height=t,this.ctx.viewport(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this.render(h)},A.prototype.clear=function(){this.ctx.clear(this.ctx.COLOR_BUFFER_BIT|this.ctx.DEPTH_BUFFER_BIT)},A.prototype.setMax=function(t){if(p(t)||x(t))throw new Error("Invalid max: Expected Number");return T=t,this},A.prototype.setMin=function(t){if(p(t)||x(t))throw new Error("Invalid min: Expected Number");return g=t,this},A.prototype.setGradient=function(t){return this.gradient=y(t),this},A.prototype.setTranslate=function(t){if(t.constructor!==Array)throw new Error("Invalid Translate: Translate has to be of Array type");if(2!==t.length)throw new Error("Translate has to be of length 2");return this.translate=t,this},A.prototype.setZoom=function(t){if(p(t)||x(t))throw new Error("Invalid zoom: Expected Number");return this.zoom=t,this},A.prototype.setRotationAngle=function(t){if(p(t)||x(t))throw new Error("Invalid Angle: Expected Number");return this.angle=t,this},A.prototype.setSize=function(t){if(p(t)||x(t))throw new Error("Invalid Size: Expected Number");return this.size=t,this},A.prototype.setIntensity=function(t){if(p(t)||x(t))throw this.intensity=1,new Error("Invalid Intensity: Expected Number");if(t>1||t<0)throw this.intensity=t>1?1:0,new Error("Invalid Intensity value "+t);return this.intensity=t,this},A.prototype.setOpacity=function(t){if(p(t)||x(t))throw new Error("Invalid Opacity: Expected Number");if(t>1||t<0)throw new Error("Invalid Opacity value "+t);return this.opacity=t,this},A.prototype.setBackgroundImage=function(t){const e=this;if(t.url)return d=this.ctx.getParameter(this.ctx.MAX_TEXTURE_SIZE),this.imageTexture=this.ctx.createTexture(),this.type="TEXTURE_2D",c=null,u=t.width||this.width,f=t.height||this.height,u=u>d?d:u,f=f>d?d:f,function(t,e,r){const o=new Image;o.crossOrigin="anonymous",o.onload=e,o.onerror=r,o.src=t}(t.url,(function(){e.ctx.activeTexture(e.ctx.TEXTURE0),e.ctx.bindTexture(e.ctx.TEXTURE_2D,e.imageTexture),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_S,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_WRAP_T,e.ctx.CLAMP_TO_EDGE),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MIN_FILTER,e.ctx.LINEAR),e.ctx.texParameteri(e.ctx.TEXTURE_2D,e.ctx.TEXTURE_MAG_FILTER,e.ctx.LINEAR),e.ctx.texImage2D(e.ctx.TEXTURE_2D,0,e.ctx.RGBA,this.naturalWidth,this.naturalHeight,0,e.ctx.RGBA,e.ctx.UNSIGNED_BYTE,this),c={x:t.x||0,y:t.y||0,height:f,width:u,image:this},e.render()}),(function(t){throw new Error("Image Load Error",t)})),this},A.prototype.clearData=function(){this.heatmapData=[],h={},this.render()},A.prototype.addData=function(t,e){const r=this;for(let o=0;o<t.length;o++)e&&S.call(r,t[o]),this.heatmapData.push(t[o]);return this.renderData(this.heatmapData),this},A.prototype.renderData=function(t){if(t.constructor!==Array)throw new Error("Expected Array type");return h=function(t){const e=t.length;_!==e&&(a=new ArrayBuffer(8*e),l=new Float32Array(a),s=new ArrayBuffer(4*e),m=new Float32Array(s),_=e);const r={min:1/0,max:-1/0};for(let o=0;o<e;o++)l[2*o]=t[o].x,l[2*o+1]=t[o].y,m[o]=t[o].value,r.min>t[o].value&&(r.min=t[o].value),r.max<t[o].value&&(r.max=t[o].value);return{posVec:l,rVec:m,minMax:r}}(t),this.heatmapData=t,this.render(),this},A.prototype.render=function(){w.call(this)},A.prototype.projection=function(t){const e=this.zoom||.1,r=this.width/2,o=this.height/2,i=this.translate[0],n=this.translate[1],a=this.angle,s=this.width/this.height;let u=(t.x+i-r)/(r*e),f=(t.y+n-o)/(o*e);if(u*=s,0!==a){const t=Math.cos(-a),e=Math.sin(-a),r=t*u-e*f;f=e*u+t*f,u=r}return u*=1/s,u=u*r+r,f=f*o+o,{x:u,y:f}},new A(o,i)}})); |
| { | ||
| "name": "visual-heatmap", | ||
| "version": "1.1.0", | ||
| "version": "2.0.0", | ||
| "description": "\"Advanced Visual Heatmap - High Scale webGL based rendering.\"", | ||
| "module": "./src/main.js", | ||
| "main": "./dist/visualHeatmap.esm.js", | ||
| "module": "./dist/visualHeatmap.esm.js", | ||
| "main": "./dist/visualHeatmap.js", | ||
| "scripts": { | ||
@@ -11,2 +11,5 @@ "dev": "rollup -wm -c rollup.config.js", | ||
| }, | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "repository": { | ||
@@ -13,0 +16,0 @@ "type": "git", |
@@ -6,15 +6,15 @@ # Visual-Heatmap Js [](https://www.npmjs.com/package/visual-heatmap) [](https://www.npmjs.com/package/visual-heatmap) | ||
| <p align="center"> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a> | ||
| <a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a> | ||
| </p> | ||
| ## Installing | ||
| # Installing | ||
| If npm | ||
| npm | ||
| ``` | ||
| npm i visual-heatmap --save | ||
| ``` | ||
| Download source code from below links | ||
| Or Download source code from below links | ||
@@ -25,5 +25,9 @@ * [visualHeatmap.min.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.min.js) | ||
| Visual-Heatmap is written in ES6 Modules. To import use below syntax | ||
| Importing everything into namespace | ||
| # Usage | ||
| ### Importing | ||
| Visual-Heatmap provides ES6 and UMD modules. Accordingly module can be embeded into applications. | ||
| ``` | ||
@@ -33,12 +37,10 @@ import Heatmap from 'visual-heatmap' | ||
| ## VisualHeatmapJs - API | ||
| ### visualHeatmap() | ||
| visualHeatmap provides a API to create context **WebGL**. API accepts container/containerId and config as an input. A layer will be created under the provided Div #containerId. | ||
| ### Instance Creation API | ||
| visualHeatmap provides a API to create heatmap instance. API accepts container/containerId and config as an input. A context element will be created under the provided Div #containerId. | ||
| ```Javascript | ||
| let instance = Heatmap('#containerId', { | ||
| size: 30.0, | ||
| size: 30.0, //Radius of the data point, in pixels. Default: 20 | ||
| max: 100, // if not set, will be derived from data | ||
| min: 0, // if not set, will be derived from data | ||
| intensity: 1.0, | ||
| intensity: 1.0, | ||
| background: { | ||
@@ -69,29 +71,43 @@ url: "urlPath", | ||
| ``` | ||
| **Container/ContainerId** The container div element or a string CSS Query selector which identifies the container. | ||
| **Container/ContainerId** : The container div element or a string CSS Query selector which identifies the container. | ||
| **Config** | ||
| Object with config properties. | ||
| **Config Object** : | ||
| ``` | ||
| { | ||
| size : Radius of the data point, in pixels. | ||
| max : Max data Value for relative gradient computation. | ||
| min : Min data Value for relative gradient computation. | ||
| intensity : intensity factor. | ||
| opacity : Opacity factor. | ||
| rotationAngle : Rotation angle. | ||
| translate : translate vector [x, y]. | ||
| zoom : Zoom Factor. | ||
| size : Radius of the data point, in pixels. Default: 20 | ||
| max : Max data Value for relative gradient computation. if not set, will be derived from data. | ||
| min : Min data Value for relative gradient computation. if not set, will be derived from data. | ||
| intensity : intensity factor. Default: 1.0 | ||
| opacity : Opacity factor. Default: 1.0 | ||
| rotationAngle : Rotation angle. Default: 0 | ||
| translate : translate vector [x, y]. Default: [0,0] | ||
| zoom : Zoom Factor. Default: 1.0 | ||
| gradient : Color Gradient, array of objects with color value and offset. | ||
| background: To set background of the heatMap | ||
| background: To set background of the heatMap. Value : { url: , x: , y: , height: , width: } | ||
| } | ||
| ``` | ||
| ## Adding Data API | ||
| ### instance.renderData([]) | ||
| Accepts an array of data points with 'x', 'y' and 'value'. [Demo](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html) | ||
| ```Javascript | ||
| instance.renderData([{x: , y: , value: }]) | ||
| ``` | ||
| ### instance.addData([], transformationIntactflag); | ||
| Accepts an array of data points with 'x', 'y' and 'value' and a flag to specify to apply existing canvas transformations on the newly added data points. | ||
| Accepts an array of data points with 'x', 'y' and 'value' and a boolean flag to specify to apply existing heatmap transformations on the newly added data points. After adding data points, need to invoke `.render()` method to update the heatmap. | ||
| Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html) | ||
| ```Javascript | ||
| instance.addData([{x: , y: , value: }],transformationIntactflag) | ||
| ``` | ||
| ## Render API | ||
| Method to re-render the heatmap. This method needs to be invoked as and when configurations get changed. [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html) | ||
| ```Javascript | ||
| instance.render() | ||
| ``` | ||
| ## Configuration Setting API | ||
| ### instance.setMax(number) | ||
@@ -98,0 +114,0 @@ To set max data value, for relative gradient calculations. |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Improved metrics
- Number of low license alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by11.94%
150
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-98.25%
97735
- Number of package files
- decreased by-61.11%
7
- Lines of code
- decreased by-98.25%
1504
No dependency changes