Made charts resizeable (9bde94d1) · Commits · MEC - Multi-access Edge Computing / ETSI MEC Sandbox

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

+87 −54

Original line number	Diff line number	Diff line
		@@ -14,6 +14,7 @@ import IDCLineChart from './idc-line-chart';
		import IDCGraph from './idc-graph';
		import IDCAppsView from './idc-apps-view';
		import IDSelect from '../components/helper-components/id-select';
		import ResizeableContainer from './resizeable-container';

		import {
		idlog
		@@ -151,9 +152,9 @@ const DASHBOARD_VIEWS_LIST = [VIEW_NAME_NONE, HIERARCHY_VIEW, APPS_VIEW, LATENCY

		const ViewForName = (
		{
		keyForSvg,
		apps,
		colorRange,
		width,
		min,
		max,
		data,
		@@ -175,18 +176,26 @@ const ViewForName = (
		switch(viewName) {
		case HIERARCHY_VIEW:
		return (
		<ResizeableContainer key={keyForSvg}>
		{(width, height) => (
		<IDCGraph
		keyForSvg={keyForSvg}
		width={width}
		height={600}
		/>
		height={height}
		/>)}
		</ResizeableContainer>
		);
		case APPS_VIEW:
		return (
		<ResizeableContainer key={keyForSvg}>
		{
		(width, height) => (
		<IDCAppsView
		keyForSvg={keyForSvg}
		apps={apps}
		colorRange={colorRange}
		width={width}
		height={600}
		height={height}
		data={data}
		series={series}
		startTime={startTime}
		@@ -199,15 +208,22 @@ const ViewForName = (
		}}
		displayEdgeLabels={displayEdgeLabels}
		/>
		)
		}
		</ResizeableContainer>

		);
		case LATENCY_VIEW:
		return (
		<ResizeableContainer key={keyForSvg}>
		{(width, height) => (
		<IDCLineChart
		keyForSvg={keyForSvg}
		data={dataPoints}
		series={series}
		startTime={startTime}
		mobilityEvents={mobilityEvents}
		width={width} height={600}
		width={width} height={height}
		destinations={appIds}
		colorRange={colorRange}
		selectedSource={selectedSource}
		@@ -216,15 +232,23 @@ const ViewForName = (
		max={max}
		colorForApp={colorForApp}
		/>
		)
		}
		</ResizeableContainer>

		);
		case THROUGHPUT_VIEW:
		return (
		<ResizeableContainer key={keyForSvg}>
		{
		(width, height) => (
		<IDCLineChart
		keyForSvg={keyForSvg}
		data={dataPoints}
		series={series}
		startTime={startTime}
		mobilityEvents={mobilityEvents}
		width={width} height={600}
		width={width} height={height}
		destinations={appIds}
		colorRange={colorRange}
		selectedSource={selectedSource}
		@@ -233,6 +257,9 @@ const ViewForName = (
		max={max}
		colorForApp={colorForApp}
		/>
		)
		}
		</ResizeableContainer>
		);
		default:
		return null;
		@@ -322,6 +349,8 @@ class DashboardContainer extends Component {
		constructor(props) {
		super(props);

		this.keyForSvg = 0;

		this.state = {
		configurationType: null,
		view1Name: APPS_VIEW,
		@@ -383,6 +412,7 @@ class DashboardContainer extends Component {
		}

		render() {
		this.keyForSvg++;
		const root = this.getRoot();
		const nodes = root.descendants();

		@@ -468,7 +498,9 @@ class DashboardContainer extends Component {
		}

		const view1 = (

		<ViewForName
		keyForSvg={this.keyForSvg}
		apps={apps}
		colorRange={colorRange}
		width={width1}
		@@ -489,6 +521,7 @@ class DashboardContainer extends Component {

		const view2 = (
		<ViewForName
		keyForSvg={this.keyForSvg}
		apps={apps}
		colorRange={colorRange}
		width={width2}
		@@ -529,8 +562,7 @@ class DashboardContainer extends Component {
		/>

		<Grid>

		<GridCell span={span1} style={{paddingRight: 10}}>
		<GridCell span={span1} style={{paddingRight: 10}} className='chartContainer'>
		<Elevation z={2}
		style={{padding: 10}}
		>
		@@ -538,7 +570,7 @@ class DashboardContainer extends Component {
		</Elevation>
		</GridCell>

		<GridCell span={span1} style={{marginLeft: -10, paddingLeft: 10}}>
		<GridCell span={span1} style={{marginLeft: -10, paddingLeft: 10}} className='chartContainer'>
		<Elevation z={2}
		style={{padding: 10}}
		>
		@@ -557,7 +589,8 @@ const mapStateToProps = state => {
		displayedScenario: state.exec.displayedScenario,
		epochs: state.exec.metrics.epochs,
		sourceNodeSelected: state.exec.metrics.sourceNodeSelected,
		dataTypeSelected: state.exec.metrics.dataTypeSelected
		dataTypeSelected: state.exec.metrics.dataTypeSelected,
		eventCreationMode: state.exec.eventCreationMode
		};
		};

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

+2 −2

Original line number	Diff line number	Diff line
		@@ -23,7 +23,7 @@ import { updateObject } from '../../util/object-util';
		import MobilityEventPane from './mobility-event-pane';
		import NetworkCharacteristicsEventPane from './network-characteristics-event-pane';

		import { uiExecChangeCurrentEvent, MOBILITY_EVENT, NETWORK_CHARACTERISTICS_EVENT } from '../../state/ui';
		import { uiExecChangeCurrentEvent, MOBILITY_EVENT, NETWORK_CHARACTERISTICS_EVENT, PAGE_EXPERIMENTAL_EXECUTE } from '../../state/ui';
		import {
		execChangeSelectedScenarioElement,
		execUEs,
		@@ -116,7 +116,7 @@ class EventCreationPane extends Component {
		}

		render() {
		if (this.props.page !== PAGE_EXECUTE) { return null; }
		if (this.props.page !== PAGE_EXECUTE && this.props.page !== PAGE_EXPERIMENTAL_EXECUTE) { return null; }

		return (
		<div style={{padding: 10}}>

js-apps/meep-frontend/src/js/containers/idc-apps-view.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -105,6 +105,7 @@ const unitsForDataType = type => {

		const IDCAppsView = (
		{
		keyForSvg,
		apps,
		colorRange,
		selectedSource,
		@@ -178,6 +179,7 @@ const IDCAppsView = (

		return (
		<svg
		key={keyForSvg}
		height={height}
		width={width}
		>

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

+6 −4

Original line number	Diff line number	Diff line
		@@ -22,10 +22,12 @@ import { LATENCY_METRICS, THROUGHPUT_METRICS } from '../meep-constants';
		// };

		const notNull = x => x;
		const IDCLineChart = props => {
		const IDCLineChart = (props) => {
		const keyForSvg=props.keyForSvg;
		let width = props.width;

		const margin = {top: 20, right: 40, bottom: 30, left: 60};
		const width = props.width; // - margin.left - margin.right;
		// const width = props.width; // - margin.left - margin.right;
		const height = props.height; // - margin.top - margin.bottom;

		const maxForKey = series => key => d3.max(series[key], p => p.value);
		@@ -101,7 +103,6 @@ const IDCLineChart = props => {

		const chartTitle = chartTitleForType(props.dataType);


		const axisWidthOffset = 12;
		const meX = d => x(new Date(d.timestamp)) + axisWidthOffset;

		@@ -167,8 +168,9 @@ const IDCLineChart = props => {

		return (
		<svg
		key={keyForSvg}
		height={height}
		width={width}
		width={'100%'}
		>
		<>
		<g

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

0 → 100644

+35 −0

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

		export default class ResizeableContainer extends React.Component {

		constructor(props) {
		super(props);
		this.state = {
		width: 500,
		height: 500
		};

		this.sizingCallback = element => {
		if (element) {
		const width = element.getBoundingClientRect().width;
		const height = element.getBoundingClientRect().height;
		this.setState({
		height: height,
		width: width
		});
		}
		};
		}

		render() {
		return (
		<>
		<div
		ref={this.sizingCallback}
		>
		{this.props.children(this.state.width, this.state.height)}
		</div>
		</>
		);
		}
		}
		No newline at end of file