Integrate with vue 3

[24jr]

This seems like a novice question and yet I don't understand it. How do I import and use a third party js library in vue 3? In this case I'm trying to use Danfo.js https://danfo.jsdata.org/getting-started by doing npm install danfojs (even though it only shows to use cdn for browser use I think this is the same thing but correct me if wrong). Then idk if this is something that I import in each file I want to use or if I do it in main.js and it works globally automatically or what. I tried making main.js

import { createApp } from 'vue'
import App from './App.vue'

import danfo from 'danfojs';

const app = createApp(App)
app.use(danfo)
app.mount('#app')

and then idk if that's correct but if so then how do I call dfd from inside the setup() of a component

function danfoTest(){
      console.log('idk', dfd)
      const json_data = [
        { A: 0.4612, B: 4.28283, C: -1.509, D: -1.1352 },
        { A: 0.5112, B: -0.22863, C: -3.39059, D: 1.1632 },
        { A: 0.6911, B: -0.82863, C: -1.5059, D: 2.1352 },
        { A: 0.4692, B: -1.28863, C: 4.5059, D: 4.1632 }]
                    
        const df = new dfd.DataFrame(json_data)
        console.log('here')
        df['A'].print()
    }

Idk if this is a lack of vue 3 understanding or lack of Danfo.js understanding but either way would appreciate some help, thanks!

Also is is possible can is only option? When adding the <script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.2/dist/index.min.js"></script> tag to index.js it did work but I was getting errors in terminal about dfd not being defined although calling dfd did work. I assume because it loads the script later idk either way I think I want the npm install way and the npm install danfojs-node I believe is for a node version not the browser version which is why I did npm install danfojs

Also side question is this a long-term supported project with tensor or more of a side project

[steveoni]

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

[24jr]

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

[risenW]

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?

[risenW]

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

[leh08]

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

[leh08]

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

[risenW]

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.

[MGCataldo]

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?

[Gregory-Han]

Vue2 has same error.

[github-actions]

Stale issue message

[kfern]

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?

[kfern]

ping @risenW

[risenW]

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

[kfern]

@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']);

[risenW]

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.