From f0cd5bc231b1f64c89e14671f13cf99bf6d0ed19 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Tue, 2 Aug 2022 01:35:09 +0800
Subject: [PATCH] fe-34  ej2-react-charts SparkLine

---
 lazy-timer-fe/src/components/Charts/SparkLine.jsx | 37 +++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 lazy-timer-fe/src/components/Charts/SparkLine.jsx

diff --git a/lazy-timer-fe/src/components/Charts/SparkLine.jsx b/lazy-timer-fe/src/components/Charts/SparkLine.jsx
new file mode 100644
index 0000000..c2109af
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/SparkLine.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
+
+class SparkLine extends React.PureComponent {
+  render() {
+    const { id, height, width, color, data, type, currentColor } = this.props;
+
+    return (
+      <SparklineComponent
+        id={id}
+        height={height}
+        width={width}
+        lineWidth={1}
+        valueType="Numeric"
+        fill={color}
+        border={{ color: currentColor, width: 2 }}
+        tooltipSettings={{
+          visible: true,
+          // eslint-disable-next-line no-template-curly-in-string
+          format: '${x} : data ${yval}',
+          trackLineSettings: {
+            visible: true,
+          },
+        }}
+        markerSettings={{ visible: ['All'], size: 2.5, fill: currentColor }}
+        dataSource={data}
+        xName="x"
+        yName="yval"
+        type={type}
+      >
+        <Inject services={[SparklineTooltip]} />
+      </SparklineComponent>
+    );
+  }
+}
+
+export default SparkLine;