From 95d85c7dc7c9856cf105b49030a88bcf962fbb06 Mon Sep 17 00:00:00 2001 From: Andy Lee Date: Tue, 5 Mar 2019 11:45:34 +0000 Subject: [PATCH] Make sure colour-scale points still have semi-transparent fill (#75) --- packages/perspective-viewer-d3fc/src/js/series/pointSeries.js | 4 ++-- .../perspective-viewer-d3fc/src/js/series/seriesColours.js | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js b/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js index 5f3fcf5578..23ff0f34ff 100644 --- a/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js +++ b/packages/perspective-viewer-d3fc/src/js/series/pointSeries.js @@ -10,7 +10,7 @@ import * as d3 from "d3"; import * as fc from "d3fc"; import {tooltip} from "../tooltip/tooltip"; import {groupFromKey} from "./seriesKey"; -import {withoutOpacity} from "./seriesColours"; +import {withOpacity, withoutOpacity} from "./seriesColours"; const symbols = [d3.symbolCircle, d3.symbolCross, d3.symbolDiamond, d3.symbolSquare, d3.symbolStar, d3.symbolTriangle, d3.symbolWye]; @@ -30,7 +30,7 @@ export function pointSeries(settings, seriesKey, size, colour, symbols) { series.decorate(selection => { tooltip()(selection, settings); if (colour) { - selection.style("stroke", d => withoutOpacity(colour(d.colorValue || seriesKey))).style("fill", d => colour(d.colorValue || seriesKey)); + selection.style("stroke", d => withoutOpacity(colour(d.colorValue || seriesKey))).style("fill", d => withOpacity(colour(d.colorValue || seriesKey))); } }); diff --git a/packages/perspective-viewer-d3fc/src/js/series/seriesColours.js b/packages/perspective-viewer-d3fc/src/js/series/seriesColours.js index 44aa7c8e19..173486bf59 100644 --- a/packages/perspective-viewer-d3fc/src/js/series/seriesColours.js +++ b/packages/perspective-viewer-d3fc/src/js/series/seriesColours.js @@ -39,6 +39,8 @@ export function withoutOpacity(colour) { } export function withOpacity(colour) { + if (colour.includes("rgba")) return colour; + const toInt = offset => parseInt(colour.substring(offset, offset + 2), 16); return `rgba(${toInt(1)},${toInt(3)},${toInt(5)},0.5)`; }