Updating jquery.flot.tooltip library

[apinard]

Hi,

I am using OctoberCMS V3.4.16.

The issue is the current version of jquery.flot.tooltip.js is at V0.6.1 and the last one is V0.9.0.

V0.9.0 is passing 4 parameter :

 // if it is a function callback get the content string
        if (typeof(content) === 'function') {
            content = content(item.series.label, x, y, item);
        }

And V0.6.1, only two:

In modules\backend\assets\foundation\migrate\vendor\flot\jquery.flot.tooltip.js:

        // if it is a function callback get the content string
        if( typeof(content) === 'function' ) {
            content = content(item.series.data[item.dataIndex][0], item.series.data[item.dataIndex][1]);
        }

My code (js part - it’s working well, except I don’t have the parameters) :

<script>
$(document).render(function () {

    // Find the chart element
    var chartElement = $('[data-control="chart-line"]');

    // Check if the chart element exists
    if (chartElement.length > 0) {
        // Get the chartLine instance
        var chartLineInstance = chartElement.data('october.chartLine');

        // Check if the chartLine instance exists
        if (chartLineInstance) {
            // Get the existing chart options
            var chartOptions = chartLineInstance.chartOptions;

            // Update the tooltipOpts content property with a function
            chartOptions.tooltipOpts.content = function (label, xval, yval, flotItem) {
                return 'HD Activity : ' + flotItem.series.hd_activities_count + ' | Regular Activities : ' + flotItem.series.regular_activities_count + ' | Total : ' + yval;
            };

            // Update the chart with the modified options
            chartLineInstance.rebuildChart();
        } else {
            console.error('ChartLine instance not found.');
        }
    } else {
        console.error('Chart element not found.');
    }

});
</script>

How can I update the default version of modules\backend\assets\foundation\migrate\vendor\flot\jquery.flot.tooltip.js ? or is this define in OctoberCMS and it’s not “touchable” ?

Or any other suggestions is welcome, thank you.

[daft]

The best bet would be to upgrade it in the next release (v3.5), assuming it contains no breaking changes.

When you replace the file and re-run npm run prod to recompile, does everything work as usual?

[apinard]

Hi,

So I did these steps (and it didn’t worked):

1. Remove the code inside modules\backend\assets\foundation\migrate\vendor\flot\jquery.flot.tooltip.js and put this code : https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.js

2. Run npm run prod, it’s giving me this error:

npm ERR! Missing script: "prod"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

3. So I did npm run, it gaves me :

available via `npm run-script`:
  compile-less
    php artisan october:util compile less
  compile-js
    php artisan october:util compile js
  watch-less
    onchange -v "modules/**/*.less" "plugins/**/*.less" -- php artisan october:util compile less
  watch-js
    onchange -v "modules/**/*.js" "plugins/**/*.js" --exclude "**/*-min.js" -- php artisan october:util compile js

4. I tried npm run-script compile-js and php artisan october:util compile js, both are giving me this:

Compiling registered asset bundles...
Nothing to compile!

I still see the old code in the browser (tried cache clear too).

[daft]

You may need the latest npm package file. Here’s a link: https://github.com/octobercms/october/blob/3.x/package.json#L11

Copy this file to your local and try the command again.

[apinard]

I pasted the config https://github.com/octobercms/october/blob/3.x/package.json#L11 in package.json and (in a second try) in package.lock as well.

> prod
> npm run production


> production
> mix --production

'mix' is not recognized as an internal or external command,
operable program or batch file.

[daft]

@apinard

Try running npm install first

[apinard]

1. I ran the command : npm install
2. Tried the command : npm run prod

> prod
> npm run production


> production
> mix --production

[webpack-cli] Error: Cannot find module 'C:\wamp64\www\osm\webpack.mix'
Require stack:
- C:\wamp64\www\osm\node_modules\laravel-mix\setup\webpack.config.js
- C:\wamp64\www\osm\node_modules\webpack-cli\lib\webpack-cli.js
- C:\wamp64\www\osm\node_modules\webpack-cli\lib\bootstrap.js
- C:\wamp64\www\osm\node_modules\webpack-cli\bin\cli.js

3. I ran : npm install laravel-mix
4. I ran : npm run prod
5. I still see the same message.
6. I ran : npm install webpack.
7. I still see the same - looks like it’s not the right way to do it.

[daft]

Grab the webpack.* files from the repo too: GitHub - octobercms/october: Self-hosted CMS platform based on the Laravel PHP Framework.

[apinard]

Alright, it successfully compiled and now, I’m seeing the 4 values being logged !!

Thank you. I will test more tomorrow and give an example of a solution here and see if there is no apparent bug - I don’t have a lot of widget that are using the ‘flot’ libraries.

[apinard]

Updating to V0.9.0 from V0.6.1 contains breaking changes. If we look at V0.6.7 (https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.6.7/jquery.flot.tooltip.js), the function already changed - passing the label first before coordinates :

V0.6.1 :

 // if it is a function callback get the content string
        if( typeof(content) === 'function' ) {
            content = content(item.series.data[item.dataIndex][0], item.series.data[item.dataIndex][1]);
        }

V0.9.0 :

  // if it is a function callback get the content string
        if (typeof(content) === 'function') {
            content = content(item.series.label, x, y, item);
        }

Also, looking at the repo GitHub - krzysu/flot.tooltip: tooltip plugin for wonderful Flot plotting library, from V0.7.0, it looks like we also need to update jquery.flot.js (which is actually at V1.1 in OctoberCMS V3.4.16) :

v0.7.0

• added time zone support by using $.plot.dateGenerator by @ilvalle
• this version requires that jquery.flot.js is updated to the v8.3

–

Right now, I have to stop here.

[daft]

I suspect this is why it hasn’t been upgraded already. AFAIK, this library has been abandoned so there isn’t much incentive to go down this path. HTML has come a long way so it might be better to use a more modern charting tool.

This is a good one:

Chart.js

[apinard]

will take a look tomorrow, thank you.