GithubHelp home page GithubHelp logo

adedayo / ngx-liquid-gauge Goto Github PK

View Code? Open in Web Editor NEW
6.0 6.0 8.0 875 KB

An Angular Component for D3 Liquid Fill Gauge

License: BSD 3-Clause "New" or "Revised" License

JavaScript 7.57% TypeScript 88.01% HTML 3.96% CSS 0.45%

ngx-liquid-gauge's People

Contributors

adedayo avatar dependabot[bot] avatar tzahi12345 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ngx-liquid-gauge's Issues

the attributes can not work in the lib-ngx-liquid-gauge

Hi
Using lib-ngx-liquid-gauge in my component, got this errors with underline RED color in the editors.

The message is =>
Property 'minValue' is private and only accessible within class 'NgxLiquidGaugeComponent'

Checking /nodes/ngx-liquid-auage, the attribute scope is private.

Enviorments:
Angular 12.x

can you help me to solve it?

Component not work on Angular 9

Hi,

I tried to update my application to angular 9, but when loading the screen with the component an error occurred:

Could not read the undefined property 'nativeElement'

image

The component was working well with version 7 of angular.
Did you have this error? Should this component work at angular 9?

Gauge size or responsive

Please excuse me If my question is senseless.

I'm both new to this gauge and never used D3 before. So i'm a bit lost here.

How can I set the gauge size to either an specified width and height or/ responsive.

Thanks.

Object(...) is not a function

I'm trying to use ngx-liquid-gauge with a ionic3 app.
i've installed d3 and ngx-liquid-gauge and added ngx-liquid-gauge in my app.module.ts.
(+added it in my page.ts)
Then i've tried to simply add a simple html element
<lib-ngx-liquid-gauge
[value]="77">

When i've simply run "ionic serve" (to run the app), at the starting (i suppose when loading your lib), i've a blocking issue

"Object(...) is not a function"

Uncaught TypeError: Object(...) is not a function
    at ngx-liquid-gauge.js:18
    at Object.<anonymous> (ngx-liquid-gauge.js:20)
    at __webpack_require__ (bootstrap 7b4d8e9c9037c30cdbdc:54)
    at Object.570 (main.ts:5)
    at __webpack_require__ (bootstrap 7b4d8e9c9037c30cdbdc:54)
    at Object.565 (main.ts:1)
    at __webpack_require__ (bootstrap 7b4d8e9c9037c30cdbdc:54)
    at webpackJsonpCallback (bootstrap 7b4d8e9c9037c30cdbdc:25)
    at main.js:1

ngx-liquid-gauge.js line 18.

What can i do ?

Issue: Can't resolve 'd3' when execute ng serve

Hi @adedayo

Thanks for your time to write this amazing gauge!

But after install ngx-liquid-gauge with angular-cli, angular app compile failure, log printed as below,

ERROR in ./node_modules/ngx-liquid-gauge/fesm5/ngx-liquid-gauge.js
Module not found: Error: Can't resolve 'd3' in 'D:\3 NodeJs_project\node_modules\ngx-liquid-gauge\fesm5'
i 「wdm」: Failed to compile.

we can install d3 with npm first to solve this problem, but I cannot find the description in your readme file.
I advise you can add ' npm install d3 --save ' dependence in your readme for help others.

Thanks!

Not working

Hi , this is not working in angular 5.x version.

please suggest how to bypass this issue

Input properties are private

Why are (Input) properties private? Shouldn't they be public?

I have run your test example and am getting the following error

image

Thanks

Is there any option to hide outer circle of chart

Hi, I just using this package in my angular project, which was awesome. But I have an issues with it.

  1. Chart is always aligned to the right end, how to customize the alignment.
  2. I have no choice why the outer circle of the chart is there, is there any way to remove/Hide the outer circle. *refer Screenshot

kindly help me with this...

image

Cannot change chart shape

Hello, I would like to know how to change the shape of the gauge. I would like a rect instead of a circle

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.