fixed-chartjs-plugin-draggable-selectrange/dist/index.min.js

A ChartJS select range plugin for Line charts. It select a range of chart from X axis

function _typeof(o){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o})(o)}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){t=_toPrimitive(t,"string");return"symbol"==_typeof(t)?t:t+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0===e)return("string"===r?String:Number)(t);e=e.call(t,r||"default");if("object"!=_typeof(e))return e;throw new TypeError("@@toPrimitive must return a primitive value.")}function _classPrivateFieldInitSpec(e,t,a){_checkPrivateRedeclaration(e,t),t.set(e,a)}function _checkPrivateRedeclaration(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}function _classPrivateFieldGet(s,a){return s.get(_assertClassBrand(s,a))}function _classPrivateFieldSet(s,a,r){return s.set(_assertClassBrand(s,a),r),r}function _assertClassBrand(e,t,n){if("function"==typeof e?e===t:e.has(t))return arguments.length<3?t:n;throw new TypeError("Private element is not present on this object")}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _states=new WeakMap,State=_createClass(function State(){var _this=this;_classCallCheck(this,State),_classPrivateFieldInitSpec(this,_states,void 0),_defineProperty(this,"get",function(chart){return _classPrivateFieldGet(_states,_this).get(chart)||null}),_defineProperty(this,"set",function(chart,updatedState){var originalState=_this.get(chart);return _classPrivateFieldGet(_states,_this).set(chart,Object.assign({},originalState,updatedState)),updatedState}),_classPrivateFieldSet(_states,this,new WeakMap)}),_states2=new WeakMap,Graphic=_createClass(function Graphic(states){var _this2=this;_classCallCheck(this,Graphic),_classPrivateFieldInitSpec(this,_states2,void 0),_defineProperty(this,"draw",function(chart,options){var ctx,y,height,w2,x1,w1,x2,state=_classPrivateFieldGet(_states2,_this2).get(chart);!state||!1===state.selectionXY.drawing&&!state.selectionXY.end.x||state.selectionXY.end.x===state.selectionXY.start.x?(options.startDataIndex=void 0,options.endDataIndex=void 0):((ctx=chart.ctx).save(),ctx.globalCompositeOperation="xor",ctx.fillStyle=options.unselectColor,y=chart.chartArea.top,height=chart.chartArea.height,x1=chart.chartArea.left,w1=state.selectionXY.start.x-chart.chartArea.left||0,x2=state.selectionXY.end.x||0,w2=chart.chartArea.right-(state.selectionXY.end.x||0),(state.selectionXY.end.x||0)<(state.selectionXY.start.x||0)&&(w1=state.selectionXY.end.x-chart.chartArea.left||0,x2=state.selectionXY.start.x||0,w2=chart.chartArea.right-(state.selectionXY.start.x||0)),ctx.fillRect(x1,y,w1,height),ctx.fillRect(x2,y,w2,height),ctx.globalCompositeOperation="source-over",ctx.fillStyle=options.borderColor,ctx.fillRect(state.selectionXY.start.x,y,options.borderWidth,height),ctx.fillRect(state.selectionXY.end.x,y,options.borderWidth,height),options.text.enable&&(state.selectionXY.drawing||options.startDataIndex&&options.endDataIndex)&&(ctx.font=" ".concat(options.text.font.size,"px ").concat(options.text.font.family),ctx.fillStyle=options.text.color,x1=chart.data.labels[state.selectionXY.start.axisIndex],w1=chart.data.labels[state.selectionXY.end.axisIndex],(x2=chart.config.options.plugins.draggableSelectRange.text.callback)&&(x1=x2(x1)),ctx.fillText(x1,state.selectionXY.start.x+options.text.offset,y-options.text.padding),ctx.fillText(w1,state.selectionXY.end.x+options.text.offset,y-options.text.padding)),ctx.restore())}),_defineProperty(this,"getLabelXPosition",function(chart,labelIndex){var xScale;return!(!chart||!chart.data||!chart.data.labels||labelIndex<0||labelIndex>=chart.data.labels.length)&&(xScale=chart.scales["x-axis"]||chart.options.scales.x)&&xScale.ticks?(xScale=((chart=chart.chartArea).right-chart.left)/(xScale.ticks.count-1),chart.left+labelIndex*xScale+xScale/2):null}),_classPrivateFieldSet(_states2,this,states)}),states=new State,Graphics=new Graphic(states),_default=exports.default={id:"draggableSelectRange",start:function(chart,args,options){var canvasElement;chart?.config?.options?.plugins?.draggableSelectRange?.enable&&((canvasElement=chart.canvas).addEventListener("mousedown",function(e){var axisIndex,axisValue;0!==chart.getElementsAtEventForMode(e,"index",{intersect:!1}).length&&(axisIndex=chart.getElementsAtEventForMode(e,"index",{intersect:!1})[0].index,axisValue=chart.data.labels[axisIndex],states.set(chart,{selectionXY:{drawing:!0,start:{axisValue:axisValue,axisIndex:axisIndex,x:e.offsetX,y:e.offsetY},end:{}}}))}),window.addEventListener("mouseup",function(e){var axisElements,axisValue,state=states.get(chart);state&&!1!==state.selectionXY.drawing&&(0===(axisElements=chart.getElementsAtEventForMode(e,"index",{intersect:!1})).length?states.set(chart,{selectionXY:{drawing:!1,start:{},end:{}}}):(axisElements=0<axisElements.length?axisElements[0].index:chart.data.labels.length-1,axisValue=chart.data.labels[axisElements],state.selectionXY.start.axisValue>axisValue?(state.selectionXY.end=JSON.parse(JSON.stringify(state.selectionXY.start)),state.selectionXY.start={axisValue:axisValue,axisIndex:axisElements,x:e.offsetX,y:e.offsetY}):state.selectionXY.end={axisValue:axisValue,axisIndex:axisElements,x:e.offsetX,y:e.offsetY},state.selectionXY.drawing=!1,states.set(chart,state),chart.update(),axisValue=chart.config.options.plugins.draggableSelectRange.onSelect,chart.config.options.plugins.draggableSelectRange&&(options.startDataIndex=state.selectionXY.start.axisIndex,options.endDataIndex=state.selectionXY.end.axisIndex),axisValue&&axisValue({range:[state.selectionXY.start.axisValue,state.selectionXY.end.axisValue],boundingBox:[state.selectionXY.start,[state.selectionXY.end.x,state.selectionXY.start.y],state.selectionXY.end,[state.selectionXY.start.x,state.selectionXY.end.y]]})))}),canvasElement.addEventListener("mousemove",function(e){var axisElements,axisValue,state=states.get(chart);state&&!1!==state.selectionXY.drawing&&(axisElements=0<(axisElements=chart.getElementsAtEventForMode(e,"index",{intersect:!1})).length?axisElements[0].index:chart.data.labels.length-1,axisValue=chart.data.labels[axisElements],state.selectionXY.end={axisValue:axisValue,axisIndex:axisElements,x:e.offsetX,y:e.offsetY},chart.render(),states.set(chart,state))}))},afterDraw:function(chart,args,options){Graphics.draw(chart,options)},setRange:function(chart,options,range){for(var startIndex=0,endIndex=0,i=0;i<chart.data.labels.length;i++)if(range[0]===chart.data.labels[i]){startIndex=i;break}for(;i<chart.data.labels.length;i++)if(range[1]===chart.data.labels[i]){endIndex=i;break}return options.startDataIndex=startIndex,options.endDataIndex=endIndex,states.set(chart,{selectionXY:{drawing:!1,start:{axisValue:range[0],axisIndex:startIndex,x:Graphics.getLabelXPosition(chart,startIndex),y:0},end:{axisValue:range[1],axisIndex:endIndex,x:Graphics.getLabelXPosition(chart,endIndex),y:chart.chartArea.height}}}),this.defaults.startDataIndex=range[0],this.defaults.endDataIndex=range[1],Graphics.draw(chart,options),chart.render(),chart.update(),[startIndex,endIndex]},clearDraw:function(chart){states.set(chart,{selectionXY:{drawing:!1,start:{},end:{}}}),chart.render()},defaults:{enable:!1,unselectColor:"rgba(255,255,255,0.65)",borderColor:"#2388FF",borderWidth:2,startDataIndex:void 0,endDataIndex:void 0,text:{enable:!0,color:"#000",offset:0,padding:0,font:{family:"Arial",size:13}}}};