@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
208 lines • 6.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorTheme = void 0;
const tslib_1 = require("tslib");
const chart_echarts_BackgroundColor_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/chart_echarts_BackgroundColor'));
const chart_echarts_global_axis_axis_line_item_style_Color_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/chart_echarts_global_axis_axis_line_item_style_Color'));
const chart_echarts_global_axis_axis_tick_item_style_Color_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/chart_echarts_global_axis_axis_tick_item_style_Color'));
const chart_echarts_skeleton_label_Color_1 = tslib_1.__importDefault(require('@patternfly/react-tokens/dist/js/chart_echarts_skeleton_label_Color'));
const styles_1 = require("../utils/styles");
/**
* ECharts skeleton color theme
*
* @private Not intended as public API and subject to change
*/
const ColorTheme = (props) => {
const { COLOR_SCALE } = props;
const labelProps = {
backgroundColor: COLOR_SCALE[0],
color: (0, styles_1.getComputedStyleValue)(chart_echarts_skeleton_label_Color_1.default)
};
const axisProps = {
axisLabel: Object.assign({}, labelProps),
axisLine: {
lineStyle: {
color: (0, styles_1.getComputedStyleValue)(chart_echarts_global_axis_axis_line_item_style_Color_1.default)
}
},
axisTick: {
lineStyle: {
color: (0, styles_1.getComputedStyleValue)(chart_echarts_global_axis_axis_tick_item_style_Color_1.default)
}
},
splitArea: {
areaStyle: {
color: COLOR_SCALE
}
},
splitLine: {
lineStyle: {
color: [COLOR_SCALE[0]]
}
}
};
return {
color: COLOR_SCALE,
backgroundColor: (0, styles_1.getComputedStyleValue)(chart_echarts_BackgroundColor_1.default), // See https://echarts.apache.org/en/option.html#backgroundColor
bar: {
itemStyle: {
barBorderColor: COLOR_SCALE[0]
}
},
boxplot: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
candlestick: {
itemStyle: {
borderColor: COLOR_SCALE[0],
borderColor0: COLOR_SCALE[1],
color: COLOR_SCALE[0],
color0: COLOR_SCALE[1]
}
},
categoryAxis: Object.assign({}, axisProps),
dataZoom: {},
funnel: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
gauge: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
geo: {
emphasis: {
itemStyle: {
areaColor: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps)
},
itemStyle: {
areaColor: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps)
},
graph: {
color: COLOR_SCALE,
itemStyle: {
borderColor: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps),
lineStyle: {
color: COLOR_SCALE[0]
}
},
label: Object.assign({}, labelProps),
legend: {
textStyle: Object.assign({}, labelProps)
},
line: {},
logAxis: Object.assign({}, axisProps),
map: {
emphasis: {
itemStyle: {
areaColor: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps)
},
itemStyle: {
areaColor: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps)
},
markPoint: {
emphasis: {
label: Object.assign({}, labelProps)
},
label: Object.assign({}, labelProps)
},
parallel: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
pie: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
radar: {},
sankey: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
scatter: {
itemStyle: {
borderColor: COLOR_SCALE[0]
}
},
textStyle: {},
timeAxis: Object.assign({}, axisProps),
timeline: {
emphasis: {
controlStyle: {
color: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
itemStyle: {
color: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps)
},
checkpointStyle: {
color: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
controlStyle: {
color: COLOR_SCALE[0],
borderColor: COLOR_SCALE[0]
},
itemStyle: {
color: COLOR_SCALE[0]
},
label: Object.assign({}, labelProps),
lineStyle: {
color: COLOR_SCALE[0]
}
},
title: {
subtextStyle: Object.assign({}, labelProps),
textStyle: Object.assign({}, labelProps)
},
toolbox: {
emphasis: {
iconStyle: {
borderColor: COLOR_SCALE[0]
}
},
iconStyle: {
borderColor: COLOR_SCALE[0]
}
},
tooltip: {
axisPointer: {
crossStyle: {
color: COLOR_SCALE[0]
},
lineStyle: {
color: COLOR_SCALE[0]
}
}
},
valueAxis: Object.assign({}, axisProps),
visualMap: {
color: COLOR_SCALE
}
};
};
exports.ColorTheme = ColorTheme;
//# sourceMappingURL=skeleton-theme.js.map