Merge pull request #2048 from weaveworks/d4-hotfixes

Fix two bugs caused by transition to D3 v4
This commit is contained in:
Filip Barl
2016-11-30 12:23:31 +01:00
committed by GitHub
3 changed files with 11 additions and 8 deletions

View File

@@ -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}

View File

@@ -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)} />

View File

@@ -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)} />