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.

Sign up for GitHub

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

feat(theme): base theme prop #333

Merged
merged 4 commits into from
Aug 21, 2019
Merged

feat(theme): base theme prop #333

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3ff483
feat(theme): base theme prop
nickofthyme Aug 20, 2019
8c9a163
chore: add story
nickofthyme Aug 20, 2019
876300c
Merge branch 'master' into feat/base-theme
nickofthyme Aug 21, 2019
7d5540c
refactor: theme type logic
nickofthyme Aug 21, 2019
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
34 changes: 26 additions & 8 deletions src/specs/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ interface TooltipProps {
headerFormatter?: TooltipValueFormatter;
}

const THEMES: { [type: string]: Theme } = {
[BaseThemeTypes.Light]: LIGHT_THEME,
[BaseThemeTypes.Dark]: DARK_THEME,
};

/**
* Event used to syncronize cursors between Charts.
*
Expand All @@ -52,8 +57,22 @@ function isTooltipType(config: TooltipType | TooltipProps): config is TooltipTyp

export interface SettingSpecProps {
chartStore?: ChartStore;
/**
* Full or partial theme to be merged with base
*/
theme?: Theme | PartialTheme;
/**
* Theme type used to get base theme
*
* @default `BaseThemeType.Light`
*/
baseThemeType?: BaseThemeType;
/**
* Full default theme to use as base
*
* @overrides `baseThemeType`
*/
baseTheme?: Theme;
rendering: Rendering;
rotation: Rotation;
animateData: boolean;
Expand All @@ -76,20 +95,18 @@ export interface SettingSpecProps {
xDomain?: Domain | DomainRange;
}

function getTheme(theme?: Theme | PartialTheme, baseThemeType: BaseThemeType = BaseThemeTypes.Light): Theme {
if (theme) {
const baseTheme = baseThemeType === BaseThemeTypes.Light ? LIGHT_THEME : DARK_THEME;
return mergeWithDefaultTheme(theme, baseTheme);
}
function getTheme(baseThemeType: BaseThemeType, theme?: Theme | PartialTheme, baseTheme?: Theme): Theme {
const base = baseTheme ? baseTheme : THEMES[baseThemeType];

return LIGHT_THEME;
return theme ? mergeWithDefaultTheme(theme, base) : base;
}

function updateChartStore(props: SettingSpecProps) {
const {
chartStore,
theme,
baseThemeType,
baseThemeType = BaseThemeTypes.Light,
baseTheme,
rotation,
rendering,
animateData,
Expand All @@ -110,11 +127,12 @@ function updateChartStore(props: SettingSpecProps) {
debug,
xDomain,
} = props;

if (!chartStore) {
return;
}

chartStore.chartTheme = getTheme(theme, baseThemeType);
chartStore.chartTheme = getTheme(baseThemeType, theme, baseTheme);
chartStore.chartRotation = rotation;
chartStore.chartRendering = rendering;
chartStore.animateData = animateData;
Expand Down
43 changes: 42 additions & 1 deletion stories/styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
TooltipType,
RecursivePartial,
Theme,
LIGHT_THEME,
} from '../src/';
import * as TestDatasets from '../src/utils/data_samples/test_dataset';
import { palettes } from '../src/utils/themes/colors';
Expand Down Expand Up @@ -442,7 +443,7 @@ storiesOf('Stylings', module)
</Chart>
);
})
.add('partial custom theme', () => {
.add('partial custom theme with baseThemeType', () => {
const customPartialTheme: PartialTheme = {
barSeriesStyle: {
rectBorder: {
Expand Down Expand Up @@ -487,6 +488,46 @@ storiesOf('Stylings', module)
</Chart>
);
})
.add('partial custom theme with baseTheme', () => {
const customPartialTheme: PartialTheme = {
barSeriesStyle: {
rectBorder: {
stroke: color('BarBorderStroke', 'white'),
visible: true,
},
},
};

return (
<Chart className="story-chart">
<Settings showLegend theme={customPartialTheme} baseTheme={LIGHT_THEME} legendPosition={Position.Right} />
<Axis id={getAxisId('bottom')} position={Position.Bottom} title="Bottom axis" showOverlappingTicks={true} />
<Axis
id={getAxisId('left2')}
title="Left axis"
position={Position.Left}
tickFormat={(d) => Number(d).toFixed(2)}
/>
<Axis id={getAxisId('top')} position={Position.Top} title="Top axis" showOverlappingTicks={true} />
<Axis
id={getAxisId('right')}
title="Right axis"
position={Position.Right}
tickFormat={(d) => Number(d).toFixed(2)}
/>
<BarSeries
id={getSpecId('bars')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y']}
splitSeriesAccessors={['g']}
stackAccessors={['x']}
data={data1}
/>
</Chart>
);
})
.add('custom series colors through spec props', () => {
const barCustomSeriesColors: CustomSeriesColorsMap = new Map();
const barDataSeriesColorValues: DataSeriesColorsValues = {
Expand Down