🌧️ raain-ui

Advanced UI components and visualization layers for rainfall data

📋 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:

Map Visualization

Compare Data

Date Analysis

📦 Installation

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:

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);

🔍 Example Application

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

# 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.

🅰️ Angular Configuration

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:

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

First, create a custom webpack configuration:

// 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:

"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.