@cfasim-ui/charts 0.4.1 → 0.4.2

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.
@@ -50,7 +50,12 @@ type __VLS_Props = {
50
50
  pan?: boolean;
51
51
  /** Tooltip activation mode */
52
52
  tooltipTrigger?: "hover" | "click";
53
- /** Custom tooltip formatter. Receives { id, name, value } and returns HTML string. */
53
+ /**
54
+ * @deprecated Use the `#tooltip` slot instead, which gives you full Vue
55
+ * rendering (components, scoped styles, reactivity). This HTML-string
56
+ * formatter is kept for backwards compatibility and will be removed in a
57
+ * future release.
58
+ */
54
59
  tooltipFormat?: (data: {
55
60
  id: string;
56
61
  name: string;
@@ -69,7 +74,83 @@ type __VLS_Props = {
69
74
  */
70
75
  tooltipClamp?: "none" | "chart" | "window";
71
76
  };
72
- declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
77
+ type ChoroplethFeature = GeoJSON.Feature<GeoJSON.Geometry | null, {
78
+ name?: string;
79
+ }>;
80
+ /** Public payload shape — slot props, hover/click emits, tooltip cache. */
81
+ interface TooltipPayload {
82
+ id: string;
83
+ name: string;
84
+ value?: number | string;
85
+ feature: ChoroplethFeature;
86
+ }
87
+ declare function __VLS_template(): {
88
+ attrs: Partial<{}>;
89
+ slots: Readonly<{
90
+ tooltip?(props: TooltipPayload): unknown;
91
+ }> & {
92
+ tooltip?(props: TooltipPayload): unknown;
93
+ };
94
+ refs: {
95
+ containerRef: HTMLDivElement;
96
+ svgRef: SVGSVGElement;
97
+ mapGroupRef: SVGGElement;
98
+ tooltipChildRef: ({
99
+ $: import('vue').ComponentInternalInstance;
100
+ $data: {};
101
+ $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
102
+ $attrs: import('vue').Attrs;
103
+ $refs: {
104
+ [x: string]: unknown;
105
+ } & {
106
+ root: HTMLDivElement;
107
+ };
108
+ $slots: Readonly<{
109
+ [name: string]: import('vue').Slot<any> | undefined;
110
+ }>;
111
+ $root: import('vue').ComponentPublicInstance | null;
112
+ $parent: import('vue').ComponentPublicInstance | null;
113
+ $host: Element | null;
114
+ $emit: (event: string, ...args: any[]) => void;
115
+ $el: any;
116
+ $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
117
+ setData(next: import('./ChoroplethTooltip').ChoroplethTooltipData | null): void;
118
+ getEl(): HTMLDivElement | null;
119
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
120
+ beforeCreate?: (() => void) | (() => void)[];
121
+ created?: (() => void) | (() => void)[];
122
+ beforeMount?: (() => void) | (() => void)[];
123
+ mounted?: (() => void) | (() => void)[];
124
+ beforeUpdate?: (() => void) | (() => void)[];
125
+ updated?: (() => void) | (() => void)[];
126
+ activated?: (() => void) | (() => void)[];
127
+ deactivated?: (() => void) | (() => void)[];
128
+ beforeDestroy?: (() => void) | (() => void)[];
129
+ beforeUnmount?: (() => void) | (() => void)[];
130
+ destroyed?: (() => void) | (() => void)[];
131
+ unmounted?: (() => void) | (() => void)[];
132
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
133
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
134
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
135
+ };
136
+ $forceUpdate: () => void;
137
+ $nextTick: typeof import('vue').nextTick;
138
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
139
+ } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "setData" | "getEl"> & import('vue').ShallowUnwrapRef<{
140
+ setData(next: import('./ChoroplethTooltip').ChoroplethTooltipData | null): void;
141
+ getEl(): HTMLDivElement | null;
142
+ }> & {} & import('vue').ComponentCustomProperties & {} & {
143
+ $slots: Readonly<{
144
+ default?(props: import('./ChoroplethTooltip').ChoroplethTooltipData): unknown;
145
+ }> & {
146
+ default?(props: import('./ChoroplethTooltip').ChoroplethTooltipData): unknown;
147
+ };
148
+ }) | null;
149
+ };
150
+ rootEl: HTMLDivElement;
151
+ };
152
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
153
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
73
154
  stateClick: (state: {
74
155
  id: string;
75
156
  name: string;
@@ -105,5 +186,62 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
105
186
  containerRef: HTMLDivElement;
106
187
  svgRef: SVGSVGElement;
107
188
  mapGroupRef: SVGGElement;
189
+ tooltipChildRef: ({
190
+ $: import('vue').ComponentInternalInstance;
191
+ $data: {};
192
+ $props: Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>;
193
+ $attrs: import('vue').Attrs;
194
+ $refs: {
195
+ [x: string]: unknown;
196
+ } & {
197
+ root: HTMLDivElement;
198
+ };
199
+ $slots: Readonly<{
200
+ [name: string]: import('vue').Slot<any> | undefined;
201
+ }>;
202
+ $root: import('vue').ComponentPublicInstance | null;
203
+ $parent: import('vue').ComponentPublicInstance | null;
204
+ $host: Element | null;
205
+ $emit: (event: string, ...args: any[]) => void;
206
+ $el: any;
207
+ $options: import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
208
+ setData(next: import('./ChoroplethTooltip').ChoroplethTooltipData | null): void;
209
+ getEl(): HTMLDivElement | null;
210
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
211
+ beforeCreate?: (() => void) | (() => void)[];
212
+ created?: (() => void) | (() => void)[];
213
+ beforeMount?: (() => void) | (() => void)[];
214
+ mounted?: (() => void) | (() => void)[];
215
+ beforeUpdate?: (() => void) | (() => void)[];
216
+ updated?: (() => void) | (() => void)[];
217
+ activated?: (() => void) | (() => void)[];
218
+ deactivated?: (() => void) | (() => void)[];
219
+ beforeDestroy?: (() => void) | (() => void)[];
220
+ beforeUnmount?: (() => void) | (() => void)[];
221
+ destroyed?: (() => void) | (() => void)[];
222
+ unmounted?: (() => void) | (() => void)[];
223
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
224
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
225
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
226
+ };
227
+ $forceUpdate: () => void;
228
+ $nextTick: typeof import('vue').nextTick;
229
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
230
+ } & Readonly<{}> & Omit<Readonly<{}> & Readonly<{}>, "setData" | "getEl"> & import('vue').ShallowUnwrapRef<{
231
+ setData(next: import('./ChoroplethTooltip').ChoroplethTooltipData | null): void;
232
+ getEl(): HTMLDivElement | null;
233
+ }> & {} & import('vue').ComponentCustomProperties & {} & {
234
+ $slots: Readonly<{
235
+ default?(props: import('./ChoroplethTooltip').ChoroplethTooltipData): unknown;
236
+ }> & {
237
+ default?(props: import('./ChoroplethTooltip').ChoroplethTooltipData): unknown;
238
+ };
239
+ }) | null;
108
240
  }, HTMLDivElement>;
241
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
109
242
  export default _default;
243
+ type __VLS_WithTemplateSlots<T, S> = T & {
244
+ new (): {
245
+ $slots: S;
246
+ };
247
+ };
@@ -0,0 +1,32 @@
1
+ export interface ChoroplethTooltipData {
2
+ id: string;
3
+ name: string;
4
+ value?: number | string;
5
+ feature: unknown;
6
+ }
7
+ declare function __VLS_template(): {
8
+ attrs: Partial<{}>;
9
+ slots: Readonly<{
10
+ default?(props: ChoroplethTooltipData): unknown;
11
+ }> & {
12
+ default?(props: ChoroplethTooltipData): unknown;
13
+ };
14
+ refs: {
15
+ root: HTMLDivElement;
16
+ };
17
+ rootEl: any;
18
+ };
19
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
20
+ declare const __VLS_component: import('vue').DefineComponent<{}, {
21
+ setData(next: ChoroplethTooltipData | null): void;
22
+ getEl(): HTMLDivElement | null;
23
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
24
+ root: HTMLDivElement;
25
+ }, any>;
26
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
27
+ export default _default;
28
+ type __VLS_WithTemplateSlots<T, S> = T & {
29
+ new (): {
30
+ $slots: S;
31
+ };
32
+ };
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
1
- .chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-083d1c2f]{width:100%;position:relative}.line-chart-wrapper[data-v-083d1c2f]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-083d1c2f]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-083d1c2f]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-083d1c2f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-083d1c2f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-4f604d9f]{width:100%;position:relative}.bar-chart-wrapper[data-v-4f604d9f]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-4f604d9f]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-4f604d9f]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-4f604d9f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-4f604d9f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-105ba317]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-105ba317]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-105ba317]:active{cursor:grabbing}.choropleth-wrapper[data-v-105ba317]:hover .chart-menu-button{opacity:1}.state-path[data-v-105ba317]{cursor:pointer}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-d5c290dc]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d5c290dc]{display:block}.TableWrapper[data-v-d5c290dc]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d5c290dc]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);table-layout:fixed;margin:0;display:table}.Table.full-width[data-v-d5c290dc]{width:100%}.Table tr[data-v-d5c290dc],.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{background:0 0;border:none}.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d5c290dc]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d5c290dc]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d5c290dc]{border-bottom:none}.TableOuter[data-v-d5c290dc] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d5c290dc] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d5c290dc]:last-child{padding-right:2.5em}
1
+ .chart-menu-trigger-area[data-v-b3c563e8]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-b3c563e8]{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);width:28px;height:28px;color:var(--color-text-secondary);cursor:pointer;opacity:0;border-radius:.25em;justify-content:center;align-items:center;transition:opacity .15s;display:flex}.chart-menu-button[data-state=open][data-v-b3c563e8]{opacity:1}.chart-menu-button[data-v-b3c563e8]:hover{background:var(--color-bg-1,#0000000d);color:var(--color-text)}.chart-menu-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);border-radius:.25em;min-width:140px;padding:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.chart-menu-item{font-size:var(--font-size-sm);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.25em;outline:none;align-items:center;padding:.375em .5em;display:flex}.chart-menu-item[data-highlighted]{background:var(--color-primary);color:#fff}.line-chart-wrapper[data-v-083d1c2f]{width:100%;position:relative}.line-chart-wrapper[data-v-083d1c2f]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-083d1c2f]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-083d1c2f]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-083d1c2f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-083d1c2f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-4f604d9f]{width:100%;position:relative}.bar-chart-wrapper[data-v-4f604d9f]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-4f604d9f]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-4f604d9f]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-4f604d9f]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-4f604d9f]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-ecaa9e15]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-ecaa9e15]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-ecaa9e15]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-ecaa9e15]:active{cursor:grabbing}.choropleth-wrapper[data-v-ecaa9e15]:hover .chart-menu-button{opacity:1}.state-path[data-v-ecaa9e15]{cursor:pointer}.choropleth-reset[data-v-ecaa9e15]{font:inherit;color:var(--color-text-secondary,#555);background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:12px;position:absolute;bottom:8px;left:8px;box-shadow:0 1px 2px #0000000d}.choropleth-reset[data-v-ecaa9e15]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-ecaa9e15]{background:var(--choropleth-legend-bg);color:currentColor;border-radius:4px;flex-direction:column;align-items:center;gap:10px;width:fit-content;margin:0 auto;padding:8px 14px;display:flex}.choropleth-title[data-v-ecaa9e15]{font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-ecaa9e15]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-ecaa9e15]{font-weight:600}.choropleth-legend-item[data-v-ecaa9e15]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-ecaa9e15]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-ecaa9e15]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-ecaa9e15]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-ecaa9e15]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-ecaa9e15]{position:absolute;transform:translate(-50%)}.chart-tooltip-anchor[data-v-44377f70]{pointer-events:none;width:1px;height:1px;position:absolute}.chart-tooltip-content{z-index:100;background:var(--color-bg-0,#fff);border:1px solid var(--color-border,#e5e7eb);font-size:var(--font-size-sm,.875rem);pointer-events:none;border-radius:.375em;padding:.5em .75em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.TableOuter[data-v-d5c290dc]{display:inline-block;position:relative}.TableOuter.full-width[data-v-d5c290dc]{display:block}.TableWrapper[data-v-d5c290dc]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-d5c290dc]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);table-layout:fixed;margin:0;display:table}.Table.full-width[data-v-d5c290dc]{width:100%}.Table tr[data-v-d5c290dc],.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{background:0 0;border:none}.Table th[data-v-d5c290dc],.Table td[data-v-d5c290dc]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-d5c290dc]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-d5c290dc]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-d5c290dc]{border-bottom:none}.TableOuter[data-v-d5c290dc] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-d5c290dc] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-d5c290dc]:last-child{padding-right:2.5em}
2
2
  /*$vite$:1*/