reggino / react-svg-gauge Goto Github PK
View Code? Open in Web Editor NEWJustgage inspired .svg gauge for React
Justgage inspired .svg gauge for React
Tim,
I think you would remove lib from gitignore because that is used while importing your module into the project otherwise, I would need to compile the code into lib using your package.json to use your module.
Regards,
Haider
How would I go about removing the extra whitespace around the gauge?
I am trying to remove the space around the gauge so that the gauge (and min/max number) takes up the full width and height of the SVG.
You can see that the gauge is not centered vertically/horizontally. I have different use cases making the gauge bigger, which seems to alleviate some of the problem. Which can be seen below:
I have tried poking around with the Xo, Xi, Yo, Yi params to no avail. Is there some sort of width/height ratio that could solve this? Such as:
gaugeWidth - 100;
gaugeHeight = gaugeWidth * 0.6666667;
Ideally, I would like the gauge paths to start/end at the left/right/top/bottom most borders of the overall SVG.
Any help would be greatly appreciated and thanks for the hard work already!
Hey man, we're trying to use your NPM module in our project and it doesn't have the new Symbol code (we want to add a "%" to the text) and was wondering if you could just update the project.
Thanks!
How can I easily set the arc width ?
It would be cool to have an option.
:)
@Reggino I see you made a commit last year that fixes the react version issues. Any chance you can publish that package on NPM?
It would be great if anyone can add these types to the project.
declare module "react-svg-gauge" {
import { Component, CSSProperties } from "react";
export interface IGaugeProps {
label?: string;
max?: number;
min?: number;
value?: number;
width?: number;
height?: number;
color?: string;
backgroundColor?: string;
topLabelStyle?: CSSProperties;
valueLabelStyle?: CSSProperties;
minMaxLabelStyle?: CSSProperties;
}
export class Gauge extends Component<IGaugeProps> {
public render(): JSX.Element;
}
export default Gauge;
}
If the provided value exceeds the min and max values the gauge renders incorrectly, could possibly be improved by rendering it as completely full or empty, eg. quick fix: const value = data >= min && data <= max ? data : data < min ? min : max
Since React 16 is released, this project should upgrade to match to remove any peer dependency warnings.
JustGage supports modifying labels displayed for minimum and maximum values via minTxt
and maxTxt
properties. But they are not supported by this library.
It requires a small change but I think it brings a good feature.
Hi, I would like to completely remove the label (gauge name). Is it possible?
Thank you very much.
Hello @Reggino could you please clarify the license of your project by adding a LICENSE file?
The lack of that information will prevent potential users from using your component.
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.