swimlane / ngx-graph Goto Github PK
View Code? Open in Web Editor NEWGraph visualization library for angular
Home Page: https://swimlane.github.io/ngx-graph
License: MIT License
Graph visualization library for angular
Home Page: https://swimlane.github.io/ngx-graph
License: MIT License
It would be great if we could update the peer dependencies in the NPM file to something more recent. Maybe using a caret ^ instead of a tilde would also make the upgrade simpler.
"@angular/common": "~4.0.1",
"@angular/core": "~4.0.1",
should be
"@angular/common": "^4.2.4",
"@angular/core": "^4.2.4",
I'm submitting a ... (check one with "x")
[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
Edge Labels Does not show up on IE/Firefox/Safari
they show up fine on chrome
Expected behavior
Edge labels should show up on all the browsers.
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Cross Browser Compatibility. Demo application does not show these too.
Please tell us about your environment:
MAC OSX, Intellij Idea, NPM, Angular-cli
4.1.0
5.2.4
Firefox, IE, Safari
I'm submitting a ...
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here
Is it possible to add in node-Object a new property color
?
{
id: '4',
label: 'Basic',
color: 'red' | '#e8e8e8' | 'rgba(255, 255, 255, 0.5)'
}
Hello,
I'm submitting a ...
[ x ] bug report
[ ] feature request
[ ] support request
Current behavior
Links between nodes are not drawn at all, because of this error:
TypeError: curve is not a function at line (line.js:21) at GraphComponent../src/index.ts.GraphComponent.generateLine (index.js:38714) at _loop_1 (index.js:38562) at GraphComponent../src/index.ts.GraphComponent.draw (index.js:38579) at index.js:38681 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.js:4744) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499)
It seems it's missing some dependencies, although I've got D3 4.13.0 installed. Maybe wrong version?
Expected behavior
Links between nodes drawn correctly without errors.
Reproduction of the problem
I used the provided example just with nodes, links and SVG templates and example data. Without any more attributes and options.
Please tell us about your environment:
Windows 10, Apache, PhpStorm
ngx-graph version: 4.0.2
Angular version: 5.0.0
Browser: All
Language: TypeScript 2.4.2
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here
Current behavior
Currently, the zoom only affects the scale which means that when someone wants to zoom in on an element, they need to scroll then drag manually to keep the element in the viewport.
Expected behavior
A more common behavior in maps representation (like Google Maps, for instance), is to pan at the same time as you zoom and use the mouse location as the base for the pan (balanced by the zoom speed). This feels more natural: as you scroll, the element you are targeting stays more or less on the screen.
What is the motivation / use case for changing the behavior?
The new behavior seems more standard. We can switch it to off by default but it seems to me that it should be the default behavior.
how can I disable drag of node?
first of: thank you for your awesome components!
I'm submitting a ...
[x] bug report => search github for a similar issue or PR before submitting
>i could not find anything searching for transform NaN
I just cloned the repo and started the npm start
Current behavior
in the browser, there is a error,
Error: attribute transform: Expected number, "translate( NaN, NaN)".
The error seems to be that DirectedGraphComponent.html has some bindings to
[attr.transform]="'translate(' + (-dims.width * 50) +',' + (-dims.height*50) + ')' "
where dims is undefined
Expected behavior
there is no error log, (and the transform is not applied? )
Reproduction of the problem
Please tell us about your environment:
ngx-charts version: 2.1.3
commit fdb4a60
Angular version: 4.2.4 (your repo (: )
Browser:
Chrome Version 59.0.3071.115 (64-Bit)
i got this error
Cannot read property 'domain' of undefined
anybody help?
[X ] feature request
Current behavior
Currently when a chart initializes it starts at the top left of the container when set to 'fit to container'
https://swimlane.github.io/ngx-charts-dag/
Expected behavior
Would like the option to center the chart inside of its drawing space. This is currently already done in the original ngx-force-directed
https://swimlane.github.io/ngx-charts/#/ngx-charts/force-directed-graph
Granted the force directed is always centered (not panned) it would be nice if the initial pan was set so that it was centered on the graph
What is the motivation / use case for changing the behavior?
Just having the capability to properly center the graph after data is added or other things. My use case is as I add new nodes to a clicked node I'd like to center on that node. Also when the initial graph is created (parents -> center -> children) I would like to have that centered.
ngx-charts version: x.x.x
2.1.4 ngx-charts-dag
Angular version: 2.x.x
4.1.3
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Just tested in chrome
Language: [all | TypeScript X.X | ES6/7 | ES5]
TS >2.0
Think about whether this should be built into the component, because it is also possible to implement it outside of it.
how to create simple ngx-graph in angular-cli step by step?
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
I try to set up the most basic example usage of ngx-graph with angular 5.2.9. The base is a newly generated angular project with the CLI, and also i install the ngx-graph and ngx-charts with npm.
versions i'm using:
Angular CLI: 1.7.3
Node: 8.0.0
OS: linux x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0
The modifications i did:
I know in theory just the NgxGraphModule is needed to import, but without the other two i had a different error, and importing these was the solution.
@app.module.ts:
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NgxGraphModule } from '@swimlane/ngx-graph';
...
imports: [
...
NgxGraphModule,
NgxChartsModule,
BrowserAnimationsModule
],
...
@app.component.html (this is just a copy of the example, nothing modified)
<ngx-graph
class="chart-container"
[view]="view"
[legend]="showLegend"
[links]="hierarchialGraph.links"
(legendLabelClick)="onLegendLabelClick($event)"
[nodes]="hierarchialGraph.nodes"
[scheme]="colorScheme"
[orientation]="orientation"
[curve]="curve"
(select)="select($event)">
<ng-template #defsTemplate>
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
</svg:marker>
</ng-template>
<ng-template #nodeTemplate let-node>
<svg:g class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.label">
<svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
</svg:g>
</ng-template>
<ng-template #linkTemplate let-link>
<svg:g class="edge">
<svg:path
stroke-width="2"
marker-end="url(#arrow)" >
</svg:path>
</svg:g>
</ng-template>
</ngx-graph>
@app.component.ts
...
export class AppComponent {
title = 'app';
public hierarchialGraph = {
links: [ {
source: 'start',
target: '1',
label: 'links to'
}, {
source: 'start',
target: '2'
},
],
nodes: [ {
id: 'start',
label: 'start'
}, {
id: '1',
label: 'Query ThreatConnect',
}, {
id: '2',
label: 'Query XForce',
}
],
};
}
The error i have with this solution:
ERROR TypeError: Cannot read property 'domain' of undefined
at new ColorHelper (index.js:8020)
at GraphComponent../src/index.ts.GraphComponent.setColors (index.js:38876)
at eval (index.js:38475)
at ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:4749)
at ZoneDelegate.invoke (zone.js:387)
at Zone.run (zone.js:138)
at NgZone.run (core.js:4566)
at GraphComponent../src/index.ts.GraphComponent.update (index.js:38467)
at GraphComponent../src/common/base-chart.component.ts.BaseChartComponent.ngOnChanges (index.js:7233)
Also i get the same issue when i try to integrate ngx-graph to a more custom angular project.
Are there anything i'm doing wrong? This message looks like an internal error to me.
Thanks,
Using circle instead of rect
[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[*] support request => Please do not submit support request here
Current behavior
currently, the sample use <svg:rect>
which works well.
but if I want to use customized icon or circle.
I can't align the lines with the circle center...
Expected behavior
how to make the lines always connected with the circle center ?
anyone please help, why there is error "Cannot read property 'nodes' of undefined"?
Hi,
Right now in the package dependencies we can find the following that are pretty restrictive.
"@angular/common": "~4.0.1",
"@angular/core": "~4.0.1",
This allows us to use at best the version 4.0.3 of Angular and right now the 4.2.3 is out.
Do you plan on updating the supported Angular versions ?
Thanks in advance.
I used npm to install ngx-graph
I included NgxGraphModule in app.module
import { NgxGraphModule } from '@swimlane/ngx-graph';
imports: [
NgxGraphModule,
...]
I included d3 and dagre in my cli.json
"scripts": [
"../node_modules/d3/build/d3.min.js",
"../node_modules/dagre/dist/dagre.min.js"
],
However it seems angular is still not recognizing ngx-graph directives
"TypeError: Cannot read property 'nodes' of undefined"
Are there any additionally required dependencies besides ngx-graph, d3 and dagre?
Has anyone else had similar issues with ngx-graph and angular 5.2.6?
can this play with angular1.x
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
I have function getData()
updating data
once every second, i.e. this.data = this.getData()
and in html:
<ngx-charts-line-chart-timeline [scheme]="scheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" [animations]="animations" [tooltipDisabled]="tooltipDisabled" [timeline]="timeline" (select)="onSelect($event)">
</ngx-charts-line-chart-timeline>
It works as expected and the graphs "rolls" nicely showing last 200 (user selected number) points in the graph. Once I select area in timeline the graph stops as expected and shows only the selected values. When I click unselected area in timeline the selection clears and shows the last 200 points, but the graph doesn't update unless I manually update the gaph by clicking the timeline again.
Expected behavior
If the selection is cleared graph should update automatically.
Reproduction of the problem
As above
What is the motivation / use case for changing the behavior?
As above
I'm submitting a ... (check one with "x")
[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
i am using a covatent teradata framework that has already installed ngx-charts, i added the npm for ngx-charts-dag and it pass the compilation process but it trigger the following error in the brownser:
DirectedGraphComponent.html:2 ERROR Error: Unable to resolve animation metadata node #undefined
at visitAnimationNode (http://localhost:22222/vendor.bundle.js:120346:19)
at AnimationAstBuilderVisitor.webpackJsonp.../../../animations/@angular/animations/browser.es5.js.AnimationAstBuilderVisitor.build (http://localhost:22222/vendor.bundle.js:120465:17)
at buildAnimationAst (http://localhost:22222/vendor.bundle.js:120447:45)
at InjectableAnimationEngine.webpackJsonp.../../../animations/@angular/animations/browser.es5.js.AnimationEngine.registerTrigger (http://localhost:22222/vendor.bundle.js:124008:41)
at http://localhost:22222/vendor.bundle.js:212198:76
at Array.forEach (native)
at AnimationRendererFactory.webpackJsonp.../../../platform-browser/@angular/platform-browser/animations.es5.js.AnimationRendererFactory.createRenderer (http://localhost:22222/vendor.bundle.js:212198:27)
at DebugRendererFactory2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRendererFactory2.createRenderer (http://localhost:22222/vendor.bundle.js:169994:49)
at createComponentView (http://localhost:22222/vendor.bundle.js:168598:56)
at callWithDebugContext (http://localhost:22222/vendor.bundle.js:169962:42)
Expected behavior
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
The version currently published on NPM has @swimlane/ngx-charts version 6.1.0 listed as a dependency. This version of ngx-charts is itself dependent on angular 4.x. This creates a type mismatch between the version needed by ngx-charts-dag and ngx-charts and creates that kind of error:
npm WARN @swimlane/[email protected] requires a peer of @angular/animations@^4.0.1 | ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of @angular/common@^4.0.1 | ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of @angular/core@^4.0.1 | ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of d3@^4.7.4 but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of @angular/common@^4.2.x but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of @angular/core@^4.2.x but none is installed. You must install peer dependencies yourself.
npm WARN @swimlane/[email protected] requires a peer of d3@^4.9.x but none is installed. You must install peer dependencies yourself.
Here are the current info from NPM:
> npm view @swimlane/ngx-charts-dag dependencies
{ '@swimlane/ngx-charts': '^6.1.0', dagre: '^0.7.4' }
> npm view @swimlane/ngx-charts-dag peerDependencies
{ '@angular/animations': '^4.0.1 | ^5.0.0',
'@angular/common': '^4.0.1 | ^5.0.0',
'@angular/core': '^4.0.1 | ^5.0.0',
d3: '^4.7.4',
rxjs: '^5.0.3' }
> npm view @swimlane/[email protected] peerDependencies
{ '@angular/common': '^4.2.x',
'@angular/core': '^4.2.x',
d3: '^4.9.x',
rxjs: '^5.0.x' }
You can see that version 3.0 of ngx-charts-dag and version 6.1.0 of ngx-charts don't use the same version of Angular.
Expected behavior
ngx-charts-dag should depend on the latest version of ngx-charts which supports version 5.x of Angular. It should also remove Angular 4.x from its peer dependencies since 4.x won't be compatible with ngx-charts anyway. I can see that the version of package.json in the repository has been corrected, but the changes don't seem to have been pushed to NPM.
Reproduction of the problem
Try to do an install with an Angular 5 project.
What is the motivation / use case for changing the behavior?
The current deployed version on NPM is not working at all with Angular 5
ngx-charts-dag version: 3.0.0
Angular version: 5.0.1
how to create custom content for node?
for example image or icon with text.
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
just start app in dev mode everything is ok
but after aot build, the graph seems can not build links between nodes
core.js:1427 ERROR TypeError: Cannot read property '_in' of undefined
at graph.js:117
at en (lodash.js:603)
at Function.ai.filter (lodash.js:9189)
at a.sources (graph.js:116)
at longestPath (util.js:52)
at p (network-simplex.js:56)
at a (index.js:47)
at OTPI.t.exports (index.js:34)
at layout.js:35
at notime (util.js:235)
at layout.js:35
at notime (util.js:235)
at layout.js:25
at notime (util.js:235)
at Object.C2uY.t.exports [as layout] (layout.js:22)
at e.draw (graph.component.js:179)
All nodes are huddled together.
Expected behavior
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
window10 and ubuntu14.04
webpack dev server and nginx
BUG
im getting error when i try to user --prod environment
it is says
"@swimlane/ngx-charts-dag/release/directed-graph/directed-graph.component.d.ts.DirectedGraphComponent.html (7,7): Supplied parameters do not match any signature of call target."
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
If nodes are clickable, and you try to move a node it will also fire the click event.
Expected behavior
Node click and node move should be two separate events that should function independently of one another, so when I move a node it should not fire the click event.
First, thanks to this great angular component! ๐
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here
Would be great if ngx-charts-dag could have more control on nodes. Tools like control/save position and change nodes styles. I have one app that uses js.cytoscape to make tasks workflow, but I am thinking on other (simple) lib to handle ngx-charts-dag fits to this need. Here is the flow I would like to use with ngx-charts-dag
Since we already use ngx-charts on this app, the same tool familly ngx-charts-dag will be a great choise. So, does ngx-charts-dag has some roadmap to implement saving position and change node style?
I'm submitting a ... (check one with "x")
[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
Recieve linkselection.attr().transition is not a function due to d3 upgrades
Expected behavior
no error
Reproduction of the problem
https://stackblitz.com/edit/angular-vtavqy
this doesn't show the error but it is definitely not building / showing the edges. In my personal case i get the error
Please tell us about your environment:
defined in the stackblitz
how to change arrow to link other node with drag and drop?
I'm submitting a issue of ngx-graph && angular4
[ ] bug report => search github for a similar issue or PR before submitting
[โ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
ngx-graph depends on angular5, so when use it in auglar4, aot builds failed with
Error: Metadata version mismatch for module ./node_modules/@swimlane/ngx-graph/release/ngx-graph.module.d.ts, found version 4, expected 3
But when we use version 3.0.0, this issue appears: #20
Expected behavior
There's a version that supports angular4
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
Is it possible?
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
I have home component which has button on click of button the modal will be opened.I wanted to using charts in the modal so inside the model component i have the placed the below code.
> import { Component, NgModule } from '@angular/core';
> import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
> import {NgxChartsModule} from '@swimlane/ngx-charts';
>
> @Component({
> selector: 'ngx-modal',
> template: `
> <div class="container">
> <div class="row">
> <div class="col">
>
>
> <ngx-charts-linear-gauge
> [scheme]="colorScheme"
> [value]="60"
> [previousValue]="80"
> [min]="0"
> [max]="100"
> [units]="'alerts'"
> >
> </ngx-charts-linear-gauge>
>
> </div>
> <div class="col">
>
>
>
> </div>
> </div>
>
> </div>
>
>
> })
>
> export class ModalComponent {
> colorScheme = {
> domain: ['#5AA454', '#A10A28', '#C7B42C']
> };
> modalHeader: string;
> modalContent: string = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
>
> constructor(private activeModal: NgbActiveModal,
> ) { }
>
> closeModal() {
> this.activeModal.close();
> }
> }
>
> @NgModule({
> imports: [ NgxChartsModule ],
> declarations: [ ModalComponent ],
> bootstrap: [ ModalComponent ]
> })
> export class AppModule {}
Expected behavior
What is expected is that i want the charts to be displayed in the modal popover screen.
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Error
Uncaught Error: Template parse errors:
Can't bind to 'scheme' since it isn't a known property of 'ngx-charts-linear-gauge'.
- If 'ngx-charts-linear-gauge' is an Angular component and it has 'scheme' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
visitors
<ngx-charts-linear-gauge
[ERROR ->][scheme]="colorScheme"
[value]="60"
[previousValue]="80"
"): ng:///AppModule/ModalComponent.html@63:5
Can't bind to 'value' since it isn't a known property of 'ngx-charts-linear-gauge'.- If 'ngx-charts-linear-gauge' is an Angular component and it has 'value' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-charts-linear-gauge
[scheme]="colorScheme"
[ERROR ->][value]="60"
[previousValue]="80"
[min]="0"
"): ng:///AppModule/ModalComponent.html@64:5
Can't bind to 'previousValue' since it isn't a known property of 'ngx-charts-linear-gauge'.- If 'ngx-charts-linear-gauge' is an Angular component and it has 'previousValue' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[scheme]="colorScheme"
[value]="60"
[ERROR ->][previousValue]="80"
[min]="0"
[max]="100"
"): ng:///AppModule/ModalComponent.html@65:5
Can't bind to 'min' since it isn't a known property of 'ngx-charts-linear-gauge'.- If 'ngx-charts-linear-gauge' is an Angular component and it has 'min' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[value]="60"
[previousValue]="80"
[ERROR ->][min]="0"
[max]="100"
[units]="'alerts'"
"): ng:///AppModule/ModalComponent.html@66:5
Can't bind to 'max' since it isn't a known property of 'ngx-charts-linear-gauge'.- If 'ngx-charts-linear-gauge' is an Angular component and it has 'max' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[previousValue]="80"
[min]="0"
[ERROR ->][max]="100"
[units]="'alerts'""): ng:///AppModule/ModalComponent.html@67:5
Can't bind to 'units' since it isn't a known property of 'ngx-charts-linear-gauge'.
- If 'ngx-charts-linear-gauge' is an Angular component and it has 'units' input, then verify that it is part of this module.
- If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
[min]="0"
[max]="100"
[ERROR ->][units]="'alerts'""): ng:///AppModule/ModalComponent.html@68:5 'ngx-charts-linear-gauge' is not a known element: 1. If 'ngx-charts-linear-gauge' is an Angular component, then verify that it is part of this module. 2. If 'ngx-charts-linear-gauge' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("visitors [ERROR ->]<ngx-charts-linear-gauge [scheme]="colorScheme" [value]="60"
Please tell us about your environment:
Windows
ngx-charts version: x.x.x
Latest
Angular Cli version: 1.4.1
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here
Current behavior
Currently we are not able to filter based on link type or node type. However we can write our own flavor filtering criteria, but having a default functionality will really be a great addition
Expected behavior
There should be default filter functionality
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
I'd like to use the autoZoom feature, but it hasn't been published to npm.
Publish, please. ๐ฆ โก๏ธ ๐ป ๐ ๐ ๐
[ X] feature request
Current behavior
The component currently generates its own legend options. Because of this it does not set a Legend title and the user is unable to set a legend title
Expected behavior
either [legendTitle] is exposed or the user can set their own legend options.
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
We have followed the steps mentioned here https://www.npmjs.com/package/@swimlane/ngx-charts-dag. Integrating ngx-charts-dag with angular 2.4.3 gives following error. Please let us know what is the issue and how we can integrate ngx-charts-dag with example.
error_handler.js:50 EXCEPTION: Uncaught (in promise): Error: Template parse errors:
'ng-template' is not a known element:
Error: Template parse errors:
'ng-template' is not a known element:
Expected behavior
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
I'm submitting a ... (check one with "x")
[ X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
Using the graph I get this error
I have tracked it down to when core.js of Angular tries to instantiate the directive it is unable to find the output binding mouseWheelUp/mouseWheelDown as it says they are undefined.
Related issue
which seems to have been solved
Expected behavior
component displays without the error
Reproduction of the problem
I currently can't reliably reproduce this error.
Specifics for my setup which I have tried to repro but can't outside of my specific env.
Using ngx-graph inside of a @ng-bootstrap/ng-boostrap modal.
Using ngx-graph outside of said modal on the same routed component page
Please tell us about your environment:
NPM
Windows
Vscode
Angular CLI "1.5.0"
Angular "5.0.2" (with aot compilation)
ngx-graph version: x.x.x
4.0.0
Language: [all | TypeScript X.X | ES6/7 | ES5]
TS 2.4.2
Pretty sure it's not a ngx-charts-dag problem but with hiphens in links id (like UUID) it dont works: error is:
EXCEPTION: Cannot read property 'line' of undefined
Example:
"links": [
{
"source": "045dc1d0-f021-4a0b-a40b-a0d9557ddbf8",
"target": "4ae4d2b6-64ce-4c5b-957e-20f8f1b98354"
},
{
"source": "045dc1d0-f021-4a0b-a40b-a0d9557ddbf8",
"target": "94d5a98e-7c36-45d8-8dc8-fea9e3562814"
},
{
"source": "b8a18149-5ed5-43a3-b3f6-805e4bd3f43c",
"target": "93f877ee-f41c-458d-ac50-5b0460b64b3b"
},
{
"source": "4ae4d2b6-64ce-4c5b-957e-20f8f1b98354",
"target": "b8a18149-5ed5-43a3-b3f6-805e4bd3f43c"
},
{
"source": "94d5a98e-7c36-45d8-8dc8-fea9e3562814",
"target": "93f877ee-f41c-458d-ac50-5b0460b64b3b"
}
]
Replacing hiphens it works.
Enter and exit animations should be fade in/fade out for nodes, instead of slide in.
I'm submitting a ... (check one with "x")
[x] offer to help
It seems like this project has moved down your priority list. I'm willing to help maintain it if you want to give me rights to do that. If you don't want to give me those rights, let me know how else I can help.
Becase we use templates for nodes and links, the elements get redrawn on every update, which causes flicker in the chart. Need to investigate and find a way around it.
I'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here
Hi guys!
Looks like your work is very cool.
Please, can you give more details about how to use it. Some basic example.
or may be I miss some docs. Do you have extra documentation exept readme.md on the first page?
Thank you!
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
The AOT build fails with the following error:
ERROR in TypeError: Cannot read property 'version' of null
It seems to be related to this pull request in ngx-charts: swimlane/ngx-charts#639
Expected behavior
AOT shouldn't fail
Reproduction of the problem
Run ng build --prod
I'm submitting a ...
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
The graph from the demo has all the nodes in a block on the left side of the graph area.
Expected behavior
It should display correctly as it's the case with Chrome.
Reproduction of the problem
Open the demo graph (https://swimlane.github.io/ngx-charts-dag/) using IE11 or Edge.
What is the motivation / use case for changing the behavior?
There are people using IE/Edge (yes, they do still exist :))
Please tell us about your environment:
Windows 10 Creator's update
ngx-charts version: 2.0.0
Angular version: 4.1.2
Browser: [ IE 11 | Edge ]
Language: [ all ]
I want to create a node on the page by clicking on the button.
I'm submitting a ... (check one with "x")
[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
Chrome 59.0.3071.109 32 bit and 64 bit version - crashes loading the demo page.
Reproduction of the problem
Go on the demo page https://swimlane.github.io/ngx-charts-dag/ with chrome 59 and it will crash
Please tell us about your environment:
It happens both with 32 and 64 bit versions.
I used the same code in the readme : "app.component.html" but i have got a template parse error :
<ngx-graph
class="chart-container"
[view]="view"
[legend]="showLegend"
[links]="hierarchialGraph.links"
(legendLabelClick)="onLegendLabelClick($event)"
[nodes]="hierarchialGraph.nodes"
[scheme]="colorScheme"
[orientation]="orientation"
[curve]="curve"
(select)="select($event)">
<ng-template #defsTemplate>
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
</svg:marker>
<ng-template #nodeTemplate let-node>
<svg:g class="node"
ngx-tooltip
[tooltipPlacement]="'top'"
[tooltipType]="'tooltip'"
[tooltipTitle]="node.label">
<svg:rect [attr.width]="node.width" [attr.height]="node.height" [attr.fill]="node.options.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.height / 2">{{node.label}}</svg:text>
</svg:g>
<ng-template #linkTemplate let-link>
<svg:g class="edge">
<svg:path
stroke-width="2"
marker-end="url(#arrow)" >
</svg:path>
</svg:g>
I'm submitting a ... (check one with "x")
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior
When compiling an application using the version 4.1.0, I get the following error:
ERROR in node_modules/@swimlane/ngx-graph/release/graph/graph.component.d.ts(49,27): error TS2304: Cannot find name 'Matrix'.
Expected behavior
The application should build without errors
Reproduction of the problem
Any app using the new version and compiled with prod/build-optimizer
I think the issue is that the Matrix
type is missing from https://github.com/swimlane/ngx-graph/blob/master/release/graph/graph.component.d.ts
That type is declared here: https://github.com/chrvadala/transformation-matrix/blob/master/transformation-matrix.d.ts
ngx-graph version: 4.1.0
Angular version: 5.x.x
Browser: Compilation error
Language: TS
Implement a possibility to reposition nodes by drag and drop. Once a node is repositioned manually, it should ignore new positions assigned to it by layout.
how to change arrow and create runtime node in page
How can i add a zoom event to the graph?
how link node clickable?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.