📦 elkofy / Gaugeous

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83import { SVGNS } from "./const";

export interface SvgOptions {
  width: number;
  height: number;
  viewBox: string;
  preserveAspectRatio: string;
}

export const svgElementCreator = (
  tag: string,
  options: SvgOptions
): SVGElement => {
  const svg = document.createElementNS(SVGNS, tag);
  svg.setAttribute("width", options.width.toString());
  svg.setAttribute("height", options.height.toString());
  svg.setAttribute("viewBox", options.viewBox);
  svg.setAttribute("preserveAspectRatio", options.preserveAspectRatio);
  return svg;
};

export const svgAssetCreator = (tag: string, options: any): SVGElement => {
  const svg = document.createElementNS(SVGNS, tag);
  options = Object.keys(options).reduce((acc: any, key) => {
    if (options[key] !== undefined) {
      acc[key] = options[key];
    }
    return acc;
  }, {});

  for (const key in options) {
    svg.setAttribute(camelToUnderscore(key), options[key]);
  }

  return svg;
};

function camelToUnderscore(key: string) {
  let spacedCamel = key.replace(/([A-Z])/g, " $1");
  return spacedCamel.split(" ").join("-").toLocaleLowerCase();
}

export type GaugeOptions = {
  type: string;
  width?: number;
  height?: number;
  radius?: number;
  colors?: Gcolors;
  placeholder?: string[];
  stroke?: number;
  scale?: number;
  animation?: Ganimation;
  cssClass?: string | string[];
  id?: string;
};

export type Gcolors = {
  backgroundColor?: string;
  fillColors?: string | string[];
  textColor?: string;
  strokeColor?: string;
};

export type Gvalues = {
  value: number;
  max: number;
  min?: number;
  percentage?: number;
};

export type Ganimation = {
  duration: number;
  delay: number;
  easing: string;
};

export type GaugeType =
  | "simple"
  | "gradient"
  | "cursors"
  | "placeholder"
  | "rounded";