Skip to content

Commit

Permalink
🚧 wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@sophiamersmann
sophiamersmann committed Sep 18, 2024
1 parent cea9233 commit 5fa630a
Show file tree
Hide file tree
Showing 10 changed files with 273 additions and 79 deletions.
4 changes: 4 additions & 0 deletions adminSiteClient/ChartEditorPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ export class ChartEditorPage
`/api/charts/${grapherId}.parent.json`
)
this.parentConfig = parent?.config
if (this.parentConfig) {
this.parentConfig.timelineMinTime = 2000
this.parentConfig.subtitle = "parent subtitle"
}
this.isInheritanceEnabled = parent?.isActive ?? true
} else if (grapherConfig) {
const parentIndicatorId =
Expand Down
170 changes: 111 additions & 59 deletions adminSiteClient/EditorCustomizeTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
ColorSchemeName,
FacetAxisDomain,
FacetStrategy,
GrapherInterface,
} from "@ourworldindata/types"
import { Grapher } from "@ourworldindata/grapher"
import {
Expand All @@ -17,6 +18,9 @@ import {
TextField,
Button,
RadioGroup,
BindAutoFloat,

Check warning on line 21 in adminSiteClient/EditorCustomizeTab.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'BindAutoFloat' is defined but never used. Allowed unused vars must match /^_/u

Check warning on line 21 in adminSiteClient/EditorCustomizeTab.tsx

View workflow job for this annotation

GitHub Actions / eslint 

'BindAutoFloat' is defined but never used. Allowed unused vars must match /^_/u
InputWithAction,
BindAutoFloatExt,
} from "./Forms.js"
import {
debounce,
Expand All @@ -39,6 +43,84 @@ import Select from "react-select"
import { AbstractChartEditor } from "./AbstractChartEditor.js"
import { ErrorMessages } from "./ChartEditorTypes.js"

@observer
class TimeField<
T extends { [field: string]: any },
K extends Extract<keyof T, string>,
> extends React.Component<{
editor: AbstractChartEditor
field: K
store: T
label: string
defaultValue: number
defaultTextValue: TimeBoundValue
}> {
@action.bound onChange(value: number | undefined) {
this.props.store[this.props.field] =
value ?? (this.props.defaultValue as any)
}

render() {
const { editor, field, label, defaultTextValue, defaultValue } =
this.props

const inheritedValue = editor.activeParentConfig?.[
field as keyof GrapherInterface
] as number

console.log("inherited", inheritedValue)

console.log(
"auto",
inheritedValue === defaultTextValue
? defaultValue
: inheritedValue ?? defaultValue
)

return (
<InputWithAction
input={
editor.couldPropertyBeInherited(
field as keyof GrapherInterface
) ? (
<BindAutoFloatExt
label={label}
readFn={(store) => store[field]}
writeFn={(store, newVal) =>
(store[field] = newVal as any)
}
readAutoFn={() =>
inheritedValue === defaultTextValue
? defaultValue
: inheritedValue ?? defaultValue
}
isAuto={editor.isPropertyInherited(
field as keyof GrapherInterface
)}
store={this.props.store}
/>
) : (
<NumberField
label={label}
value={this.props.store[field]}
onValue={debounce(this.onChange)}
allowNegative
/>
)
}
text={{
default: "Bind to data",
disabled: "Bound to data",
}}
onClick={() => {
this.props.store[this.props.field] = defaultValue as any
}}
isDisabled={this.props.store[this.props.field] === defaultValue}
/>
)
}
}

@observer
export class ColorSchemeSelector extends React.Component<{
grapher: Grapher
Expand Down Expand Up @@ -318,13 +400,6 @@ class TimelineSection<
return this.grapher.maxTime
}

@computed get timelineMinTime() {
return this.grapher.timelineMinTime
}
@computed get timelineMaxTime() {
return this.grapher.timelineMaxTime
}

@action.bound onMinTime(value: number | undefined) {
this.grapher.minTime = value ?? TimeBoundValue.negativeInfinity
}
Expand All @@ -333,28 +408,6 @@ class TimelineSection<
this.grapher.maxTime = value ?? TimeBoundValue.positiveInfinity
}

@action.bound onTimelineMinTime(value: number | undefined) {
this.grapher.timelineMinTime = value
}

@action.bound onBlurTimelineMinTime() {
if (this.grapher.timelineMinTime === undefined) {
this.grapher.timelineMinTime =
this.activeParentConfig?.timelineMinTime
}
}

@action.bound onTimelineMaxTime(value: number | undefined) {
this.grapher.timelineMaxTime = value
}

@action.bound onBlurTimelineMaxTime() {
if (this.grapher.timelineMaxTime === undefined) {
this.grapher.timelineMaxTime =
this.activeParentConfig?.timelineMaxTime
}
}

@action.bound onToggleHideTimeline(value: boolean) {
this.grapher.hideTimeline = value || undefined
}
Expand All @@ -364,55 +417,54 @@ class TimelineSection<
}

render() {
const { features } = this.props.editor
const { editor } = this.props
const { features } = editor
const { grapher } = this

return (
<Section name="Timeline selection">
<FieldsRow>
{/* <FieldsRow>
{features.timeDomain && (
<NumberField
<TimeField
editor={editor}
store={grapher}
field="minTime"
label="Selection start"
value={this.minTime}
onValue={debounce(this.onMinTime)}
allowNegative
defaultTextValue={TimeBoundValue.negativeInfinity}
defaultValue={-Infinity}
/>
)}
<NumberField
<TimeField
editor={editor}
store={grapher}
field="maxTime"
label={
features.timeDomain
? "Selection end"
: "Selected year"
}
value={this.maxTime}
onValue={debounce(this.onMaxTime)}
allowNegative
defaultValue={Infinity}
defaultTextValue={TimeBoundValue.positiveInfinity}
/>
</FieldsRow>
</FieldsRow> */}
{features.timelineRange && (
<FieldsRow>
<NumberField
<TimeField
editor={editor}
store={this.props.editor.grapher}
field="timelineMinTime"
label="Timeline min"
value={this.timelineMinTime}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounce(this.onTimelineMinTime, 0, {
leading: true,
trailing: false,
})}
onBlur={this.onBlurTimelineMinTime}
allowNegative
defaultValue={-Infinity}
defaultTextValue={TimeBoundValue.negativeInfinity}
/>
<NumberField
{/* <TimeField
editor={editor}
store={grapher}
field="timelineMaxTime"
label="Timeline max"
value={this.timelineMaxTime}
// invoke on the leading edge to avoid interference with onBlur
onValue={debounce(this.onTimelineMaxTime, 0, {
leading: true,
trailing: false,
})}
onBlur={this.onBlurTimelineMaxTime}
allowNegative
/>
defaultValue={Infinity}
defaultTextValue={TimeBoundValue.positiveInfinity}
/> */}
</FieldsRow>
)}
<FieldsRow>
Expand Down
26 changes: 12 additions & 14 deletions adminSiteClient/EditorTextTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,9 @@ export class EditorTextTab<
<Section name="Header">
<BindAutoStringExt
label="Title"
readFn={({ grapher }) => grapher.displayTitle}
writeFn={({ grapher }, newVal) =>
(grapher.title = newVal)
}
readAutoFn={({ editor }) =>
readFn={(grapher) => grapher.displayTitle}
writeFn={(grapher, newVal) => (grapher.title = newVal)}
readAutoFn={() =>
editor.couldPropertyBeInherited("title")
? editor.activeParentConfig!.title
: undefined
Expand All @@ -106,7 +104,7 @@ export class EditorTextTab<
editor.isPropertyInherited("title") ||
grapher.title === undefined
}
store={{ grapher, editor }}
store={grapher}
softCharacterLimit={100}
/>
{features.showEntityAnnotationInTitleToggle && (
Expand Down Expand Up @@ -156,11 +154,11 @@ export class EditorTextTab<
/>
<BindAutoStringExt
label="Subtitle"
readFn={({ grapher }) => grapher.currentSubtitle}
writeFn={({ grapher }, newVal) =>
readFn={(grapher) => grapher.currentSubtitle}
writeFn={(grapher, newVal) =>
(grapher.subtitle = newVal)
}
readAutoFn={({ editor }) =>
readAutoFn={() =>
editor.couldPropertyBeInherited("subtitle")
? editor.activeParentConfig!.subtitle
: undefined
Expand All @@ -169,7 +167,7 @@ export class EditorTextTab<
editor.isPropertyInherited("subtitle") ||
grapher.subtitle === undefined
}
store={{ grapher, editor }}
store={grapher}
placeholder="Briefly describe the context of the data. It's best to avoid duplicating any information which can be easily inferred from other visual elements of the chart."
textarea
softCharacterLimit={280}
Expand All @@ -192,11 +190,11 @@ export class EditorTextTab<
<Section name="Footer">
<BindAutoStringExt
label="Source"
readFn={({ grapher }) => grapher.sourcesLine}
writeFn={({ grapher }, newVal) =>
readFn={(grapher) => grapher.sourcesLine}
writeFn={(grapher, newVal) =>
(grapher.sourceDesc = newVal)
}
readAutoFn={({ editor }) =>
readAutoFn={() =>
editor.couldPropertyBeInherited("sourceDesc")
? editor.activeParentConfig!.sourceDesc
: undefined
Expand All @@ -205,7 +203,7 @@ export class EditorTextTab<
editor.isPropertyInherited("sourceDesc") ||
grapher.sourceDesc === undefined
}
store={{ grapher, editor }}
store={grapher}
helpText="Short comma-separated list of source names"
softCharacterLimit={60}
/>
Expand Down
Loading

0 comments on commit 5fa630a

Please sign in to comment.