Merge pull request #30 from ai-systems/feat/graph_viz

added graph visualisation from file
ai-systems · Jun 4, 2021 · d304330 · d304330
2 parents 802a135 + 69871ed
commit d304330
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/probe_ably/service/src/charts/LineChartWidget.js b/probe_ably/service/src/charts/LineChartWidget.js
@@ -1,16 +1,17 @@
-import { ResponsiveScatterPlot } from "@nivo/scatterplot";
+import { ResponsiveLine } from '@nivo/line';
 import {
   Button,
   ButtonGroup,
   Card,
   Col,
-  Row,
+  Row
 } from "@themesberg/react-bootstrap";
 import { jsPDF } from "jspdf";
 import React, { useEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 import "svg2pdf.js";
 
+
 export default (props) => {
   const { title, probing_data, task_name } = props;
   const linechartRefs = useRef([]);
@@ -61,8 +62,8 @@ export default (props) => {
                       style={{ height: 400 }}
                       className="ct-series-g ct-major-tent"
                     >
-                      <ResponsiveScatterPlot
-                        colors={{ scheme: "accent" }}
+                      <ResponsiveLine
+                        colors={{ scheme: "category10" }}
                         data={p_data.chart_data}
                         margin={{ top: 60, right: 140, bottom: 70, left: 90 }}
                         xScale={{ type: "linear", min: "auto", max: "auto" }}
@@ -83,7 +84,8 @@ export default (props) => {
                           tickRotation: 90,
                           legend: p_data.x_axis,
                           legendPosition: "middle",
-                          format: (value) => value.toExponential(2),
+                          // format: (value) => value,
+                          format: (value) => value < 0.001 || value > 10000 ? value.toExponential(2) : value,
                           legendOffset: 60,
                         }}
                         axisLeft={{

diff --git a/probe_ably/service/src/stories/Dahsboard.stories.js b/probe_ably/service/src/stories/Dahsboard.stories.js
@@ -4,6 +4,7 @@ import React from "react";
 import "react-datetime/css/react-datetime.css";
 import Dashboard from "../pages/dashboard/DashboardOverview";
 import "../scss/volt.scss";
+import sampledata from './sample.json';
 
 export default {
   title: "Dashboard",
@@ -306,3 +307,10 @@ MultipleTask.args = {
     },
   ],
 };
+
+
+
+export const TaskFromJSON = Template.bind({});
+
+
+TaskFromJSON.args = sampledata