Error bars 1

app/charts/column/columns-simple.tsx

@@ -1,8 +1,83 @@
+import { memo } from "react";
 import { useTheme } from "../../themes";
 import { useChartState } from "../shared/use-chart-state";
 import { ColumnsState } from "./columns-state";
 import { Column } from "./rendering-utils";
 
+export const VerticalWhisker = memo(
+  ({
+    x,
+    y1,
+    y2,
+    width,
+  }: {
+    x: number;
+    y1: number;
+    y2: number;
+    width: number;
+    color?: string;
+  }) => {
+    return (
+      <>
+        <rect
+          x={x}
+          y={y1}
+          width={width}
+          height={2}
+          fill={"black"}
+          stroke="none"
+        />
+        <rect
+          x={x + width / 2}
+          y={y2}
+          width={2}
+          height={y1 - y2}
+          fill={"black"}
+          stroke="none"
+        />
+        <rect
+          x={x}
+          y={y2}
+          width={width}
+          height={2}
+          fill={"black"}
+          stroke="none"
+        />
+      </>
+    );
+  }
+);
+
+export const ErrorWhiskers = () => {
+  const { preparedData, bounds, getX, xScale, getY, getYError, yScale } =
+    useChartState() as ColumnsState;
+  const { margins } = bounds;
+
+  if (!getYError) {
+    return null;
+  }
+
+  return (
+    <g transform={`translate(${margins.left} ${margins.top})`}>
+      {preparedData.map((d, i) => {
+        const x0 = xScale(getX(d)) as number;
+        const bandwidth = xScale.bandwidth();
+        const barwidth = bandwidth / 4;
+        const [y1, y2] = getYError(d);
+        return (
+          <VerticalWhisker
+            key={i}
+            x={x0 + bandwidth / 2 - barwidth / 2}
+            width={barwidth}
+            y1={yScale(y1)}
+            y2={yScale(y2)}
+          />
+        );
+      })}
+    </g>
+  );
+};
+
 export const Columns = () => {
   const { preparedData, bounds, getX, xScale, getY, yScale } =
     useChartState() as ColumnsState;

app/charts/column/columns-state.tsx

@@ -59,6 +59,7 @@ export interface ColumnsState {
   xEntireScale: ScaleTime<number, number>;
   xScaleInteraction: ScaleBand<string>;
   getY: (d: Observation) => number | null;
+  getYError: null | ((d: Observation) => [number, number]);
   yScale: ScaleLinear<number, number>;
   getSegment: (d: Observation) => string;
   segments: string[];
@@ -102,7 +103,22 @@ const useColumnsState = ({
   const getX = useStringVariable(fields.x.componentIri);
   const getXAsDate = useTemporalVariable(fields.x.componentIri);
   const getY = useOptionalNumericVariable(fields.y.componentIri);
+  const errorIri = useMemo(() => {
+    const yMeasure = measures.find((m) => m.iri === fields.y.componentIri);
+    return yMeasure?.related?.errorIri;
+  }, [fields.y.componentIri, measures]);
   const getSegment = useSegment(fields.segment?.componentIri);
+  const getYError = errorIri
+    ? (d: Observation) => {
+        const y = getY(d) as number;
+        const error =
+          d[errorIri] !== null ? parseFloat(d[errorIri] as string) : null;
+        return (error === null ? [y, y] : [y - error, y + error]) as [
+          number,
+          number
+        ];
+      }
+    : null;
 
   const sortingType = fields.x.sorting?.sortingType;
   const sortingOrder = fields.x.sorting?.sortingOrder;
@@ -271,6 +287,7 @@ const useColumnsState = ({
     timeUnit,
     xScaleInteraction,
     getY,
+    getYError,
     yScale,
     getSegment,
     yAxisLabel,