Giter VIP home page Giter VIP logo

gridappsd / gridappsd-viz Goto Github PK

View Code? Open in Web Editor NEW
6.0 6.0 5.0 6.49 MB

GridAPPS-D’s visualization application displays the topology of selected distribution model with highlighted capacitors and regulators. It also include tables with current values for capacitor status (OPEN or CLOSED), regulator voltage, and feeder power. For current release cycle we are using IEEE 8500-Node system model.

Home Page: http://gridappsd.readthedocs.io/

HTML 0.02% JavaScript 0.93% TypeScript 82.80% Shell 0.46% Dockerfile 0.05% SCSS 15.75%
javascript react gridappsd grid example goss

gridappsd-viz's Introduction

Make sure that NodeJS is installed (https://nodejs.org/en/)

For development

Bootstrapping the client

  • cd client
  • npm install
  • npm start (Or npm start disable-css-hmr to disable CSS hot reload, theme toggle only works with this option disabled)
  • Go to http://localhost:3000

Bootstrapping the server

  • cd server
  • npm install
  • npm run nodemon to start an HTTP server with hot-loading and TypeScript server in watch mode

For deployment

Building the front-end code

  • cd client
  • npm install
  • npm run build

Building the server code

  • cd server
  • npm install
  • npm run build
  • npm start

Running the platform

Application Code Architecture

The application is organized using a feature module based approach with smart/dumb component architecture. Each new feature will result in a new directory being created, directly under the feature module's directory, a component should be created, this component will become the only smart component of this feature. Inside the feature module directory, appropriate child directories should be added, and they are:

  • services Contains all the Angular services that the module uses
  • models Contains all of the required data structures and/or type declarations that describe the data models used within the module only
  • views Contains components that handle rendering only, components inside views directory should not perform any network calls, these tasks should be delegated to the root component (The only smart component of the module) of the module, through the use of callback props.

Smart components are only responsible for data modeling and network calls, and this smart component will use the child components declared inside views directory to render all the necessary data that it handles, this creates a single of truth which makes it extremely easy to debug if the rendered data doesn't match expectations.

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.