Skip to content

ctor ordering; fixed height for charts #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 5, 2018
Merged

ctor ordering; fixed height for charts #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions lib/charts/charts.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,37 @@ import '../framework/framework.dart';
import '../ui/elements.dart';

abstract class LineChart<T> {
final CoreElement parent;
CoreElement chartElement;
math.Point<int> dim;

final SetStateMixin _state = new SetStateMixin();
T data;

LineChart(this.parent) {
parent.element.style.position = 'relative';

window.onResize.listen((Event e) => _updateSize());
_windowResizeSubscription =
window.onResize.listen((Event e) => _updateSize());
Timer.run(_updateSize);

chartElement = parent.add(div()
..layoutVertical()
..flex());

chartElement.setInnerHtml('''
<svg viewBox="0 0 500 100">
<svg viewBox="0 0 500 $fixedHeight">
<polyline fill="none" stroke="#0074d9" stroke-width="2" points=""/>
</svg>
''');
}

// These charts are currently fixed at 98px high (100px less a top and bottom
// 1px border).
static const int fixedHeight = 98;

StreamSubscription<Event> _windowResizeSubscription;

final CoreElement parent;
CoreElement chartElement;
math.Point<int> dim;

final SetStateMixin _state = new SetStateMixin();
T data;

void _updateSize() {
if (!isMounted) {
return;
Expand All @@ -45,7 +52,7 @@ abstract class LineChart<T> {
}

final Element svgChild = chartElement.element.children.first;
svgChild.setAttribute('viewBox', '0 0 ${rect.width} ${rect.height}');
svgChild.setAttribute('viewBox', '0 0 ${rect.width} $fixedHeight');
dim = new math.Point<int>(rect.width.toInt(), rect.height.toInt());

if (data != null) {
Expand All @@ -69,4 +76,8 @@ abstract class LineChart<T> {
bool get isMounted {
return chartElement.element.parent != null;
}

void dispose() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is being called, but I presume that's because we currently never actually destroy this (only move it out/in the DOM when changing pages)?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it's not called, but having it makes it slightly more clear that the object needs cleanup.

I'll add an issue for onMounted() and onUnmounted() lifecycle events (as useful, but not an immediate concern).

_windowResizeSubscription?.cancel();
}
}
6 changes: 3 additions & 3 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ import 'utils.dart';
// the UI on re-activate

class PerfToolFramework extends Framework {
StatusItem isolateSelectStatus;
PSelect isolateSelect;

PerfToolFramework() {
setGlobal(ServiceConnectionManager, new ServiceConnectionManager());

Expand All @@ -44,6 +41,9 @@ class PerfToolFramework extends Framework {
initTestingModel();
}

StatusItem isolateSelectStatus;
PSelect isolateSelect;

void initGlobalUI() {
final CoreElement mainNav =
new CoreElement.from(querySelector('#main-nav'));
Expand Down
4 changes: 2 additions & 2 deletions lib/performance/performance.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,13 +203,13 @@ class PerformanceScreen extends Screen {
}

class CpuChart extends LineChart<CpuTracker> {
CoreElement usageLabel;

CpuChart(CoreElement parent) : super(parent) {
usageLabel = parent.add(div(c: 'perf-label'));
usageLabel.element.style.right = '0';
}

CoreElement usageLabel;

@override
void update(CpuTracker data) {
if (data.samples.isEmpty || dim == null) {
Expand Down
6 changes: 4 additions & 2 deletions lib/tables.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class Table<T> extends Object with SetStateMixin {

final CoreElement element;
final bool _isVirtual;

// Whether to reverse the display of data. This is to allow appending data
// to this.rows quickly (using .add()) while still supporting new data being
// inserted at the top.
Expand All @@ -42,6 +43,7 @@ class Table<T> extends Object with SetStateMixin {

List<Column<T>> columns = <Column<T>>[];
List<T> data;

int get rowCount => data?.length ?? 0;

Column<T> _sortColumn;
Expand Down Expand Up @@ -451,11 +453,11 @@ class Table<T> extends Object with SetStateMixin {
}

abstract class Column<T> {
Column(this.title, {this.wide = false});

final String title;
final bool wide;

Column(this.title, {this.wide = false});

String get cssClass => null;

bool get numeric => false;
Expand Down
24 changes: 12 additions & 12 deletions lib/timeline/fps.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ import '../charts/charts.dart';
import '../ui/elements.dart';

class FramesChart extends LineChart<FramesTracker> {
CoreElement fpsLabel;
CoreElement lastFrameLabel;

FramesChart(CoreElement parent) : super(parent) {
fpsLabel = parent.add(div(c: 'perf-label'));
fpsLabel.element.style.left = '0';
Expand All @@ -27,6 +24,9 @@ class FramesChart extends LineChart<FramesTracker> {
lastFrameLabel.element.style.textAlign = '-webkit-right';
}

CoreElement fpsLabel;
CoreElement lastFrameLabel;

@override
void update(FramesTracker data) {
if (dim == null) {
Expand Down Expand Up @@ -84,13 +84,6 @@ class FramesChart extends LineChart<FramesTracker> {
}

class FramesTracker {
static const int kMaxFrames = 60;

VmService service;
final StreamController<Null> _changeController =
new StreamController<Null>.broadcast();
List<FrameInfo> samples = <FrameInfo>[];

FramesTracker(this.service) {
service.onExtensionEvent.listen((Event e) {
if (e.extensionKind == 'Flutter.Frame') {
Expand All @@ -100,6 +93,13 @@ class FramesTracker {
});
}

static const int kMaxFrames = 60;

VmService service;
final StreamController<Null> _changeController =
new StreamController<Null>.broadcast();
List<FrameInfo> samples = <FrameInfo>[];

bool get hasConnection => service != null;

Stream<Null> get onChange => _changeController.stream;
Expand Down Expand Up @@ -151,10 +151,10 @@ class FramesTracker {
}

class FrameInfo {
static const double kTargetMaxFrameTimeMs = 1000.0 / 60;

FrameInfo(this.number, this.elapsedMs, this.startTimeMs);

static const double kTargetMaxFrameTimeMs = 1000.0 / 60;

static FrameInfo from(Map<dynamic, dynamic> data) {
return new FrameInfo(
data['number'], data['elapsed'] / 1000, data['startTime'] / 1000);
Expand Down
3 changes: 2 additions & 1 deletion test/tables_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,8 +122,9 @@ int getApproximatelyFirstRenderedDataIndex(Table<TestData> table) {
}

class TestData {
String message;
TestData(this.message);

final String message;
}

class TestColumn extends Column<TestData> {
Expand Down