Commit 41ae2abf authored by Francis Renaud's avatar Francis Renaud
Browse files

Added grid in chart view

parent 69ee711a

js-apps/meep-frontend/src/js/components/helper-components/nc-group.js

+0 −21
Original line number Diff line number Diff line
@@ -221,27 +221,6 @@ const SingleColumnLayout = (props) => { 
  );

};



const LineLayout = (props) => {

  return (

    <div>

      <Grid>

        <GridCell span="3">

          {props.latencyComponent}

        </GridCell>

        <GridCell span="3">

          {props.latencyVariationComponent}

        </GridCell>

        <GridCell span="3">

          {props.packetLossComponent}

        </GridCell>

        <GridCell span="3">

          {props.throughputComponent}

        </GridCell>

      </Grid>

    </div>

  );

};



const NCLayout = (props) => {

  switch(props.layout) {

  case MEEP_COMPONENT_SINGLE_COLUMN_LAYOUT:

js-apps/meep-frontend/src/js/containers/dashboard-container.js

+3 −2
Original line number Diff line number Diff line
@@ -452,8 +452,9 @@ class DashboardContainer extends Component { 
  }



  fetchMetrics() {

    const startTime = moment().utc().add(-7, 'seconds').format(TIME_FORMAT);

    const stopTime = moment().utc().add(-6, 'seconds').format(TIME_FORMAT);

    const delta = -7;

    const startTime = moment().utc().add(delta, 'seconds').format(TIME_FORMAT);

    const stopTime = moment().utc().add(delta + 1, 'seconds').format(TIME_FORMAT);

    return axios.get(`${metricsBasePath}/metrics?startTime=${startTime}&stopTime=${stopTime}`)

      .then(res => {

js-apps/meep-frontend/src/js/containers/exec/mobility-event-pane.js

+1 −3
Original line number Diff line number Diff line
@@ -22,9 +22,7 @@ import CancelApplyPair from '../../components/helper-components/cancel-apply-pai 


import {

  EXEC_EVT_MOB_TARGET,

  EXEC_EVT_MOB_DEST,

  EVENT_CREATION_PANE_TABLE_LAYOUT,

  EVENT_CREATION_PANE_LINE_LAYOUT

  EXEC_EVT_MOB_DEST

} from '../../meep-constants';



import {

js-apps/meep-frontend/src/js/containers/idc-line-chart.js

+26 −6
Original line number Diff line number Diff line
@@ -10,7 +10,7 @@ 
import _ from 'lodash';

import * as d3 from 'd3';

import React from 'react';

import {Axis, axisPropsFromTickScale, LEFT, BOTTOM} from 'react-d3-axis';

import {Axis, axisPropsFromTickScale, LEFT, BOTTOM, TOP} from 'react-d3-axis';

import { LATENCY_METRICS, THROUGHPUT_METRICS } from '../meep-constants';



// const Axis = props => {
@@ -25,6 +25,7 @@ const notNull = x => x; 
const IDCLineChart = (props) => {

  const keyForSvg=props.keyForSvg;

  let width = props.width;

  let yClipping = 45;



  const margin = {top: 20, right: 40, bottom: 30, left: 60};

  // const width = props.width; // - margin.left - margin.right;
@@ -44,7 +45,7 @@ const IDCLineChart = (props) => { 
  };

  const timeRange = d3.extent(flattenSeries(props.series), d => new Date(d.timestamp));

  const x = d3.scaleTime().domain(timeRange).range([0, width]);

  const y = d3.scaleLinear().domain(yRange).range([height - 45, 0]);

  const y = d3.scaleLinear().domain(yRange).range([height - yClipping, 0]);

  const z = d3.scaleOrdinal().range(colorRange);



  // Compute data lines
@@ -176,18 +177,37 @@ const IDCLineChart = (props) => { 
      <g

        transform={`translate(${margin.left}, ${margin.top})`}

      >

        <Axis {...axisPropsFromTickScale(y, 10)} style={{orient: LEFT}}/>

        <Axis 

          {...axisPropsFromTickScale(y, 10)} 

          style={{

            orient: LEFT, tickSizeInner: -width,

            strokeColor: '#BBBBBB'

          }}/>

      </g>



      <g

        transform={`translate(${margin.left}, ${height - margin.top})`}

      >

        <Axis {...axisPropsFromTickScale(x, 10)} style={{orient: BOTTOM}}/>

        <Axis

          {...axisPropsFromTickScale(x, 10)}

          style={{

            orient: BOTTOM,

            tickSizeInner: -(height - yClipping),

            strokeColor: '#BBBBBB'

          }}/>



        {/* <Axis

          {...axisPropsFromTickScale(x, 10)}

          style={{

            orient: TOP,

            tickSizeInner: -(height - 2*yClipping),

            strokeColor: '#BBBBBB'

          }}/> */}

      </g>



      <text

        className='chartTitle'

        y={0 + margin.top + 10}

        y={0 + margin.top -5 }

        x={width / 2}

        style={{textAnchor: 'middle'}}

      >

js-apps/meep-frontend/src/js/containers/resizeable-container.js

+1 −1
Original line number Diff line number Diff line 
import React, { Component }  from 'react';

import React from 'react';



export default class ResizeableContainer extends React.Component {