Merge branch 'chart'

frontend/src/charts/scatters/Circles.tsx

+import { ScaleLinear } from "d3-scale";
+import React from "react";
+
+type Props = {
+  dataset: number[][];
+  xScale: ScaleLinear<number, number>;
+  yScale: ScaleLinear<number, number>;
+};
+
+export const Circles = ({ dataset, xScale, yScale }: Props) => {
+  return (
+    <g>
+      {dataset.map((d) => (
+        <circle key={d[0]} cx={xScale(d[0])} cy={yScale(d[1])} r={3}></circle>
+      ))}
+    </g>
+  );
+};

frontend/src/charts/scatters/CirclesWithG.tsx

+import React from "react";
+
+type Props = {
+  dataset: number[][];
+};
+
+export const CirclesWithG = ({ dataset }: Props) => {
+  return (
+    <g>
+      {dataset.map((d) => (
+        <circle key={d[0]} cx={d[0]} cy={d[1]} r={3}></circle>
+      ))}
+    </g>
+  );
+};

frontend/src/charts/scatters/ScatterChart.tsx

+import { max, min } from "d3";
+import { scaleLinear } from "d3-scale";
+import React, { useState } from "react";
+import {
+  Axis,
+  AxisScaleLinear,
+  AxisVerticalScaleLinear,
+  Orient,
+} from "../axes";
+import { TextsWithG } from "../texts";
+import { Circles } from "./Circles";
+
+type Props = {
+  dataset: number[][];
+  dimensions: DOMRect | undefined;
+};
+
+export const ScatterChart = ({ dataset, dimensions }: Props) => {
+  const margin = { top: 20, right: 30, bottom: 20, left: 30 };
+  const width = dimensions?.width || 600;
+  const height = dimensions?.height || 300;
+  const innerWidth = width - margin.left - margin.right;
+  const innerHeight = height - margin.bottom - margin.top;
+
+  const xMin = min(dataset, (d) => d[0]) || 0;
+  const xMax = max(dataset, (d) => d[0]) || 100;
+  const yMin = min(dataset, (d) => d[1]) || 0;
+  const yMax = max(dataset, (d) => d[1]) || 100;
+
+  const xScale = scaleLinear()
+    .domain([0, xMax + 5])
+    .nice()
+    .range([0, innerWidth]);
+  const yScale = scaleLinear()
+    .domain([0, yMax + 5])
+    .nice()
+    .range([innerHeight, 0]);
+
+  // console.log("dataset:", dataset, "scaled dataset:", scaledDataset);
+  return (
+    <svg width={width} height={height}>
+      <g transform={`translate(${margin.left}, ${margin.top})`}>
+        <Circles dataset={dataset} xScale={xScale} yScale={yScale} />
+        <TextsWithG dataset={dataset} xScale={xScale} yScale={yScale} />
+      </g>
+      <g transform={`translate(${margin.left},${margin.top})`}>
+        <Axis scale={yScale} orient={Orient.left} />
+      </g>
+      <g transform={`translate(${width - margin.right},${margin.top})`}>
+        <Axis scale={yScale} orient={Orient.right} />
+      </g>
+      <g transform={`translate(${margin.left},${height - margin.bottom})`}>
+        <Axis scale={xScale} orient={Orient.bottom} />
+      </g>
+      <g transform={`translate(${margin.left},${margin.top})`}>
+        <Axis scale={xScale} orient={Orient.top} />
+      </g>
+    </svg>
+  );
+};

frontend/src/charts/scatters/index.tsx

+export { CirclesWithG } from "./CirclesWithG";

frontend/src/charts/texts/BarText.tsx

+import React from "react";
+import { ScaleLinear, ScaleBand } from "d3-scale";
+
+type Props = {
+  dataset: number[];
+  height: number;
+  xScale: ScaleBand<number>;
+  yScale: ScaleLinear<number, number>;
+};
+
+export const BarText = ({ dataset, height, xScale, yScale }: Props) => {
+  return (
+    <g fontSize={"15px"} textAnchor="middle" fill="white">
+      {dataset.map((d, i) => (
+        <text
+          key={i}
+          x={(xScale(i) ?? 0) + xScale.bandwidth() / 2}
+          y={height - yScale(d) + 14}
+        >
+          {d}
+        </text>
+      ))}
+    </g>
+  );
+};

frontend/src/charts/texts/TextsWithG.tsx

+import { ScaleLinear, format } from "d3";
+import React from "react";
+
+type Props = {
+  dataset: number[][];
+  xScale: ScaleLinear<number, number>;
+  yScale: ScaleLinear<number, number>;
+};
+
+export const TextsWithG = ({ dataset, xScale, yScale }: Props) => {
+  // console.log("dataset in texts with g", dataset);
+  // const asPercentage = format(".1%");
+  const toFixed = format(".1f");
+
+  return (
+    <g fontSize={"10px"}>
+      {dataset.map((d) => (
+        <text key={d[0]} x={xScale(d[0])} y={yScale(d[1])}>{`${toFixed(
+          d[0]
+        )}, ${toFixed(d[1])}`}</text>
+      ))}
+    </g>
+  );
+};

frontend/src/charts/texts/index.tsx

+export { TextsWithG } from "./TextsWithG";
+export { BarText } from "./BarText";

frontend/src/forms/RRadio.tsx

-import React from "react";
+import React, { useState } from "react";
+import { Pie } from "../charts/pies/Pie";
 import { IQuestionData } from "../types";
 
 type Props = {
@@ -6,6 +7,8 @@ type Props = {
 };
 
 export const RRadio = ({ question }: Props) => {
+  const [dataset, setDataset] = useState([50, 30, 12, 5, 3]);
+
   const result = question.answers.reduce((acc: any, cur: any) => {
     acc[cur] = (acc[cur] || 0) + 1;
     return acc;
@@ -22,6 +25,7 @@ export const RRadio = ({ question }: Props) => {
           </span>
         </div>
       ))}
+      <Pie data={dataset} />
     </div>
   );
 };