Material HTML 2.1.1 update not rendering Charts nor Sidebar collapse in Gulp Open-app

[edwardtilley]

Prerequisites

Please answer the following questions for yourself before submitting an issue.

• [x] I am running the latest version
• [x] I checked the documentation and found no answer There is a reference to Demo.js not referenced - but no correction is indicated in that ticket
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I expected charts to show but am getting this instead ... (charts are not showing up - similar to demo.js error previously reported.) I spent a few hours studying the code and can't see a problem; I compare 2.1.0 to 2.1.1 - still nothing obvious.

EDIT: As an aside unrelated to the problem above, I just saw where the documentation says " Material Dashboard DEMO methods, don't include it in your project! " Suggest that CREATIVE TIM Team improve this message and tell users that they have to add just the libraries that they need - from demo/demo.js into to assets/js/material-dashboard.js - and then also explain how to minify the updated file (via an automating "watch" instruction - as an option) in Gulpfile.js

FYI - A Minify example for the gulpfile.js would look something like the following: (this suggestion from http://zetcode.com/gulp/minify/ - make sure you npm install --set-dev gulp-minify, then ...)

var minify = require("gulp-minify");
var Paths = { JS_SOURCES: './assets/js/material-dashboard.js' };
gulp.task('minify', () => {
return gulp.src(Paths.JS_SOURCES, { allowEmpty: true })
.pipe(minify({noSource: true}))
.pipe(gulp.dest('./assets/js/'))
});

Current Behavior

material-dashboard-pro-html-v2.1.1>npm install (this is here just for fyi) npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142

node-sass@4.13.1 install F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1\node_modules\node-sass node scripts/install.js Cached binary found at C:\Users\etilley\AppData\Roaming\npm-cache\node-sass\4.13.1\win32-x64-72_binding.node node-sass@4.13.1 postinstall F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1\node_modules\node-sass node scripts/build.js Binary found at F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1\node_modules\node-sass\vendor\win32-x64-72\binding.node Testing binary Binary is fine npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN material-dashboard-pro@2.1.1 No repository field. npm WARN material-dashboard-pro@2.1.1 license should be a valid SPDX license expression npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 524 packages from 390 contributors and audited 7606 packages in 13.494s

7 packages are looking for funding run npm fund for details

found 0 vulnerabilities

F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1>gulp open-app [07:12:45] Using gulpfile F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1\gulpfile.js [07:12:45] Starting 'open-app'... [07:12:45] Starting 'open'... [07:12:45] Starting 'watch'... [07:12:45] Opening F:\Users\etilley\Projects\MaterialPRO\material-dashboard-pro-html-v2.1.1\examples\dashboard.html using the default OS app [07:17:22] Starting 'compile-scss'... [07:17:25] Finished 'compile-scss' after 3.39 s [07:17:25] Starting 'compile-scss'... [07:17:30] Finished 'compile-scss' after 5.15 s

[groovemen]

Hello @edwardtilley,

Thank you for using our products, we will move the scripts that we are using in the demo file into the main JS to the next update. Until then, we'll ask you to make the following changes: • add into your package.json file to "devDependencies": {... "gulp-uglify": "^3.0.2" } • in your gulpfile.js you have to add the required npm modules like this: var uglify = require('gulp-uglify'); • set the gulp task for minifying JS files:

// Gulp task to minify JavaScript files
gulp.task('scripts', function() {
  return gulp.src('./src/js/**/*.js')
    // Minify the file
    .pipe(uglify())
    // Output
    .pipe(gulp.dest('./dist/js'))
});

• after that, run **gulp scripts** command to minify the files.

Hope that information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

[edwardtilley]

Thanks - I got my minify script above working an hour ago; I simply had to run the install script for gulp-minify: npm install --save-dev gulp-minify - and it works like a charm... (nube mistake I'm afraid)

I notice you use a /dist directory in your example. I wanted to use watch mode to do this because I thought that automating minification on production would be a help, but then I studied your code and notice you don't use the call the .min.js scripts so it's clearly offered only for production use here in the template. A side-note is that the default file name for files minified by this tool is: md-min.js - and not md.min.js per your convention...

Is there any difference between the script that the "uglify" command creates - and the code that the gulp-minify creates? I assume no.

Here is the code I used again.

var Paths = { JS_SOURCES: './assets/js/material-dashboard.js' }; gulp.task('minify', () => { return gulp.src(Paths.JS_SOURCES, { allowEmpty: true }) .pipe(minify({noSource: true})) .pipe(gulp.dest('./assets/js/')) });

[edwardtilley]

Oops - I thought you were answering my gulp-minify ticket. Are you saying uglify is the solution for charts not displaying in last week's 2.1.1 release? The separate Demo file approach is ok I think; I suggested that your note could be a little more descriptive, but it works in 2.1.0 just fine. Why isn't it working in 2.1.1? That's not at all obvious to (nube) me

[groovemen]

No, I'm not saying that. The uglify is a JavaScript parser, minifier, compressor and beautifier toolkit. It has nothing to do with the charts. What I was trying to say is: please let the demo.js file into your project and the charts will work. Also, what I said with the demo scripts is that we have for example charts that have the initialization script in demo.js:

$(document).ready(function(){
    // Javascript method's body can be found in assets/demo/demo.js
    demo.initCharts();
});

I tried to explain that we will move some component scripts from demo.js to material-kit.js to avoid this type of error when you exclude demo.js from your project.

Hope I make myself clear. All the best, Stefan

[edwardtilley]

demo.initCharts() is on the Charts.html page and I should have been more clear, and mentioned that the dashboard.html is also not displaying charts in 2.1.1

I just reunzipped Material Dash HTML PRO 2.1.1 (over an existing directory), I did the npm install, ran gulp open-app - and am still not seeing charts on any pages. I have 2.1.0 and the 2.1.1 running side by side now. The sidebar collapse is not working in the 2.1.1 site either.

I assume that everyone else is seeing this.

I am sure the problem is small and obvious, but I have poured over the two directories and I don't see an explanation for this problem:

[edwardtilley]

Problems addressed in 2.1.2 release ... Thx