Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Checkbox for standard error #366

Merged
merged 4 commits into from
Feb 17, 2022
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: Add checkbox to show standard error
defaultChecked on Checkbox was not used
  • Loading branch information
ptbrowne committed Feb 17, 2022
commit 3a48824dde22ea596dee2a72d159a22e9413410a
16 changes: 13 additions & 3 deletions app/charts/chart-config-ui-options.ts
Original file line number Diff line number Diff line change
@@ -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,
6 changes: 5 additions & 1 deletion app/charts/column/columns-grouped-state.tsx
Original file line number Diff line number Diff line change
@@ -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,
};
};

3 changes: 2 additions & 1 deletion app/charts/column/columns-grouped.tsx
Original file line number Diff line number Diff line change
@@ -12,9 +12,10 @@ export const ErrorWhiskers = () => {
yScale,
getSegment,
grouped,
showStandardError,
} = useChartState() as GroupedColumnsState;
const { margins } = bounds;
if (!getYErrorRange) {
if (!getYErrorRange || !showStandardError) {
return null;
}

12 changes: 9 additions & 3 deletions app/charts/column/columns-simple.tsx
Original file line number Diff line number Diff line change
@@ -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;
}

5 changes: 4 additions & 1 deletion app/charts/column/columns-state.tsx
Original file line number Diff line number Diff line change
@@ -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,
};
};

23 changes: 22 additions & 1 deletion app/configurator/components/chart-options-selector.tsx
Original file line number Diff line number Diff line change
@@ -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} />
)}
7 changes: 4 additions & 3 deletions app/configurator/components/field.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading