mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +00:00
Merge pull request #2048 from weaveworks/d4-hotfixes
Fix two bugs caused by transition to D3 v4
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { scaleOrdinal } from 'd3-scale';
|
||||
import { scaleBand } from 'd3-scale';
|
||||
import { List as makeList } from 'immutable';
|
||||
import { getNetworkColor } from '../utils/color-utils';
|
||||
import { isContrastMode } from '../utils/contrast-utils';
|
||||
@@ -10,7 +10,7 @@ const minBarHeight = 3;
|
||||
const padding = 0.05;
|
||||
const rx = 1;
|
||||
const ry = rx;
|
||||
const x = scaleOrdinal();
|
||||
const x = scaleBand();
|
||||
|
||||
function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
|
||||
// Min size is about a quarter of the width, feels about right.
|
||||
@@ -20,13 +20,14 @@ function NodeNetworksOverlay({offset, size, stack, networks = makeList()}) {
|
||||
|
||||
// Update singleton scale.
|
||||
x.domain(networks.map((n, i) => i).toJS());
|
||||
x.rangeBands([barWidth * -0.5, barWidth * 0.5], padding, 0);
|
||||
x.range([barWidth * -0.5, barWidth * 0.5]);
|
||||
x.paddingInner(padding);
|
||||
|
||||
const bars = networks.map((n, i) => (
|
||||
<rect
|
||||
x={x(i)}
|
||||
y={offset - barHeight * 0.5}
|
||||
width={x.rangeBand()}
|
||||
width={x.bandwidth()}
|
||||
height={barHeight}
|
||||
rx={rx}
|
||||
ry={ry}
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function NodeShapeHeptagon({id, highlighted, size, color, metric}
|
||||
|
||||
return (
|
||||
<g className={className}>
|
||||
{hasMetric && getClipPathDefinition(clipId, size, height, size * 0.5 - height, -size * 0.5)}
|
||||
{hasMetric && getClipPathDefinition(clipId, size, height, -size * 0.5, size * 0.5 - height)}
|
||||
{highlighted && <path className="highlighted" {...pathProps(0.7)} />}
|
||||
<path className="border" stroke={color} {...pathProps(0.5)} />
|
||||
<path className="shadow" {...pathProps(0.45)} />
|
||||
|
||||
@@ -36,18 +36,20 @@ export default function NodeShapeHexagon({id, highlighted, size, color, metric})
|
||||
});
|
||||
|
||||
const shadowSize = 0.45;
|
||||
const upperHexBitHeight = -0.25 * size * shadowSize;
|
||||
|
||||
const clipId = `mask-${id}`;
|
||||
const {height, hasMetric, formattedValue} = getMetricValue(metric, size);
|
||||
const metricStyle = { fill: getMetricColor(metric) };
|
||||
const className = classNames('shape', { metrics: hasMetric });
|
||||
const fontSize = size * CANVAS_METRIC_FONT_SIZE;
|
||||
// how much the hex curve line interpolator curves outside the original shape definition in
|
||||
// percent (very roughly)
|
||||
const hexCurve = 0.05;
|
||||
|
||||
return (
|
||||
<g className={className}>
|
||||
{hasMetric && getClipPathDefinition(clipId, size, height, size - height +
|
||||
upperHexBitHeight, 0)}
|
||||
{hasMetric && getClipPathDefinition(clipId,
|
||||
size * (1 + hexCurve * 2), height, -size * hexCurve, (size - height) * shadowSize * 2)}
|
||||
{highlighted && <path className="highlighted" {...pathProps(0.7)} />}
|
||||
<path className="border" stroke={color} {...pathProps(0.5)} />
|
||||
<path className="shadow" {...pathProps(shadowSize)} />
|
||||
|
||||
Reference in New Issue
Block a user