Loading drilldown module

[realcheese]

I have no issues with installing and using it within my Laravel project. How do we load modules in though? I'm trying to get the drilldown module working with this but have had no luck.

[superman66]

@realcheese thank you to open this issue, I have already add this feature to load modules.
You can see the demo and the usage.

[realcheese]

awesome! I will try it out and update how it goes.

[realcheese]

Using your demo files, drilldown function works for me. But for some reason, in my own project (Laravel 5.4), drilldown won't work for me. I'm suspecting something is going on with my app.js file created by Webpack. I compared my app.js file with your bundle.js and there are some major differences. Basic Highchart maps work fine in my project though.

Do you have any idea what I might be doing wrong?

[superman66]

can you show the code how do you import and load modules?

[realcheese]

Using your example, I had to make small changes or it would error when running npm run dev.

import VueHighcharts from 'vue2-highcharts'
import Drilldown from 'highcharts/modules/drilldown.js'
import * as data from '../data'
import Highcharts from 'highcharts'
Drilldown(Highcharts);

[superman66]

import Drilldown from 'highcharts/modules/drilldown.js'
I think maybe you spelling mistake。
In my example is:
import Drilldown from 'highcharts/modules/Drilldown.js'

[realcheese]

I've tried that, with either spelling, it compiles successfully. But still no luck

[superman66]

sorry，I have no idea about what's wrong. It hard to find the problem. Maybe you can isolation the code about vue-highcharts from your project to test if it works fine.

[realcheese]

Do you mind looking at a gist, it contains my app.js file. I did a diff in my IDE and mine misses huge chunks that your bundle.js has.

https://gist.github.com/realcheese/230efdb351a9ed311f79e54ccc2f2816

[superman66]

ok, can you put your webpack.config.js on gist?

[realcheese]

Ah, I think this is the reason why. I'm currently using the default webpack.config.js that comes out of the box for Laravel Mix.

https://gist.github.com/realcheese/441b0fb6978e3b2ce23c5e46d3f2ff12

I'm looking at your project's webpack.config.js right now to see what I need to add to mine...

[realcheese]

I'm new to Webpack, so I'm definitely lost lol

[realcheese]

I'm not sure if I need to be customizing my webpack.mix.js file. If I need to, I can do so with the following function:

mix.webpackConfig({
    resolve: {
        modules: [
            path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
        ]
    }
});

But looking at your webpack.config.js, I don't see anything extra that I need to do that Laravel Mix is already doing out of the box.

[realcheese]

So this is what worked for me:

import VueHighcharts from 'vue2-highcharts/src/VueHighcharts.vue'

Before, I was using the following line (basic maps worked but not drilldown)

import VueHighcharts from 'vue2-highcharts'

I'm not sure why it behaves like this. Also, even with the revised import, I receive the following error:

 ERROR  Failed to compile with 1 errors                                                     12:13:13 AM

 error  in ./~/vue2-highcharts/src/VueHighcharts.vue

Module build failed: Error: Couldn't find preset "es2015" relative to directory

I suspect relative error is caused by the new import line pointing directly to VueHighcharts.vue? My temporary solution has been to delete the .babelrc file from the node_modules/vue2-highcharts folder - this at least runs without error and drilldown finally works. I will update if I find the correct solution.

[superman66]

I also found the same problem.
There are something wrong when build VueHighcharts.vue to vue-highcharts.js.
I am trying to fix it.

[superman66]

@realcheese I have already fix the bug. You can update to use it .
npm install vue2-highcharts@1.03.
And there are some different when you use it.

// import add-ons and pass in the Highcharts
import Drilldown from '../node_modules/highcharts/modules/Drilldown.js'
import Highcharts from 'highcharts'
Drilldown(Highcharts);

// pass Highcharts to the VueHicharts instance(if you needn't to use other feature modules, you don't have to pass it.)
<vue-highcharts :Highcharts="Highcharts" :options="drilldownOptions" ref="drilldownChart"></vue-highcharts>

When you want to use other feature modules, you should pass Highcharts props to the Vue-Highcharts compoennt instance.
(sorry for my poor english)

[realcheese]

thank you! I will try it out Update: I haven't had a chance to try the update as I have it working in my current project. Next week I should be able to go back and try again.

…

________________________________ From: Superman <notifications@github.com> Sent: Tuesday, April 18, 2017 3:40:01 AM To: superman66/vue-highcharts Cc: Jason Pham; Mention Subject: Re: [superman66/vue-highcharts] Loading drilldown module (#2) @realcheese<https://github.com/realcheese> I have already fix the bug. You can update to use it . npm install vue2-highcharts@1.03. And there are some different when you use it. // import add-ons and pass in the Highcharts import Drilldown from '../node_modules/highcharts/modules/Drilldown.js' import Highcharts from 'highcharts' Drilldown(Highcharts); // pass Highcharts to the VueHicharts instance(if you needn't to use other feature modules, you don't have to pass it.) <vue-highcharts :Highcharts="Highcharts" :options="drilldownOptions" ref="drilldownChart"></vue-highcharts> When you want to use other feature modules, you should pass Highcharts props to the Vue-Highcharts compoennt instance. (sorry for my poor english) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#2 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/APG0z_ThYKN70N2psC6eTOnm8daSkU-Iks5rxJMBgaJpZM4M_SC8>.