diff --git a/CHANGELOG.md b/CHANGELOG.md index d26e20e51..0ccda64ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,7 +9,8 @@ You can also check the [release page](https://github.com/visualize-admin/visuali ## Unreleased -Nothing yet. +- Fixes + - remove ErrorWhisker and Tooltip when error is null in Column charts # [3.24.0] - 2023-11-08 diff --git a/app/charts/column/columns-grouped-state.tsx b/app/charts/column/columns-grouped-state.tsx index dfd15adc5..07d550434 100644 --- a/app/charts/column/columns-grouped-state.tsx +++ b/app/charts/column/columns-grouped-state.tsx @@ -388,7 +388,7 @@ const useColumnsGroupedState = ( }); const getError = (d: Observation) => { - if (!showYStandardError || !getYError) { + if (!showYStandardError || !getYError || getYError(d) == null) { return; } diff --git a/app/charts/column/columns-grouped.tsx b/app/charts/column/columns-grouped.tsx index d817c1afa..ca0ba7b36 100644 --- a/app/charts/column/columns-grouped.tsx +++ b/app/charts/column/columns-grouped.tsx @@ -4,6 +4,7 @@ import { GroupedColumnsState } from "@/charts/column/columns-grouped-state"; import { RenderColumnDatum, RenderWhiskerDatum, + filterWithoutErrors, renderColumns, renderWhiskers, } from "@/charts/column/rendering-utils"; @@ -17,6 +18,7 @@ export const ErrorWhiskers = () => { xScale, xScaleIn, getYErrorRange, + getYError, yScale, getSegment, grouped, @@ -31,25 +33,28 @@ export const ErrorWhiskers = () => { return []; } - return grouped.flatMap(([segment, observations]) => - observations.map((d) => { - const x0 = xScaleIn(getSegment(d)) as number; - const bandwidth = xScaleIn.bandwidth(); - const barwidth = Math.min(bandwidth, 15); - const [y1, y2] = getYErrorRange(d); + return grouped + .filter((d) => d[1].some(filterWithoutErrors(getYError))) + .flatMap(([segment, observations]) => + observations.map((d) => { + const x0 = xScaleIn(getSegment(d)) as number; + const bandwidth = xScaleIn.bandwidth(); + const barwidth = Math.min(bandwidth, 15); + const [y1, y2] = getYErrorRange(d); - return { - key: `${segment}-${getSegment(d)}`, - x: (xScale(segment) as number) + x0 + bandwidth / 2 - barwidth / 2, - y1: yScale(y1), - y2: yScale(y2), - width: barwidth, - }; - }) - ); + return { + key: `${segment}-${getSegment(d)}`, + x: (xScale(segment) as number) + x0 + bandwidth / 2 - barwidth / 2, + y1: yScale(y1), + y2: yScale(y2), + width: barwidth, + }; + }) + ); }, [ getSegment, getYErrorRange, + getYError, grouped, showYStandardError, xScale, diff --git a/app/charts/column/columns-state.tsx b/app/charts/column/columns-state.tsx index 8e62f67cd..7183b4c26 100644 --- a/app/charts/column/columns-state.tsx +++ b/app/charts/column/columns-state.tsx @@ -226,7 +226,7 @@ const useColumnsState = ( ); const getError = (d: Observation) => { - if (!showYStandardError || !getYError) { + if (!showYStandardError || !getYError || getYError(d) === null) { return; } diff --git a/app/charts/column/columns.tsx b/app/charts/column/columns.tsx index 47ba54b09..11661ffda 100644 --- a/app/charts/column/columns.tsx +++ b/app/charts/column/columns.tsx @@ -3,6 +3,7 @@ import React from "react"; import { ColumnsState } from "@/charts/column/columns-state"; import { + filterWithoutErrors, RenderColumnDatum, renderColumns, RenderWhiskerDatum, @@ -16,6 +17,7 @@ import { useTheme } from "@/themes"; export const ErrorWhiskers = () => { const { getX, + getYError, getYErrorRange, chartData, yScale, @@ -32,7 +34,7 @@ export const ErrorWhiskers = () => { return []; } - return chartData.map((d, i) => { + return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => { const x0 = xScale(getX(d)) as number; const bandwidth = xScale.bandwidth(); const barwidth = Math.min(bandwidth, 15); @@ -46,7 +48,15 @@ export const ErrorWhiskers = () => { width: barwidth, }; }); - }, [chartData, getX, getYErrorRange, showYStandardError, xScale, yScale]); + }, [ + chartData, + getX, + getYError, + getYErrorRange, + showYStandardError, + xScale, + yScale, + ]); React.useEffect(() => { if (ref.current) { diff --git a/app/charts/column/rendering-utils.ts b/app/charts/column/rendering-utils.ts index 243e0fa26..20911fdf7 100644 --- a/app/charts/column/rendering-utils.ts +++ b/app/charts/column/rendering-utils.ts @@ -4,6 +4,7 @@ import { RenderOptions, maybeTransition, } from "@/charts/shared/rendering-utils"; +import { Observation, ObservationValue } from "@/domain/data"; export type RenderColumnDatum = { key: string; @@ -158,3 +159,8 @@ export const renderWhiskers = ( }) ); }; + +export const filterWithoutErrors = + (getError: ((d: Observation) => ObservationValue) | null) => + (d: Observation): boolean => + !!getError?.(d);