github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 09:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shrink timeline height and make years fade out (#2778)

Browse Source 
* Shrink timeline height to 55px and make years fade out as hours fade in.

* Address the comments.
This commit is contained in:
Filip Barl
2017-08-01 14:17:03 +02:00
committed by GitHub
parent bc7ad7a78a
commit f9e9a8ae4d
4 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/app/scripts/components/time-travel-timeline.js
View File

@@ -8,6 +8,7 @@ import { scaleUtc } from 'd3-scale';
import { event as d3Event, select } from 'd3-selection';
import { Motion, spring } from 'react-motion';
import { linearGradientValue } from '../utils/math-utils';
import { trackMixpanelEvent } from '../utils/tracking-utils';
import {
nowInSecondsPrecision,
@@ -66,6 +67,8 @@ const MIN_TICK_SPACING_PX = 70;
const MAX_TICK_SPACING_PX = 415;
const ZOOM_SENSITIVITY = 1.0015;
const FADE_OUT_FACTOR = 1.4;
const TICKS_ROW_SPACING = 16;
const MAX_TICK_ROWS = 3;
class TimeTravelTimeline extends React.Component {
@@ -291,12 +294,15 @@ class TimeTravelTimeline extends React.Component {
const periodFormat = TICK_SETTINGS_PER_PERIOD[period].format;
const ticks = this.getTicksForPeriod(period, focusedTimestamp);
const verticalShift = this.getVerticalShiftForPeriod(period);
const transform = `translate(0, ${62 - (verticalShift * 15)})`;
const ticksRow = MAX_TICK_ROWS - this.getVerticalShiftForPeriod(period);
const transform = `translate(0, ${ticksRow * TICKS_ROW_SPACING})`;
// Ticks quickly fade in from the bottom and then slowly
// start fading out as they are being pushed to the top.
const opacity = verticalShift > 1 ? (6 - verticalShift) / 5 : verticalShift;
// Ticks quickly fade in from the bottom and then slowly start
// fading out towards the top until they are pushed out of canvas.
const focusedRow = MAX_TICK_ROWS - 1;
const opacity = ticksRow > focusedRow ?
linearGradientValue(ticksRow, [MAX_TICK_ROWS, focusedRow]) :
linearGradientValue(ticksRow, [-2, focusedRow]);
return (
<g className={period} transform={transform} style={{ opacity }}>
@@ -330,7 +336,7 @@ class TimeTravelTimeline extends React.Component {
width={width} height={height} fillOpacity={0}
/>
{this.renderDisabledShadow(focusedTimestamp)}
<g className="ticks">
<g className="ticks" transform="translate(0, 1)">
{this.renderPeriodTicks('year', focusedTimestamp)}
{this.renderPeriodTicks('month', focusedTimestamp)}
{this.renderPeriodTicks('day', focusedTimestamp)}

5
client/app/scripts/utils/math-utils.js
View File

@@ -39,3 +39,8 @@ export function minEuclideanDistanceBetweenPoints(points) {
});
return minDistance;
}
// A linear mapping [a, b] -> [0, 1] (maps value x=a into 0 and x=b into 1).
export function linearGradientValue(x, [a, b]) {
return (x - a) / (b - a);
}

10
client/app/styles/_base.scss
View File

@@ -189,7 +189,7 @@
&.time-travel-open {
.details-wrapper {
margin-top: 85px;
margin-top: $timeline-height + 15px;
}
}
}
@@ -264,7 +264,7 @@
height: 0;
&.visible {
height: 105px;
height: $timeline-height + 35px;
margin-bottom: 15px;
margin-top: -5px;
}
@@ -277,7 +277,7 @@
.time-travel-timeline {
align-items: center;
display: flex;
height: 70px;
height: $timeline-height;
svg {
@extend .grabbable;
@@ -321,11 +321,11 @@
&:before {
top: 0;
height: 70px;
height: $timeline-height;
}
&:after {
top: 70px;
top: $timeline-height;
height: 9px;
opacity: 0.15;
}

2
client/app/styles/_variables.scss
View File

@@ -53,6 +53,8 @@ $link-opacity-default: 0.8;
$search-border-color: transparent;
$search-border-width: 1px;
$timeline-height: 55px;
/* specific elements */
$body-background-color: linear-gradient(30deg, $background-color 0%, $background-lighter-color 100%);
$label-background-color: fade-out($background-average-color, .3);