Giter VIP home page Giter VIP logo

heristop / treemap-flow Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 2.03 MB

Project management tool designed to visualize and monitor the status of various projects and processes

Home Page: https://treemap-flow.nuxt.dev

License: MIT License

Vue 57.97% CSS 0.11% TypeScript 41.00% JavaScript 0.81% Shell 0.11%
project-management treemap chart nuxthub flowchart data-visualization visualization interactive

treemap-flow's Introduction

TreemapFlow

TreemapFlow is an intuitive project management tool that uses treemap visualization to help you track, manage, and optimize various projects and workflows. Originally conceived for monitoring Information System migrations, TreemapFlow has evolved into a versatile solution for visualizing and managing complex hierarchical data structures across multiple domains.

screenshot

โœจ Features

  • Treemap Visualization: Represent complex project hierarchies with an intuitive overview
  • Dynamic Status Management: Create and customize statuses to adapt to various project types
  • Interactive Navigation: Easily move from overview to task details
  • Real-time Updates: Instantly refresh task status with a single click
  • Multi-project Support: Manage multiple projects and switch between them effortlessly
  • Responsive Design: Enjoy a consistent experience across desktop and mobile
  • Data Import/Export: Easily import and export your project structures in JSON
  • Drag-and-Drop: Intuitively reorganize your project structure
  • Collapsible Sections: Optimize your view by folding/unfolding project sections
  • Editing Tools: Add, rename or delete sections and tasks directly in the interface
  • Visual Indicators: Quickly assess progress through color-coded status indicators
  • Customizable Views: Toggle between different display modes based on your preferences
  • No Database: All data is stored locally in your browser

๐Ÿ› ๏ธ Installation

To install and run TreemapFlow locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/heristop/treemap-flow.git
    cd treemap-flow
  2. Install dependencies:

    pnpm install
  3. Start the development server:

    pnpm run dev
  4. Open your browser and navigate to http://localhost:3000.

๐Ÿ“š Usage

Getting Started

  1. Load a Project:

    • On first launch, click "Load Sample Data" to start with a pre-configured project.
    • Or, use the "Upload" button to import your own JSON project file.
  2. Navigate the Treemap:

    • Click on sections to expand/collapse them.
    • Use the zoom and pan features to focus on specific areas.

Managing Your Project

  • Update Statuses: Click on a task to cycle through available statuses.
  • Edit Structure: Use the edit mode to add, rename, or delete sections and tasks.
  • Customize Workflow: Modify statuses in the configuration panel to match your process.

Data Management

  • Import: Click the "Upload" button to load a project from a JSON file.
  • Export: Use the "Export" button to save your current project as a JSON file.

Tip

  • Toggle between dark and light modes for comfortable viewing.
  • Use the collapse/expand feature in the project panel for a cleaner interface.
  • Regularly export your project to backup your work.

For more detailed information on JSON structure and advanced features, please refer to our documentation.

๐Ÿ’ฌ Feedback and Contributions

We welcome feedback, bug reports, and contributions! If you have suggestions for improvements or encounter any issues, please don't hesitate to open an issue or submit a pull request on our GitHub repository.

Logo

treemap-flow's People

Contributors

heristop avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.