Checkbox for standard error

app/charts/chart-config-ui-options.ts

@@ -23,13 +23,17 @@ export type EncodingOption =
   | "chartSubType"
   | "sorting"
   | "color"
-  | "imputationType";
+  | "imputationType"
+  | "showStandardError";
 
 export type EncodingOptions =
   | undefined
   | {
       field: EncodingOption;
-      values: string[] | { field: string; values?: string | string[] }[];
+      values:
+        | string[]
+        | boolean[]
+        | { field: string; values?: string | string[] }[];
     }[];
 export type EncodingSortingOption = {
   sortingType: "byDimensionLabel" | "byTotalSize" | "byMeasure";
@@ -70,7 +74,13 @@ export const chartConfigOptionsUISpec: ChartSpecs = {
   column: {
     chartType: "column",
     encodings: [
-      { field: "y", optional: false, values: ["Measure"], filters: false },
+      {
+        field: "y",
+        optional: false,
+        values: ["Measure"],
+        filters: false,
+        options: [{ field: "showStandardError", values: [true, false] }],
+      },
       {
         field: "x",
         optional: false,

app/charts/column/columns-grouped-state.tsx

@@ -16,7 +16,7 @@ import {
   ScaleTime,
   sum,
 } from "d3";
-import { sortBy } from "lodash";
+import { get, sortBy } from "lodash";
 import React, { ReactNode, useMemo } from "react";
 import { ColumnFields, SortingOrder, SortingType } from "../../configurator";
 import {
@@ -73,6 +73,7 @@ export interface GroupedColumnsState {
   yAxisLabel: string;
   grouped: [string, Observation[]][];
   getAnnotationInfo: (d: Observation) => TooltipInfo;
+  showStandardError: boolean;
 }
 
 const useGroupedColumnsState = (
@@ -113,6 +114,8 @@ const useGroupedColumnsState = (
   const getYErrorRange = useErrorRange(errorMeasure, getY);
   const getSegment = useSegment(fields.segment?.componentIri);
 
+  const showStandardError = get(fields, ["y", "showStandardError"], true);
+
   // Sort
   const xSortingType = fields.x.sorting?.sortingType;
   const xSortingOrder = fields.x.sorting?.sortingOrder;
@@ -417,6 +420,7 @@ const useGroupedColumnsState = (
     grouped,
     getAnnotationInfo,
     xIsTime,
+    showStandardError,
   };
 };
 

app/charts/column/columns-grouped.tsx

@@ -12,9 +12,10 @@ export const ErrorWhiskers = () => {
     yScale,
     getSegment,
     grouped,
+    showStandardError,
   } = useChartState() as GroupedColumnsState;
   const { margins } = bounds;
-  if (!getYErrorRange) {
+  if (!getYErrorRange || !showStandardError) {
     return null;
   }
 

app/charts/column/columns-simple.tsx

@@ -6,11 +6,17 @@ import { Column } from "./rendering-utils";
 
 export const ErrorWhiskers = () => {
   const state = useChartState() as ColumnsState;
-
-  const { getX, getYErrorRange, preparedData, yScale, xScale } = state;
+  const {
+    getX,
+    getYErrorRange,
+    preparedData,
+    yScale,
+    xScale,
+    showStandardError,
+  } = state;
   const { margins } = state.bounds;
 
-  if (!getYErrorRange) {
+  if (!getYErrorRange || !showStandardError) {
     return null;
   }
 

app/charts/column/columns-state.tsx

@@ -13,7 +13,7 @@ import {
   scaleTime,
   ScaleTime,
 } from "d3";
-import { sortBy } from "lodash";
+import { get, sortBy } from "lodash";
 import { ReactNode, useMemo } from "react";
 import { ColumnFields, SortingOrder, SortingType } from "../../configurator";
 import {
@@ -70,6 +70,7 @@ export interface ColumnsState {
   colors: ScaleOrdinal<string, string>;
   yAxisLabel: string;
   getAnnotationInfo: (d: Observation) => TooltipInfo;
+  showStandardError: boolean;
 }
 
 const useColumnsState = (
@@ -114,6 +115,7 @@ const useColumnsState = (
   const getYErrorRange = useErrorRange(errorMeasure, getY);
   const getYError = useErrorVariable(errorMeasure);
   const getSegment = useSegment(fields.segment?.componentIri);
+  const showStandardError = get(fields, ["y", "showStandardError"], true);
 
   const sortingType = fields.x.sorting?.sortingType;
   const sortingOrder = fields.x.sorting?.sortingOrder;
@@ -302,6 +304,7 @@ const useColumnsState = (
     segments,
     colors,
     getAnnotationInfo,
+    showStandardError,
   };
 };
 

app/configurator/components/chart-options-selector.tsx

@@ -1,4 +1,5 @@
 import { t, Trans } from "@lingui/macro";
+import { keyBy } from "lodash";
 import get from "lodash/get";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Box, Flex } from "theme-ui";
@@ -39,7 +40,11 @@ import {
   SectionTitle,
 } from "./chart-controls/section";
 import { EmptyRightPanel } from "./empty-right-panel";
-import { ChartFieldField, ChartOptionRadioField } from "./field";
+import {
+  ChartFieldField,
+  ChartOptionRadioField,
+  ChartOptionCheckboxField,
+} from "./field";
 import { DimensionValuesMultiFilter, TimeFilter } from "./filters";
 import { getFieldLabel, getIconName } from "./ui-helpers";
 
@@ -138,7 +143,8 @@ const ActiveFieldSwitch = ({
     activeField
   );
 
-  const component = [...metaData.dimensions].find(
+  const allDimensions = [...metaData.dimensions, ...metaData.measures];
+  const component = allDimensions.find(
     (d) => d.iri === activeFieldComponentIri
   );
 
@@ -211,6 +217,20 @@ const EncodingOptionsPanel = ({
       disabled: otherFieldsIris.includes(dimension.iri),
     }));
   }, [dimensions, encoding.values, measures, otherFieldsIris]);
+
+  const hasStandardError = useMemo(() => {
+    return [...measures, ...dimensions].find((m) =>
+      m.related?.some(
+        (r) => r.type === "StandardError" && r.iri === component?.iri
+      )
+    );
+  }, [dimensions, measures, component]);
+
+  const optionsByField = useMemo(
+    () => keyBy(encoding.options, (enc) => enc.field),
+    [encoding]
+  );
+
   return (
     <div
       key={`control-panel-${encoding.field}`}
@@ -240,7 +260,7 @@ const EncodingOptionsPanel = ({
               chartType={chartType}
             />
           )}
-          {encoding.options?.map((e) => e.field).includes("color") && (
+          {optionsByField["color"] && (
             <ColorPalette
               disabled={!component}
               field={field}
@@ -260,14 +280,27 @@ const EncodingOptionsPanel = ({
           // chartType={chartType}
         />
       )}
-      {encoding.options?.map((e) => e.field.includes("imputationType")) &&
-        isAreaConfig(state.chartConfig) && (
-          <ChartImputationType
-            state={state}
-            disabled={!imputationNeeded}
-          ></ChartImputationType>
-        )}
-      {encoding.filters && (
+      {optionsByField["showStandardError"] && hasStandardError && (
+        <ControlSection>
+          <SectionTitle iconName="eye">
+            <Trans id="controls.section.additional-information">
+              Show additional information
+            </Trans>
+          </SectionTitle>
+          <ControlSectionContent side="right" as="fieldset">
+            <ChartOptionCheckboxField
+              path="showStandardError"
+              field={encoding.field}
+              defaultValue={true}
+              label={t({ id: "controls.section.show-standard-error" })}
+            />
+          </ControlSectionContent>
+        </ControlSection>
+      )}
+      {optionsByField["imputationType"] && isAreaConfig(state.chartConfig) && (
+        <ChartImputationType state={state} disabled={!imputationNeeded} />
+      )}
+      {encoding.filters && component && (
         <ControlSection>
           <SectionTitle disabled={!component} iconName="filter">
             <Trans id="controls.section.filter">Filter</Trans>

app/configurator/components/field.tsx

@@ -736,26 +736,27 @@ export const ChartOptionCheckboxField = ({
   label,
   field,
   path,
-  defaultChecked,
+  defaultValue = false,
   disabled = false,
 }: {
   label: string;
   field: string | null;
   path: string;
-  defaultChecked?: boolean;
+  defaultValue?: boolean;
   disabled?: boolean;
 }) => {
   const fieldProps = useChartOptionBooleanField({
     field,
     path,
+    defaultValue,
   });
 
   return (
     <Checkbox
       disabled={disabled}
       label={label}
       {...fieldProps}
-      checked={fieldProps.checked ?? defaultChecked}
+      checked={fieldProps.checked ?? defaultValue}
     ></Checkbox>
   );
 };

app/configurator/config-form.tsx

@@ -13,7 +13,11 @@ import { getFieldComponentIri } from "../charts";
 import { DimensionValuesQuery } from "../graphql/query-hooks";
 import { DataCubeMetadata } from "../graphql/types";
 import { ChartConfig, ChartType } from "./config-types";
-import { getFilterValue, useConfiguratorState } from "./configurator-state";
+import {
+  getChartOptionBooleanField,
+  getFilterValue,
+  useConfiguratorState,
+} from "./configurator-state";
 import { FIELD_VALUE_NONE } from "./constants";
 
 // interface FieldProps {
@@ -182,9 +186,11 @@ export const useChartOptionRadioField = ({
 export const useChartOptionBooleanField = ({
   path,
   field,
+  defaultValue = "",
 }: {
   path: string;
   field: string | null;
+  defaultValue: boolean | string;
 }): FieldProps => {
   const [state, dispatch] = useConfiguratorState();
 
@@ -203,14 +209,8 @@ export const useChartOptionBooleanField = ({
   );
   const stateValue =
     state.state === "CONFIGURING_CHART"
-      ? get(
-          state,
-          field === null
-            ? `chartConfig.${path}`
-            : `chartConfig.fields["${field}"].${path}`,
-          ""
-        )
-      : "";
+      ? getChartOptionBooleanField(state, field, path, defaultValue)
+      : defaultValue;
   const checked = stateValue ? stateValue : false;
 
   return {

app/configurator/configurator-state.tsx

@@ -1,5 +1,5 @@
 import produce from "immer";
-import { mapValues, pickBy } from "lodash";
+import { mapValues, pickBy, get } from "lodash";
 import setWith from "lodash/setWith";
 import { useRouter } from "next/router";
 import {
@@ -582,6 +582,21 @@ export const getFiltersByMappingStatus = (
   return { unmapped, mapped };
 };
 
+export const getChartOptionBooleanField = (
+  state: ConfiguratorStateConfiguringChart,
+  field: string | null,
+  path: string,
+  defaultValue: string | boolean = ""
+) => {
+  return get(
+    state,
+    field === null
+      ? `chartConfig.${path}`
+      : `chartConfig.fields["${field}"].${path}`,
+    defaultValue
+  );
+};
+
 const reducer: Reducer<ConfiguratorState, ConfiguratorStateAction> = (
   draft,
   action
@@ -1186,7 +1201,7 @@ const ConfiguratorStateProviderInternal = ({
     } catch (e) {
       console.error(e);
     }
-  }, [state, dispatch, chartId, push, asPath, locale, query.from]);
+  }, [state, dispatch, chartId, push, asPath, locale, query.from, replace]);
 
   return (
     <ConfiguratorStateContext.Provider value={stateAndDispatch}>