domjag
domjag

I am using a bootstrap admin theme within a theme and I am using amcharts. I reference them like so (btw once i finish debugging I combine them into one call):


<script src="{{ ['admin_options/js/amcharts/amcharts.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/serial.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/pie.js']|theme }}"></script> <script src="{{ ['admin_options/js/amcharts/plugins/export/export.min.js']|theme }}"></script>


Everything works well except that I get some reference errors on the last js file - it has several references inside it (Excerpt from export.min.js):

AmCharts[ "export" ] = function( chart, config ) {
    var _timer;
    var _this = {
        name: "export",
        version: "1.4.61",
        libs: {
            async: true,
            autoLoad: true,
            reload: false,
            resources: [ "fabric.js/fabric.min.js", "FileSaver.js/FileSaver.min.js", {
                "jszip/jszip.min.js": [ "xlsx/xlsx.min.js" ],
                "pdfmake/pdfmake.min.js": [ "pdfmake/vfs_fonts.js" ]
            } ],
            namespaces: {
                "pdfmake.min.js": "pdfMake",
                "jszip.min.js": "JSZip",
                "xlsx.min.js": "XLSX",
                "fabric.min.js": "fabric",
                "FileSaver.min.js": "saveAs"
            },
            loadTimeout: 10000
        },

When I do an inspect: these are the errors:


Scriptfabric.min.js 404 script 31db3d0…-1587144886:2 645 B 873 ms
ScriptFileSaver.min.js 404 script 31db3d0…-1587144886:2 642 B 745 ms
Scriptjszip.min.js 404 script 31db3d0…-1587144886:2 642 B 815 ms
Scriptpdfmake.min.js 404 script 31db3d0…-1587144886:2 644 B 786 ms
Imagedata:image/svg+xml;… 200 svg+xml Other (memory cache) 0 ms
31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/FileSaver.js/FileSaver.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/pdfmake/pdfmake.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/jszip/jszip.min.js net::ERR_ABORTED 404 (Not Found) 31db3d0……dbad9b-1587144886:2 GET http://dev.mcx.test/amcharts/plugins/export/libs/fabric.js/fabric.min.js net::ERR_ABORTED 404 (Not Found)


It tries to load the resources but can't find them. How do I handle references within the css - not sure why the rewrite doesnt work in this case. So the question is how do I correctly reference this -clearly I am doing something wrong.


 ​

Last updated

mjauvin
mjauvin

Where are the resources actually located within your theme structure?

domjag
domjag

Main theme: dev.mcx.test\public\themes\goeroe-semantic-october\

Admin Theme: dev.mcx.test\public\themes\goeroe-semantic-october\admin_options\

Export js: dev.mcx.test\public\themes\goeroe-semantic-october\admin_options\js\amcharts\plugins\export

Look at the sample reference that fails: dev.mcx.test/amcharts/ ????


http://dev.mcx.test/amcharts/plugins/export/libs/fabric.js/fabric.min.js net::ERR_ABORTED 404 (Not Found)

Last updated

domjag
domjag

Also: Reference errors happen after I include the chart function on the page:


      <script>
$(function(){
"use strict";

// chart
var chart = AmCharts.makeChart("production-chart", {
    "type": "serial",
    "theme": "light",
    "fontFamily": "Poppins",
    "marginTop":0,
    "marginRight": 30,
    "dataProvider": [  { "date": "2019-08-13", "value": 1352},

                                            { "date": "2019-08-14", "value": 1140},

                                            { "date": "2019-08-30", "value": 1140},

                                            { "date": "2019-10-08", "value": 3819},

                                            { "date": "2019-10-09", "value": 3819},

                                            { "date": "2019-10-10", "value": 3819},

                                            { "date": "2019-10-18", "value": 3269},

                                            { "date": "2019-10-19", "value": 3819},

                                            { "date": "2019-10-22", "value": 2598},

                                            { "date": "2019-11-22", "value": 236},

                                            { "date": "2019-11-27", "value": 2133},

                                            { "date": "2019-12-13", "value": 2945},

                                            { "date": "2019-12-20", "value": 160},

                                            { "date": "2019-12-23", "value": 461},

                                            { "date": "2019-12-24", "value": 3356},

                                            { "date": "2020-03-03", "value": 1405},

                                            { "date": "2020-03-07", "value": 699},

                                            { "date": "2020-03-18", "value": 281},

                                            { "date": "2020-03-21", "value": 994},

                                            { "date": "2020-03-22", "value": 2667},

                                            { "date": "2020-03-23", "value": 523},

                                            { "date": "2020-03-24", "value": 2892},

                                            { "date": "2020-03-25", "value": 523},

                                            { "date": "2020-03-26", "value": 2993},

                                            { "date": "2020-03-27", "value": 566},

                                            { "date": "2020-04-16", "value": 3819},

                { "date": "2020-04-17","value": 407}

    ],
    "valueAxes": [{
        "axisAlpha": 0,
        "position": "left"
    }],
    "graphs": [{
        "id":"g1",
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
        "bullet": "round",
        "bulletSize": 8,
        "lineColor": "#27ae60",
        "lineThickness": 2,
        "negativeLineColor": "#e74c3c",
        "type": "smoothedLine",
        "valueField": "value"
    }],
    "chartScrollbar": {
        "graph":"g1",
        "gridAlpha":0,
        "color":"#888888",
        "scrollbarHeight":55,
        "backgroundAlpha":0,
        "selectedBackgroundAlpha":0.1,
        "selectedBackgroundColor":"#888888",
        "graphFillAlpha":0,
        "autoGridCount":true,
        "selectedGraphFillAlpha":0,
        "graphLineAlpha":0.2,
        "graphLineColor":"#c2c2c2",
        "selectedGraphLineColor":"#888888",
        "selectedGraphLineAlpha":1
    },
    "chartCursor": {
        "categoryBalloonDateFormat": "yyyy-MM-dd",
        "cursorAlpha": 0,
        "valueLineEnabled":true,
        "valueLineBalloonEnabled":true,
        "valueLineAlpha":0.5,
        "fullWidth":true
    },
    "dataDateFormat": "yyyy-MM-dd",
    "categoryField": "date",
    "categoryAxis": {
        "minPeriod": "yyyy-MM-dd",
        "parseDates": true,
        "minorGridAlpha": 0.1,
        "minorGridEnabled": true
    },
    "export": {
        "enabled": true
    }

});
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
    chart.zoomChart();
}

function zoomChart(){
    chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}

}); </script>

mjauvin
mjauvin

I am not sure if the |theme filter will handle resources WITHIN an imported asset... not sure if this is possible in any case.

mjauvin
mjauvin

are the resources referenced in your export.min.js referenced/used somewhere in the js code ?

can you share this code?

Last updated

domjag
domjag

If this is the case this is a big problem because most themes now come with imported assets - referencing svg for example which look to be broken in my case as well, and also referencing fonts called from css.

mjauvin
mjauvin

What version of Ocober do you use?

domjag
domjag

CURRENT BUILD 461

mjauvin
mjauvin

I am not familiar with bootstrap admin themes, neither with amcharts.

Maybe try the support chat channel?

mjauvin
mjauvin

First thing I would try is to NOT use the public folder (I know this is for security purpose) for debugging purpose. I'm sure what you are trying can work, just not sure where the problem is.

domjag
domjag

Thanks for trying. I do think this is a generic issue as you stated with referencing imported assets. When the script runs it calls several resources which it can't find because the |theme rewrite won't work in that case.

mjauvin
mjauvin

I don't know. What if you only include the export.min.js and reference it directly, without using the "|theme" filter ?

domjag
domjag

What about putting a rewrite condition in the .htaccess file? Can I edit that file directly or is that done within config files?

mjauvin
mjauvin

I was just writing a post to suggest this... :)

You can edit directly

mjauvin
mjauvin

something like:

RewriteRule ^(amcharts/.+) /public/themes/goeroe-semantic-october/admin_options/js/$1 [L]
mjauvin
mjauvin

Let me know if you make this work.

domjag
domjag

I think that will fix it...most of my reference errors are cleared up - still have a few issues but I made the following changes: htaccess:


RewriteCond %{REQUEST_FILENAME} !/themes/./(assets|resources|amcharts)/.

RewriteCond %{REQUEST_FILENAME} !/amcharts/./(images|plugins)/.


Last updated

domjag
domjag

Yes that worked all references are now good!! Thanks for all your help!!

mjauvin
mjauvin

Nice! If you'd like to contribute documenting this, head to https://octobertricks.com, register and submit an entry.

Thanks!

1-20 of 20