We Keep Coding

Is there a way to use a working HTML page as an Angular 5/6 component?

We are undergoing an project in Angular 5/6 where we get prebuilt HTML pages, that use jQuery, gridstack.js and CSS for UI, that we'll implement as components. Assuming it's not possible to rewrite all the jQuery and JS code in Angular, is there any way to run the jQuery code provided in the tag directly in Angular?
I have already tried importing jQuery as:
import $ from 'jQuery';
Here is a sample of the code:
<script type="text/javascript">
$(function () {
$('.grid-stack').gridstack({
width: 12
});
$(".accordion-toggle").click(function () {
$(this).toggleClass("activu");
$(".accordion-toggle").not(this).removeClass("activu");
})
var options = {
float: true
};
$('.grid-stack').gridstack(options);
</script>

It is possible and could be a good intermediate step on a migration path.
I am working on a project right now where we have a JQuery-based app. It has a lot of CSS and HTML code inside the JS code to handle state changes and change content and styling accordingly. It is relatively messy.
We took a number of steps of migrating to Angular, with the first being what you are describing. It definitely already helped gain an overview of the code base and structure the code in a much more maintainable way than it was before.
I took the HTML and broke it down into Angular components. For this step, we just left the JQuery code in the main AppComponent TS file. You can simply use JQuery in Angular TS files with a declare const $: any;.
I broke down the the JQuery code and migrated everything that was template related (e.g. changing parts of the DOM tree based on events/state) into the Angular HTML files.
I took the one large CSS file and moved the CSS rules to the individual components.
I went through the entire remaining JQuery code and piece by piece migrated it to proper Angular code.
It proved to be a viable strategy. We were first considering re-writing the entire project, but like this we always had a running version, could continuously run UI tests against it and piece by piece migrate.
All of that is to say: I would not see a JQuery/Angular mix as a final solution, but it can be a good migration strategy.

You can use jQuery in your angular project. Normally jQuery based DOM manipulation is not the standard way for angular but in some cases we have to jQuery plugins for certain features.
Steps:
Import jQuery script in your index.html
<script src="assets/js/jquery.min.js"></script>
Import your plugin css/js in .angular-cli.json inside styles and scripts arrays
Inside the component where you want to use it , declare jQuery.
declare var $ : any;
Use in directly in your component. If plugin needs to be initialised , you can do it inside ngOnInit

Integrate a D3.js tree into a angular 4 project

I'm working on a webpage and I want to visualize a certain tree structure.
I bumped into this beautiful D3.js tree (http://bl.ocks.org/robschmuecker/7880033), but I'm having trouble importing it into my project since there are several ways (dg3-ng2 for example).
D3.js is a javascript-libary - and Angular works with typescript.
How do I integrate that certain tree into my project so that I also can modify it without any trouble afterwards?
I do have several questions like:
Where do I import the .js and the .json file?
Do I have to convert the javascript code into typescript manually?
Should I write the .js code into a .ts file?
Should I make a reference in my index.html?
Should I make use of a D3-Service?
As you can see I'm quiet confused.

If you use Angular, it's simple)
Istall d3 from npm.
Import d3 in component like that:
import * as d3 from 'd3';
And write you logic, use d3 syntaxis, example:
constructor(private element: ElementRef) {
this.htmlElement = this.element.nativeElement;
this.host = d3.select(this.element.nativeElement);
}
You graphic is a component, in you component descrite functions to build svg, draw axis and etc.
Then on init of component call methods that you describe, example:
ngOnInit(): void {
this.setup();
this.buildSVG();
this.drawFirstPlanRects();
this.drawSecondPlanRects();
this.drawXAxis();
this.drawYAxis();
this.drawCrossLines();
}

I'd strongly recommend using angular-cli since when you install the d3 library you won't have to deal with the boiler plate of hooking it into the app properly. You'd just need to import it into your ts document like the above example shows. On importing the json there are several different ways that it could be handled. You could just store the json in a variable in the .ts file, you could store it in a static json document that you then host along with the app and there a many examples of pulling files and loading json data out there already.
You don't have to convert any of the js code you have since ts is essentially js with types, though you might have to declare an any type for some things, but if you want ts code you will have to manually convert or find a ts example. I'd strongly recommend a good IDE that is compatible with ts. It'll do a lot of the heavy lifting of finding mistakes.
It's rather difficult to answer that question since I don't know the specs of your project. Generally if you are doing a one off thing that does't need angular I'd just keep it simple with js and drop the usage of angular. If this is part of a larger app though I'd recommend writing it in ts since angular2+ is written in ts and most examples you find online will be in ts.
If you are using angular-cli you won't need to make a reference in your index.html file
I'm not sure what you are asking here.
From the questions you are asking I'd strongly recommend really looking at angular and learning how to properly create an app with it and then figure out how to integrate d3 int the project, since some of the questions you are asking aren't related to just working with d3 in angular.

vuejs include javascript library in spa

i'am creating spa application using vuejs and i find out that i have 3 option in loading my javascript library like bootstrap.js or jquery.js and other javascript library:
1.
first is by include all javascript library that i will use in my application in index.html where my vuejs application will live but i find that there is some javascript library that not working to well
ex: there is some javascript library that calculate page height by selecting some div with specific id="page-container", but that div not loaded when page is rendered from server, so at that moment the javascript will throw error since id="page-container" not exist yet.
2.
second is by adding it like this to all my javascript library js
// before you use your files in some components,you should package them
// your local files
export default { //export your file
your_function(){ // defined your function
...
}
}
// now your can use it
// your component file
<script>
import local_file from 'your_file_relative_path'
//now you can use it in the hook function
created(){ //or other hook function
local_file.your_function() //call your function
}
</script>
but that mean i need to change every javascript library that i use...
3.
third is by adding it using npm, and just in the vue component import it, it works okay and feels more natural but not all my javascript library are in npm, some of them is admin template related that i bought from themeforest and will never be in npm.
so which one is a better way or maybe there is much more better way that those 3 option that i find out? its hard to find any tutorial or discussion that mention adding other javascript library to spa vuejs most of them just put a bootstrap into index.html and done.

Well, If your library exist in NPM, then this is the best option, because then you have this option to import only the part of the script that you need for certain components, for example, fontawesome library, you can import only the icons that you need instead of import all of them!
but if your script is not in NPM, the best option is to run your script in beforeMount or beforeCreate of the component that the script needed to run.
the third way which is add the link reference on html is not really suggested, since it will be global and will reduce the performance.

Can I use Webpack to inject Google Charts into my project?

Is there any way to use Google Charts in a React app? I have found react-google-charts which I have got working a bit, but it seems to lack much of the API of Google Charts, or is at the very least is undocumented. I'm also a little shy to use something in production that NPM stats show only has ~400 downloads in the last day.
However I can't find Google Charts alone on NPM and no way simply to import Charts from 'google-charts' like I had initially expected.
My next thought was to see if there is a way to import a library as a global variable.
1) How can I do that
2) If that's possible how do I include it in a react component like import { Line } from '???'

Use Webpack externals
By defining a library as external webpack simply export the global symbol for the library, much like (say for jQuery)
{
1: function(...) {
// simplified for illustrating
module.exports = jQuery;
}
}
So you could do something similar to this:
Add a <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> or newer url from Charts homepage
In your webpack configuration add:
externals: {
charts: 'google.charts' // or any other alias you want, can be a regex too! check Webpack's doc for more
}
And import it as:
import chart from 'charts'
// do something!
charts.load('current', {'packages':['corechart']});
Make sure to load Google Charts before loading your bundle.
For the ReactJS part, you need some way to get hold of the native DOM element in your script, by using refs or something.
P.S. I am not a react guy so maybe someone with react background may help

Highcharts (Gauge) and Highstock on the same page with Meteor

I am using HighCharts and HighStock and I want to display a Gauge chart (which does not exist in the HighCharts library) and a Stock chart on the same page. Thus, I have to load both of the libraries and not just HighStock as others suggested.
I am using Meteor and I am loading these libraries with the maazalik:highcharts and jhuenges:highstock packages.
However, its giving me the error 16 which states that they can't be loaded together.
How can I do this?
Thank you very much in advance.

The entire code base for Highcharts is included in the Stock package. To avoid collision you should therefore only include Highstock. With your requirements you also need "Highcharts-more" and "Solid-gauge" modules.
None of the packages you reference has this specific setup, and using both cause a collision. I've created a package ondkloss:highstock (GitHub) which satisfies your requirements. If you would like to create your own, the essense is including the mentioned files, for example like this:
Package.onUse(function(api) {
api.versionsFrom('1.1.0.2');
api.use('jquery');
api.addFiles([
// Core
'lib/highstock.js',
// Extra types
'lib/highcharts-more.js',
'lib/highcharts-solid-gauge.js',
], 'client');
});
The sources used can be found here:
Highstock core
Highcharts more module
Solid gauge module