@cehlers88/chart 1.0.6 → 1.1.1

package/README.md

@@ -1,6 +1,120 @@
 # Chart
-A library to create charts using JavaScript and Canvas-Element.
 
-## Examples
-######`javascipt`
-const obj = new ChartEngine(element);
+A lightweight TypeScript library for building charts on top of the HTML `<canvas>` element. The library is fully plugin-based: axes, bars, legends, tooltips, camera navigation, pagination, and timelines are all separate, composable plugins instead of fixed chart types.
+
+## Features
+
+- **Plugin architecture** – every visual or interactive feature (bars, lines, legend, tooltip, scroll/zoom, pagination, timeline) is a standalone plugin registered via `addPlugin()`.
+- **Two usage styles** – control the chart directly through the `ChartEngine` class, or declaratively via the `<canvas-diagram>` custom element.
+- **Flexible data formats** – values can be plain numbers, ranges (`[start, end]`), or objects with a label/color; `DataGroupFactory` normalizes them all.
+- **Camera & interaction** – built-in support for hover, scroll/wheel, and click events per plugin.
+- **TypeScript** – fully typed, ships its own `.d.ts` declarations.
+
+## Installation
+
+```bash
+npm install @cehlers88/chart
+```
+
+## Usage
+
+### Option 1: `ChartEngine` (programmatic)
+
+```typescript
+import { ChartEngine, DataGroupFactory, plugins } from "@cehlers88/chart";
+
+const canvas = document.querySelector("canvas");
+
+const engine = new ChartEngine(canvas, {
+    plugins: [
+        new plugins.DiagramLinePlugin(),
+        new plugins.LegendsPlugin(),
+        new plugins.CameraMovePlugin({ allowScrollX: true }),
+    ],
+});
+
+engine.addDataGroup(
+    DataGroupFactory.createDataGroup([1, 5, 3, 8, 2], "Revenue", "#1d91e3")
+);
+
+engine.start(); // starts the render/update loop (requestAnimationFrame)
+```
+
+### Option 2: Custom element `<canvas-diagram>`
+
+The custom element registers itself automatically as soon as the library is imported.
+
+```html
+<script type="module">
+  import "@cehlers88/chart";
+</script>
+
+<canvas-diagram
+  width="600"
+  height="300"
+  value='{"Revenue":[1,5,3,8,2],"Costs":{"data":[2,3,1,4,2],"color":"#e84949"}}'
+></canvas-diagram>
+```
+
+Attributes:
+
+| Attribute   | Description                                                        | Default |
+|-------------|----------------------------------------------------------------------|---------|
+| `width`     | Canvas width in pixels                                                | `300`   |
+| `height`    | Canvas height in pixels                                               | `150`   |
+| `value`     | JSON string with the data groups (see data format below)             | `[]`    |
+| `autostart` | Starts the chart automatically once mounted (`"true"`/`"false"`)     | `true`  |
+
+Additional plugins can be registered on the element before it starts via `getPlugin()`/`addPlugin()`.
+
+## Data format
+
+`DataGroupFactory` accepts several notations for the values within a group:
+
+```typescript
+// plain numbers
+DataGroupFactory.createDataGroup([1, 2, 3]);
+
+// ranges [start, end]
+DataGroupFactory.createDataGroup([[0, 10], [5, 12]]);
+
+// objects with a label
+DataGroupFactory.createDataGroup([{ value: 5, label: "May" }]);
+```
+
+As a JSON string (e.g. for the custom element's `value` attribute), groups are given as an object keyed by group name:
+
+```json
+{
+  "Group1": [1, 2, 3],
+  "Group2": { "data": [4, 5, 6], "color": "#30cb30" }
+}
+```
+
+## Available plugins
+
+| Plugin                   | Purpose                                                            |
+|--------------------------|---------------------------------------------------------------------|
+| `BarsPlugin`             | Renders data groups as bars                                        |
+| `DiagramLinePlugin`      | Renders data groups as lines, including helper lines                |
+| `LegendsPlugin`          | Displays a legend for the data groups                              |
+| `TooltipPlugin`          | Shows tooltips on hover over data points                           |
+| `CameraMovePlugin`       | Enables scrolling/panning the view via mouse/wheel                 |
+| `PaginationPlugin`       | Splits large data sets into pages                                   |
+| `TimelinePlugin`         | Timeline rendering (hour/day/week/month/year)                       |
+| `EnrichGroupInfosPlugin` | Enriches data groups with extra internal info (enabled by default) |
+
+Custom plugins can be implemented by extending `AbstractPlugin` or `AbstractDiagramPlugin` (for plugins that need their own drawing surface/buffer); the corresponding interface is `IChartPlugin`.
+
+## Development
+
+```bash
+npm install       # install dependencies
+npm run build     # production build via webpack into dist/
+npm run watch     # build in watch mode
+npm test          # run tests with Jest
+```
+
+## License
+
+ISC © Christoph Ehlers

package/dist/ChartEngine.d.ts

@@ -19,10 +19,9 @@ export default class ChartEngine implements IChartEngine {
     constructor(canvasElement: HTMLCanvasElement, properties?: {
         plugins?: IChartPlugin[];
     });
-    private getEngineCallbacks;
     addPlugin(plugin: IChartPlugin): ChartEngine;
     getDrawAreaRect(): TRect;
-    getPlugin(pluginName: string): IChartPlugin;
+    getPlugin(pluginName: string): IChartPlugin | undefined;
     getPlugins(): IChartPlugin[];
     setPluginProperty(propertyName: string, value: any): ChartEngine;
     create(): ChartEngine;
@@ -31,4 +30,5 @@ export default class ChartEngine implements IChartEngine {
     draw(): ChartEngine;
     update(): ChartEngine;
     start(): void;
+    private getEngineCallbacks;
 }

package/dist/Event/TooltipEvent.d.ts

@@ -0,0 +1,6 @@
+export default class TooltipEvent extends Event {
+    reason: string;
+    data: any;
+    constructor(reason: string, data: any);
+    static dispatch(reason: string, data: any): void;
+}

package/dist/Factory/DataGroupFactory.d.ts

@@ -1,8 +1,8 @@
 import { TDataGroup } from "../type/TDataGroup";
 export default class DataGroupFactory {
+    static buildCounter: number;
     private static _colors;
     private static _lastColorIndex;
-    static buildCounter: number;
     static createDataGroup(values: any[], groupLabel?: string, color?: string): TDataGroup;
     static parseDataGroupsDefinition(value: string): TDataGroup[];
     static setColor(color: string, index: number): void;

package/dist/customElement/CanvasDiagram.d.ts

@@ -12,8 +12,9 @@ declare class CanvasDiagram extends HTMLElement implements ICanvasDiagram {
     private _engine;
     connectedCallback(): void;
     addPlugin(plugin: IChartPlugin): ICanvasDiagram;
+    getPlugin(pluginName: string): IChartPlugin | undefined;
+    start(): ICanvasDiagram;
     private createCanvas;
     private evalArguments;
-    start(): ICanvasDiagram;
 }
 export default CanvasDiagram;

package/dist/index.d.ts

@@ -11,7 +11,10 @@ import DataGroupFactoryClass from "./Factory/DataGroupFactory";
 import DiagramLine from "./plugin/DiagramLine";
 import DiagramRegistry from "./Registry/DiagramRegistry";
 import CameraMove from "./plugin/CameraMove";
+import EnrichGroupInfosPlugin from "./plugin/EnrichGroupInfosPlugin";
 import TimelinePlugin from "./plugin/TimelinePlugin";
+import LegendsPlugin from "./plugin/LegendsPlugin";
+import PaginationPlugin from "./plugin/PaginationPlugin";
 export declare const CanvasDiagram: typeof CanvasDiagramClass;
 export declare const ChartEngine: typeof ChartEngineClass;
 export declare const DataGroupFactory: typeof DataGroupFactoryClass;
@@ -19,7 +22,10 @@ export declare const diagramRegistry: DiagramRegistry;
 export declare const plugins: {
     BarsPlugin: typeof BarsPluginClass;
     CameraMovePlugin: typeof CameraMove;
+    EnrichGroupInfosPlugin: typeof EnrichGroupInfosPlugin;
     DiagramLinePlugin: typeof DiagramLine;
+    LegendsPlugin: typeof LegendsPlugin;
+    PaginationPlugin: typeof PaginationPlugin;
     TimelinePlugin: typeof TimelinePlugin;
 };
 declare const _default: {
@@ -30,7 +36,10 @@ declare const _default: {
     plugins: {
         BarsPlugin: typeof BarsPluginClass;
         CameraMovePlugin: typeof CameraMove;
+        EnrichGroupInfosPlugin: typeof EnrichGroupInfosPlugin;
         DiagramLinePlugin: typeof DiagramLine;
+        LegendsPlugin: typeof LegendsPlugin;
+        PaginationPlugin: typeof PaginationPlugin;
         TimelinePlugin: typeof TimelinePlugin;
     };
 };

package/dist/index.js

@@ -19,301 +19,312 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./node_modules/@cehlers88/ceutils/dist/index.js":
+/***/ "./node_modules/@cehlers88/ceutils/dist/index.js"
 /*!*******************************************************!*\
   !*** ./node_modules/@cehlers88/ceutils/dist/index.js ***!
   \*******************************************************/
-/***/ (function(module) {
+(module) {
 
 eval("{!function(t,e){ true?module.exports=e():0}(this,()=>(()=>{\"use strict\";var t={216:(t,e,i)=>{var s,o;i.d(e,{default:()=>m}),function(t){t[t.px=0]=\"px\",t[t.percent_global=1]=\"percent_global\",t[t.percent_local=2]=\"percent_local\"}(s||(s={})),function(t){t[t.absolute=0]=\"absolute\",t[t.cameraRelative=1]=\"cameraRelative\"}(o||(o={}));class r{get x(){return Number((-0===this._x?0:this._x).toFixed(3))}set x(t){this._magnitude=void 0,this._x=t}get left(){return this.x}get y(){return Number((-0===this._y?0:this._y).toFixed(3))}set y(t){this._magnitude=void 0,this._y=t}get top(){return this.y}get cameraSaveX(){return Math.floor(this.x-0)}get cameraSaveY(){return Math.floor(this.y-0)}get positionSaveX(){return this.positionType===o.absolute?this.x:this.cameraSaveX}get positionSaveY(){return this.positionType===o.absolute?this.y:this.cameraSaveY}get PositionUnit(){return this._positionUnit}set PositionUnit(t){this._positionUnit=t}get notRoundedX(){return this._x}get notRoundedY(){return this._y}get magnitude(){return void 0===this._magnitude&&(this._magnitude=this.calcMagnitude(this)),this._magnitude}get length(){return this.magnitude}get normalized(){return new r(this.x/this.magnitude,this.y/this.magnitude)}get rotation(){return this._rotation}set rotation(t){this._rotation=t}positionType=o.absolute;previousX;previousY;directionX;directionY;_magnitude=void 0;_positionUnit=s.px;_rotation=0;_x;_y;constructor(t,e){this._x=t||0,this._y=e||0,this.previousX=this.x,this.previousY=this.y,this.directionX=1,this.directionY=1}update(t){this.directionX=this.previousX>this.x?-1:this.previousX<this.x?1:this.directionX,this.directionY=this.previousY>this.y?-1:this.previousY<this.y?1:this.directionY,this.previousX=this.x,this.previousY=this.y}addVector(t){return this.x+=t.x,this.y+=t.y,this}calcSubtractVector(t){return new r(this.x-t.x,this.y-t.y)}scale(t){return this.x*=t,this.y*=t,this}doWithVector(t){const e=this,i=new r(t.x,t.y);return{add:()=>this.addVector(t),calculateDistance:()=>this.calcMagnitude(this.calcSubtractVector(t)),getAngleRadians:()=>{const i=e.calcSubtractVector(t).normalized;let s=Math.atan2(-i.y,i.x);return s<0&&(s+=2*Math.PI),-0===s?0:s},getAngleVector(){const t=i.doWithVector(e).subtract(),s=t.magnitude;return new r(t.x/s,t.y/s)},getNomalizedMoveVector:(e={x:1,y:1})=>{let i=this.doWithVector(t).calculateDistance();if(i=i<0?-i:i,t.x===this.x)return{x:0,y:(t.y>this.y?1:-1)*Math.min(e.y,i)};if(t.y===this.y)return{x:(t.x>this.x?1:-1)*Math.min(e.x,i),y:0};const s={x:t.x-this.x,y:t.y-this.y},o=Math.sqrt(Math.pow(s.x,2)+Math.pow(s.y,2)),r={x:s.x/o*e.x,y:s.y/o*e.y};return{x:r.x>0?Math.min(r.x,t.x-this.x):Math.min(r.x,this.x-t.x),y:r.y>0?Math.min(r.y,t.y-this.y):Math.min(r.y,this.y-t.y)}},subtract:()=>{const e=this.calcSubtractVector(t);return this.x=e.x,this.y=e.y,this}}}rotate(t,e){this._rotation+=t;const i=Math.PI/180*-this._rotation,s=Math.cos(i),o=Math.sin(i),r=s*(this.x-e.x)+o*(this.y-e.y)+e.x,n=s*(this.y-e.y)-o*(this.x-e.x)+e.y;return this._x=r,this._y=n,this}calcMagnitude(t){return Math.sqrt(t.x*t.x+t.y*t.y)}}var n,a,h,l;!function(t){t[t.complete=0]=\"complete\",t[t.center=1]=\"center\"}(n||(n={}));class c{_context=null;_helpers={rotate:(t,e,i)=>t};create(t){const e=(t,i)=>({draw:()=>{this._handleDraw(i)},update:t=>e(t,this._update(i,t))});return e(t,this._create(t))}getContext(){return this._context}getDefaultPivot(){return{x:.5,y:.5,z:0}}getParallelEdges(t,e=null){const i=[],s=t=>{i.some(e=>e.x===t.x&&e.y===t.y)||i.push(e)};return t.map(o=>{null===e?this.getParallelEdges(t,o).map(s):Math.round(o.x)!==Math.round(e.x)&&Math.round(o.y)!==Math.round(e.y)||i.push(o)}),i}setContext(t){return this._context=t,this._context instanceof WebGL2RenderingContext||(this._handleDraw=t=>{this._context.save(),this._draw(t),this._context.restore()},this._helpers.rotate=(t,e,i)=>{const s={x:(\"number\"==typeof i?i:i.x)*Math.PI/180,y:(\"number\"==typeof i?i:i.y)*Math.PI/180};return t.map(t=>{const i=t.x-e.x,o=t.y-e.y;return{x:i*Math.cos(s.x)-o*Math.sin(s.x)+e.x,y:i*Math.sin(s.y)+o*Math.cos(s.y)+e.y}})}),this}_update(t,e){if(e.angles.length>0){const i=e.angles;let s=t.pivot;i.map((i,o)=>{if(e.pivot[o]&&(s=e.pivot[o]),e.rotateType===n.center){const e=this._helpers.rotate([{x:t.width/2,y:t.height/2}],{x:s.x*t.width,y:s.y*t.height},i),o={x:e[0].x-t.width/2,y:e[0].y-t.height/2};t.edges=t.edges.map(t=>({x:t.x+o.x,y:t.y+o.y}))}else t.edges=this._helpers.rotate(t.edges,{x:s.x*t.width,y:s.y*t.height},i)})}return t.edges.map(t=>{t.x+=e.position.x,t.y+=e.position.y}),t}_handleDraw=t=>{}}class d extends c{_create(t){const e=t.pivot[0]?t.pivot[0]:this.getDefaultPivot(),i={bodyType:\"ngon\",edges:[],fillStyle:t.fillStyle||-1,height:t.height||2*t.radius,pivot:e,position:t.position,strokeStyle:t.strokeStyle||-1,width:t.width||2*t.radius},s=(t.angles[0]||0)*Math.PI/180,o=.5-e.x,r=.5-e.y;for(let e=0;e<=t.sides;e++){const n=2*Math.PI/t.sides*e,a=t.radius;i.edges.push({x:a*Math.cos(n+s)+o*i.width,y:a*Math.sin(n+s)+r*i.height,z:\"z\"in t.position?t.position.z:0})}return i}_draw(t){const e=this.getContext();e.beginPath(),e.moveTo(Math.floor(t.edges[0].x),Math.floor(t.edges[0].y));for(let i=1;i<t.edges.length;i++)e.lineTo(Math.floor(t.edges[i].x),Math.floor(t.edges[i].y));e.closePath(),-1!==t.strokeStyle&&(e.strokeStyle=t.strokeStyle.toString(),e.stroke()),-1!==t.fillStyle&&(e.fillStyle=t.fillStyle.toString(),e.fill())}}class u extends c{getDefaultPivot(){return{x:1,y:0,z:0}}_create(t){const e=t.pivot[0]?t.pivot[0]:this.getDefaultPivot();return{bodyType:\"ngon\",edges:this._helpers.rotate([{x:0,y:0},{x:t.width,y:0},{x:t.width,y:t.height},{x:0,y:t.height},{x:0,y:0}],{x:e.x*t.width,y:e.y*t.height},t.angles[0]||0),fillStyle:t.fillStyle||-1,height:t.height,pivot:e,position:t.position,strokeStyle:t.strokeStyle||-1,width:t.width}}_draw(t){const e=this.getContext();e.beginPath(),e.moveTo(Math.floor(t.edges[0].x),Math.floor(t.edges[0].y));for(let i=1;i<t.edges.length;i++)e.lineTo(Math.floor(t.edges[i].x),Math.floor(t.edges[i].y));e.closePath(),-1!==t.strokeStyle&&(e.strokeStyle=t.strokeStyle.toString(),e.stroke()),-1!==t.fillStyle&&(e.fillStyle=t.fillStyle.toString(),e.fill())}_update(t,e){return super._update(t,e)}}!function(t){t.start_root_method=\"start_root_method\",t.end_root_method=\"end_root_method\",t.start_sub_method=\"start_sub_method\",t.end_sub_method=\"end_sub_method\"}(a||(a={})),function(t){t.analytic=\"analytic\",t.simple=\"simple\"}(h||(h={}));class p{static USE_GLOBAL_COLOR=-26071988;_rootPosition=-1;_analyticStore={callback:(t,e)=>{},currentRootMethod:\"\",startTimeRootMethod:0,startTimeSubMethod:0};_geometryDrawers;_mode=h.simple;_drawCondition=!0;_unit=s.px;ctx;constructor(){this._geometryDrawers={ngon:new d,rectangle:new u}}beginPath(){return this._drawCondition?(this.ctx.beginPath(),this):this}clipRect(t){return this._drawCondition?(this.save().beginPath(),Array.isArray(t)?t.map(t=>{this.selectRect(t)}):this.selectRect(t),this.ctx.clip(),this):this}clipRoundRect(t,e){return this._drawCondition?(this.save().beginPath(),Array.isArray(t)?t.map(t=>{this.selectRoundRect(t,e)}):this.selectRoundRect(t,e),this.ctx.clip(),this):this}closePath(){return this._drawCondition?(this.ctx.closePath(),this):this}cls(){return this._drawCondition?(this.ctx.clearRect(0,0,this.ctx.canvas.width,this.ctx.canvas.height),this):this}fill(t){return this._drawCondition?(this._fill(t||-1),this):this}getContext(){return this.ctx}resetClip(){return this._drawCondition?(this.ctx.restore(),this):this}removeDrawCondition(){return this._drawCondition=!0,this}save(){return this._drawCondition?(this.ctx.save(),this):this}selectRect(t){return t.x,t.y,t.width,t.height,this._selectRect(this._convertToAbsolutePixels(t)),this}selectRoundRect(t,e){if(t.x,t.y,t.width,t.height,!this._drawCondition)return this;const i=e,s=e,o=e,r=e;return this.ctx.moveTo(t.x+i,t.y),this.ctx.lineTo(t.x+t.width-s,t.y),this.ctx.quadraticCurveTo(t.x+t.width,t.y,t.x+t.width,t.y+s),this.ctx.lineTo(t.x+t.width,t.y+t.height-o),this.ctx.quadraticCurveTo(t.x+t.width,t.y+t.height,t.x+t.width-o,t.y+t.height),this.ctx.lineTo(t.x+r,t.y+t.height),this.ctx.quadraticCurveTo(t.x,t.y+t.height,t.x,t.y+t.height-r),this.ctx.lineTo(t.x,t.y+i),this.ctx.quadraticCurveTo(t.x,t.y,t.x+i,t.y),this}setContext(t){return this.ctx=t,Object.keys(this._geometryDrawers).map(e=>{this._geometryDrawers[e].setContext(t)}),this}setFilter(t){return this._drawCondition?(this.ctx.filter=t,this):this}setFillStyle(t){return this._drawCondition?(this.ctx.fillStyle=t,this):this}setConditionalFilter(t,e){return t&&this.setFilter(e),this}setDrawCondition(t){return this._drawCondition=t,this}setFont(t){return this.ctx.font=t,this}setGlobalCompositeOperation(t){return this.ctx.globalCompositeOperation=t,this}setStrokeStyle(t){return this._drawCondition?(this.ctx.strokeStyle=t,this):this}setUnit(t){return this._unit=t,this}circle(t,e,i=-1,s=-1){return t.x,t.y,t.x,t.y,this._drawCondition?(t=this._convertToAbsolutePixels(t),this.ctx.beginPath(),this.ctx.arc(t.x,t.y,e,0,2*Math.PI),this.ctx.closePath(),this._fill(s),this._stroke(i),this):this}cube(t,e=-1,i={x:0,y:0,z:30},s=-1,o=-1){if(t.x,t.y,t.width,t.height,!this._drawCondition)return this;e=-1===e?t.width/2:e;const r=Math.cos(i.z*Math.PI/180),n=Math.sin(i.z*Math.PI/180);return this.lines({...t,x:t.x+r*e,y:t.y-n*e},[{x:t.x+r*e+t.width,y:t.y-n*e},{x:t.x+r*e+t.width,y:t.y-n*e+t.height},{x:t.x+r*e,y:t.y-n*e+t.height}],s,\"number\"==typeof o||\"string\"==typeof o?o:o[0]),this.lines({...t,y:t.y+t.height},[{x:t.x+r*e,y:t.y+t.height-n*e},{x:t.x+r*e+t.width,y:t.y+t.height-n*e},{x:t.x+t.width,y:t.y+t.height}],s,\"number\"==typeof o||\"string\"==typeof o?o:o[1]),this.lines({...t,x:t.x+t.width},[{x:t.x+r*e+t.width,y:t.y-n*e},{x:t.x+r*e+t.width,y:t.y-n*e+t.height},{x:t.x+t.width,y:t.y+t.height},{x:t.x+t.width,y:t.y}],s,\"number\"==typeof o||\"string\"==typeof o?o:o[2]),this.lines({...t,x:t.x,y:t.y-.5},[{x:t.x+r*e-1,y:t.y-n*e},{x:t.x+r*e,y:t.y-n*e+t.height},{x:t.x,y:t.y+t.height},{x:t.x,y:t.y}],s,\"number\"==typeof o||\"string\"==typeof o?o:o[3]),this.lines(t,[{x:t.x+r*e,y:t.y-n*e},{x:t.x+r*e+t.width,y:t.y-n*e},{x:t.x+t.width,y:t.y},t],s,\"number\"==typeof o||\"string\"==typeof o?o:o[4]),this.lines(t,[{x:t.x+t.width,y:t.y},{x:t.x+t.width,y:t.y+t.height},{x:t.x,y:t.y+t.height},{x:t.x,y:t.y}],s,\"number\"==typeof o||\"string\"==typeof o?o:o[5]),this}cube3d(t,e=-1,i={x:0,y:0,z:30},s=-1,o=-1,r={x:.5,y:.5,z:.5}){if(t.x,t.y,t.width,t.height,!this._drawCondition)return this;e=-1===e?t.width/2:e;const n=t.x+t.width/2,a=t.y+t.height/2,h=e/2,l=(r.x-.5)*t.width,c=(r.y-.5)*t.height,d=(r.z-.5)*e;let u=[{x:-t.width/2,y:-t.height/2,z:-h},{x:t.width/2,y:-t.height/2,z:-h},{x:t.width/2,y:t.height/2,z:-h},{x:-t.width/2,y:t.height/2,z:-h},{x:-t.width/2,y:-t.height/2,z:h},{x:t.width/2,y:-t.height/2,z:h},{x:t.width/2,y:t.height/2,z:h},{x:-t.width/2,y:t.height/2,z:h}];this._convertToVector3D(i).map(t=>{u=u.map(e=>{const i=((t,e)=>{const i=e.x*Math.PI/180,s=e.y*Math.PI/180,o=e.z*Math.PI/180,r=Math.cos(i),n=Math.sin(i),a=Math.cos(s),h=Math.sin(s),l=Math.cos(o),c=Math.sin(o);return{x:a*(c*t.y+l*t.x)-h*t.z,y:n*(a*t.z+h*(c*t.y+l*t.x))+r*(l*t.y-c*t.x),z:r*(a*t.z+h*(c*t.y+l*t.x))-n*(l*t.y-c*t.x)}})({x:e.x-l,y:e.y-c,z:e.z-d},t);return{x:i.x+l,y:i.y+c,z:i.z+d}})}),u=u.map(t=>(t=>{const e=500/(500+t.z);return{x:t.x*e+n,y:t.y*e+a,z:t.z}})(t));const p=[[0,1,2,3],[4,5,6,7],[0,1,5,4],[2,3,7,6],[0,3,7,4],[1,2,6,5]].map((t,e)=>({depth:t.reduce((t,e)=>t+u[e].z,0)/t.length,face:t,fillStyle:\"number\"==typeof o||\"string\"==typeof o?o:o[e]}));return p.sort((t,e)=>e.depth-t.depth),p.forEach(({face:t,fillStyle:e})=>{this.lines({x:u[t[0]].x,y:u[t[0]].y},t.map(t=>({x:u[t].x,y:u[t].y})),s,e)}),[[0,4],[1,5],[2,6],[3,7]].map(t=>{const[e,i]=t,o=p.find(({face:t})=>t.includes(e)),r=p.find(({face:t})=>t.includes(i));-1!==o.fillStyle&&-1!==r.fillStyle||this.lines({x:u[e].x,y:u[e].y},[{x:u[i].x,y:u[i].y}],s,-1)}),this}start(){return this._rootPosition=-1,this}startAnalyse(t){return console.warn(\"Deprecated method startAnalyse() called. Use getDrawEngineAnalyzed() instead.\"),this}donut(t,e,i,s=-1,o=-1){return this._drawCondition?(this.ctx.beginPath(),t=this._convertToAbsolutePixels(t),this.ctx.arc(t.x,t.y,e,0,2*Math.PI),this.ctx.arc(t.x,t.y,i,0,2*Math.PI,!0),this._fill(o),this._stroke(s),this):this}gradientLines(t,e,i,s=1){t=this._convertToAbsolutePixels(t),e=e.map(t=>this._convertToAbsolutePixels(t));const o=this.ctx;let n=0,a=t;for(const i of e)n+=new r(t.x,t.y).doWithVector(new r(i.x,i.y)).calculateDistance(),a=i;const h=o.createLinearGradient(t.x,t.y,a.x,a.y);for(let t=0;t<i.length;t++){const e=t/(i.length-1);h.addColorStop(e,i[t].toString())}const l=o.strokeStyle;o.strokeStyle=h,o.lineWidth=s,a=t,o.beginPath(),o.moveTo(t.x,t.y);for(const t of e)o.lineTo(t.x,t.y),a=t;return o.stroke(),o.strokeStyle=l,this}grid(t,e,i=null,s=0){if(!this._drawCondition)return this;const o=null===i?0:i.x,r=null===i?0:i.y,n=void 0===i?this.ctx.canvas.width:i.x+i.width,a=void 0===i?this.ctx.canvas.height:i.y+i.height,h=n-o,l=a-r,c=h*Math.abs(Math.cos(s*(Math.PI/180)))+l*Math.abs(Math.sin(s*(Math.PI/180))),d=c/Math.ceil(c/t),u=h*Math.abs(Math.sin(s*(Math.PI/180)))+l*Math.abs(Math.cos(s*(Math.PI/180))),p=u/Math.ceil(u/t);this.ctx.save(),this.ctx.beginPath(),this.ctx.rect(o,r,n-o,a-r),this.ctx.clip(),this.ctx.translate((o+n)/2,(r+a)/2),this.ctx.rotate(s*Math.PI/180),this.ctx.translate(-(o+n)/2,-(r+a)/2),this.ctx.beginPath();for(let t=-l;t<=Math.round(l/p)+l;t++)this.ctx.moveTo(o-h,r+t*p),this.ctx.lineTo(n+h,r+t*p);for(let t=-h;t<=Math.round(h/d)+h;t++)this.ctx.moveTo(o+t*d,r-l),this.ctx.lineTo(o+t*d,a+l);return this.ctx.strokeStyle=e,this.ctx.stroke(),this.ctx.restore(),this}hexagon(t,e,i=-1,s=-1,o=0){return this.ngon(t,e,6,i,s,o)}lines(t,e,i=-1,s=-1,o=.5){if(!this._drawCondition)return this;if(t=this._convertToAbsolutePixels(t),e=e.map(t=>this._convertToAbsolutePixels(t)),this.ctx.beginPath(),this.ctx.lineWidth=o,this.ctx.moveTo(t.x,t.y),e.map(t=>{this.ctx.lineTo(t.x,t.y)}),-1!==i){const t=this.ctx.strokeStyle;this.ctx.strokeStyle=i.toString(),this.ctx.stroke(),this.ctx.strokeStyle=t}if(-1!==s){const t=this.ctx.fillStyle;this.ctx.fillStyle=s.toString(),this.ctx.closePath(),this.ctx.fill(),this.ctx.fillStyle=t}return this}moveTo(t){return this._drawCondition?(t=this._convertToAbsolutePixels(t),this.ctx.moveTo(t.x,t.y),this):this}ngon(t,e,i,s=-1,o=-1,r=0,n={x:.5,y:.5}){return this._drawCondition?(this._createAndDrawGeometry(\"ngon\",{angles:[r],fillStyle:o,pivot:n,position:this._convertToAbsolutePixels(t),radius:this._convertToAbsolutePixels(e),sides:i,strokeStyle:s}),this):this}quadraticCurveTo(t,e){return this._drawCondition?(t=this._convertToAbsolutePixels(t),e=this._convertToAbsolutePixels(e),this.ctx.quadraticCurveTo(t.x,t.y,e.x,e.y),this):this}rectangle(t,e=\"-1\",i=\"-1\",s=0,o=.5){return this._drawCondition?(t=this._convertToAbsolutePixels(t),this._createAndDrawGeometry(\"rectangle\",{...t,angles:Array.isArray(s)?s:[s],fillStyle:i,pivot:Array.isArray(o)?o:[o],position:t,rotateType:n.center,strokeStyle:e}),this):this}roundRectangle(t,e,i=-1,s=-1){return this._drawCondition?(void 0===e&&(e=5),t=this._convertToAbsolutePixels(t),e=this._convertToAbsolutePixels(e),this.ctx.beginPath(),this.selectRoundRect(t,e),this.ctx.closePath(),this._fill(s),this._stroke(i),this):this}stroke(){return this._drawCondition?(this.ctx.stroke(),this):this}image(t,e,i=null,s=0,o={x:.5,y:.5}){return this._drawCondition?(void 0===i&&(i=e),i=this._convertToAbsolutePixels(i),this.ctx.save(),this.ctx.translate(i.x+i.width*o.x,i.y+i.height*o.y),this.ctx.rotate(s*Math.PI/180),this.ctx.translate(-i.x-i.width*o.x,-i.y-i.height*o.y),this.ctx.drawImage(t,e.x,e.y,e.width,e.height,i.x,i.y,i.width,i.height),this.ctx.restore(),this):this}text(t,e,i=-1,s=\"\"){if(!this._drawCondition)return this;t=this._convertToAbsolutePixels(t);const o=this.ctx.fillStyle;return-1!==i&&(this.ctx.fillStyle=i.toString()),\"\"!==s&&(this.ctx.font=s),t.lineHeight||(t.lineHeight=this.ctx.measureText(\"M\").actualBoundingBoxAscent),t.width?this._drawWrappedText(t,e):this.ctx.fillText(e,t.x,t.y),this.ctx.fillStyle=o,this}_createAndDrawGeometry(t,e){[\"angles\",\"pivot\"].map(t=>{Array.isArray(e[t])?e[t]=e[t].map(t=>\"number\"==typeof t?{x:t,y:t}:t):\"number\"==typeof e[t]&&(e[t]={x:e[t],y:e[t]})});const i=this._geometryDrawers[t].create(e);return[\"angles\",\"pivot\"].map(t=>{e[t].length>0&&e[t].shift()}),i.update(e).draw(),null}_convertToAbsolutePixels(t){if(\"number\"==typeof t)return t*this._positionUnitMultiplier().x;{const e={};let i=!1;return(t=Array.isArray(t)&&4===t.length?{height:t[3],width:t[2],x:t[0],y:t[1]}:t).hasOwnProperty(\"x\")&&(e.x=t.x*this._positionUnitMultiplier(t.hasOwnProperty(\"positionUnit\")?t.positionUnit:void 0).x,i=!0),t.hasOwnProperty(\"y\")&&(e.y=t.y*this._positionUnitMultiplier(t.hasOwnProperty(\"positionUnit\")?t.positionUnit:void 0).y,i=!0),t.hasOwnProperty(\"width\")&&(e.width=t.width*this._positionUnitMultiplier(t.hasOwnProperty(\"positionUnit\")?t.positionUnit:void 0).x,i=!0),t.hasOwnProperty(\"height\")&&(e.height=t.height*this._positionUnitMultiplier(t.hasOwnProperty(\"positionUnit\")?t.positionUnit:void 0).y,i=!0),i?e:t}}_convertToVector3D(t){if(Array.isArray(t)){if(Array.isArray(t[0]))return t.map(t=>({x:t[0],y:t[1],z:t[2]}));if(\"number\"==typeof t[0]){const e=t;if(3===e.length)return[{x:e[0],y:e[1],z:e[2]}];throw new Error(\"Invalid array length for Vector3D conversion.\")}return t}return[t]}_fill(t){if(\"-1\"!==t.toString())if(t===p.USE_GLOBAL_COLOR)this.ctx.fill();else{const e=this.ctx.fillStyle;this.ctx.fillStyle=t.toString(),this.ctx.fill(),this.ctx.fillStyle=e}}_positionUnitMultiplier(t){return t===s.px||void 0===t&&this._unit===s.px?{x:1,y:1}:{x:this.ctx.canvas.width/100,y:this.ctx.canvas.height/100}}_stroke(t){if(\"-1\"!==t.toString())if(t===p.USE_GLOBAL_COLOR)this.ctx.stroke();else{const e=this.ctx.strokeStyle;this.ctx.strokeStyle=t.toString(),this.ctx.stroke(),this.ctx.strokeStyle=e}}_handleMethodStart(t,e={},i={}){if(this._mode!==h.simple)try{\"\"===this._analyticStore.currentRootMethod?(this._analyticStore.currentRootMethod=t,this._analyticStore.startTimeRootMethod=performance.now(),this._analyticStore.callback(a.start_root_method,{methodName:t,props:e,mainFillStyle:this.ctx?this.ctx.fillStyle:\"\",mainStrokeStyle:this.ctx?this.ctx.strokeStyle:\"\",...i})):(this._analyticStore.startTimeSubMethod=performance.now(),this._analyticStore.callback(a.start_sub_method,{methodName:t,props:e,mainFillStyle:this.ctx?this.ctx.fillStyle:\"\",mainStrokeStyle:this.ctx?this.ctx.strokeStyle:\"\",...i}))}catch(t){}}_handleMethodEnd(t,e){if(this._mode!==h.simple)try{t===this._analyticStore.currentRootMethod?(this._analyticStore.currentRootMethod=\"\",this._analyticStore.callback(a.end_root_method,{methodName:t,duration:performance.now()-this._analyticStore.startTimeRootMethod,props:e})):this._analyticStore.callback(a.end_sub_method,{methodName:t,duration:performance.now()-this._analyticStore.startTimeSubMethod,props:e})}catch(t){}}_drawWrappedText(t,e){if(this._handleMethodStart(\"_drawWrappedText\",{dim:t,text:e}),!this._drawCondition)return this;const i=this._getProcessedLines(e,t);return i.forEach((e,i)=>{const s=t.y+i*t.lineHeight;let o=t.x;if(t.center){const i=this.ctx.measureText(e).width;o=t.x+t.width/2-i/2}this.ctx.fillText(e,o,s)}),this._handleMethodEnd(\"_drawWrappedText\",{lines:i,text:e,dim:t}),this}_getProcessedLines(t,e){const i=t.split(\" \");let s=\"\";const o=[];for(const t of i){const i=s+t+\" \";this.ctx.measureText(i).width>e.width&&\"\"!==s?(o.push(s),s=t+\" \"):s=i}return o.push(s),o}_selectRect(t){return this.ctx.rect(t.x,t.y,t.width,t.height),this}}!function(t){t[t.METHOD_START=0]=\"METHOD_START\",t[t.METHOD_END=1]=\"METHOD_END\",t[t.METHOD_ERROR=2]=\"METHOD_ERROR\",t[t.RECEIVED_DETAILS=3]=\"RECEIVED_DETAILS\"}(l||(l={}));const y=(t,e=void 0)=>{const i={props:t};return e&&(i.bodyBuilder=e),i},x={beginPath:{},circle:y([{name:\"position\",type:\"vector2d\"},{name:\"radius\",type:\"number\"},{name:\"strokeStyle\",type:\"color\"},{name:\"fillStyle\",type:\"color\"}]),clipRect:y([{name:\"rect\",type:\"rectangle\"}]),clipRoundRect:y([{name:\"rect\",type:\"rectangle\"},{name:\"radius\",type:\"number\"}]),closePath:{},cls:{},cube:y([{name:\"planeRect\",type:\"rectangle\"},{name:\"depth\",type:\"number\"},{name:\"angles\",type:[\"vector3d\",\"vector3d[]\",\"number[]\",\"number[][]\"]},{name:\"strokeStyle\",type:\"color\"},{name:\"fillStyle\",type:\"color\"}]),cube3d:y([{name:\"planeRect\",type:\"rectangle\"},{name:\"depth\",type:\"number\"},{name:\"angles\",type:[\"vector3d\",\"vector3d[]\",\"number[]\",\"number[][]\"]},{name:\"strokeStyle\",type:\"color\"},{name:\"fillStyle\",type:\"color\"},{name:\"pivot\",type:\"vector3d\"}]),donut:y([{name:\"position\",type:\"vector2d\"},{name:\"outerRadius\",type:\"number\"},{name:\"innerRadius\",type:\"number\"},{name:\"strokeStyle\",type:\"color\"},{name:\"fillStyle\",type:\"color\"}]),fill:y([{name:\"fillRule\",type:\"canvasFillRule\"}]),gradientLines:y([{name:\"start\",type:\"vector2d\"},{name:\"destinations\",type:\"vector2d[]\"},{name:\"colors\",type:\"color[]\"},{name:\"width\",type:\"number\"}]),grid:y([{name:\"gridSize\",type:\"number\"},{name:\"strokeStyle\",type:\"color\"},{name:\"area\",type:\"rectangle\"},{name:\"angle\",type:\"number\"}]),hexagon:y([\"position\",\"radius\",\"strokeStyle\",\"fillStyle\",\"angle\"]),image:y([\"canvas\",\"sourceRect\",\"destinationRect\",\"angle\",\"pivot\"]),lines:y([\"startPosition\",\"destinations\",\"strokeStyle\",\"fillStyle\",\"lineWidth\"]),moveTo:y([\"position\"]),quadraticCurveTo:y([\"controlPoint\",\"position\"]),rectangle:y([\"rect\",\"strokeStyle\",\"fillStyle\",\"angle\",\"pivot\"]),removeDrawCondition:{},resetClip:{},roundRectangle:y([\"rect\",\"radius\",\"strokeStyle\",\"fillStyle\"]),selectRect:y([\"body\"]),selectRoundRect:y([\"rect\",\"borderRadius\"]),setConditionalFilter:y([\"condition\",\"filter\"]),setContext:y([\"ctx\"]),setDrawCondition:y([\"condition\"]),setFillStyle:y([\"fillStyle\"]),setFilter:y([\"filter\"]),setFont:y([\"font\"]),setGlobalCompositeOperation:y([\"newState\"]),setStrokeStyle:y([\"strokeStyle\"]),setUnit:y([\"unit\"]),start:{},stroke:{},text:y([\"dim\",\"text\",\"color\",\"font\"])};class g extends p{_activeDebugPointer=!1;_analyzerStartedAt=-1;_analyzerFinishedCheckTimeout;_config={analyzingDepth:0,checkForEndlessLoop:!0,checkForStartTrigger:!0,checkLoopEnd:!0,useOnlyDebugPointer:!0};_detailPointers=[];_listener;_methodStack=[];constructor(t,e){super(),this.setContext(t.getContext(\"2d\")),this._wrapParentMethods()}analyze(t,e){const i={depth:-1};let s=!1;switch(t){case l.METHOD_START:i.depth=this._methodStack.filter(t=>\"start\"!==t.methodName).length,0===i.depth&&this._rootPosition++,this._methodStack.push({arguments:e.arguments,errors:[],methodName:e.methodName,startTime:e.startTime}),\"start\"!==e.methodName&&(s=!((this._config.analyzingDepth<0||i.depth<=this._config.analyzingDepth)&&(!this._config.useOnlyDebugPointer||this._activeDebugPointer)));break;case l.METHOD_END:const t=this._methodStack.pop();if(i.depth=this._methodStack.filter(t=>\"start\"!==t.methodName).length,!t||t.methodName!==e.methodName)throw new Error(\"Method stack is not in sync\");s=\"start\"!==t.methodName?!((this._config.analyzingDepth<0||i.depth<=this._config.analyzingDepth)&&(!this._config.useOnlyDebugPointer||this._activeDebugPointer)):!this._config.useOnlyDebugPointer;break;case l.METHOD_ERROR:this._methodStack[this._methodStack.length-1].errors.push({message:e.errMessage,number:e.errNumber})}s||(this._doSelfCheck(),this._listener&&this._listener(t,{...e,...i}))}setAnalyticListener(t){return this._listener=t,this}start(){return super.start(),this._analyzerStartedAt=performance.now(),this}startDebug(){return this._activeDebugPointer=!0,this}stopDebug(){return this._activeDebugPointer=!1,this}_doSelfCheck(){const t=performance.now();if(this._config.checkForStartTrigger&&this._rootPosition>0&&-1===this._analyzerStartedAt)throw new Error(\"Analyzer was not started\");if(this._config.checkForEndlessLoop&&this._rootPosition>5e3)throw new Error(\"Analyzer seems to be in an endless loop\");this._config.checkLoopEnd&&0===this._methodStack.length&&(clearTimeout(this._analyzerFinishedCheckTimeout),this._analyzerFinishedCheckTimeout=setTimeout(()=>{this._listener&&this._listener(l.METHOD_END,{methodName:\"start\",endTime:t,duration:t-this._analyzerStartedAt})},100))}_wrapParentMethods(){const t=Object.getPrototypeOf(this);Object.keys(x).map(e=>{const i=t[e];Object.defineProperty(this,e,{configurable:!0,value:(...t)=>{const s=performance.now();this.analyze(l.METHOD_START,{arguments:t,methodName:e,startTime:s});const o=i.apply(this,t);return this.analyze(l.METHOD_END,{arguments:t,duration:performance.now()-s,endTime:performance.now(),methodName:e}),o},writable:!0})})}}const m={DrawEngine2D:p,drawEngine2dMeta:x,getDrawEngine:(t,e=!1)=>{let i;return e?(window.__CE_CANVAS_DRAW_2D_ENGINE__||(window.__CE_CANVAS_DRAW_2D_ENGINE__=new p),i=window.__CE_CANVAS_DRAW_2D_ENGINE__):i=new p,i.setContext(t.getContext(\"2d\"))},getDrawEngineAnalyzed:(t,e=void 0)=>new g(t),Vector2D:r}},784:(t,e,i)=>{i.d(e,{default:()=>o,n:()=>r});const s=(()=>{const t={magicProperties:{childNodes:(t,i)=>{e(t,i)},data:(t,e)=>{for(const i in e)e.hasOwnProperty(i)&&(t.dataset[i]=e[i])},innerText:(t,e)=>{t.appendChild(document.createTextNode(e))}}},e=(t,i)=>(Array.isArray(i)?i.map((i,s)=>{e(t,i)}):(i instanceof HTMLElement||i instanceof SVGSVGElement||i instanceof Text)&&t.appendChild(i),t),i=t=>{switch(t.charAt(0)){case\".\":return document.getElementsByClassName(t.substr(1));case\"#\":return i(t.substr(1));case\"?\":return\"*\"===t.charAt(1)?document.querySelectorAll(t.substr(2)):document.querySelector(t.substr(1));default:return document.getElementById(t)}},s=(t,e)=>{for(;t.parentNode;){if(e(t.parentNode))return t.parentNode;t=t.parentNode}},o=(t,e)=>s(t,t=>t.classList&&t.classList.contains(e)),n=t=>{for(;t.firstChild;)t.removeChild(t.firstChild);return t};return HTMLElement.prototype.appendChilds=function(t){return e(this,t)},HTMLElement.prototype.createChild=function(t,e={}){return this.appendChild(r(t,e))},HTMLElement.prototype.getParentByCondition=function(t){return s(this,t)},HTMLElement.prototype.getParentWithClass=function(t){return o(this,t)},HTMLElement.prototype.removeAllChilds=function(){return n(this)},[{propName:\"onBlur\",jsName:\"blur\"},{propName:\"onChange\",jsName:\"change\"},{propName:\"onClick\",jsName:\"click\"},{propName:\"onDragStart\",jsName:\"dragstart\"},{propName:\"onDragEnd\",jsName:\"dragend\"},{propName:\"onDragOver\",jsName:\"dragover\"},{propName:\"onDragEnter\",jsName:\"dragenter\"},{propName:\"onDragLeave\",jsName:\"dragleave\"},{propName:\"onDrop\",jsName:\"drop\"},{propName:\"onFocus\",jsName:\"focus\"},{propName:\"onKeyDown\",jsName:\"keydown\"},{propName:\"onKeyUp\",jsName:\"keyup\"},{propName:\"onSubmit\",jsName:\"submit\"},{propName:\"onMouseOver\",jsName:\"mouseover\"},{propName:\"onMouseOut\",jsName:\"mouseout\"},{propName:\"onMouseDown\",jsName:\"mousedown\"},{propName:\"onMouseUp\",jsName:\"mouseup\"},{propName:\"onMouseEnter\",jsName:\"mouseenter\"},{propName:\"onMouseLeave\",jsName:\"mouseleave\"},{propName:\"onMouseMove\",jsName:\"mousemove\"},{propName:\"onLoad\",jsName:\"load\"}].map(e=>{t.magicProperties[e.propName]=(t,i)=>{t.addEventListener(e.jsName,i)}}),{appendChilds:e,createElement:(e,i)=>{const s=document.createElement(e);if(i)for(const e in i)t.magicProperties.hasOwnProperty(e)?t.magicProperties[e](s,i[e]):s.setAttribute(e,i[e]);return s},getElement:i,getParentByCondition:s,getParentWithClass:o,removeAllChilds:n}})(),o=s,r=s.createElement;s.getElement}},e={};function i(s){var o=e[s];if(void 0!==o)return o.exports;var r=e[s]={exports:{}};return t[s](r,r.exports,i),r.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};i.d(s,{default:()=>g});const o=class{listeners=[];addListener(t,e){let i=this.getEventListenerInfo(t);return-1===i.index&&(this.listeners.push({callbacks:[],eventName:t}),i=this.getEventListenerInfo(t)),this.listeners[i.index].callbacks.push(e),this}dispatch(t,e){const i=this,s=this.getEventListenerInfo(t);if(-1!==s.index&&this.listeners[s.index])this.listeners[s.index].callbacks.map(t=>{try{t(e)}catch(t){i.handleError(t)}});else{if(\"error\"===t){const t=e&&e.message?e.message:\"An unhandled error occurred\",i=e&&e.error?e.error:e;throw new Error(t+JSON.stringify(i))}this.handleError({message:\"Event \"+t+\" not found.\"})}}getListeners(t){const e=this.getEventListenerInfo(t);return-1===e.index?[]:this.listeners[e.index].callbacks}removeListeners(t){const e=this.getEventListenerInfo(t);this.listeners[e.index].callbacks=[]}setErrorHandle(t){this.handleError=t}on(t,e){const i=this.getEventListenerInfo(t);-1===i.index?this.addListener(t,e):this.listeners[i.index].callbacks=[e]}getEventListenerInfo(t){const e={eventListener:void 0,index:-1};for(let i=0;i<this.listeners.length;i++)if(t===this.listeners[i].eventName){e.eventListener=this.listeners[i],e.index=i;break}return e}handleError=()=>null};class r extends o{static KEY_ALL=\"_all\";data=[];_addCurrentlyMultipleData=!1;constructor(){super();const t=this;return new Proxy(this,{get:(t,e)=>void 0!==t[e]?t[e]:this.getData(e),set:(e,i,s)=>void 0!==e[i]?e[i]=s:(t.setData(\"string\"==typeof i?i:\"_object\",s),!0)})}clearData(){this.dispatch(\"dataChanged\",{key:r.KEY_ALL,value:null,oldValue:null}),this.data=[]}getAll(){return this.data}getData(t){const e=this.data.find(e=>e.key===t);return e?e.value:void 0}getDataSave(t,e){const i=this.getDataIndex(t);return void 0===i?e:this.data[i].value}getDataIndex(t){let e;for(let i=0;i<this.data.length;i++)if(this.data[i].key===t){e=i;break}return e}removeData(t){const e=this.getDataIndex(t);if(void 0!==e){const i=this.data[e].value;this.data.splice(e,1),this.dispatch(\"dataChanged\",{key:t,value:void 0,oldValue:i})}return this}setData(t,e){const i=this.getDataIndex(t);if(void 0!==i){const s=this.data[i].value;this.data[i].value=e,e!==s&&this.dispatch(\"dataChanged\",{key:t,value:e,oldValue:s})}else this.data.push({key:t,value:e}),this.dispatch(\"dataChanged\",{key:t,value:e,oldValue:null});return this.dispatch(\"set_\"+t,e),this}setMultipleData(t){const e=[];for(const i of Object.keys(t))this.setData(i,t[i]),e.push({key:i,value:t[i]});this.dispatch(\"dataChanged\",e)}}var n=i(216);var a=i(784);const h={ä:\"ae\",ö:\"oe\",ü:\"ue\",Ä:\"ae\",Ö:\"oe\",Ü:\"ue\",ß:\"ss\"},l={à:\"a\",á:\"a\",â:\"a\",ã:\"a\",å:\"a\",è:\"e\",é:\"e\",ê:\"e\",ë:\"e\",ì:\"i\",í:\"i\",î:\"i\",ï:\"i\",ò:\"o\",ó:\"o\",ô:\"o\",õ:\"o\",ù:\"u\",ú:\"u\",û:\"u\",ç:\"c\",ñ:\"n\",À:\"A\",Á:\"A\",Â:\"A\",Ã:\"A\",Å:\"A\",È:\"E\",É:\"E\",Ê:\"E\",Ë:\"E\",Ì:\"I\",Í:\"I\",Î:\"I\",Ï:\"I\",Ò:\"O\",Ó:\"O\",Ô:\"O\",Õ:\"O\",Ù:\"U\",Ú:\"U\",Û:\"U\",Ç:\"C\",Ñ:\"N\"};function c(t){return t.replace(/[àáâãåèéêëìíîïòóôõùúûüçñäöüÄÖÜßÀÁÂÃÅÈÉÊËÌÍÎÏÒÓÔÕÙÚÛÇÑ]/g,t=>h[t]?h[t]:l[t]||t)}const d={createSlug:function(t){if(!t||\"string\"!=typeof t)return\"\";let e=t;e=c(e),e=e.toLowerCase();let i=t;return i=i.replace(/([A-Z]{2,})([A-Z][a-z]+)/g,\"$1-$2\"),i=i.replace(/([a-z0-9])([A-Z]{2,})/g,\"$1-$2\"),i=i.replace(/([a-z0-9])([A-Z])/g,\"$1-$2\"),i!==t&&(e=c(i).toLowerCase()),e=e.replace(/[^a-zA-Z0-9-]/g,\"-\"),e=e.replace(/-+/g,\"-\"),e=e.replace(/^-+|-+$/g,\"\"),e},pascalCase:function(t){return t&&\"string\"==typeof t?t.replace(/[àáâãåèéêëìíîïòóôõùúûüçñäöüÄÖÜßÀÁÂÃÅÈÉÊËÌÍÎÏÒÓÔÕÙÚÛÇÑ]/g,t=>h[t]?h[t]:l[t]||t).replace(/[^a-zA-Z0-9]/g,\" \").split(\" \").filter(t=>t.length>0).map(t=>t.charAt(0).toUpperCase()+t.slice(1).toLowerCase()).join(\"\"):\"\"},snailCase:function(t){if(!t||\"string\"!=typeof t)return\"\";let e=t;e=c(e),e=e.toLowerCase();let i=t;return i=i.replace(/([A-Z]{2,})([A-Z][a-z]+)/g,\"$1_$2\"),i=i.replace(/([a-z0-9])([A-Z]{2,})/g,\"$1_$2\"),i=i.replace(/([a-z0-9])([A-Z])/g,\"$1_$2\"),i!==t&&(e=c(i).toLowerCase()),e=e.replace(/[^a-zA-Z0-9_]/g,\"_\"),e=e.replace(/_+/g,\"_\"),e=e.replace(/^_+|_+$/g,\"\"),e},sprintf:function(t,...e){if(!t||\"string\"!=typeof t)return\"\";let i=0;return t.replace(/%%|%([+\\-0# ]*)(\\*|\\d+)?(?:\\.(\\*|\\d+))?([diouxXeEfFgGaAcsp])|%/g,(t,s,o,r,n)=>{if(\"%%\"===t)return\"%\";if(\"%\"===t)return\"%\";const a=s.includes(\"-\"),h=s.includes(\"+\"),l=s.includes(\"0\")&&!a,c=s.includes(\" \")&&!h,d=s.includes(\"#\");let u=0;\"*\"===o?u=Math.max(0,parseInt(e[i++],10)||0):o&&(u=Math.max(0,parseInt(o,10)||0));let p=-1;if(\"*\"===r){const t=parseInt(e[i++],10)||0;p=t<0?-1:t}else void 0!==r&&(p=Math.max(0,parseInt(r,10)||0));const y=e[i++];let x=\"\";switch(n){case\"s\":x=null===y?\"null\":void 0===y?\"\":String(y),p>=0&&(x=x.substring(0,p));break;case\"d\":case\"i\":{const t=parseInt(String(y),10)||0;x=String(t),h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"u\":{const t=Math.abs(parseInt(String(y),10)||0);x=String(t)}break;case\"o\":{const t=parseInt(String(y),10)||0;x=Math.abs(t).toString(8),d&&\"0\"!==x&&(x=\"0\"+x)}break;case\"x\":{const t=parseInt(String(y),10)||0;x=Math.abs(t).toString(16),d&&\"0\"!==x&&(x=\"0x\"+x)}break;case\"X\":{const t=parseInt(String(y),10)||0;x=Math.abs(t).toString(16).toUpperCase(),d&&\"0\"!==x&&(x=\"0X\"+x)}break;case\"f\":case\"F\":{const t=parseFloat(String(y))||0,e=p>=0?p:6;x=t.toFixed(e),h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"e\":{const t=parseFloat(String(y))||0,e=p>=0?p:6;x=t.toExponential(e),h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"E\":{const t=parseFloat(String(y))||0,e=p>=0?p:6;x=t.toExponential(e).toUpperCase(),h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"g\":{const t=parseFloat(String(y))||0,e=p>=0?Math.max(1,p):6,i=Math.abs(t);let s=!1;if(0!==i){const t=Math.floor(Math.log10(i));s=t<-4||t>=e}if(s)x=t.toExponential(e-1),x=x.replace(/\\.?0+e/,\"e\");else{const i=Math.max(0,e-Math.floor(Math.log10(Math.abs(t)||1))-1);x=t.toFixed(i),x=x.replace(/\\.?0+$/,\"\")}h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"G\":{const t=parseFloat(String(y))||0,e=p>=0?Math.max(1,p):6,i=Math.abs(t);let s=!1;if(0!==i){const t=Math.floor(Math.log10(i));s=t<-4||t>=e}if(s)x=t.toExponential(e-1).toUpperCase(),x=x.replace(/\\.?0+E/,\"E\");else{const i=Math.max(0,e-Math.floor(Math.log10(Math.abs(t)||1))-1);x=t.toFixed(i),x=x.replace(/\\.?0+$/,\"\")}h&&t>=0?x=\"+\"+x:c&&t>=0&&(x=\" \"+x)}break;case\"c\":{const t=parseInt(String(y),10)||0;x=String.fromCharCode(t)}break;default:return t}if(u>0&&x.length<u){const t=u-x.length;if(a)x+=\" \".repeat(t);else if(l&&(/^[+-]?[\\da-fA-F]/.test(x)||/^0[xX]/.test(x)))if(x.startsWith(\"0x\")||x.startsWith(\"0X\")){const e=x.substring(0,2),i=x.substring(2);x=e+\"0\".repeat(t)+i}else{const e=x.match(/^([+-]?)/),i=e?e[1]:\"\",s=x.substring(i.length);x=i+\"0\".repeat(t)+s}else x=\" \".repeat(t)+x}return x})}},u={defaultDialog:\"simple_request\",keepDomClear:!0,nodeCreated:!1,rootNode:null,textAbort:\"Abort\",textAccept:\"OK\",textError:\"Error\"},p={createRootNode:()=>{u.rootNode=(0,a.n)(\"div\",{class:\"dialog-provider\"}),document.body.appendChild(u.rootNode),u.nodeCreated=!0},disableRootNode:()=>{u.rootNode&&(u.keepDomClear?(document.body.removeChild(u.rootNode),u.nodeCreated=!1):(u.rootNode.setAttribute(\"class\",\"dialog-provider\"),u.rootNode.removeAllChilds())),document.getElementById(\"wpwrap\")?.setAttribute(\"style\",\"\")},getRootNode:()=>(u.nodeCreated||p.createRootNode(),u.rootNode)},y=t=>{const e=(0,a.n)(\"div\",{class:\"dialog-footer\"}),i=[{class:\"button--accept\",onClick:()=>{t.onAccept(),p.disableRootNode()},text:t.textAccept??u.textAccept}];return t.abortAble&&i.push({class:\"button--abort\",onClick:()=>{t.onAbort(),p.disableRootNode()},text:t.textAbort??u.textAbort}),[...i,...t.additionalButtons].map(t=>{e.appendChild((0,a.n)(\"button\",{class:\"button \"+t.class??\"\",innerText:t.text,onClick:t.onClick}))}),e},x=new class extends o{constructor(){super(),window._ceDialogStore||(window._ceDialogStore=[])}conditionalOpen(t,e,i={},s=null){t instanceof Function&&(t=t()),t?window._ceDialogStore.map(t=>{s&&t.name.toLowerCase()===e.toLowerCase()&&((s.onAccept?s.onAccept:()=>null)(t.dialog.getAcceptations()),t.dialog.reset())}):this.open(e,i,s)}open(t,e={},i={}){let s=!1;return window._ceDialogStore.map(o=>{if(!s&&o.name.toLowerCase()===t.toLowerCase()){s=!0;const r=i.onAccept?i.onAccept:()=>null,n={...o.dialog.getDefaultProviderOptions&&\"function\"==typeof o.dialog.getDefaultProviderOptions?o.dialog.getDefaultProviderOptions():{},...i,onAbort:i.onAbort?i.onAbort:()=>null,onAccept:()=>{const t=o.dialog.validate();return t.hadError?setTimeout(()=>{this.open(i.defaultDialog,{text:t.errorMessage,title:n.textError},{onAccept:()=>{t.reOpen&&setTimeout(()=>{this.open(o.dialog.getName(),t.props,i)},50)}})},50):r(o.dialog.getAcceptations()),o.dialog.reset(),t}};i=n;const h=document.createElement(\"div\");h.setAttribute(\"class\",\"dialog dialog--\"+t.toLowerCase());const l=t=>{const e=o.dialog.doRender(t);h.removeAllChilds(),p.getRootNode().removeAllChilds(),h.appendChilds([(0,a.n)(\"div\",{class:\"dialog-header\"}),(0,a.n)(\"div\",{class:\"dialog-content\"}),y({...i,additionalButtons:o.dialog.getAdditionalFooterButtons()})]),i.title&&h.childNodes[0].appendChild(document.createTextNode(i.title)),h.childNodes[1].appendChild(e),p.getRootNode().appendChild(h),o.dialog.onRendered(e)};o.dialog.on(\"propsUpdated\",t=>{l({...t.oldProps,...t.newProps})}),l(e)}}),this}register(t,e=\"\"){\"\"===e&&(e=t.getName());let i=!1;return window._ceDialogStore.map(t=>{t.name.toLowerCase()===e.toLowerCase()&&(i=!0)}),i||window._ceDialogStore.push({name:e,dialog:t}),this.dispatch(\"dialogAdded\",{name:e,dialog:t}),this}},g={CachedDataProvider:class{_activeFetchCalls=0;_cache={};_pendingRequests=[];clearCache(){return this._cache={},this}fetch(t){return this._activeFetchCalls++,void 0===t.enableCache&&(t.enableCache=!0),new Promise((e,i)=>{const s=this._buildCacheKey(t);if(t.enableCache&&this._cache[s])return this._activeFetchCalls--,void e(this._cache[s]);const o=this._getPendingRequest(s);\"initiated\"===o.state&&(this._pendingRequests[o.index].state=\"loading\"),this._pendingRequests[o.index].callbacks.resolve.push(e),this._pendingRequests[o.index].callbacks.reject.push(i),\"loading\"===this._pendingRequests[o.index].state&&(this._pendingRequests[o.index].state=\"pending\",fetch(t.url).then(e=>{e[t.evalJson?\"json\":\"text\"]().then(t=>{this._handleResponse(s,t)}).catch(t=>{this._handleResponse(s,t,\"reject\")})}).catch(t=>{this._handleResponse(s,t,\"reject\")})),this._activeFetchCalls--})}_buildCacheKey(t){return\"C_\"+btoa(encodeURI(JSON.stringify(t.method+t.url+JSON.stringify(t.data))))}_getPendingRequest(t){for(let e=0;e<this._pendingRequests.length;e++)if(this._pendingRequests[e].cacheKey===t)return{...this._pendingRequests[e],index:e};return this._pendingRequests.push({cacheKey:t,callbacks:{reject:[],resolve:[e=>{this._cache[t]=e}]},state:\"initiated\"}),{...this._pendingRequests[this._pendingRequests.length-1],index:this._pendingRequests.length-1}}_handleResponse(t,e,i=\"resolve\"){if(this._activeFetchCalls>0)return void setTimeout(()=>this._handleResponse(t,e),10);const s=this._getPendingRequest(t);this._pendingRequests[s.index].state=\"resolve\"===i?\"resolved\":\"rejected\",s.callbacks[i].map(t=>{t(e)}),this._pendingRequests.splice(s.index,1)}},Datahandler:r,Dialog:class extends o{name;props;constructor(){super(),this.name=\"\"}getAcceptations(){return[]}getDefaultProviderOptions(){return{abortAble:!1}}getName(){return this.name}validate(){return{errorMessage:\"\",hadError:!1,props:this.props,reOpen:!1}}doRender(t){return this.props=t,this.render(t)}updateProps(t){this.dispatch(\"propsUpdated\",{newProps:t,oldProps:this.props})}getAdditionalFooterButtons(){return[]}},DialogProvider:x,Eventhandler:o,ObjectStoreProvider:class{constructor(){window.__ObjectStore||(window.__ObjectStore=[])}addObject(t,e=null,i={group:\"default\"}){null===e&&(e=\"obj\");let s=window.__ObjectStore.find(t=>t.name===e);for(;s;){const t=this.splitByLastNumbers(s.name);e=t.name+(t.number+1),s=window.__ObjectStore.find(t=>t.name===e)}const o={...i,instance:t,name:e};return window.__ObjectStore.push(o),o}getObject(t){const e=window.__ObjectStore.find(e=>e.name===t);return e?e.instance:null}getObjectsByGroup(t=\"default\"){return window.__ObjectStore.filter(e=>e.group===t).map(t=>t.instance)}getStore(){return window.__ObjectStore}getStoreInfo(t){const e=window.__ObjectStore.findIndex(e=>e.name===t);return{...window.__ObjectStore[e],storeIndex:e}}removeObject(t){return window.__ObjectStore=window.__ObjectStore.filter(e=>e.name!==t),this}setObject(t,e){let i=window.__ObjectStore.find(e=>e.name===t);return i?i.instance=e:i=this.addObject(e,t),i}splitByLastNumbers(t){const e=t.match(/^(.*?)(\\d+)$/);return e?{name:e[1],number:Number(e[2])}:{name:t,number:1}}},canvasLib:n.default,createStore:()=>new Proxy(new class extends o{__data;constructor(){super(),this.__data={}}},{get:(t,e)=>\"on\"===e?t.addListener.bind(t):\"getAll\"===e?t.__data:t.__data[e]?t.__data[e]:void 0,set:(t,e,i)=>{const s={name:e,value:i};return t.__data[e]&&(s.oldValue=t.__data[e],t.dispatch(\"updateStore\",s),t.dispatch(\"update_\"+s.name,s)),t.dispatch(\"set_\"+s.name,s),t.__data[e]=i,t}}),domLib:a.default,stringUtils:d};return s.default})());\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/@cehlers88/ceutils/dist/index.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/css-loader/dist/cjs.js!./src/style/CanvasDiagram.css":
+/***/ "./node_modules/css-loader/dist/cjs.js!./src/style/CanvasDiagram.css"
 /*!***************************************************************************!*\
   !*** ./node_modules/css-loader/dist/cjs.js!./src/style/CanvasDiagram.css ***!
   \***************************************************************************/
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
+(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `canvas-diagram {\n    background: #dddddd;\n    box-sizing: border-box;\n    display: inline-block;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/style/CanvasDiagram.css?./node_modules/css-loader/dist/cjs.js\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/css-loader/dist/runtime/api.js":
+/***/ "./node_modules/css-loader/dist/runtime/api.js"
 /*!*****************************************************!*\
   !*** ./node_modules/css-loader/dist/runtime/api.js ***!
   \*****************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n  var list = [];\n\n  // return the list of modules as css string\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = \"\";\n      var needLayer = typeof item[5] !== \"undefined\";\n      if (item[4]) {\n        content += \"@supports (\".concat(item[4], \") {\");\n      }\n      if (item[2]) {\n        content += \"@media \".concat(item[2], \" {\");\n      }\n      if (needLayer) {\n        content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n      }\n      content += cssWithMappingToString(item);\n      if (needLayer) {\n        content += \"}\";\n      }\n      if (item[2]) {\n        content += \"}\";\n      }\n      if (item[4]) {\n        content += \"}\";\n      }\n      return content;\n    }).join(\"\");\n  };\n\n  // import a list of modules into the list\n  list.i = function i(modules, media, dedupe, supports, layer) {\n    if (typeof modules === \"string\") {\n      modules = [[null, modules, undefined]];\n    }\n    var alreadyImportedModules = {};\n    if (dedupe) {\n      for (var k = 0; k < this.length; k++) {\n        var id = this[k][0];\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n    for (var _k = 0; _k < modules.length; _k++) {\n      var item = [].concat(modules[_k]);\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        continue;\n      }\n      if (typeof layer !== \"undefined\") {\n        if (typeof item[5] === \"undefined\") {\n          item[5] = layer;\n        } else {\n          item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n          item[5] = layer;\n        }\n      }\n      if (media) {\n        if (!item[2]) {\n          item[2] = media;\n        } else {\n          item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n          item[2] = media;\n        }\n      }\n      if (supports) {\n        if (!item[4]) {\n          item[4] = \"\".concat(supports);\n        } else {\n          item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n          item[4] = supports;\n        }\n      }\n      list.push(item);\n    }\n  };\n  return list;\n};\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/css-loader/dist/runtime/api.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js":
+/***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js"
 /*!**************************************************************!*\
   !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***!
   \**************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\nmodule.exports = function (i) {\n  return i[1];\n};\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/css-loader/dist/runtime/noSourceMaps.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":
+/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"
 /*!****************************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***!
   \****************************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n  var result = -1;\n  for (var i = 0; i < stylesInDOM.length; i++) {\n    if (stylesInDOM[i].identifier === identifier) {\n      result = i;\n      break;\n    }\n  }\n  return result;\n}\nfunction modulesToDom(list, options) {\n  var idCountMap = {};\n  var identifiers = [];\n  for (var i = 0; i < list.length; i++) {\n    var item = list[i];\n    var id = options.base ? item[0] + options.base : item[0];\n    var count = idCountMap[id] || 0;\n    var identifier = \"\".concat(id, \" \").concat(count);\n    idCountMap[id] = count + 1;\n    var indexByIdentifier = getIndexByIdentifier(identifier);\n    var obj = {\n      css: item[1],\n      media: item[2],\n      sourceMap: item[3],\n      supports: item[4],\n      layer: item[5]\n    };\n    if (indexByIdentifier !== -1) {\n      stylesInDOM[indexByIdentifier].references++;\n      stylesInDOM[indexByIdentifier].updater(obj);\n    } else {\n      var updater = addElementStyle(obj, options);\n      options.byIndex = i;\n      stylesInDOM.splice(i, 0, {\n        identifier: identifier,\n        updater: updater,\n        references: 1\n      });\n    }\n    identifiers.push(identifier);\n  }\n  return identifiers;\n}\nfunction addElementStyle(obj, options) {\n  var api = options.domAPI(options);\n  api.update(obj);\n  var updater = function updater(newObj) {\n    if (newObj) {\n      if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n        return;\n      }\n      api.update(obj = newObj);\n    } else {\n      api.remove();\n    }\n  };\n  return updater;\n}\nmodule.exports = function (list, options) {\n  options = options || {};\n  list = list || [];\n  var lastIdentifiers = modulesToDom(list, options);\n  return function update(newList) {\n    newList = newList || [];\n    for (var i = 0; i < lastIdentifiers.length; i++) {\n      var identifier = lastIdentifiers[i];\n      var index = getIndexByIdentifier(identifier);\n      stylesInDOM[index].references--;\n    }\n    var newLastIdentifiers = modulesToDom(newList, options);\n    for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n      var _identifier = lastIdentifiers[_i];\n      var _index = getIndexByIdentifier(_identifier);\n      if (stylesInDOM[_index].references === 0) {\n        stylesInDOM[_index].updater();\n        stylesInDOM.splice(_index, 1);\n      }\n    }\n    lastIdentifiers = newLastIdentifiers;\n  };\n};\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js":
+/***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js"
 /*!********************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***!
   \********************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\nvar memo = {};\n\n/* istanbul ignore next  */\nfunction getTarget(target) {\n  if (typeof memo[target] === \"undefined\") {\n    var styleTarget = document.querySelector(target);\n\n    // Special case to return head of iframe instead of iframe itself\n    if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n      try {\n        // This will throw an exception if access to iframe is blocked\n        // due to cross-origin restrictions\n        styleTarget = styleTarget.contentDocument.head;\n      } catch (e) {\n        // istanbul ignore next\n        styleTarget = null;\n      }\n    }\n    memo[target] = styleTarget;\n  }\n  return memo[target];\n}\n\n/* istanbul ignore next  */\nfunction insertBySelector(insert, style) {\n  var target = getTarget(insert);\n  if (!target) {\n    throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n  }\n  target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/insertBySelector.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js":
+/***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js"
 /*!**********************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***!
   \**********************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\n/* istanbul ignore next  */\nfunction insertStyleElement(options) {\n  var element = document.createElement(\"style\");\n  options.setAttributes(element, options.attributes);\n  options.insert(element, options.options);\n  return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/insertStyleElement.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":
+/***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"
 /*!**********************************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***!
   \**********************************************************************************/
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
 eval("{\n\n/* istanbul ignore next  */\nfunction setAttributesWithoutAttributes(styleElement) {\n  var nonce =  true ? __webpack_require__.nc : 0;\n  if (nonce) {\n    styleElement.setAttribute(\"nonce\", nonce);\n  }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js":
+/***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js"
 /*!***************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***!
   \***************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\n/* istanbul ignore next  */\nfunction apply(styleElement, options, obj) {\n  var css = \"\";\n  if (obj.supports) {\n    css += \"@supports (\".concat(obj.supports, \") {\");\n  }\n  if (obj.media) {\n    css += \"@media \".concat(obj.media, \" {\");\n  }\n  var needLayer = typeof obj.layer !== \"undefined\";\n  if (needLayer) {\n    css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n  }\n  css += obj.css;\n  if (needLayer) {\n    css += \"}\";\n  }\n  if (obj.media) {\n    css += \"}\";\n  }\n  if (obj.supports) {\n    css += \"}\";\n  }\n  var sourceMap = obj.sourceMap;\n  if (sourceMap && typeof btoa !== \"undefined\") {\n    css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n  }\n\n  // For old IE\n  /* istanbul ignore if  */\n  options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n  // istanbul ignore if\n  if (styleElement.parentNode === null) {\n    return false;\n  }\n  styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next  */\nfunction domAPI(options) {\n  if (typeof document === \"undefined\") {\n    return {\n      update: function update() {},\n      remove: function remove() {}\n    };\n  }\n  var styleElement = options.insertStyleElement(options);\n  return {\n    update: function update(obj) {\n      apply(styleElement, options, obj);\n    },\n    remove: function remove() {\n      removeStyleElement(styleElement);\n    }\n  };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/styleDomAPI.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js":
+/***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js"
 /*!*********************************************************************!*\
   !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***!
   \*********************************************************************/
-/***/ ((module) => {
+(module) {
 
 "use strict";
 eval("{\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElement) {\n  if (styleElement.styleSheet) {\n    styleElement.styleSheet.cssText = css;\n  } else {\n    while (styleElement.firstChild) {\n      styleElement.removeChild(styleElement.firstChild);\n    }\n    styleElement.appendChild(document.createTextNode(css));\n  }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://@cehlers88/chart/./node_modules/style-loader/dist/runtime/styleTagTransform.js?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/Camera.ts":
+/***/ "./src/Camera.ts"
 /*!***********************!*\
   !*** ./src/Camera.ts ***!
   \***********************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_0__);\n\nconst { Vector2D } = _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_0__.canvasLib;\nclass Camera extends _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_0__.canvasLib.Vector2D {\n    _destination = new Vector2D(0, 0);\n    _speed = 1;\n    _destinationXReached = true;\n    _destinationXCallback = () => { };\n    _destinationYReached = true;\n    _destinationYCallback = () => { };\n    _maxPos = new Vector2D(0, 0);\n    constructor() {\n        super(0, 0);\n    }\n    setDestinationX(x, callback = () => { }) {\n        this._destination.x = x;\n        this._destinationXCallback = callback;\n        return this;\n    }\n    setDestinationY(y, callback = () => { }) {\n        this._destination.y = y;\n        this._destinationYCallback = callback;\n        return this;\n    }\n    update(deltaTime) {\n        const move = this.doWithVector(this._destination).getNomalizedMoveVector({ x: this._speed, y: this._speed });\n        if (move.x === 0) {\n            if (this._destinationXReached === false) {\n                this._destinationXCallback();\n            }\n            this._destinationXReached = true;\n        }\n        else {\n            this._destinationXReached = false;\n        }\n        if (move.y === 0) {\n            if (this._destinationYReached === false) {\n                this._destinationYCallback();\n            }\n            this._destinationYReached = true;\n        }\n        else {\n            this._destinationYReached = false;\n        }\n        this.x += move.x;\n        this.y += move.y;\n        super.update(deltaTime);\n    }\n    getMaxX() {\n        return this._maxPos.x;\n    }\n    getMaxY() {\n        return this._maxPos.y;\n    }\n    setSpeed(speed) {\n        this._speed = speed;\n        return this;\n    }\n    setMaxX(x) {\n        this._maxPos.x = x;\n        return this;\n    }\n    setMaxY(y) {\n        this._maxPos.y = y;\n        return this;\n    }\n    getX() {\n        return this.x;\n    }\n    getY() {\n        return this.y;\n    }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Camera);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Camera.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/ChartEngine.ts":
+/***/ "./src/ChartEngine.ts"
 /*!****************************!*\
   !*** ./src/ChartEngine.ts ***!
   \****************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ChartEngine)\n/* harmony export */ });\n/* harmony import */ var _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./plugin/EnrichGroupInfosPlugin */ \"./src/plugin/EnrichGroupInfosPlugin.ts\");\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./plugin/LegendsPlugin */ \"./src/plugin/LegendsPlugin.ts\");\n/* harmony import */ var _Registry_EntityRegistry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Registry/EntityRegistry */ \"./src/Registry/EntityRegistry.ts\");\n/* harmony import */ var _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./plugin/PaginationPlugin */ \"./src/plugin/PaginationPlugin.ts\");\n/* harmony import */ var _Camera__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Camera */ \"./src/Camera.ts\");\n/**\n * Library ChartEngine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\n\nconst _runStack = [];\nlet _isRunning = false;\nconst _exec = () => {\n    if (_isRunning)\n        return;\n    _isRunning = true;\n    window.requestAnimationFrame(() => {\n        _runStack.map(f => f());\n        _isRunning = false;\n        if (_runStack.length > 0)\n            _exec();\n    });\n};\nclass ChartEngine {\n    _camera = new _Camera__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n    _canvasElement;\n    _entityRegistry = new _Registry_EntityRegistry__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n    _ctx;\n    _dataGroups = [];\n    _plugins = [];\n    _pluginProperties = {};\n    constructor(canvasElement, properties = {\n        plugins: []\n    }) {\n        this._canvasElement = canvasElement;\n        this._ctx = canvasElement.getContext('2d');\n        this._canvasElement.height = this._canvasElement.offsetHeight;\n        this._canvasElement.width = this._canvasElement.offsetWidth;\n        [\n            new _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"](),\n            new _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_4__[\"default\"](),\n            new _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_2__[\"default\"](),\n            ...properties.plugins,\n        ].map(plugin => {\n            this.addPlugin(plugin);\n        });\n        this._canvasElement.addEventListener('pointermove', (e) => {\n            this._plugins.map(p => p.handleHover(e.offsetX, e.offsetY));\n        });\n        this._canvasElement.addEventListener('wheel', (e) => {\n            console.log('wheel', e);\n            this._plugins.map(p => p.handleScroll(e.deltaX, e.deltaY));\n        });\n        this._canvasElement.addEventListener('pointerout', (e) => {\n            this._plugins.map(p => p.handleLeave());\n        });\n    }\n    getEngineCallbacks() {\n        return {\n            updateData: (indexGroup, indexData, newData) => {\n                console.log('updateData context:', this);\n                this._dataGroups[indexData].data[indexData] = newData;\n                return this;\n            }\n        };\n    }\n    addPlugin(plugin) {\n        for (let key in this._pluginProperties) {\n            plugin.setProperty(key, this._pluginProperties[key]);\n        }\n        plugin\n            .setCamera(this._camera)\n            .setEntityRegistry(this._entityRegistry);\n        this._plugins.push(plugin);\n        return this;\n    }\n    getDrawAreaRect() {\n        return {\n            x: 0,\n            y: 0,\n            w: this._canvasElement.width,\n            h: this._canvasElement.height\n        };\n    }\n    getPlugin(pluginName) {\n        return this._plugins.find((plugin) => plugin.getName() === pluginName);\n    }\n    getPlugins() {\n        return this._plugins.sort((p1, p2) => p1.getPriority() - p2.getPriority());\n    }\n    setPluginProperty(propertyName, value) {\n        this._pluginProperties[propertyName] = value;\n        this._plugins.map(p => p.setProperty(propertyName, value));\n        return this;\n    }\n    create() {\n        this._plugins.map(p => p.create(this._canvasElement, this._dataGroups));\n        return this;\n    }\n    addDataGroup(dataGroup) {\n        this._dataGroups.push(dataGroup);\n        return this;\n    }\n    addValue(value, groupName = '') {\n        const dataGroup = this._dataGroups.find((group) => group.label === groupName);\n        if (dataGroup) {\n            dataGroup.data.push(value);\n        }\n        else {\n            this._dataGroups.push(_Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createDataGroup([value], groupName));\n        }\n        return this;\n    }\n    draw() {\n        this._ctx.clearRect(0, 0, this._canvasElement.width, this._canvasElement.height);\n        this.getPlugins().map(p => p.draw());\n        return this;\n    }\n    update() {\n        this.getPlugins().map(p => {\n            this._dataGroups = p.update(this._dataGroups).dataGroups;\n        });\n        return this;\n    }\n    start() {\n        this.create();\n        _runStack.push(() => {\n            this.update();\n            this.draw();\n        });\n        _exec();\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/ChartEngine.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ ChartEngine)\n/* harmony export */ });\n/* harmony import */ var _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./plugin/EnrichGroupInfosPlugin */ \"./src/plugin/EnrichGroupInfosPlugin.ts\");\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./plugin/LegendsPlugin */ \"./src/plugin/LegendsPlugin.ts\");\n/* harmony import */ var _Registry_EntityRegistry__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Registry/EntityRegistry */ \"./src/Registry/EntityRegistry.ts\");\n/* harmony import */ var _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./plugin/PaginationPlugin */ \"./src/plugin/PaginationPlugin.ts\");\n/* harmony import */ var _Camera__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Camera */ \"./src/Camera.ts\");\n/**\n * Library ChartEngine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\n\nconst _runStack = [];\nlet _isRunning = false;\nconst _exec = () => {\n    if (_isRunning)\n        return;\n    _isRunning = true;\n    window.requestAnimationFrame(() => {\n        _runStack.map(f => f());\n        _isRunning = false;\n        if (_runStack.length > 0)\n            _exec();\n    });\n};\nclass ChartEngine {\n    _camera = new _Camera__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\n    _canvasElement;\n    _entityRegistry = new _Registry_EntityRegistry__WEBPACK_IMPORTED_MODULE_3__[\"default\"]();\n    _ctx;\n    _dataGroups = [];\n    _plugins = [];\n    _pluginProperties = {};\n    constructor(canvasElement, properties = {\n        plugins: []\n    }) {\n        this._canvasElement = canvasElement;\n        this._ctx = canvasElement.getContext('2d');\n        this._canvasElement.height = this._canvasElement.offsetHeight;\n        this._canvasElement.width = this._canvasElement.offsetWidth;\n        [\n            new _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"](),\n            new _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_4__[\"default\"](),\n            new _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_2__[\"default\"](),\n            ...properties.plugins,\n        ].map(plugin => {\n            this.addPlugin(plugin);\n        });\n        this._canvasElement.addEventListener('pointermove', (e) => {\n            this._plugins.map(p => p.handleHover(e.offsetX + this._camera.getX(), e.offsetY + this._camera.getY()));\n        });\n        this._canvasElement.addEventListener('wheel', (e) => {\n            this._plugins.map(p => p.handleScroll(e.deltaX, e.deltaY));\n        });\n        this._canvasElement.addEventListener('pointerout', (e) => {\n            this._plugins.map(p => p.handleLeave());\n        });\n    }\n    addPlugin(plugin) {\n        for (let key in this._pluginProperties) {\n            plugin.setProperty(key, this._pluginProperties[key]);\n        }\n        plugin\n            .setCamera(this._camera)\n            .setEntityRegistry(this._entityRegistry);\n        this._plugins.push(plugin);\n        return this;\n    }\n    getDrawAreaRect() {\n        return {\n            x: 0,\n            y: 0,\n            w: this._canvasElement.width,\n            h: this._canvasElement.height\n        };\n    }\n    getPlugin(pluginName) {\n        return this._plugins.find((plugin) => plugin.getName() === pluginName);\n    }\n    getPlugins() {\n        return this._plugins.sort((p1, p2) => p1.getPriority() - p2.getPriority());\n    }\n    setPluginProperty(propertyName, value) {\n        this._pluginProperties[propertyName] = value;\n        this._plugins.map(p => p.setProperty(propertyName, value));\n        return this;\n    }\n    create() {\n        this._plugins.map(p => p.create(this._canvasElement, this._dataGroups));\n        return this;\n    }\n    addDataGroup(dataGroup) {\n        this._dataGroups.push(dataGroup);\n        return this;\n    }\n    addValue(value, groupName = '') {\n        const dataGroup = this._dataGroups.find((group) => group.label === groupName);\n        if (dataGroup) {\n            dataGroup.data.push(value);\n        }\n        else {\n            this._dataGroups.push(_Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createDataGroup([value], groupName));\n        }\n        return this;\n    }\n    draw() {\n        this._ctx.clearRect(0, 0, this._canvasElement.width, this._canvasElement.height);\n        this.getPlugins().map(p => p.draw());\n        return this;\n    }\n    update() {\n        this.getPlugins().map(p => {\n            this._dataGroups = p.update(this._dataGroups).dataGroups;\n        });\n        return this;\n    }\n    start() {\n        this.create();\n        _runStack.push(() => {\n            this.update();\n            this.draw();\n        });\n        _exec();\n    }\n    getEngineCallbacks() {\n        return {\n            updateData: (indexGroup, indexData, newData) => {\n                console.log('updateData context:', this);\n                this._dataGroups[indexData].data[indexData] = newData;\n                return this;\n            }\n        };\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/ChartEngine.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/Factory/DataGroupFactory.ts":
+/***/ "./src/Event/TooltipEvent.ts"
+/*!***********************************!*\
+  !*** ./src/Event/TooltipEvent.ts ***!
+  \***********************************/
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TooltipEvent)\n/* harmony export */ });\nclass TooltipEvent extends Event {\n    reason;\n    data;\n    constructor(reason, data) {\n        super('CHART_TOOLTIP_EVENT', { bubbles: true, composed: true });\n        this.reason = reason;\n        this.data = data;\n    }\n    static dispatch(reason, data) {\n        document.dispatchEvent(new TooltipEvent(reason, data));\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Event/TooltipEvent.ts?\n}");
+
+/***/ },
+
+/***/ "./src/Factory/DataGroupFactory.ts"
 /*!*****************************************!*\
   !*** ./src/Factory/DataGroupFactory.ts ***!
   \*****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ DataGroupFactory)\n/* harmony export */ });\nclass DataGroupFactory {\n    static _colors = [\n        '#e84949',\n        '#30cb30',\n        '#f0a30a',\n        '#1d91e3',\n        '#ec459e',\n        '#9f4ef4',\n        '#f4f44e',\n        '#4ef4f4',\n        '#4ef49f',\n        '#f49f4e',\n        '#4e9bf4',\n    ];\n    static _lastColorIndex = -1;\n    static buildCounter = 0;\n    static createDataGroup(values, groupLabel = '', color = '') {\n        DataGroupFactory.buildCounter++;\n        if (color === '') {\n            DataGroupFactory._lastColorIndex++;\n            if (DataGroupFactory._lastColorIndex >= DataGroupFactory._colors.length) {\n                DataGroupFactory._lastColorIndex = 0;\n            }\n            color = DataGroupFactory._colors[DataGroupFactory._lastColorIndex];\n        }\n        return {\n            color,\n            label: groupLabel === '' ? 'Group#' + DataGroupFactory.buildCounter : groupLabel,\n            description: \"\",\n            data: values.map((valueDef) => {\n                let value = valueDef;\n                let label = valueDef;\n                let valueStart = 0;\n                if (valueDef !== null) {\n                    if (typeof valueDef === 'object') {\n                        if (Array.isArray(valueDef.value) && valueDef.value.length === 2) {\n                            valueStart = valueDef.value[0];\n                            value = valueDef.value[1];\n                        }\n                        else {\n                            value = valueDef.value;\n                        }\n                        label = valueDef.label;\n                    }\n                    else {\n                        if (Array.isArray(valueDef) && valueDef.length === 2) {\n                            valueStart = valueDef[0];\n                            value = valueDef[1];\n                            label = valueDef[0] + ' - ' + valueDef[1];\n                        }\n                    }\n                }\n                return {\n                    empty: (value === null),\n                    hasLabel: (valueDef && valueDef.label !== undefined),\n                    label,\n                    value,\n                    valueStart\n                };\n            }),\n            infos: {}\n        };\n    }\n    static parseDataGroupsDefinition(value) {\n        const valueObj = JSON.parse(value);\n        const result = [];\n        if (Array.isArray(valueObj)) {\n            if (typeof valueObj[0] === 'number' || Array.isArray(valueObj[0])) {\n                result.push(DataGroupFactory.createDataGroup(valueObj));\n            }\n        }\n        else {\n            if (typeof valueObj === 'object') {\n                Object.keys(valueObj).map((key) => {\n                    if (Array.isArray(valueObj[key])) {\n                        result.push(DataGroupFactory.createDataGroup(valueObj[key], key));\n                    }\n                    else {\n                        result.push(DataGroupFactory.createDataGroup(valueObj[key].data, key, valueObj[key].color));\n                    }\n                });\n            }\n        }\n        return result;\n    }\n    static setColor(color, index) {\n        DataGroupFactory._colors[index] = color;\n    }\n    static setColors(colors) {\n        DataGroupFactory._colors = colors;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Factory/DataGroupFactory.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ DataGroupFactory)\n/* harmony export */ });\nclass DataGroupFactory {\n    static buildCounter = 0;\n    static _colors = [\n        '#e84949',\n        '#30cb30',\n        '#f0a30a',\n        '#1d91e3',\n        '#ec459e',\n        '#9f4ef4',\n        '#f4f44e',\n        '#4ef4f4',\n        '#4ef49f',\n        '#f49f4e',\n        '#4e9bf4',\n    ];\n    static _lastColorIndex = -1;\n    static createDataGroup(values, groupLabel = '', color = '') {\n        DataGroupFactory.buildCounter++;\n        if (color === '') {\n            DataGroupFactory._lastColorIndex++;\n            if (DataGroupFactory._lastColorIndex >= DataGroupFactory._colors.length) {\n                DataGroupFactory._lastColorIndex = 0;\n            }\n            color = DataGroupFactory._colors[DataGroupFactory._lastColorIndex];\n        }\n        const dataGroup = {\n            color,\n            label: groupLabel === '' ? 'Group#' + DataGroupFactory.buildCounter : groupLabel,\n            description: \"\",\n            data: values.map((valueDef) => {\n                let value = valueDef;\n                let label = undefined;\n                let valueStart = valueDef;\n                let valueEnd = valueDef;\n                if (valueDef !== null) {\n                    if (typeof valueDef === 'object') {\n                        if (Array.isArray(valueDef.value)) {\n                            if (valueDef.value.length === 2) {\n                                valueStart = valueDef.value[0];\n                                value = valueDef.value[1];\n                                valueEnd = valueDef.value[1];\n                            }\n                            else {\n                                console.warn('valueDef.value must be an array with 2 elements', valueDef);\n                            }\n                        }\n                        else {\n                            value = valueDef.value;\n                            valueEnd = valueDef.value;\n                            valueStart = valueDef.valueStart;\n                        }\n                        label = valueDef.label;\n                    }\n                    else {\n                        if (Array.isArray(valueDef) && valueDef.length === 2) {\n                            valueStart = valueDef[0];\n                            value = valueDef[1];\n                            valueEnd = valueDef[1];\n                            label = valueDef[0] + ' - ' + valueDef[1];\n                        }\n                    }\n                }\n                return {\n                    empty: (value === null),\n                    hasLabel: (valueDef && valueDef.label !== undefined),\n                    label,\n                    value,\n                    valueEnd,\n                    valueStart\n                };\n            }),\n            infos: {}\n        };\n        return dataGroup;\n    }\n    static parseDataGroupsDefinition(value) {\n        const valueObj = JSON.parse(value);\n        const result = [];\n        if (Array.isArray(valueObj)) {\n            if (typeof valueObj[0] === 'number' || Array.isArray(valueObj[0])) {\n                result.push(DataGroupFactory.createDataGroup(valueObj));\n            }\n        }\n        else {\n            if (typeof valueObj === 'object') {\n                Object.keys(valueObj).map((key) => {\n                    if (Array.isArray(valueObj[key])) {\n                        result.push(DataGroupFactory.createDataGroup(valueObj[key], key));\n                    }\n                    else {\n                        result.push(DataGroupFactory.createDataGroup(valueObj[key].data, key, valueObj[key].color));\n                    }\n                });\n            }\n        }\n        return result;\n    }\n    static setColor(color, index) {\n        DataGroupFactory._colors[index] = color;\n    }\n    static setColors(colors) {\n        DataGroupFactory._colors = colors;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Factory/DataGroupFactory.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/Registry/DiagramRegistry.ts":
+/***/ "./src/Registry/DiagramRegistry.ts"
 /*!*****************************************!*\
   !*** ./src/Registry/DiagramRegistry.ts ***!
   \*****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   diagramRegistry: () => (/* binding */ diagramRegistry)\n/* harmony export */ });\nconst _diagrams = {};\nclass DiagramRegistry {\n    static _identPrefix = 'dia_';\n    createUniqueIdentifier() {\n        return 'unq' + Date.now().toString();\n    }\n    getDiagram(identifier) {\n        const diagram = _diagrams[DiagramRegistry._identPrefix + identifier];\n        if (diagram === undefined) {\n            throw new Error('DiagramRegistry.getDiagram: diagram with identifier ' + identifier + ' not found.');\n        }\n        return diagram;\n    }\n    register(diagram, identifier = '') {\n        if (identifier === '') {\n            identifier = diagram.hasAttribute('id') ? diagram.getAttribute('id') : '';\n        }\n        if (identifier === '') {\n            identifier = this.createUniqueIdentifier();\n        }\n        _diagrams[DiagramRegistry._identPrefix + identifier] = diagram;\n        return this;\n    }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DiagramRegistry);\nconst diagramRegistry = new DiagramRegistry();\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Registry/DiagramRegistry.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/Registry/EntityRegistry.ts":
+/***/ "./src/Registry/EntityRegistry.ts"
 /*!****************************************!*\
   !*** ./src/Registry/EntityRegistry.ts ***!
   \****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ EntityRegistry)\n/* harmony export */ });\nclass EntityRegistry {\n    _entityStore = {};\n    addEntity(source, entity, identifier = '') {\n        if (identifier === '') {\n            identifier = this.generateIdentifier();\n        }\n        this._entityStore[identifier] = { source: source, entity: entity };\n        return identifier;\n    }\n    generateIdentifier() {\n        return 'entity' + Object.keys(this._entityStore).length;\n    }\n    getEntity(identifier) {\n        return this._entityStore[identifier].entity;\n    }\n    getEntities(sourceFilter = '') {\n        let entities = [];\n        Object.keys(this._entityStore).map(ident => {\n            if (this._entityStore[ident].source === sourceFilter) {\n                entities.push(this._entityStore[ident].entity);\n            }\n        });\n        return entities;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Registry/EntityRegistry.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/customElement/CanvasDiagram.ts":
+/***/ "./src/customElement/CanvasDiagram.ts"
 /*!********************************************!*\
   !*** ./src/customElement/CanvasDiagram.ts ***!
   \********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _style_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../style/CanvasDiagram.css */ \"./src/style/CanvasDiagram.css\");\n/* harmony import */ var _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Registry/DiagramRegistry */ \"./src/Registry/DiagramRegistry.ts\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _ChartEngine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ChartEngine */ \"./src/ChartEngine.ts\");\n/**\n * Element CanvasDiagram\n * Created 03.10.24\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\nclass CanvasDiagram extends HTMLElement {\n    _cleanDom = true;\n    _engine;\n    connectedCallback() {\n        _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_1__.diagramRegistry.register(this);\n        const canvas = this.createCanvas();\n        this.appendChild(canvas);\n        this._engine = new _ChartEngine__WEBPACK_IMPORTED_MODULE_4__[\"default\"](canvas);\n        this.evalArguments();\n        //this._engine.addDataGroup(DataGroupFactory.createDataGroup([99,null,50,50,5]));\n        //this._engine.addDataGroup(DataGroupFactory.createDataGroup([5,-10,-10,20],'Bezeichnung', '#880726'));\n        /*\n        this._engine.addPlugin(new DiagramLine({\n            showBulletPoints: true,\n        }));*/\n        /*\n    button.addEventListener('click',()=>{\n        const plugin = engine.getPlugin('DiagramLine');\n            plugin.setProperty('showZeroLine',!plugin.getProperty('showZeroLine'));\n    });\n\n        */\n    }\n    addPlugin(plugin) {\n        this._engine.addPlugin(plugin);\n        return this;\n    }\n    createCanvas() {\n        const canvas = _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__.domLib.createElement('canvas');\n        this.setAttribute('style', 'width:0px; height:0px;');\n        [\n            { name: 'height', defaultValue: 150 },\n            { name: 'width', defaultValue: 300 },\n        ].map((attrDef) => {\n            let value = (this.hasAttribute(attrDef.name) ? this.getAttribute(attrDef.name) : attrDef.defaultValue.toString());\n            value = value.replace('px', '');\n            canvas.setAttribute(attrDef.name, value);\n            this.style[attrDef.name] = value + 'px';\n        });\n        return canvas;\n    }\n    evalArguments() {\n        [\n            { name: 'value', defaultValue: '[]', callback: (value) => {\n                    _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"].parseDataGroupsDefinition(value).map(dataGroupDef => {\n                        this._engine.addDataGroup(_Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"].createDataGroup(dataGroupDef.data, dataGroupDef.label, dataGroupDef.color));\n                    });\n                } },\n            { name: 'autostart', defaultValue: 'true', callback: (value) => {\n                    if (value === 'true') {\n                        this.start();\n                    }\n                } }\n        ].map(attrDef => {\n            const callbackArgument = this.hasAttribute(attrDef.name) ? this.getAttribute(attrDef.name) : attrDef.defaultValue;\n            attrDef.callback(callbackArgument);\n            if (this._cleanDom) {\n                this.removeAttribute(attrDef.name);\n            }\n        });\n    }\n    start() {\n        this._engine.start();\n        return this;\n    }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CanvasDiagram);\ncustomElements.define('canvas-diagram', CanvasDiagram);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/customElement/CanvasDiagram.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _style_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../style/CanvasDiagram.css */ \"./src/style/CanvasDiagram.css\");\n/* harmony import */ var _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Registry/DiagramRegistry */ \"./src/Registry/DiagramRegistry.ts\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _ChartEngine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../ChartEngine */ \"./src/ChartEngine.ts\");\n/**\n * Element CanvasDiagram\n * Created 03.10.24\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\nclass CanvasDiagram extends HTMLElement {\n    _cleanDom = true;\n    _engine;\n    connectedCallback() {\n        _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_1__.diagramRegistry.register(this);\n        const canvas = this.createCanvas();\n        this.appendChild(canvas);\n        this._engine = new _ChartEngine__WEBPACK_IMPORTED_MODULE_4__[\"default\"](canvas);\n        this.evalArguments();\n    }\n    addPlugin(plugin) {\n        this._engine.addPlugin(plugin);\n        return this;\n    }\n    getPlugin(pluginName) {\n        return this._engine.getPlugin(pluginName);\n    }\n    start() {\n        this._engine.start();\n        return this;\n    }\n    createCanvas() {\n        const canvas = _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_2__.domLib.createElement('canvas');\n        this.setAttribute('style', 'width:0px; height:0px;');\n        [\n            { name: 'height', defaultValue: 150 },\n            { name: 'width', defaultValue: 300 },\n        ].map((attrDef) => {\n            let value = (this.hasAttribute(attrDef.name) ? this.getAttribute(attrDef.name) : attrDef.defaultValue.toString());\n            value = value.replace('px', '');\n            canvas.setAttribute(attrDef.name, value);\n            this.style[attrDef.name] = value + 'px';\n        });\n        console.log('createCanvas', this.getAttribute('style'), ' ->', canvas);\n        return canvas;\n    }\n    evalArguments() {\n        [\n            {\n                name: 'value', defaultValue: '[]', callback: (value) => {\n                    _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"].parseDataGroupsDefinition(value).map(dataGroupDef => {\n                        console.log(dataGroupDef, 'per argument');\n                        this._engine.addDataGroup(_Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"].createDataGroup(dataGroupDef.data, dataGroupDef.label, dataGroupDef.color));\n                    });\n                }\n            },\n            {\n                name: 'autostart', defaultValue: 'true', callback: (value) => {\n                    if (value === 'true') {\n                        this.start();\n                    }\n                }\n            }\n        ].map(attrDef => {\n            const callbackArgument = this.hasAttribute(attrDef.name) ? this.getAttribute(attrDef.name) : attrDef.defaultValue;\n            attrDef.callback(callbackArgument);\n            if (this._cleanDom) {\n                this.removeAttribute(attrDef.name);\n            }\n        });\n    }\n}\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CanvasDiagram);\ncustomElements.define('canvas-diagram', CanvasDiagram);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/customElement/CanvasDiagram.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/index.ts":
+/***/ "./src/index.ts"
 /*!**********************!*\
   !*** ./src/index.ts ***!
   \**********************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasDiagram: () => (/* binding */ CanvasDiagram),\n/* harmony export */   ChartEngine: () => (/* binding */ ChartEngine),\n/* harmony export */   DataGroupFactory: () => (/* binding */ DataGroupFactory),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   diagramRegistry: () => (/* binding */ diagramRegistry),\n/* harmony export */   plugins: () => (/* binding */ plugins)\n/* harmony export */ });\n/* harmony import */ var _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./customElement/CanvasDiagram */ \"./src/customElement/CanvasDiagram.ts\");\n/* harmony import */ var _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./plugin/BarsPlugin */ \"./src/plugin/BarsPlugin.ts\");\n/* harmony import */ var _ChartEngine__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ChartEngine */ \"./src/ChartEngine.ts\");\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./plugin/DiagramLine */ \"./src/plugin/DiagramLine.ts\");\n/* harmony import */ var _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Registry/DiagramRegistry */ \"./src/Registry/DiagramRegistry.ts\");\n/* harmony import */ var _plugin_CameraMove__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./plugin/CameraMove */ \"./src/plugin/CameraMove.ts\");\n/* harmony import */ var _plugin_TimelinePlugin__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./plugin/TimelinePlugin */ \"./src/plugin/TimelinePlugin.ts\");\n/**\n * index.ts\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\n\n\n\nconst CanvasDiagram = _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nconst ChartEngine = _ChartEngine__WEBPACK_IMPORTED_MODULE_2__[\"default\"];\nconst DataGroupFactory = _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\nconst diagramRegistry = new _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\nconst plugins = {\n    BarsPlugin: _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    CameraMovePlugin: _plugin_CameraMove__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n    DiagramLinePlugin: _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    TimelinePlugin: _plugin_TimelinePlugin__WEBPACK_IMPORTED_MODULE_7__[\"default\"]\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n    CanvasDiagram: _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    ChartEngine: _ChartEngine__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    DataGroupFactory: _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    diagramRegistry,\n    plugins\n});\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/index.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   CanvasDiagram: () => (/* binding */ CanvasDiagram),\n/* harmony export */   ChartEngine: () => (/* binding */ ChartEngine),\n/* harmony export */   DataGroupFactory: () => (/* binding */ DataGroupFactory),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__),\n/* harmony export */   diagramRegistry: () => (/* binding */ diagramRegistry),\n/* harmony export */   plugins: () => (/* binding */ plugins)\n/* harmony export */ });\n/* harmony import */ var _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./customElement/CanvasDiagram */ \"./src/customElement/CanvasDiagram.ts\");\n/* harmony import */ var _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./plugin/BarsPlugin */ \"./src/plugin/BarsPlugin.ts\");\n/* harmony import */ var _ChartEngine__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ChartEngine */ \"./src/ChartEngine.ts\");\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/* harmony import */ var _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./plugin/DiagramLine */ \"./src/plugin/DiagramLine.ts\");\n/* harmony import */ var _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Registry/DiagramRegistry */ \"./src/Registry/DiagramRegistry.ts\");\n/* harmony import */ var _plugin_CameraMove__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./plugin/CameraMove */ \"./src/plugin/CameraMove.ts\");\n/* harmony import */ var _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./plugin/EnrichGroupInfosPlugin */ \"./src/plugin/EnrichGroupInfosPlugin.ts\");\n/* harmony import */ var _plugin_TimelinePlugin__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./plugin/TimelinePlugin */ \"./src/plugin/TimelinePlugin.ts\");\n/* harmony import */ var _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./plugin/LegendsPlugin */ \"./src/plugin/LegendsPlugin.ts\");\n/* harmony import */ var _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./plugin/PaginationPlugin */ \"./src/plugin/PaginationPlugin.ts\");\n/**\n * index.ts\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n\n\n\n\n\n\n\nconst CanvasDiagram = _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nconst ChartEngine = _ChartEngine__WEBPACK_IMPORTED_MODULE_2__[\"default\"];\nconst DataGroupFactory = _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\nconst diagramRegistry = new _Registry_DiagramRegistry__WEBPACK_IMPORTED_MODULE_5__[\"default\"]();\nconst plugins = {\n    BarsPlugin: _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    CameraMovePlugin: _plugin_CameraMove__WEBPACK_IMPORTED_MODULE_6__[\"default\"],\n    EnrichGroupInfosPlugin: _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_7__[\"default\"],\n    DiagramLinePlugin: _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_4__[\"default\"],\n    LegendsPlugin: _plugin_LegendsPlugin__WEBPACK_IMPORTED_MODULE_9__[\"default\"],\n    PaginationPlugin: _plugin_PaginationPlugin__WEBPACK_IMPORTED_MODULE_10__[\"default\"],\n    TimelinePlugin: _plugin_TimelinePlugin__WEBPACK_IMPORTED_MODULE_8__[\"default\"]\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n    CanvasDiagram: _customElement_CanvasDiagram__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    ChartEngine: _ChartEngine__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n    DataGroupFactory: _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    diagramRegistry,\n    plugins\n});\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/index.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/AbstractDiagramPlugin.ts":
+/***/ "./src/plugin/AbstractDiagramPlugin.ts"
 /*!*********************************************!*\
   !*** ./src/plugin/AbstractDiagramPlugin.ts ***!
   \*********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AbstractDiagramPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass AbstractDiagramPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    constructor(props = {}) {\n        super({\n            viewSize: -1,\n            ...props\n        });\n        this._priority = 50;\n    }\n    update(dataGroups) {\n        if (this.getProperty('enabled', true) === false)\n            return { dataGroups };\n        if (JSON.stringify(this._dataGroups) !== JSON.stringify(dataGroups)) {\n            this.updateBufferSize(dataGroups);\n        }\n        return super.update(dataGroups);\n    }\n    updateBufferSize(dataGroups) {\n        const groupWithMostData = dataGroups.reduce((prev, current) => {\n            return prev.data.length > current.data.length ? prev : current;\n        });\n        const viewSize = this.getProperty('viewSize', -1);\n        const dataPerView = viewSize === -1 ? groupWithMostData.data.length : viewSize;\n        const singleGroupWidth = this.getDrawAreaRect().w / dataPerView;\n        const bufferWidth = groupWithMostData.data.length * singleGroupWidth;\n        this.setBuffer(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__.domLib.createElement('canvas', {\n            height: this.getDrawAreaRect().h.toString(),\n            width: bufferWidth.toString()\n        }));\n        this._camera.setMaxX(bufferWidth - this.getDrawAreaRect().w);\n        return this.getDrawAreaRect().w / dataPerView;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/AbstractDiagramPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/AbstractPlugin.ts":
+/***/ "./src/plugin/AbstractPlugin.ts"
 /*!**************************************!*\
   !*** ./src/plugin/AbstractPlugin.ts ***!
   \**************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AbstractPlugin)\n/* harmony export */ });\nclass AbstractPlugin {\n    _buffer;\n    _camera;\n    _dataGroups = [];\n    _drawAreaRect;\n    _entityRegistry;\n    _fixed = false;\n    _properties = {};\n    _priority = 50;\n    bufferCtx;\n    ctx;\n    redrawBuffer = true;\n    constructor(props = {}) {\n        if (props.enabled === undefined) {\n            props.enabled = true;\n        }\n        Object.keys(props).map(key => {\n            this.setProperty(key, props[key]);\n        });\n    }\n    update(dataGroups) {\n        if (this.getProperty('enabled', true) === false)\n            return { dataGroups };\n        this._dataGroups = this.updateDataGroups(dataGroups).dataGroups;\n        return { dataGroups: this._dataGroups };\n    }\n    updateDataGroups(dataGroups) {\n        return { dataGroups };\n    }\n    addEntity(entity) {\n        this._entityRegistry.addEntity(this.getName(), entity);\n        return this;\n    }\n    createBuffer(canvasElement, width = null, height = null) {\n        this._buffer = document.createElement('canvas');\n        this._buffer.width = width ?? canvasElement.width;\n        this._buffer.height = height ?? canvasElement.height;\n        this.bufferCtx = this._buffer.getContext('2d');\n    }\n    create(canvasElement, dataGroups) {\n        this.createBuffer(canvasElement);\n        this.setDrawAreaRect({\n            x: this.getProperty('x', 0),\n            y: this.getProperty('y', 0),\n            w: canvasElement.width - this.getProperty('x', 0),\n            h: canvasElement.height - this.getProperty('y', 0)\n        });\n        this.ctx = canvasElement.getContext('2d');\n        return {\n            dataGroups,\n            plugin: this\n        };\n    }\n    drawBuffer() {\n        this.redrawBuffer = false;\n    }\n    draw(forceRedraw = false) {\n        const padding = this.getProperty('padding', 0);\n        if (this.needsRedraw || forceRedraw) {\n            this.bufferCtx.clearRect(0, 0, this._buffer.width, this._buffer.height);\n            this.drawBuffer();\n        }\n        this.ctx.drawImage(this._buffer, this._fixed ? 0 : this._camera.x, this._fixed ? 0 : this._camera.y, this._drawAreaRect.w, this._drawAreaRect.h, this._drawAreaRect.x + padding, this._drawAreaRect.y + padding, this._drawAreaRect.w - (2 * padding), this._drawAreaRect.h - (2 * padding));\n        return this;\n    }\n    getDrawAreaRect() {\n        return this._drawAreaRect;\n    }\n    getPriority() {\n        return this._priority;\n    }\n    getProperty(propertyName, defaultResult) {\n        return this._properties[propertyName] ?? defaultResult;\n    }\n    handleClick(x, y) {\n        return this;\n    }\n    handleHover(x, y) {\n        return this;\n    }\n    handleLeave() {\n        this.handleHover(-1, -1);\n        return this;\n    }\n    handleScroll(x, y) {\n        return this;\n    }\n    setBuffer(buffer) {\n        this._buffer = buffer;\n        this.bufferCtx = buffer.getContext('2d');\n        return this;\n    }\n    setCamera(camera) {\n        this._camera = camera;\n        return this;\n    }\n    setDrawAreaRect(rect) {\n        this._drawAreaRect = rect;\n        return this;\n    }\n    setEntityRegistry(entityRegistry) {\n        this._entityRegistry = entityRegistry;\n        return this;\n    }\n    setProperty(propertyName, value) {\n        this._properties[propertyName] = value;\n        return this;\n    }\n    init() {\n        return this;\n    }\n    get needsRedraw() {\n        return this.redrawBuffer;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/AbstractPlugin.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ AbstractPlugin)\n/* harmony export */ });\nclass AbstractPlugin {\n    _camera;\n    _dataGroups = [];\n    _entityRegistry;\n    _fixed = false;\n    _priority = 50;\n    bufferCtx;\n    ctx;\n    redrawBuffer = true;\n    _buffer;\n    _stateChangedListener;\n    _drawAreaRect;\n    _properties = {};\n    constructor(props = {}) {\n        if (props.enabled === undefined) {\n            props.enabled = true;\n        }\n        Object.keys(props).map(key => {\n            this.setProperty(key, props[key]);\n        });\n    }\n    get needsRedraw() {\n        return this.redrawBuffer;\n    }\n    setStateChangedListener(listener) {\n        this._stateChangedListener = listener;\n        return this;\n    }\n    setState(newState) {\n        return this;\n    }\n    update(dataGroups) {\n        if (this.getProperty('enabled', true) === false)\n            return { dataGroups };\n        this._dataGroups = this.updateDataGroups(dataGroups).dataGroups;\n        return { dataGroups: this._dataGroups };\n    }\n    updateDataGroups(dataGroups) {\n        return { dataGroups };\n    }\n    addEntity(entity) {\n        this._entityRegistry.addEntity(this.getName(), entity);\n        return this;\n    }\n    create(canvasElement, dataGroups) {\n        this.createBuffer(canvasElement);\n        this.setDrawAreaRect({\n            x: this.getProperty('x', 0),\n            y: this.getProperty('y', 0),\n            w: canvasElement.width,\n            h: canvasElement.height\n        });\n        this.ctx = canvasElement.getContext('2d');\n        console.log('so', this.getDrawAreaRect());\n        return {\n            dataGroups,\n            plugin: this\n        };\n    }\n    drawBuffer() {\n        this.redrawBuffer = false;\n    }\n    draw(forceRedraw = false) {\n        const padding = this.getProperty('padding', 0);\n        if (this.needsRedraw || forceRedraw) {\n            this.bufferCtx.clearRect(0, 0, this._buffer.width, this._buffer.height);\n            this.drawBuffer();\n            //console.log('redraw buffer', this.bufferCtx.canvas.width, this.bufferCtx.canvas.height);\n        }\n        this.ctx.drawImage(this._buffer, this._fixed ? 0 : this._camera.x, this._fixed ? 0 : this._camera.y, this._drawAreaRect.w, this._drawAreaRect.h, this._drawAreaRect.x + padding, this._drawAreaRect.y + padding, this._drawAreaRect.w - (2 * padding), this._drawAreaRect.h - (2 * padding));\n        return this;\n    }\n    getDrawAreaRect() {\n        return this._drawAreaRect;\n    }\n    getPriority() {\n        return this._priority;\n    }\n    getProperty(propertyName, defaultResult) {\n        return this._properties[propertyName] ?? defaultResult;\n    }\n    handleClick(x, y) {\n        return this;\n    }\n    handleHover(x, y) {\n        return this;\n    }\n    handleLeave() {\n        this.handleHover(-1, -1);\n        return this;\n    }\n    handleScroll(x, y) {\n        return this;\n    }\n    setBuffer(buffer) {\n        this._buffer = buffer;\n        this.bufferCtx = buffer.getContext('2d');\n        return this;\n    }\n    setCamera(camera) {\n        this._camera = camera;\n        return this;\n    }\n    setDrawAreaRect(rect) {\n        this._drawAreaRect = rect;\n        return this;\n    }\n    setEntityRegistry(entityRegistry) {\n        this._entityRegistry = entityRegistry;\n        return this;\n    }\n    setProperty(propertyName, value) {\n        this._properties[propertyName] = value;\n        return this;\n    }\n    init() {\n        return this;\n    }\n    createBuffer(canvasElement, width = null, height = null) {\n        console.log('create buffer', width, height, canvasElement, this);\n        this._buffer = document.createElement('canvas');\n        this._buffer.width = width ?? canvasElement.width;\n        this._buffer.height = height ?? canvasElement.height;\n        this.bufferCtx = this._buffer.getContext('2d');\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/AbstractPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/BarsPlugin.ts":
+/***/ "./src/plugin/BarsPlugin.ts"
 /*!**********************************!*\
   !*** ./src/plugin/BarsPlugin.ts ***!
   \**********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ BarsPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractDiagramPlugin */ \"./src/plugin/AbstractDiagramPlugin.ts\");\n/**\n * Library BarsPlugin\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass BarsPlugin extends _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    barGroups = [];\n    hoverPosition = { x: 0, y: 0 };\n    rangeType = ERangeType.MIN_MAX;\n    constructor(props = {}) {\n        super({\n            animationSpeed: 1,\n            enableAnimation: true,\n            padding: 0,\n            ...props,\n        });\n    }\n    drawBuffer() {\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                this.bufferCtx.fillStyle = bar.color;\n                const hover = this.hoverPosition.x >= bar.x && this.hoverPosition.x <= bar.x + bar.width;\n                this.bufferCtx.fillRect(bar.x - (hover ? 1 : 0), bar.y, bar.width + (hover ? 2 : 0), bar.height);\n            });\n        });\n        super.drawBuffer();\n    }\n    handleHover(x, y) {\n        this.hoverPosition = { x, y };\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                let changed = false;\n                if (x >= bar.x && x <= bar.x + bar.width) {\n                    if (!bar.hovered) {\n                        changed = true;\n                    }\n                    bar.hovered = true;\n                }\n                else {\n                    if (bar.hovered) {\n                        changed = true;\n                    }\n                    bar.hovered = false;\n                }\n                if (changed) {\n                    this.redrawBuffer = true;\n                }\n            });\n        });\n        return this;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) !== JSON.stringify(dataGroups)) {\n            this.redrawBuffer = true;\n            this._dataGroups = dataGroups;\n            let maxValue = Math.max(...dataGroups.map((group) => group.infos.max));\n            const minValue = Math.min(...dataGroups.map((group) => group.infos.min));\n            const range = maxValue - minValue;\n            const minValueZeroDiff = minValue < 0 ? Math.abs(minValue) : 0;\n            maxValue = this.rangeType === ERangeType.MIN_MAX ? range : maxValue;\n            const viewHeight = this.getDrawAreaRect().h;\n            const maxDataLength = Math.max(...dataGroups.map((group) => group.data.length));\n            const barWidth = (this.bufferCtx.canvas.width / (maxDataLength * dataGroups.length));\n            const zeroY = this.getDrawAreaRect().y + this.getDrawAreaRect().h - (minValueZeroDiff * viewHeight / maxValue);\n            this.barGroups = [];\n            this._dataGroups.map((group, groupIndex) => {\n                group.data.map((data, index) => {\n                    while (this.barGroups.length <= index) {\n                        this.barGroups.push([]);\n                    }\n                    const drawArea = this.getDrawAreaRect();\n                    const totalValue = data.value + data.valueStart + minValueZeroDiff;\n                    const barHeight = data.value * viewHeight / maxValue;\n                    const bar = {\n                        height: this.getProperty('enableAnimation', false) ? 1 : data.value * viewHeight / maxValue,\n                        destinationH: data.value * viewHeight / maxValue,\n                        destinationY: drawArea.y + drawArea.h - (totalValue * viewHeight / maxValue),\n                        x: (groupIndex * barWidth) + (index * barWidth * dataGroups.length) + drawArea.x + 1,\n                        y: this.getProperty('enableAnimation', false) ? drawArea.y + drawArea.h - (totalValue * viewHeight / maxValue) + barHeight : drawArea.y + drawArea.h - (totalValue * viewHeight / maxValue),\n                        width: barWidth - 2,\n                        color: group.color\n                    };\n                    this.barGroups[index].push(bar);\n                });\n            });\n        }\n        this.updateAnimations();\n        return { dataGroups: this._dataGroups };\n    }\n    updateAnimations() {\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                if (bar.y > bar.destinationY) {\n                    this.redrawBuffer = true;\n                    bar.y -= Math.min(1 * this.getProperty('animationSpeed', 1), bar.y - bar.destinationY);\n                }\n                if (bar.height < bar.destinationH) {\n                    this.redrawBuffer = true;\n                    bar.height += Math.min(1 * this.getProperty('animationSpeed', 1), bar.destinationH - bar.height);\n                }\n            });\n        });\n        return this;\n    }\n    getName() {\n        return \"BarsPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/BarsPlugin.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ BarsPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractDiagramPlugin */ \"./src/plugin/AbstractDiagramPlugin.ts\");\n/**\n * Library BarsPlugin\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass BarsPlugin extends _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    barGroups = [];\n    hoverPosition = { x: 0, y: 0 };\n    rangeType = ERangeType.MIN_MAX;\n    constructor(props = {}) {\n        super({\n            animationSpeed: 1,\n            enableAnimation: true,\n            padding: 0,\n            ...props,\n        });\n    }\n    drawBuffer() {\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                this.bufferCtx.fillStyle = bar.color;\n                const hover = this.hoverPosition.x >= bar.x && this.hoverPosition.x <= bar.x + bar.width;\n                this.bufferCtx.fillRect(bar.x - (hover ? 1 : 0), bar.y, bar.width + (hover ? 2 : 0), bar.height);\n            });\n        });\n        super.drawBuffer();\n    }\n    handleHover(x, y) {\n        this.hoverPosition = { x, y };\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                let changed = false;\n                if (x >= bar.x && x <= bar.x + bar.width) {\n                    if (!bar.hovered) {\n                        changed = true;\n                    }\n                    bar.hovered = true;\n                }\n                else {\n                    if (bar.hovered) {\n                        changed = true;\n                    }\n                    bar.hovered = false;\n                }\n                if (changed) {\n                    this.redrawBuffer = true;\n                }\n            });\n        });\n        return this;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) !== JSON.stringify(dataGroups)) {\n            this.redrawBuffer = true;\n            this._dataGroups = dataGroups;\n            let maxValue = Math.max(...dataGroups.map((group) => group.infos.max));\n            const minValue = Math.min(...dataGroups.map((group) => group.infos.min));\n            const range = maxValue - minValue;\n            //const minValueZeroDiff = minValue < 0 ? Math.abs(minValue) : 0;\n            const viewHeight = this.getDrawAreaRect().h;\n            const maxDataLength = Math.max(...dataGroups.map((group) => group.data.length));\n            const barWidth = (this.bufferCtx.canvas.width / (maxDataLength * dataGroups.length));\n            //const zeroY = this.getDrawAreaRect().y + this.getDrawAreaRect().h - (minValueZeroDiff * viewHeight / maxValue);\n            this.barGroups = [];\n            this._dataGroups.map((group, groupIndex) => {\n                group.data.map((data, index) => {\n                    while (this.barGroups.length <= index) {\n                        this.barGroups.push([]);\n                    }\n                    const drawArea = this.getDrawAreaRect();\n                    const percentageValue = Math.round((data.value - minValue) / range * 100);\n                    const height = (viewHeight / 100) * Math.round(percentageValue);\n                    const y = viewHeight - (viewHeight / 100) * Math.round(percentageValue);\n                    const bar = {\n                        height, // this.getProperty('enableAnimation',false) ? 1 : data.value * viewHeight / maxValue,\n                        destinationH: 10,\n                        destinationY: y, //drawArea.y + drawArea.h - (data.valueEnd * viewHeight / maxValue),\n                        x: (groupIndex * barWidth) + (index * barWidth * dataGroups.length) + drawArea.x + 1,\n                        y: y, //this.getProperty('enableAnimation',false) ? drawArea.h - barHeight : drawArea.y + drawArea.h - (data.valueEnd * viewHeight / maxValue),\n                        width: barWidth - 2,\n                        color: group.color\n                    };\n                    this.barGroups[index].push(bar);\n                });\n            });\n        }\n        this.updateAnimations();\n        return { dataGroups: this._dataGroups };\n    }\n    updateAnimations() {\n        this.barGroups.map((group) => {\n            group.map((bar) => {\n                if (bar.y > bar.destinationY) {\n                    this.redrawBuffer = true;\n                    bar.y -= Math.min(1 * this.getProperty('animationSpeed', 1), bar.y - bar.destinationY);\n                }\n                if (bar.height < bar.destinationH) {\n                    this.redrawBuffer = true;\n                    bar.height += Math.min(1 * this.getProperty('animationSpeed', 1), bar.destinationH - bar.height);\n                }\n            });\n        });\n        return this;\n    }\n    getName() {\n        return \"BarsPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/BarsPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/CameraMove.ts":
+/***/ "./src/plugin/CameraMove.ts"
 /*!**********************************!*\
   !*** ./src/plugin/CameraMove.ts ***!
   \**********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ CameraMove)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/**\n * Library DiagramLine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\nclass CameraMove extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    constructor(props) {\n        super({\n            allowScrollX: false,\n            allowScrollY: false,\n            speed: 1,\n            ...props\n        });\n    }\n    handleScroll(x, y) {\n        if (this.getProperty('allowScrollX', false)) {\n            this._camera.setDestinationX(this._camera.getX() + x);\n        }\n        if (this.getProperty('allowScrollY', false)) {\n            this._camera.setDestinationY(this._camera.getY() + y);\n        }\n        return super.handleScroll(x, y);\n    }\n    setCameraXDestination() {\n        let newPos = 0;\n        if (this._camera.x === 0) {\n            newPos = this._camera.getMaxX();\n        }\n        this._camera.setDestinationX(newPos, () => {\n            this.setCameraXDestination();\n        });\n    }\n    create(canvasElement, dataGroups) {\n        const result = super.create(canvasElement, dataGroups);\n        this._camera.setSpeed(this.getProperty('speed', 1));\n        setTimeout(() => {\n            this.setCameraXDestination();\n        }, 100);\n        return result;\n    }\n    update(dataGroups) {\n        this._camera.update(0);\n        return super.update(dataGroups);\n    }\n    getName() {\n        return \"CameraMove\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/CameraMove.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/DiagramLine.ts":
+/***/ "./src/plugin/DiagramLine.ts"
 /*!***********************************!*\
   !*** ./src/plugin/DiagramLine.ts ***!
   \***********************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ DiagramLine)\n/* harmony export */ });\n/* harmony import */ var _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractDiagramPlugin */ \"./src/plugin/AbstractDiagramPlugin.ts\");\n/**\n * Library DiagramLine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass DiagramLine extends _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    bulletPointRadius = 2;\n    bulletPointRadiusHover = 5;\n    dataPoints = [];\n    helpLines = [];\n    hoverPosition = { x: 0, y: 0 };\n    rangeType = ERangeType.ZERO_BASED;\n    syncGroupsPosition = false;\n    zeroLineValue = 0;\n    zeroLineValuePercentage = 0;\n    constructor(props = {}) {\n        super({\n            showBulletPoints: false,\n            ...props\n        });\n    }\n    _showZeroLine() {\n        return this.getProperty('showZeroLine', false);\n    }\n    drawHelpLines() {\n        this.helpLines.map((helpLine) => {\n            this.bufferCtx.strokeStyle = '#dddddd';\n            this.bufferCtx.fillStyle = '#ff0000';\n            this.bufferCtx.beginPath();\n            this.bufferCtx.moveTo(super.getDrawAreaRect().x, helpLine.y);\n            this.bufferCtx.lineTo(super.getDrawAreaRect().x + this.bufferCtx.canvas.width, helpLine.y);\n            this.bufferCtx.stroke();\n            this.bufferCtx.fillText(helpLine.label, super.getDrawAreaRect().x, helpLine.y);\n        });\n        return this;\n    }\n    drawBuffer() {\n        const singlePercentageHeight = this.getDrawAreaRect().h / 100; // 1% height\n        this.drawHelpLines();\n        if (this._showZeroLine()) {\n            this.bufferCtx.strokeStyle = '#000000';\n            this.bufferCtx.beginPath();\n            this.bufferCtx.moveTo(this.getDrawAreaRect().x, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.bufferCtx.lineTo(this.getDrawAreaRect().x + this.bufferCtx.canvas.width, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.bufferCtx.stroke();\n        }\n        this.dataPoints.map(group => {\n            this.bufferCtx.beginPath();\n            group.map((dataPoint, index) => {\n                this.bufferCtx.strokeStyle = dataPoint.color;\n                if (index === 0) {\n                    this.bufferCtx.moveTo(dataPoint.x, dataPoint.y);\n                }\n                else {\n                    this.bufferCtx.lineTo(dataPoint.x, dataPoint.y);\n                }\n            });\n            this.bufferCtx.stroke();\n        });\n        if (this.getProperty('showBulletPoints', false)) {\n            this.dataPoints.map(group => {\n                group.map((dataPoint) => {\n                    const mouseDistance = Math.sqrt(Math.pow(this.hoverPosition.x - dataPoint.x, 2) +\n                        Math.pow(this.hoverPosition.y - dataPoint.y, 2));\n                    this.bufferCtx.fillStyle = dataPoint.color;\n                    this.bufferCtx.beginPath();\n                    this.bufferCtx.arc(dataPoint.x, dataPoint.y, (mouseDistance < this.bulletPointRadiusHover ? this.bulletPointRadiusHover : this.bulletPointRadius), 0, 2 * Math.PI);\n                    this.bufferCtx.fill();\n                });\n            });\n        }\n        return this;\n    }\n    calcPointGap(dataGroup) {\n        return this.bufferCtx.canvas.width / (dataGroup.data.length - 1);\n        // removed by dead control flow\n\n    }\n    handleHover(x, y) {\n        this.hoverPosition = { x, y };\n        return this;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) === JSON.stringify(dataGroups))\n            return { dataGroups };\n        const singlePercentageHeight = this.getDrawAreaRect().h / 100; // 1% height\n        this._dataGroups = dataGroups;\n        this.zeroLineValue = Math.min(0, ...dataGroups.map((group) => group.infos.min)) * -1;\n        const maxValue = Math.max(...dataGroups.map((group) => group.infos.max));\n        this.zeroLineValuePercentage = this.zeroLineValue / (maxValue + this.zeroLineValue) * 100;\n        const minValue = Math.min(...this._dataGroups.map((group) => group.infos.min));\n        const groupWithMostData = this._dataGroups.reduce((prev, current) => prev.data.length > current.data.length ? prev : current);\n        const pointGap = this.calcPointGap(groupWithMostData);\n        const largestDecimalStep = Math.max(...this._dataGroups.map((group) => group.infos.largestDecimalStep));\n        const decimalStepPercentage = largestDecimalStep / (maxValue + this.zeroLineValue) * 100;\n        this.helpLines = [];\n        let currentDecimalStep = decimalStepPercentage;\n        while (currentDecimalStep < 100) {\n            this.helpLines.push({\n                y: this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * currentDecimalStep,\n                label: largestDecimalStep.toString()\n            });\n            currentDecimalStep += decimalStepPercentage;\n        }\n        this.dataPoints = this._dataGroups.map((dataGroup) => {\n            const rangeX = this.rangeType === ERangeType.ZERO_BASED ? (maxValue + this.zeroLineValue) : maxValue - minValue;\n            return dataGroup.data.map((dataPoint, index) => {\n                if (dataPoint.empty)\n                    return undefined;\n                return {\n                    x: this.getDrawAreaRect().x + pointGap * index,\n                    y: this.getDrawAreaRect().y + this.getDrawAreaRect().h - (dataPoint.value + this.zeroLineValue) * this.getDrawAreaRect().h / rangeX,\n                    value: dataPoint.value,\n                    color: dataGroup.color,\n                    label: dataPoint.label\n                };\n            }).filter((dataPoint) => dataPoint !== undefined);\n        });\n        return { dataGroups };\n    }\n    getDrawAreaRect() {\n        const { x, y, h, w } = super.getDrawAreaRect();\n        const manipulator = this.getProperty('showBulletPoints', false) ? this.bulletPointRadiusHover : 0;\n        return {\n            x: x + manipulator,\n            y: y + manipulator,\n            h: h - (manipulator * 2),\n            w: w - (manipulator * 2)\n        };\n    }\n    getName() {\n        return \"DiagramLine\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/DiagramLine.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ DiagramLine)\n/* harmony export */ });\n/* harmony import */ var _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractDiagramPlugin */ \"./src/plugin/AbstractDiagramPlugin.ts\");\n/* harmony import */ var _Event_TooltipEvent__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../Event/TooltipEvent */ \"./src/Event/TooltipEvent.ts\");\n/**\n * Library DiagramLine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass DiagramLine extends _AbstractDiagramPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    bulletPointRadius = 2;\n    bulletPointRadiusHover = 5;\n    dataPoints = [];\n    helpLines = [];\n    hoverPosition = { x: 0, y: 0 };\n    rangeType = ERangeType.MIN_MAX;\n    syncGroupsPosition = false;\n    zeroLineValue = 0;\n    zeroLineValuePercentage = 0;\n    constructor(props = {}) {\n        super({\n            fill: true,\n            showBulletPoints: false,\n            showHelpLines: false,\n            showZeroLine: false,\n            padding: 0,\n            ...props\n        });\n    }\n    drawHelpLines() {\n        if (!this.getProperty('showHelpLines', false))\n            return this;\n        this.helpLines.map((helpLine) => {\n            this.bufferCtx.strokeStyle = helpLine.color;\n            this.bufferCtx.fillStyle = helpLine.color;\n            this.bufferCtx.beginPath();\n            this.bufferCtx.moveTo(super.getDrawAreaRect().x, helpLine.y);\n            this.bufferCtx.lineTo(super.getDrawAreaRect().x + this.bufferCtx.canvas.width, helpLine.y);\n            this.bufferCtx.stroke();\n            this.bufferCtx.fillText(helpLine.label, super.getDrawAreaRect().x, helpLine.y);\n        });\n        return this;\n    }\n    drawBuffer() {\n        const singlePercentageHeight = this.getDrawAreaRect().h / 100; // 1% height\n        this.drawHelpLines();\n        if (this._showZeroLine()) {\n            this.bufferCtx.strokeStyle = '#000000';\n            this.bufferCtx.beginPath();\n            this.bufferCtx.moveTo(this.getDrawAreaRect().x, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.bufferCtx.lineTo(this.getDrawAreaRect().x + this.bufferCtx.canvas.width, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.bufferCtx.stroke();\n        }\n        //console.log('viewHeight', this.getDrawAreaRect().h, this);\n        this.dataPoints.map(group => {\n            this.bufferCtx.beginPath();\n            let lastX = 0;\n            group.map((dataPoint, index) => {\n                this.bufferCtx.strokeStyle = dataPoint.color;\n                this.bufferCtx.fillStyle = dataPoint.color + '88';\n                this.bufferCtx.lineWidth = dataPoint.isHighlighted ? 2 : 1;\n                if (index === 0) {\n                    if (this.getProperty('fill', false)) {\n                        this.bufferCtx.moveTo(dataPoint.x, this.getDrawAreaRect().y + this.getDrawAreaRect().h);\n                        this.bufferCtx.lineTo(dataPoint.x, dataPoint.y);\n                        return;\n                    }\n                    this.bufferCtx.moveTo(dataPoint.x, dataPoint.y);\n                }\n                else {\n                    this.bufferCtx.lineTo(dataPoint.x, dataPoint.y);\n                }\n                lastX = dataPoint.x;\n            });\n            if (this.getProperty('fill', false)) {\n                this.bufferCtx.lineTo(lastX, this.getDrawAreaRect().y + this.getDrawAreaRect().h);\n                this.bufferCtx.fill();\n            }\n            this.bufferCtx.stroke();\n        });\n        if (this.getProperty('showBulletPoints', false)) {\n            this.dataPoints.map(group => {\n                group.map((dataPoint) => {\n                    const mouseDistance = Math.sqrt(Math.pow(this.hoverPosition.x - dataPoint.x, 2) + Math.pow(this.hoverPosition.y - dataPoint.y, 2));\n                    if (mouseDistance < this.bulletPointRadiusHover) {\n                        _Event_TooltipEvent__WEBPACK_IMPORTED_MODULE_1__[\"default\"].dispatch('test', {});\n                    }\n                    this.bufferCtx.fillStyle = dataPoint.color;\n                    this.bufferCtx.beginPath();\n                    this.bufferCtx.arc(dataPoint.x, dataPoint.y, (mouseDistance < this.bulletPointRadiusHover ? this.bulletPointRadiusHover : this.bulletPointRadius), 0, 2 * Math.PI);\n                    this.bufferCtx.fill();\n                });\n            });\n        }\n        return this;\n    }\n    handleHover(x, y) {\n        this.hoverPosition = { x, y };\n        return this;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) === JSON.stringify(dataGroups))\n            return { dataGroups };\n        this._dataGroups = dataGroups;\n        const maxValue = Math.max(...dataGroups.map((group) => group.infos.max));\n        const minValue = Math.min(...this._dataGroups.map((group) => group.infos.min), (this._showZeroLine() ? 0 : maxValue));\n        this.zeroLineValue = Math.min(0, ...dataGroups.map((group) => group.infos.min)) * -1;\n        this.zeroLineValuePercentage = this.zeroLineValue / (maxValue + this.zeroLineValue) * 100;\n        const groupWithMostData = this._dataGroups.reduce((prev, current) => prev.data.length > current.data.length ? prev : current);\n        const pointGap = this.calcPointGap(groupWithMostData);\n        const largestDecimalStep = Math.max(...this._dataGroups.map((group) => group.infos.largestDecimalStep));\n        const globalRange = maxValue - minValue;\n        this.helpLines = [];\n        for (let i = 1; i <= 10; i++) {\n            let height = (this.getDrawAreaRect().h / 100) * Math.round(((i * largestDecimalStep) - minValue) / globalRange * 100);\n            if (largestDecimalStep * i < minValue || largestDecimalStep * i > maxValue) {\n                continue;\n            }\n            this.helpLines.push({\n                color: '#ee4444',\n                y: Math.round(this.getDrawAreaRect().h - height),\n                label: (i * largestDecimalStep).toString()\n            });\n        }\n        this.dataPoints = this._dataGroups.map((dataGroup) => {\n            return dataGroup.data.map((dataPoint, index) => {\n                let height = this.getDrawAreaRect().h - (this.getDrawAreaRect().h / 100) * Math.round((dataPoint.value - minValue) / globalRange * 100);\n                console.log(height, 'height', dataPoint.value, {\n                    height,\n                    globalRange,\n                    minValue,\n                    maxValue,\n                    largestDecimalStep,\n                    i: largestDecimalStep * index,\n                    viewHeight: this.getDrawAreaRect().h,\n                    pointGap,\n                    dataPoint,\n                    dataGroup,\n                    index\n                });\n                if (dataPoint.empty)\n                    return undefined;\n                return {\n                    ...dataPoint,\n                    x: this.getDrawAreaRect().x + pointGap * index,\n                    y: height,\n                    color: dataGroup.color,\n                };\n            }).filter((dataPoint) => dataPoint !== undefined);\n        });\n        return { dataGroups };\n    }\n    getDrawAreaRect() {\n        const { x, y, h, w } = super.getDrawAreaRect();\n        const manipulator = 0; //(this.getProperty('showBulletPoints', false) ? this.bulletPointRadiusHover : 0);\n        return {\n            x: x + manipulator,\n            y: y + manipulator,\n            h: h - (manipulator * 2),\n            w: w - (manipulator * 2)\n        };\n    }\n    getName() {\n        return \"DiagramLine\";\n    }\n    _showZeroLine() {\n        return this.getProperty('showZeroLine', false);\n    }\n    calcPointGap(dataGroup) {\n        return (this.getDrawAreaRect().w - (this.bulletPointRadius * 2)) / (dataGroup.data.length - 1);\n        /*return this.getDrawAreaRect().w /\n            (this.getProperty('viewSize', -1) === -1 ?\n                (this.syncGroupsPosition ? Math.max(...this._dataGroups.map((group) => group.data.length - 1)) : dataGroup.data.length - 1) :\n                this.getProperty('viewSize', -1) - 1)\n            ;*/\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/DiagramLine.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/EnrichGroupInfosPlugin.ts":
+/***/ "./src/plugin/EnrichGroupInfosPlugin.ts"
 /*!**********************************************!*\
   !*** ./src/plugin/EnrichGroupInfosPlugin.ts ***!
   \**********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ EnrichGroupInfosPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/**\n * Library EnrichGroupInfosPlugin\n * Created 05.05,24\n *\n * @author Christoph Ehlers\n */\n\nclass EnrichGroupInfosPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    constructor() {\n        super();\n        this._priority = 1;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) === JSON.stringify(dataGroups))\n            return { dataGroups };\n        console.log('enrich');\n        this._dataGroups = dataGroups.map((dataGroup) => {\n            const values = dataGroup.data.map((data) => data.value);\n            const valueStarts = dataGroup.data.map((data) => data.valueStart || 0);\n            const min = Math.min(...values, ...valueStarts);\n            const max = Math.max(...values);\n            const range = max - min;\n            return {\n                ...dataGroup,\n                infos: {\n                    ...dataGroup.infos,\n                    largestDecimalStep: Math.max(this.getLargestDecimalStep(Math.max(...values)), 0),\n                    max,\n                    min,\n                    range,\n                    valuePercentage: values.map((value) => (value - min) / (max - min) * 100)\n                }\n            };\n        });\n        return {\n            dataGroups: this._dataGroups\n        };\n    }\n    getLargestDecimalStep(x) {\n        return Math.pow(10, Math.floor(Math.log10(x)));\n    }\n    getName() {\n        return \"EnrichGroupInfosPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/EnrichGroupInfosPlugin.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ EnrichGroupInfosPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/**\n * Library EnrichGroupInfosPlugin\n * Created 05.05,24\n *\n * @author Christoph Ehlers\n */\n\nclass EnrichGroupInfosPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    constructor() {\n        super();\n        this._priority = 1;\n    }\n    updateDataGroups(dataGroups) {\n        if (JSON.stringify(this._dataGroups) === JSON.stringify(dataGroups))\n            return { dataGroups };\n        console.log('EnrichGroupInfosPlugin:', dataGroups);\n        this._dataGroups = dataGroups.map((dataGroup) => {\n            const values = dataGroup.data.map((data) => data.value);\n            const valueStarts = dataGroup.data.map((data) => data.valueStart ?? data.value);\n            const min = Math.min(...valueStarts);\n            const max = Math.max(...values);\n            const range = max - min;\n            return {\n                ...dataGroup,\n                infos: {\n                    ...dataGroup.infos,\n                    largestDecimalStep: Math.max(this.getLargestDecimalStep(Math.max(...values)), 0),\n                    max,\n                    min,\n                    range,\n                    valuePercentage: values.map((value) => (value - min) / (max - min) * 100)\n                }\n            };\n        });\n        console.log('EnrichGroupInfosPlugin:', this._dataGroups);\n        return {\n            dataGroups: this._dataGroups\n        };\n    }\n    getLargestDecimalStep(x) {\n        return Math.pow(10, Math.floor(Math.log10(x)));\n    }\n    getName() {\n        return \"EnrichGroupInfosPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/EnrichGroupInfosPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/LegendsPlugin.ts":
+/***/ "./src/plugin/LegendsPlugin.ts"
 /*!*************************************!*\
   !*** ./src/plugin/LegendsPlugin.ts ***!
   \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ LegendsPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__);\n/**\n * Library LegendsPlugin\n * Created 30.09.24\n *\n * @author Christoph Ehlers\n */\n\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass LegendsPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    constructor(props = {}) {\n        super({\n            x: 5,\n            y: 5,\n            ...props\n        });\n        this._priority = 100;\n        this._fixed = true;\n    }\n    drawBuffer() {\n        const textBuffer = _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__.domLib.createElement('canvas', { width: this.getDrawAreaRect().w.toString(), height: this.getDrawAreaRect().h.toString() });\n        const textBufferCtx = textBuffer.getContext('2d');\n        let neededHeight = 0;\n        let neededWidth = 0;\n        this._dataGroups.map((dataGroup, index) => {\n            textBufferCtx.fillStyle = dataGroup.color;\n            textBufferCtx.fillRect(this.getDrawAreaRect().x + 3, (this.getDrawAreaRect().y + index * 15) + 1, 10, 10);\n            textBufferCtx.fillStyle = '#000000';\n            textBufferCtx.fillText(dataGroup.label, this.getDrawAreaRect().x + 15, (this.getDrawAreaRect().y + 10 + index * 15) - 1);\n            neededWidth = Math.max(neededWidth, 20 + textBufferCtx.measureText(dataGroup.label).width);\n            neededHeight += 15;\n        });\n        this.bufferCtx.fillStyle = '#ffffff44';\n        this.bufferCtx.clearRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, neededWidth, neededHeight - 3);\n        this.bufferCtx.fillRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, neededWidth, neededHeight - 3);\n        this.bufferCtx.drawImage(textBuffer, 0, 0);\n        super.drawBuffer();\n    }\n    getName() {\n        return \"LegendsPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/LegendsPlugin.ts?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (/* binding */ LegendsPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @cehlers88/ceutils */ \"./node_modules/@cehlers88/ceutils/dist/index.js\");\n/* harmony import */ var _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__);\n/**\n * Library LegendsPlugin\n * Created 30.09.24\n * Last modified 05.06.26\n *\n * @author Christoph Ehlers\n */\n\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nclass LegendsPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    static NAME = \"LegendsPlugin\";\n    constructor(props = {}) {\n        super({\n            x: 5,\n            y: 5,\n            labelBoxHeight: 10,\n            labelBoxWidth: 10,\n            ...props\n        });\n        this._priority = 100;\n        this._fixed = true;\n    }\n    drawBuffer() {\n        const textBuffer = _cehlers88_ceutils__WEBPACK_IMPORTED_MODULE_1__.domLib.createElement('canvas', { width: this.getDrawAreaRect().w.toString(), height: this.getDrawAreaRect().h.toString() });\n        const textBufferCtx = textBuffer.getContext('2d');\n        let neededHeight = 0;\n        let neededWidth = 0;\n        const labelBoxHeight = this.getProperty('labelBoxHeight', 10);\n        const labelBoxWidth = this.getProperty('labelBoxWidth', 10);\n        this._dataGroups.map((dataGroup, index) => {\n            textBufferCtx.fillStyle = dataGroup.color;\n            textBufferCtx.fillRect(this.getDrawAreaRect().x + 3, (this.getDrawAreaRect().y + index * 15) + 1, labelBoxWidth, labelBoxHeight);\n            textBufferCtx.fillStyle = '#000000';\n            textBufferCtx.fillText(dataGroup.label, this.getDrawAreaRect().x + labelBoxWidth + 5, (this.getDrawAreaRect().y + labelBoxHeight + index * 15) - 1);\n            neededWidth = Math.max(neededWidth, 20 + textBufferCtx.measureText(dataGroup.label).width);\n            neededHeight += 15;\n        });\n        this.bufferCtx.fillStyle = '#ffffff44';\n        this.bufferCtx.clearRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, neededWidth, neededHeight - 3);\n        this.bufferCtx.fillRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, neededWidth, neededHeight - 3);\n        this.bufferCtx.drawImage(textBuffer, 0, 0);\n        super.drawBuffer();\n    }\n    getName() {\n        return LegendsPlugin.NAME;\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/LegendsPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/PaginationPlugin.ts":
+/***/ "./src/plugin/PaginationPlugin.ts"
 /*!****************************************!*\
   !*** ./src/plugin/PaginationPlugin.ts ***!
   \****************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ PaginationPlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/**\n * Library PaginationPlugin\n * Created 03.10.24\n *\n * @author Christoph Ehlers\n */\n\nclass PaginationPlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    static DEFAULT_PAGE_SIZE = 2;\n    static DEFAULT_CURRENT_PAGE = 1;\n    _dataGroupsRaw = [];\n    _dataGroupsCurrentPage = [];\n    _pages = -1;\n    _lastUpdatedPage = -1;\n    constructor(props = {}) {\n        super();\n        this._priority = 1;\n        this.setProperty(\"currentPage\", props.currentPage || PaginationPlugin.DEFAULT_CURRENT_PAGE);\n        this.setProperty(\"pageSize\", props.pageSize || PaginationPlugin.DEFAULT_PAGE_SIZE);\n    }\n    create(canvasElement, dataGroups) {\n        /*setInterval(()=>{\n            this.setProperty(\"currentPage\",this.getProperty(\"currentPage\",PaginationPlugin.DEFAULT_CURRENT_PAGE)+1);\n            if(this.getProperty(\"currentPage\",PaginationPlugin.DEFAULT_CURRENT_PAGE) > this._pages) {\n                this.setProperty(\"currentPage\",PaginationPlugin.DEFAULT_CURRENT_PAGE);\n            }\n        },10000);*/\n        return super.create(canvasElement, dataGroups);\n    }\n    getName() {\n        return \"PaginationPlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/PaginationPlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/plugin/TimelinePlugin.ts":
+/***/ "./src/plugin/TimelinePlugin.ts"
 /*!**************************************!*\
   !*** ./src/plugin/TimelinePlugin.ts ***!
   \**************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (/* binding */ TimelinePlugin)\n/* harmony export */ });\n/* harmony import */ var _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractPlugin */ \"./src/plugin/AbstractPlugin.ts\");\n/**\n * Library PaginationPlugin\n * Created 03.10.24\n *\n * @author Christoph Ehlers\n */\n\nclass TimelinePlugin extends _AbstractPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n    static DIRECTION_HORIZONTAL = 0;\n    static DIRECTION_VERTICAL = 1;\n    static VIEW_TYPE_HOUR = 0;\n    static VIEW_TYPE_DAY = 2;\n    static VIEW_TYPE_WEEK = 3;\n    static VIEW_TYPE_MONTH = 4;\n    static VIEW_TYPE_YEAR = 5;\n    constructor(props = {}) {\n        super({\n            direction: TimelinePlugin.DIRECTION_VERTICAL,\n            mainSections: 60,\n            resolution: TimelinePlugin.VIEW_TYPE_HOUR,\n            ...props\n        });\n    }\n    getMainSectionHeight() {\n        return Math.max(100, 100);\n    }\n    create(canvasElement, dataGroups) {\n        return super.create(canvasElement, dataGroups);\n    }\n    createBuffer(canvasElement, width = null, height = null) {\n        super.createBuffer(canvasElement, width, this.getMainSectionHeight() * this.getProperty('mainSections', 1));\n    }\n    drawMainSection(x, y, width, height, color = '#00000000') {\n        this.bufferCtx.fillStyle = color;\n        this.bufferCtx.fillRect(x, y, width, height);\n    }\n    drawBuffer() {\n        switch (this.getProperty('direction', TimelinePlugin.DIRECTION_VERTICAL)) {\n            case TimelinePlugin.DIRECTION_VERTICAL:\n                const barWidth = this.getDrawAreaRect().w / this._dataGroups.length;\n                for (let i = 0; i < this._dataGroups.length; i++) {\n                    this.bufferCtx.fillStyle = (i % 2 ? '#dddddd10' : '#00000020');\n                    this.bufferCtx.fillRect(i * barWidth, 0, barWidth, this.getDrawAreaRect().h);\n                    const mainSectionsCount = this.getProperty('mainSections', 1);\n                    for (let j = 0; j < mainSectionsCount; j++) {\n                        this.drawMainSection(i * barWidth, j * this.getMainSectionHeight(), barWidth, this.getMainSectionHeight(), (j % 2 ? '#00000000' : '#00000010'));\n                    }\n                }\n                break;\n            case TimelinePlugin.DIRECTION_HORIZONTAL:\n                const barHeight = this.getDrawAreaRect().h / this._dataGroups.length;\n                for (let i = 0; i < this._dataGroups.length; i++) {\n                    this.bufferCtx.fillStyle = (i % 2 ? '#ff0000' : '#0000ff');\n                    this.bufferCtx.fillRect(0, i * barHeight, this.getDrawAreaRect().w, barHeight);\n                }\n                break;\n        }\n        super.drawBuffer();\n    }\n    getName() {\n        return \"TimelinePlugin\";\n    }\n}\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/TimelinePlugin.ts?\n}");
 
-/***/ }),
+/***/ },
 
-/***/ "./src/style/CanvasDiagram.css":
+/***/ "./src/style/CanvasDiagram.css"
 /*!*************************************!*\
   !*** ./src/style/CanvasDiagram.css ***!
   \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../node_modules/css-loader/dist/cjs.js!./CanvasDiagram.css */ \"./node_modules/css-loader/dist/cjs.js!./src/style/CanvasDiagram.css\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_CanvasDiagram_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/style/CanvasDiagram.css?\n}");
 
-/***/ })
+/***/ }
 
 /******/ 	});
 /************************************************************************/
@@ -327,6 +338,12 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
+/******/ 		// Check if module exists (development only)
+/******/ 		if (__webpack_modules__[moduleId] === undefined) {
+/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
 /******/ 			id: moduleId,

package/dist/interface/ICanvasDiagram.d.ts

@@ -1,4 +1,6 @@
+import { IChartPlugin } from "./IChartPlugin";
 export interface ICanvasDiagram {
     addPlugin(plugin: any): ICanvasDiagram;
+    getPlugin(pluginName: string): IChartPlugin | undefined;
     start(): ICanvasDiagram;
 }

package/dist/plugin/AbstractPlugin.d.ts

@@ -11,22 +11,26 @@ import Camera from "../Camera";
 import EntityRegistry from "../Registry/EntityRegistry";
 import { IChartEntity } from "../interface/IChartEntity";
 export default abstract class AbstractPlugin implements IChartPlugin {
-    private _buffer;
     protected _camera: Camera;
     protected _dataGroups: TDataGroup[];
-    private _drawAreaRect;
     protected _entityRegistry: EntityRegistry;
     protected _fixed: boolean;
-    private _properties;
     protected _priority: number;
     protected bufferCtx: CanvasRenderingContext2D;
     protected ctx: CanvasRenderingContext2D;
     protected redrawBuffer: boolean;
-    abstract getName(): string;
+    private _buffer;
+    private _stateChangedListener;
+    private _drawAreaRect;
+    private _properties;
     constructor(props?: {
         enabled?: boolean;
         [key: string]: any;
     });
+    get needsRedraw(): boolean;
+    abstract getName(): string;
+    setStateChangedListener(listener: (newState: string) => void): AbstractPlugin;
+    setState(newState: string): AbstractPlugin;
     update(dataGroups: TDataGroup[]): {
         dataGroups: TDataGroup[];
     };
@@ -34,7 +38,6 @@ export default abstract class AbstractPlugin implements IChartPlugin {
         dataGroups: TDataGroup[];
     };
     addEntity(entity: IChartEntity): AbstractPlugin;
-    protected createBuffer(canvasElement: HTMLCanvasElement, width?: number | null, height?: number | null): void;
     create(canvasElement: HTMLCanvasElement, dataGroups: TDataGroup[]): {
         dataGroups: TDataGroup[];
         plugin: AbstractPlugin;
@@ -54,5 +57,5 @@ export default abstract class AbstractPlugin implements IChartPlugin {
     setEntityRegistry(entityRegistry: EntityRegistry): AbstractPlugin;
     setProperty(propertyName: string, value: any): AbstractPlugin;
     init(): AbstractPlugin;
-    get needsRedraw(): boolean;
+    protected createBuffer(canvasElement: HTMLCanvasElement, width?: number | null, height?: number | null): void;
 }

package/dist/plugin/DiagramLine.d.ts

@@ -23,16 +23,20 @@ export default class DiagramLine extends AbstractDiagramPlugin {
     private zeroLineValue;
     private zeroLineValuePercentage;
     constructor(props?: {
+        fill?: boolean;
+        padding?: number;
         showBulletPoints?: boolean;
+        showHelpLines?: boolean;
+        showZeroLine?: boolean;
     });
-    private _showZeroLine;
-    drawHelpLines(): this;
+    drawHelpLines(): DiagramLine;
     drawBuffer(): this;
-    private calcPointGap;
     handleHover(x: number, y: number): AbstractPlugin;
     updateDataGroups(dataGroups: TDataGroup[]): {
         dataGroups: TDataGroup[];
     };
     getDrawAreaRect(): TRect;
     getName(): string;
+    private _showZeroLine;
+    private calcPointGap;
 }

package/dist/plugin/LegendsPlugin.d.ts

@@ -1,6 +1,7 @@
 /**
  * Library LegendsPlugin
  * Created 30.09.24
+ * Last modified 05.06.26
  *
  * @author Christoph Ehlers
  */
@@ -10,6 +11,7 @@ export declare enum ERangeType {
     MIN_MAX = "min_max"
 }
 export default class LegendsPlugin extends AbstractPlugin {
+    static NAME: string;
     constructor(props?: {
         x?: number;
         y?: number;

package/dist/type/TData.d.ts

@@ -8,6 +8,7 @@ export type TData = {
     empty: boolean;
     label: string;
     value: number;
+    valueEnd?: number;
     valueStart?: number;
     hasLabel?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cehlers88/chart",
-  "version": "1.0.6",
+  "version": "1.1.1",
   "description": "A library to create charts using JavaScript and Canvas-Element.",
   "main": "dist/index.js",
   "publishConfig": {