feat: add ScatterTracer and ScatterRenderer (algorithm-visualizer#298)

Jeff-Tian · web-flow · commit 59ea9349d66e · 2021-01-28T01:18:52.000-05:00
diff --git a/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss b/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss
@@ -0,0 +1 @@
+@import "~common/stylesheet/index";
diff --git a/src/core/renderers/ScatterRenderer/index.js b/src/core/renderers/ScatterRenderer/index.js
@@ -0,0 +1,53 @@
+import React from 'react'
+import {Scatter} from 'react-chartjs-2'
+import Array2DRenderer from '../Array2DRenderer'
+
+const convertToObjectArray = ([x, y]) => ({ x, y })
+const colors = ['white', 'green', 'blue', 'red', 'yellow', 'cyan']
+
+class ScatterRenderer extends Array2DRenderer {
+  renderData() {
+    const { data } = this.props.data
+
+    const datasets = data.map((series, index) => (
+        {
+          backgroundColor: colors[index],
+          data: series.map(s => convertToObjectArray(s.value)),
+          label: Math.random(),
+          radius: (index + 1) * 2,
+        }))
+
+    const chartData = {
+      datasets,
+    }
+
+    return <Scatter data={chartData} options={{
+      legend: false,
+      animation: false,
+      layout: {
+        padding: {
+          left: 20,
+          right: 20,
+          top: 20,
+          bottom: 20,
+        },
+      },
+      scales: {
+        yAxes: [
+          {
+            ticks: {
+              beginAtZero: false,
+            },
+          }],
+        xAxes: [
+          {
+            ticks: {
+              beginAtZero: false,
+            },
+          }],
+      },
+    }}/>
+  }
+}
+
+export default ScatterRenderer
diff --git a/src/core/renderers/index.js b/src/core/renderers/index.js
@@ -5,3 +5,4 @@ export { default as Array2DRenderer } from './Array2DRenderer';
 export { default as Array1DRenderer } from './Array1DRenderer';
 export { default as ChartRenderer } from './ChartRenderer';
 export { default as GraphRenderer } from './GraphRenderer';
+export { default as ScatterRenderer } from './ScatterRenderer';
diff --git a/src/core/tracers/ScatterTracer.js b/src/core/tracers/ScatterTracer.js
@@ -0,0 +1,10 @@
+import { Array2DTracer } from 'core/tracers';
+import { ScatterRenderer } from 'core/renderers';
+
+class ScatterTracer extends Array2DTracer {
+  getRendererClass() {
+    return ScatterRenderer;
+  }
+}
+
+export default ScatterTracer;
diff --git a/src/core/tracers/index.js b/src/core/tracers/index.js
@@ -5,3 +5,4 @@ export { default as Array2DTracer } from './Array2DTracer';
 export { default as Array1DTracer } from './Array1DTracer';
 export { default as ChartTracer } from './ChartTracer';
 export { default as GraphTracer } from './GraphTracer';
+export { default as ScatterTracer} from './ScatterTracer';
