@cehlers88/chart 1.1.0 → 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

@@ -13,6 +13,8 @@ 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;
@@ -22,6 +24,8 @@ export declare const plugins: {
     CameraMovePlugin: typeof CameraMove;
     EnrichGroupInfosPlugin: typeof EnrichGroupInfosPlugin;
     DiagramLinePlugin: typeof DiagramLine;
+    LegendsPlugin: typeof LegendsPlugin;
+    PaginationPlugin: typeof PaginationPlugin;
     TimelinePlugin: typeof TimelinePlugin;
 };
 declare const _default: {
@@ -34,6 +38,8 @@ declare const _default: {
         CameraMovePlugin: typeof CameraMove;
         EnrichGroupInfosPlugin: typeof EnrichGroupInfosPlugin;
         DiagramLinePlugin: typeof DiagramLine;
+        LegendsPlugin: typeof LegendsPlugin;
+        PaginationPlugin: typeof PaginationPlugin;
         TimelinePlugin: typeof TimelinePlugin;
     };
 };

package/dist/index.js

@@ -146,7 +146,18 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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/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}");
 
 /***/ },
 
@@ -157,7 +168,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -190,7 +201,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -201,7 +212,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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_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/**\n * index.ts\n * Created 05.05.24\n *\n * @author Christoph Ehlers\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    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}");
+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}");
 
 /***/ },
 
@@ -223,7 +234,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -234,7 +245,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -256,7 +267,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -267,7 +278,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 
@@ -278,7 +289,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 (__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}");
 
 /***/ },
 

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.1.0",
+  "version": "1.1.1",
   "description": "A library to create charts using JavaScript and Canvas-Element.",
   "main": "dist/index.js",
   "publishConfig": {