feat: Add checkbox to show standard error

defaultChecked on Checkbox was not used
visualize-admin · Feb 17, 2022 · 3a48824 · 3a48824
1 parent bc3a1b8
commit 3a48824
Show file tree

Hide file tree

Showing 11 changed files with 467 additions and 391 deletions.
diff --git a/app/charts/chart-config-ui-options.ts b/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,

diff --git a/app/charts/column/columns-grouped-state.tsx b/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,
   };
 };
 

diff --git a/app/charts/column/columns-grouped.tsx b/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;
   }
 

diff --git a/app/charts/column/columns-simple.tsx b/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;
   }
 

diff --git a/app/charts/column/columns-state.tsx b/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,
   };
 };
 

diff --git a/app/configurator/components/chart-options-selector.tsx b/app/configurator/components/chart-options-selector.tsx
@@ -40,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";
 
@@ -266,6 +270,23 @@ const EncodingOptionsPanel = ({
           // chartType={chartType}
         />
       )}
+      {optionsByField["showStandardError"] && (
+        <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} />
       )}

diff --git a/app/configurator/components/field.tsx b/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>
   );
 };