chartjs-chart-matrix
Advanced tools
Comparing version
@@ -8,3 +8,3 @@ /*! | ||
import { DatasetController, Element } from 'chart.js'; | ||
import { toTRBLCorners, addRoundedRectPath, isObject } from 'chart.js/helpers'; | ||
import { isObject, toTRBLCorners, addRoundedRectPath } from 'chart.js/helpers'; | ||
@@ -14,177 +14,230 @@ var version = "0.0.0-development"; | ||
class MatrixController extends DatasetController { | ||
static id = 'matrix'; | ||
static version = version; | ||
static defaults = { | ||
initialize() { | ||
this.enableOptionSharing = true; | ||
super.initialize(); | ||
} | ||
update(mode) { | ||
const meta = this._cachedMeta; | ||
this.updateElements(meta.data, 0, meta.data.length, mode); | ||
} | ||
updateElements(rects, start, count, mode) { | ||
const reset = mode === 'reset'; | ||
const { xScale, yScale } = this._cachedMeta; | ||
const firstOpts = this.resolveDataElementOptions(start, mode); | ||
const sharedOptions = this.getSharedOptions(firstOpts); | ||
for(let i = start; i < start + count; i++){ | ||
const parsed = !reset && this.getParsed(i); | ||
const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x); | ||
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y); | ||
const options = this.resolveDataElementOptions(i, mode); | ||
const { width, height, anchorX, anchorY } = options; | ||
const properties = { | ||
x: resolveX(anchorX, x, width), | ||
y: resolveY(anchorY, y, height), | ||
width, | ||
height, | ||
options | ||
}; | ||
this.updateElement(rects[i], i, properties, mode); | ||
} | ||
this.updateSharedOptions(sharedOptions, mode, firstOpts); | ||
} | ||
draw() { | ||
const ctx = this.chart.ctx; | ||
const data = this.getMeta().data || []; | ||
let i, ilen; | ||
for(i = 0, ilen = data.length; i < ilen; ++i){ | ||
data[i].draw(ctx); | ||
} | ||
} | ||
} | ||
MatrixController.id = 'matrix'; | ||
MatrixController.version = version; | ||
MatrixController.defaults = { | ||
dataElementType: 'matrix', | ||
animations: { | ||
numbers: { | ||
type: 'number', | ||
properties: ['x', 'y', 'width', 'height'] | ||
} | ||
}, | ||
}; | ||
static overrides = { | ||
numbers: { | ||
type: 'number', | ||
properties: [ | ||
'x', | ||
'y', | ||
'width', | ||
'height' | ||
] | ||
} | ||
} | ||
}; | ||
MatrixController.overrides = { | ||
interaction: { | ||
mode: 'nearest', | ||
intersect: true | ||
mode: 'nearest', | ||
intersect: true | ||
}, | ||
scales: { | ||
x: { | ||
type: 'linear', | ||
offset: true | ||
}, | ||
y: { | ||
type: 'linear', | ||
reverse: true | ||
} | ||
}, | ||
}; | ||
initialize() { | ||
this.enableOptionSharing = true; | ||
super.initialize(); | ||
} | ||
update(mode) { | ||
const me = this; | ||
const meta = me._cachedMeta; | ||
me.updateElements(meta.data, 0, meta.data.length, mode); | ||
} | ||
updateElements(rects, start, count, mode) { | ||
const me = this; | ||
const reset = mode === 'reset'; | ||
const {xScale, yScale} = me._cachedMeta; | ||
const firstOpts = me.resolveDataElementOptions(start, mode); | ||
const sharedOptions = me.getSharedOptions(mode, rects[start], firstOpts); | ||
for (let i = start; i < start + count; i++) { | ||
const parsed = !reset && me.getParsed(i); | ||
const x = reset ? xScale.getBasePixel() : xScale.getPixelForValue(parsed.x); | ||
const y = reset ? yScale.getBasePixel() : yScale.getPixelForValue(parsed.y); | ||
const options = me.resolveDataElementOptions(i, mode); | ||
const {width, height, anchorX, anchorY} = options; | ||
const properties = { | ||
x: resolveX(anchorX, x, width), | ||
y: resolveY(anchorY, y, height), | ||
width, | ||
height, | ||
options | ||
}; | ||
me.updateElement(rects[i], i, properties, mode); | ||
x: { | ||
type: 'linear', | ||
offset: true | ||
}, | ||
y: { | ||
type: 'linear', | ||
reverse: true | ||
} | ||
} | ||
me.updateSharedOptions(sharedOptions, mode); | ||
} | ||
draw() { | ||
const me = this; | ||
const data = me.getMeta().data || []; | ||
let i, ilen; | ||
for (i = 0, ilen = data.length; i < ilen; ++i) { | ||
data[i].draw(me._ctx); | ||
}; | ||
function resolveX(anchorX, x, width) { | ||
if (anchorX === 'left' || anchorX === 'start') { | ||
return x; | ||
} | ||
} | ||
if (anchorX === 'right' || anchorX === 'end') { | ||
return x - width; | ||
} | ||
return x - width / 2; | ||
} | ||
function resolveX(anchorX, x, width) { | ||
if (anchorX === 'left' || anchorX === 'start') { | ||
return x; | ||
} | ||
if (anchorX === 'right' || anchorX === 'end') { | ||
return x - width; | ||
} | ||
return x - width / 2; | ||
} | ||
function resolveY(anchorY, y, height) { | ||
if (anchorY === 'top' || anchorY === 'start') { | ||
return y; | ||
} | ||
if (anchorY === 'bottom' || anchorY === 'end') { | ||
return y - height; | ||
} | ||
return y - height / 2; | ||
if (anchorY === 'top' || anchorY === 'start') { | ||
return y; | ||
} | ||
if (anchorY === 'bottom' || anchorY === 'end') { | ||
return y - height; | ||
} | ||
return y - height / 2; | ||
} | ||
/** | ||
* Helper function to get the bounds of the rect | ||
* @param {MatrixElement} rect the rect | ||
* @param {boolean} [useFinalPosition] | ||
* @return {object} bounds of the rect | ||
* @private | ||
*/ | ||
function getBounds(rect, useFinalPosition) { | ||
const {x, y, width, height} = rect.getProps(['x', 'y', 'width', 'height'], useFinalPosition); | ||
return {left: x, top: y, right: x + width, bottom: y + height}; | ||
function getBounds(element, useFinalPosition) { | ||
const { x, y, width, height } = element.getProps([ | ||
'x', | ||
'y', | ||
'width', | ||
'height' | ||
], useFinalPosition); | ||
return { | ||
left: x, | ||
top: y, | ||
right: x + width, | ||
bottom: y + height | ||
}; | ||
} | ||
function limit(value, min, max) { | ||
return Math.max(Math.min(value, max), min); | ||
return Math.max(Math.min(value, max), min); | ||
} | ||
function parseBorderWidth(rect, maxW, maxH) { | ||
const value = rect.options.borderWidth; | ||
let t, r, b, l; | ||
if (isObject(value)) { | ||
t = +value.top || 0; | ||
r = +value.right || 0; | ||
b = +value.bottom || 0; | ||
l = +value.left || 0; | ||
} else { | ||
t = r = b = l = +value || 0; | ||
} | ||
return { | ||
t: limit(t, 0, maxH), | ||
r: limit(r, 0, maxW), | ||
b: limit(b, 0, maxH), | ||
l: limit(l, 0, maxW) | ||
}; | ||
} | ||
function boundingRects(rect) { | ||
const bounds = getBounds(rect); | ||
const width = bounds.right - bounds.left; | ||
const height = bounds.bottom - bounds.top; | ||
const border = parseBorderWidth(rect, width / 2, height / 2); | ||
return { | ||
outer: { | ||
x: bounds.left, | ||
y: bounds.top, | ||
w: width, | ||
h: height | ||
}, | ||
inner: { | ||
x: bounds.left + border.l, | ||
y: bounds.top + border.t, | ||
w: width - border.l - border.r, | ||
h: height - border.t - border.b | ||
function parseBorderWidth(options, maxW, maxH) { | ||
const value = options.borderWidth; | ||
let t, r, b, l; | ||
if (isObject(value)) { | ||
t = +value.top || 0; | ||
r = +value.right || 0; | ||
b = +value.bottom || 0; | ||
l = +value.left || 0; | ||
} else { | ||
t = r = b = l = +value || 0; | ||
} | ||
}; | ||
return { | ||
t: limit(t, 0, maxH), | ||
r: limit(r, 0, maxW), | ||
b: limit(b, 0, maxH), | ||
l: limit(l, 0, maxW) | ||
}; | ||
} | ||
function inRange(rect, x, y, useFinalPosition) { | ||
const skipX = x === null; | ||
const skipY = y === null; | ||
const bounds = !rect || (skipX && skipY) ? false : getBounds(rect, useFinalPosition); | ||
return bounds | ||
&& (skipX || x >= bounds.left && x <= bounds.right) | ||
&& (skipY || y >= bounds.top && y <= bounds.bottom); | ||
function boundingRects(element) { | ||
const bounds = getBounds(element, false); | ||
const width = bounds.right - bounds.left; | ||
const height = bounds.bottom - bounds.top; | ||
const border = parseBorderWidth(element.options, width / 2, height / 2); | ||
return { | ||
outer: { | ||
x: bounds.left, | ||
y: bounds.top, | ||
w: width, | ||
h: height | ||
}, | ||
inner: { | ||
x: bounds.left + border.l, | ||
y: bounds.top + border.t, | ||
w: width - border.l - border.r, | ||
h: height - border.t - border.b | ||
} | ||
}; | ||
} | ||
function inRange(element, x, y, useFinalPosition) { | ||
const skipX = x === null; | ||
const skipY = y === null; | ||
const bounds = !element || skipX && skipY ? false : getBounds(element, useFinalPosition); | ||
return bounds && (skipX || x >= bounds.left && x <= bounds.right) && (skipY || y >= bounds.top && y <= bounds.bottom); | ||
} | ||
class MatrixElement extends Element { | ||
static id = 'matrix'; | ||
static defaults = { | ||
draw(ctx) { | ||
const options = this.options; | ||
const { inner, outer } = boundingRects(this); | ||
const radius = toTRBLCorners(options.borderRadius); | ||
ctx.save(); | ||
if (outer.w !== inner.w || outer.h !== inner.h) { | ||
ctx.beginPath(); | ||
addRoundedRectPath(ctx, { | ||
x: outer.x, | ||
y: outer.y, | ||
w: outer.w, | ||
h: outer.h, | ||
radius | ||
}); | ||
addRoundedRectPath(ctx, { | ||
x: inner.x, | ||
y: inner.y, | ||
w: inner.w, | ||
h: inner.h, | ||
radius | ||
}); | ||
ctx.fillStyle = options.backgroundColor; | ||
ctx.fill(); | ||
ctx.fillStyle = options.borderColor; | ||
ctx.fill('evenodd'); | ||
} else { | ||
ctx.beginPath(); | ||
addRoundedRectPath(ctx, { | ||
x: inner.x, | ||
y: inner.y, | ||
w: inner.w, | ||
h: inner.h, | ||
radius | ||
}); | ||
ctx.fillStyle = options.backgroundColor; | ||
ctx.fill(); | ||
} | ||
ctx.restore(); | ||
} | ||
inRange(mouseX, mouseY, useFinalPosition) { | ||
return inRange(this, mouseX, mouseY, useFinalPosition); | ||
} | ||
inXRange(mouseX, useFinalPosition) { | ||
return inRange(this, mouseX, null, useFinalPosition); | ||
} | ||
inYRange(mouseY, useFinalPosition) { | ||
return inRange(this, null, mouseY, useFinalPosition); | ||
} | ||
getCenterPoint(useFinalPosition) { | ||
const { x, y, width, height } = this.getProps([ | ||
'x', | ||
'y', | ||
'width', | ||
'height' | ||
], useFinalPosition); | ||
return { | ||
x: x + width / 2, | ||
y: y + height / 2 | ||
}; | ||
} | ||
tooltipPosition() { | ||
return this.getCenterPoint(); | ||
} | ||
getRange(axis) { | ||
return axis === 'x' ? this.width / 2 : this.height / 2; | ||
} | ||
constructor(cfg){ | ||
super(); | ||
if (cfg) { | ||
Object.assign(this, cfg); | ||
} | ||
} | ||
} | ||
MatrixElement.id = 'matrix'; | ||
MatrixElement.defaults = { | ||
backgroundColor: undefined, | ||
@@ -198,70 +251,4 @@ borderColor: undefined, | ||
height: 20 | ||
}; | ||
}; | ||
constructor(cfg) { | ||
super(); | ||
this.options = undefined; | ||
this.width = undefined; | ||
this.height = undefined; | ||
if (cfg) { | ||
Object.assign(this, cfg); | ||
} | ||
} | ||
draw(ctx) { | ||
const options = this.options; | ||
const {inner, outer} = boundingRects(this); | ||
const radius = toTRBLCorners(options.borderRadius); | ||
ctx.save(); | ||
if (outer.w !== inner.w || outer.h !== inner.h) { | ||
ctx.beginPath(); | ||
addRoundedRectPath(ctx, {x: outer.x, y: outer.y, w: outer.w, h: outer.h, radius}); | ||
addRoundedRectPath(ctx, {x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius}); | ||
ctx.fillStyle = options.backgroundColor; | ||
ctx.fill(); | ||
ctx.fillStyle = options.borderColor; | ||
ctx.fill('evenodd'); | ||
} else { | ||
ctx.beginPath(); | ||
addRoundedRectPath(ctx, {x: inner.x, y: inner.y, w: inner.w, h: inner.h, radius}); | ||
ctx.fillStyle = options.backgroundColor; | ||
ctx.fill(); | ||
} | ||
ctx.restore(); | ||
} | ||
inRange(mouseX, mouseY, useFinalPosition) { | ||
return inRange(this, mouseX, mouseY, useFinalPosition); | ||
} | ||
inXRange(mouseX, useFinalPosition) { | ||
return inRange(this, mouseX, null, useFinalPosition); | ||
} | ||
inYRange(mouseY, useFinalPosition) { | ||
return inRange(this, null, mouseY, useFinalPosition); | ||
} | ||
getCenterPoint(useFinalPosition) { | ||
const {x, y, width, height} = this.getProps(['x', 'y', 'width', 'height'], useFinalPosition); | ||
return { | ||
x: x + width / 2, | ||
y: y + height / 2 | ||
}; | ||
} | ||
tooltipPosition() { | ||
return this.getCenterPoint(); | ||
} | ||
getRange(axis) { | ||
return axis === 'x' ? this.width / 2 : this.height / 2; | ||
} | ||
} | ||
export { MatrixController, MatrixElement }; |
@@ -7,3 +7,3 @@ /*! | ||
*/ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["exports","chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-chart-matrix"]={},t.Chart,t.Chart.helpers)}(this,(function(t,e,i){"use strict";class r extends e.DatasetController{static id="matrix";static version="0.0.0-development";static defaults={dataElementType:"matrix",animations:{numbers:{type:"number",properties:["x","y","width","height"]}}};static overrides={interaction:{mode:"nearest",intersect:!0},scales:{x:{type:"linear",offset:!0},y:{type:"linear",reverse:!0}}};initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)}updateElements(t,e,i,r){const s=this,a="reset"===r,{xScale:h,yScale:l}=s._cachedMeta,d=s.resolveDataElementOptions(e,r),c=s.getSharedOptions(r,t[e],d);for(let d=e;d<e+i;d++){const e=!a&&s.getParsed(d),i=a?h.getBasePixel():h.getPixelForValue(e.x),c=a?l.getBasePixel():l.getPixelForValue(e.y),u=s.resolveDataElementOptions(d,r),{width:g,height:p,anchorX:f,anchorY:x}=u,y={x:n(f,i,g),y:o(x,c,p),width:g,height:p,options:u};s.updateElement(t[d],d,y,r)}s.updateSharedOptions(c,r)}draw(){const t=this,e=t.getMeta().data||[];let i,r;for(i=0,r=e.length;i<r;++i)e[i].draw(t._ctx)}}function n(t,e,i){return"left"===t||"start"===t?e:"right"===t||"end"===t?e-i:e-i/2}function o(t,e,i){return"top"===t||"start"===t?e:"bottom"===t||"end"===t?e-i:e-i/2}function s(t,e){const{x:i,y:r,width:n,height:o}=t.getProps(["x","y","width","height"],e);return{left:i,top:r,right:i+n,bottom:r+o}}function a(t,e,i){return Math.max(Math.min(t,i),e)}function h(t){const e=s(t),r=e.right-e.left,n=e.bottom-e.top,o=function(t,e,r){const n=t.options.borderWidth;let o,s,h,l;return i.isObject(n)?(o=+n.top||0,s=+n.right||0,h=+n.bottom||0,l=+n.left||0):o=s=h=l=+n||0,{t:a(o,0,r),r:a(s,0,e),b:a(h,0,r),l:a(l,0,e)}}(t,r/2,n/2);return{outer:{x:e.left,y:e.top,w:r,h:n},inner:{x:e.left+o.l,y:e.top+o.t,w:r-o.l-o.r,h:n-o.t-o.b}}}function l(t,e,i,r){const n=null===e,o=null===i,a=!(!t||n&&o)&&s(t,r);return a&&(n||e>=a.left&&e<=a.right)&&(o||i>=a.top&&i<=a.bottom)}class d extends e.Element{static id="matrix";static defaults={backgroundColor:void 0,borderColor:void 0,borderWidth:void 0,borderRadius:0,anchorX:"center",anchorY:"center",width:20,height:20};constructor(t){super(),this.options=void 0,this.width=void 0,this.height=void 0,t&&Object.assign(this,t)}draw(t){const e=this.options,{inner:r,outer:n}=h(this),o=i.toTRBLCorners(e.borderRadius);t.save(),n.w!==r.w||n.h!==r.h?(t.beginPath(),i.addRoundedRectPath(t,{x:n.x,y:n.y,w:n.w,h:n.h,radius:o}),i.addRoundedRectPath(t,{x:r.x,y:r.y,w:r.w,h:r.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.beginPath(),i.addRoundedRectPath(t,{x:r.x,y:r.y,w:r.w,h:r.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill()),t.restore()}inRange(t,e,i){return l(this,t,e,i)}inXRange(t,e){return l(this,t,null,e)}inYRange(t,e){return l(this,null,t,e)}getCenterPoint(t){const{x:e,y:i,width:r,height:n}=this.getProps(["x","y","width","height"],t);return{x:e+r/2,y:i+n/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}}e.Chart.register(r,d),t.MatrixController=r,t.MatrixElement=d})); | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("chart.js"),require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["exports","chart.js","chart.js/helpers"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["chartjs-chart-matrix"]={},t.Chart,t.Chart.helpers)}(this,(function(t,e,r){"use strict";class i extends e.DatasetController{initialize(){this.enableOptionSharing=!0,super.initialize()}update(t){const e=this._cachedMeta;this.updateElements(e.data,0,e.data.length,t)}updateElements(t,e,r,i){const s="reset"===i,{xScale:a,yScale:h}=this._cachedMeta,l=this.resolveDataElementOptions(e,i),d=this.getSharedOptions(l);for(let l=e;l<e+r;l++){const e=!s&&this.getParsed(l),r=s?a.getBasePixel():a.getPixelForValue(e.x),d=s?h.getBasePixel():h.getPixelForValue(e.y),u=this.resolveDataElementOptions(l,i),{width:c,height:g,anchorX:p,anchorY:f}=u,x={x:n(p,r,c),y:o(f,d,g),width:c,height:g,options:u};this.updateElement(t[l],l,x,i)}this.updateSharedOptions(d,i,l)}draw(){const t=this.chart.ctx,e=this.getMeta().data||[];let r,i;for(r=0,i=e.length;r<i;++r)e[r].draw(t)}}function n(t,e,r){return"left"===t||"start"===t?e:"right"===t||"end"===t?e-r:e-r/2}function o(t,e,r){return"top"===t||"start"===t?e:"bottom"===t||"end"===t?e-r:e-r/2}function s(t,e){const{x:r,y:i,width:n,height:o}=t.getProps(["x","y","width","height"],e);return{left:r,top:i,right:r+n,bottom:i+o}}function a(t,e,r){return Math.max(Math.min(t,r),e)}function h(t){const e=s(t,!1),i=e.right-e.left,n=e.bottom-e.top,o=function(t,e,i){const n=t.borderWidth;let o,s,h,l;return r.isObject(n)?(o=+n.top||0,s=+n.right||0,h=+n.bottom||0,l=+n.left||0):o=s=h=l=+n||0,{t:a(o,0,i),r:a(s,0,e),b:a(h,0,i),l:a(l,0,e)}}(t.options,i/2,n/2);return{outer:{x:e.left,y:e.top,w:i,h:n},inner:{x:e.left+o.l,y:e.top+o.t,w:i-o.l-o.r,h:n-o.t-o.b}}}function l(t,e,r,i){const n=null===e,o=null===r,a=!(!t||n&&o)&&s(t,i);return a&&(n||e>=a.left&&e<=a.right)&&(o||r>=a.top&&r<=a.bottom)}i.id="matrix",i.version="0.0.0-development",i.defaults={dataElementType:"matrix",animations:{numbers:{type:"number",properties:["x","y","width","height"]}}},i.overrides={interaction:{mode:"nearest",intersect:!0},scales:{x:{type:"linear",offset:!0},y:{type:"linear",reverse:!0}}};class d extends e.Element{draw(t){const e=this.options,{inner:i,outer:n}=h(this),o=r.toTRBLCorners(e.borderRadius);t.save(),n.w!==i.w||n.h!==i.h?(t.beginPath(),r.addRoundedRectPath(t,{x:n.x,y:n.y,w:n.w,h:n.h,radius:o}),r.addRoundedRectPath(t,{x:i.x,y:i.y,w:i.w,h:i.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill(),t.fillStyle=e.borderColor,t.fill("evenodd")):(t.beginPath(),r.addRoundedRectPath(t,{x:i.x,y:i.y,w:i.w,h:i.h,radius:o}),t.fillStyle=e.backgroundColor,t.fill()),t.restore()}inRange(t,e,r){return l(this,t,e,r)}inXRange(t,e){return l(this,t,null,e)}inYRange(t,e){return l(this,null,t,e)}getCenterPoint(t){const{x:e,y:r,width:i,height:n}=this.getProps(["x","y","width","height"],t);return{x:e+i/2,y:r+n/2}}tooltipPosition(){return this.getCenterPoint()}getRange(t){return"x"===t?this.width/2:this.height/2}constructor(t){super(),t&&Object.assign(this,t)}}d.id="matrix",d.defaults={backgroundColor:void 0,borderColor:void 0,borderWidth:void 0,borderRadius:0,anchorX:"center",anchorY:"center",width:20,height:20},e.Chart.register(i,d),t.MatrixController=i,t.MatrixElement=d})); | ||
//# sourceMappingURL=chartjs-chart-matrix.min.js.map |
{ | ||
"name": "chartjs-chart-matrix", | ||
"version": "2.1.1", | ||
"version": "3.0.0", | ||
"description": "Chart.js module for creating matrix charts", | ||
@@ -25,10 +25,10 @@ "type": "module", | ||
"dev": "karma start ./karma.conf.cjs --no-single-run --auto-watch --browsers chrome", | ||
"dev:ff": "karma start ./karma.conf.cjs --auto-watch --no-single-run --browsers firefox", | ||
"docs": "npm run build && vuepress build docs --no-cache", | ||
"docs:dev": "npm run build && vuepress dev docs --no-cache", | ||
"lint": "concurrently -r \"npm:lint-*\"", | ||
"lint-js": "eslint \"src/**/*.js\" \"test/**/*.js\" \"docs/**/*.js\"", | ||
"lint-md": "eslint \"**/*.md\"", | ||
"lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/", | ||
"lint": "eslint", | ||
"typecheck": "tsc --noEmit && tsc --noEmit -p types/tests/", | ||
"test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"", | ||
"test-lint": "npm run lint", | ||
"pretest-unit": "swc --config-file .swcrc-spec src -d build", | ||
"test-unit": "cross-env JASMINE_CONFIG_PATH=jasmine.json c8 --src=src --reporter=text --reporter=lcov -o=coverage/unit jasmine", | ||
"test-karma": "karma start ./karma.conf.cjs --no-auto-watch --single-run", | ||
@@ -59,9 +59,17 @@ "test-integration:node-commonjs": "npm run test --prefix test/integration/node-commonjs", | ||
"devDependencies": { | ||
"@eslint/js": "^9.22.0", | ||
"@eslint/markdown": "^6.3.0", | ||
"@napi-rs/canvas": "^0.1.30", | ||
"@rollup/plugin-commonjs": "^28.0.1", | ||
"@rollup/plugin-json": "^6.0.0", | ||
"@rollup/plugin-node-resolve": "^15.0.1", | ||
"@rollup/plugin-terser": "^0.4.0", | ||
"@typescript-eslint/eslint-plugin": "^5.6.0", | ||
"@typescript-eslint/parser": "^5.6.0", | ||
"@rollup/plugin-node-resolve": "^16.0.1", | ||
"@rollup/plugin-swc": "^0.4.0", | ||
"@rollup/plugin-terser": "^0.4.4", | ||
"@swc/cli": "^0.6.0", | ||
"@swc/core": "^1.11.9", | ||
"@types/jasmine": "^5.1.7", | ||
"@types/node": "^22.13.10", | ||
"@typescript-eslint/eslint-plugin": "^8.26.1", | ||
"@typescript-eslint/parser": "^8.26.1", | ||
"c8": "^10.1.3", | ||
"chart.js": "^4.0.1", | ||
@@ -73,7 +81,10 @@ "chartjs-adapter-date-fns": "^3.0.0", | ||
"date-fns": "^2.19.0", | ||
"eslint": "^8.4.1", | ||
"eslint": "^9.22.0", | ||
"eslint-config-chartjs": "^0.3.0", | ||
"eslint-plugin-es": "^4.1.0", | ||
"eslint-plugin-html": "^8.1.2", | ||
"eslint-plugin-markdown": "^3.0.0", | ||
"eslint-config-prettier": "^10.1.1", | ||
"eslint-plugin-prettier": "^5.2.3", | ||
"eslint-plugin-simple-import-sort": "^12.1.1", | ||
"eslint-plugin-unused-imports": "^4.1.4", | ||
"globals": "^16.0.0", | ||
"jasmine": "^5.6.0", | ||
"jasmine-core": "^5.1.2", | ||
@@ -86,7 +97,7 @@ "karma": "^6.2.0", | ||
"karma-jasmine-html-reporter": "^2.0.0", | ||
"karma-rollup-preprocessor": "7.0.8", | ||
"karma-rollup-preprocessor": "^7.0.7", | ||
"karma-spec-reporter": "^0.0.36", | ||
"pixelmatch": "^6.0.0", | ||
"rollup": "^4.21.2", | ||
"rollup-plugin-analyzer": "^4.0.0", | ||
"rollup-plugin-cleanup": "^3.2.1", | ||
"rollup-plugin-istanbul": "^5.0.0", | ||
@@ -93,0 +104,0 @@ "typescript": "^5.3.3", |
@@ -8,5 +8,6 @@ # chartjs-chart-matrix | ||
 | ||
 | ||
[](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-matrix) | ||
[](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-chart-matrix) | ||
[](https://chartjs-chart-matrix.pages.dev) | ||
 | ||
@@ -13,0 +14,0 @@ ## Example |
@@ -6,3 +6,2 @@ import { | ||
ChartComponent, | ||
ChartType, | ||
CommonElementOptions, | ||
@@ -16,16 +15,25 @@ CommonHoverOptions, | ||
ScriptableContext, | ||
VisualElement | ||
} from 'chart.js'; | ||
VisualElement, | ||
} from 'chart.js' | ||
type AnyObject = Record<string, unknown>; | ||
type AnyObject = Record<string, unknown> | ||
export interface MatrixControllerDatasetOptions<TType extends ChartType> | ||
export type AnchorX = 'left' | 'center' | 'right' | 'start' | 'end' | ||
export type AnchorY = 'top' | 'center' | 'bottom' | 'start' | 'end' | ||
export interface MatrixOptions extends Omit<CommonElementOptions, 'borderWidth'> { | ||
borderRadius: number | BorderRadius | ||
borderWidth: number | { top?: number; right?: number; bottom?: number; left?: number } | ||
anchorX: AnchorX | ||
anchorY: AnchorY | ||
width: number | ||
height: number | ||
} | ||
export interface MatrixControllerDatasetOptions | ||
extends ControllerDatasetOptions, | ||
ScriptableAndArrayOptions<MatrixOptions, ScriptableContext<TType>>, | ||
ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<TType>> { | ||
} | ||
ScriptableAndArrayOptions<MatrixOptions, ScriptableContext<'matrix'>>, | ||
ScriptableAndArrayOptions<CommonHoverOptions, ScriptableContext<'matrix'>> {} | ||
export interface MatrixDataPoint { | ||
x: number, | ||
y: number, | ||
x: number | ||
y: number | ||
} | ||
@@ -36,8 +44,8 @@ | ||
matrix: { | ||
chartOptions: CoreChartOptions<'matrix'>; | ||
datasetOptions: MatrixControllerDatasetOptions<'matrix'>; | ||
defaultDataPoint: MatrixDataPoint; | ||
parsedDataType: MatrixDataPoint; | ||
metaExtensions: AnyObject; | ||
scales: keyof CartesianScaleTypeRegistry; | ||
chartOptions: CoreChartOptions<'matrix'> | ||
datasetOptions: MatrixControllerDatasetOptions | ||
defaultDataPoint: MatrixDataPoint | ||
parsedDataType: MatrixDataPoint | ||
metaExtensions: AnyObject | ||
scales: keyof CartesianScaleTypeRegistry | ||
} | ||
@@ -48,32 +56,22 @@ } | ||
export interface MatrixProps { | ||
x: number; | ||
y: number; | ||
width: number; | ||
height: number; | ||
x: number | ||
y: number | ||
width: number | ||
height: number | ||
options?: Partial<MatrixOptions> | ||
} | ||
export type AnchorX = 'left' | 'center' | 'right'; | ||
export type AnchorY = 'top' | 'center' | 'bottom'; | ||
export interface MatrixOptions extends CommonElementOptions { | ||
borderRadius: number | BorderRadius; | ||
anchorX: AnchorX; | ||
anchorY: AnchorY; | ||
width: number; | ||
height: number; | ||
export type MatrixController = DatasetController | ||
export const MatrixController: ChartComponent & { | ||
prototype: MatrixController | ||
new (chart: Chart, datasetIndex: number): MatrixController | ||
} | ||
export type MatrixController = DatasetController; | ||
export const MatrixController: ChartComponent & { | ||
prototype: MatrixController; | ||
new (chart: Chart, datasetIndex: number): MatrixController; | ||
}; | ||
export interface MatrixElement<T extends MatrixProps = MatrixProps, O extends MatrixOptions = MatrixOptions> | ||
extends Element<T, O>, | ||
VisualElement {} | ||
export interface MatrixElement< | ||
T extends MatrixProps = MatrixProps, | ||
O extends MatrixOptions = MatrixOptions | ||
> extends Element<T, O>, VisualElement {} | ||
export const MatrixElement: ChartComponent & { | ||
prototype: MatrixElement; | ||
new (cfg: AnyObject): MatrixElement; | ||
}; | ||
prototype: MatrixElement | ||
new (cfg: AnyObject): MatrixElement | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
41613
8.62%583
8.57%89
1.14%0
-100%47
30.56%