@patternfly/react-charts
Version:
This library provides a set of React chart components for use with the PatternFly reference implementation.
154 lines • 6.1 kB
JavaScript
import { getComputedStyleValue } from './styles';
// eslint-disable-next-line camelcase
import chart_echarts_BackgroundColor from '@patternfly/react-tokens/dist/esm/chart_echarts_BackgroundColor';
var SymbolType;
(function (SymbolType) {
SymbolType["arrow"] = "arrow";
SymbolType["circle"] = "circle";
SymbolType["diamond"] = "diamond";
SymbolType["emptyArrow"] = "emptyArrow";
SymbolType["emptyCircle"] = "emptyCircle";
SymbolType["emptyDiamond"] = "emptyDiamond";
SymbolType["emptyPin"] = "emptyPin";
SymbolType["emptyRect"] = "emptyRect";
SymbolType["emptyRoundRect"] = "emptyRoundRect";
SymbolType["emptySquare"] = "emptySquare";
SymbolType["emptyTriangle"] = "emptyTriangle";
SymbolType["pin"] = "pin";
SymbolType["rect"] = "rect";
SymbolType["roundRect"] = "roundRect";
SymbolType["square"] = "square";
SymbolType["triangle"] = "triangle";
})(SymbolType || (SymbolType = {}));
// ECharts icon types -- see https://svg-path.com/
const symbols = {
arrow: 'M12.5 7L19.9667 18.2L12.5 15.4L5.0333 18.2L12.5 7Z',
circle: 'M18.1 7A5.6 5.6 0 1 1 18.1 6.9994Z',
diamond: 'M12.5 1.4L18.1 7L12.5 12.6L6.9 7Z',
emptyArrow: 'M12.5 7L19.9667 18.2L12.5 15.4L5.0333 18.2L12.5 7Z',
emptyCircle: 'M18.1 7A5.6 5.6 0 1 1 18.1 6.9994Z',
emptyDiamond: 'M12.5 1.4L18.1 7L12.5 12.6L6.9 7Z',
emptyPin: 'M9.4642 2.04A3.36 3.36 0 1 1 15.5358 2.04C14.6718 3.8615 12.5 4.648 12.5 7C12.5 4.648 10.3282 3.8615 9.4642 2.04Z',
emptyRect: 'M6.9,1.4 l14.2,0 l0,11.2 l-14.2,0 Z',
emptyRoundRect: 'M9.7,1.4 L18.3,1.4 A2.8,2.8,0,0,1,21.1,4.2 L21.1,9.8 A2.8,2.8,0,0,1,18.3,12.6 L9.7,12.6 A2.8,2.8,0,0,1,6.9,9.8 L6.9,4.2 A2.8,2.8,0,0,1,9.7,1.4 Z',
emptySquare: 'M6.9 1.4l11.2 0l0 11.2l-11.2 0Z',
emptyTriangle: 'M12.5 1.4L18.1 12.5L12.5 12.5L6.9 12.5Z',
pin: 'M9.4642 2.04A3.36 3.36 0 1 1 15.5358 2.04C14.6718 3.8615 12.5 4.648 12.5 7C12.5 4.648 10.3282 3.8615 9.4642 2.04Z',
rect: 'M6.9,1.4 l18.2,0 l0,11.2 l-18.2,0 Z',
roundRect: 'M9.7,1.4 L22.3,1.4 A2.8,2.8,0,0,1,25.1,4.2 L25.1,9.8 A2.8,2.8,0,0,1,22.3,12.6 L9.7,12.6 A2.8,2.8,0,0,1,6.9,9.8 L6.9,4.2 A2.8,2.8,0,0,1,9.7,1.4 Z',
square: 'M6.9 1.4l11.2 0l0 11.2l-11.2 0Z',
triangle: 'M12.5 1.4L18.1 12.5L12.5 12.5L6.9 12.5Z'
};
/**
* Returns marker -- see https://github.com/apache/echarts/issues/19826
*
* @param serie
* @param symbol
* @param color
* @private Not intended as public API and subject to change
*/
export const getMarker = (serie, symbol, color = '') => {
const size = 18;
let path;
let pathStyle = `fill:${color};`;
const svgStyle = 'vertical-align: middle;';
let transform;
// Set marker type
switch (symbol) {
case SymbolType.arrow:
case SymbolType.circle:
case SymbolType.diamond:
case SymbolType.emptyArrow:
case SymbolType.emptyCircle:
case SymbolType.emptyDiamond:
case SymbolType.emptyPin:
case SymbolType.emptyRect:
case SymbolType.emptyRoundRect:
case SymbolType.emptySquare:
case SymbolType.emptyTriangle:
case SymbolType.pin:
case SymbolType.rect:
case SymbolType.roundRect:
case SymbolType.square:
case SymbolType.triangle:
path = symbols[symbol];
break;
default:
path = symbols.square;
break;
}
// Set path style for EChart symbols
switch (symbol) {
case SymbolType.emptyArrow:
case SymbolType.emptyCircle:
case SymbolType.emptyDiamond:
case SymbolType.emptyPin:
case SymbolType.emptyRect:
case SymbolType.emptyRoundRect:
case SymbolType.emptySquare:
case SymbolType.emptyTriangle:
pathStyle = `fill:${getComputedStyleValue(chart_echarts_BackgroundColor)}; stroke:${color}; stroke-width:2`;
break;
default:
pathStyle = `fill:${color}; margin-left:-50px;`;
}
// Set SVG style for EChart symbols
switch (symbol) {
case SymbolType.arrow:
case SymbolType.emptyArrow:
transform = `translate(-5 -5)`;
break;
case SymbolType.emptyDiamond:
transform = `translate(-5 5)`;
break;
case SymbolType.emptyRect:
case SymbolType.emptyRoundRect:
transform = `translate(-5 0)`;
break;
case SymbolType.pin:
transform = `translate(-5 5)`;
break;
case SymbolType.rect:
transform = `translate(-7 0)`;
break;
case SymbolType.roundRect:
transform = `translate(-7 0)`;
break;
default:
transform = `translate(-5 0)`;
break;
}
const marker = `<path d="${path}" style="${pathStyle}" transform="${transform}" />`;
const svg = `<svg viewBox="0 0 ${size} ${size}" height="${size}px" width="${size}px" style="${svgStyle}">${marker}</svg>`;
return svg;
};
/**
* Returns default symbol
*
* @param series
* @param seriesIndex
* @param echart
* @private Not intended as public API and subject to change
*/
export const getSymbol = (series, seriesIndex, echart) => {
var _a;
const ase = echart === null || echart === void 0 ? void 0 : echart.getModel().findComponents({ mainType: 'series' });
const data = ase[seriesIndex].getData();
const symbol = (_a = data === null || data === void 0 ? void 0 : data.getVisual('symbol')) === null || _a === void 0 ? void 0 : _a.replace(/"/g, '');
if (!symbol) {
const serie = series[seriesIndex];
if (serie === null || serie === void 0 ? void 0 : serie.symbol) {
return serie === null || serie === void 0 ? void 0 : serie.symbol;
}
switch (serie === null || serie === void 0 ? void 0 : serie.type) {
case 'bar':
return SymbolType.rect;
case 'line':
return SymbolType.square;
default:
break;
}
}
return symbol;
};
//# sourceMappingURL=symbol.js.map