Merge remote-tracking branch 'jar0s/feature/radar-chart'

src/components/Chart/BlipShapes.tsx

@@ -0,0 +1,64 @@
+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}
+        />
+    );
+};