Merge pull request #8 from shortedapp/feature/dashboard

Feature/dashboard

package.json

@@ -4,8 +4,9 @@
   "version": "1.0.0",
   "author": "Ben Ebsworth <ben.ebsworth@gmail.com>",
   "dependencies": {
-    "antd": "^3.8.1",
+    "antd": "^3.8.2",
     "babel-plugin-styled-components": "^1.5.1",
+    "fs": "0.0.1-security",
     "gatsby": "next",
     "gatsby-cli": "^1.1.58",
     "gatsby-plugin-react-helmet": "next",
@@ -16,8 +17,8 @@
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-helmet": "^5.2.0",
+    "react-sparklines": "^1.7.0",
     "react-transition-group": "^2.4.0",
-    "recharts": "^1.1.0",
     "styled-components": "^3.4.2",
     "victory": "^30.2.0"
   },

src/components/Logo/style.js

@@ -21,4 +21,5 @@ export const LogoTextWrapper = styled.span`
     color: ${props => (props.color ? props.color : 'gray')};
     background: ${props => props.background};
     margin-bottom: 10px;
+    align-self: center;
 `;

src/theme-context.js

@@ -0,0 +1,50 @@
+import React from 'react';
+export const themes = {
+    light: {
+        name: 'light',
+        style: {
+            color: 'black',
+            textTitleColor: 'black',
+            textSubTitleColor: 'black',
+            textColor: 'black',
+            background: 'white',
+            widgetBorder: 'white',
+            widgetBackgroundColor: 'white',
+            widgetRowBackgroundColor: 'white',
+            widgetRowBorderColor: 'gray',
+            graphBackground: '#e7e7e7',
+            fill: 'white',
+            stroke: 'black',
+            upStroke: 'green',
+            downStroke: 'red',
+            buttonSelected: '#5fa0dd',
+            buttonUnselected: '#7d7d7d',
+            axisColor: 'black',
+        },
+    },
+    dark: {
+        name: 'dark',
+        style: {
+            color: 'white',
+            textTitleColor: 'white',
+            textSubTitleColor: 'white',
+            textColor: 'white',
+            background: '#161616',
+            widgetBorderColor: '#1C1C1C',
+            widgetBackgroundColor: '#1F1F1F',
+            widgetRowBackgroundColor: '#646464',
+            widgetRowBorderColor: 'gray',
+            graphBackground: '#1F1F1F',
+            stroke: 'white',
+            upStroke: 'green',
+            downStroke: 'red',
+            buttonSelected: '#1890ff',
+            buttonUnselected: '#001529',
+            axisColor: 'white',
+        },
+    },
+};
+
+export const ThemeContext = React.createContext(
+    themes.dark, // default value
+);

src/views/alerts/components/BasicGraph/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+    VictoryChart,
+    VictoryAxis,
+    VictoryLabel,
+    VictoryContainer,
+    VictoryGroup,
+    VictoryVoronoiContainer,
+    VictoryTooltip,
+    VictoryLine,
+    VictoryScatter,
+} from 'victory';
+import { ThemeContext } from '../../../../theme-context';
+import { Sparklines, SparklinesLine } from 'react-sparklines';
+import {Wrapper, Header, Chart} from './style';
+
+/**
+ * LegendCompanyMarketCap
+ *
+ */
+class BasicGraph extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    getTickValues() {
+        return [
+            new Date(2002, 1, 1),
+            new Date(2017, 1, 1),
+            new Date(2018, 1, 1),
+        ];
+    }
+
+    render() {
+        const spark_data = this.props.data.map((value) => value.y)
+        const minValue = Math.min(...spark_data)
+        const maxValue = Math.max(...spark_data)
+        if (this.props.victory) {
+            return (
+            <ThemeContext.Consumer>
+                {theme => (
+                <Wrapper>
+                    <Chart>
+                        <VictoryGroup
+                            padding={{top: 0, left: 40, right: 20, bottom: 0}}
+                            height={90}
+                            width={580}
+                            containerComponent={
+                                <VictoryVoronoiContainer
+                                    voronoiDimension="x"
+                                    radius={5}
+                                    padding={5}
+
+                                />
+                              }
+                            >
+                            <VictoryLine
+                                labelComponent={<VictoryTooltip />}
+                                labels={(d) => d.y}
+                                padding={{top: 0, left: 40, right: 20, bottom:0}}
+                                data={this.props.data}
+                                style={{
+                                    data: {
+                                        stroke: this.props.changeDirection ? theme.downStroke : theme.upStroke,
+                                        strokeWidth: 3,
+                                    },
+                                }}
+                            />
+                            <VictoryScatter
+                                labelComponent={<VictoryTooltip />}
+                                labels={(d) => d.y}
+                                data={this.props.data}
+                                size={(datum) => (datum.y === minValue || datum.y === maxValue) ? 5 : 0}
+                                style={{ data: {
+                                    fill: this.props.changeDirection ?  theme.downStroke : theme.upStroke
+                                }}}
+                            />
+                        </VictoryGroup>
+                    </Chart>
+                </Wrapper>)}
+            </ThemeContext.Consumer>)
+        } else if (this.props.spark) {
+            const spark_data = this.props.data.map((value) => value.y)
+            console.log(spark_data)
+            return (
+                <Wrapper>
+                    <Chart>
+                        <Sparklines data={spark_data} limit={20} width={200} height={100} margin={5}>
+                        <SparklinesLine color="blue" />
+                        </Sparklines>
+                    </Chart>
+                </Wrapper>
+            )
+        }
+    }
+}
+
+export default BasicGraph;

src/views/alerts/components/BasicGraph/style.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+    background: transparent;
+    border-radius: 5px;
+    display: flex;
+    height: 130px;
+
+`
+export const Header = styled.div`
+    grid-area: header;
+    padding-top: 3px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+`;
+export const Chart = styled.div`
+    grid-area: chart;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    height: 120px;
+    width: 300px;
+`;

src/views/alerts/components/List/index.jsx

@@ -6,7 +6,7 @@ import UnAuthorized from '../../../../components/UnAuthorized';
 const List = props => (
     <Wrapper>
         {props.data ? props.data.map(row => (
-            <Row data={row} />
+            <Row theme={props.theme} {...row} />
         )) : <UnAuthorized />}
     </Wrapper>
 );

src/views/alerts/components/ListHeader/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ThemeContext } from '../../../../theme-context';
+import {
+    Wrapper,
+    Name,
+    Code,
+    Percentage,
+    MarketCap,
+    IndicatorWrapper,
+} from './style';
+
+/**
+ * Renders a given row in the alert & anomalies widget.
+ */
+const ListHeader = props => (
+    <ThemeContext.Consumer>
+        { theme =>
+            <Wrapper {...theme} >
+                <Code>Code</Code>
+                <Name>Name</Name>
+                <Percentage>Change</Percentage>
+                <IndicatorWrapper></IndicatorWrapper>
+                <MarketCap>Market Cap</MarketCap>
+            </Wrapper>
+        }
+    </ThemeContext.Consumer>
+);
+
+export default ListHeader;

src/views/alerts/components/ListHeader/style.js

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+    display: grid;
+    @media only screen and (min-width: 1024px) {
+        grid-template-columns: 90px 1fr 1fr 100px 70px 1fr;
+        grid-template-areas:
+            'code name name percentage indicator graph';
+    };
+    @media only screen and (min-width: 1280px) {
+        grid-template-columns: 90px 1fr 130px 200px 1fr;
+        grid-template-areas:
+            'code name percentage indicator graph';
+    };
+    margin: 6px;
+    margin-left: 7px;
+    margin-right: 7px;
+    height: 50px;
+    background: #e2e2e2;
+    background: ${props => props.background};
+    padding-top: 4px;
+    padding-bottom: 4px;
+    font-size: 25px;
+`;
+export const MarketCap = styled.div`
+    grid-area: graph;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    text-align: center;
+    width: 300px;
+`
+export const Name = styled.div`
+    grid-area: name;
+    display: flex;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    text-align: center;
+    font-family: Avenir Next, sans-serif;
+`;
+
+export const Code = styled.div`
+    grid-area: code;
+    display: flex;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    text-align: center;
+    padding-left: 10px;
+    .code {
+        background-color: gray;
+        width: 60px;
+        height: 45px;
+        display: flex;
+        font-size: 21px;
+
+        font-family: Avenir Next, sans-serif;
+        flex-direction: column;
+        justify-content: center;
+        vertical-align: middle;
+        text-align: center;
+        margin-left: 5px;
+    }
+`;
+export const Percentage = styled.div`
+    grid-area: percentage;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    text-align: center;
+`;
+
+export const IndicatorWrapper = styled.div`
+    grid-area: indicator;
+    display: flex;
+    align-self: center;
+    flex-direction: column;
+    text-align: center;
+`;
+

src/views/alerts/components/Row/index.jsx

@@ -1,8 +1,46 @@
 import React from 'react';
-import { Wrapper } from './style';
+import BasicGraph from '../BasicGraph';
+import { ThemeContext } from '../../../../theme-context';
+import {
+    Wrapper,
+    Name,
+    Code,
+    Percentage,
+    IndicatorWrapper,
+    IndicatorUp,
+    IndicatorDown,
+    PercentageChanged,
+    PercentageCurrent,
+} from './style';
 
-const Row = (props) => (<Wrapper>
-    row
-</Wrapper>)
+/**
+ * Renders a given row in the alert & anomalies widget.
+ */
+const Row = props => (
+    <ThemeContext.Consumer>
+        { theme => { console.log(theme); return (
+
+        <Wrapper {...theme} >
+            <Code>
+                <div className="code">{props.code}</div>
+            </Code>
+            <Name>{props.name}</Name>
+            <Percentage>
+                <PercentageCurrent>{props.current}%</PercentageCurrent>
+                <PercentageChanged value={props.changed}>
+                    {props.changed}%
+                </PercentageChanged>
+            </Percentage>
+            <IndicatorWrapper>
+                {props.changed > 0 ? <IndicatorUp /> : <IndicatorDown />}
+            </IndicatorWrapper>
+            <BasicGraph
+                victory
+                changeDirection={props.changed > 0}
+                theme={theme}
+                data={props.recent_history} />
+        </Wrapper>)}}
+    </ThemeContext.Consumer>
+);
 
-export default Row;
+export default Row;