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
```
├── data
│ ├── 1DTableDataWithRenderingComments.xml # Example XML file with table rendering comments
│ └── sin_acceleration_example_dcc_WithExampleConformatyStatment.xml # Example DCC XML file
├── dcc-viewer # (Optional) Output directory for built package
├── index.html # Main HTML file
├── package.json # NPM package file
├── readME.md # This file
├── src
│ ├── app.js # Main application module (initializes the app, loads XML, renders UI)
│ ├── dccQuantity.js # Module for parsing DCC quantities and conformity data
│ ├── main.js # Entry point – initializes app after DOM loads and loads test XML (for development)
│ ├── renderers
│ │ ├── 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
```
## Features
-**Multi-Language Support:**
Automatically extracts available languages from the XML's administrative data and builds a dynamic language dropdown.
-**Interactive Measurement Rendering:**
Measurement results are rendered in a tabbed layout, with interactive charts (using Plotly) and tables that update with scaling options and tolerance markings.
-**Expandable Sections:**
Used methods and influence conditions are rendered in collapsible sections using JSONEditor.
## Installation
1.**Clone the Repository:**
```bash
git clone <repository_url>
cd dccviewertypescript
```
2.**Install Dependencies:**
```bash
npm install
```
## Development
This project uses [Vite](https://vitejs.dev/) for development.
1.**Start the Development Server:**
```bash
npm run dev
```
This will start the server (usually on `http://localhost:5173/`). The app uses `src/main.js` as its entry point.
2.**View Example:**
For testing purposes, the development version loads a sample XML file from the `data` directory. You can change the XML in `main.js` if needed.
## Building & Packaging
1.**Build for Production:**
```bash
npm run build
```
This command uses Vite to build a production version of your application. The output is typically placed in a `dist` directory.
2.**Packaging as an NPM Module:**
- Remove the test XML file loading from your module (it's now handled in `main.js`).
- Publish your module to npm (or use it locally) so that the consuming project can call your exported `init(xmlStr, options)` function to load and render a DCC XML file.
## Usage in a Standalone HTML File
If you want to use the module in a simple HTML file, you can create an HTML file like this:
```html
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8"/>
<title>DCC Viewer</title>
<linkrel="stylesheet"href="dist/styles.css"/>
</head>
<body>
<divid="app"></div>
<script type="module">
import{init}from'./dist/app.js';
// Replace the following XML string with your own XML data.
fetch('path/to/your/dcc.xml')
.then(response=>response.text())
.then(xmlStr=>{
init(xmlStr,{containerId:'app',language:'en'});
});
</script>
</body>
</html>
```
This example shows how to initialize the app by passing an XML string and configuration options (such as the container ID and language).
