chart.js

/**
 * Created by veena on 6/28/17.
 */
import React, {Component} from 'react';
import Tile from './tile';
import '../../styles/tilepanel.css';
import Grid from 'react-bootstrap/lib/Grid';
import {
    Position,
    Tooltip,
} from "@blueprintjs/core";
import {connect} from 'react-redux';

import {
    Cell,
} from "@blueprintjs/table";
import {BaseExample} from "@blueprintjs/docs";
const {
    // main component
    Chart,
    // graphs
    Bars, Cloud, Dots, Labels, Lines, Pies, RadialLines, Ticks, Title,
    // wrappers
    Layer, Animate, Transform, Handlers,
    // helpers
    DropShadow, Gradient, helpers
} = require('rumble-charts');
const series = [{
    name: 'Canon Camera',
    data: [1, 2, 3]
}, {
    name: 'Nikon Camera',
    data: [5, 7, 11]
}, {
    name: 'Polaroid Camera',
    data: [13, 17, 19]
}];
const lineSeries = [{
    name: 'Hyundai Elantra',
    data: [1, 2, 3]
}, {
    name: 'Honda civic',
    data: [5, 7, 11]
}, {
    name: 'Toyota corolla',
    data: [13, 17, 19]
}];
const areaSeries = [{data: [1, 3]}, {data: [5, 11]}, {data: [13, 19]}];

class Tilepanel extends Component {
    constructor() {
        super();
        this.state = {
            detailsVisible: false,
            showType: 'camera',
            oldkey: ''
        }
    }

    onClickHandler = (type, key) => {
        if (this.state.oldkey!=key){
          this.setState({
            detailsVisible: true,
            oldkey: key
          });
        } else {
          this.setState({
            detailsVisible: !this.state.detailsVisible
          });
        }
        if (type=='none'){
          this.setState({
            detailsVisible: false
          });
        }

        this.setState({
          showType: type
        });



    }

    render() {
        const renderTimezone = (row: number) => <Cell>{'Name'}</Cell>;
        const renderOffset = (row: number) => <Cell>{'Name2'}</Cell>;

        let tiles;
        let alltiles = this.props.tiles;
        if ((this.props.range[0] != null) && (this.props.range[1] != null)){

          var isoDate1 = new Date(this.props.range[0]);
          var isoDate2 = new Date(this.props.range[1]);
          alltiles = alltiles.filter((el)=>{
            let current = new Date(el.date)
            return ((current>=isoDate1) && (current<=isoDate2))

          })

        }
        if (this.props.adminMode){
          tiles  = alltiles.map((tile, index) => {

              return (
                  <Tile
                      key={tile.reportId}
                      id={tile.reportId}
                      title={tile.title}
                      description={tile.description}
                      name={tile.name}
                      owner={tile.owner}
                      time={tile.time}
                      date={tile.date}
                      type={tile.type}
                      typeicon={tile.typeicon}
                      datatype={tile.datatype}
                      summary={tile.summary}
                      shared={tile.shared}
                      views={tile.views}
                      downloads={tile.downloads}
                      published={tile.published}
                      onClickHandler={(type, key)=>this.onClickHandler(type, key)}
                  />
              );
          });
        } else {
          tiles  = alltiles.filter((el)=>{return !el.published}).map((tile, index) => {
              return (
                  <Tile
                      key={tile.reportId}
                      id={tile.reportId}
                      title={tile.title}
                      description={tile.description}
                      name={tile.name}
                      owner={tile.owner}
                      time={tile.time}
                      date={tile.date}
                      type={tile.type}
                      typeicon={tile.typeicon}
                      datatype={tile.datatype}
                      summary={tile.summary}
                      shared={tile.shared}
                      views={tile.views}
                      downloads={tile.downloads}
                      published={tile.published}
                      onClickHandler={(type, key)=>this.onClickHandler(type, key)}
                  />
              );
          });
        }

        return (
            <div className="tile-root-container">
                    {
                    this.state.detailsVisible
                        ? <div id="container" onClick={(e) => {
                        this.onClickHandler();
                    }}>

                              { this.state.detailsVisible ? <div className="chart-row">
                                      <div  style={{fontFamily: 'sans-serif', fontSize: '0.8em'}}>
                                          <Chart width={600} height={200} series={series} minY={0}>
                                              <Title position='center bottom' style={{textAnchor: 'middle'}}>
                                                  {props => <text>
                                                      {'Walmart / Amazon / Bestbuy Camera Price Comparison '}
                                                  </text>}
                                              </Title>
                                              <Layer width='60%' height='80%' position='top center'>
                                                  <Ticks
                                                      axis='y'
                                                      lineLength='100%'
                                                      lineVisible={true}
                                                      lineStyle={{stroke: 'lightgray'}}
                                                      labelStyle={{
                                                          textAnchor: 'end',
                                                          dominantBaseline: 'middle',
                                                          fill: 'lightgray'
                                                      }}
                                                      labelAttributes={{x: -5}}
                                                  />
                                                  <Ticks
                                                      axis='x'
                                                      label={({index, props}) => props.series[index].name}
                                                      labelStyle={{
                                                          textAnchor: 'middle',
                                                          dominantBaseline: 'text-before-edge',
                                                          fill: 'lightgray'
                                                      }}
                                                      labelAttributes={{y: 3}}
                                                  />
                                                  <Bars
                                                      groupPadding='40%'
                                                      innerPadding='0.3%'
                                                  />
                                              </Layer>
                                          </Chart>
                                      </div>
                                      <div className="tableContainer">
                                        <table className="headstyle">
                                            <thead >
                                            <tr>
                                                <th>Item</th>
                                                <th>Price</th>
                                                <th>Online Seller</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>Canon camera</td>
                                                <td>$1000</td>
                                                <td>Walmart.com</td>
                                            </tr>
                                            <tr>
                                                <td>Polaroid Camera</td>
                                                <td>$1050</td>
                                                <td>Amazon.com</td>
                                            </tr>
                                            <tr>
                                                <td>Nikon camera</td>
                                                <td>1110</td>
                                                <td>Bestbuy.com</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                      </div>
                                  </div>

                                :null}


                                { this.state.showType=='car' ? <div className="chart-row">
                                          <Chart width={600} height={200} series={lineSeries} minY={0}>
                                              <Title position='center bottom' style={{textAnchor: 'middle'}}>
                                                  {props => <text>
                                                      {'Carfax Price Comparison '}
                                                  </text>}
                                              </Title>
                                              <Layer width='80%' height='80%' position='middle center'>
                                                  <Ticks
                                                      axis='y'
                                                      ticks={{maxTicks: 4}}
                                                      tickVisible={({tick}) => tick.y > 0}
                                                      lineLength='100%'
                                                      lineVisible={true}
                                                      lineStyle={{stroke: 'lightgray'}}
                                                      labelStyle={{
                                                          textAnchor: 'end',
                                                          alignmentBaseline: 'middle',
                                                          fontSize: '0.85em',
                                                          fontFamily: 'sans-serif',
                                                          fill: 'lightgray'
                                                      }}
                                                      labelAttributes={{x: -5}}
                                                  />
                                                  <Ticks
                                                      axis='x'
                                                      label={({props, index}) => props.series[index].name}
                                                      labelStyle={{
                                                          textAnchor: 'middle',
                                                          alignmentBaseline: 'before-edge',
                                                          fontSize: '0.85em',
                                                          fontFamily: 'sans-serif',
                                                          fill: 'lightgray'
                                                      }}
                                                      labelAttributes={{y: 3}}
                                                  />
                                                  <Bars
                                                      groupPadding='3%'
                                                      innerPadding='0.5%'
                                                  />
                                                  <Lines />
                                                  <Dots />
                                                  <Labels
                                                      label={({point}) => Math.round(point.y)}
                                                      dotStyle={{
                                                          alignmentBaseline: 'after-edge',
                                                          textAnchor: 'middle',
                                                          fontFamily: 'sans-serif'
                                                      }}
                                                      labelAttributes={{y: -4}}
                                                  />
                                              </Layer>
                                          </Chart>
                                      <div className="tableContainer">

                                        <table className="headstyle">
                                            <thead >
                                            <tr>
                                                <th>Item</th>
                                                <th>Price</th>
                                                <th>mileage</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>Toyota Corolla</td>
                                                <td>$11000</td>
                                                <td>100000 miles</td>
                                            </tr>
                                            <tr>
                                                <td>Honda Civic</td>
                                                <td>$11050</td>
                                                <td>120000 miles</td>
                                            </tr>
                                            <tr>
                                                <td>Hyundai elantra</td>
                                                <td>11110</td>
                                                <td>150000 miles</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                      </div>

                                  </div>
                              :null}

                    </div>
                    : null
                    }
                {tiles}
            </div>
        );
    }
}


const mapStateToProps = state => {
    return {
        adminMode: state.adminMode
    };
};

export default connect(mapStateToProps)(Tilepanel);