From 1bf5f6968c6ce3427db3b7c5309f0eec01ca26fc Mon Sep 17 00:00:00 2001 From: Henrik Rypkema Date: Thu, 21 Mar 2019 11:13:44 -0400 Subject: [PATCH] Release v0.0.5 --- dist/chartist-plugin-threshold.js | 6 ++++-- dist/chartist-plugin-threshold.min.js | 6 +++--- dist/chartist-plugin-threshold.min.js.map | 2 +- package.json | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/dist/chartist-plugin-threshold.js b/dist/chartist-plugin-threshold.js index 53011c5..951acfc 100644 --- a/dist/chartist-plugin-threshold.js +++ b/dist/chartist-plugin-threshold.js @@ -207,16 +207,18 @@ ) { // Cloning the original line path, mask it with the upper mask rect above the threshold and add the // class for above threshold + // Ensure the cloned path is added as the first element of the parent node + // Ref for `elem()`: https://github.com/gionkunz/chartist-js/blob/master/src/scripts/svg.js#L94 data.element .parent() - .elem(data.element._node.cloneNode(true)) + .elem(data.element._node.cloneNode(true), {}, '', true) .attr({ mask: 'url(#' + options.maskNames.aboveThresholdID + ')' }) .addClass(options.classNames.aboveThreshold); // Use the original line path, mask it with the lower mask rect below the threshold and add the class - // for blow threshold + // for below threshold data.element .attr({ mask: 'url(#' + options.maskNames.belowThresholdID + ')' diff --git a/dist/chartist-plugin-threshold.min.js b/dist/chartist-plugin-threshold.min.js index 8c1da33..b648d40 100644 --- a/dist/chartist-plugin-threshold.min.js +++ b/dist/chartist-plugin-threshold.min.js @@ -1,8 +1,8 @@ -/* chartist-plugin-threshold 0.0.4 - * Copyright © 2018 Gion Kunz +/* chartist-plugin-threshold 0.0.5 + * Copyright © 2019 Gion Kunz * Free to use under the WTFPL license. * http://www.wtfpl.net/ */ -!function(a,b){"function"==typeof define&&define.amd?define(["chartist"],function(c){return a.returnExportsGlobal=b(c)}):"object"==typeof exports?module.exports=b(require("chartist")):a["Chartist.plugins.ctThreshold"]=b(Chartist)}(this,function(a){return function(a,b,c){"use strict";function d(a,b){var c,d,e,f=a.svg.querySelector("defs")||a.svg.elem("defs"),g=a.svg.width(),h=a.svg.height();if(a.options.horizontalBars?(c=a.axisX.projectValue(b.threshold)+a.chartRect.x1,d={x:c,y:0,width:g-c,height:h,fill:"white"},e={x:0,y:0,width:c,height:h,fill:"white"}):(c=a.chartRect.height()-a.axisY.projectValue(b.threshold)+a.chartRect.y2,d={x:0,y:0,width:g,height:c,fill:"white"},e={x:0,y:c,width:g,height:h-c,fill:"white"}),d.x<0&&(d.x=0),d.y<0&&(d.y=0),d.width<0&&(d.width=0),d.height<0&&(d.height=0),e.x<0&&(e.x=0),e.y<0&&(e.y=0),e.width<0&&(e.width=0),e.height<0&&(e.height=0),f.elem("mask",{x:0,y:0,width:g,height:h,maskUnits:"userSpaceOnUse",id:b.maskNames.aboveThresholdID}).elem("rect",d),f.elem("mask",{x:0,y:0,width:g,height:h,maskUnits:"userSpaceOnUse",id:b.maskNames.belowThresholdID}).elem("rect",e),b.showIndicator){var i,j,k,l=a.svg.querySelector("g.ct-indicator")||a.svg.elem("g").addClass("ct-indicator");a.options.horizontalBars?(i=c,j=10,k={x1:c,x2:c,y1:0,y2:h}):(i=10,j=c,k={x1:0,x2:g,y1:c,y2:c}),l.elem("text",{x:i,y:j,style:"text-anchor: middle"},"ct-label ct-value-label").text(b.threshold),l.elem("line",k,"ct-grid ct-horizontal")}return f}var e={threshold:0,showIndicator:!1,classNames:{aboveThreshold:"ct-threshold-above",belowThreshold:"ct-threshold-below"},maskNames:{aboveThreshold:"ct-threshold-mask-above",belowThreshold:"ct-threshold-mask-below"}};c.plugins=c.plugins||{},c.plugins.ctThreshold=function(a){return a=c.extend({},e,a),a.maskNames.aboveThresholdID=a.maskNames.aboveThreshold+"-"+Math.random().toString(36).substr(2,9),a.maskNames.belowThresholdID=a.maskNames.belowThreshold+"-"+Math.random().toString(36).substr(2,9),function(b){(b instanceof c.Line||b instanceof c.Bar)&&(b.on("draw",function(b){"point"===b.type?b.element.addClass(b.value.y>=a.threshold?a.classNames.aboveThreshold:a.classNames.belowThreshold):"line"!==b.type&&"bar"!==b.type&&"area"!==b.type||(b.element.parent().elem(b.element._node.cloneNode(!0)).attr({mask:"url(#"+a.maskNames.aboveThresholdID+")"}).addClass(a.classNames.aboveThreshold),b.element.attr({mask:"url(#"+a.maskNames.belowThresholdID+")"}).addClass(a.classNames.belowThreshold))}),b.on("created",function(b){d(b,a)}))}}}(window,document,a),a.plugins.ctThreshold}); +!function(a,b){"function"==typeof define&&define.amd?define(["chartist"],function(c){return a.returnExportsGlobal=b(c)}):"object"==typeof exports?module.exports=b(require("chartist")):a["Chartist.plugins.ctThreshold"]=b(Chartist)}(this,function(a){return function(a,b,c){"use strict";function d(a,b){var c,d,e,f=a.svg.querySelector("defs")||a.svg.elem("defs"),g=a.svg.width(),h=a.svg.height();if(a.options.horizontalBars?(c=a.axisX.projectValue(b.threshold)+a.chartRect.x1,d={x:c,y:0,width:g-c,height:h,fill:"white"},e={x:0,y:0,width:c,height:h,fill:"white"}):(c=a.chartRect.height()-a.axisY.projectValue(b.threshold)+a.chartRect.y2,d={x:0,y:0,width:g,height:c,fill:"white"},e={x:0,y:c,width:g,height:h-c,fill:"white"}),d.x<0&&(d.x=0),d.y<0&&(d.y=0),d.width<0&&(d.width=0),d.height<0&&(d.height=0),e.x<0&&(e.x=0),e.y<0&&(e.y=0),e.width<0&&(e.width=0),e.height<0&&(e.height=0),f.elem("mask",{x:0,y:0,width:g,height:h,maskUnits:"userSpaceOnUse",id:b.maskNames.aboveThresholdID}).elem("rect",d),f.elem("mask",{x:0,y:0,width:g,height:h,maskUnits:"userSpaceOnUse",id:b.maskNames.belowThresholdID}).elem("rect",e),b.showIndicator){var i,j,k,l=a.svg.querySelector("g.ct-indicator")||a.svg.elem("g").addClass("ct-indicator");a.options.horizontalBars?(i=c,j=10,k={x1:c,x2:c,y1:0,y2:h}):(i=10,j=c,k={x1:0,x2:g,y1:c,y2:c}),l.elem("text",{x:i,y:j,style:"text-anchor: middle"},"ct-label ct-value-label").text(b.threshold),l.elem("line",k,"ct-grid ct-horizontal")}return f}var e={threshold:0,showIndicator:!1,classNames:{aboveThreshold:"ct-threshold-above",belowThreshold:"ct-threshold-below"},maskNames:{aboveThreshold:"ct-threshold-mask-above",belowThreshold:"ct-threshold-mask-below"}};c.plugins=c.plugins||{},c.plugins.ctThreshold=function(a){return a=c.extend({},e,a),a.maskNames.aboveThresholdID=a.maskNames.aboveThreshold+"-"+Math.random().toString(36).substr(2,9),a.maskNames.belowThresholdID=a.maskNames.belowThreshold+"-"+Math.random().toString(36).substr(2,9),function(b){(b instanceof c.Line||b instanceof c.Bar)&&(b.on("draw",function(b){"point"===b.type?b.element.addClass(b.value.y>=a.threshold?a.classNames.aboveThreshold:a.classNames.belowThreshold):"line"!==b.type&&"bar"!==b.type&&"area"!==b.type||(b.element.parent().elem(b.element._node.cloneNode(!0),{},"",!0).attr({mask:"url(#"+a.maskNames.aboveThresholdID+")"}).addClass(a.classNames.aboveThreshold),b.element.attr({mask:"url(#"+a.maskNames.belowThresholdID+")"}).addClass(a.classNames.belowThreshold))}),b.on("created",function(b){d(b,a)}))}}}(window,document,a),a.plugins.ctThreshold}); //# sourceMappingURL=chartist-plugin-threshold.min.js.map \ No newline at end of file diff --git a/dist/chartist-plugin-threshold.min.js.map b/dist/chartist-plugin-threshold.min.js.map index 7288f04..99b473d 100644 --- a/dist/chartist-plugin-threshold.min.js.map +++ b/dist/chartist-plugin-threshold.min.js.map @@ -1 +1 @@ -{"version":3,"sources":["chartist-plugin-threshold.js"],"names":["root","factory","define","amd","Chartist","returnExportsGlobal","exports","module","require","this","window","document","createMasks","data","options","projectedThreshold","aboveRect","belowRect","defs","svg","querySelector","elem","width","height","horizontalBars","axisX","projectValue","threshold","chartRect","x1","x","y","fill","axisY","y2","maskUnits","id","maskNames","aboveThresholdID","belowThresholdID","showIndicator","textX","textY","line","group","addClass","x2","y1","style","text","defaultOptions","classNames","aboveThreshold","belowThreshold","plugins","ctThreshold","extend","Math","random","toString","substr","chart","Line","Bar","on","type","element","value","parent","_node","cloneNode","attr","mask"],"mappings":"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","file":"chartist-plugin-threshold.min.js","sourcesContent":["(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define([\"chartist\"], function (Chartist) {\n return (root.returnExportsGlobal = factory(Chartist));\n });\n } else if (typeof exports === 'object') {\n // Node. Does not work with strict CommonJS, but\n // only CommonJS-like enviroments that support module.exports,\n // like Node.\n module.exports = factory(require(\"chartist\"));\n } else {\n root['Chartist.plugins.ctThreshold'] = factory(Chartist);\n }\n}(this, function (Chartist) {\n\n /**\n * Chartist.js plugin to divide your Line or Bar chart with a threshold.\n *\n */\n /* global Chartist */\n (function (window, document, Chartist) {\n 'use strict';\n\n var defaultOptions = {\n threshold: 0,\n showIndicator: false,\n classNames: {\n aboveThreshold: 'ct-threshold-above',\n belowThreshold: 'ct-threshold-below'\n },\n maskNames: {\n aboveThreshold: 'ct-threshold-mask-above',\n belowThreshold: 'ct-threshold-mask-below'\n }\n };\n\n function createMasks(data, options) {\n // Select the defs element within the chart or create a new one\n var defs = data.svg.querySelector('defs') || data.svg.elem('defs');\n var width = data.svg.width();\n var height = data.svg.height();\n var projectedThreshold, aboveRect, belowRect;\n\n if (!data.options.horizontalBars) {\n // Project the threshold value on the chart Y axis\n projectedThreshold =\n data.chartRect.height() -\n data.axisY.projectValue(options.threshold) +\n data.chartRect.y2;\n\n aboveRect = {\n x: 0,\n y: 0,\n width: width,\n height: projectedThreshold,\n fill: 'white'\n };\n\n belowRect = {\n x: 0,\n y: projectedThreshold,\n width: width,\n height: height - projectedThreshold,\n fill: 'white'\n };\n } else {\n // Project the threshold value on the chart X axis\n projectedThreshold =\n data.axisX.projectValue(options.threshold) +\n data.chartRect.x1;\n\n aboveRect = {\n x: projectedThreshold,\n y: 0,\n width: width - projectedThreshold,\n height: height,\n fill: 'white'\n };\n\n belowRect = {\n x: 0,\n y: 0,\n width: projectedThreshold,\n height: height,\n fill: 'white'\n };\n }\n\n // Ensure no width, height, x or y values are negative values, as they are invalid\n if (aboveRect.x < 0) {\n aboveRect.x = 0;\n }\n if (aboveRect.y < 0) {\n aboveRect.y = 0;\n }\n if (aboveRect.width < 0) {\n aboveRect.width = 0;\n }\n if (aboveRect.height < 0) {\n aboveRect.height = 0;\n }\n if (belowRect.x < 0) {\n belowRect.x = 0;\n }\n if (belowRect.y < 0) {\n belowRect.y = 0;\n }\n if (belowRect.width < 0) {\n belowRect.width = 0;\n }\n if (belowRect.height < 0) {\n belowRect.height = 0;\n }\n\n // Create mask for upper part above threshold\n defs\n .elem('mask', {\n x: 0,\n y: 0,\n width: width,\n height: height,\n maskUnits: 'userSpaceOnUse',\n id: options.maskNames.aboveThresholdID\n })\n .elem('rect', aboveRect);\n\n // Create mask for lower part below threshold\n defs\n .elem('mask', {\n x: 0,\n y: 0,\n width: width,\n height: height,\n maskUnits: 'userSpaceOnUse',\n id: options.maskNames.belowThresholdID\n })\n .elem('rect', belowRect);\n\n // Show a line indicator and label where the threshold is\n if (options.showIndicator) {\n // Select the group element within the chart or create a new one\n var group = data.svg.querySelector('g.ct-indicator') || data.svg.elem('g').addClass('ct-indicator');\n var textX, textY, line;\n\n // Project the threshold values for the line and label\n if (data.options.horizontalBars) {\n textX = projectedThreshold;\n textY = 10;\n line = {\n x1: projectedThreshold,\n x2: projectedThreshold,\n y1: 0,\n y2: height,\n };\n } else {\n textX = 10;\n textY = projectedThreshold;\n line = {\n x1: 0,\n x2: width,\n y1: projectedThreshold,\n y2: projectedThreshold,\n };\n }\n\n group\n .elem('text', {\n x: textX,\n y: textY,\n style: 'text-anchor: middle',\n }, 'ct-label ct-value-label')\n .text(options.threshold);\n\n group\n .elem('line',\n line,\n 'ct-grid ct-horizontal'\n );\n }\n\n return defs;\n }\n\n Chartist.plugins = Chartist.plugins || {};\n Chartist.plugins.ctThreshold = function (options) {\n\n options = Chartist.extend({}, defaultOptions, options);\n\n // Ensure mask names are unique\n options.maskNames.aboveThresholdID = options.maskNames.aboveThreshold + '-' + Math.random().toString(36).substr(2, 9);\n options.maskNames.belowThresholdID = options.maskNames.belowThreshold + '-' + Math.random().toString(36).substr(2, 9);\n\n return function ctThreshold(chart) {\n if (chart instanceof Chartist.Line || chart instanceof Chartist.Bar) {\n chart.on('draw', function (data) {\n if (data.type === 'point') {\n // For points we can just use the data value and compare against the threshold in order to determine\n // the appropriate class\n data.element.addClass(\n data.value.y >= options.threshold ? options.classNames.aboveThreshold : options.classNames.belowThreshold\n );\n } else if (\n data.type === 'line' ||\n data.type === 'bar' ||\n data.type === 'area'\n ) {\n // Cloning the original line path, mask it with the upper mask rect above the threshold and add the\n // class for above threshold\n data.element\n .parent()\n .elem(data.element._node.cloneNode(true))\n .attr({\n mask: 'url(#' + options.maskNames.aboveThresholdID + ')'\n })\n .addClass(options.classNames.aboveThreshold);\n\n // Use the original line path, mask it with the lower mask rect below the threshold and add the class\n // for blow threshold\n data.element\n .attr({\n mask: 'url(#' + options.maskNames.belowThresholdID + ')'\n })\n .addClass(options.classNames.belowThreshold);\n }\n });\n\n // On the created event, create the two mask definitions used to mask the line graphs\n chart.on('created', function (data) {\n createMasks(data, options);\n });\n }\n };\n };\n }(window, document, Chartist));\n\n return Chartist.plugins.ctThreshold;\n\n}));\n"]} \ No newline at end of file +{"version":3,"sources":["chartist-plugin-threshold.js"],"names":["root","factory","define","amd","Chartist","returnExportsGlobal","exports","module","require","this","window","document","createMasks","data","options","projectedThreshold","aboveRect","belowRect","defs","svg","querySelector","elem","width","height","horizontalBars","axisX","projectValue","threshold","chartRect","x1","x","y","fill","axisY","y2","maskUnits","id","maskNames","aboveThresholdID","belowThresholdID","showIndicator","textX","textY","line","group","addClass","x2","y1","style","text","defaultOptions","classNames","aboveThreshold","belowThreshold","plugins","ctThreshold","extend","Math","random","toString","substr","chart","Line","Bar","on","type","element","value","parent","_node","cloneNode","attr","mask"],"mappings":";;;;;;CAAC,SAAUA,EAAMC,GACO,kBAAXC,SAAyBA,OAAOC,IAEzCD,QAAQ,YAAa,SAAUE,GAC7B,MAAQJ,GAAKK,oBAAsBJ,EAAQG,KAEjB,gBAAZE,SAIhBC,OAAOD,QAAUL,EAAQO,QAAQ,aAEjCR,EAAK,gCAAkCC,EAAQG,WAEjDK,KAAM,SAAUL,GAgOhB,MAzNC,UAAUM,EAAQC,EAAUP,GAC3B,YAeA,SAASQ,GAAYC,EAAMC,GAEzB,GAGIC,GAAoBC,EAAWC,EAH/BC,EAAOL,EAAKM,IAAIC,cAAc,SAAWP,EAAKM,IAAIE,KAAK,QACvDC,EAAQT,EAAKM,IAAIG,QACjBC,EAASV,EAAKM,IAAII,QAmGtB,IAhGKV,EAAKC,QAAQU,gBAwBhBT,EACEF,EAAKY,MAAMC,aAAaZ,EAAQa,WAChCd,EAAKe,UAAUC,GAEjBb,GACEc,EAAGf,EACHgB,EAAG,EACHT,MAAOA,EAAQP,EACfQ,OAAQA,EACRS,KAAM,SAGRf,GACEa,EAAG,EACHC,EAAG,EACHT,MAAOP,EACPQ,OAAQA,EACRS,KAAM,WAvCRjB,EACEF,EAAKe,UAAUL,SACfV,EAAKoB,MAAMP,aAAaZ,EAAQa,WAChCd,EAAKe,UAAUM,GAEjBlB,GACEc,EAAG,EACHC,EAAG,EACHT,MAAOA,EACPC,OAAQR,EACRiB,KAAM,SAGRf,GACEa,EAAG,EACHC,EAAGhB,EACHO,MAAOA,EACPC,OAAQA,EAASR,EACjBiB,KAAM,UA0BNhB,EAAUc,EAAI,IAChBd,EAAUc,EAAI,GAEZd,EAAUe,EAAI,IAChBf,EAAUe,EAAI,GAEZf,EAAUM,MAAQ,IACpBN,EAAUM,MAAQ,GAEhBN,EAAUO,OAAS,IACrBP,EAAUO,OAAS,GAEjBN,EAAUa,EAAI,IAChBb,EAAUa,EAAI,GAEZb,EAAUc,EAAI,IAChBd,EAAUc,EAAI,GAEZd,EAAUK,MAAQ,IACpBL,EAAUK,MAAQ,GAEhBL,EAAUM,OAAS,IACrBN,EAAUM,OAAS,GAIrBL,EACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHT,MAAOA,EACPC,OAAQA,EACRY,UAAW,iBACXC,GAAItB,EAAQuB,UAAUC,mBAEvBjB,KAAK,OAAQL,GAGhBE,EACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHT,MAAOA,EACPC,OAAQA,EACRY,UAAW,iBACXC,GAAItB,EAAQuB,UAAUE,mBAEvBlB,KAAK,OAAQJ,GAGZH,EAAQ0B,cAAe,CAEzB,GACIC,GAAOC,EAAOC,EADdC,EAAQ/B,EAAKM,IAAIC,cAAc,mBAAqBP,EAAKM,IAAIE,KAAK,KAAKwB,SAAS,eAIhFhC,GAAKC,QAAQU,gBACfiB,EAAQ1B,EACR2B,EAAQ,GACRC,GACEd,GAAId,EACJ+B,GAAI/B,EACJgC,GAAI,EACJb,GAAIX,KAGNkB,EAAQ,GACRC,EAAQ3B,EACR4B,GACEd,GAAI,EACJiB,GAAIxB,EACJyB,GAAIhC,EACJmB,GAAInB,IAIR6B,EACGvB,KAAK,QACJS,EAAGW,EACHV,EAAGW,EACHM,MAAO,uBACN,2BACFC,KAAKnC,EAAQa,WAEhBiB,EACGvB,KAAK,OACJsB,EACA,yBAIN,MAAOzB,GA7JT,GAAIgC,IACFvB,UAAW,EACXa,eAAe,EACfW,YACEC,eAAgB,qBAChBC,eAAgB,sBAElBhB,WACEe,eAAgB,0BAChBC,eAAgB,2BAuJpBjD,GAASkD,QAAUlD,EAASkD,YAC5BlD,EAASkD,QAAQC,YAAc,SAAUzC,GAQvC,MANAA,GAAUV,EAASoD,UAAWN,EAAgBpC,GAG9CA,EAAQuB,UAAUC,iBAAmBxB,EAAQuB,UAAUe,eAAiB,IAAMK,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,GACnH9C,EAAQuB,UAAUE,iBAAmBzB,EAAQuB,UAAUgB,eAAiB,IAAMI,KAAKC,SAASC,SAAS,IAAIC,OAAO,EAAG,GAE5G,SAAqBC,IACtBA,YAAiBzD,GAAS0D,MAAQD,YAAiBzD,GAAS2D,OAC9DF,EAAMG,GAAG,OAAQ,SAAUnD,GACP,UAAdA,EAAKoD,KAGPpD,EAAKqD,QAAQrB,SACXhC,EAAKsD,MAAMpC,GAAKjB,EAAQa,UAAYb,EAAQqC,WAAWC,eAAiBtC,EAAQqC,WAAWE,gBAG/E,SAAdxC,EAAKoD,MACS,QAAdpD,EAAKoD,MACS,SAAdpD,EAAKoD,OAMLpD,EAAKqD,QACFE,SACA/C,KAAKR,EAAKqD,QAAQG,MAAMC,WAAU,MAAW,IAAI,GACjDC,MACCC,KAAM,QAAU1D,EAAQuB,UAAUC,iBAAmB,MAEtDO,SAAS/B,EAAQqC,WAAWC,gBAI/BvC,EAAKqD,QACFK,MACCC,KAAM,QAAU1D,EAAQuB,UAAUE,iBAAmB,MAEtDM,SAAS/B,EAAQqC,WAAWE,mBAKnCQ,EAAMG,GAAG,UAAW,SAAUnD,GAC5BD,EAAYC,EAAMC,SAK1BJ,OAAQC,SAAUP,GAEbA,EAASkD,QAAQC","file":"chartist-plugin-threshold.min.js","sourcesContent":["(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define([\"chartist\"], function (Chartist) {\n return (root.returnExportsGlobal = factory(Chartist));\n });\n } else if (typeof exports === 'object') {\n // Node. Does not work with strict CommonJS, but\n // only CommonJS-like enviroments that support module.exports,\n // like Node.\n module.exports = factory(require(\"chartist\"));\n } else {\n root['Chartist.plugins.ctThreshold'] = factory(Chartist);\n }\n}(this, function (Chartist) {\n\n /**\n * Chartist.js plugin to divide your Line or Bar chart with a threshold.\n *\n */\n /* global Chartist */\n (function (window, document, Chartist) {\n 'use strict';\n\n var defaultOptions = {\n threshold: 0,\n showIndicator: false,\n classNames: {\n aboveThreshold: 'ct-threshold-above',\n belowThreshold: 'ct-threshold-below'\n },\n maskNames: {\n aboveThreshold: 'ct-threshold-mask-above',\n belowThreshold: 'ct-threshold-mask-below'\n }\n };\n\n function createMasks(data, options) {\n // Select the defs element within the chart or create a new one\n var defs = data.svg.querySelector('defs') || data.svg.elem('defs');\n var width = data.svg.width();\n var height = data.svg.height();\n var projectedThreshold, aboveRect, belowRect;\n\n if (!data.options.horizontalBars) {\n // Project the threshold value on the chart Y axis\n projectedThreshold =\n data.chartRect.height() -\n data.axisY.projectValue(options.threshold) +\n data.chartRect.y2;\n\n aboveRect = {\n x: 0,\n y: 0,\n width: width,\n height: projectedThreshold,\n fill: 'white'\n };\n\n belowRect = {\n x: 0,\n y: projectedThreshold,\n width: width,\n height: height - projectedThreshold,\n fill: 'white'\n };\n } else {\n // Project the threshold value on the chart X axis\n projectedThreshold =\n data.axisX.projectValue(options.threshold) +\n data.chartRect.x1;\n\n aboveRect = {\n x: projectedThreshold,\n y: 0,\n width: width - projectedThreshold,\n height: height,\n fill: 'white'\n };\n\n belowRect = {\n x: 0,\n y: 0,\n width: projectedThreshold,\n height: height,\n fill: 'white'\n };\n }\n\n // Ensure no width, height, x or y values are negative values, as they are invalid\n if (aboveRect.x < 0) {\n aboveRect.x = 0;\n }\n if (aboveRect.y < 0) {\n aboveRect.y = 0;\n }\n if (aboveRect.width < 0) {\n aboveRect.width = 0;\n }\n if (aboveRect.height < 0) {\n aboveRect.height = 0;\n }\n if (belowRect.x < 0) {\n belowRect.x = 0;\n }\n if (belowRect.y < 0) {\n belowRect.y = 0;\n }\n if (belowRect.width < 0) {\n belowRect.width = 0;\n }\n if (belowRect.height < 0) {\n belowRect.height = 0;\n }\n\n // Create mask for upper part above threshold\n defs\n .elem('mask', {\n x: 0,\n y: 0,\n width: width,\n height: height,\n maskUnits: 'userSpaceOnUse',\n id: options.maskNames.aboveThresholdID\n })\n .elem('rect', aboveRect);\n\n // Create mask for lower part below threshold\n defs\n .elem('mask', {\n x: 0,\n y: 0,\n width: width,\n height: height,\n maskUnits: 'userSpaceOnUse',\n id: options.maskNames.belowThresholdID\n })\n .elem('rect', belowRect);\n\n // Show a line indicator and label where the threshold is\n if (options.showIndicator) {\n // Select the group element within the chart or create a new one\n var group = data.svg.querySelector('g.ct-indicator') || data.svg.elem('g').addClass('ct-indicator');\n var textX, textY, line;\n\n // Project the threshold values for the line and label\n if (data.options.horizontalBars) {\n textX = projectedThreshold;\n textY = 10;\n line = {\n x1: projectedThreshold,\n x2: projectedThreshold,\n y1: 0,\n y2: height,\n };\n } else {\n textX = 10;\n textY = projectedThreshold;\n line = {\n x1: 0,\n x2: width,\n y1: projectedThreshold,\n y2: projectedThreshold,\n };\n }\n\n group\n .elem('text', {\n x: textX,\n y: textY,\n style: 'text-anchor: middle',\n }, 'ct-label ct-value-label')\n .text(options.threshold);\n\n group\n .elem('line',\n line,\n 'ct-grid ct-horizontal'\n );\n }\n\n return defs;\n }\n\n Chartist.plugins = Chartist.plugins || {};\n Chartist.plugins.ctThreshold = function (options) {\n\n options = Chartist.extend({}, defaultOptions, options);\n\n // Ensure mask names are unique\n options.maskNames.aboveThresholdID = options.maskNames.aboveThreshold + '-' + Math.random().toString(36).substr(2, 9);\n options.maskNames.belowThresholdID = options.maskNames.belowThreshold + '-' + Math.random().toString(36).substr(2, 9);\n\n return function ctThreshold(chart) {\n if (chart instanceof Chartist.Line || chart instanceof Chartist.Bar) {\n chart.on('draw', function (data) {\n if (data.type === 'point') {\n // For points we can just use the data value and compare against the threshold in order to determine\n // the appropriate class\n data.element.addClass(\n data.value.y >= options.threshold ? options.classNames.aboveThreshold : options.classNames.belowThreshold\n );\n } else if (\n data.type === 'line' ||\n data.type === 'bar' ||\n data.type === 'area'\n ) {\n // Cloning the original line path, mask it with the upper mask rect above the threshold and add the\n // class for above threshold\n // Ensure the cloned path is added as the first element of the parent node\n // Ref for `elem()`: https://github.com/gionkunz/chartist-js/blob/master/src/scripts/svg.js#L94\n data.element\n .parent()\n .elem(data.element._node.cloneNode(true), {}, '', true)\n .attr({\n mask: 'url(#' + options.maskNames.aboveThresholdID + ')'\n })\n .addClass(options.classNames.aboveThreshold);\n\n // Use the original line path, mask it with the lower mask rect below the threshold and add the class\n // for below threshold\n data.element\n .attr({\n mask: 'url(#' + options.maskNames.belowThresholdID + ')'\n })\n .addClass(options.classNames.belowThreshold);\n }\n });\n\n // On the created event, create the two mask definitions used to mask the line graphs\n chart.on('created', function (data) {\n createMasks(data, options);\n });\n }\n };\n };\n }(window, document, Chartist));\n\n return Chartist.plugins.ctThreshold;\n\n}));\n"]} \ No newline at end of file diff --git a/package.json b/package.json index f7f4537..dfba60d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "chartist-plugin-threshold", "description": "Threshold Plugin for Chartist.js", - "version": "0.0.4", + "version": "0.0.5", "author": "Gion Kunz", "homepage": "https://gionkunz.github.io/chartist-plugin-threshold", "repository": {