From e3f0ba7c053d6749416a118f1bc360ca6828b70e Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Fri, 13 Dec 2024 15:29:31 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20clean=20up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- adminSiteClient/admin.scss | 9 --------- .../grapher/src/facetChart/FacetChart.tsx | 5 +++-- .../grapher/src/lineCharts/LineChart.tsx | 6 +++--- .../grapher/src/lineLegend/LineLegend.tsx | 17 ++++++++++------- .../grapher/src/slopeCharts/SlopeChart.tsx | 14 +++++++------- 5 files changed, 23 insertions(+), 28 deletions(-) diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss index 582b5c4a51b..966b05e0a57 100644 --- a/adminSiteClient/admin.scss +++ b/adminSiteClient/admin.scss @@ -519,15 +519,6 @@ $nav-height: 45px; align-items: center; } - i { - font-size: 1.2rem; - color: #666; - } - - > div:first-child > * { - margin-right: 12px; - } - &.invalid { background: #fce9e6; } diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx index 457ef06f20e..ef091fb9110 100644 --- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx +++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx @@ -740,7 +740,7 @@ export class FacetChart const activeColors = uniq( this.intermediateChartInstances.flatMap((chartInstance) => chartInstance.series - .filter((series) => focusArray?.has(series.seriesName)) + .filter((series) => focusArray.has(series.seriesName)) .map((series) => series.color) ) ) @@ -799,6 +799,7 @@ export class FacetChart } @action.bound onLegendClick(bin: ColorScaleBin): void { + if (!this.manager.focusArray) return // find all series (of all facets) that are contained in the bin const seriesNames = uniq( this.intermediateChartInstances.flatMap((chartInstance) => @@ -807,7 +808,7 @@ export class FacetChart .map((series) => series.seriesName) ) ) - this.manager.focusArray?.toggle(...seriesNames) + this.manager.focusArray.toggle(...seriesNames) } // end of legend props diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx index f0f8101ca8d..b31bec83fa8 100644 --- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx +++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx @@ -184,7 +184,7 @@ class Lines extends React.Component { const strokeDasharray = series.isProjection ? "2,3" : undefined const strokeWidth = hover.background || focus.background - ? this.strokeWidth - 0.33 * this.strokeWidth + ? 0.66 * this.strokeWidth : this.strokeWidth const strokeOpacity = hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1 @@ -565,14 +565,14 @@ export class LineChart ) if (!value || series.hover.background) return null - const seriesColor = this.hasColorScale + const valueColor = this.hasColorScale ? darkenColorForLine( this.getColorScaleColor(value.colorValue) ) : series.color const color = !series.focus.background || series.hover.active - ? seriesColor + ? valueColor : GRAY_50 return ( diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx index 17e17ef029b..33c84a512e3 100644 --- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx +++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx @@ -743,11 +743,13 @@ export class LineLegend extends React.Component { } // we initially need to pick at least two candidates. - // if we already picked two from the set of focused series, - // we're done. if we picked one, then we pick a another one - // that is as far away from the first one as possible. - // if we haven't picked any focused series, we pick two from - // the non-focused series, one from the top and one from the bottom. + // - if we already picked two from the set of focused series, + // we're done + // - if we picked only one focused series, then we pick another + // one from the set of non-focused series. we pick the one that + // is furthest away from the focused one + // - if we haven't picked any focused series, we pick two from + // the non-focused series, one from the top and one from the bottom if (sortedKeepSeries.length === 0) { // sort the remaining candidates by their position const sortedCandidates = sortBy( @@ -777,11 +779,12 @@ export class LineLegend extends React.Component { const cIndex = nonFocusedCandidates.indexOf(candidate) if (cIndex > -1) nonFocusedCandidates.splice(cIndex, 1) - // we only need one more candidate + // we only need one more candidate, so if we find one, we're done const picked = maybePickCandidate(candidate) if (picked) break - // if the candidate wasn't picked, remove it from the candidates and continue + // if the candidate wasn't picked, remove it from the + // candidates and continue candidates.delete(candidate) } } diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx index 5c9ff86d523..8907d040e79 100644 --- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx +++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx @@ -229,6 +229,10 @@ export class SlopeChart return makeSelectionArray(this.manager.selection) } + @computed get focusArray(): FocusArray { + return this.manager.focusArray ?? new FocusArray() + } + @computed private get formatColumn(): CoreColumn { return this.yColumns[0] } @@ -472,10 +476,6 @@ export class SlopeChart return this.focusArray.state(series.seriesName) } - @computed get focusArray(): FocusArray { - return this.manager.focusArray ?? new FocusArray() - } - @computed private get renderSeries(): RenderSlopeChartSeries[] { const series: RenderSlopeChartSeries[] = this.placedSeries.map( (series) => { @@ -487,6 +487,8 @@ export class SlopeChart } ) + // sort by interaction state so that foreground series + // are drawn on top of background series if (this.isHoverModeActive || this.isFocusModeActive) { return sortBy(series, byHoverThenFocusState) } @@ -1333,9 +1335,7 @@ function Slope({ ? series.color : NON_FOCUSED_LINE_COLOR const lineWidth = - hover.background || focus.background - ? strokeWidth - 0.33 * strokeWidth - : strokeWidth + hover.background || focus.background ? 0.66 * strokeWidth : strokeWidth return (