I am using d3js for my project in Angular CLI.
I have successfully integrated d3js in the project. In order to perform what I want to create, I need the scale method. However, D3js 4.0 have been split into mini-libraries and it seems like each of them have to be integrated separately into the project. Here you can see the result of npm install d3:
node_module_tree
I tried importing d3 and d3-scale like this:
angular-cli-build.js
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'#angular2-material/**/*',
'bootstrap/**/*',
'ng2-bootstrap/**/*.js',
'moment/moment.js',
'd3/**/*.js',
'd3-scale/**/*.js'
]
system-config.ts
const map: any = {
'#angular2-material': 'vendor/#angular2-material',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'moment': 'vendor/moment/moment.js',
'd3': 'vendor/d3/build/d3.js',
'd3-scale': 'vendor/d3-scale/build/d3-scale.js'
};
my_component
import * as d3 from 'd3';
import * as d3Scale from 'd3-scale';
But the build fail even if my d3-scale is in the vendor folder, he cannot find it.
Is it the correct way to integrate those mini libraries?
Thanks!
I found my problem.
Definitely Typed does not provide a typings file for d3js 4.0 but for 3.0 versions.
That's why I had:
- a method d3.scale.linear() available which returned undefined (typings for d3 3.0)
- the library d3-scale for d3 4.0 which crashed during build
So I will go back to d3js 3.0 until they provide a d.ts file for the 4.0.
Related
Could someone advise me to use like scroll reveal for vue3, I couldn't find any forum and if so please explain to me exactly how to import scroll reveal for vue3
I've already tried different libraries, but all are for vue3, and the transition belonging to vue3 wouldn't work very well as scrollreveal
enter image description here
The Vue 3 branch for vue-scroll-reveal is not released on NPM, but you can add the library as a dependency using the project's github's URL. You will need to install it together with the dependency "scrollreveal" with yarn or npm like so:
yarn add scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
or
npm i scrollreveal https://github.com/tserkov/vue-scroll-reveal#v2
The Github README also describes how to use the library in a component which I've pasted below:
If using default options
<script setup>
import { vScrollReveal } from 'vue-scroll-reveal';
</script>
OR if using custom default options
<script setup>
import { createScrollRevealDirective } from 'vue-scroll-reveal';
const vScrollReveal = createScrollRevealDirective({
delay: 1000,
duration: 150,
});
</script>
There are five ckeditor5 ready-made builds available: classic, inline, balloon, balloon-block and document. I would like to use the balloon-block layout, but I want to build it from source (as is recommended) for integration into my Vue 2.x app (with webpack and Vue CLI 3). The docs for building from source use the classic editor as an example, and instead of using the pre-built package #ckeditor5/ckeditor5-build-classic, it says to import the source package #ckeditor5/ckeditor5-editor-classic and use that as a base to which you can add all the plugins you want.
The balloon layout has its own source package #ckeditor5/ckeditor5-editor-balloon which presumably can be used similarly, but I can't find any source package for balloon-block. If I'm supposed to use the ...editor-balloon package as a base, are there any docs I can use that will show me how to build my own balloon-block from source?
I've just learned that the hidden toolbar accessed from the gutter is actually a plugin calle BlockToolbar, so presumably I do just have to use the editor-balloon package as the source base and include/configure that plugin. If someone else doesn't provide a more complete example with sample config, I'll post an answer with my own solution when I have something. In the meantime, the docs here for the block toolbar plugin has lots of info on how to set it up.
You need to install the package '#ckeditor/ckeditor5-ui', which should already be a dependency of '#ckeditor/ckeditor5-editor-balloon' itself and import the plugin 'BlockToolbar' and use it in your 'create()' method call. Like so:
import BalloonEditor from '#ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import { BlockToolbar } from '#ckeditor/ckeditor5-ui';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
BalloonEditor
.create(document.querySelector('#editor'), {
plugins: [BlockToolbar, Essentials, Paragraph], // BlockToolbar added here!
toolbar: ['bold', 'italic'],
blockToolbar: ['heading', 'paragraph', 'heading1', 'heading2', 'bulletedList', 'numberedList'],
});
I'd like to render GraphQL Playground as a React component in one of my pages but it fails due to missing file-loader in webpack. Is there a way to fix this in docs or do I need to create new plugin with new webpack config?
Is it good idea to integrate Playground and Docusaurus at all?
Thanks for your ideas...
A few Docusaurus sites have embedded playgrounds:
Hermes
Uniforms
In your case you will have to write a plugin to extend the webpack config with file-loader.
Not sure if you found a better way but check out: https://www.npmjs.com/package/graphql-playground-react
You can embed this react component directly in your react app - It looks like Apollo also uses the vanilla JS version of this
I just had exactly the same problem. Basically, Docusaurus with a gQL Playground Integration runs fine in local but won't compile due to errors when running yarn build as above.
In the end I found the answer is in Docusaurus, not in building a custom compiler:
I switched from using graphql-react-playground to GraphiQL: package: "graphiql": "^1.8.7"
This moved my error on to a weird one with no references anywhere on the web (rare for me): "no valid fetcher implementation available"
I fixed the above by importing createGraphiQLFetcher from '#graphiql/create-fetcher' to my component
Then the error was around not being able to find a window component, this was an easy one, I followed docusaurus docs here: https://docusaurus.io/docs/docusaurus-core#browseronly and wrapped my component on this page in like this:
import BrowserOnly from '#docusaurus/BrowserOnly';
const Explorer = () => {
const { siteConfig } = useDocusaurusContext();
return (
<BrowserOnly fallback={Loading...}>
{() => {
const GraphEx = GraphExplorer
return
}}
);
}
This now works and builds successfully
I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>
I was researching a way if using a charting library with angular-meteor application. I have seen some examples of using HighCharts with AngylarJS. I have also seen examples of using HighCharts with Meteor. I would love to be able to use either HighCharts or ChartJS within angular-meteor application, and to have my charts data bound to Angular $scope, but, at the some time, have those charts react to the data changes in the server-side MongoDB (which us what Meteor does). I have seen some examples of angular-meteor app, but never seen such an app use any charts. Can anyone point me to a working angular-meteor example, which has a reactive chart?
You can use this angular directive for chart.js. Here is a simple example showing a pie chart:
Starting from a Meteor 1.3 template application (run meteor create myapp).
Replace blaze-html-templates with angular-templates in .meteor/packages,
add
"angular": "^1.5.5",
"angular-chart.js": "0.10.2",
"angular-meteor": "^1.3.10",`
to "dependencies" in package.json, run meteor npm install, replace the content of client/main.js with this:
import angular from 'angular';
import 'angular-chart.js/dist/angular-chart.css';
import 'angular-chart.js';
angular.module('app', [
'chart.js'
]).controller('MainCtrl', function ($scope){
$scope.labels = ["a", "b", "c"];
$scope.data = [1, 2, 3];
});
and the content of client/main.html with this:
<body ng-app="app" ng-controller="MainCtrl">
<canvas id="pie" class="chart chart-pie" chart-data="data" chart-labels="labels"></canvas>
</body>
run meteor.
You should see the pie chart. Obviously you can replace the data variable with some data from a collection etc. using Meteor. Here we haven't really used meteor except of the command line tool.