Refactor Plotting class to support different plotting libraries and complete Plotly line plot

Author: risenW

src/danfojs-base/core/frame.ts

@@ -25,6 +25,8 @@ import NDframe from "./generic";
 import { table } from "table";
 import Series from './series';
 import Groupby from '../aggregators/groupby'
+import { Plotly } from "../plotting";
+
 const utils = new Utils();
 
 /**
@@ -2435,8 +2437,21 @@ export default class DataFrame extends NDframe implements DataFrameInterface {
             this.values as ArrayType2D,
             columns,
             colDtype,
-            colIndex    
+            colIndex
         ).group()
-        
+
+    }
+
+    /**
+     * Make plots of Series or DataFrame.
+     * Uses the Plotly as backend, so supports Plotly's configuration parameters
+     * @param divId Name of the div to show the plot
+     * @returns Plotly class that expoese different plot type
+    */
+    plot(divId: string) {
+        //TODO: Add support for check plot library to use
+        // So we can support other plot library like d3, vega, etc
+        const plt = new Plotly(this, divId);
+        return plt;
     }
 }

src/danfojs-base/core/series.ts

@@ -26,7 +26,7 @@ import Dt from './datetime';
 import dummyEncode from "../transformers/encoders/dummy.encoder";
 import DataFrame from "./frame";
 import tensorflow from '../shared/tensorflowlib'
-import Plot from "../plotting/plotly";
+import { Plotly } from "../plotting";
 
 const utils = new Utils();
 
@@ -1368,7 +1368,9 @@ export default class Series extends NDframe implements SeriesInterface {
      * @returns Plotly class that expoese different plot type
     */
     plot(divId: string) {
-        const plt = new Plot(this, divId);
+        //TODO: Add support for check plot library to use
+        // So we can support other plot library like d3, vega, etc
+        const plt = new Plotly(this, divId);
         return plt;
     }
 }

src/danfojs-base/plotting/index.ts

@@ -0,0 +1,43 @@
+/**
+*  @license
+* Copyright 2021, JsData. All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ==========================================================================
+*/
+import { linePlot } from "./plotly/index";
+import Series from "../core/series";
+import DataFrame from "../core/frame";
+import { PlotConfigObject } from "../shared/types";
+
+class Plotly {
+    divId: string;
+    ndframe: DataFrame | Series;
+
+    constructor(ndframe: DataFrame | Series, divId: string) {
+        this.ndframe = ndframe;
+        this.divId = divId;
+    }
+
+    /**
+     * Plot Series or DataFrame as lines.
+     * Uses the Plotly as backend, so supoorts Plotly's configuration parameters
+     * @param plotConfig configuration options for making Plots, supports Plotly.js parameters.
+    */
+    line(plotConfig: PlotConfigObject) {
+        linePlot(this.ndframe, this.divId, plotConfig);
+    }
+
+
+}
+
+export {
+    Plotly
+}

src/danfojs-base/plotting/plotly.ts

@@ -0,0 +1,16 @@
+/**
+*  @license
+* Copyright 2021, JsData. All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+* ==========================================================================
+*/
+
+export { linePlot } from "./line";