├── .editorconfig ├── .gitignore ├── README.md ├── app ├── app.ts ├── component │ ├── stock-chart │ │ └── stock-chart.ts │ ├── stock-detail │ │ ├── stock-detail.html │ │ ├── stock-detail.scss │ │ └── stock-detail.ts │ └── stock │ │ ├── pipe.ts │ │ ├── stock.html │ │ ├── stock.scss │ │ └── stock.ts ├── pages │ ├── detail │ │ ├── detail.html │ │ └── detail.ts │ ├── quote-search │ │ ├── quote-search.html │ │ └── quote-search.ts │ └── stock-list │ │ ├── stock-list.html │ │ └── stock-list.ts ├── providers │ ├── stock-info.ts │ └── storage.ts └── theme │ ├── app.core.scss │ ├── app.ios.scss │ ├── app.md.scss │ ├── app.variables.scss │ └── app.wp.scss ├── config.xml ├── gulpfile.js ├── hooks ├── README.md └── after_prepare │ └── 010_add_platform_class.js ├── ionic.config.json ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── icon.png ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png └── splash.png ├── tsconfig.json ├── tslint.json ├── typings.json ├── typings ├── globals │ └── es6-shim │ │ ├── index.d.ts │ │ └── typings.json └── index.d.ts └── www ├── index.html └── vendor ├── chartist-plugin-legend.js ├── chartist.css └── chartist.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | www/build/ 3 | platforms/ 4 | plugins/ 5 | .DS_Store 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stock Tracking App with Ionic 2 and Yahoo API 2 | 3 | # Steps to use 4 | * clone this repo 5 | * npm install 6 | * Install the required cordova plugins 7 | * Then ```ionic build android``` or ```ionic build ios``` 8 | 9 | 10 | # Based on Ionic 2 Beta 10 -------------------------------------------------------------------------------- /app/app.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {Platform, ionicBootstrap} from 'ionic-angular'; 3 | import {StatusBar} from 'ionic-native'; 4 | import {StockList} from './pages/stock-list/stock-list'; 5 | import {StockInfo} from './providers/stock-info'; 6 | import {StorageProvider} from './providers/storage'; 7 | 8 | @Component({ 9 | template: '' 10 | }) 11 | export class MyApp { 12 | rootPage: any = StockList; 13 | constructor(platform: Platform) { 14 | platform.ready().then(() => { 15 | StatusBar.styleDefault(); 16 | }); 17 | } 18 | } 19 | 20 | ionicBootstrap(MyApp, [StockInfo, StorageProvider]); 21 | -------------------------------------------------------------------------------- /app/component/stock-chart/stock-chart.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, Output, ViewChild, ElementRef, OnChanges} from '@angular/core'; 2 | declare var Chartist; 3 | @Component({ 4 | selector: 'stock-chart', 5 | template: `` 6 | }) 7 | export class StockChart { 8 | @Input() data:{}; 9 | constructor(public elm: ElementRef) {} 10 | 11 | ngOnChanges() { 12 | if(this.data) { 13 | let options = { 14 | showPoint: false, 15 | axisX: { 16 | showGrid: true, 17 | showLabel:true 18 | }, 19 | showArea:true, 20 | chartPadding: { 21 | top: 15, 22 | bottom: 5, 23 | left: 10 24 | } 25 | }; 26 | let chart = new Chartist.Line(this.elm.nativeElement,this.data, options); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /app/component/stock-detail/stock-detail.html: -------------------------------------------------------------------------------- 1 | 2 | Detail 3 | 4 | Stock Exchange 5 | {{detail.StockExchange}} 6 | Currency 7 | {{detail.Currency}} 8 | 9 | 10 | Ask 11 | {{detail.Ask}} 12 | Bid 13 | {{detail.Bid}} 14 | 15 | 16 | Days High 17 | {{detail.DaysHigh}} 18 | Days Low 19 | {{detail.DaysLow}} 20 | 21 | 22 | Year High 23 | {{detail.YearHigh}} 24 | Year Low 25 | {{detail.YearLow}} 26 | 27 | 28 | Volume 29 | {{detail.Volume}} 30 | Average Daily Volume 31 | {{detail.AverageDailyVolume}} 32 | 33 | -------------------------------------------------------------------------------- /app/component/stock-detail/stock-detail.scss: -------------------------------------------------------------------------------- 1 | .stock-detail-cmp { 2 | ion-col:nth-child(2n-1) { 3 | font-weight: bold; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /app/component/stock-detail/stock-detail.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, OnInit} from '@angular/core'; 2 | import {StockInfo} from '../../providers/stock-info'; 3 | 4 | @Component({ 5 | selector: 'stock-detail', 6 | templateUrl: 'build/component/stock-detail/stock-detail.html', 7 | }) 8 | 9 | export class StockDetailCmp { 10 | @Input() symbol; 11 | detail = {}; 12 | constructor(public stockInfo: StockInfo) { 13 | } 14 | 15 | ngOnInit() { 16 | this.stockInfo.getDetail(this.symbol) 17 | .subscribe(data => { 18 | this.detail = data; 19 | }); 20 | } 21 | 22 | } -------------------------------------------------------------------------------- /app/component/stock/pipe.ts: -------------------------------------------------------------------------------- 1 | import {Pipe} from '@angular/core'; 2 | @Pipe({ 3 | name: 'numberString' 4 | }) 5 | export class NumberStringPipe { 6 | transform(val, args) { 7 | return Number.parseFloat(val).toFixed(3); 8 | } 9 | } -------------------------------------------------------------------------------- /app/component/stock/stock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

{{info.symbol}}

5 | 6 | 7 |

{{info.name}}

8 | 9 | 10 | 11 | 12 | {{data.LastTradePriceOnly | numberString}} 13 | {{data.Change | numberString}}% 14 | 15 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | -------------------------------------------------------------------------------- /app/component/stock/stock.scss: -------------------------------------------------------------------------------- 1 | .stockcmp { 2 | .number { 3 | padding:10px 20px; 4 | text-align: center; 5 | min-width: 120px; 6 | max-width:120px; 7 | border-radius:3px; 8 | }; 9 | 10 | .percentage_pos { 11 | @extend .number; 12 | background: mediumseagreen; 13 | color:white; 14 | }; 15 | 16 | .percentage_neg { 17 | @extend .number; 18 | background: indianred; 19 | color:white; 20 | } 21 | } -------------------------------------------------------------------------------- /app/component/stock/stock.ts: -------------------------------------------------------------------------------- 1 | import {Component, Input, Output, OnChanges, OnInit, OnDestroy, EventEmitter} from '@angular/core'; 2 | import {ViewController, Events} from 'ionic-angular'; 3 | import {Http} from '@angular/http'; 4 | import {StockInfo} from '../../providers/stock-info'; 5 | import {NumberStringPipe} from './pipe'; 6 | import {Subscription} from 'rxjs/Rx'; 7 | 8 | @Component({ 9 | selector: 'stock', 10 | templateUrl: 'build/component/stock/stock.html', 11 | pipes: [NumberStringPipe] 12 | }) 13 | 14 | export class StockCmp { 15 | @Input() sliding; 16 | @Input() info; 17 | @Input() run; 18 | @Output() delete = new EventEmitter(); 19 | data = {}; 20 | down:Boolean; 21 | loading:Boolean; 22 | symbolStock:any; 23 | subscription:Subscription; 24 | constructor(public http:Http, public ss:StockInfo, public vc: ViewController, public events:Events) { 25 | this.loading = true; 26 | } 27 | 28 | ngOnInit() { 29 | this.sliding = (this.sliding === "true"); 30 | this.symbolStock = this.ss.getPriceInfo(this.info.symbol); 31 | this.subscription = this.symbolStock.subscribe(data => { 32 | this.data = data; 33 | this.loading = false; 34 | }); 35 | } 36 | 37 | percentageSign(value) { 38 | if(value === undefined || value === null) { 39 | return 'number'; 40 | } else if(value[0] ==="-") { 41 | this.down = true; 42 | return 'percentage_neg' 43 | } else { 44 | this.down = false; 45 | return 'percentage_pos'; 46 | } 47 | } 48 | 49 | ngOnChanges() { 50 | if(this.run) { 51 | if(this.symbolStock && this.subscription) { 52 | this.subscription = this.symbolStock.subscribe(data => { 53 | this.data = data; 54 | this.loading = false; 55 | }); 56 | } 57 | } else { 58 | if(this.subscription) { 59 | this.subscription.unsubscribe(); 60 | } 61 | } 62 | } 63 | 64 | deleteItem() { 65 | this.delete.emit("delete"); 66 | } 67 | } -------------------------------------------------------------------------------- /app/pages/detail/detail.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Stock Detail 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Historical Data 16 | 17 | 18 | Select No. of Months of Data 19 | 20 | 1 Month 21 | 3 Month 22 | 6 Month 23 | 12 Month 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Low 32 |
Close 33 | 34 | 35 | 36 | 37 | 38 | 39 | Enter Notes 40 | 41 | 42 |
43 | 44 |
45 | 46 | {{note.value}} 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /app/pages/detail/detail.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {NavParams} from 'ionic-angular'; 3 | import {StockInfo} from '../../providers/stock-info'; 4 | import {StockChart} from '../../component/stock-chart/stock-chart'; 5 | import {StockCmp} from '../../component/stock/stock'; 6 | import {StockDetailCmp} from '../../component/stock-detail/stock-detail'; 7 | import {StorageProvider} from '../../providers/storage'; 8 | 9 | @Component({ 10 | templateUrl: 'build/pages/detail/detail.html', 11 | directives:[StockChart, StockCmp, StockDetailCmp] 12 | }) 13 | export class Detail { 14 | notes = []; 15 | month:number = 1; 16 | details:{}; 17 | quote:any; 18 | data:any; 19 | constructor(params: NavParams, public stockinfo:StockInfo, public storageProvider: StorageProvider) { 20 | this.quote = params.get('quote'); 21 | this.getChartData(); 22 | this.getNotes(); 23 | } 24 | 25 | addNote(noteElm) { 26 | if(noteElm.value) { 27 | this.storageProvider.setNotes(this.quote.symbol, noteElm.value) 28 | .then( (data)=> { 29 | this.notes.push({rowid: data.res.insertId, value:noteElm.value, symbol:this.quote.symbol}); 30 | noteElm.value = ""; 31 | }) 32 | } 33 | } 34 | 35 | deleteNote(rowid,i) { 36 | this.storageProvider.removeNote(rowid); 37 | this.notes.splice(i,1); 38 | } 39 | 40 | getChartData() { 41 | this.stockinfo.getChart(this.quote.symbol, this.month) 42 | .subscribe(data=> { 43 | let newData:any = {}; 44 | newData.series = []; 45 | newData.series.push({meta: 'Low', name: 'Low', data:[]}); 46 | newData.series.push({meta: 'Close',name: 'Close', data:[]}); 47 | data.forEach(day=> { 48 | newData.series[0].data.unshift(Number.parseFloat(day.Low)); 49 | newData.series[1].data.unshift(Number.parseFloat(day.Close)); 50 | }); 51 | this.data = newData; 52 | }); 53 | } 54 | 55 | getNotes() { 56 | this.storageProvider.getAllNotes(this.quote.symbol) 57 | .then(data => { 58 | let set = data.res.rows; 59 | this.notes = Array.from(set); 60 | }); 61 | } 62 | } -------------------------------------------------------------------------------- /app/pages/quote-search/quote-search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Quote Search 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

{{quote.symbol}}

17 | 18 | 19 |

{{quote.name}}

20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /app/pages/quote-search/quote-search.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {Control} from '@angular/common'; 3 | import {Page, ViewController, Events} from 'ionic-angular'; 4 | import {StockInfo} from '../../providers/stock-info'; 5 | import {StorageProvider} from '../../providers/storage'; 6 | 7 | @Component({ 8 | templateUrl: 'build/pages/quote-search/quote-search.html' 9 | }) 10 | export class QuoteSearch { 11 | searchbar = new Control(); 12 | quoteList:Array; 13 | constructor(public stockInfo: StockInfo, public vc:ViewController, public storage: StorageProvider, public events:Events) { 14 | this.searchbar.valueChanges 15 | .filter(value => value.trim().length > 2) 16 | .distinctUntilChanged() 17 | .debounceTime(2000) 18 | .subscribe(value => { 19 | this.search(value); 20 | }); 21 | } 22 | 23 | search(value) { 24 | this.stockInfo.getQuotes(value) 25 | .subscribe(list => { 26 | this.quoteList = list; 27 | }); 28 | } 29 | 30 | watch(quote) { 31 | this.events.publish("stock:watch", quote); 32 | this.storage.setQuote(quote.symbol, quote); 33 | } 34 | 35 | close() { 36 | this.vc.dismiss(); 37 | } 38 | } -------------------------------------------------------------------------------- /app/pages/stock-list/stock-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Stocks 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /app/pages/stock-list/stock-list.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {NavController, Modal, Events} from 'ionic-angular'; 3 | import {StockCmp} from '../../component/stock/stock'; 4 | import {StockChart} from '../../component/stock-chart/stock-chart'; 5 | import {QuoteSearch} from '../quote-search/quote-search'; 6 | import {Detail} from '../detail/detail'; 7 | import {StorageProvider} from '../../providers/storage'; 8 | 9 | @Component({ 10 | templateUrl: 'build/pages/stock-list/stock-list.html', 11 | directives: [StockCmp, StockChart] 12 | }) 13 | export class StockList { 14 | quoteList = []; 15 | run:Boolean; 16 | constructor(public nav:NavController, public storageProvider: StorageProvider, public events: Events) { 17 | this.storageProvider.getAllQuotes() 18 | .then(data => { 19 | let result = data.res.rows; 20 | for(let i=0; i < result.length; i++) { 21 | this.quoteList.push(JSON.parse(result[i].value)); 22 | } 23 | }); 24 | 25 | this.events.subscribe("stock:watch", (stock) => { 26 | this.quoteList.push(stock[0]); 27 | }); 28 | 29 | } 30 | 31 | searchQuote() { 32 | let modal = Modal.create(QuoteSearch); 33 | this.nav.present(modal); 34 | } 35 | 36 | deleteItem(index, symbol) { 37 | this.storageProvider.removeQuote(symbol) 38 | .then(()=>{ 39 | this.quoteList.splice(index, 1); 40 | }); 41 | } 42 | 43 | ionViewWillEnter() { 44 | this.run = true; 45 | } 46 | 47 | ionViewWillLeave() { 48 | this.run = false; 49 | } 50 | 51 | openDetail(quote) { 52 | this.nav.push(Detail, {quote:quote}); 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /app/providers/stock-info.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Http} from '@angular/http'; 3 | import {Observable} from 'rxjs/Rx'; 4 | import 'rxjs/operator/map'; 5 | 6 | @Injectable() 7 | export class StockInfo { 8 | constructor(public http:Http) {} 9 | 10 | encodeURI(string) { 11 | return encodeURIComponent(string).replace(/\"/g, "%22").replace(/\ /g, "%20").replace(/[!'()]/g, encodeURI); 12 | } 13 | 14 | getPriceInfo(symbol) { 15 | let query = `select * from yahoo.finance.quote where symbol IN('${symbol}')`; 16 | let url = 'http://query.yahooapis.com/v1/public/yql?q=' + this.encodeURI(query) + '&format=json&env=http://datatables.org/alltables.env'; 17 | // let url = `https://finance.yahoo.com/webservice/v1/symbols/${symbol}/quote?format=json&view=detail`; 18 | let stocks = Observable.interval(5 * 1000) 19 | .flatMap(()=> { 20 | return this.http.get(url).retry(5); 21 | }) 22 | .map(data => { 23 | let jsonData = data.json(); 24 | return jsonData.query.results.quote; 25 | }); 26 | return stocks; 27 | } 28 | 29 | getDetail(symbol) { 30 | let query = `select * from yahoo.finance.quotes where symbol IN ("' ${symbol} '")`; 31 | let url = 'http://query.yahooapis.com/v1/public/yql?q=' + this.encodeURI(query) + '&format=json&env=http://datatables.org/alltables.env'; 32 | return this.http.get(url).map(data => data.json().query.results.quote); 33 | } 34 | 35 | getdate(m) { 36 | let d = new Date(); 37 | d.setMonth(d.getMonth()-m); 38 | let year = d.getFullYear().toString(); 39 | let month = (d.getMonth()+ 1).toString(); 40 | let day = d.getDate().toString(); 41 | 42 | if(month.length === 1) { 43 | month = "0" + month; 44 | } 45 | 46 | if(day.length === 1) { 47 | day = "0" + day; 48 | } 49 | 50 | let formatted = `${year}-${month}-${day}`; 51 | return formatted; 52 | 53 | } 54 | 55 | getQuotes(name) { 56 | let url = `https://s.yimg.com/aq/autoc?query=${name}®ion=CA&lang=en-CA`; 57 | return this.http.get(url) 58 | .map(data => { 59 | let result = data.json(); 60 | return result.ResultSet.Result; 61 | }); 62 | } 63 | 64 | getChart(symbol,from=1) { 65 | let todayDate = this.getdate(0); 66 | let fromDate = this.getdate(from); 67 | let query = 'select * from yahoo.finance.historicaldata where symbol = "' + symbol + '" and startDate = "' + fromDate + '" and endDate = "' + todayDate + '"'; 68 | let url = 'http://query.yahooapis.com/v1/public/yql?q=' + this.encodeURI(query) + '&format=json&env=http://datatables.org/alltables.env'; 69 | return this.http.get(url).map((data) => { 70 | console.log(url); 71 | let result = data.json().query.results; 72 | if(result) { 73 | return result.quote 74 | } else { 75 | return []; 76 | } 77 | }); 78 | } 79 | 80 | } -------------------------------------------------------------------------------- /app/providers/storage.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {Storage, SqlStorage} from 'ionic-angular'; 3 | 4 | @Injectable() 5 | export class StorageProvider { 6 | storage = new Storage(SqlStorage); 7 | constructor() { 8 | this.storage.query("create table IF NOT EXISTS quotes(stock unique, value)"); 9 | this.storage.query("create table IF NOT EXISTS notes(symbol, value)"); 10 | } 11 | 12 | setQuote(key, value) { 13 | value = JSON.stringify(value); 14 | let query = `insert into quotes values('${key}', '${value}');`; 15 | return this.storage.query(query); 16 | } 17 | 18 | getAllQuotes() { 19 | return this.storage.query("select * from quotes"); 20 | } 21 | 22 | removeQuote(key) { 23 | let query = `delete from quotes where stock='${key}'`; 24 | return this.storage.query(query); 25 | } 26 | 27 | setNotes(symbol, value) { 28 | let query = `insert into notes(symbol, value) values('${symbol}', '${value}')`; 29 | return this.storage.query(query); 30 | } 31 | 32 | getAllNotes(symbol) { 33 | let query = `select rowid, * from notes where symbol='${symbol}';`; 34 | return this.storage.query(query); 35 | } 36 | 37 | removeNote(rowid) { 38 | let query = `delete from notes where rowid = ${rowid}`; 39 | return this.storage.query(query); 40 | } 41 | } -------------------------------------------------------------------------------- /app/theme/app.core.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Imports 5 | // -------------------------------------------------- 6 | // These are the imports which make up the design of this app. 7 | // By default each design mode includes these shared imports. 8 | // App Shared Sass variables belong in app.variables.scss. 9 | 10 | @import '../component/stock/stock'; 11 | @import '../component/stock-detail/stock-detail'; 12 | 13 | .ct-series-a { 14 | color:#d70206; 15 | } 16 | 17 | .ct-series-b { 18 | color: #f05b4f; 19 | } -------------------------------------------------------------------------------- /app/theme/app.ios.scss: -------------------------------------------------------------------------------- 1 | 2 | // http://ionicframework.com/docs/v2/theming/ 3 | 4 | 5 | // App Shared Variables 6 | // -------------------------------------------------- 7 | // Shared Sass variables go in the app.variables.scss file 8 | @import 'app.variables'; 9 | 10 | 11 | // App iOS Variables 12 | // -------------------------------------------------- 13 | // iOS only Sass variables can go here 14 | 15 | 16 | // Ionic iOS Sass 17 | // -------------------------------------------------- 18 | // Custom App variables must be declared before importing Ionic. 19 | // Ionic will use its default values when a custom variable isn't provided. 20 | @import 'ionic.ios'; 21 | 22 | 23 | // App Shared Sass 24 | // -------------------------------------------------- 25 | // All Sass files that make up this app goes into the app.core.scss file. 26 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 27 | @import 'app.core'; 28 | 29 | 30 | // App iOS Only Sass 31 | // -------------------------------------------------- 32 | // CSS that should only apply to the iOS app 33 | -------------------------------------------------------------------------------- /app/theme/app.md.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Material Design Variables 11 | // -------------------------------------------------- 12 | // Material Design only Sass variables can go here 13 | 14 | 15 | // Ionic Material Design Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import 'ionic.md'; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Material Design Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Material Design app 32 | -------------------------------------------------------------------------------- /app/theme/app.variables.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | // Ionic Shared Functions 4 | // -------------------------------------------------- 5 | // Makes Ionic Sass functions available to your App 6 | 7 | @import 'globals.core'; 8 | 9 | // App Shared Variables 10 | // -------------------------------------------------- 11 | // To customize the look and feel of this app, you can override 12 | // the Sass variables found in Ionic's source scss files. Setting 13 | // variables before Ionic's Sass will use these variables rather than 14 | // Ionic's default Sass variable values. App Shared Sass imports belong 15 | // in the app.core.scss file and not this file. Sass variables specific 16 | // to the mode belong in either the app.ios.scss or app.md.scss files. 17 | 18 | 19 | // App Shared Color Variables 20 | // -------------------------------------------------- 21 | // It's highly recommended to change the default colors 22 | // to match your app's branding. Ionic uses a Sass map of 23 | // colors so you can add, rename and remove colors as needed. 24 | // The "primary" color is the only required color in the map. 25 | // Both iOS and MD colors can be further customized if colors 26 | // are different per mode. 27 | 28 | $colors: ( 29 | primary: #387ef5, 30 | secondary: #32db64, 31 | danger: #f53d3d, 32 | light: #f4f4f4, 33 | dark: #222, 34 | favorite: #69BB7B 35 | ); 36 | -------------------------------------------------------------------------------- /app/theme/app.wp.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | 4 | // App Shared Variables 5 | // -------------------------------------------------- 6 | // Shared Sass variables go in the app.variables.scss file 7 | @import 'app.variables'; 8 | 9 | 10 | // App Windows Variables 11 | // -------------------------------------------------- 12 | // Windows only Sass variables can go here 13 | 14 | 15 | // Ionic Windows Sass 16 | // -------------------------------------------------- 17 | // Custom App variables must be declared before importing Ionic. 18 | // Ionic will use its default values when a custom variable isn't provided. 19 | @import "ionic.wp"; 20 | 21 | 22 | // App Shared Sass 23 | // -------------------------------------------------- 24 | // All Sass files that make up this app goes into the app.core.scss file. 25 | // For simpler CSS overrides, custom app CSS must come after Ionic's CSS. 26 | @import 'app.core'; 27 | 28 | 29 | // App Windows Only Sass 30 | // -------------------------------------------------- 31 | // CSS that should only apply to the Windows app 32 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | beta10 4 | An Ionic Framework and Cordova project. 5 | Ionic Framework Team 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | gulpWatch = require('gulp-watch'), 3 | del = require('del'), 4 | runSequence = require('run-sequence'), 5 | argv = process.argv; 6 | 7 | 8 | /** 9 | * Ionic hooks 10 | * Add ':before' or ':after' to any Ionic project command name to run the specified 11 | * tasks before or after the command. 12 | */ 13 | gulp.task('serve:before', ['watch']); 14 | gulp.task('emulate:before', ['build']); 15 | gulp.task('deploy:before', ['build']); 16 | gulp.task('build:before', ['build']); 17 | 18 | // we want to 'watch' when livereloading 19 | var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1; 20 | gulp.task('run:before', [shouldWatch ? 'watch' : 'build']); 21 | 22 | /** 23 | * Ionic Gulp tasks, for more information on each see 24 | * https://github.com/driftyco/ionic-gulp-tasks 25 | * 26 | * Using these will allow you to stay up to date if the default Ionic 2 build 27 | * changes, but you are of course welcome (and encouraged) to customize your 28 | * build however you see fit. 29 | */ 30 | var buildBrowserify = require('ionic-gulp-browserify-typescript'); 31 | var buildSass = require('ionic-gulp-sass-build'); 32 | var copyHTML = require('ionic-gulp-html-copy'); 33 | var copyFonts = require('ionic-gulp-fonts-copy'); 34 | var copyScripts = require('ionic-gulp-scripts-copy'); 35 | var tslint = require('ionic-gulp-tslint'); 36 | 37 | var isRelease = argv.indexOf('--release') > -1; 38 | 39 | gulp.task('watch', ['clean'], function(done){ 40 | runSequence( 41 | ['sass', 'html', 'fonts', 'scripts'], 42 | function(){ 43 | gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); }); 44 | gulpWatch('app/**/*.html', function(){ gulp.start('html'); }); 45 | buildBrowserify({ watch: true }).on('end', done); 46 | } 47 | ); 48 | }); 49 | 50 | gulp.task('build', ['clean'], function(done){ 51 | runSequence( 52 | ['sass', 'html', 'fonts', 'scripts'], 53 | function(){ 54 | buildBrowserify({ 55 | minify: isRelease, 56 | browserifyOptions: { 57 | debug: !isRelease 58 | }, 59 | uglifyOptions: { 60 | mangle: false 61 | } 62 | }).on('end', done); 63 | } 64 | ); 65 | }); 66 | 67 | gulp.task('sass', buildSass); 68 | gulp.task('html', copyHTML); 69 | gulp.task('fonts', copyFonts); 70 | gulp.task('scripts', copyScripts); 71 | gulp.task('clean', function(){ 72 | return del('www/build'); 73 | }); 74 | gulp.task('lint', tslint); 75 | -------------------------------------------------------------------------------- /hooks/README.md: -------------------------------------------------------------------------------- 1 | 21 | # Cordova Hooks 22 | 23 | Cordova Hooks represent special scripts which could be added by application and plugin developers or even by your own build system to customize cordova commands. Hook scripts could be defined by adding them to the special predefined folder (`/hooks`) or via configuration files (`config.xml` and `plugin.xml`) and run serially in the following order: 24 | * Application hooks from `/hooks`; 25 | * Application hooks from `config.xml`; 26 | * Plugin hooks from `plugins/.../plugin.xml`. 27 | 28 | __Remember__: Make your scripts executable. 29 | 30 | __Note__: `.cordova/hooks` directory is also supported for backward compatibility, but we don't recommend using it as it is deprecated. 31 | 32 | ## Supported hook types 33 | The following hook types are supported: 34 | 35 | after_build/ 36 | after_compile/ 37 | after_docs/ 38 | after_emulate/ 39 | after_platform_add/ 40 | after_platform_rm/ 41 | after_platform_ls/ 42 | after_plugin_add/ 43 | after_plugin_ls/ 44 | after_plugin_rm/ 45 | after_plugin_search/ 46 | after_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 47 | after_prepare/ 48 | after_run/ 49 | after_serve/ 50 | before_build/ 51 | before_compile/ 52 | before_docs/ 53 | before_emulate/ 54 | before_platform_add/ 55 | before_platform_rm/ 56 | before_platform_ls/ 57 | before_plugin_add/ 58 | before_plugin_ls/ 59 | before_plugin_rm/ 60 | before_plugin_search/ 61 | before_plugin_install/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being installed 62 | before_plugin_uninstall/ <-- Plugin hooks defined in plugin.xml are executed exclusively for a plugin being uninstalled 63 | before_prepare/ 64 | before_run/ 65 | before_serve/ 66 | pre_package/ <-- Windows 8 and Windows Phone only. 67 | 68 | ## Ways to define hooks 69 | ### Via '/hooks' directory 70 | To execute custom action when corresponding hook type is fired, use hook type as a name for a subfolder inside 'hooks' directory and place you script file here, for example: 71 | 72 | # script file will be automatically executed after each build 73 | hooks/after_build/after_build_custom_action.js 74 | 75 | 76 | ### Config.xml 77 | 78 | Hooks can be defined in project's `config.xml` using `` elements, for example: 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | ... 89 | 90 | 91 | 92 | 93 | 94 | 95 | ... 96 | 97 | 98 | ### Plugin hooks (plugin.xml) 99 | 100 | As a plugin developer you can define hook scripts using `` elements in a `plugin.xml` like that: 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | ... 109 | 110 | 111 | `before_plugin_install`, `after_plugin_install`, `before_plugin_uninstall` plugin hooks will be fired exclusively for the plugin being installed/uninstalled. 112 | 113 | ## Script Interface 114 | 115 | ### Javascript 116 | 117 | If you are writing hooks in Javascript you should use the following module definition: 118 | ```javascript 119 | module.exports = function(context) { 120 | ... 121 | } 122 | ``` 123 | 124 | You can make your scipts async using Q: 125 | ```javascript 126 | module.exports = function(context) { 127 | var Q = context.requireCordovaModule('q'); 128 | var deferral = new Q.defer(); 129 | 130 | setTimeout(function(){ 131 | console.log('hook.js>> end'); 132 | deferral.resolve(); 133 | }, 1000); 134 | 135 | return deferral.promise; 136 | } 137 | ``` 138 | 139 | `context` object contains hook type, executed script full path, hook options, command-line arguments passed to Cordova and top-level "cordova" object: 140 | ```json 141 | { 142 | "hook": "before_plugin_install", 143 | "scriptLocation": "c:\\script\\full\\path\\appBeforePluginInstall.js", 144 | "cmdLine": "The\\exact\\command\\cordova\\run\\with arguments", 145 | "opts": { 146 | "projectRoot":"C:\\path\\to\\the\\project", 147 | "cordova": { 148 | "platforms": ["wp8"], 149 | "plugins": ["com.plugin.withhooks"], 150 | "version": "0.21.7-dev" 151 | }, 152 | "plugin": { 153 | "id": "com.plugin.withhooks", 154 | "pluginInfo": { 155 | ... 156 | }, 157 | "platform": "wp8", 158 | "dir": "C:\\path\\to\\the\\project\\plugins\\com.plugin.withhooks" 159 | } 160 | }, 161 | "cordova": {...} 162 | } 163 | 164 | ``` 165 | `context.opts.plugin` object will only be passed to plugin hooks scripts. 166 | 167 | You can also require additional Cordova modules in your script using `context.requireCordovaModule` in the following way: 168 | ```javascript 169 | var Q = context.requireCordovaModule('q'); 170 | ``` 171 | 172 | __Note__: new module loader script interface is used for the `.js` files defined via `config.xml` or `plugin.xml` only. 173 | For compatibility reasons hook files specified via `/hooks` folders are run via Node child_process spawn, see 'Non-javascript' section below. 174 | 175 | ### Non-javascript 176 | 177 | Non-javascript scripts are run via Node child_process spawn from the project's root directory and have the root directory passes as the first argument. All other options are passed to the script using environment variables: 178 | 179 | * CORDOVA_VERSION - The version of the Cordova-CLI. 180 | * CORDOVA_PLATFORMS - Comma separated list of platforms that the command applies to (e.g.: android, ios). 181 | * CORDOVA_PLUGINS - Comma separated list of plugin IDs that the command applies to (e.g.: org.apache.cordova.file, org.apache.cordova.file-transfer) 182 | * CORDOVA_HOOK - Path to the hook that is being executed. 183 | * CORDOVA_CMDLINE - The exact command-line arguments passed to cordova (e.g.: cordova run ios --emulate) 184 | 185 | If a script returns a non-zero exit code, then the parent cordova command will be aborted. 186 | 187 | ## Writing hooks 188 | 189 | We highly recommend writing your hooks using Node.js so that they are 190 | cross-platform. Some good examples are shown here: 191 | 192 | [http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/](http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/) 193 | 194 | Also, note that even if you are working on Windows, and in case your hook scripts aren't bat files (which is recommended, if you want your scripts to work in non-Windows operating systems) Cordova CLI will expect a shebang line as the first line for it to know the interpreter it needs to use to launch the script. The shebang line should match the following example: 195 | 196 | #!/usr/bin/env [name_of_interpreter_executable] 197 | -------------------------------------------------------------------------------- /hooks/after_prepare/010_add_platform_class.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | // Add Platform Class 4 | // v1.0 5 | // Automatically adds the platform class to the body tag 6 | // after the `prepare` command. By placing the platform CSS classes 7 | // directly in the HTML built for the platform, it speeds up 8 | // rendering the correct layout/style for the specific platform 9 | // instead of waiting for the JS to figure out the correct classes. 10 | 11 | var fs = require('fs'); 12 | var path = require('path'); 13 | 14 | var rootdir = process.argv[2]; 15 | 16 | function addPlatformBodyTag(indexPath, platform) { 17 | // add the platform class to the body tag 18 | try { 19 | var platformClass = 'platform-' + platform; 20 | var cordovaClass = 'platform-cordova platform-webview'; 21 | 22 | var html = fs.readFileSync(indexPath, 'utf8'); 23 | 24 | var bodyTag = findBodyTag(html); 25 | if(!bodyTag) return; // no opening body tag, something's wrong 26 | 27 | if(bodyTag.indexOf(platformClass) > -1) return; // already added 28 | 29 | var newBodyTag = bodyTag; 30 | 31 | var classAttr = findClassAttr(bodyTag); 32 | if(classAttr) { 33 | // body tag has existing class attribute, add the classname 34 | var endingQuote = classAttr.substring(classAttr.length-1); 35 | var newClassAttr = classAttr.substring(0, classAttr.length-1); 36 | newClassAttr += ' ' + platformClass + ' ' + cordovaClass + endingQuote; 37 | newBodyTag = bodyTag.replace(classAttr, newClassAttr); 38 | 39 | } else { 40 | // add class attribute to the body tag 41 | newBodyTag = bodyTag.replace('>', ' class="' + platformClass + ' ' + cordovaClass + '">'); 42 | } 43 | 44 | html = html.replace(bodyTag, newBodyTag); 45 | 46 | fs.writeFileSync(indexPath, html, 'utf8'); 47 | 48 | process.stdout.write('add to body class: ' + platformClass + '\n'); 49 | } catch(e) { 50 | process.stdout.write(e); 51 | } 52 | } 53 | 54 | function findBodyTag(html) { 55 | // get the body tag 56 | try{ 57 | return html.match(/])(.*?)>/gi)[0]; 58 | }catch(e){} 59 | } 60 | 61 | function findClassAttr(bodyTag) { 62 | // get the body tag's class attribute 63 | try{ 64 | return bodyTag.match(/ class=["|'](.*?)["|']/gi)[0]; 65 | }catch(e){} 66 | } 67 | 68 | if (rootdir) { 69 | 70 | // go through each of the platform directories that have been prepared 71 | var platforms = (process.env.CORDOVA_PLATFORMS ? process.env.CORDOVA_PLATFORMS.split(',') : []); 72 | 73 | for(var x=0; x { 6 | done: boolean; 7 | value?: T; 8 | } 9 | 10 | interface IterableShim { 11 | /** 12 | * Shim for an ES6 iterable. Not intended for direct use by user code. 13 | */ 14 | "_es6-shim iterator_"(): Iterator; 15 | } 16 | 17 | interface Iterator { 18 | next(value?: any): IteratorResult; 19 | return?(value?: any): IteratorResult; 20 | throw?(e?: any): IteratorResult; 21 | } 22 | 23 | interface IterableIteratorShim extends IterableShim, Iterator { 24 | /** 25 | * Shim for an ES6 iterable iterator. Not intended for direct use by user code. 26 | */ 27 | "_es6-shim iterator_"(): IterableIteratorShim; 28 | } 29 | 30 | interface StringConstructor { 31 | /** 32 | * Return the String value whose elements are, in order, the elements in the List elements. 33 | * If length is 0, the empty string is returned. 34 | */ 35 | fromCodePoint(...codePoints: number[]): string; 36 | 37 | /** 38 | * String.raw is intended for use as a tag function of a Tagged Template String. When called 39 | * as such the first argument will be a well formed template call site object and the rest 40 | * parameter will contain the substitution values. 41 | * @param template A well-formed template string call site representation. 42 | * @param substitutions A set of substitution values. 43 | */ 44 | raw(template: TemplateStringsArray, ...substitutions: any[]): string; 45 | } 46 | 47 | interface String { 48 | /** 49 | * Returns a nonnegative integer Number less than 1114112 (0x110000) that is the code point 50 | * value of the UTF-16 encoded code point starting at the string element at position pos in 51 | * the String resulting from converting this object to a String. 52 | * If there is no element at that position, the result is undefined. 53 | * If a valid UTF-16 surrogate pair does not begin at pos, the result is the code unit at pos. 54 | */ 55 | codePointAt(pos: number): number; 56 | 57 | /** 58 | * Returns true if searchString appears as a substring of the result of converting this 59 | * object to a String, at one or more positions that are 60 | * greater than or equal to position; otherwise, returns false. 61 | * @param searchString search string 62 | * @param position If position is undefined, 0 is assumed, so as to search all of the String. 63 | */ 64 | includes(searchString: string, position?: number): boolean; 65 | 66 | /** 67 | * Returns true if the sequence of elements of searchString converted to a String is the 68 | * same as the corresponding elements of this object (converted to a String) starting at 69 | * endPosition – length(this). Otherwise returns false. 70 | */ 71 | endsWith(searchString: string, endPosition?: number): boolean; 72 | 73 | /** 74 | * Returns a String value that is made from count copies appended together. If count is 0, 75 | * T is the empty String is returned. 76 | * @param count number of copies to append 77 | */ 78 | repeat(count: number): string; 79 | 80 | /** 81 | * Returns true if the sequence of elements of searchString converted to a String is the 82 | * same as the corresponding elements of this object (converted to a String) starting at 83 | * position. Otherwise returns false. 84 | */ 85 | startsWith(searchString: string, position?: number): boolean; 86 | 87 | /** 88 | * Returns an HTML anchor element and sets the name attribute to the text value 89 | * @param name 90 | */ 91 | anchor(name: string): string; 92 | 93 | /** Returns a HTML element */ 94 | big(): string; 95 | 96 | /** Returns a HTML element */ 97 | blink(): string; 98 | 99 | /** Returns a HTML element */ 100 | bold(): string; 101 | 102 | /** Returns a HTML element */ 103 | fixed(): string 104 | 105 | /** Returns a HTML element and sets the color attribute value */ 106 | fontcolor(color: string): string 107 | 108 | /** Returns a HTML element and sets the size attribute value */ 109 | fontsize(size: number): string; 110 | 111 | /** Returns a HTML element and sets the size attribute value */ 112 | fontsize(size: string): string; 113 | 114 | /** Returns an HTML element */ 115 | italics(): string; 116 | 117 | /** Returns an HTML element and sets the href attribute value */ 118 | link(url: string): string; 119 | 120 | /** Returns a HTML element */ 121 | small(): string; 122 | 123 | /** Returns a HTML element */ 124 | strike(): string; 125 | 126 | /** Returns a HTML element */ 127 | sub(): string; 128 | 129 | /** Returns a HTML element */ 130 | sup(): string; 131 | 132 | /** 133 | * Shim for an ES6 iterable. Not intended for direct use by user code. 134 | */ 135 | "_es6-shim iterator_"(): IterableIteratorShim; 136 | } 137 | 138 | interface ArrayConstructor { 139 | /** 140 | * Creates an array from an array-like object. 141 | * @param arrayLike An array-like object to convert to an array. 142 | * @param mapfn A mapping function to call on every element of the array. 143 | * @param thisArg Value of 'this' used to invoke the mapfn. 144 | */ 145 | from(arrayLike: ArrayLike, mapfn: (v: T, k: number) => U, thisArg?: any): Array; 146 | 147 | /** 148 | * Creates an array from an iterable object. 149 | * @param iterable An iterable object to convert to an array. 150 | * @param mapfn A mapping function to call on every element of the array. 151 | * @param thisArg Value of 'this' used to invoke the mapfn. 152 | */ 153 | from(iterable: IterableShim, mapfn: (v: T, k: number) => U, thisArg?: any): Array; 154 | 155 | /** 156 | * Creates an array from an array-like object. 157 | * @param arrayLike An array-like object to convert to an array. 158 | */ 159 | from(arrayLike: ArrayLike): Array; 160 | 161 | /** 162 | * Creates an array from an iterable object. 163 | * @param iterable An iterable object to convert to an array. 164 | */ 165 | from(iterable: IterableShim): Array; 166 | 167 | /** 168 | * Returns a new array from a set of elements. 169 | * @param items A set of elements to include in the new array object. 170 | */ 171 | of(...items: T[]): Array; 172 | } 173 | 174 | interface Array { 175 | /** 176 | * Returns the value of the first element in the array where predicate is true, and undefined 177 | * otherwise. 178 | * @param predicate find calls predicate once for each element of the array, in ascending 179 | * order, until it finds one where predicate returns true. If such an element is found, find 180 | * immediately returns that element value. Otherwise, find returns undefined. 181 | * @param thisArg If provided, it will be used as the this value for each invocation of 182 | * predicate. If it is not provided, undefined is used instead. 183 | */ 184 | find(predicate: (value: T, index: number, obj: Array) => boolean, thisArg?: any): T; 185 | 186 | /** 187 | * Returns the index of the first element in the array where predicate is true, and undefined 188 | * otherwise. 189 | * @param predicate find calls predicate once for each element of the array, in ascending 190 | * order, until it finds one where predicate returns true. If such an element is found, find 191 | * immediately returns that element value. Otherwise, find returns undefined. 192 | * @param thisArg If provided, it will be used as the this value for each invocation of 193 | * predicate. If it is not provided, undefined is used instead. 194 | */ 195 | findIndex(predicate: (value: T) => boolean, thisArg?: any): number; 196 | 197 | /** 198 | * Returns the this object after filling the section identified by start and end with value 199 | * @param value value to fill array section with 200 | * @param start index to start filling the array at. If start is negative, it is treated as 201 | * length+start where length is the length of the array. 202 | * @param end index to stop filling the array at. If end is negative, it is treated as 203 | * length+end. 204 | */ 205 | fill(value: T, start?: number, end?: number): T[]; 206 | 207 | /** 208 | * Returns the this object after copying a section of the array identified by start and end 209 | * to the same array starting at position target 210 | * @param target If target is negative, it is treated as length+target where length is the 211 | * length of the array. 212 | * @param start If start is negative, it is treated as length+start. If end is negative, it 213 | * is treated as length+end. 214 | * @param end If not specified, length of the this object is used as its default value. 215 | */ 216 | copyWithin(target: number, start: number, end?: number): T[]; 217 | 218 | /** 219 | * Returns an array of key, value pairs for every entry in the array 220 | */ 221 | entries(): IterableIteratorShim<[number, T]>; 222 | 223 | /** 224 | * Returns an list of keys in the array 225 | */ 226 | keys(): IterableIteratorShim; 227 | 228 | /** 229 | * Returns an list of values in the array 230 | */ 231 | values(): IterableIteratorShim; 232 | 233 | /** 234 | * Shim for an ES6 iterable. Not intended for direct use by user code. 235 | */ 236 | "_es6-shim iterator_"(): IterableIteratorShim; 237 | } 238 | 239 | interface NumberConstructor { 240 | /** 241 | * The value of Number.EPSILON is the difference between 1 and the smallest value greater than 1 242 | * that is representable as a Number value, which is approximately: 243 | * 2.2204460492503130808472633361816 x 10‍−‍16. 244 | */ 245 | EPSILON: number; 246 | 247 | /** 248 | * Returns true if passed value is finite. 249 | * Unlike the global isFininte, Number.isFinite doesn't forcibly convert the parameter to a 250 | * number. Only finite values of the type number, result in true. 251 | * @param number A numeric value. 252 | */ 253 | isFinite(number: number): boolean; 254 | 255 | /** 256 | * Returns true if the value passed is an integer, false otherwise. 257 | * @param number A numeric value. 258 | */ 259 | isInteger(number: number): boolean; 260 | 261 | /** 262 | * Returns a Boolean value that indicates whether a value is the reserved value NaN (not a 263 | * number). Unlike the global isNaN(), Number.isNaN() doesn't forcefully convert the parameter 264 | * to a number. Only values of the type number, that are also NaN, result in true. 265 | * @param number A numeric value. 266 | */ 267 | isNaN(number: number): boolean; 268 | 269 | /** 270 | * Returns true if the value passed is a safe integer. 271 | * @param number A numeric value. 272 | */ 273 | isSafeInteger(number: number): boolean; 274 | 275 | /** 276 | * The value of the largest integer n such that n and n + 1 are both exactly representable as 277 | * a Number value. 278 | * The value of Number.MIN_SAFE_INTEGER is 9007199254740991 2^53 − 1. 279 | */ 280 | MAX_SAFE_INTEGER: number; 281 | 282 | /** 283 | * The value of the smallest integer n such that n and n − 1 are both exactly representable as 284 | * a Number value. 285 | * The value of Number.MIN_SAFE_INTEGER is −9007199254740991 (−(2^53 − 1)). 286 | */ 287 | MIN_SAFE_INTEGER: number; 288 | 289 | /** 290 | * Converts a string to a floating-point number. 291 | * @param string A string that contains a floating-point number. 292 | */ 293 | parseFloat(string: string): number; 294 | 295 | /** 296 | * Converts A string to an integer. 297 | * @param s A string to convert into a number. 298 | * @param radix A value between 2 and 36 that specifies the base of the number in numString. 299 | * If this argument is not supplied, strings with a prefix of '0x' are considered hexadecimal. 300 | * All other strings are considered decimal. 301 | */ 302 | parseInt(string: string, radix?: number): number; 303 | } 304 | 305 | interface ObjectConstructor { 306 | /** 307 | * Copy the values of all of the enumerable own properties from one or more source objects to a 308 | * target object. Returns the target object. 309 | * @param target The target object to copy to. 310 | * @param sources One or more source objects to copy properties from. 311 | */ 312 | assign(target: any, ...sources: any[]): any; 313 | 314 | /** 315 | * Returns true if the values are the same value, false otherwise. 316 | * @param value1 The first value. 317 | * @param value2 The second value. 318 | */ 319 | is(value1: any, value2: any): boolean; 320 | 321 | /** 322 | * Sets the prototype of a specified object o to object proto or null. Returns the object o. 323 | * @param o The object to change its prototype. 324 | * @param proto The value of the new prototype or null. 325 | * @remarks Requires `__proto__` support. 326 | */ 327 | setPrototypeOf(o: any, proto: any): any; 328 | } 329 | 330 | interface RegExp { 331 | /** 332 | * Returns a string indicating the flags of the regular expression in question. This field is read-only. 333 | * The characters in this string are sequenced and concatenated in the following order: 334 | * 335 | * - "g" for global 336 | * - "i" for ignoreCase 337 | * - "m" for multiline 338 | * - "u" for unicode 339 | * - "y" for sticky 340 | * 341 | * If no flags are set, the value is the empty string. 342 | */ 343 | flags: string; 344 | } 345 | 346 | interface Math { 347 | /** 348 | * Returns the number of leading zero bits in the 32-bit binary representation of a number. 349 | * @param x A numeric expression. 350 | */ 351 | clz32(x: number): number; 352 | 353 | /** 354 | * Returns the result of 32-bit multiplication of two numbers. 355 | * @param x First number 356 | * @param y Second number 357 | */ 358 | imul(x: number, y: number): number; 359 | 360 | /** 361 | * Returns the sign of the x, indicating whether x is positive, negative or zero. 362 | * @param x The numeric expression to test 363 | */ 364 | sign(x: number): number; 365 | 366 | /** 367 | * Returns the base 10 logarithm of a number. 368 | * @param x A numeric expression. 369 | */ 370 | log10(x: number): number; 371 | 372 | /** 373 | * Returns the base 2 logarithm of a number. 374 | * @param x A numeric expression. 375 | */ 376 | log2(x: number): number; 377 | 378 | /** 379 | * Returns the natural logarithm of 1 + x. 380 | * @param x A numeric expression. 381 | */ 382 | log1p(x: number): number; 383 | 384 | /** 385 | * Returns the result of (e^x - 1) of x (e raised to the power of x, where e is the base of 386 | * the natural logarithms). 387 | * @param x A numeric expression. 388 | */ 389 | expm1(x: number): number; 390 | 391 | /** 392 | * Returns the hyperbolic cosine of a number. 393 | * @param x A numeric expression that contains an angle measured in radians. 394 | */ 395 | cosh(x: number): number; 396 | 397 | /** 398 | * Returns the hyperbolic sine of a number. 399 | * @param x A numeric expression that contains an angle measured in radians. 400 | */ 401 | sinh(x: number): number; 402 | 403 | /** 404 | * Returns the hyperbolic tangent of a number. 405 | * @param x A numeric expression that contains an angle measured in radians. 406 | */ 407 | tanh(x: number): number; 408 | 409 | /** 410 | * Returns the inverse hyperbolic cosine of a number. 411 | * @param x A numeric expression that contains an angle measured in radians. 412 | */ 413 | acosh(x: number): number; 414 | 415 | /** 416 | * Returns the inverse hyperbolic sine of a number. 417 | * @param x A numeric expression that contains an angle measured in radians. 418 | */ 419 | asinh(x: number): number; 420 | 421 | /** 422 | * Returns the inverse hyperbolic tangent of a number. 423 | * @param x A numeric expression that contains an angle measured in radians. 424 | */ 425 | atanh(x: number): number; 426 | 427 | /** 428 | * Returns the square root of the sum of squares of its arguments. 429 | * @param values Values to compute the square root for. 430 | * If no arguments are passed, the result is +0. 431 | * If there is only one argument, the result is the absolute value. 432 | * If any argument is +Infinity or -Infinity, the result is +Infinity. 433 | * If any argument is NaN, the result is NaN. 434 | * If all arguments are either +0 or −0, the result is +0. 435 | */ 436 | hypot(...values: number[]): number; 437 | 438 | /** 439 | * Returns the integral part of the a numeric expression, x, removing any fractional digits. 440 | * If x is already an integer, the result is x. 441 | * @param x A numeric expression. 442 | */ 443 | trunc(x: number): number; 444 | 445 | /** 446 | * Returns the nearest single precision float representation of a number. 447 | * @param x A numeric expression. 448 | */ 449 | fround(x: number): number; 450 | 451 | /** 452 | * Returns an implementation-dependent approximation to the cube root of number. 453 | * @param x A numeric expression. 454 | */ 455 | cbrt(x: number): number; 456 | } 457 | 458 | interface PromiseLike { 459 | /** 460 | * Attaches callbacks for the resolution and/or rejection of the Promise. 461 | * @param onfulfilled The callback to execute when the Promise is resolved. 462 | * @param onrejected The callback to execute when the Promise is rejected. 463 | * @returns A Promise for the completion of which ever callback is executed. 464 | */ 465 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => TResult | PromiseLike): PromiseLike; 466 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => void): PromiseLike; 467 | } 468 | 469 | /** 470 | * Represents the completion of an asynchronous operation 471 | */ 472 | interface Promise { 473 | /** 474 | * Attaches callbacks for the resolution and/or rejection of the Promise. 475 | * @param onfulfilled The callback to execute when the Promise is resolved. 476 | * @param onrejected The callback to execute when the Promise is rejected. 477 | * @returns A Promise for the completion of which ever callback is executed. 478 | */ 479 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => TResult | PromiseLike): Promise; 480 | then(onfulfilled?: (value: T) => TResult | PromiseLike, onrejected?: (reason: any) => void): Promise; 481 | 482 | /** 483 | * Attaches a callback for only the rejection of the Promise. 484 | * @param onrejected The callback to execute when the Promise is rejected. 485 | * @returns A Promise for the completion of the callback. 486 | */ 487 | catch(onrejected?: (reason: any) => T | PromiseLike): Promise; 488 | catch(onrejected?: (reason: any) => void): Promise; 489 | } 490 | 491 | interface PromiseConstructor { 492 | /** 493 | * A reference to the prototype. 494 | */ 495 | prototype: Promise; 496 | 497 | /** 498 | * Creates a new Promise. 499 | * @param executor A callback used to initialize the promise. This callback is passed two arguments: 500 | * a resolve callback used resolve the promise with a value or the result of another promise, 501 | * and a reject callback used to reject the promise with a provided reason or error. 502 | */ 503 | new (executor: (resolve: (value?: T | PromiseLike) => void, reject: (reason?: any) => void) => void): Promise; 504 | 505 | /** 506 | * Creates a Promise that is resolved with an array of results when all of the provided Promises 507 | * resolve, or rejected when any Promise is rejected. 508 | * @param values An array of Promises. 509 | * @returns A new Promise. 510 | */ 511 | all(values: IterableShim>): Promise; 512 | 513 | /** 514 | * Creates a Promise that is resolved or rejected when any of the provided Promises are resolved 515 | * or rejected. 516 | * @param values An array of Promises. 517 | * @returns A new Promise. 518 | */ 519 | race(values: IterableShim>): Promise; 520 | 521 | /** 522 | * Creates a new rejected promise for the provided reason. 523 | * @param reason The reason the promise was rejected. 524 | * @returns A new rejected Promise. 525 | */ 526 | reject(reason: any): Promise; 527 | 528 | /** 529 | * Creates a new rejected promise for the provided reason. 530 | * @param reason The reason the promise was rejected. 531 | * @returns A new rejected Promise. 532 | */ 533 | reject(reason: any): Promise; 534 | 535 | /** 536 | * Creates a new resolved promise for the provided value. 537 | * @param value A promise. 538 | * @returns A promise whose internal state matches the provided promise. 539 | */ 540 | resolve(value: T | PromiseLike): Promise; 541 | 542 | /** 543 | * Creates a new resolved promise . 544 | * @returns A resolved promise. 545 | */ 546 | resolve(): Promise; 547 | } 548 | 549 | declare var Promise: PromiseConstructor; 550 | 551 | interface Map { 552 | clear(): void; 553 | delete(key: K): boolean; 554 | forEach(callbackfn: (value: V, index: K, map: Map) => void, thisArg?: any): void; 555 | get(key: K): V; 556 | has(key: K): boolean; 557 | set(key: K, value?: V): Map; 558 | size: number; 559 | entries(): IterableIteratorShim<[K, V]>; 560 | keys(): IterableIteratorShim; 561 | values(): IterableIteratorShim; 562 | } 563 | 564 | interface MapConstructor { 565 | new (): Map; 566 | new (iterable: IterableShim<[K, V]>): Map; 567 | prototype: Map; 568 | } 569 | 570 | declare var Map: MapConstructor; 571 | 572 | interface Set { 573 | add(value: T): Set; 574 | clear(): void; 575 | delete(value: T): boolean; 576 | forEach(callbackfn: (value: T, index: T, set: Set) => void, thisArg?: any): void; 577 | has(value: T): boolean; 578 | size: number; 579 | entries(): IterableIteratorShim<[T, T]>; 580 | keys(): IterableIteratorShim; 581 | values(): IterableIteratorShim; 582 | '_es6-shim iterator_'(): IterableIteratorShim; 583 | } 584 | 585 | interface SetConstructor { 586 | new (): Set; 587 | new (iterable: IterableShim): Set; 588 | prototype: Set; 589 | } 590 | 591 | declare var Set: SetConstructor; 592 | 593 | interface WeakMap { 594 | delete(key: K): boolean; 595 | get(key: K): V; 596 | has(key: K): boolean; 597 | set(key: K, value?: V): WeakMap; 598 | } 599 | 600 | interface WeakMapConstructor { 601 | new (): WeakMap; 602 | new (iterable: IterableShim<[K, V]>): WeakMap; 603 | prototype: WeakMap; 604 | } 605 | 606 | declare var WeakMap: WeakMapConstructor; 607 | 608 | interface WeakSet { 609 | add(value: T): WeakSet; 610 | delete(value: T): boolean; 611 | has(value: T): boolean; 612 | } 613 | 614 | interface WeakSetConstructor { 615 | new (): WeakSet; 616 | new (iterable: IterableShim): WeakSet; 617 | prototype: WeakSet; 618 | } 619 | 620 | declare var WeakSet: WeakSetConstructor; 621 | 622 | declare namespace Reflect { 623 | function apply(target: Function, thisArgument: any, argumentsList: ArrayLike): any; 624 | function construct(target: Function, argumentsList: ArrayLike): any; 625 | function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean; 626 | function deleteProperty(target: any, propertyKey: PropertyKey): boolean; 627 | function enumerate(target: any): IterableIteratorShim; 628 | function get(target: any, propertyKey: PropertyKey, receiver?: any): any; 629 | function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor; 630 | function getPrototypeOf(target: any): any; 631 | function has(target: any, propertyKey: PropertyKey): boolean; 632 | function isExtensible(target: any): boolean; 633 | function ownKeys(target: any): Array; 634 | function preventExtensions(target: any): boolean; 635 | function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean; 636 | function setPrototypeOf(target: any, proto: any): boolean; 637 | } 638 | 639 | declare module "es6-shim" { 640 | var String: StringConstructor; 641 | var Array: ArrayConstructor; 642 | var Number: NumberConstructor; 643 | var Math: Math; 644 | var Object: ObjectConstructor; 645 | var Map: MapConstructor; 646 | var Set: SetConstructor; 647 | var WeakMap: WeakMapConstructor; 648 | var WeakSet: WeakSetConstructor; 649 | var Promise: PromiseConstructor; 650 | namespace Reflect { 651 | function apply(target: Function, thisArgument: any, argumentsList: ArrayLike): any; 652 | function construct(target: Function, argumentsList: ArrayLike): any; 653 | function defineProperty(target: any, propertyKey: PropertyKey, attributes: PropertyDescriptor): boolean; 654 | function deleteProperty(target: any, propertyKey: PropertyKey): boolean; 655 | function enumerate(target: any): Iterator; 656 | function get(target: any, propertyKey: PropertyKey, receiver?: any): any; 657 | function getOwnPropertyDescriptor(target: any, propertyKey: PropertyKey): PropertyDescriptor; 658 | function getPrototypeOf(target: any): any; 659 | function has(target: any, propertyKey: PropertyKey): boolean; 660 | function isExtensible(target: any): boolean; 661 | function ownKeys(target: any): Array; 662 | function preventExtensions(target: any): boolean; 663 | function set(target: any, propertyKey: PropertyKey, value: any, receiver?: any): boolean; 664 | function setPrototypeOf(target: any, proto: any): boolean; 665 | } 666 | } -------------------------------------------------------------------------------- /typings/globals/es6-shim/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "resolution": "main", 3 | "tree": { 4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/9807d9b701f58be068cb07833d2b24235351d052/es6-shim/es6-shim.d.ts", 5 | "raw": "registry:dt/es6-shim#0.31.2+20160602141504", 6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/9807d9b701f58be068cb07833d2b24235351d052/es6-shim/es6-shim.d.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Ionic 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /www/vendor/chartist-plugin-legend.js: -------------------------------------------------------------------------------- 1 | (function (root, factory) { 2 | if (typeof define === 'function' && define.amd) { 3 | // AMD. Register as an anonymous module. 4 | define(['chartist'], function (chartist) { 5 | return (root.returnExportsGlobal = factory(chartist)); 6 | }); 7 | } else if (typeof exports === 'object') { 8 | // Node. Does not work with strict CommonJS, but 9 | // only CommonJS-like enviroments that support module.exports, 10 | // like Node. 11 | module.exports = factory(require('chartist')); 12 | } else { 13 | root['Chartist.plugins.legend'] = factory(root.Chartist); 14 | } 15 | }(this, function (Chartist) { 16 | /** 17 | * This Chartist plugin creates a legend to show next to the chart. 18 | * 19 | */ 20 | 'use strict'; 21 | 22 | var defaultOptions = { 23 | className: '', 24 | legendNames: false, 25 | clickable: true, 26 | onClick: null 27 | }; 28 | 29 | Chartist.plugins = Chartist.plugins || {}; 30 | 31 | Chartist.plugins.legend = function (options) { 32 | 33 | options = Chartist.extend({}, defaultOptions, options); 34 | 35 | return function legend(chart) { 36 | var existingLegendElement = chart.container.querySelector('.ct-legend'); 37 | if (existingLegendElement) { 38 | // Clear legend if already existing. 39 | existingLegendElement.parentNode.removeChild(existingLegendElement); 40 | } 41 | 42 | // Set a unique className for each series so that when a series is removed, 43 | // the other series still have the same color. 44 | if (options.clickable) { 45 | var newSeries = chart.data.series.map(function (series, seriesIndex) { 46 | if (typeof series !== 'object') { 47 | series = { 48 | value: series 49 | }; 50 | } 51 | 52 | series.className = series.className || chart.options.classNames.series + '-' + Chartist.alphaNumerate(seriesIndex); 53 | return series; 54 | }); 55 | chart.data.series = newSeries; 56 | } 57 | 58 | var legendElement = document.createElement('ul'), 59 | isPieChart = chart instanceof Chartist.Pie; 60 | legendElement.className = 'ct-legend'; 61 | if (chart instanceof Chartist.Pie) { 62 | legendElement.classList.add('ct-legend-inside'); 63 | } 64 | if (typeof options.className === 'string' && options.className.length > 0) { 65 | legendElement.classList.add(options.className); 66 | } 67 | 68 | var removedSeries = [], 69 | originalSeries = chart.data.series.slice(0); 70 | 71 | // Get the right array to use for generating the legend. 72 | var legendNames = chart.data.series, 73 | useLabels = isPieChart && chart.data.labels; 74 | if (useLabels) { 75 | var originalLabels = chart.data.labels.slice(0); 76 | legendNames = chart.data.labels; 77 | } 78 | legendNames = options.legendNames || legendNames; 79 | 80 | // Loop through all legends to set each name in a list item. 81 | legendNames.forEach(function (legend, i) { 82 | var li = document.createElement('li'); 83 | li.className = 'ct-series-' + i; 84 | li.setAttribute('data-legend', i); 85 | li.textContent = legend.name || legend; 86 | legendElement.appendChild(li); 87 | }); 88 | chart.container.appendChild(legendElement); 89 | 90 | if (options.clickable) { 91 | legendElement.addEventListener('click', function (e) { 92 | var li = e.target; 93 | if (li.parentNode !== legendElement || !li.hasAttribute('data-legend')) 94 | return; 95 | e.preventDefault(); 96 | 97 | var seriesIndex = parseInt(li.getAttribute('data-legend')), 98 | removedSeriesIndex = removedSeries.indexOf(seriesIndex); 99 | 100 | if (removedSeriesIndex > -1) { 101 | // Add to series again. 102 | removedSeries.splice(removedSeriesIndex, 1); 103 | li.classList.remove('inactive'); 104 | } else { 105 | // Remove from series, only if a minimum of one series is still visible. 106 | if (chart.data.series.length > 1) { 107 | removedSeries.push(seriesIndex); 108 | li.classList.add('inactive'); 109 | } 110 | } 111 | 112 | // Reset the series to original and remove each series that 113 | // is still removed again, to remain index order. 114 | var seriesCopy = originalSeries.slice(0); 115 | if (useLabels) { 116 | var labelsCopy = originalLabels.slice(0); 117 | } 118 | 119 | // Reverse sort the removedSeries to prevent removing the wrong index. 120 | removedSeries.sort().reverse(); 121 | 122 | removedSeries.forEach(function (series) { 123 | seriesCopy.splice(series, 1); 124 | if (useLabels) { 125 | labelsCopy.splice(series, 1); 126 | } 127 | }); 128 | 129 | if (options.onClick) { 130 | options.onClick(chart, e); 131 | } 132 | 133 | chart.data.series = seriesCopy; 134 | if (useLabels) { 135 | chart.data.labels = labelsCopy; 136 | } 137 | 138 | chart.update(); 139 | }); 140 | } 141 | 142 | }; 143 | 144 | }; 145 | 146 | return Chartist.plugins.legend; 147 | 148 | })); 149 | -------------------------------------------------------------------------------- /www/vendor/chartist.css: -------------------------------------------------------------------------------- 1 | .ct-label { 2 | fill: rgba(0, 0, 0, 0.4); 3 | color: rgba(0, 0, 0, 0.4); 4 | font-size: 0.75rem; 5 | line-height: 1; } 6 | 7 | .ct-chart-line .ct-label, .ct-chart-bar .ct-label { 8 | display: block; 9 | display: -webkit-box; 10 | display: -moz-box; 11 | display: -ms-flexbox; 12 | display: -webkit-flex; 13 | display: flex; } 14 | 15 | .ct-label.ct-horizontal.ct-start { 16 | -webkit-box-align: flex-end; 17 | -webkit-align-items: flex-end; 18 | -ms-flex-align: flex-end; 19 | align-items: flex-end; 20 | -webkit-box-pack: flex-start; 21 | -webkit-justify-content: flex-start; 22 | -ms-flex-pack: flex-start; 23 | justify-content: flex-start; 24 | text-align: left; 25 | text-anchor: start; } 26 | 27 | .ct-label.ct-horizontal.ct-end { 28 | -webkit-box-align: flex-start; 29 | -webkit-align-items: flex-start; 30 | -ms-flex-align: flex-start; 31 | align-items: flex-start; 32 | -webkit-box-pack: flex-start; 33 | -webkit-justify-content: flex-start; 34 | -ms-flex-pack: flex-start; 35 | justify-content: flex-start; 36 | text-align: left; 37 | text-anchor: start; } 38 | 39 | .ct-label.ct-vertical.ct-start { 40 | -webkit-box-align: flex-end; 41 | -webkit-align-items: flex-end; 42 | -ms-flex-align: flex-end; 43 | align-items: flex-end; 44 | -webkit-box-pack: flex-end; 45 | -webkit-justify-content: flex-end; 46 | -ms-flex-pack: flex-end; 47 | justify-content: flex-end; 48 | text-align: right; 49 | text-anchor: end; } 50 | 51 | .ct-label.ct-vertical.ct-end { 52 | -webkit-box-align: flex-end; 53 | -webkit-align-items: flex-end; 54 | -ms-flex-align: flex-end; 55 | align-items: flex-end; 56 | -webkit-box-pack: flex-start; 57 | -webkit-justify-content: flex-start; 58 | -ms-flex-pack: flex-start; 59 | justify-content: flex-start; 60 | text-align: left; 61 | text-anchor: start; } 62 | 63 | .ct-chart-bar .ct-label.ct-horizontal.ct-start { 64 | -webkit-box-align: flex-end; 65 | -webkit-align-items: flex-end; 66 | -ms-flex-align: flex-end; 67 | align-items: flex-end; 68 | -webkit-box-pack: center; 69 | -webkit-justify-content: center; 70 | -ms-flex-pack: center; 71 | justify-content: center; 72 | text-align: center; 73 | text-anchor: start; } 74 | 75 | .ct-chart-bar .ct-label.ct-horizontal.ct-end { 76 | -webkit-box-align: flex-start; 77 | -webkit-align-items: flex-start; 78 | -ms-flex-align: flex-start; 79 | align-items: flex-start; 80 | -webkit-box-pack: center; 81 | -webkit-justify-content: center; 82 | -ms-flex-pack: center; 83 | justify-content: center; 84 | text-align: center; 85 | text-anchor: start; } 86 | 87 | .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-start { 88 | -webkit-box-align: flex-end; 89 | -webkit-align-items: flex-end; 90 | -ms-flex-align: flex-end; 91 | align-items: flex-end; 92 | -webkit-box-pack: flex-start; 93 | -webkit-justify-content: flex-start; 94 | -ms-flex-pack: flex-start; 95 | justify-content: flex-start; 96 | text-align: left; 97 | text-anchor: start; } 98 | 99 | .ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end { 100 | -webkit-box-align: flex-start; 101 | -webkit-align-items: flex-start; 102 | -ms-flex-align: flex-start; 103 | align-items: flex-start; 104 | -webkit-box-pack: flex-start; 105 | -webkit-justify-content: flex-start; 106 | -ms-flex-pack: flex-start; 107 | justify-content: flex-start; 108 | text-align: left; 109 | text-anchor: start; } 110 | 111 | .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-start { 112 | -webkit-box-align: center; 113 | -webkit-align-items: center; 114 | -ms-flex-align: center; 115 | align-items: center; 116 | -webkit-box-pack: flex-end; 117 | -webkit-justify-content: flex-end; 118 | -ms-flex-pack: flex-end; 119 | justify-content: flex-end; 120 | text-align: right; 121 | text-anchor: end; } 122 | 123 | .ct-chart-bar.ct-horizontal-bars .ct-label.ct-vertical.ct-end { 124 | -webkit-box-align: center; 125 | -webkit-align-items: center; 126 | -ms-flex-align: center; 127 | align-items: center; 128 | -webkit-box-pack: flex-start; 129 | -webkit-justify-content: flex-start; 130 | -ms-flex-pack: flex-start; 131 | justify-content: flex-start; 132 | text-align: left; 133 | text-anchor: end; } 134 | 135 | .ct-grid { 136 | stroke: rgba(0, 0, 0, 0.2); 137 | stroke-width: 1px; 138 | stroke-dasharray: 2px; } 139 | 140 | .ct-point { 141 | stroke-width: 10px; 142 | stroke-linecap: round; } 143 | 144 | .ct-line { 145 | fill: none; 146 | stroke-width: 4px; } 147 | 148 | .ct-area { 149 | stroke: none; 150 | fill-opacity: 0.1; } 151 | 152 | .ct-bar { 153 | fill: none; 154 | stroke-width: 10px; } 155 | 156 | .ct-slice-donut { 157 | fill: none; 158 | stroke-width: 60px; } 159 | 160 | .ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut { 161 | stroke: #d70206; } 162 | .ct-series-a .ct-slice-pie, .ct-series-a .ct-area { 163 | fill: #d70206; } 164 | 165 | .ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut { 166 | stroke: #f05b4f; } 167 | .ct-series-b .ct-slice-pie, .ct-series-b .ct-area { 168 | fill: #f05b4f; } 169 | 170 | .ct-series-c .ct-point, .ct-series-c .ct-line, .ct-series-c .ct-bar, .ct-series-c .ct-slice-donut { 171 | stroke: #f4c63d; } 172 | .ct-series-c .ct-slice-pie, .ct-series-c .ct-area { 173 | fill: #f4c63d; } 174 | 175 | .ct-series-d .ct-point, .ct-series-d .ct-line, .ct-series-d .ct-bar, .ct-series-d .ct-slice-donut { 176 | stroke: #d17905; } 177 | .ct-series-d .ct-slice-pie, .ct-series-d .ct-area { 178 | fill: #d17905; } 179 | 180 | .ct-series-e .ct-point, .ct-series-e .ct-line, .ct-series-e .ct-bar, .ct-series-e .ct-slice-donut { 181 | stroke: #453d3f; } 182 | .ct-series-e .ct-slice-pie, .ct-series-e .ct-area { 183 | fill: #453d3f; } 184 | 185 | .ct-series-f .ct-point, .ct-series-f .ct-line, .ct-series-f .ct-bar, .ct-series-f .ct-slice-donut { 186 | stroke: #59922b; } 187 | .ct-series-f .ct-slice-pie, .ct-series-f .ct-area { 188 | fill: #59922b; } 189 | 190 | .ct-series-g .ct-point, .ct-series-g .ct-line, .ct-series-g .ct-bar, .ct-series-g .ct-slice-donut { 191 | stroke: #0544d3; } 192 | .ct-series-g .ct-slice-pie, .ct-series-g .ct-area { 193 | fill: #0544d3; } 194 | 195 | .ct-series-h .ct-point, .ct-series-h .ct-line, .ct-series-h .ct-bar, .ct-series-h .ct-slice-donut { 196 | stroke: #6b0392; } 197 | .ct-series-h .ct-slice-pie, .ct-series-h .ct-area { 198 | fill: #6b0392; } 199 | 200 | .ct-series-i .ct-point, .ct-series-i .ct-line, .ct-series-i .ct-bar, .ct-series-i .ct-slice-donut { 201 | stroke: #f05b4f; } 202 | .ct-series-i .ct-slice-pie, .ct-series-i .ct-area { 203 | fill: #f05b4f; } 204 | 205 | .ct-series-j .ct-point, .ct-series-j .ct-line, .ct-series-j .ct-bar, .ct-series-j .ct-slice-donut { 206 | stroke: #dda458; } 207 | .ct-series-j .ct-slice-pie, .ct-series-j .ct-area { 208 | fill: #dda458; } 209 | 210 | .ct-series-k .ct-point, .ct-series-k .ct-line, .ct-series-k .ct-bar, .ct-series-k .ct-slice-donut { 211 | stroke: #eacf7d; } 212 | .ct-series-k .ct-slice-pie, .ct-series-k .ct-area { 213 | fill: #eacf7d; } 214 | 215 | .ct-series-l .ct-point, .ct-series-l .ct-line, .ct-series-l .ct-bar, .ct-series-l .ct-slice-donut { 216 | stroke: #86797d; } 217 | .ct-series-l .ct-slice-pie, .ct-series-l .ct-area { 218 | fill: #86797d; } 219 | 220 | .ct-series-m .ct-point, .ct-series-m .ct-line, .ct-series-m .ct-bar, .ct-series-m .ct-slice-donut { 221 | stroke: #b2c326; } 222 | .ct-series-m .ct-slice-pie, .ct-series-m .ct-area { 223 | fill: #b2c326; } 224 | 225 | .ct-series-n .ct-point, .ct-series-n .ct-line, .ct-series-n .ct-bar, .ct-series-n .ct-slice-donut { 226 | stroke: #6188e2; } 227 | .ct-series-n .ct-slice-pie, .ct-series-n .ct-area { 228 | fill: #6188e2; } 229 | 230 | .ct-series-o .ct-point, .ct-series-o .ct-line, .ct-series-o .ct-bar, .ct-series-o .ct-slice-donut { 231 | stroke: #a748ca; } 232 | .ct-series-o .ct-slice-pie, .ct-series-o .ct-area { 233 | fill: #a748ca; } 234 | 235 | .ct-square { 236 | display: block; 237 | position: relative; 238 | width: 100%; } 239 | .ct-square:before { 240 | display: block; 241 | float: left; 242 | content: ""; 243 | width: 0; 244 | height: 0; 245 | padding-bottom: 100%; } 246 | .ct-square:after { 247 | content: ""; 248 | display: table; 249 | clear: both; } 250 | .ct-square > svg { 251 | display: block; 252 | position: absolute; 253 | top: 0; 254 | left: 0; } 255 | 256 | .ct-minor-second { 257 | display: block; 258 | position: relative; 259 | width: 100%; } 260 | .ct-minor-second:before { 261 | display: block; 262 | float: left; 263 | content: ""; 264 | width: 0; 265 | height: 0; 266 | padding-bottom: 93.75%; } 267 | .ct-minor-second:after { 268 | content: ""; 269 | display: table; 270 | clear: both; } 271 | .ct-minor-second > svg { 272 | display: block; 273 | position: absolute; 274 | top: 0; 275 | left: 0; } 276 | 277 | .ct-major-second { 278 | display: block; 279 | position: relative; 280 | width: 100%; } 281 | .ct-major-second:before { 282 | display: block; 283 | float: left; 284 | content: ""; 285 | width: 0; 286 | height: 0; 287 | padding-bottom: 88.8888888889%; } 288 | .ct-major-second:after { 289 | content: ""; 290 | display: table; 291 | clear: both; } 292 | .ct-major-second > svg { 293 | display: block; 294 | position: absolute; 295 | top: 0; 296 | left: 0; } 297 | 298 | .ct-minor-third { 299 | display: block; 300 | position: relative; 301 | width: 100%; } 302 | .ct-minor-third:before { 303 | display: block; 304 | float: left; 305 | content: ""; 306 | width: 0; 307 | height: 0; 308 | padding-bottom: 83.3333333333%; } 309 | .ct-minor-third:after { 310 | content: ""; 311 | display: table; 312 | clear: both; } 313 | .ct-minor-third > svg { 314 | display: block; 315 | position: absolute; 316 | top: 0; 317 | left: 0; } 318 | 319 | .ct-major-third { 320 | display: block; 321 | position: relative; 322 | width: 100%; } 323 | .ct-major-third:before { 324 | display: block; 325 | float: left; 326 | content: ""; 327 | width: 0; 328 | height: 0; 329 | padding-bottom: 80%; } 330 | .ct-major-third:after { 331 | content: ""; 332 | display: table; 333 | clear: both; } 334 | .ct-major-third > svg { 335 | display: block; 336 | position: absolute; 337 | top: 0; 338 | left: 0; } 339 | 340 | .ct-perfect-fourth { 341 | display: block; 342 | position: relative; 343 | width: 100%; } 344 | .ct-perfect-fourth:before { 345 | display: block; 346 | float: left; 347 | content: ""; 348 | width: 0; 349 | height: 0; 350 | padding-bottom: 75%; } 351 | .ct-perfect-fourth:after { 352 | content: ""; 353 | display: table; 354 | clear: both; } 355 | .ct-perfect-fourth > svg { 356 | display: block; 357 | position: absolute; 358 | top: 0; 359 | left: 0; } 360 | 361 | .ct-perfect-fifth { 362 | display: block; 363 | position: relative; 364 | width: 100%; } 365 | .ct-perfect-fifth:before { 366 | display: block; 367 | float: left; 368 | content: ""; 369 | width: 0; 370 | height: 0; 371 | padding-bottom: 66.6666666667%; } 372 | .ct-perfect-fifth:after { 373 | content: ""; 374 | display: table; 375 | clear: both; } 376 | .ct-perfect-fifth > svg { 377 | display: block; 378 | position: absolute; 379 | top: 0; 380 | left: 0; } 381 | 382 | .ct-minor-sixth { 383 | display: block; 384 | position: relative; 385 | width: 100%; } 386 | .ct-minor-sixth:before { 387 | display: block; 388 | float: left; 389 | content: ""; 390 | width: 0; 391 | height: 0; 392 | padding-bottom: 62.5%; } 393 | .ct-minor-sixth:after { 394 | content: ""; 395 | display: table; 396 | clear: both; } 397 | .ct-minor-sixth > svg { 398 | display: block; 399 | position: absolute; 400 | top: 0; 401 | left: 0; } 402 | 403 | .ct-golden-section { 404 | display: block; 405 | position: relative; 406 | width: 100%; } 407 | .ct-golden-section:before { 408 | display: block; 409 | float: left; 410 | content: ""; 411 | width: 0; 412 | height: 0; 413 | padding-bottom: 61.804697157%; } 414 | .ct-golden-section:after { 415 | content: ""; 416 | display: table; 417 | clear: both; } 418 | .ct-golden-section > svg { 419 | display: block; 420 | position: absolute; 421 | top: 0; 422 | left: 0; } 423 | 424 | .ct-major-sixth { 425 | display: block; 426 | position: relative; 427 | width: 100%; } 428 | .ct-major-sixth:before { 429 | display: block; 430 | float: left; 431 | content: ""; 432 | width: 0; 433 | height: 0; 434 | padding-bottom: 60%; } 435 | .ct-major-sixth:after { 436 | content: ""; 437 | display: table; 438 | clear: both; } 439 | .ct-major-sixth > svg { 440 | display: block; 441 | position: absolute; 442 | top: 0; 443 | left: 0; } 444 | 445 | .ct-minor-seventh { 446 | display: block; 447 | position: relative; 448 | width: 100%; } 449 | .ct-minor-seventh:before { 450 | display: block; 451 | float: left; 452 | content: ""; 453 | width: 0; 454 | height: 0; 455 | padding-bottom: 56.25%; } 456 | .ct-minor-seventh:after { 457 | content: ""; 458 | display: table; 459 | clear: both; } 460 | .ct-minor-seventh > svg { 461 | display: block; 462 | position: absolute; 463 | top: 0; 464 | left: 0; } 465 | 466 | .ct-major-seventh { 467 | display: block; 468 | position: relative; 469 | width: 100%; } 470 | .ct-major-seventh:before { 471 | display: block; 472 | float: left; 473 | content: ""; 474 | width: 0; 475 | height: 0; 476 | padding-bottom: 53.3333333333%; } 477 | .ct-major-seventh:after { 478 | content: ""; 479 | display: table; 480 | clear: both; } 481 | .ct-major-seventh > svg { 482 | display: block; 483 | position: absolute; 484 | top: 0; 485 | left: 0; } 486 | 487 | .ct-octave { 488 | display: block; 489 | position: relative; 490 | width: 100%; } 491 | .ct-octave:before { 492 | display: block; 493 | float: left; 494 | content: ""; 495 | width: 0; 496 | height: 0; 497 | padding-bottom: 50%; } 498 | .ct-octave:after { 499 | content: ""; 500 | display: table; 501 | clear: both; } 502 | .ct-octave > svg { 503 | display: block; 504 | position: absolute; 505 | top: 0; 506 | left: 0; } 507 | 508 | .ct-major-tenth { 509 | display: block; 510 | position: relative; 511 | width: 100%; } 512 | .ct-major-tenth:before { 513 | display: block; 514 | float: left; 515 | content: ""; 516 | width: 0; 517 | height: 0; 518 | padding-bottom: 40%; } 519 | .ct-major-tenth:after { 520 | content: ""; 521 | display: table; 522 | clear: both; } 523 | .ct-major-tenth > svg { 524 | display: block; 525 | position: absolute; 526 | top: 0; 527 | left: 0; } 528 | 529 | .ct-major-eleventh { 530 | display: block; 531 | position: relative; 532 | width: 100%; } 533 | .ct-major-eleventh:before { 534 | display: block; 535 | float: left; 536 | content: ""; 537 | width: 0; 538 | height: 0; 539 | padding-bottom: 37.5%; } 540 | .ct-major-eleventh:after { 541 | content: ""; 542 | display: table; 543 | clear: both; } 544 | .ct-major-eleventh > svg { 545 | display: block; 546 | position: absolute; 547 | top: 0; 548 | left: 0; } 549 | 550 | .ct-major-twelfth { 551 | display: block; 552 | position: relative; 553 | width: 100%; } 554 | .ct-major-twelfth:before { 555 | display: block; 556 | float: left; 557 | content: ""; 558 | width: 0; 559 | height: 0; 560 | padding-bottom: 33.3333333333%; } 561 | .ct-major-twelfth:after { 562 | content: ""; 563 | display: table; 564 | clear: both; } 565 | .ct-major-twelfth > svg { 566 | display: block; 567 | position: absolute; 568 | top: 0; 569 | left: 0; } 570 | 571 | .ct-double-octave { 572 | display: block; 573 | position: relative; 574 | width: 100%; } 575 | .ct-double-octave:before { 576 | display: block; 577 | float: left; 578 | content: ""; 579 | width: 0; 580 | height: 0; 581 | padding-bottom: 25%; } 582 | .ct-double-octave:after { 583 | content: ""; 584 | display: table; 585 | clear: both; } 586 | .ct-double-octave > svg { 587 | display: block; 588 | position: absolute; 589 | top: 0; 590 | left: 0; } 591 | 592 | /*# sourceMappingURL=chartist.css.map */ --------------------------------------------------------------------------------