mirror of
https://github.com/grafana/grafana.git
synced 2025-08-01 16:05:53 +08:00
47f8717149
* update eslint, tsconfig + esbuild to handle new jsx transform * remove thing that breaks the new jsx transform * remove react imports * adjust grafana-icons build * is this the correct syntax? * try this * well this was much easier than expected... * change grafana-plugin-configs webpack config * fixes * fix lockfile * fix 2 more violations * use path.resolve instead of require.resolve * remove react import * fix react imports * more fixes * remove React import * remove import React from docs * remove another react import
33 lines
995 B
TypeScript
33 lines
995 B
TypeScript
import { defaultEdgeColor } from './Edge';
|
|
|
|
/**
|
|
* In SVG you need to supply this kind of marker that can be then referenced from a line segment as an ending of the
|
|
* line turning in into arrow. Needs to be included in the svg element and then referenced as markerEnd="url(#triangle)"
|
|
*/
|
|
export function EdgeArrowMarker({
|
|
id = 'triangle',
|
|
fill = defaultEdgeColor,
|
|
headHeight = 10,
|
|
}: {
|
|
id?: string;
|
|
fill?: string;
|
|
headHeight?: number;
|
|
}) {
|
|
return (
|
|
<defs>
|
|
<marker
|
|
id={id}
|
|
viewBox="0 0 10 10"
|
|
refX="1" // shift the arrow head slightly closer to the center of the line it will be attached to, to ensure no empty space is shown between the line and the arrow head
|
|
refY="5"
|
|
markerUnits="userSpaceOnUse"
|
|
markerWidth={headHeight} // equal to the height just for simplicily
|
|
markerHeight={headHeight}
|
|
orient="auto"
|
|
>
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill={fill} />
|
|
</marker>
|
|
</defs>
|
|
);
|
|
}
|