added files and information for CD/CI and pacakge release

.gitignore

@@ -2,3 +2,5 @@
 dcc-viewer/node_modules/
 
 node_modules/
+
+coverage/

.gitlab-ci.yml

+image: node:16
+
+stages:
+  - test
+  - build
+
+cache:
+  paths:
+    - node_modules/
+
+test:
+  stage: test
+  script:
+    - npm install
+    - npm run test
+  artifacts:
+    paths:
+      - coverage/
+
+build:
+  stage: build
+  script:
+    - npm install
+    - npm run build
+  artifacts:
+    paths:
+      - dist/

LICENSE

+dccviewer-js a libary to visualizes the XML-DCC 3.3.0 in an Web-browser.
+Copyright (C) year  name of author
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License as published by the Free Software Foundation; either
+version 2.1 of the License, or (at your option) any later version.
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, see
+<https://www.gnu.org/licenses/>.

README.md

 
-# DCC Viewer JavaScript
+# DCC Viewer JavaScript "dccviewer-js"
+
+A lightweight JavaScript/HTML application for displaying Digital Calibration Certificates (DCC) from XML files.
+The application parses a DCC XML file, renders administrative data and measurement results interactively (including charts and tables), and supports multiple languages based on the certificate’s data.
+
+## Licencs and other Information
+
+This Library is a proof of concept of the advantages of interactive visualisation of the DCC-XML 3.3.0 Calibration certificates. 
+There are errors in this code, and many parts missing so far, and it's not guaranteed that all elements are rendered correct or even rendered at all. 
+This code is licensed under LGPL-2.1 since we hope to build a more generic libary in the future and sharing it and it's development efforts with the world.  
+
+
 
-A lightweight JavaScript/HTML application for displaying Digital Calibration Certificates (DCC) from XML files. The application parses a DCC XML file, renders administrative data and measurement results interactively (including charts and tables), and supports multiple languages based on the certificate’s data.
 
 ## Project Structure
 
@@ -21,8 +31,7 @@ A lightweight JavaScript/HTML application for displaying Digital Calibration Cer
 │   │   ├── AdminRenderer.js   # Renders administrative data (using a JSON tree viewer)
 │   │   ├── MeasurementRenderer.js  # Renders measurement results in a tabbed layout with charts, tables, etc.
 │   │   └── SelectRenderer.js  # (Optional) For selecting which renderer to use for a given XML section
-│   └── styles.css             # Application styling
-└── vite.config.js             # Vite configuration file
+│   └── styles.css             # Application styling└── vite.config.js             # Vite configuration file
 ```
 
 ## Features
@@ -42,7 +51,7 @@ A lightweight JavaScript/HTML application for displaying Digital Calibration Cer
 
    ```bash
    git clone <repository_url>
-   cd dccviewertypescript
+   cd dccviewer-js
    ```
 
 2. **Install Dependencies:**

jest.config.js

+module.exports = {
+    transform: {
+        '^.+\\.js$': 'babel-jest'
+    },
+    testEnvironment: 'jest-environment-jsdom',
+    collectCoverage: true,
+    coverageDirectory: 'coverage',
+    moduleNameMapper: {
+        '\\.css$': 'identity-obj-proxy'
+    },
+    setupFiles: ['<rootDir>/jest.setup.js']
+};
\ No newline at end of file

jest.setup.js

+// jest.setup.js
+if (typeof window.URL.createObjectURL !== 'function') {
+    window.URL.createObjectURL = () => 'blob://dummy';
+}
\ No newline at end of file

misc/symbol.PNG

+<svg width="192" height="192" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bgGrad" x1="0" y1="0" x2="192" y2="192">
+      <stop offset="0%" stop-color="#4A90E2"/>
+      <stop offset="100%" stop-color="#145A9C"/>
+    </linearGradient>
+  </defs>
+  <!-- Background with rounded corners -->
+  <rect width="192" height="192" fill="url(#bgGrad)" rx="20"/>
+  
+  <!-- Enlarged document icon representing a calibration certificate -->
+  <rect x="38" y="20" width="116" height="152" fill="#ffffff" rx="8"/>
+  <!-- Header area -->
+  <rect x="38" y="20" width="116" height="24" fill="#e0e0e0" rx="4"/>
+  
+  <!-- Calibration lines on the certificate -->
+  <line x1="50" y1="54" x2="150" y2="54" stroke="#145A9C" stroke-width="2"/>
+  <line x1="50" y1="70" x2="150" y2="70" stroke="#145A9C" stroke-width="2"/>
+  <line x1="50" y1="86" x2="150" y2="86" stroke="#145A9C" stroke-width="2"/>
+  <line x1="50" y1="102" x2="150" y2="102" stroke="#145A9C" stroke-width="2"/>
+  
+  <!-- Plot lines overlay (a simple line chart) -->
+  <polyline points="50,130 70,115 90,125 110,105 130,110 150,90" 
+            fill="none" stroke="#ff6f61" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <!-- Optional data points -->
+  <circle cx="50" cy="130" r="2" fill="#ff6f61"/>
+  <circle cx="70" cy="115" r="2" fill="#ff6f61"/>
+  <circle cx="90" cy="125" r="2" fill="#ff6f61"/>
+  <circle cx="110" cy="105" r="2" fill="#ff6f61"/>
+  <circle cx="130" cy="110" r="2" fill="#ff6f61"/>
+  <circle cx="150" cy="90" r="2" fill="#ff6f61"/>
+  
+  <!-- JavaScript nod: a circle with "JS" -->
+  <circle cx="155" cy="155" r="22" fill="#f7df1e"/>
+  <text x="155" y="163" font-family="Arial, sans-serif" font-size="24" font-weight="bold" text-anchor="middle" fill="#000000">JS</text>
+  
+  <!-- Project name text -->
+  <text x="96" y="185" font-family="Arial, sans-serif" font-size="12" text-anchor="middle" fill="#ffffff">dccviewer-js</text>
+</svg>

package.json

 {
-  "name": "dcc-viewer",
-  "version": "1.0.0",
-  "description": "Digital Calibration Certificate Viewer",
+  "name": "dccviewertypescript",
+  "version": "0.1.0",
+  "description": "A JS/HTML application for displaying digital calibration certificates.",
+  "main": "src/app.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "test": "jest --coverage",
+    "start": "vite preview"
   },
   "dependencies": {
     "dsiunits-js": "^0.9.1",
@@ -15,6 +17,17 @@
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
-    "vite": "^4.0.0"
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "babel-jest": "^29.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "vite": "^4.5.9"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ]
   }
 }

readME.md

-Below is a short README for your project that explains how to install, run in development mode, and serve a debug version with Python:
-
----
-
-# DCC Viewer
-
-This is a front-end only digital calibration certificate viewer built with vanilla JavaScript, Vite, Plotly, xml2js, and JSONEditor. It converts a DCC XML file into JSON and renders administrative and measurement data with interactive plots, tables, and tooltips.
-
-## Features
-
-- **XML-to-JSON conversion:** Uses [xml2js](https://github.com/Leonidas-from-XIV/node-xml2js) to convert the calibration certificate XML into JSON.
-- **Interactive Measurement Renderer:** Displays measurement results as grouped subplots with error bars, custom tooltips (including conformity status), and a correlated data table.
-- **JSON Tree Viewer:** Uses [JSONEditor](https://github.com/josdejong/jsoneditor) for a modern, read-only view of the administrative data.
-- **Responsive UI:** Supports language switching and dynamic updates.
-
-## Installation
-
-1. Make sure you have [Node.js](https://nodejs.org/) installed.
-2. Clone the repository and navigate to the project directory.
-3. Install dependencies:
-
-   ```bash
-   npm install
-   ```
-
-## Development
-
-Start the Vite development server:
-
-```bash
-npm run dev
-```
-
-This will launch the app (usually on [http://localhost:5173/](http://localhost:5173/)). Changes to the source files will trigger hot reloading.
-
-## Serving the Debug Version with Python
-
-If you prefer to view the debug version using Python's built-in HTTP server, follow these steps:
-
-1. Build the project (or use the current static files in the project root):
-
-   ```bash
-   npm run build
-   ```
-
-   The output will be placed in the `dist` folder.
-
-2. Navigate to the `dist` folder:
-
-   ```bash
-   cd dist
-   ```
-
-3. Serve the folder using Python (Python 3):
-
-   ```bash
-   python3 -m http.server 8000
-   ```
-
-   This command will start a local server on port 8000.
-
-4. Open your browser and navigate to [http://localhost:8000](http://localhost:8000) to view the debug version.
-
-*Note:* You can also serve the project directly from the project root (if your files are static) by running the Python server there, but using the Vite build output (in `dist`) is recommended for a production-like environment.
-
-## Debugging
-
-- **Chrome Developer Tools:**  
-  Open the **Sources** tab and locate your source files (source maps are enabled by default with Vite) to set breakpoints and inspect variables.
-
-- **WebStorm:**  
-  Create a JavaScript Debug configuration (with URL `http://localhost:5173/`) and set breakpoints directly in the IDE.
-
----
-
-This README should help you get started with development and debugging. Let me know if you need any additional information!
\ No newline at end of file

src/__tests__/basic.test.js

+// src/__tests__/basic.test.js
+import fs from 'fs';
+import path from 'path';
+import { init } from '../app.js';
+
+describe('DCC Viewer Basic Tests', () => {
+    beforeEach(() => {
+        // Set up a basic DOM container
+        document.body.innerHTML = '<div id="app"></div>';
+    });
+
+    test('App initializes with example XML without errors', done => {
+        const xmlPath = path.join(__dirname, '../../data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml');
+        fs.readFile(xmlPath, 'utf8', (err, xmlStr) => {
+            if (err) {
+                done(err);
+                return;
+            }
+            expect(() => init(xmlStr, { containerId: 'app', language: 'en' })).not.toThrow();
+            // Check that at least one container is populated
+            const adminData = document.getElementById('adminData');
+            const measurementResults = document.getElementById('measurementResults');
+            expect(adminData).toBeTruthy();
+            expect(measurementResults).toBeTruthy();
+            done();
+        });
+    });
+});

src/app.js

@@ -2,6 +2,12 @@ import { parseString } from 'xml2js';
 import { renderMeasurementResults } from './renderers/MeasurementRenderer.js';
 import { renderAdminData } from './renderers/AdminRenderer.js';
 
+
+import { EventEmitter } from 'events';
+if (typeof window.EventEmitter !== 'function') {
+  window.EventEmitter = EventEmitter;
+}
+
 export function init(xmlStr, options = {}) {
   const containerId = options.containerId || 'app';
   const appContainer = document.getElementById(containerId);

src/dccQuantity.js

 // src/dccQuantity.js
-import { DSIUnit } from "dsiunits-js/src/dsiUnit.js";
+import { DSIUnit } from "dsiunits-js";
 
 export class DCCQuantity {
     constructor(jsonData) {