@telia/teddy 0.6.9 → 0.6.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/circle-bar/circle-bar.cjs +58 -0
- package/dist/components/circle-bar/circle-bar.d.ts +10 -0
- package/dist/components/circle-bar/circle-bar.js +58 -0
- package/dist/components/circle-bar/css.cjs +30 -0
- package/dist/components/circle-bar/css.d.ts +1 -0
- package/dist/components/circle-bar/css.js +30 -0
- package/dist/components/circle-bar/index.cjs +4 -0
- package/dist/components/circle-bar/index.d.ts +2 -0
- package/dist/components/circle-bar/index.js +4 -0
- package/dist/style.css +45 -0
- package/package.json +1 -1
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const components_tooltip_index = require("../tooltip/index.cjs");
|
|
5
|
+
const components_circleBar_css = require("./css.cjs");
|
|
6
|
+
const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
|
|
7
|
+
const radius = 180;
|
|
8
|
+
const gapSize = 150;
|
|
9
|
+
const rotate = 114;
|
|
10
|
+
const circumference = 2 * Math.PI * radius;
|
|
11
|
+
const fillableCircumference = circumference - gapSize;
|
|
12
|
+
const percentFilled = value / 100;
|
|
13
|
+
const offset = circumference - fillableCircumference * percentFilled;
|
|
14
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("teddy-circle-bar"), children: [
|
|
15
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${components_circleBar_css.css("__tooltip")} ${components_circleBar_css.css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
|
|
16
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, {}),
|
|
17
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: components_circleBar_css.css("__tooltip-content"), children: tooltip })
|
|
18
|
+
] }) }),
|
|
19
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__svg-container"), children: [
|
|
20
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
21
|
+
"svg",
|
|
22
|
+
{
|
|
23
|
+
width: "100%",
|
|
24
|
+
height: "100%",
|
|
25
|
+
viewBox: "0 0 400 400",
|
|
26
|
+
className: components_circleBar_css.css("__svg"),
|
|
27
|
+
style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
|
|
28
|
+
children: [
|
|
29
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
|
|
30
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
+
"circle",
|
|
32
|
+
{
|
|
33
|
+
cx: "200",
|
|
34
|
+
cy: "200",
|
|
35
|
+
r: radius,
|
|
36
|
+
strokeWidth: "35.25",
|
|
37
|
+
stroke: "#4E0174",
|
|
38
|
+
fill: "none",
|
|
39
|
+
strokeDasharray: `${circumference}`,
|
|
40
|
+
strokeDashoffset: offset,
|
|
41
|
+
style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
|
|
42
|
+
}
|
|
43
|
+
)
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__info-box"), children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: components_circleBar_css.css("__value-label"), children: [
|
|
49
|
+
value,
|
|
50
|
+
" %"
|
|
51
|
+
] }),
|
|
52
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { children: title })
|
|
53
|
+
] })
|
|
54
|
+
] })
|
|
55
|
+
] });
|
|
56
|
+
};
|
|
57
|
+
exports.CircleBar = CircleBar;
|
|
58
|
+
exports.default = CircleBar;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export interface CircleBarProps {
|
|
4
|
+
title: string;
|
|
5
|
+
value: number;
|
|
6
|
+
tooltip?: string;
|
|
7
|
+
tooltipLocation?: 'left' | 'right';
|
|
8
|
+
}
|
|
9
|
+
export declare const CircleBar: React.FC<CircleBarProps>;
|
|
10
|
+
export default CircleBar;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip } from "../tooltip/index.js";
|
|
3
|
+
import { css } from "./css.js";
|
|
4
|
+
const CircleBar = ({ title, value, tooltip, tooltipLocation = "left" }) => {
|
|
5
|
+
const radius = 180;
|
|
6
|
+
const gapSize = 150;
|
|
7
|
+
const rotate = 114;
|
|
8
|
+
const circumference = 2 * Math.PI * radius;
|
|
9
|
+
const fillableCircumference = circumference - gapSize;
|
|
10
|
+
const percentFilled = value / 100;
|
|
11
|
+
const offset = circumference - fillableCircumference * percentFilled;
|
|
12
|
+
return /* @__PURE__ */ jsxs("div", { className: css("teddy-circle-bar"), children: [
|
|
13
|
+
/* @__PURE__ */ jsx("div", { className: `${css("__tooltip")} ${css("__tooltip-" + tooltipLocation)}`, children: tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
14
|
+
/* @__PURE__ */ jsx(Tooltip.Trigger, {}),
|
|
15
|
+
/* @__PURE__ */ jsx(Tooltip.Content, { className: css("__tooltip-content"), children: tooltip })
|
|
16
|
+
] }) }),
|
|
17
|
+
/* @__PURE__ */ jsxs("div", { className: css("__svg-container"), children: [
|
|
18
|
+
/* @__PURE__ */ jsxs(
|
|
19
|
+
"svg",
|
|
20
|
+
{
|
|
21
|
+
width: "100%",
|
|
22
|
+
height: "100%",
|
|
23
|
+
viewBox: "0 0 400 400",
|
|
24
|
+
className: css("__svg"),
|
|
25
|
+
style: { strokeDasharray: `${fillableCircumference}, ${circumference}`, rotate: `${rotate}deg` },
|
|
26
|
+
children: [
|
|
27
|
+
/* @__PURE__ */ jsx("circle", { cx: "200", cy: "200", r: radius, strokeWidth: "35", stroke: "#F5E0FF", fill: "none" }),
|
|
28
|
+
/* @__PURE__ */ jsx(
|
|
29
|
+
"circle",
|
|
30
|
+
{
|
|
31
|
+
cx: "200",
|
|
32
|
+
cy: "200",
|
|
33
|
+
r: radius,
|
|
34
|
+
strokeWidth: "35.25",
|
|
35
|
+
stroke: "#4E0174",
|
|
36
|
+
fill: "none",
|
|
37
|
+
strokeDasharray: `${circumference}`,
|
|
38
|
+
strokeDashoffset: offset,
|
|
39
|
+
style: { transition: "stroke-dashoffset 0.222s ease-in-out" }
|
|
40
|
+
}
|
|
41
|
+
)
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
),
|
|
45
|
+
/* @__PURE__ */ jsxs("div", { className: css("__info-box"), children: [
|
|
46
|
+
/* @__PURE__ */ jsxs("div", { className: css("__value-label"), children: [
|
|
47
|
+
value,
|
|
48
|
+
" %"
|
|
49
|
+
] }),
|
|
50
|
+
/* @__PURE__ */ jsx("h3", { children: title })
|
|
51
|
+
] })
|
|
52
|
+
] })
|
|
53
|
+
] });
|
|
54
|
+
};
|
|
55
|
+
export {
|
|
56
|
+
CircleBar,
|
|
57
|
+
CircleBar as default
|
|
58
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const clsx = require("clsx");
|
|
4
|
+
const styles = {
|
|
5
|
+
"teddy-circle-bar": "_teddy-circle-bar_40j64_1",
|
|
6
|
+
"teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
|
|
7
|
+
"teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
|
|
8
|
+
"teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
|
|
9
|
+
"teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
|
|
10
|
+
"teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
|
|
11
|
+
"teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
|
|
12
|
+
"teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
|
|
13
|
+
"teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
|
|
14
|
+
};
|
|
15
|
+
const rootClassName = "teddy-circle-bar";
|
|
16
|
+
const css = (suffix) => {
|
|
17
|
+
if (suffix == null)
|
|
18
|
+
return "";
|
|
19
|
+
let tmp = null;
|
|
20
|
+
if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
|
|
21
|
+
tmp = clsx([styles[`${rootClassName + suffix}`]], "");
|
|
22
|
+
} else {
|
|
23
|
+
tmp = clsx([styles[`${suffix}`]], "");
|
|
24
|
+
}
|
|
25
|
+
if (!tmp) {
|
|
26
|
+
console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
|
|
27
|
+
}
|
|
28
|
+
return tmp;
|
|
29
|
+
};
|
|
30
|
+
exports.css = css;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const css: (suffix: string | null) => string;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import clsx from "clsx";
|
|
2
|
+
const styles = {
|
|
3
|
+
"teddy-circle-bar": "_teddy-circle-bar_40j64_1",
|
|
4
|
+
"teddy-circle-bar__tooltip": "_teddy-circle-bar__tooltip_40j64_6",
|
|
5
|
+
"teddy-circle-bar__tooltip-left": "_teddy-circle-bar__tooltip-left_40j64_12",
|
|
6
|
+
"teddy-circle-bar__tooltip-right": "_teddy-circle-bar__tooltip-right_40j64_15",
|
|
7
|
+
"teddy-circle-bar__tooltip-content": "_teddy-circle-bar__tooltip-content_40j64_18",
|
|
8
|
+
"teddy-circle-bar__svg-container": "_teddy-circle-bar__svg-container_40j64_21",
|
|
9
|
+
"teddy-circle-bar__svg": "_teddy-circle-bar__svg_40j64_21",
|
|
10
|
+
"teddy-circle-bar__info-box": "_teddy-circle-bar__info-box_40j64_31",
|
|
11
|
+
"teddy-circle-bar__value-label": "_teddy-circle-bar__value-label_40j64_37"
|
|
12
|
+
};
|
|
13
|
+
const rootClassName = "teddy-circle-bar";
|
|
14
|
+
const css = (suffix) => {
|
|
15
|
+
if (suffix == null)
|
|
16
|
+
return "";
|
|
17
|
+
let tmp = null;
|
|
18
|
+
if (suffix.startsWith("_") || suffix.startsWith("-") || suffix === "") {
|
|
19
|
+
tmp = clsx([styles[`${rootClassName + suffix}`]], "");
|
|
20
|
+
} else {
|
|
21
|
+
tmp = clsx([styles[`${suffix}`]], "");
|
|
22
|
+
}
|
|
23
|
+
if (!tmp) {
|
|
24
|
+
console.warn("Could not find css class " + suffix + " for the root " + rootClassName);
|
|
25
|
+
}
|
|
26
|
+
return tmp;
|
|
27
|
+
};
|
|
28
|
+
export {
|
|
29
|
+
css
|
|
30
|
+
};
|
package/dist/style.css
CHANGED
|
@@ -7675,4 +7675,49 @@
|
|
|
7675
7675
|
:root {
|
|
7676
7676
|
--teddy-scale: var(--teddy-rescale, 1);
|
|
7677
7677
|
interpolate-size: allow-keywords;
|
|
7678
|
+
}._teddy-circle-bar_40j64_1 {
|
|
7679
|
+
position: relative;
|
|
7680
|
+
width: max-content;
|
|
7681
|
+
padding: 17px;
|
|
7682
|
+
}
|
|
7683
|
+
._teddy-circle-bar__tooltip_40j64_6 {
|
|
7684
|
+
width: max-content;
|
|
7685
|
+
position: absolute;
|
|
7686
|
+
top: -2px;
|
|
7687
|
+
z-index: 1;
|
|
7688
|
+
}
|
|
7689
|
+
._teddy-circle-bar__tooltip-left_40j64_12 {
|
|
7690
|
+
left: -2px;
|
|
7691
|
+
}
|
|
7692
|
+
._teddy-circle-bar__tooltip-right_40j64_15 {
|
|
7693
|
+
right: -2px;
|
|
7694
|
+
}
|
|
7695
|
+
._teddy-circle-bar__tooltip-content_40j64_18 {
|
|
7696
|
+
max-width: 300px;
|
|
7697
|
+
}
|
|
7698
|
+
._teddy-circle-bar__svg-container_40j64_21 {
|
|
7699
|
+
width: 155px;
|
|
7700
|
+
position: relative;
|
|
7701
|
+
}
|
|
7702
|
+
._teddy-circle-bar__svg_40j64_21 {
|
|
7703
|
+
transform-origin: center center;
|
|
7704
|
+
fill: transparent;
|
|
7705
|
+
stroke-linecap: round;
|
|
7706
|
+
stroke: #c4c4c4;
|
|
7707
|
+
}
|
|
7708
|
+
._teddy-circle-bar__info-box_40j64_31 {
|
|
7709
|
+
position: absolute;
|
|
7710
|
+
width: 100%;
|
|
7711
|
+
top: 47px;
|
|
7712
|
+
text-align: center;
|
|
7713
|
+
}
|
|
7714
|
+
._teddy-circle-bar__value-label_40j64_37 {
|
|
7715
|
+
font-size: 28px;
|
|
7716
|
+
font-weight: 700;
|
|
7717
|
+
margin-bottom: 6px;
|
|
7718
|
+
}
|
|
7719
|
+
._teddy-circle-bar_40j64_1 h3 {
|
|
7720
|
+
margin: 0;
|
|
7721
|
+
font-size: 14px;
|
|
7722
|
+
font-weight: 400;
|
|
7678
7723
|
}
|