Integrate with vue 3 about danfojs HOT 15 CLOSED

Hi @leh08
I'm trying to integrate danfojs in a vuejs app and tried your solution, unfortunately without success.

I did install the client package
npm install danfojs

and I've imported it in a vue component
import * as dfd from "danfojs/danfojs/src/index"
and I wrote a method to test it as follows:
loadDFD(){ dfd.read_csv("https://web.stanford.edu/class/archive/cs/cs109/cs109.1166/stuff/titanic.csv") .then(df=>{ df.head().print() }) }

Anyway the system does not compile, it fails with the following error:
` ERROR Failed to compile with 1 errors 8:01:42 PM
error in ./node_modules/danfojs/danfojs/src/index.js

Module parse failed: Unexpected token (17:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export { Str } from "./core/strings";
| export { Utils } from "./core/utils";

export * as tf from "@tensorflow/tfjs";
|
| export const _version = "0.2.2";

@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/testFilterCSV.vue?vue&type=script&lang=js& 44:0-49 120:6-18
@ ./src/components/testFilterCSV.vue?vue&type=script&lang=js&
@ ./src/components/testFilterCSV.vue
@ ./src/router.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.1.178:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

I'm running
@vue/cli 4.5.9
npm 6.14.8

I was wondering ...which is your environment?

from danfojs.

if you are using node. dfd is the variable danfojs is assigned to when imported

const dfd = require("danfojs")

for the example you made above, you can use danfo like that new danfo.DataFrame

from danfojs.

Maybe my understanding of what node is is the issue here. Isn't node for a different purpose used in backend which is not what I want anything to do with here. I want to have it run in the browser which would only need js and browser not node. or am I incorrect in that assumption

from danfojs.

Maybe my understanding of what node is is the issue here. Isn't node for a different purpose used in backend which is not what I want anything to do with here. I want to have it run in the browser which would only need js and browser not node. or am I incorrect in that assumption?

from danfojs.

Maybe my understanding of what node is is the issue here. Isn't node for a different purpose used in backend which is not what I want anything to do with here. I want to have it run in the browser which would only need js and browser not node. or am I incorrect in that assumption

If you need this to run in the browser only, then you need to declare dfd as a global variable that will be available to all scripts. You can attach dfd to the window object (see ref), or simply import danfo in any new script you'll be using.

In our next build, dfd will be automatically added to the window object so its available globally. See this issue

from danfojs.

Hi @risenW

I would like to import danfojs to Vue 3 through npm install danfojs. But, it seems it cannot do it currently

<template>
    <p>App</p>
</template>

<script>
import dfd from "danfojs";

export default {
    name: "App",
    mounted() {
        const s = new dfd.Series([1, 3, 5, undefined, 6, 8]);
        s.print();
    },
};
</script>

<style>
#app {
    text-align: center;
}
</style>

However, if I change to

<script>
import { Series } from "danfojs/dist/core/series";

export default {
    name: "App",
    mounted() {
        const s = new Series([1, 3, 5, undefined, 6, 8]);
        s.print();
    },
};
</script>

It will successfully load Series. Is it possible to adjust module above, so I can use library more directly. Thank you

Best Regards
Giang

from danfojs.

Hi @risenW,

if I have found a solution for this for, it is
import * as dfd from "danfojs/danfojs/src";

Could we do something like this?
import danfo from 'danfojs';

export default {
Series: () => import("./core/series").Series,
DataFrame: () => import("./core/frame").Series,
to_datetime: () => import('./core/timeseries').to_datetime,
read_csv: () => import('./io/reader').to_datetime.read_csv,
read_json: () => import('./io/reader').to_datetime.read_json,
read_excel: () => import('./io/reader').to_datetime.read_excel,
read: () => import('./io/reader').to_datetime.read,
merge: () => import('/core/merge').merge,
concat: () => import('./core/concat').concat,
LabelEncoder: () => import('./preprocessing/encodings').LabelEncoder,
OneHotEncoder: () => import('./preprocessing/encodings').OneHotEncoder,
MinMaxScaler: () => import('./preprocessing/scalers').MinMaxScaler,
StandardScaler: () => import('./preprocessing/scalers').StandardScaler,
date_range: () => import('./core/date_range').date_range,
get_dummies: () => import('./core/get_dummies').get_dummies,
}

Kind regards

from danfojs.

Interesting. It seems the bundled browser file are not properly imported in UI libraries like Vue and React. I'm Investigating this. Direct import should work.

from danfojs.

Vue2 has same error.

from danfojs.

Stale issue message

from danfojs.

HI!

I have an incomplete example using Danfojs, Vue 3, Typescript and Jest at https://github.com/kfern/my-vue-monorepo/tree/main/packages/ts-time-series

It works :-D but I can´t convert a timestamp to datetime because to_datetime is not a function

I tried:

import { DataFrame } from "danfojs";

const df = new DataFrame(myData, { columns: ["time", "price"] });
df['time'] = df.to_datetime(df['time']);

TypeError: df.to_datetime is not a function

and

import * as dfd from "danfojs";
const df = new dfd.DataFrame(myData, { columns: ["time", "price"] });
df['time'] = dfd.to_datetime(df['time']);

TypeError: dfd.to_datetime is not a function

Is it a bug? Can I do something to solve it?

from danfojs.

ping @risenW

from danfojs.

ping @risenW

Hey @kfern The function doc is a bit outdated. The name of the function is toDateTime.

see example here: https://danfo.jsdata.org/api-reference/general-functions/danfo.to_datetime

from danfojs.

@risenW Thanks.

dfd.toDateTime throws a Typescript error:

Property 'toDateTime' does not exist on type 'typeof import("my-vue-monorepo/node_modules/danfojs/types/index")'. Did you mean 'to_datetime'?

import * as dfd from "danfojs";
const df = new dfd.DataFrame(myData, { columns: ["time", "price"] });
df['time'] = dfd.toDateTime(df['time']);

from danfojs.

https://danfo.jsdata.org/api-reference/general-functions/danfo.to_datetime

Ahh, I see we forgot to update the correct type in https://github.com/opensource9ja/danfojs/blob/dev/danfojs-browser/types/index.d.ts

Would you be interested in updating this and sending a PR? A great simple issue to start contribution.

from danfojs.