@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
114 lines (113 loc) • 7.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.setSeriesMarkerStyles = exports.setDonutColors = exports.setSeriesColors = exports.colorMapping = exports.patternQuaternary = exports.patternTertiary = exports.chartQuinaryStrokeColor = exports.chartQuinaryBackgroundColor = exports.chartQuaternaryStrokeColor = exports.chartQuaternaryBackgroundColor = exports.chartTertiaryStrokeColor = exports.chartTertiaryBackgroundColor = exports.chartSecondaryColor = exports.chartPrimaryColor = exports.trendNegativeColor = exports.trendPositiveColor = exports.lineChartQuinaryColor = exports.lineChartQueternaryColor = exports.lineChartTertiaryColor = exports.lineChartSecondaryColor = exports.lineChartPrimaryColor = exports.tooltipShadows = exports.tooltipBackgroundColor = exports.legendHoverColor = exports.legendInactiveColor = exports.legendColor = exports.labelsColor = exports.gridColor = exports.backgroundColor = exports.chartFontFamily = void 0;
const
// function is used to set up the colors including lineColor(svg stroke) on each of the series objects
// based on the length of the series array
setSeriesColors = function (series) {
const strokeColorMapping = [
exports.chartPrimaryColor,
exports.chartSecondaryColor,
exports.chartTertiaryStrokeColor,
exports.chartQuaternaryStrokeColor,
exports.chartQuaternaryStrokeColor,
];
for (let i = 0; i < series.length; i++) {
// Added a modulus in case the user passes in more than 5 series so it doesn't error out
const color = strokeColorMapping[i % strokeColorMapping.length];
if (series[i].type === "bar") {
series[i].borderColor = color;
series[i].color = color;
}
else {
series[i].lineColor =
color;
series[i].fillOpacity =
1;
}
}
}, setDonutColors = function (series) {
const colors = [
{ lineColor: exports.chartPrimaryColor, borderColor: exports.chartPrimaryColor },
{
lineColor: exports.chartSecondaryColor,
borderColor: exports.chartSecondaryColor,
},
{
lineColor: exports.patternTertiary,
borderColor: exports.chartTertiaryStrokeColor,
},
{
lineColor: exports.patternQuaternary,
borderColor: exports.chartQuaternaryStrokeColor,
},
{
lineColor: exports.chartQuinaryBackgroundColor,
borderColor: exports.chartQuinaryStrokeColor,
},
];
const { data } = series;
data.forEach((item, index) => {
item.lineColor = colors[index].lineColor;
item.borderColor = colors[index].borderColor;
});
return colors.map((color) => color.lineColor);
}, setSeriesMarkerStyles = function (series) {
series.forEach((s, i) => {
s.zIndex = series.length - i;
s.marker = {
symbol: "circle",
lineWidth: 1,
fillColor: "black",
lineColor: "white",
states: {
hover: {
animation: { duration: 0 },
radius: 4,
lineWidth: 2,
},
normal: {
animation: false,
},
},
};
});
};
exports.chartFontFamily = '"Market Sans", Arial, sans-serif', exports.backgroundColor = "var(--color-background-primary)", exports.gridColor = "var(--color-data-viz-grid)", exports.labelsColor = "var(--color-foreground-secondary)", exports.legendColor = "var(--color-foreground-primary)", exports.legendInactiveColor = "var(--color-data-viz-legend-inactive)", exports.legendHoverColor = "var(--color-data-viz-legend-hover)", exports.tooltipBackgroundColor = "var(--color-background-primary)", exports.tooltipShadows = "drop-shadow(0 2px 7px var(--color-data-viz-tooltip-shadow-primary)) drop-shadow(0 5px 7px var(--color-data-viz-tooltip-shadow-secondary))", exports.lineChartPrimaryColor = "var(--color-data-viz-line-chart-primary)", exports.lineChartSecondaryColor = "var(--color-data-viz-line-chart-secondary)", exports.lineChartTertiaryColor = "var(--color-data-viz-line-chart-tertiary)", exports.lineChartQueternaryColor = "var(--color-data-viz-line-chart-queternary)", exports.lineChartQuinaryColor = "var(--color-data-viz-line-chart-quinary)", exports.trendPositiveColor = "var(--color-data-viz-trend-positive)", exports.trendNegativeColor = "var(--color-data-viz-trend-negative)", exports.chartPrimaryColor = "var(--color-data-viz-chart-primary)", exports.chartSecondaryColor = "var(--color-data-viz-chart-secondary)", exports.chartTertiaryBackgroundColor = "var(--color-data-viz-chart-tertiary-background)", exports.chartTertiaryStrokeColor = "var(--color-data-viz-chart-tertiary-stroke)", exports.chartQuaternaryBackgroundColor = "var(--color-data-viz-chart-quaternary-background)", exports.chartQuaternaryStrokeColor = "var(--color-data-viz-chart-quaternary-stroke)", exports.chartQuinaryBackgroundColor = "var(--color-data-viz-chart-quinary-background)", exports.chartQuinaryStrokeColor = "var(--color-data-viz-chart-quinary-stroke)",
// patterns are in highcharts PatternOptionsObject format
// refer to https://api.highcharts.com/class-reference/Highcharts.PatternOptionsObject
exports.patternTertiary = {
pattern: {
path: {
// d is a standard SVG path definition string
// refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
d: "M0 0 L0 3", // draw a 3 until vertical line
},
width: 4.5, // defines the x bounds of the repeating pattern
height: 3, // defines the y bounds of the repeating pattern
backgroundColor: exports.chartTertiaryBackgroundColor, // sets the patterns background color
color: exports.chartTertiaryStrokeColor, // sets the patterns stroke color
patternTransform: "rotate(-60)", // rotates the path -60 degrees
},
}, exports.patternQuaternary = {
pattern: {
path: {
// d is a standard SVG path definition string
// refer to https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
d: "M0 0 L3 0",
},
width: 3, // defines the x bounds of the repeating pattern
height: 5, // defines the y bounds of the repeating pattern
backgroundColor: exports.chartQuaternaryBackgroundColor, // sets the patterns background color
color: exports.chartQuaternaryStrokeColor, // sets the patterns stroke color
},
}, exports.colorMapping = [
exports.chartPrimaryColor,
exports.chartSecondaryColor,
exports.patternTertiary,
exports.patternQuaternary,
exports.chartQuinaryBackgroundColor,
],
// function is used to set up the colors including lineColor(svg stroke) on each of the series objects
// based on the length of the series array
exports.setSeriesColors = setSeriesColors, exports.setDonutColors = setDonutColors, exports.setSeriesMarkerStyles = setSeriesMarkerStyles;