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

Refactor/chart config custom color palettes #1930

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
6f5f99f
refactor: Refactored chart config types
noahonyejese Dec 3, 2024
4465745
refactor: fixed all erros that occured due to chart config refactor
noahonyejese Dec 3, 2024
591492b
fix: Fixed silent error
noahonyejese Dec 3, 2024
c0938df
fix: Fixed all of bartosz's suggestions
noahonyejese Dec 4, 2024
ac51939
wip
noahonyejese Dec 5, 2024
544d51e
refactore: Refactored getPalette
noahonyejese Dec 6, 2024
8c0f353
refactor: Refactored getPalette
noahonyejese Dec 6, 2024
04b8161
refactor: improved formating
noahonyejese Dec 6, 2024
f1229b3
refactor: extended color palettes
noahonyejese Dec 6, 2024
9f4dc02
fix: Changed Type name
noahonyejese Dec 11, 2024
9684d6f
fix: Changed column color handling to conform to other Chart types
noahonyejese Dec 11, 2024
bb8272a
fix: removed unnecessary client check
noahonyejese Dec 11, 2024
f3e7cfb
fix: improved state for color picker changes
noahonyejese Dec 11, 2024
f20ac39
refactor: refactored old way of handling colors
noahonyejese Dec 11, 2024
5c386ff
chore: Added comment for dynamic import reasoning
noahonyejese Dec 11, 2024
1e2147d
chore: Added color control translations
noahonyejese Dec 11, 2024
adec4ab
fix: Added chartConfig fields type check
noahonyejese Dec 11, 2024
d25212f
fix: Added missing getColorLabel type
noahonyejese Dec 11, 2024
9070012
fix: Fixed reverting segmented colors back to single colors
noahonyejese Dec 11, 2024
c5e117e
fix: removed exsesive theme import
noahonyejese Dec 11, 2024
f128f59
fix: Fixed Type issues
noahonyejese Dec 11, 2024
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
59 changes: 42 additions & 17 deletions app/config-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,35 @@ export type SortingType = t.TypeOf<typeof SortingType>;
const ColorMapping = t.record(t.string, t.string);
export type ColorMapping = t.TypeOf<typeof ColorMapping>;

const SingleColorField = t.type({
type: t.literal("single"),
paletteId: t.string,
color: t.string,
});
export type SingleColorField = t.TypeOf<typeof SingleColorField>;

const SegmentColorField = t.type({
type: t.literal("segment"),
paletteId: t.string,
colorMapping: ColorMapping,
});
export type SegmentColorField = t.TypeOf<typeof SegmentColorField>;

const MeasuresColorField = t.type({
type: t.literal("measures"),
paletteId: t.string,
colorMapping: ColorMapping,
});
export type MeasuresColorField = t.TypeOf<typeof MeasuresColorField>;

const ColorField = t.union([
SingleColorField,
SegmentColorField,
MeasuresColorField,
]);
//FIXME: Remove current type called ColorField and replace it with the new one
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
export type NewColorField = t.TypeOf<typeof ColorField>;

const GenericField = t.intersection([
t.type({ componentId: t.string }),
t.partial({ useAbbreviations: t.boolean }),
Expand All @@ -220,15 +249,7 @@ export type GenericField = t.TypeOf<typeof GenericField>;
const GenericFields = t.record(t.string, t.union([GenericField, t.undefined]));
export type GenericFields = t.TypeOf<typeof GenericFields>;

const GenericSegmentField = t.intersection([
GenericField,
t.type({
palette: t.string,
}),
t.partial({
colorMapping: ColorMapping,
}),
]);
const GenericSegmentField = GenericField;
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
export type GenericSegmentField = t.TypeOf<typeof GenericSegmentField>;

const AnimationType = t.union([t.literal("continuous"), t.literal("stepped")]);
Expand Down Expand Up @@ -297,6 +318,7 @@ const ColumnFields = t.intersection([
t.type({
x: t.intersection([GenericField, SortingField]),
y: t.intersection([GenericField, UncertaintyFieldExtension]),
color: t.union([SegmentColorField, SingleColorField]),
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
}),
t.partial({
segment: ColumnSegmentField,
Expand Down Expand Up @@ -324,6 +346,7 @@ const LineFields = t.intersection([
t.type({
x: GenericField,
y: t.intersection([GenericField, UncertaintyFieldExtension]),
color: t.union([SegmentColorField, SingleColorField]),
}),
t.partial({
segment: LineSegmentField,
Expand Down Expand Up @@ -361,6 +384,7 @@ const AreaFields = t.intersection([
GenericField,
t.partial({ imputationType: ImputationType }),
]),
color: t.union([SegmentColorField, SingleColorField]),
}),
t.partial({
segment: AreaSegmentField,
Expand All @@ -387,6 +411,7 @@ const ScatterPlotFields = t.intersection([
t.type({
x: GenericField,
y: GenericField,
color: t.union([SegmentColorField, SingleColorField]),
}),
t.partial({
segment: ScatterPlotSegmentField,
Expand Down Expand Up @@ -414,6 +439,7 @@ const PieFields = t.intersection([
t.type({
y: GenericField,
segment: PieSegmentField,
color: SegmentColorField,
}),
t.partial({ animation: AnimationField }),
]);
Expand Down Expand Up @@ -582,7 +608,7 @@ const CategoricalColorField = t.intersection([
t.type({
type: t.literal("categorical"),
componentId: t.string,
palette: t.string,
paletteId: t.string,
colorMapping: ColorMapping,
}),
t.partial({ useAbbreviations: t.boolean }),
Expand All @@ -595,7 +621,7 @@ const NumericalColorField = t.intersection([
t.type({
type: t.literal("numerical"),
componentId: t.string,
palette: t.union([DivergingPaletteType, SequentialPaletteType]),
paletteId: t.union([DivergingPaletteType, SequentialPaletteType]),
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
}),
t.union([
t.type({
Expand Down Expand Up @@ -623,6 +649,7 @@ export type ColorField =

const MapAreaLayer = t.type({
componentId: t.string,
//FIXME: convert to new color field type
color: t.union([CategoricalColorField, NumericalColorField]),
});
export type MapAreaLayer = t.TypeOf<typeof MapAreaLayer>;
Expand All @@ -631,6 +658,7 @@ const MapSymbolLayer = t.type({
componentId: t.string,
// symbol radius (size)
measureId: t.string,
//FIXME: convert to new color field type
color: t.union([FixedColorField, CategoricalColorField, NumericalColorField]),
});
export type MapSymbolLayer = t.TypeOf<typeof MapSymbolLayer>;
Expand Down Expand Up @@ -667,9 +695,8 @@ const ComboLineSingleFields = t.type({
x: GenericField,
y: t.type({
componentIds: t.array(t.string),
palette: t.string,
colorMapping: ColorMapping,
}),
color: MeasuresColorField,
});
noahonyejese marked this conversation as resolved.
Show resolved Hide resolved
export type ComboLineSingleFields = t.TypeOf<typeof ComboLineSingleFields>;

Expand All @@ -691,9 +718,8 @@ const ComboLineDualFields = t.type({
y: t.type({
leftAxisComponentId: t.string,
rightAxisComponentId: t.string,
palette: t.string,
colorMapping: ColorMapping,
}),
color: MeasuresColorField,
});
export type ComboLineDualFields = t.TypeOf<typeof ComboLineDualFields>;

Expand All @@ -716,9 +742,8 @@ const ComboLineColumnFields = t.type({
lineComponentId: t.string,
lineAxisOrientation: t.union([t.literal("left"), t.literal("right")]),
columnComponentId: t.string,
palette: t.string,
colorMapping: ColorMapping,
}),
color: MeasuresColorField,
});

export type ComboLineColumnFields = t.TypeOf<typeof ComboLineColumnFields>;
Expand Down