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: number; 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 `WUPCircleElement.$defaults.hover...` * * use below example to use custom logic @example * items = [{ * value: 5, * label: (item, popup) => { * setTimeout(()=>popup.innerHTML=...); * return "" * }] */ tooltip?: string | ((item: Item & { percentage: number; }, popup: WUPPopupElement) => string); } interface SVGItem extends SVGPathElement { _relatedItem: Item; _hasTooltip?: true; _center: { x: number; y: number; }; } 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 */ items: Item[]; } interface JSXProps extends WUP.Base.OnlyNames> { "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 = [...]; * * ``` */ "w-items"?: string; } } interface HTMLElementTagNameMap { [tagName]: WUPCircleElement; } namespace JSX { interface IntrinsicElements { /** Arc/circle chart based on SVG * @see {@link WUPCircleElement} */ [tagName]: WUP.Base.ReactHTML & WUP.Circle.JSXProps; } } } declare module "preact/jsx-runtime" { namespace JSX { interface HTMLAttributes { } interface IntrinsicElements { /** Arc/circle chart based on SVG * @see {@link WUPCircleElement} */ [tagName]: HTMLAttributes & WUP.Circle.JSXProps; } } } /** Arc/circle chart based on SVG * @example * * // 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 { static get $styleRoot(): string; static get $style(): string; static $defaults: WUP.Circle.Options; static cloneDefaults>(): T; $refSVG: SVGImageElement | SVGScriptElement | SVGSVGElement | SVGSymbolElement | SVGFilterElement | SVGSetElement | SVGStopElement | SVGViewElement | SVGClipPathElement | SVGMarkerElement | SVGMaskElement | SVGAElement | SVGStyleElement | SVGTitleElement | SVGAnimateElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | 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 | SVGLineElement | SVGLinearGradientElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement; $refItems: SVGImageElement | SVGScriptElement | SVGSVGElement | SVGSymbolElement | SVGFilterElement | SVGSetElement | SVGStopElement | SVGViewElement | SVGClipPathElement | SVGMarkerElement | SVGMaskElement | SVGAElement | SVGStyleElement | SVGTitleElement | SVGAnimateElement | SVGAnimateMotionElement | SVGAnimateTransformElement | SVGCircleElement | 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 | SVGLineElement | SVGLinearGradientElement | SVGMetadataElement | SVGMPathElement | SVGPathElement | SVGPatternElement | SVGPolygonElement | SVGPolylineElement | SVGRadialGradientElement | SVGRectElement | SVGSwitchElement | SVGTextElement | SVGTextPathElement | SVGTSpanElement | SVGUseElement; $refLabel?: HTMLElement; /** Creates new svg-part */ protected make(tag: string): SVGElementTagNameMap[K]; protected gotChanges(propsChanged: Array | 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; 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 */ 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 {};