@cehlers88/chart 1.0.0

package/README.md

@@ -0,0 +1,6 @@
+# Chart
+A library to create charts using JavaScript and Canvas-Element.
+
+## Examples
+######`javascipt`
+const obj = new ChartEngine(element);

package/dist/ChartEngine.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Library ChartEngine
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import { IChartPlugin } from "./interface/IChartPlugin";
+import { TDataGroup } from "./type/TDataGroup";
+import { IChartEngine } from "./interface/IChartEngine";
+export default class ChartEngine implements IChartEngine {
+    private _canvasElement;
+    private _ctx;
+    private _dataGroups;
+    private _plugins;
+    constructor(canvasElement: HTMLCanvasElement);
+    private getEngineCallbacks;
+    addPlugin(plugin: IChartPlugin): ChartEngine;
+    getPlugin(pluginName: string): IChartPlugin;
+    create(): ChartEngine;
+    addDataGroup(dataGroup: TDataGroup): IChartEngine;
+    addValue(value: any, groupName?: string): IChartEngine;
+    draw(): ChartEngine;
+    private drawLegend;
+    update(): ChartEngine;
+    start(): void;
+}

package/dist/Factory/DataGroupFactory.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * index.ts
+ * Created 05.05.24
+ *
+ * @author Christoph Ehlers
+ */
+import ChartEngineClass from './ChartEngine';
+import DiagramLine from "./plugin/DiagramLine";
+import BarsPluginClass from "./plugin/BarsPlugin";
+import DataGroupFactoryClass from "./Factory/DataGroupFactory";
+declare const _default: {
+    ChartEngine: typeof ChartEngineClass;
+    DataGroupFactory: typeof DataGroupFactoryClass;
+    plugins: {
+        BarsPlugin: typeof BarsPluginClass;
+        DiagramLinePlugin: typeof DiagramLine;
+    };
+};
+export default _default;
+export declare const ChartEngine: typeof ChartEngineClass;
+export declare const DataGroupFactory: typeof DataGroupFactoryClass;
+export declare const BarsPlugin: typeof BarsPluginClass;
+export declare const DiagramLinePlugin: typeof DiagramLine;

package/dist/index.js

@@ -0,0 +1,146 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/ChartEngine.ts":
+/*!****************************!*\
+  !*** ./src/ChartEngine.ts ***!
+  \****************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 _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/**\n * Library ChartEngine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\n\n\nvar ChartEngine = /** @class */ (function () {\n    function ChartEngine(canvasElement) {\n        this._dataGroups = [\n        /*{\n            color:'#ff0000',\n            data:[\n                {label:'zehn',value:10, empty:false},\n                {label:'zwanzig',value:20, empty:false},\n                {label:'dreißig',value:30, empty:false},\n                {label:'vierzig',value:40, empty:false},\n                {label:'fünfzig',value:50, empty:false},\n                {label:'sechzig',value:60, empty:false},\n                {label:'siebzig',value:70, empty:false},\n                {label:'achtzig',value:80, empty:false},\n                {label:'neunzig',value:90, empty:false},\n                {label:'hundert',value:100, empty:false}\n            ],\n            infos:{},\n            label:'Testgruooe 1',\n            description:'default'\n        },\n        {\n            color:'#00ff00',\n            data:[\n                {label:'einundzwanzig',value:201, empty:false},\n                {label:'einundzwanzig',value:21, empty:false},\n                {label:'achtundvierzig',value:-48, empty:false},\n                {label:'achtundvierzig',value:-8, empty:false},\n            ],\n            infos:{},\n            label:'Testgruooe 2',\n            description:'default'\n        }*/\n        ];\n        this._plugins = [\n            new _plugin_EnrichGroupInfosPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"](),\n            //new DiagramLine()\n        ];\n        this._canvasElement = canvasElement;\n        this._ctx = canvasElement.getContext('2d');\n    }\n    ChartEngine.prototype.getEngineCallbacks = function () {\n        var _this = this;\n        return {\n            updateData: function (indexGroup, indexData, newData) {\n                console.log('updateData context:', _this);\n                _this._dataGroups[indexData].data[indexData] = newData;\n                return _this;\n            }\n        };\n    };\n    ChartEngine.prototype.addPlugin = function (plugin) {\n        this._plugins.push(plugin);\n        return this;\n    };\n    ChartEngine.prototype.getPlugin = function (pluginName) {\n        return this._plugins.find(function (plugin) { return plugin.getName() === pluginName; });\n    };\n    ChartEngine.prototype.create = function () {\n        var _this = this;\n        this._plugins.map(function (p) { return p.create(_this._canvasElement, _this._dataGroups, _this.getEngineCallbacks()); });\n        return this;\n    };\n    ChartEngine.prototype.addDataGroup = function (dataGroup) {\n        this._dataGroups.push(dataGroup);\n        return this;\n    };\n    ChartEngine.prototype.addValue = function (value, groupName) {\n        if (groupName === void 0) { groupName = ''; }\n        var dataGroup = this._dataGroups.find(function (group) { return 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    ChartEngine.prototype.draw = function () {\n        this._plugins.map(function (p) { return p.draw(); });\n        this.drawLegend();\n        return this;\n    };\n    ChartEngine.prototype.drawLegend = function () {\n        var _this = this;\n        this._dataGroups.map(function (dataGroup, index) {\n            _this._ctx.fillStyle = dataGroup.color;\n            _this._ctx.fillRect(10, 10 + index * 20, 10, 10);\n            _this._ctx.fillStyle = '#000000';\n            _this._ctx.fillText(dataGroup.label, 25, 20 + index * 20);\n        });\n    };\n    ChartEngine.prototype.update = function () {\n        var _this = this;\n        this._plugins.map(function (p) {\n            _this._dataGroups = p.update(_this._dataGroups);\n        });\n        return this;\n    };\n    ChartEngine.prototype.start = function () {\n        var _this = this;\n        var run = function () {\n            window.requestAnimationFrame(function () {\n                _this.update();\n                _this.draw();\n                run();\n            });\n        };\n        this.create();\n        run();\n    };\n    return ChartEngine;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChartEngine);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/ChartEngine.ts?");
+
+/***/ }),
+
+/***/ "./src/Factory/DataGroupFactory.ts":
+/*!*****************************************!*\
+  !*** ./src/Factory/DataGroupFactory.ts ***!
+  \*****************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar DataGroupFactory = /** @class */ (function () {\n    function DataGroupFactory() {\n    }\n    DataGroupFactory.createDataGroup = function (values, groupLabel, color) {\n        if (groupLabel === void 0) { groupLabel = ''; }\n        if (color === void 0) { 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: color,\n            label: groupLabel === '' ? 'Group#' + DataGroupFactory.buildCounter : groupLabel,\n            description: \"\",\n            data: values.map(function (valueDef) {\n                var value = (valueDef && valueDef.value) || valueDef;\n                var label = (valueDef && valueDef.label) || value;\n                return {\n                    empty: (valueDef === null),\n                    label: label,\n                    value: value\n                };\n            }),\n            infos: {}\n        };\n    };\n    DataGroupFactory._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    DataGroupFactory._lastColorIndex = -1;\n    DataGroupFactory.buildCounter = 0;\n    return DataGroupFactory;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DataGroupFactory);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/Factory/DataGroupFactory.ts?");
+
+/***/ }),
+
+/***/ "./src/index.ts":
+/*!**********************!*\
+  !*** ./src/index.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BarsPlugin: () => (/* binding */ BarsPlugin),\n/* harmony export */   ChartEngine: () => (/* binding */ ChartEngine),\n/* harmony export */   DataGroupFactory: () => (/* binding */ DataGroupFactory),\n/* harmony export */   DiagramLinePlugin: () => (/* binding */ DiagramLinePlugin),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ChartEngine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ChartEngine */ \"./src/ChartEngine.ts\");\n/* harmony import */ var _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./plugin/DiagramLine */ \"./src/plugin/DiagramLine.ts\");\n/* harmony import */ var _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./plugin/BarsPlugin */ \"./src/plugin/BarsPlugin.ts\");\n/* harmony import */ var _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Factory/DataGroupFactory */ \"./src/Factory/DataGroupFactory.ts\");\n/**\n * index.ts\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\n\n\n\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({\n    ChartEngine: _ChartEngine__WEBPACK_IMPORTED_MODULE_0__[\"default\"],\n    DataGroupFactory: _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"],\n    plugins: {\n        BarsPlugin: _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_2__[\"default\"],\n        DiagramLinePlugin: _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_1__[\"default\"],\n    }\n});\nvar ChartEngine = _ChartEngine__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nvar DataGroupFactory = _Factory_DataGroupFactory__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\nvar BarsPlugin = _plugin_BarsPlugin__WEBPACK_IMPORTED_MODULE_2__[\"default\"];\nvar DiagramLinePlugin = _plugin_DiagramLine__WEBPACK_IMPORTED_MODULE_1__[\"default\"];\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/index.ts?");
+
+/***/ }),
+
+/***/ "./src/plugin/AbstractChartPlugin.ts":
+/*!*******************************************!*\
+  !*** ./src/plugin/AbstractChartPlugin.ts ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar AbstractChartPlugin = /** @class */ (function () {\n    function AbstractChartPlugin() {\n        this._properties = {};\n    }\n    AbstractChartPlugin.prototype.create = function (canvasElement, dataGroups, engineCallbacks) {\n        this.ctx = canvasElement.getContext('2d');\n        this._drawAreaRect = {\n            x: 0, y: 0,\n            h: canvasElement.height,\n            w: canvasElement.width\n        };\n        return this;\n    };\n    AbstractChartPlugin.prototype.draw = function () {\n        return this;\n    };\n    AbstractChartPlugin.prototype.getDrawAreaRect = function () {\n        return this._drawAreaRect;\n    };\n    AbstractChartPlugin.prototype.getProperty = function (propertyName, defaultResult) {\n        return this._properties[propertyName] || defaultResult;\n    };\n    AbstractChartPlugin.prototype.setProperty = function (propertyName, value) {\n        this._properties[propertyName] = value;\n        return this;\n    };\n    AbstractChartPlugin.prototype.init = function () {\n        return this;\n    };\n    return AbstractChartPlugin;\n}());\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AbstractChartPlugin);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/AbstractChartPlugin.ts?");
+
+/***/ }),
+
+/***/ "./src/plugin/BarsPlugin.ts":
+/*!**********************************!*\
+  !*** ./src/plugin/BarsPlugin.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractChartPlugin */ \"./src/plugin/AbstractChartPlugin.ts\");\n/**\n * Library BarsPlugin\n * Created 05.05.24\n *\n * @author Christoph Ehlers\n */\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nvar BarsPlugin = /** @class */ (function (_super) {\n    __extends(BarsPlugin, _super);\n    function BarsPlugin() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.dataGroups = [];\n        _this.rangeType = ERangeType.ZERO_BASED;\n        _this.showZeroLine = true;\n        _this.syncGroupsPosition = false;\n        _this.zeroLineValue = 0;\n        _this.zeroLineValuePercentage = 0;\n        return _this;\n    }\n    BarsPlugin.prototype.draw = function () {\n        var singlePercentageHeight = this.getDrawAreaRect().h / 100; // 1% height\n        this.ctx.clearRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, this.getDrawAreaRect().w, this.getDrawAreaRect().h);\n        this.ctx.fillStyle = '#fff000';\n        this.ctx.fillRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, this.getDrawAreaRect().w, this.getDrawAreaRect().h);\n        /*\n        this.ctx.fillRect(\n            this.getDrawAreaRect().x,\n            this.getDrawAreaRect().y,\n            this.getDrawAreaRect().w,\n            this.getDrawAreaRect().h\n        );\n\n        if(this.showZeroLine) {\n            this.ctx.strokeStyle = '#000000';\n            this.ctx.beginPath();\n            this.ctx.moveTo(this.getDrawAreaRect().x, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.ctx.lineTo(this.getDrawAreaRect().x + this.getDrawAreaRect().w, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.ctx.stroke();\n        }\n\n        this.dataGroups.forEach((dataGroup) => {\n            const {color, data, infos} = dataGroup;\n            const gap = this.calcPointGap(dataGroup);\n            const range = this.rangeType === ERangeType.ZERO_BASED ? (infos.max + this.zeroLineValue) : infos.max - infos.min;\n\n            this.ctx.strokeStyle = color;\n            this.ctx.beginPath();\n\n            data.forEach((dataPoint, index) => {\n                const x = this.getDrawAreaRect().x + gap * index;\n                const y = this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * ((dataPoint.value - infos.min) / range * 100);\n                if (index === 0) {\n                    this.ctx.moveTo(x, y);\n                } else {\n                    this.ctx.lineTo(x, y);\n                }\n            });\n\n            this.ctx.stroke();\n        });\n*/\n        return this;\n    };\n    BarsPlugin.prototype.calcPointGap = function (dataGroup) {\n        return this.getDrawAreaRect().w /\n            (this.syncGroupsPosition ? Math.max.apply(Math, this.dataGroups.map(function (group) { return group.data.length - 1; })) : dataGroup.data.length - 1);\n    };\n    BarsPlugin.prototype.update = function (dataGroups) {\n        this.dataGroups = dataGroups;\n        this.zeroLineValue = Math.min.apply(Math, __spreadArray([0], dataGroups.map(function (group) { return group.infos.min; }), false)) * -1;\n        var maxValue = Math.max.apply(Math, dataGroups.map(function (group) { return group.infos.max; }));\n        this.zeroLineValuePercentage = this.zeroLineValue / (maxValue + this.zeroLineValue) * 100;\n        return dataGroups;\n    };\n    BarsPlugin.prototype.getName = function () {\n        return \"BarsPlugin\";\n    };\n    return BarsPlugin;\n}(_AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"]));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BarsPlugin);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/BarsPlugin.ts?");
+
+/***/ }),
+
+/***/ "./src/plugin/DiagramLine.ts":
+/*!***********************************!*\
+  !*** ./src/plugin/DiagramLine.ts ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ERangeType: () => (/* binding */ ERangeType),\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractChartPlugin */ \"./src/plugin/AbstractChartPlugin.ts\");\n/**\n * Library DiagramLine\n * Created 26.11.22\n *\n * @author Christoph Ehlers\n */\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\n\nvar ERangeType;\n(function (ERangeType) {\n    ERangeType[\"ZERO_BASED\"] = \"zero_based\";\n    ERangeType[\"MIN_MAX\"] = \"min_max\";\n})(ERangeType || (ERangeType = {}));\nvar DiagramLine = /** @class */ (function (_super) {\n    __extends(DiagramLine, _super);\n    function DiagramLine() {\n        var _this = _super !== null && _super.apply(this, arguments) || this;\n        _this.dataGroups = [];\n        _this.rangeType = ERangeType.ZERO_BASED;\n        _this.syncGroupsPosition = false;\n        _this.zeroLineValue = 0;\n        _this.zeroLineValuePercentage = 0;\n        return _this;\n    }\n    DiagramLine.prototype._showZeroLine = function () {\n        return this.getProperty('showZeroLine', false);\n    };\n    DiagramLine.prototype.draw = function () {\n        var _this = this;\n        var singlePercentageHeight = this.getDrawAreaRect().h / 100; // 1% height\n        this.ctx.clearRect(this.getDrawAreaRect().x, this.getDrawAreaRect().y, this.getDrawAreaRect().w, this.getDrawAreaRect().h);\n        if (this._showZeroLine()) {\n            this.ctx.strokeStyle = '#000000';\n            this.ctx.beginPath();\n            this.ctx.moveTo(this.getDrawAreaRect().x, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.ctx.lineTo(this.getDrawAreaRect().x + this.getDrawAreaRect().w, this.getDrawAreaRect().y + this.getDrawAreaRect().h - singlePercentageHeight * this.zeroLineValuePercentage);\n            this.ctx.stroke();\n        }\n        this.dataGroups.forEach(function (dataGroup) {\n            var color = dataGroup.color, data = dataGroup.data, infos = dataGroup.infos;\n            var gap = _this.calcPointGap(dataGroup);\n            var range = _this.rangeType === ERangeType.ZERO_BASED ? (infos.max + _this.zeroLineValue) : infos.max - infos.min;\n            _this.ctx.strokeStyle = color;\n            _this.ctx.beginPath();\n            data.forEach(function (dataPoint, index) {\n                var x = _this.getDrawAreaRect().x + gap * index;\n                var y = _this.getDrawAreaRect().y + _this.getDrawAreaRect().h - singlePercentageHeight * ((dataPoint.value - infos.min) / range * 100);\n                if (index === 0) {\n                    _this.ctx.moveTo(x, y);\n                }\n                else {\n                    _this.ctx.lineTo(x, y);\n                }\n            });\n            _this.ctx.stroke();\n        });\n        return this;\n    };\n    DiagramLine.prototype.calcPointGap = function (dataGroup) {\n        return this.getDrawAreaRect().w /\n            (this.syncGroupsPosition ? Math.max.apply(Math, this.dataGroups.map(function (group) { return group.data.length - 1; })) : dataGroup.data.length - 1);\n    };\n    DiagramLine.prototype.update = function (dataGroups) {\n        this.dataGroups = dataGroups;\n        this.zeroLineValue = Math.min.apply(Math, __spreadArray([0], dataGroups.map(function (group) { return group.infos.min; }), false)) * -1;\n        var maxValue = Math.max.apply(Math, dataGroups.map(function (group) { return group.infos.max; }));\n        this.zeroLineValuePercentage = this.zeroLineValue / (maxValue + this.zeroLineValue) * 100;\n        return dataGroups;\n    };\n    DiagramLine.prototype.getName = function () {\n        return \"DiagramLine\";\n    };\n    return DiagramLine;\n}(_AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"]));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DiagramLine);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/DiagramLine.ts?");
+
+/***/ }),
+
+/***/ "./src/plugin/EnrichGroupInfosPlugin.ts":
+/*!**********************************************!*\
+  !*** ./src/plugin/EnrichGroupInfosPlugin.ts ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+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 _AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractChartPlugin */ \"./src/plugin/AbstractChartPlugin.ts\");\n/**\n * Library EnrichGroupInfosPlugin\n * Created 05.05,24\n *\n * @author Christoph Ehlers\n */\nvar __extends = (undefined && undefined.__extends) || (function () {\n    var extendStatics = function (d, b) {\n        extendStatics = Object.setPrototypeOf ||\n            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n        return extendStatics(d, b);\n    };\n    return function (d, b) {\n        if (typeof b !== \"function\" && b !== null)\n            throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n        extendStatics(d, b);\n        function __() { this.constructor = d; }\n        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n    };\n})();\nvar __assign = (undefined && undefined.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\n\nvar EnrichGroupInfosPlugin = /** @class */ (function (_super) {\n    __extends(EnrichGroupInfosPlugin, _super);\n    function EnrichGroupInfosPlugin() {\n        return _super !== null && _super.apply(this, arguments) || this;\n    }\n    EnrichGroupInfosPlugin.prototype.update = function (dataGroups) {\n        return dataGroups.map(function (dataGroup) {\n            var values = dataGroup.data.map(function (data) { return data.value; });\n            return __assign(__assign({}, dataGroup), { infos: __assign(__assign({}, dataGroup.infos), { max: Math.max.apply(Math, values), min: Math.min.apply(Math, values) }) });\n        });\n    };\n    EnrichGroupInfosPlugin.prototype.getName = function () {\n        return \"EnrichGroupInfosPlugin\";\n    };\n    return EnrichGroupInfosPlugin;\n}(_AbstractChartPlugin__WEBPACK_IMPORTED_MODULE_0__[\"default\"]));\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (EnrichGroupInfosPlugin);\n\n\n//# sourceURL=webpack://@cehlers88/chart/./src/plugin/EnrichGroupInfosPlugin.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/index.ts");
+/******/ 	
+/******/ })()
+;

package/dist/interface/IChartEngine.d.ts

@@ -0,0 +1,10 @@
+import { IChartPlugin } from "./IChartPlugin";
+import { TDataGroup } from "../type/TDataGroup";
+export interface IChartEngine {
+    addValue(value: any, groupName?: string): IChartEngine;
+    addDataGroup(dataGroup: TDataGroup): IChartEngine;
+    addPlugin(plugin: IChartPlugin): IChartEngine;
+    getPlugin(pluginName: string): IChartPlugin;
+    draw(): IChartEngine;
+    update(): IChartEngine;
+}

package/dist/interface/IChartPlugin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Interface IChartPlugin
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import { TDataGroup } from "../type/TDataGroup";
+import { TRect } from "../type/TRect";
+import { TChartEngineCallbacks } from "../type/TChartEngineCallbacks";
+export interface IChartPlugin {
+    create(canvasElement: HTMLCanvasElement, dataGroups: TDataGroup[], engineCallbacks: TChartEngineCallbacks): IChartPlugin;
+    draw(): IChartPlugin;
+    getDrawAreaRect(): TRect;
+    getName(): string;
+    getProperty(propertyName: string, defaultResult: any): any;
+    setProperty(propertyName: string, value: any): IChartPlugin;
+    update(dataGroups: TDataGroup[]): TDataGroup[];
+}

package/dist/plugin/AbstractChartPlugin.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Library AbstractChartPlugin
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import { IChartPlugin } from "../interface/IChartPlugin";
+import { TDataGroup } from "../type/TDataGroup";
+import { TRect } from "../type/TRect";
+import { TChartEngineCallbacks } from "../type/TChartEngineCallbacks";
+export default abstract class AbstractChartPlugin implements IChartPlugin {
+    private _drawAreaRect;
+    private _properties;
+    protected ctx: CanvasRenderingContext2D;
+    abstract getName(): string;
+    abstract update(dataGroups: TDataGroup[]): TDataGroup[];
+    create(canvasElement: HTMLCanvasElement, dataGroups: TDataGroup[], engineCallbacks: TChartEngineCallbacks): AbstractChartPlugin;
+    draw(): IChartPlugin;
+    getDrawAreaRect(): TRect;
+    getProperty(propertyName: string, defaultResult: any): any;
+    setProperty(propertyName: string, value: any): AbstractChartPlugin;
+    init(): AbstractChartPlugin;
+}

package/dist/plugin/BarsPlugin.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Library BarsPlugin
+ * Created 05.05.24
+ *
+ * @author Christoph Ehlers
+ */
+import AbstractChartPlugin from "./AbstractChartPlugin";
+import { TDataGroup } from "../type/TDataGroup";
+import { IChartPlugin } from "../interface/IChartPlugin";
+export declare enum ERangeType {
+    ZERO_BASED = "zero_based",
+    MIN_MAX = "min_max"
+}
+export default class BarsPlugin extends AbstractChartPlugin {
+    private dataGroups;
+    private rangeType;
+    private showZeroLine;
+    private syncGroupsPosition;
+    private zeroLineValue;
+    private zeroLineValuePercentage;
+    draw(): IChartPlugin;
+    private calcPointGap;
+    update(dataGroups: TDataGroup[]): TDataGroup[];
+    getName(): string;
+}

package/dist/plugin/DiagramLine.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Library DiagramLine
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import AbstractChartPlugin from "./AbstractChartPlugin";
+import { TDataGroup } from "../type/TDataGroup";
+import { IChartPlugin } from "../interface/IChartPlugin";
+export declare enum ERangeType {
+    ZERO_BASED = "zero_based",
+    MIN_MAX = "min_max"
+}
+export default class DiagramLine extends AbstractChartPlugin {
+    private dataGroups;
+    private rangeType;
+    private syncGroupsPosition;
+    private zeroLineValue;
+    private zeroLineValuePercentage;
+    private _showZeroLine;
+    draw(): IChartPlugin;
+    private calcPointGap;
+    update(dataGroups: TDataGroup[]): TDataGroup[];
+    getName(): string;
+}

package/dist/plugin/EnrichGroupInfosPlugin.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Library EnrichGroupInfosPlugin
+ * Created 05.05,24
+ *
+ * @author Christoph Ehlers
+ */
+import AbstractChartPlugin from "./AbstractChartPlugin";
+import { TDataGroup } from "../type/TDataGroup";
+export default class EnrichGroupInfosPlugin extends AbstractChartPlugin {
+    update(dataGroups: TDataGroup[]): TDataGroup[];
+    getName(): string;
+}

package/dist/type/TBRect.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Library TBRect
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+export type TBRect = {
+    left: boolean;
+    right: boolean;
+    top: boolean;
+    bottom: boolean;
+};

package/dist/type/TChartEngineCallbacks.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Library TChartEngineCallbacks
+ * Created 27.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import { TData } from "./TData";
+import ChartEngine from "../ChartEngine";
+export type TChartEngineCallbacks = {
+    updateData: (indexGroup: number, indexData: number, newData: TData) => ChartEngine;
+};

package/dist/type/TData.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Type TData
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+export type TData = {
+    empty: boolean;
+    label: string;
+    value: number;
+};

package/dist/type/TDataGroup.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Type TDataGroup
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+import { TData } from "./TData";
+export type TDataGroup = {
+    color: string;
+    data: TData[];
+    label: string;
+    description: string;
+    infos: {
+        [key: string]: any;
+    };
+};

package/dist/type/TRect.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Library TRect
+ * Created 26.11.22
+ *
+ * @author Christoph Ehlers
+ */
+export type TRect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@cehlers88/chart",
+  "version": "1.0.0",
+  "description": "A library to create charts using JavaScript and Canvas-Element.",
+  "main": "src/index.js",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cEhlers88/Chart.git"
+  },
+  "keywords": [
+    "canvas",
+    "chart",
+    "diagram"
+  ],
+  "author": "Christoph Ehlers",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/cEhlers88/Chart/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "homepage": "https://github.com/cEhlers88/Chart#readme",
+  "types": "src/index.d.ts",
+  "devDependencies": {
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
+  }
+}