https://github.com/john-knl/rails-ng-demo

https://github.com/john-knl/rails-ng-demo

angular material-design mit-license ngx-charts rails7 widgets

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/john-knl/rails-ng-demo
• Owner: john-knl
• License: mit
• Created: 2018-11-01T10:36:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T19:07:45.000Z (about 2 years ago)
• Last Synced: 2025-02-09T09:32:49.977Z (over 1 year ago)
• Topics: angular, material-design, mit-license, ngx-charts, rails7, widgets
• Language: TypeScript
• Homepage: https://www.rngwidgets.com
• Size: 29 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# README

demo

A content management app for widget creation and display.

Widgets are grouped into Grids which are then grouped into Layouts. Each entity can be reused or destroyed independently.

Widget data must be JSON in the form of [{"name", "value"}] or [{"name", "series"["name", "value"]}]

Dashboard will now instantly update upon editor changes from another client.

To see this feature, 1. open two browsers with seperate cookie spaces (ie incognito mode).

2. Navigate to the dashboard view and editor view of the same layout.

3. Add, remove or shift components in editor.

4. Dashboard component will update instantaneously after each commit.

Application modules are now in Docker containers for a consistent testing environment.

To launch development container network use `docker-compose up --build`

To launch testing container network use `docker-compose -f docker-compose.yml -f docker-compose.test.yml up --build`

To run RSpec tests use `docker-compose -f run --rm api rspec`

To run Jest test use `cd ./client && npx jest` or `docker-compose run --rm frontend npx jest`

To run Capybara tests use `docker-compose -f docker-compose.yml -f docker-compose.test.yml run --rm api rspec ./spec/features`

## Editor Navigation

The image below shows how to create a new layout and add grids.

![New Layout](/client/src/assets/demo1.gif)

The image below shows how to rearrange grids and widgets.

![Moving components](/client/src/assets/demo2.gif)

The image below shows how to edit widgets properties.

![Widgets](/client/src/assets/demo3.gif)