diff --git a/README.md b/README.md index 25c4dc4..bd1aa7a 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,12 @@ var defaultOptions = { maskNames: { aboveThreshold: 'ct-threshold-mask-above', belowThreshold: 'ct-threshold-mask-below' - } + }, + basePath: "" }; ``` + +## Fix for Safari with `` + +In Safari if `` is set, the clip mask won't work. To fix this +set the `basePath` in options to the absolute path. diff --git a/dist/chartist-plugin-threshold.js b/dist/chartist-plugin-threshold.js index 28b3388..8ba2c65 100644 --- a/dist/chartist-plugin-threshold.js +++ b/dist/chartist-plugin-threshold.js @@ -31,7 +31,8 @@ maskNames: { aboveThreshold: 'ct-threshold-mask-above', belowThreshold: 'ct-threshold-mask-below' - } + }, + basePath: '' }; function createMasks(data, options) { @@ -100,7 +101,7 @@ .parent() .elem(data.element._node.cloneNode(true)) .attr({ - mask: 'url(#' + options.maskNames.aboveThreshold + ')' + mask: 'url(' + options.basePath + '#' + options.maskNames.aboveThreshold + ')' }) .addClass(options.classNames.aboveThreshold); @@ -108,7 +109,7 @@ // for blow threshold data.element .attr({ - mask: 'url(#' + options.maskNames.belowThreshold + ')' + mask: 'url(' + options.basePath + '#' + options.maskNames.belowThreshold + ')' }) .addClass(options.classNames.belowThreshold); } diff --git a/dist/chartist-plugin-threshold.min.js b/dist/chartist-plugin-threshold.min.js index 87cf452..28a9a2c 100644 --- a/dist/chartist-plugin-threshold.min.js +++ b/dist/chartist-plugin-threshold.min.js @@ -1,8 +1,8 @@ -/* chartist-plugin-threshold 0.0.1 - * Copyright © 2015 Gion Kunz +/* chartist-plugin-threshold 0.0.2 + * Copyright © 2018 Gion Kunz * Free to use under the WTFPL license. * http://www.wtfpl.net/ */ -!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.returnExportsGlobal=b()}):"object"==typeof exports?module.exports=b():a["Chartist.plugins.ctThreshold"]=b()}(this,function(){return function(a,b,c){"use strict";function d(a,b){var c=a.svg.querySelector("defs")||a.svg.elem("defs"),d=a.chartRect.height()-a.axisY.projectValue(b.threshold)+a.chartRect.y2,e=a.svg.width(),f=a.svg.height();return c.elem("mask",{x:0,y:0,width:e,height:f,id:b.maskNames.aboveThreshold}).elem("rect",{x:0,y:0,width:e,height:d,fill:"white"}),c.elem("mask",{x:0,y:0,width:e,height:f,id:b.maskNames.belowThreshold}).elem("rect",{x:0,y:d,width:e,height:f-d,fill:"white"}),c}var e={threshold:0,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),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.aboveThreshold+")"}).addClass(a.classNames.aboveThreshold),b.element.attr({mask:"url(#"+a.maskNames.belowThreshold+")"}).addClass(a.classNames.belowThreshold))}),b.on("created",function(b){d(b,a)}))}}}(window,document,Chartist),Chartist.plugins.ctThreshold}); +!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.returnExportsGlobal=b()}):"object"==typeof exports?module.exports=b():a["Chartist.plugins.ctThreshold"]=b()}(this,function(){return function(a,b,c){"use strict";function d(a,b){var c=a.svg.querySelector("defs")||a.svg.elem("defs"),d=a.chartRect.height()-a.axisY.projectValue(b.threshold)+a.chartRect.y2,e=a.svg.width(),f=a.svg.height();return c.elem("mask",{x:0,y:0,width:e,height:f,id:b.maskNames.aboveThreshold}).elem("rect",{x:0,y:0,width:e,height:d,fill:"white"}),c.elem("mask",{x:0,y:0,width:e,height:f,id:b.maskNames.belowThreshold}).elem("rect",{x:0,y:d,width:e,height:f-d,fill:"white"}),c}var e={threshold:0,classNames:{aboveThreshold:"ct-threshold-above",belowThreshold:"ct-threshold-below"},maskNames:{aboveThreshold:"ct-threshold-mask-above",belowThreshold:"ct-threshold-mask-below"},basePath:""};c.plugins=c.plugins||{},c.plugins.ctThreshold=function(a){return a=c.extend({},e,a),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.basePath+"#"+a.maskNames.aboveThreshold+")"}).addClass(a.classNames.aboveThreshold),b.element.attr({mask:"url("+a.basePath+"#"+a.maskNames.belowThreshold+")"}).addClass(a.classNames.belowThreshold))}),b.on("created",function(b){d(b,a)}))}}}(window,document,Chartist),Chartist.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 4f4fec4..2f4c04a 100644 --- a/dist/chartist-plugin-threshold.min.js.map +++ b/dist/chartist-plugin-threshold.min.js.map @@ -1 +1 @@ -{"version":3,"file":"chartist-plugin-threshold.min.js","sources":["chartist-plugin-threshold.js"],"names":["root","factory","define","amd","returnExportsGlobal","exports","module","this","window","document","Chartist","createMasks","data","options","defs","svg","querySelector","elem","projectedThreshold","chartRect","height","axisY","projectValue","threshold","y2","width","x","y","id","maskNames","aboveThreshold","fill","belowThreshold","defaultOptions","classNames","plugins","ctThreshold","extend","chart","Line","Bar","on","type","element","addClass","value","parent","_node","cloneNode","attr","mask"],"mappings":";;;;;;CAAC,SAAUA,EAAMC,GACO,kBAAXC,SAAyBA,OAAOC,IAEzCD,UAAW,WACT,MAAQF,GAAKI,oBAAsBH,MAET,gBAAZI,SAIhBC,OAAOD,QAAUJ,IAEjBD,EAAK,gCAAkCC,KAEzCM,KAAM,WA+GN,MAxGC,UAAUC,EAAQC,EAAUC,GAC3B,YAcA,SAASC,GAAYC,EAAMC,GAEzB,GAAIC,GAAOF,EAAKG,IAAIC,cAAc,SAAWJ,EAAKG,IAAIE,KAAK,QAEvDC,EAAqBN,EAAKO,UAAUC,SAAWR,EAAKS,MAAMC,aAAaT,EAAQU,WAAaX,EAAKO,UAAUK,GAC3GC,EAAQb,EAAKG,IAAIU,QACjBL,EAASR,EAAKG,IAAIK,QAoCtB,OAjCAN,GACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQA,EACRQ,GAAIf,EAAQgB,UAAUC,iBAEvBb,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQF,EACRa,KAAM,UAIVjB,EACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQA,EACRQ,GAAIf,EAAQgB,UAAUG,iBAEvBf,KAAK,QACJS,EAAG,EACHC,EAAGT,EACHO,MAAOA,EACPL,OAAQA,EAASF,EACjBa,KAAM,UAGHjB,EAtDT,GAAImB,IACFV,UAAW,EACXW,YACEJ,eAAgB,qBAChBE,eAAgB,sBAElBH,WACEC,eAAgB,0BAChBE,eAAgB,2BAiDpBtB,GAASyB,QAAUzB,EAASyB,YAC5BzB,EAASyB,QAAQC,YAAc,SAAUvB,GAIvC,MAFAA,GAAUH,EAAS2B,UAAWJ,EAAgBpB,GAEvC,SAAqByB,IACtBA,YAAiB5B,GAAS6B,MAAQD,YAAiB5B,GAAS8B,OAC9DF,EAAMG,GAAG,OAAQ,SAAU7B,GACP,UAAdA,EAAK8B,KAGP9B,EAAK+B,QAAQC,SACXhC,EAAKiC,MAAMlB,GAAKd,EAAQU,UAAYV,EAAQqB,WAAWJ,eAAiBjB,EAAQqB,WAAWF,iBAEtE,SAAdpB,EAAK8B,MAAiC,QAAd9B,EAAK8B,MAAgC,SAAd9B,EAAK8B,QAG7D9B,EAAK+B,QACFG,SACA7B,KAAKL,EAAK+B,QAAQI,MAAMC,WAAU,IAClCC,MACCC,KAAM,QAAUrC,EAAQgB,UAAUC,eAAiB,MAEpDc,SAAS/B,EAAQqB,WAAWJ,gBAI/BlB,EAAK+B,QACFM,MACCC,KAAM,QAAUrC,EAAQgB,UAAUG,eAAiB,MAEpDY,SAAS/B,EAAQqB,WAAWF,mBAKnCM,EAAMG,GAAG,UAAW,SAAU7B,GAC5BD,EAAYC,EAAMC,SAK1BL,OAAQC,SAAUC,UAEbA,SAASyB,QAAQC","sourcesContent":["(function (root, factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define([], function () {\n return (root.returnExportsGlobal = factory());\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();\n } else {\n root['Chartist.plugins.ctThreshold'] = factory();\n }\n}(this, function () {\n\n /**\n * Chartist.js plugin to display a data label on top of the points in a line chart.\n *\n */\n /* global Chartist */\n (function (window, document, Chartist) {\n 'use strict';\n\n var defaultOptions = {\n threshold: 0,\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 // Project the threshold value on the chart Y axis\n var projectedThreshold = data.chartRect.height() - data.axisY.projectValue(options.threshold) + data.chartRect.y2;\n var width = data.svg.width();\n var height = data.svg.height();\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 id: options.maskNames.aboveThreshold\n })\n .elem('rect', {\n x: 0,\n y: 0,\n width: width,\n height: projectedThreshold,\n fill: 'white'\n });\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 id: options.maskNames.belowThreshold\n })\n .elem('rect', {\n x: 0,\n y: projectedThreshold,\n width: width,\n height: height - projectedThreshold,\n fill: 'white'\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 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 (data.type === 'line' || data.type === 'bar' || data.type === 'area') {\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.aboveThreshold + ')'\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.belowThreshold + ')'\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","returnExportsGlobal","exports","module","this","window","document","Chartist","createMasks","data","options","defs","svg","querySelector","elem","projectedThreshold","chartRect","height","axisY","projectValue","threshold","y2","width","x","y","id","maskNames","aboveThreshold","fill","belowThreshold","defaultOptions","classNames","basePath","plugins","ctThreshold","extend","chart","Line","Bar","on","type","element","addClass","value","parent","_node","cloneNode","attr","mask"],"mappings":";;;;;;CAAC,SAAUA,EAAMC,GACO,kBAAXC,SAAyBA,OAAOC,IAEzCD,UAAW,WACT,MAAQF,GAAKI,oBAAsBH,MAET,gBAAZI,SAIhBC,OAAOD,QAAUJ,IAEjBD,EAAK,gCAAkCC,KAEzCM,KAAM,WAgHN,MAzGC,UAAUC,EAAQC,EAAUC,GAC3B,YAeA,SAASC,GAAYC,EAAMC,GAEzB,GAAIC,GAAOF,EAAKG,IAAIC,cAAc,SAAWJ,EAAKG,IAAIE,KAAK,QAEvDC,EAAqBN,EAAKO,UAAUC,SAAWR,EAAKS,MAAMC,aAAaT,EAAQU,WAAaX,EAAKO,UAAUK,GAC3GC,EAAQb,EAAKG,IAAIU,QACjBL,EAASR,EAAKG,IAAIK,QAoCtB,OAjCAN,GACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQA,EACRQ,GAAIf,EAAQgB,UAAUC,iBAEvBb,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQF,EACRa,KAAM,UAIVjB,EACGG,KAAK,QACJS,EAAG,EACHC,EAAG,EACHF,MAAOA,EACPL,OAAQA,EACRQ,GAAIf,EAAQgB,UAAUG,iBAEvBf,KAAK,QACJS,EAAG,EACHC,EAAGT,EACHO,MAAOA,EACPL,OAAQA,EAASF,EACjBa,KAAM,UAGHjB,EAvDT,GAAImB,IACFV,UAAW,EACXW,YACEJ,eAAgB,qBAChBE,eAAgB,sBAElBH,WACEC,eAAgB,0BAChBE,eAAgB,2BAElBG,SAAU,GAgDZzB,GAAS0B,QAAU1B,EAAS0B,YAC5B1B,EAAS0B,QAAQC,YAAc,SAAUxB,GAIvC,MAFAA,GAAUH,EAAS4B,UAAWL,EAAgBpB,GAEvC,SAAqB0B,IACtBA,YAAiB7B,GAAS8B,MAAQD,YAAiB7B,GAAS+B,OAC9DF,EAAMG,GAAG,OAAQ,SAAU9B,GACP,UAAdA,EAAK+B,KAGP/B,EAAKgC,QAAQC,SACXjC,EAAKkC,MAAMnB,GAAKd,EAAQU,UAAYV,EAAQqB,WAAWJ,eAAiBjB,EAAQqB,WAAWF,gBAEtE,SAAdpB,EAAK+B,MAAiC,QAAd/B,EAAK+B,MAAgC,SAAd/B,EAAK+B,OAG7D/B,EAAKgC,QACFG,SACA9B,KAAKL,EAAKgC,QAAQI,MAAMC,WAAU,IAClCC,MACCC,KAAM,OAAStC,EAAQsB,SAAW,IAAMtB,EAAQgB,UAAUC,eAAiB,MAE5Ee,SAAShC,EAAQqB,WAAWJ,gBAI/BlB,EAAKgC,QACFM,MACCC,KAAM,OAAStC,EAAQsB,SAAW,IAAMtB,EAAQgB,UAAUG,eAAiB,MAE5Ea,SAAShC,EAAQqB,WAAWF,mBAKnCO,EAAMG,GAAG,UAAW,SAAU9B,GAC5BD,EAAYC,EAAMC,SAK1BL,OAAQC,SAAUC,UAEbA,SAAS0B,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([], function () {\n return (root.returnExportsGlobal = factory());\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();\n } else {\n root['Chartist.plugins.ctThreshold'] = factory();\n }\n}(this, function () {\n\n /**\n * Chartist.js plugin to display a data label on top of the points in a line chart.\n *\n */\n /* global Chartist */\n (function (window, document, Chartist) {\n 'use strict';\n\n var defaultOptions = {\n threshold: 0,\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 basePath: ''\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 // Project the threshold value on the chart Y axis\n var projectedThreshold = data.chartRect.height() - data.axisY.projectValue(options.threshold) + data.chartRect.y2;\n var width = data.svg.width();\n var height = data.svg.height();\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 id: options.maskNames.aboveThreshold\n })\n .elem('rect', {\n x: 0,\n y: 0,\n width: width,\n height: projectedThreshold,\n fill: 'white'\n });\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 id: options.maskNames.belowThreshold\n })\n .elem('rect', {\n x: 0,\n y: projectedThreshold,\n width: width,\n height: height - projectedThreshold,\n fill: 'white'\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 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 (data.type === 'line' || data.type === 'bar' || data.type === 'area') {\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.basePath + '#' + options.maskNames.aboveThreshold + ')'\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.basePath + '#' + options.maskNames.belowThreshold + ')'\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/src/scripts/chartist-plugin-threshold.js b/src/scripts/chartist-plugin-threshold.js index 710196a..bdfd59f 100644 --- a/src/scripts/chartist-plugin-threshold.js +++ b/src/scripts/chartist-plugin-threshold.js @@ -15,7 +15,8 @@ maskNames: { aboveThreshold: 'ct-threshold-mask-above', belowThreshold: 'ct-threshold-mask-below' - } + }, + basePath: '' }; function createMasks(data, options) { @@ -84,7 +85,7 @@ .parent() .elem(data.element._node.cloneNode(true)) .attr({ - mask: 'url(#' + options.maskNames.aboveThreshold + ')' + mask: 'url(' + options.basePath + '#' + options.maskNames.aboveThreshold + ')' }) .addClass(options.classNames.aboveThreshold); @@ -92,7 +93,7 @@ // for blow threshold data.element .attr({ - mask: 'url(#' + options.maskNames.belowThreshold + ')' + mask: 'url(' + options.basePath + '#' + options.maskNames.belowThreshold + ')' }) .addClass(options.classNames.belowThreshold); }