This repository has been archived by the owner on Apr 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
120 additions
and
104 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,73 @@ | ||
| <template> | ||
| <div> | ||
| <div class="flex justify-around"> | ||
| <h4>Lucas</h4> | ||
| <h4>Jose</h4> | ||
| <h4>carlos</h4> | ||
| <div class="grid grid-cols-3 text-center mt-3 rounded py-1 bg-gray-400"> | ||
| <div class="flex items-center justify-evenly"> | ||
| <img | ||
| :src="actionItem.icon" | ||
| alt="" | ||
| class="h-8 w-8 rounded-full" | ||
| /> | ||
| <h4>{{ actionItem.coin }}</h4> | ||
| </div> | ||
| <div | ||
| class="flex items-center justify-center border-l-2 border-r-2 border-gray-500" | ||
| > | ||
| <h4 class="capitalize">{{ actionItem.type }}</h4> | ||
| </div> | ||
| <div class="flex items-center justify-evenly"> | ||
| <div class="py-1"> | ||
| <DoughtChart | ||
| :data="portfolioData" | ||
| :width="40" | ||
| :height="40" | ||
| :options="options" | ||
| /> | ||
| </div> | ||
| <h4>{{ actionItem.rate * 100 }}%</h4> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Vue, Component } from 'vue-property-decorator' | ||
| import { Vue, Component, Prop } from 'vue-property-decorator' | ||
| import { IAction } from '~/types/IAction' | ||
| @Component | ||
| export default class ActionListItem extends Vue {} | ||
| @Component({ | ||
| components: { | ||
| DoughtChart: () => import('@/components/Charts/DoughtChart'), | ||
| }, | ||
| }) | ||
| export default class ActionListItem extends Vue { | ||
| @Prop({ default: {} as IAction }) | ||
| actionItem!: IAction | ||
| options = { | ||
| legend: { | ||
| display: false, | ||
| }, | ||
| tooltips: { | ||
| enabled: false, | ||
| }, | ||
| } | ||
| get portfolioData() { | ||
| return { | ||
| datasets: [ | ||
| { | ||
| data: [ 1 - this.actionItem.rate, this.actionItem.rate], | ||
| borderColor: ['#fd5d93', '#36a2eb', '#cc65fe', '#ffce56'], // #fd5d93 pink option | ||
| borderWidth: 2, | ||
| backgroundColor: [ | ||
| 'rgba(253, 93, 147,0.1)', | ||
| 'rgba(54, 162, 235, 0.1)', | ||
| 'rgba(204, 101, 254, 0.1)', | ||
| 'rgba(255, 206, 86, 0.1)', | ||
| ], | ||
| }, | ||
| ], | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="postcss"></style> |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +1,26 @@ | ||
| <template> | ||
| <div class="container overflow-x-hidden"> | ||
| <div class="main"> | ||
| <div> | ||
| <h1 class="title">Sign in</h1> | ||
| </div> | ||
| <div class="graphs"> | ||
| <LineChartTile | ||
| v-for="(chartTile, i) in chartTiles" | ||
| :key="`chart-tile-${i}`" | ||
| :graph-data="chartTile.graphData" | ||
| :background-color="chartTile.backgroundColor" | ||
| /> | ||
| <h2>Sign in to the wait list</h2> | ||
| </div> | ||
| <div> | ||
| <h1 class="title">Portfolio</h1> | ||
| <div class="p-16"> | ||
| <DoughtChart :data="portfolioData" /> | ||
| </div> | ||
| <input type="text"> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Vue, Component } from 'vue-property-decorator' | ||
| @Component({ | ||
| components: { | ||
| LineChartTile: () => import('@/components/Earnings/LineChartTile.vue'), | ||
| DoughtChart: () => import('@/components/Charts/DoughtChart'), | ||
| }, | ||
| }) | ||
| @Component | ||
| export default class Index extends Vue { | ||
| portfolioData = { | ||
| labels: ['January', 'February', 'March', 'April', 'lucsa', 'draichi'], | ||
| datasets: [ | ||
| { | ||
| label: 'GitHub Commits', | ||
| data: [40, 20, 12, 39, 51, 42], | ||
| borderColor: ['#fd5d93', '#36a2eb', '#cc65fe', '#ffce56'], // #fd5d93 pink option | ||
| borderWidth: 2, | ||
| backgroundColor: [ | ||
| 'rgba(253, 93, 147,0.1)', | ||
| 'rgba(54, 162, 235, 0.1)', | ||
| 'rgba(204, 101, 254, 0.1)', | ||
| 'rgba(255, 206, 86, 0.1)', | ||
| ], | ||
| }, | ||
| ], | ||
| } | ||
| chartTiles = [ | ||
| { | ||
| graphData: { | ||
| labels: ['January', 'February', 'March', 'April'], | ||
| datasets: [ | ||
| { | ||
| label: 'GitHub Commits', | ||
| data: [40, 60, 20, 39], | ||
| }, | ||
| ], | ||
| }, | ||
| backgroundColor: 'blue', | ||
| }, | ||
| { | ||
| graphData: { | ||
| labels: ['January', 'February', 'March', 'April'], | ||
| datasets: [ | ||
| { | ||
| label: 'GitHub Commits', | ||
| data: [20, 90, 20, 39], | ||
| }, | ||
| ], | ||
| }, | ||
| backgroundColor: 'red', | ||
| }, | ||
| ] | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="postcss"> | ||
| .container { | ||
| margin: 0 auto; | ||
| .main { | ||
| margin: auto; | ||
| min-height: 100vh; | ||
| justify-content: center; | ||
| } | ||
| .title { | ||
| font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, | ||
| 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | ||
| display: block; | ||
| font-weight: 300; | ||
| font-size: 1.5em; | ||
| @apply pl-2 pt-2; | ||
| color: #35495e; | ||
| letter-spacing: 1px; | ||
| } | ||
| .graphs { | ||
| @apply p-2; | ||
| overflow-x: auto; | ||
| white-space: nowrap; | ||
| } | ||
| </style> |
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,6 @@ | ||
| export interface IAction { | ||
| icon: string, | ||
| coin: string, | ||
| type: 'buy' | 'sell' | 'hold', | ||
| rate: number, | ||
| } |