web-ui-pack
Version:
Web package with UI elements
189 lines (188 loc) • 10.9 kB
TypeScript
import WUPBaseElement from "./baseElement";
import WUPPopupElement from "./popup/popupElement";
declare const tagName = "wup-circle";
declare global {
namespace WUP.Circle {
/** Item object related to */
interface Item {
/** Value of item that will be rendered; depends on @see {@link Options.min}, {@link Options.max}, {@link Options.from}, {@link Options.to} */
value: number;
/** Color for item. Default colors defined in css-variables like `--circle-X: #e4e4e4;` where `X` is number of item */
color?: string;
/** Point any text | function to show tooltip
* @hints
* * set `Item value {#}` to use tooltip where `{#}` is pointed value
* * point function to use custom logic
* * override `WUPCircleElement.prototype.renderTooltip` to use custom logic
* * to change hover-timeouts see {@link WUPCircleElement.$defaults.hoverOpenTimeout}, {@link WUPCircleElement.$defaults.hoverCloseTimeout}_
* * use below example to use custom logic @example
* items = [{
* value: 5,
* tooltip: (item, popup) => {
* setTimeout(()=>popup.innerHTML=...);
* return ""
* }] */
tooltip?: string | ItemTooltipFn;
}
/** Callback function for rendering tooltip */
type ItemTooltipFn = (item: ItemResult, popup: WUPPopupElement) => string;
/** Returns in tooltip callback function with extra fields */
interface ItemResult extends Item {
/** Pointed {@link Item.color} OR defined from css-variable like `--circle-X: #e4e4e4;` where `X` is number of item */
color: string;
/** Value relative to another items where 100% is SUM or difference max-min for single item */
percentage: number;
}
interface SVGItem extends SVGPathElement {
_relatedItem: Item;
_hasTooltip?: true;
_center: {
x: number;
y: number;
};
_definedColor: string;
}
interface Options {
/** Width of each segment; expected 1..100 (perecentage)
* @defaultValue 10 */
width: number;
/** Border/corner radius of each segment; expected 0..0.5 where 0.5 == 50% of `$options.width`
* @defaultValue 0.25 */
corner: number;
/** Enable background circle
* @defaultValue true */
back: boolean;
/** Angle from that rendering is started -360..360 (degrees)
* @defaultValue 0 */
from: number;
/** Angle to that rendering is finished -360..360 (degrees)
* @defaultValue 360 */
to: number;
/** Min possible value that fits `options.from`
* @defaultValue 0 */
min: number;
/** Max possible value that fits `options.to`
* @defaultValue 100 */
max: number;
/** Space between segments; expected 0..20 (degrees)
* @defaultValue 2 */
space: number;
/** Min segment size - to avoid rendering extra-small segments; expected 0..20 (degrees)
* @defaultValue 10 */
minSize: number;
/** Timeout in ms before popup shows on hover of target;
* @defaultValue inherited from WUPPopupElement.$defaults.hoverOpenTimeout */
hoverOpenTimeout: number;
/** Timeout in ms before popup closes on mouse-leave of target;
* @defaultValue 0 */
hoverCloseTimeout: number;
/** Items related to circle-segments;
* If pointed single item then label will be auto created. For other label-details @see {@link WUPCircleElement.prototype.$refLabel} */
items: Item[];
}
interface JSXProps extends WUP.Base.OnlyNames<Omit<Options, "hoverOpenTimeout" | "hoverCloseTimeout" | "items">> {
"w-width"?: number;
"w-corner"?: number;
"w-back"?: boolean | "";
"w-from"?: number;
"w-to"?: number;
"w-min"?: number;
"w-max"?: number;
"w-space"?: number;
"w-minSize"?: number;
/** Global reference to object with array
* @see {@link Item}
* @example
* ```js
* window.myItems = [...];
* <wup-circle w-items="window.myItems"></wup-circle>
* ``` */
"w-items"?: string;
}
}
interface HTMLElementTagNameMap {
[tagName]: WUPCircleElement;
}
}
declare module "react" {
namespace JSX {
interface IntrinsicElements {
/** Arc/circle chart based on SVG
* @see {@link WUPCircleElement} */
[tagName]: WUP.Base.ReactHTML<WUPCircleElement> & WUP.Circle.JSXProps;
}
}
}
declare module "preact/jsx-runtime" {
namespace JSX {
interface HTMLAttributes<RefType> {
}
interface IntrinsicElements {
/** Arc/circle chart based on SVG
* @see {@link WUPCircleElement} */
[tagName]: HTMLAttributes<WUPCircleElement> & WUP.Circle.JSXProps;
}
}
}
/** Arc/circle chart based on SVG
* @see demo {@link https://yegorich555.github.io/web-ui-pack/circle}
* @example
* <wup-circle
* w-back="true"
* w-from="0"
* w-to="360"
* w-space="2"
* w-min="0"
* w-max="100"
* w-width="14"
* w-corner="0.25"
* w-items="window.circleItems"
* >
* <strong>Some custom label</strong>
* </wup-circle>
* // or JS/TS
* const el = document.createElement("wup-circle");
* el.$options.items = [{value:20}]; // etc.
* document.body.appendChild(el); */
export default class WUPCircleElement extends WUPBaseElement<WUP.Circle.Options> {
static get $styleRoot(): string;
static get $style(): string;
static $defaults: WUP.Circle.Options;
static cloneDefaults<T extends Record<string, any>>(): T;
$refSVG: SVGSymbolElement | SVGStyleElement | SVGAElement | SVGFilterElement | SVGTitleElement | SVGAnimateElement | SVGScriptElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement;
$refItems: SVGSymbolElement | SVGStyleElement | SVGAElement | SVGFilterElement | SVGTitleElement | SVGAnimateElement | SVGScriptElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | SVGClipPathElement | SVGDefsElement | SVGDescElement | SVGEllipseElement | SVGFEBlendElement | SVGFEColorMatrixElement | SVGFEComponentTransferElement | SVGFECompositeElement | SVGFEConvolveMatrixElement | SVGFEDiffuseLightingElement | SVGFEDisplacementMapElement | SVGFEDistantLightElement | SVGFEDropShadowElement | SVGFEFloodElement | SVGFEFuncAElement | SVGFEFuncBElement | SVGFEFuncGElement | SVGFEFuncRElement | SVGFEGaussianBlurElement | SVGFEImageElement | SVGFEMergeElement | SVGFEMergeNodeElement | SVGFEMorphologyElement | SVGFEOffsetElement | SVGFEPointLightElement | SVGFESpecularLightingElement | SVGFESpotLightElement | SVGFETileElement | SVGFETurbulenceElement | SVGForeignObjectElement | SVGGElement | SVGImageElement | SVGLineElement | SVGLinearGradientElement | SVGMarkerElement | SVGMaskElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSetElement | SVGStopElement | SVGSVGElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement | SVGViewElement;
/** Reference to <strong> element
* @tutorial Troubleshooting/rules:
* * label auto created only when pointed items.length === 1
* * if you need custom label then use `<wup-circle><strong>Custom label here</strong><wup-circle>`
* * Override {@link WUPCircleElement.prototype.renderLabel} to customize behavior when single item */
$refLabel?: HTMLElement;
/** Creates new svg-part */
protected make<K extends keyof SVGElementTagNameMap>(tag: string): SVGElementTagNameMap[K];
protected gotChanges(propsChanged: Array<keyof WUP.Circle.Options> | null): void;
/** Returns array of render-angles according to pointed arguments */
mapItems(valueMin: number, valueMax: number, angleMin: number, angleMax: number, space: number, minSizeDeg: number, animTime: number, items: WUP.Circle.Options["items"]): Array<{
angleFrom: number;
angleTo: number;
ms: number;
}>;
_animation?: WUP.PromiseCancel<boolean>;
protected renderItems(skipAnim?: boolean): void;
/** Called when need to show popup over segment */
renderTooltip(segment: WUP.Circle.SVGItem): WUPPopupElement;
/** Function to remove tooltipListener */
_tooltipDisposeLst?: () => void;
/** Apply tooltip listener; */
protected useTooltip(isEnable: boolean): void;
/** Called on every changeEvent */
protected gotRender(): void;
/** Called every time as need text-value (only if $options.items.length === 1) */
renderLabel(label: HTMLElement, percent: number, rawValue: number): void;
/** Returns svg-path for Arc according to options */
protected drawArc(angleFrom: number, angleTo: number): string;
}
/** Returns svg-path for Circle according to options */
export declare function drawCircle(center: [number, number], r: number, width: number): string;
/** Returns svg-path for Arc according to options */
export declare function drawArc(center: [number, number], r: number, width: number, angleFrom: number, angleTo: number, cornerR: number): string;
export {};