Merge pull request #5 from adwulfran/typescript

typescript services

app/services/auth-services/auth.services.js

@@ -0,0 +1,3 @@
+export const Auth = {
+    isLogged : Boolean
+}

app/services/echarts-services/echarts.services.ts

@@ -0,0 +1,266 @@
+
+import * as echarts from 'echarts';
+export const EchartsService = (raw_data:any) => {
+
+    // to avoid error : There is a chart instance already initialized on the dom
+    // @ts-ignore
+    let myChart = echarts.getInstanceByDom(document.getElementById('main')); // get some words DOM node has echarts instance.
+    if (myChart == null) {// If not, it is initialized.
+         // @ts-ignore
+        myChart = echarts.init(document.getElementById('main'));
+    }
+
+    var upColor = '#00da3c';
+    var downColor = '#ec0000';
+    function splitData(rawData:any) {
+        var categoryData = [];
+        var values = [];
+        var volumes = [];
+        for (var i = 0; i < rawData.length; i++) {
+            categoryData.push(rawData[i].splice(0, 1)[0]);
+            values.push(rawData[i]);
+            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
+        }
+
+        return {
+            categoryData: categoryData,
+            values: values,
+            volumes: volumes
+        };
+    }
+
+    function calculateMA(dayCount:any, data:any) {
+        var result = [];
+        for (var i = 0, len = data.values.length; i < len; i++) {
+            if (i < dayCount) {
+                result.push('-');
+                continue;
+            }
+            var sum = 0;
+            for (var j = 0; j < dayCount; j++) {
+                sum += data.values[i - j][1];
+            }
+            result.push(+(sum / dayCount).toFixed(3));
+        }
+        //return result;
+        return ''
+    }
+
+    var data = splitData(raw_data);
+    var option = {
+        backgroundColor: '#fff',
+        animation: false,
+        legend: {
+            bottom: 10,
+            left: 'center',
+            //@ts-ignore
+            data: [],
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross'
+            },
+            backgroundColor: 'rgba(245, 245, 245, 0.8)',
+            borderWidth: 1,
+            borderColor: '#ccc',
+            padding: 10,
+            textStyle: {
+                color: '#000'
+            },
+            position: function (pos:number, params:any, el:any, elRect:any, size:any) {
+                var obj = { top: 10 };
+                // @ts-ignore
+                obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
+                return obj;
+            }
+            // extraCssText: 'width: 170px'
+        },
+        axisPointer: {
+            link: { xAxisIndex: 'all' },
+            label: {
+                backgroundColor: 'rgb(98, 0, 238)'
+            }
+        },
+        toolbox: {
+            feature: {
+                dataZoom: {
+                    yAxisIndex: false
+                },
+                brush: {
+                    type: ['lineX', 'clear']
+                }
+            }
+        },
+        brush: {
+            xAxisIndex: 'all',
+            brushLink: 'all',
+            outOfBrush: {
+                colorAlpha: 0.1
+            }
+        },
+        visualMap: {
+            show: false,
+            seriesIndex: 5,
+            dimension: 2,
+            pieces: [{
+                value: 1,
+                color: downColor
+            }, {
+                value: -1,
+                color: upColor
+            }]
+        },
+        grid: [
+            {
+                left: '10%',
+                right: '8%',
+                height: '50%'
+            },
+            {
+                left: '10%',
+                right: '8%',
+                top: '63%',
+                height: '16%'
+            }
+        ],
+        xAxis: [
+            {
+                type: 'category',
+                data: data.categoryData,
+                scale: true,
+                boundaryGap: false,
+                axisLine: { onZero: false },
+                splitLine: { show: false },
+                splitNumber: 20,
+                min: 'dataMin',
+                max: 'dataMax',
+                axisPointer: {
+                    z: 100
+                }
+            },
+            {
+                type: 'category',
+                gridIndex: 1,
+                data: data.categoryData,
+                scale: true,
+                boundaryGap: false,
+                axisLine: { onZero: false },
+                axisTick: { show: false },
+                splitLine: { show: false },
+                axisLabel: { show: false },
+                splitNumber: 20,
+                min: 'dataMin',
+                max: 'dataMax'
+            }
+        ],
+        yAxis: [
+            {
+                scale: true,
+                splitArea: {
+                    show: true
+                }
+            },
+            {
+                scale: true,
+                gridIndex: 1,
+                splitNumber: 2,
+                axisLabel: { show: false },
+                axisLine: { show: false },
+                axisTick: { show: false },
+                splitLine: { show: false }
+            }
+        ],
+        dataZoom: [
+            {
+                type: 'inside',
+                xAxisIndex: [0, 1],
+                start: 80,
+                end: 100
+            },
+            {
+                show: true,
+                xAxisIndex: [0, 1],
+                type: 'slider',
+                top: '85%',
+                start: 80,
+                end: 100
+            }
+        ],
+        series: [
+            {
+                name: 'btc-usd',
+                type: 'candlestick',
+                data: data.values,
+                itemStyle: {
+                    color: upColor,
+                    color0: downColor,
+                     // @ts-ignore
+                    borderColor:null,
+                     // @ts-ignore
+                    borderColor0: null
+                },
+                tooltip: {
+                    formatter: function (param:any) {
+                        param = param[0];
+                        return [
+                            'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
+                            'Open: ' + param.data[0] + '<br/>',
+                            'Close: ' + param.data[1] + '<br/>',
+                            'Lowest: ' + param.data[2] + '<br/>',
+                            'Highest: ' + param.data[3] + '<br/>'
+                        ].join('');
+                    }
+                }
+            },
+            {
+                name: 'MA5',
+                type: 'line',
+                //   data: calculateMA(5, data),
+                smooth: true,
+                lineStyle: {
+                    opacity: 0.5
+                }
+            },
+            {
+                name: 'MA10',
+                type: 'line',
+                //  data: calculateMA(10, data),
+                smooth: true,
+                lineStyle: {
+                    opacity: 0.5
+                }
+            },
+            {
+                //    name: 'MA20',
+                type: 'line',
+                //   data: calculateMA(20, data),
+                smooth: true,
+                lineStyle: {
+                    opacity: 0.5
+                }
+            },
+            {
+                name: 'MA30',
+                type: 'line',
+                data: calculateMA(30, data),
+                smooth: true,
+                lineStyle: {
+                    opacity: 0.5
+                }
+            },
+            {
+                name: 'Volume',
+                type: 'bar',
+                xAxisIndex: 1,
+                yAxisIndex: 1,
+                data: data.volumes
+            }
+        ]
+    }
+     // @ts-ignore
+    myChart.setOption(option, true);
+
+
+
+}

app/services/http-services/transaction.service.ts

@@ -0,0 +1,8 @@
+export const TransactionService = (period:string) => {
+    const url = 'https://www.bitstamp.net/api/v2/ohlc/btcusd/?step='+period+'&limit=1000';
+    return fetch(url, { method: "GET"})
+        .then((resp) => resp.json())
+        .then(function (data) {
+            return data
+        })
+}