Skip to content

Commit e88c12e

Browse files
risenWrisenW
committed
Complete plotting class refactor to typwscript
1 parent 5acef6a commit e88c12e

14 files changed

Lines changed: 1059 additions & 30 deletions

File tree

‎src/danfojs-base/core/frame.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import NDframe from "./generic";
2525
import { table } from "table";
2626
import Series from './series';
2727
import Groupby from '../aggregators/groupby'
28-
import { Plotly } from "../plotting";
28+
import { PlotlyLib } from "../plotting";
2929

3030
const utils = new Utils();
3131

@@ -2451,7 +2451,7 @@ export default class DataFrame extends NDframe implements DataFrameInterface {
24512451
plot(divId: string) {
24522452
//TODO: Add support for check plot library to use
24532453
// So we can support other plot library like d3, vega, etc
2454-
const plt = new Plotly(this, divId);
2454+
const plt = new PlotlyLib(this, divId);
24552455
return plt;
24562456
}
24572457
}

‎src/danfojs-base/core/series.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import Dt from './datetime';
2626
import dummyEncode from "../transformers/encoders/dummy.encoder";
2727
import DataFrame from "./frame";
2828
import tensorflow from '../shared/tensorflowlib'
29-
import { Plotly } from "../plotting";
29+
import { PlotlyLib } from "../plotting";
3030

3131
const utils = new Utils();
3232

@@ -1363,14 +1363,14 @@ export default class Series extends NDframe implements SeriesInterface {
13631363

13641364
/**
13651365
* Make plots of Series or DataFrame.
1366-
* Uses the Plotly as backend, so supports Plotly's configuration parameters
1366+
* Uses the PlotlyLib as backend, so supports PlotlyLib's configuration parameters
13671367
* @param divId Name of the div to show the plot
1368-
* @returns Plotly class that expoese different plot type
1368+
* @returns PlotlyLib class that expoese different plot type
13691369
*/
13701370
plot(divId: string) {
13711371
//TODO: Add support for check plot library to use
13721372
// So we can support other plot library like d3, vega, etc
1373-
const plt = new Plotly(this, divId);
1373+
const plt = new PlotlyLib(this, divId);
13741374
return plt;
13751375
}
13761376
}

‎src/danfojs-base/plotting/index.ts‎

Lines changed: 124 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,31 @@
1212
* limitations under the License.
1313
* ==========================================================================
1414
*/
15-
import { linePlot } from "./plotly/index";
15+
import {
16+
linePlot,
17+
barPlot,
18+
scatterPlot,
19+
histPlot,
20+
piePlot,
21+
boxPlot,
22+
violinPlot,
23+
tablePlot,
24+
} from "./plotly/index";
1625
import Series from "../core/series";
1726
import DataFrame from "../core/frame";
1827
import { PlotConfigObject } from "../shared/types";
28+
import Plotly from "plotly.js-dist-min"
1929

20-
class Plotly {
30+
31+
try {
32+
// @ts-ignore
33+
const version = Plotly.version;
34+
console.info(`Using Plotly version ${version}`);
35+
} catch (error) {
36+
console.info(`Plotly CDN not found. If you need to make Plots, then add the Plotly CDN to your script`);
37+
}
38+
39+
class PlotlyLib {
2140
divId: string;
2241
ndframe: DataFrame | Series;
2342

@@ -28,16 +47,114 @@ class Plotly {
2847

2948
/**
3049
* Plot Series or DataFrame as lines.
31-
* Uses the Plotly as backend, so supoorts Plotly's configuration parameters
32-
* @param plotConfig configuration options for making Plots, supports Plotly.js parameters.
50+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
51+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
3352
*/
34-
line(plotConfig: PlotConfigObject) {
35-
linePlot(this.ndframe, this.divId, plotConfig);
53+
line(plotConfig?: PlotConfigObject) {
54+
const _plotConfig = plotConfig || {
55+
config: {},
56+
layout: {}
57+
};
58+
linePlot(this.ndframe, this.divId, _plotConfig, Plotly);
3659
}
3760

61+
/**
62+
* Plot Series or DataFrame as bars.
63+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
64+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
65+
*/
66+
bar(plotConfig?: PlotConfigObject) {
67+
const _plotConfig = plotConfig || {
68+
config: {},
69+
layout: {}
70+
};
71+
barPlot(this.ndframe, this.divId, _plotConfig, Plotly);
72+
}
73+
74+
/**
75+
* Plot Series or DataFrame as scatter.
76+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
77+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
78+
*/
79+
scatter(plotConfig?: PlotConfigObject) {
80+
const _plotConfig = plotConfig || {
81+
config: {},
82+
layout: {}
83+
};
84+
scatterPlot(this.ndframe, this.divId, _plotConfig, Plotly);
85+
}
86+
87+
/**
88+
* Plot Series or DataFrame as histogram.
89+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
90+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
91+
*/
92+
hist(plotConfig?: PlotConfigObject) {
93+
const _plotConfig = plotConfig || {
94+
config: {},
95+
layout: {}
96+
};
97+
histPlot(this.ndframe, this.divId, _plotConfig, Plotly);
98+
}
99+
100+
/**
101+
* Plot Series or DataFrame as pie.
102+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
103+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
104+
*/
105+
pie(plotConfig?: PlotConfigObject) {
106+
const _plotConfig = plotConfig || {
107+
config: {},
108+
layout: {}
109+
};
110+
piePlot(this.ndframe, this.divId, _plotConfig, Plotly);
111+
}
112+
113+
/**
114+
* Plot Series or DataFrame as boxplot.
115+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
116+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
117+
*/
118+
box(plotConfig?: PlotConfigObject) {
119+
const _plotConfig = plotConfig || {
120+
config: {},
121+
layout: {}
122+
};
123+
boxPlot(this.ndframe, this.divId, _plotConfig, Plotly);
124+
}
125+
126+
/**
127+
* Plot Series or DataFrame as violinplot.
128+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
129+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
130+
*/
131+
violin(plotConfig?: PlotConfigObject) {
132+
const _plotConfig = plotConfig || {
133+
config: {},
134+
layout: {}
135+
};
136+
violinPlot(this.ndframe, this.divId, _plotConfig, Plotly);
137+
}
138+
139+
/**
140+
* Plot Series or DataFrame as table.
141+
* Uses Plotly library as backend, so supports Plotly's configuration parameters
142+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
143+
*/
144+
table(plotConfig?: PlotConfigObject) {
145+
const _plotConfig = plotConfig || {
146+
config: {},
147+
layout: {}
148+
};
149+
tablePlot(this.ndframe, this.divId, _plotConfig, Plotly);
150+
}
38151

39152
}
40153

154+
// class Vega {
155+
// //TODO: Add support for vega library
156+
// }
157+
41158
export {
42-
Plotly
159+
PlotlyLib
43160
}

‎src/danfojs-base/plotting/plotly/bar.ts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/**
2+
* @license
3+
* Copyright 2021, JsData. All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
8+
* Unless required by applicable law or agreed to in writing, software
9+
* distributed under the License is distributed on an "AS IS" BASIS,
10+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11+
* See the License for the specific language governing permissions and
12+
* limitations under the License.
13+
* ==========================================================================
14+
*/
15+
import Series from "../../core/series";
16+
import DataFrame from "../../core/frame";
17+
import { Data } from "plotly.js-dist-min"
18+
import { PlotConfigObject } from "../../shared/types"
19+
import { checkIfColsExist, throwErrorOnWrongColName } from "./utils"
20+
21+
22+
/**
23+
* Plot Series or DataFrame as bar.
24+
* Uses the Plotly as backend, so supoorts Plotly's configuration parameters,
25+
* Line plot supports different types of parameters, and the behavior will depend on data specified.
26+
* The precedence of columns to plot is: (x and y => x => y => columns).
27+
* @param ndframe Series or DataFrame to plot
28+
* @param divId HTML div id to plot in.
29+
* @param plotConfig configuration options for making Plots, supports Plotly.js Config and Layout parameters.
30+
*/
31+
export const barPlot = (ndframe: DataFrame | Series, divId: string, plotConfig: PlotConfigObject, Plotly: any) => {
32+
const config = plotConfig["config"]
33+
const layout = plotConfig["layout"]
34+
35+
if (ndframe instanceof Series) {
36+
let trace: Data = {
37+
x: ndframe.index as any,
38+
y: ndframe.values as any,
39+
type: 'bar',
40+
};
41+
42+
Plotly.newPlot(divId, [trace], layout, config);
43+
44+
} else {
45+
46+
if (config["x"] && config["y"]) {
47+
//Plotting two columns against each other, when user specifies x and y column names in configuration
48+
throwErrorOnWrongColName(ndframe, config["x"]);
49+
throwErrorOnWrongColName(ndframe, config["y"]);
50+
51+
const x = ndframe[config.x].values;
52+
const y = ndframe[config.y].values;
53+
54+
const trace: Data = {
55+
x,
56+
y,
57+
type: 'bar',
58+
};
59+
60+
const _layout = {
61+
xaxis: {
62+
title: config.x,
63+
},
64+
yaxis: {
65+
title: config.y,
66+
},
67+
...layout,
68+
};
69+
70+
Plotly.newPlot(divId, [trace], _layout, config);
71+
72+
} else if (config["x"] || config["y"]) {
73+
//plot single column specified in either of param [x | y] against index
74+
if (config["x"]) {
75+
throwErrorOnWrongColName(ndframe, config.x);
76+
77+
const x = ndframe[config.x].values;
78+
const y = ndframe.index;
79+
80+
const trace: Data = {
81+
x,
82+
y,
83+
type: 'bar',
84+
};
85+
const _layout = {
86+
xaxis: {
87+
title: config.x,
88+
},
89+
yaxis: {
90+
title: "Index",
91+
},
92+
...layout,
93+
};
94+
95+
Plotly.newPlot(divId, [trace], _layout, config);
96+
}
97+
98+
if (config["y"]) {
99+
throwErrorOnWrongColName(ndframe, config.y);
100+
101+
const x = ndframe.index
102+
const y = ndframe[config.y].values;
103+
104+
const trace: Data = {
105+
x,
106+
y,
107+
type: 'bar',
108+
};
109+
const _layout = {
110+
xaxis: {
111+
title: "Index",
112+
},
113+
yaxis: {
114+
title: config.y,
115+
},
116+
...layout,
117+
};
118+
119+
Plotly.newPlot(divId, [trace], _layout, config);
120+
}
121+
122+
} else {
123+
//plot specified columns in config param against index
124+
// if columns is not specified in config, then plot all columns
125+
const cols = config["columns"] ? checkIfColsExist(ndframe, config['columns']) : ndframe.columns;
126+
127+
const traces: Data[] = [];
128+
cols.forEach((col) => {
129+
const y = ndframe.index;
130+
const x = (ndframe as DataFrame)[col].values;
131+
132+
const trace: Data = { x, y, name: col, type: 'bar' };
133+
traces.push(trace);
134+
});
135+
136+
Plotly.newPlot(divId, traces, layout, config);
137+
138+
}
139+
140+
}
141+
142+
}

0 commit comments

Comments
 (0)