Updating jquery.flot.tooltip library

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.

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?

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
  1. 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

  1. 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).

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.

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.

@apinard

Try running npm install first :slight_smile:

  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
  1. I ran : npm install laravel-mix
  2. I ran : npm run prod
  3. I still see the same message.
  4. I ran : npm install webpack.
  5. I still see the same - looks like it’s not the right way to do it.

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

1 Like

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.

1 Like

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.

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:

1 Like

will take a look tomorrow, thank you.