@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
365 lines • 12.2 kB
TypeScript
export declare const BaseTheme: {
area: {
style: {
data: {
fill: "var(--pf-chart-area--data--Fill, #151515)";
fillOpacity: 0.3;
strokeWidth: 2;
};
labels: {
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
axis: {
style: {
axis: {
fill: "var(--pf-chart-axis--axis--Fill, transparent)";
strokeWidth: 1;
stroke: "var(--pf-chart-axis--axis--stroke--Color, #d2d2d2)";
strokeLinecap: "round";
strokeLinejoin: "round";
};
axisLabel: {
padding: 40;
stroke: "var(--pf-chart-axis--axis-label--stroke--Color, transparent)";
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
grid: {
fill: "var(--pf-chart-axis--grid--Fill, none)";
stroke: string;
pointerEvents: "painted";
strokeLinecap: "round";
strokeLinejoin: "round";
};
ticks: {
fill: "var(--pf-chart-axis--tick--Fill, transparent)";
size: 5;
stroke: "var(--pf-chart-axis--tick--stroke--Color, #d2d2d2)";
strokeLinecap: "round";
strokeLinejoin: "round";
strokeWidth: 1;
};
tickLabels: {
fill: "var(--pf-chart-axis--tick-label--Fill, #4f5255)";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
};
};
padding: 50;
height: 300;
width: 450;
};
bar: {
barWidth: 10;
style: {
data: {
fill: "var(--pf-chart-bar--data--Fill, #151515)";
padding: 8;
stroke: "var(--pf-chart-bar--data--stroke, none)";
strokeWidth: 0;
};
labels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
boxplot: {
style: {
max: {
padding: 8;
stroke: "var(--pf-chart-boxplot--max--stroke--Color, #151515)";
strokeWidth: 1;
};
maxLabels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
median: {
padding: 8;
stroke: "var(--pf-chart-boxplot--median--stroke--Color, #151515)";
strokeWidth: 1;
};
medianLabels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
min: {
padding: 8;
stroke: "var(--pf-chart-boxplot--min--stroke--Color, #151515)";
strokeWidth: 1;
};
minLabels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
q1: {
fill: "var(--pf-chart-boxplot--lower-quartile--Fill, #8a8d90)";
padding: 8;
};
q1Labels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
q3: {
fill: "var(--pf-chart-boxplot--upper-quartile--Fill, #8a8d90)";
padding: 8;
};
q3Labels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
boxWidth: 20;
padding: 50;
height: 300;
width: 450;
};
candlestick: {
candleColors: {
positive: "var(--pf-chart-candelstick--candle--positive--Color, #fff)";
negative: "var(--pf-chart-candelstick--candle--negative--Color, #151515)";
};
style: {
data: {
stroke: "var(--pf-chart-candelstick--data--stroke--Color, #151515)";
strokeWidth: 1;
};
labels: {
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
chart: {
padding: 50;
height: 300;
width: 450;
};
errorbar: {
borderWidth: 8;
style: {
data: {
fill: "var(--pf-chart-errorbar--data--Fill, transparent)";
opacity: 1;
stroke: "var(--pf-chart-errorbar--data-stroke--Color, #151515)";
strokeWidth: 2;
};
labels: {
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
group: {
padding: 50;
height: 300;
width: 450;
};
legend: {
gutter: 20;
orientation: "horizontal";
titleOrientation: "top";
style: {
data: {
type: "square";
};
labels: {
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
title: {
fontSize: 14;
padding: 2;
fontFamily: string;
letterSpacing: "normal";
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
};
line: {
style: {
data: {
fill: "var(--pf-chart-line--data--Fill, transparent)";
opacity: 1;
stroke: "var(--pf-chart-line--data--stroke--Color, #151515)";
strokeWidth: 2;
};
labels: {
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
pie: {
padding: 20;
style: {
data: {
padding: 8;
stroke: "var(--pf-chart-pie--data--stroke--Color, transparent)";
strokeWidth: 1;
};
labels: {
padding: 8;
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
height: 230;
width: 230;
};
scatter: {
style: {
data: {
fill: "var(--pf-chart-scatter--data--Fill, #151515)";
opacity: 1;
stroke: "var(--pf-chart-scatter--data--stroke--Color, transparent)";
strokeWidth: 0;
};
labels: {
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
padding: 10;
stroke: "var(--pf-chart-global--label--stroke, transparent)";
fill: "var(--pf-chart-global--label--Fill, #151515)";
};
};
padding: 50;
height: 300;
width: 450;
};
stack: {
style: {
data: {
strokeWidth: 1;
};
};
padding: 50;
height: 300;
width: 450;
};
tooltip: {
cornerRadius: 0;
flyoutPadding: 8;
flyoutStyle: {
cornerRadius: 0;
fill: "var(--pf-chart-tooltip--flyoutStyle--Fill, #151515)";
pointerEvents: "var(--pf-chart-tooltip--flyoutStyle--PointerEvents, none)";
stroke: "var(--pf-chart-tooltip--flyoutStyle--stroke--Color, #151515)";
strokeWidth: "var(--pf-chart-tooltip--flyoutStyle--stroke--Width, 0)";
};
pointerLength: 10;
pointerWidth: 20;
style: {
fill: "var(--pf-chart-tooltip--Fill, #f0f0f0)";
pointerEvents: "var(--pf-chart-tooltip--PointerEvents, none)";
};
};
voronoi: {
style: {
data: {
fill: "var(--pf-chart-voronoi--data--Fill, transparent)";
stroke: "var(--pf-chart-voronoi--data--stroke--Color, transparent)";
strokeWidth: 0;
};
labels: {
fill: "var(--pf-chart-voronoi--labels--Fill, #f0f0f0)";
padding: 8;
pointerEvents: "none";
textAnchor: "middle";
fontFamily: string;
fontSize: 14;
letterSpacing: "normal";
stroke: "var(--pf-chart-global--label--stroke, transparent)";
};
flyout: {
fill: "var(--pf-chart-voronoi--flyout--stroke--Fill, #151515)";
pointerEvents: "var(--pf-chart-voronoi--flyout--PointerEvents, none)";
stroke: "var(--pf-chart-voronoi--flyout--stroke--Color, #151515)";
strokeWidth: "var(--pf-chart-voronoi--flyout--stroke--Width, 1)";
};
};
padding: 50;
height: 300;
width: 450;
};
};
//# sourceMappingURL=base-theme.d.ts.map