-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
show sparkline-like charts next to resource metrics
- Loading branch information
Joe Bowers
committed
Feb 29, 2016
1 parent
fa0e2d0
commit 7ef80f3
Showing
10 changed files
with
282 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
src/app/frontend/common/components/sparkline/sparkline.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!-- | ||
| Copyright 2015 Google Inc. All Rights Reserved. | ||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| --> | ||
|
|
||
| <svg viewBox="0,0 1,1" | ||
| preserveAspectRatio="none" | ||
| class="kd-sparkline"> | ||
| <polygon | ||
| ng-attr-points="0,1 {{::sparklineCtrl.polygonPoints()}} 1,1" | ||
| class="kd-sparkline-series"/> | ||
| </svg> |
51 changes: 51 additions & 0 deletions
51
src/app/frontend/common/components/sparkline/sparkline_controller.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| // Copyright 2015 Google Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| /** | ||
| * @final | ||
| */ | ||
| export default class SparklineController { | ||
| /** | ||
| * Constructs sparkline controller. | ||
| * @ngInject | ||
| */ | ||
| constructor() { | ||
| /** | ||
| * An array of {backendAPI.MetricResult} objects. The timestamp | ||
| * values of each object must be unique, and value must be greater | ||
| * than or equal to zero. | ||
| * @export {!Array<!backendApi.MetricResult>} Initialized from the scope. | ||
| */ | ||
| this.timeseries; | ||
| } | ||
|
|
||
| /** | ||
| * Formats the underlying series suitable for display as an SVG polygon. | ||
| * @return string | ||
| * @export | ||
| */ | ||
| polygonPoints() { | ||
| const series = this.timeseries.map(({timestamp, value}) => [Date.parse(timestamp), value]); | ||
| const sorted = series.slice().sort((a, b) => a[0] - b[0]); | ||
| const xShift = Math.min(...sorted.map((pt) => pt[0])); | ||
| const shifted = sorted.map(([x, y]) => [x - xShift, y]); | ||
| const xScale = Math.max(...shifted.map((pt) => pt[0])) || 1; | ||
| const yScale = Math.max(...shifted.map((pt) => pt[1])) || 1; | ||
| const scaled = shifted.map(([x, y]) => [x / xScale, y / yScale]); | ||
|
|
||
| // Invert Y because SVG Y=0 is at the top, and we want low values | ||
| // of Y to be closer to the bottom of the graphic | ||
| return scaled.map(([x, y]) => `${x},${(1 - y)}`).join(' '); | ||
| } | ||
| } |
30 changes: 30 additions & 0 deletions
30
src/app/frontend/common/components/sparkline/sparkline_directive.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // Copyright 2015 Google Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| import SparklineController from './sparkline_controller'; | ||
|
|
||
| /** | ||
| * Returns directive definition for sparkline. | ||
| * @return {!angular.Directive} | ||
| */ | ||
| export default function sparklineDirective() { | ||
| return { | ||
| controller: SparklineController, | ||
| controllerAs: 'sparklineCtrl', | ||
| templateUrl: 'common/components/sparkline/sparkline.html', | ||
| templateNamespace: 'svg', | ||
| scope: {}, | ||
| bindToController: {'timeseries': '='}, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
src/test/frontend/common/components/sparkline/sparkline_controller_test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| // Copyright 2015 Google Inc. All Rights Reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| import SparklineController from 'common/components/sparkline/sparkline_controller'; | ||
| import componentsModule from 'common/components/components_module'; | ||
|
|
||
| describe('Sparkline controller', () => { | ||
| /** | ||
| * @type {!SparklineController} | ||
| */ | ||
| let ctrl; | ||
|
|
||
| beforeEach(() => { | ||
| angular.mock.module(componentsModule.name); | ||
|
|
||
| angular.mock.inject(($controller) => { ctrl = $controller(SparklineController); }); | ||
| }); | ||
|
|
||
| it('should produce no points with an empty series', () => { | ||
| // given | ||
| ctrl.timeseries = []; | ||
|
|
||
| // then | ||
| expect(ctrl.polygonPoints()).toBe(''); | ||
| }); | ||
|
|
||
| it('should shift and scale times such that the minimum time is zero and the maximum time is 1', | ||
| () => { | ||
| // given | ||
| ctrl.timeseries = [ | ||
| {timestamp: '1976-01-15T00:00:00Z', value: 1}, | ||
| {timestamp: '2026-01-15T00:00:00Z', value: 1}, | ||
| ]; | ||
|
|
||
| // then | ||
| expect(ctrl.polygonPoints()).toBe('0,0 1,0'); | ||
| }); | ||
|
|
||
| it('should handle zero values and times without throwing an exception', () => { | ||
| // given | ||
| ctrl.timeseries = [ | ||
| {timestamp: '1970-01-01T00:00:00Z', value: 0}, | ||
| ]; | ||
|
|
||
| // then | ||
| expect(ctrl.polygonPoints()).toBe('0,1'); | ||
| }); | ||
|
|
||
| it('should scale values to <= 1 and invert them', () => { | ||
| // given | ||
| ctrl.timeseries = [ | ||
| {timestamp: '1976-01-15T10:00:00Z', value: 10}, | ||
| {timestamp: '1976-01-15T10:00:10Z', value: 1}, | ||
| ]; | ||
|
|
||
| // then | ||
| expect(ctrl.polygonPoints()).toBe('0,0 1,0.9'); | ||
| }); | ||
|
|
||
| it('should sort a time series by time', () => { | ||
| // given | ||
| ctrl.timeseries = [ | ||
| {timestamp: '1976-01-15T10:00:10Z', value: 1}, | ||
| {timestamp: '1976-01-15T10:00:00Z', value: 10}, | ||
| ]; | ||
|
|
||
| // then | ||
| expect(ctrl.polygonPoints()).toBe('0,0 1,0.9'); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters