From 59ea9349d66e7ca4deb3c6d49565d02ed4f34b11 Mon Sep 17 00:00:00 2001
From: Jeff Tian <jeff.tian@outlook.com>
Date: Thu, 28 Jan 2021 14:18:52 +0800
Subject: [PATCH] feat: add ScatterTracer and ScatterRenderer (#298)

---
 .../ScatterRenderer.module.scss               |  1 +
 src/core/renderers/ScatterRenderer/index.js   | 53 +++++++++++++++++++
 src/core/renderers/index.js                   |  1 +
 src/core/tracers/ScatterTracer.js             | 10 ++++
 src/core/tracers/index.js                     |  1 +
 5 files changed, 66 insertions(+)
 create mode 100644 src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss
 create mode 100644 src/core/renderers/ScatterRenderer/index.js
 create mode 100644 src/core/tracers/ScatterTracer.js

diff --git a/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss b/src/core/renderers/ScatterRenderer/ScatterRenderer.module.scss
new file mode 100644
index 00000000..7afb96e4
--- /dev/null
+++ 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
new file mode 100644
index 00000000..27715a63
--- /dev/null
+++ 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
index ead04604..67341879 100644
--- 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
new file mode 100644
index 00000000..d6f37951
--- /dev/null
+++ 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
index 1b94f997..1f3259dc 100644
--- 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';