Skip to content

Instantly share code, notes, and snippets.

@aaroncrawford
Created August 17, 2017 19:24
Show Gist options
  • Save aaroncrawford/13f4c2e427245e9db3e48886fe3accd4 to your computer and use it in GitHub Desktop.
Save aaroncrawford/13f4c2e427245e9db3e48886fe3accd4 to your computer and use it in GitHub Desktop.
/*
"material" theme (VictoryTheme.material)
Try changing the theme. You could start with `colors` or `fontSize`.
*/
// Colors
const yellow200 = "#FFF59D";
const deepOrange600 = "#F4511E";
const lime300 = "#DCE775";
const lightGreen500 = "#8BC34A";
const teal700 = "#00796B";
const cyan900 = "#006064";
const colors = [
deepOrange600,
yellow200,
lime300,
lightGreen500,
teal700,
cyan900
];
const pipsyBlue = '#0A61DF';
const blueGrey50 = "#ECEFF1";
const blueGrey300 = "#90A4AE";
const blueGrey700 = "#455A64";
const grey900 = "#212121";
const greyPipsy = '#E7E7E7';
// Typography
const sansSerif = "'Proxima Nova', 'Helvetica Neue', Helvetica, sans-serif";
const letterSpacing = "normal";
const fontSize = 12;
// Layout
const padding = 8;
const baseProps = {
width: 350,
height: 350,
padding: 50
};
// Labels
const baseLabelStyles = {
fontFamily: sansSerif,
fontSize,
letterSpacing,
padding,
fill: 'white'
};
var assign = require('object-assign');
const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
// Strokes
const strokeDasharray = "10, 5";
const strokeLinecap = "round";
const strokeLinejoin = "round";
// Put it all together...
export const pipsyTheme = {
area: assign({
style: {
data: {
fill: pipsyBlue,
opacity:.8
},
labels: centeredLabelStyles
}
}, baseProps),
axis: assign({
style: {
axis: {
fill: "transparent",
stroke: '#E7E7E7',
strokeWidth: 1,
strokeLinecap,
strokeLinejoin
},
axisLabel: assign({}, centeredLabelStyles, {
padding,
stroke: "transparent"
}),
grid: {
fill: "transparent",
stroke: '#E7E7E7'
},
ticks: {
fill: "transparent",
size: 5,
stroke: blueGrey300,
strokeWidth: 1,
strokeLinecap,
strokeLinejoin
},
tickLabels: assign({}, baseLabelStyles, {
fill: blueGrey700,
stroke: "transparent"
})
}
}, baseProps),
bar: assign({
style: {
data: {
fill: blueGrey700,
padding,
stroke: "transparent",
strokeWidth: 0,
width: 5
},
labels: baseLabelStyles
}
}, baseProps),
candlestick: assign({
style: {
data: {
stroke: blueGrey700
},
labels: centeredLabelStyles
},
candleColors: {
positive: "#ffffff",
negative: blueGrey700
}
}, baseProps),
chart: baseProps,
errorbar: assign({
style: {
data: {
fill: "transparent",
opacity: 1,
stroke: blueGrey700,
strokeWidth: 2
},
labels: assign({}, centeredLabelStyles, {
stroke: "transparent",
strokeWidth: 0
})
}
}, baseProps),
group: assign({
colorScale: colors
}, baseProps),
line: assign({
style: {
data: {
fill: "transparent",
opacity: 1,
stroke: pipsyBlue,
strokeWidth: 2
},
labels: assign({}, baseLabelStyles, {
stroke: "transparent",
strokeWidth: 0,
textAnchor: "start"
})
}
}, baseProps),
pie: assign({
colorScale: colors,
style: {
data: {
padding,
stroke: blueGrey50,
strokeWidth: 1
},
labels: assign({}, baseLabelStyles, {
padding: 20,
stroke: "transparent",
strokeWidth: 0
})
}
}, baseProps),
scatter: assign({
style: {
data: {
fill: blueGrey700,
opacity: 1,
stroke: "transparent",
strokeWidth: 0
},
labels: assign({}, centeredLabelStyles, {
stroke: "transparent"
})
}
}, baseProps),
stack: assign({
colorScale: colors
}, baseProps),
tooltip: assign({
style: {
data: {
fill: "red",
stroke: "transparent",
strokeWidth: 0
},
labels: centeredLabelStyles,
flyout: {
stroke: blueGrey700,
strokeWidth: 1,
fill: "red"
}
},
flyoutProps: {
cornerRadius: 10,
pointerLength: 10
}
}, {}),
voronoi: assign({
style: {
data: {
fill: "transparent",
stroke: "transparent",
strokeWidth: 0
},
labels: centeredLabelStyles
}
}, baseProps)
};
Copy link

ghost commented Aug 18, 2017

cool

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment