-
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): add new Example to demo Real-time Market Trading
- Loading branch information
1 parent
15d23e5
commit e50434a
Showing
11 changed files
with
568 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
59 changes: 59 additions & 0 deletions
59
examples/webpack-demo-vanilla-bundle/src/examples/example18.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <h3 class="title is-3"> | ||
| Example 18 - Real-Time Trading Platform | ||
| <span class="subtitle">(with Material Theme)</span> | ||
| <div class="subtitle" style="float: right; margin-top: -20px"> | ||
| <a class="is-size-5" target="_blank" | ||
| href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example18.ts"> | ||
| <span class="mdi mdi-link mdi-v-align-sub"></span> code | ||
| </a> | ||
| </div> | ||
| </h3> | ||
| <h6 class="title is-6 italic"> | ||
| Simulate a stock trading platform with lot of price changes, to show SlickGrid HUGE PERF., do the following: (1) lower | ||
| Changes Rate (2) increase both Changes per Cycle and (3) lower Highlight Duration | ||
| </h6> | ||
|
|
||
| <div class="trading-platform"> | ||
| <div class="row simulation-form"> | ||
| <div> | ||
| <div class="range"> | ||
| <label for="refreshRateRange" class="form-label">Changes Rate(ms)</label> | ||
| <input type="range" class="form-range" id="refreshRateRange" min="0" max="250" value.bind="refreshRate"> | ||
| <span class="refresh-rate"> | ||
| <input type="number" value.bind="refreshRate"> | ||
| </span> | ||
| </div> | ||
| <span> | ||
| <button class="button is-small" data-test="start-btn" onclick.delegate="startSimulation()"> | ||
| <span class="icon mdi mdi-play-circle-outline"></span> | ||
| <span>Start Simulation</span> | ||
| </button> | ||
| </span> | ||
| <span> | ||
| <button class="button is-small" data-test="stop-btn" onclick.delegate="stopSimulation()"> | ||
| <span class="icon mdi mdi-stop-circle-outline"></span> | ||
| <span>Stop Simulation</span> | ||
| </button> | ||
| </span> | ||
| <span> | ||
| <label for="change-per-cycle-input">Changes p/Cycle</label> | ||
| <input type="number" id="change-per-cycle-input" value.bind="minChangePerCycle" max.bind="maxChangePerCycle"> | ||
| to | ||
| <input type="number" value.bind="maxChangePerCycle" min.bind="minChangePerCycle"> | ||
| </span> | ||
| <span> | ||
| <label for="highlight-input">Highlight Duration(ms)</label> | ||
| <input type="number" id="highlight-input" data-test="highlight-input" value.bind="highlightDuration"> | ||
| </span> | ||
| <span style="float: right"> | ||
| <button class="button is-small" onclick.delegate="toggleFullScreen()"> | ||
| <span class.bind="toggleClassName"></span> | ||
| <span>Toggle Full-Screen</span> | ||
| </button> | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="grid18"> | ||
| </div> | ||
| </div> |
51 changes: 51 additions & 0 deletions
51
examples/webpack-demo-vanilla-bundle/src/examples/example18.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss'; | ||
|
|
||
| $sparkline-color: #00b78d; | ||
| // $sparkline-color: #573585; | ||
|
|
||
| .trading-platform.full-screen { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| padding: 10px 12px 0 10px; | ||
| background-color: white; | ||
| z-index: 8000; | ||
| position: fixed; | ||
| } | ||
| .changed-gain { | ||
| background-color: #eafae8 !important; | ||
| } | ||
| .changed-loss { | ||
| background-color: #ffeae8 !important; | ||
| } | ||
| .simulation-form { | ||
| margin-bottom: 15px; | ||
|
|
||
| input[type=number] { | ||
| height: 30px; | ||
| width: 50px; | ||
| border: 1px solid #c0c0c0; | ||
| border-radius: 3px; | ||
| } | ||
| div.range { | ||
| display: contents; | ||
| width: 200px; | ||
| label.form-label { | ||
| margin: 0; | ||
| } | ||
| input.form-range { | ||
| width: 120px; | ||
| } | ||
| } | ||
| .refresh-rate input { | ||
| height: 30px; | ||
| width: 46px; | ||
| } | ||
| } | ||
| .sparkline { | ||
| stroke: $sparkline-color; | ||
| // fill: none; | ||
| fill: rgba($sparkline-color, 0.03); | ||
| } |
Oops, something went wrong.