raain-ui is a library that provides specialized UI components and visualization layers for displaying and interacting with rainfall data coming from radartorain.com. Built with modern web technologies, it offers high-performance visualizations for meteorological applications.

📋 Table of Contents

- Features
- Screenshots
- Installation
- Usage
- Documentation
- Angular Configuration
- Changelog
- Contributing
- License

✨ Features

- Interactive Maps: Leaflet-based map visualizations for geospatial rainfall data
- Performance Rendering: Pixi.js-powered rendering for smooth visualizations
- Data Charting: Chart.js integration for time-series and statistical analysis
- 3D Globe Visualization: Earth visualization for global rainfall patterns
- Time Navigation: Advanced date/time controls for temporal data exploration
- Responsive Design: Components that adapt to different screen sizes
- Framework Agnostic: Works with vanilla JavaScript or any framework

📸 Screenshots

Here are some screenshots showcasing the raain-ui components in action:

$3

!Map Visualization

$3

!Compare

$3

!Date Analysis

📦 Installation

``bash
npm install raain-ui
`

🚀 Usage

raain-ui provides a set of components that can be integrated into your application. Here's an example of
how to use the MapElement component:

`javascript
import {MapElementFactory} from 'raain-ui';

// Create a map element
const mapElement = MapElementFactory.create({
container: 'map-container',
center: [51.505, -0.09],
zoom: 13
});

// Add a rainfall layer
mapElement.addRainfallLayer(rainfallData);
`

$3

The project includes a comprehensive example application that demonstrates how to use the library:

`bash


Clone the repository

git clone https://github.com/raainio/raain-ui.git
cd raain-ui

Install dependencies and build the library

npm install
npm run build

Run the example

cd example/
npm start
`

This will open the example application at http://localhost:1234, where you can explore the various components and
features of raain-ui.

📚 Documentation

Comprehensive API documentation is available in the specifications directory. This includes detailed
information about all components, their properties, methods, and events.

$3

If you're using this library in an Angular application, you'll need to configure Angular to handle the CSS files
properly. Here are two approaches:

Option 1: Import CSS in angular.json

`json
"styles": [
"src/styles.css",
"node_modules/raain-ui/dist/data/globe.css"
]
`

Option 2: Configure webpack for CSS imports

First, create a custom webpack configuration:

`javascript
// custom-webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
include: [/node_modules\/raain-ui/],
use: ['style-loader', 'css-loader']
}
]
}
};
`

Then use @angular-builders/custom-webpack to apply this configuration:

`json
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
}
}
}
}
`

📝 Changelog

See the Changelog for a detailed list of changes in each version.

👥 Contributing

Contributions are welcome! If you'd like to contribute to raain-ui, please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

Please make sure your code follows the existing style and includes appropriate tests.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.