66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import React from "react";
|
|
|
|
import { ConfigData } from "../../config";
|
|
import { Blip } from "../../model";
|
|
|
|
type VisualBlipProps = {
|
|
className: string;
|
|
fill: string;
|
|
"data-background-color": string;
|
|
"data-text-color": string;
|
|
"data-tip": string;
|
|
key: number;
|
|
};
|
|
|
|
export const ChangedBlip: React.FC<
|
|
{ blip: Blip; config: ConfigData } & VisualBlipProps
|
|
> = ({ blip, config, ...props }) => {
|
|
const centeredX = blip.coordinates.x - config.chartConfig.blipSize / 2,
|
|
centeredY = blip.coordinates.y - config.chartConfig.blipSize / 2;
|
|
|
|
return (
|
|
<rect
|
|
transform={`rotate(-45 ${centeredX} ${centeredY})`}
|
|
x={centeredX}
|
|
y={centeredY}
|
|
width={config.chartConfig.blipSize}
|
|
height={config.chartConfig.blipSize}
|
|
rx="3"
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const NewBlip: React.FC<
|
|
{ blip: Blip; config: ConfigData } & VisualBlipProps
|
|
> = ({ blip, config, ...props }) => {
|
|
const centeredX = blip.coordinates.x - config.chartConfig.blipSize / 2,
|
|
centeredY = blip.coordinates.y - config.chartConfig.blipSize / 2;
|
|
|
|
/*
|
|
The below is a predefined path of a triangle with rounded corners.
|
|
I didn't find any more human friendly way of doing this as all examples I found have tons of lines of code
|
|
e.g. https://observablehq.com/@perlmonger42/interactive-rounded-corners-on-svg-polygons-using-d3-js
|
|
*/
|
|
return (
|
|
<path
|
|
transform={`translate(${centeredX}, ${centeredY})`}
|
|
d="M.247 10.212l5.02-8.697a2 2 0 013.465 0l5.021 8.697a2 2 0 01-1.732 3H1.98a2 2 0 01-1.732-3z"
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const DefaultBlip: React.FC<
|
|
{ blip: Blip; config: ConfigData } & VisualBlipProps
|
|
> = ({ blip, config, ...props }) => {
|
|
return (
|
|
<circle
|
|
r={config.chartConfig.blipSize / 2}
|
|
cx={blip.coordinates.x}
|
|
cy={blip.coordinates.y}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|