(selectedRef.current = svg)}
139 | />
140 | );
141 | };
142 | export { GaugeComponent };
143 | export default GaugeComponent;
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Arc.ts:
--------------------------------------------------------------------------------
1 | import { GaugeType, defaultGaugeProps } from './GaugeComponentProps';
2 | import { Tooltip } from './Tooltip';
3 | export interface Arc {
4 | /** The corner radius of the arc. */
5 | cornerRadius?: number,
6 | /** The padding between subArcs, in rad. */
7 | padding?: number,
8 | /** The width of the arc given in percent of the radius. */
9 | width?: number,
10 | /** The number of subArcs, this overrides "subArcs" limits. */
11 | nbSubArcs?: number,
12 | /** Boolean flag that enables or disables gradient mode, which
13 | * draws a single arc with provided colors. */
14 | gradient?: boolean,
15 | /** The colors of the arcs, this overrides "subArcs" colors. */
16 | colorArray?: Array
,
17 | /** Color of the grafana's empty subArc */
18 | emptyColor?: string,
19 | /** list of sub arcs segments of the whole arc. */
20 | subArcs?: Array
21 | }
22 | export interface SubArc {
23 | /** The limit of the subArc, in accord to the gauge value. */
24 | limit?: number,
25 | /** The color of the subArc */
26 | color?: string | number,
27 | /** The length of the subArc, in percent */
28 | length?: number,
29 | // needleColorWhenWithinLimit?: string, //The color of the needle when it is within the subArc
30 | /** Whether or not to show the tick */
31 | showTick?: boolean,
32 | /** Tooltip that appears onHover of the subArc */
33 | tooltip?: Tooltip,
34 | /** This will trigger onClick of the subArc */
35 | onClick?: () => void,
36 | /** This will trigger onMouseMove of the subArc */
37 | onMouseMove?: () => void,
38 | /** This will trigger onMouseMove of the subArc */
39 | onMouseLeave?: () => void
40 | }
41 | export const defaultSubArcs: SubArc[] = [
42 | { limit: 33, color: "#5BE12C" }, // needleColorWhenWithinLimit: "#AA4128"},
43 | { limit: 66, color: "#F5CD19" },
44 | { color: "#EA4228" },
45 | ];
46 |
47 | export const getArcWidthByType = (type: string): number => {
48 | let gaugeTypesWidth: Record = {
49 | [GaugeType.Grafana]: 0.25,
50 | [GaugeType.Semicircle]: 0.15,
51 | [GaugeType.Radial]: 0.2,
52 | };
53 | if(!type) type = defaultGaugeProps.type as string;
54 | return gaugeTypesWidth[type as string];
55 | }
56 | export const defaultArc: Arc = {
57 | padding: 0.05,
58 | width: 0.25,
59 | cornerRadius: 7,
60 | nbSubArcs: undefined,
61 | emptyColor: "#5C5C5C",
62 | colorArray: undefined,
63 | subArcs: defaultSubArcs,
64 | gradient: false
65 | };
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Dimensions.ts:
--------------------------------------------------------------------------------
1 | export interface Margin {
2 | top: number;
3 | right: number;
4 | bottom: number;
5 | left: number;
6 | }
7 | export interface Angles {
8 | startAngle: number;
9 | endAngle: number;
10 | startAngleDeg: number;
11 | endAngleDeg: number;
12 | }
13 | export interface Dimensions {
14 | width: number;
15 | height: number;
16 | margin: Margin;
17 | angles: Angles;
18 | outerRadius: number;
19 | innerRadius: number;
20 | fixedHeight: number;
21 | }
22 | export const defaultMargins: Margin = {
23 | top: 0,
24 | right: 0,
25 | bottom: 0,
26 | left: 0
27 | }
28 | export const defaultAngles: Angles = {
29 | startAngle: 0,
30 | endAngle: 0,
31 | startAngleDeg: 0,
32 | endAngleDeg: 0
33 | }
34 | export const defaultDimensions: Dimensions = {
35 | width: 0,
36 | height: 0,
37 | margin: defaultMargins,
38 | outerRadius: 0,
39 | innerRadius: 0,
40 | angles: defaultAngles,
41 | fixedHeight: 0
42 | }
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Gauge.ts:
--------------------------------------------------------------------------------
1 | import { GaugeComponentProps } from './GaugeComponentProps';
2 | import { SubArc } from './Arc';
3 | import { Dimensions } from './Dimensions';
4 | export interface Gauge {
5 | props: GaugeComponentProps;
6 | prevProps: React.MutableRefObject;
7 | svg: React.MutableRefObject;
8 | g: React.MutableRefObject;
9 | doughnut: React.MutableRefObject;
10 | resizeObserver : React.MutableRefObject;
11 | pointer: React.MutableRefObject;
12 | container: React.MutableRefObject;
13 | isFirstRun: React.MutableRefObject;
14 | currentProgress: React.MutableRefObject;
15 | dimensions: React.MutableRefObject;
16 | //This holds the computed data for the arcs, computed only once and then reused without changing original props to avoid render problems
17 | arcData: React.MutableRefObject;
18 | pieChart: React.MutableRefObject;
19 | //This holds the only tooltip element rendered for any given gauge chart to use
20 | tooltip: React.MutableRefObject;
21 | }
22 |
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/GaugeComponentProps.ts:
--------------------------------------------------------------------------------
1 | import { Arc, defaultArc } from "./Arc";
2 | import { Labels, defaultLabels } from './Labels';
3 | import { PointerProps, defaultPointer } from "./Pointer";
4 | export enum GaugeType {
5 | Semicircle = "semicircle",
6 | Radial = "radial",
7 | Grafana = "grafana"
8 | }
9 | export interface GaugeInnerMarginInPercent {
10 | top: number,
11 | bottom: number,
12 | left: number,
13 | right: number
14 | }
15 | export interface GaugeComponentProps {
16 | /** Gauge element will inherit this. */
17 | id?: string,
18 | /** Gauge element will inherit this. */
19 | className?: string,
20 | /** Gauge element will inherit this. */
21 | style?: React.CSSProperties,
22 | /** This configures the canvas margin in relationship with the gauge.
23 | * Default values:
24 | * [GaugeType.Grafana]: { top: 0.12, bottom: 0.00, left: 0.07, right: 0.07 },
25 | [GaugeType.Semicircle]: { top: 0.08, bottom: 0.00, left: 0.07, right: 0.07 },
26 | [GaugeType.Radial]: { top: 0.07, bottom: 0.00, left: 0.07, right: 0.07 },
27 | */
28 | marginInPercent?: GaugeInnerMarginInPercent | number,
29 | /** Current pointer value. */
30 | value?: number,
31 | /** Minimum value possible for the Gauge. */
32 | minValue?: number,
33 | /** Maximum value possible for the Gauge. */
34 | maxValue?: number,
35 | /** This configures the arc of the Gauge. */
36 | arc?: Arc,
37 | /** This configures the labels of the Gauge. */
38 | labels?: Labels,
39 | /** This configures the pointer of the Gauge. */
40 | pointer?: PointerProps,
41 | /** This configures the type of the Gauge. */
42 | type?: "semicircle" | "radial" | "grafana"
43 | }
44 |
45 | export const defaultGaugeProps: GaugeComponentProps = {
46 | id: "",
47 | className: "gauge-component-class",
48 | style: { width: "100%"},
49 | marginInPercent: 0.07,
50 | value: 33,
51 | minValue: 0,
52 | maxValue: 100,
53 | arc: defaultArc,
54 | labels: defaultLabels,
55 | pointer: defaultPointer,
56 | type: GaugeType.Grafana
57 | }
58 | export const getGaugeMarginByType = (type: string): GaugeInnerMarginInPercent | number => {
59 | let gaugeTypesMargin: Record = {
60 | [GaugeType.Grafana]: { top: 0.12, bottom: 0.00, left: 0.07, right: 0.07 },
61 | [GaugeType.Semicircle]: { top: 0.08, bottom: 0.00, left: 0.08, right: 0.08 },
62 | [GaugeType.Radial]: { top: 0.07, bottom: 0.00, left: 0.07, right: 0.07 },
63 | };
64 | return gaugeTypesMargin[type as string];
65 | }
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Labels.ts:
--------------------------------------------------------------------------------
1 | import { defaultTickLabels, TickLabels } from './Tick';
2 | export interface Labels {
3 | /** This configures the central value label. */
4 | valueLabel?: ValueLabel,
5 | /** This configures the ticks and it's values labels. */
6 | tickLabels?: TickLabels
7 | }
8 |
9 | export interface ValueLabel {
10 | /** This function enables to format the central value text as you wish. */
11 | formatTextValue?: (value: any) => string;
12 | /** This will sync the value label color with the current value of the Gauge. */
13 | matchColorWithArc?: boolean;
14 | /** This enables configuration for the number of decimal digits of the
15 | * central value label */
16 | maxDecimalDigits?: number;
17 | /** Central label value will inherit this */
18 | style?: React.CSSProperties;
19 | /** This hides the central value label if true */
20 | hide?: boolean;
21 | }
22 |
23 | export const defaultValueLabel: ValueLabel = {
24 | formatTextValue: undefined,
25 | matchColorWithArc: false,
26 | maxDecimalDigits: 2,
27 | style: {
28 | fontSize: "35px",
29 | fill: '#fff',
30 | textShadow: "black 1px 0.5px 0px, black 0px 0px 0.03em, black 0px 0px 0.01em"
31 | },
32 | hide: false
33 | }
34 | export const defaultLabels: Labels = {
35 | valueLabel: defaultValueLabel,
36 | tickLabels: defaultTickLabels
37 | }
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Pointer.ts:
--------------------------------------------------------------------------------
1 | export interface PointerProps {
2 | /** Pointer type */
3 | type?: "needle" | "blob" | "arrow",
4 | /** Pointer color */
5 | color?: string,
6 | /** Enabling this flag will hide the pointer */
7 | hide?: boolean,
8 | /** Pointer color of the central circle */
9 | baseColor?: string,
10 | /** Pointer length */
11 | length?: number,
12 | /** This is a factor to multiply by the width of the gauge */
13 | width?: number,
14 | /** This enables pointer animation for transiction between values when enabled */
15 | animate?: boolean,
16 | /** This gives animation an elastic transiction between values */
17 | elastic?: boolean,
18 | /** Animation duration in ms */
19 | animationDuration?: number,
20 | /** Animation delay in ms */
21 | animationDelay?: number,
22 | /** Stroke width of the pointer */
23 | strokeWidth?: number
24 | }
25 | export interface PointerRef {
26 | element: any,
27 | path: any,
28 | context: PointerContext
29 | }
30 | export interface PointerContext {
31 | centerPoint: number[],
32 | pointerRadius: number,
33 | pathLength: number,
34 | currentPercent: number,
35 | prevPercent: number,
36 | prevProgress: number,
37 | pathStr: string,
38 | shouldDrawPath: boolean,
39 | prevColor: string
40 | }
41 | export enum PointerType {
42 | Needle = "needle",
43 | Blob = "blob",
44 | Arrow = "arrow"
45 | }
46 | export const defaultPointerContext: PointerContext = {
47 | centerPoint: [0, 0],
48 | pointerRadius: 0,
49 | pathLength: 0,
50 | currentPercent: 0,
51 | prevPercent: 0,
52 | prevProgress: 0,
53 | pathStr: "",
54 | shouldDrawPath: false,
55 | prevColor: ""
56 | }
57 | export const defaultPointerRef: PointerRef = {
58 | element: undefined,
59 | path: undefined,
60 | context: defaultPointerContext
61 | }
62 | export const defaultPointer: PointerProps = {
63 | type: PointerType.Needle,
64 | color: "#5A5A5A",
65 | baseColor: "white",
66 | length: 0.70,
67 | width: 20, // this is a factor to multiply by the width of the gauge
68 | animate: true,
69 | elastic: false,
70 | hide: false,
71 | animationDuration: 3000,
72 | animationDelay: 100,
73 | strokeWidth: 8
74 | }
75 |
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Tick.ts:
--------------------------------------------------------------------------------
1 | export interface TickLabels {
2 | /** Hide first and last ticks and it's values */
3 | hideMinMax?: boolean;
4 | /** Wheter the ticks are inside or outside the arcs */
5 | type?: "inner" | "outer";
6 | /** List of desired ticks */
7 | ticks?: Array;
8 | /** Default tick value label configs, this will apply to all
9 | * ticks but the individually configured */
10 | defaultTickValueConfig?: TickValueConfig;
11 | /** Default tick line label configs, this will apply to all
12 | * ticks but the individually configured */
13 | defaultTickLineConfig?: TickLineConfig;
14 | }
15 | export interface Tick {
16 | /** The value the tick will correspond to */
17 | value?: number;
18 | /** This will override defaultTickValueConfig */
19 | valueConfig?: TickValueConfig;
20 | /** This will override defaultTickLineConfig */
21 | lineConfig?: TickLineConfig;
22 | }
23 | export interface TickValueConfig {
24 | /** This function allows to customize the rendered tickValue label */
25 | formatTextValue?: (value: any) => string;
26 | /** This enables configuration for the number of decimal digits of the
27 | * central value label */
28 | maxDecimalDigits?: number;
29 | /** The tick value label will inherit this */
30 | style?: React.CSSProperties;
31 | /** If true will hide the tick value label */
32 | hide?: boolean;
33 | }
34 | export interface TickLineConfig {
35 | /** The width of the tick's line */
36 | width?: number;
37 | /** The length of the tick's line */
38 | length?: number;
39 | /** The distance of the tick's line from the arc */
40 | distanceFromArc?: number;
41 | /** The color of the tick's line */
42 | color?: string;
43 | /** If true will hide the tick line */
44 | hide?: boolean;
45 | }
46 |
47 | const defaultTickLineConfig: TickLineConfig = {
48 | color: "rgb(173 172 171)",
49 | length: 7,
50 | width: 1,
51 | distanceFromArc: 3,
52 | hide: false
53 | };
54 |
55 | const defaultTickValueConfig: TickValueConfig = {
56 | formatTextValue: undefined,
57 | maxDecimalDigits: 2,
58 | style:{
59 | fontSize: "10px",
60 | fill: "rgb(173 172 171)",
61 | },
62 | hide: false,
63 | };
64 | const defaultTickList: Tick[] = [];
65 | export const defaultTickLabels: TickLabels = {
66 | type: 'outer',
67 | hideMinMax: false,
68 | ticks: defaultTickList,
69 | defaultTickValueConfig: defaultTickValueConfig,
70 | defaultTickLineConfig: defaultTickLineConfig
71 | };
--------------------------------------------------------------------------------
/src/lib/GaugeComponent/types/Tooltip.ts:
--------------------------------------------------------------------------------
1 | export interface Tooltip {
2 | style?: React.CSSProperties,
3 | text?: string
4 | }
5 |
6 | export const defaultTooltipStyle = {
7 | borderColor: '#5A5A5A',
8 | borderStyle: 'solid',
9 | borderWidth: '1px',
10 | borderRadius: '5px',
11 | color: 'white',
12 | padding: '5px',
13 | fontSize: '15px',
14 | textShadow: '1px 1px 2px black, 0 0 1em black, 0 0 0.2em black'
15 |
16 | // fontSize: '15px'
17 | }
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | import GaugeComponent from './GaugeComponent';
2 | export type { GaugeComponentProps, GaugeType } from './GaugeComponent/types/GaugeComponentProps';
3 | export type { Arc, SubArc } from './GaugeComponent/types/Arc';
4 | export type { Tooltip } from './GaugeComponent/types/Tooltip';
5 | export type { Labels, ValueLabel } from './GaugeComponent/types/Labels';
6 | export type { PointerContext, PointerProps, PointerRef, PointerType } from './GaugeComponent/types/Pointer';
7 | export type { Tick, TickLabels, TickLineConfig, TickValueConfig } from './GaugeComponent/types/Tick';
8 | export type { Angles, Dimensions, Margin } from './GaugeComponent/types/Dimensions';
9 | export { GaugeComponent };
10 | export default GaugeComponent;
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "jsx": "react",
6 | "declaration": true,
7 | "strict": true,
8 | "outDir": "dist",
9 | "esModuleInterop": true,
10 | "rootDir": "src",
11 | "sourceMap": false,
12 | "noEmit": false
13 | },
14 | "include": ["src/lib/**/*"]
15 | }
--------------------------------------------------------------------------------