@cfasim-ui/charts 0.1.10 → 0.2.0
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/ChartTooltip/ChartTooltip.d.ts +37 -0
- package/dist/ChartTooltip/ChartTooltip.test.d.ts +1 -0
- package/dist/ChoroplethMap/ChoroplethMap.d.ts +8 -0
- package/dist/LineChart/LineChart.d.ts +58 -1
- package/dist/LineChart/LineChart.test.d.ts +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +624 -351
- package/package.json +2 -2
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** Pixel x-coordinate relative to the positioned parent container */
|
|
3
|
+
x: number;
|
|
4
|
+
/** Pixel y-coordinate relative to the positioned parent container */
|
|
5
|
+
y: number;
|
|
6
|
+
/** Whether the tooltip is visible */
|
|
7
|
+
open: boolean;
|
|
8
|
+
/** Interaction mode. Default: 'hover' */
|
|
9
|
+
mode?: "hover" | "click";
|
|
10
|
+
/** Offset from anchor in pixels. Default: 8 */
|
|
11
|
+
sideOffset?: number;
|
|
12
|
+
};
|
|
13
|
+
declare function __VLS_template(): {
|
|
14
|
+
attrs: Partial<{}>;
|
|
15
|
+
slots: {
|
|
16
|
+
default?(_: {}): any;
|
|
17
|
+
default?(_: {}): any;
|
|
18
|
+
};
|
|
19
|
+
refs: {};
|
|
20
|
+
rootEl: any;
|
|
21
|
+
};
|
|
22
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
23
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
24
|
+
close: () => any;
|
|
25
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
26
|
+
onClose?: (() => any) | undefined;
|
|
27
|
+
}>, {
|
|
28
|
+
sideOffset: number;
|
|
29
|
+
mode: "hover" | "click";
|
|
30
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
31
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
32
|
+
export default _default;
|
|
33
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
34
|
+
new (): {
|
|
35
|
+
$slots: S;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -43,6 +43,14 @@ type __VLS_Props = {
|
|
|
43
43
|
zoom?: boolean;
|
|
44
44
|
/** Enable click-and-drag panning. Default: false */
|
|
45
45
|
pan?: boolean;
|
|
46
|
+
/** Tooltip activation mode */
|
|
47
|
+
tooltipTrigger?: "hover" | "click";
|
|
48
|
+
/** Custom tooltip formatter. Receives { id, name, value } and returns HTML string. */
|
|
49
|
+
tooltipFormat?: (data: {
|
|
50
|
+
id: string;
|
|
51
|
+
name: string;
|
|
52
|
+
value?: number | string;
|
|
53
|
+
}) => string;
|
|
46
54
|
};
|
|
47
55
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
48
56
|
stateClick: (state: {
|
|
@@ -4,6 +4,11 @@ export interface Series {
|
|
|
4
4
|
dashed?: boolean;
|
|
5
5
|
strokeWidth?: number;
|
|
6
6
|
opacity?: number;
|
|
7
|
+
line?: boolean;
|
|
8
|
+
dots?: boolean;
|
|
9
|
+
dotRadius?: number;
|
|
10
|
+
dotFill?: string;
|
|
11
|
+
dotStroke?: string;
|
|
7
12
|
}
|
|
8
13
|
export interface Area {
|
|
9
14
|
upper: number[];
|
|
@@ -28,12 +33,64 @@ type __VLS_Props = {
|
|
|
28
33
|
menu?: boolean | string;
|
|
29
34
|
xGrid?: boolean;
|
|
30
35
|
yGrid?: boolean;
|
|
36
|
+
/** Custom per-index data passed to the tooltip slot */
|
|
37
|
+
tooltipData?: unknown[];
|
|
38
|
+
/** Tooltip activation mode. Default: 'hover' */
|
|
39
|
+
tooltipTrigger?: "hover" | "click";
|
|
31
40
|
};
|
|
32
|
-
declare
|
|
41
|
+
declare function __VLS_template(): {
|
|
42
|
+
attrs: Partial<{}>;
|
|
43
|
+
slots: Readonly<{
|
|
44
|
+
tooltip?(props: {
|
|
45
|
+
index: number;
|
|
46
|
+
xLabel?: string;
|
|
47
|
+
values: {
|
|
48
|
+
value: number;
|
|
49
|
+
color: string;
|
|
50
|
+
seriesIndex: number;
|
|
51
|
+
}[];
|
|
52
|
+
data: unknown;
|
|
53
|
+
}): unknown;
|
|
54
|
+
}> & {
|
|
55
|
+
tooltip?(props: {
|
|
56
|
+
index: number;
|
|
57
|
+
xLabel?: string;
|
|
58
|
+
values: {
|
|
59
|
+
value: number;
|
|
60
|
+
color: string;
|
|
61
|
+
seriesIndex: number;
|
|
62
|
+
}[];
|
|
63
|
+
data: unknown;
|
|
64
|
+
}): unknown;
|
|
65
|
+
};
|
|
66
|
+
refs: {
|
|
67
|
+
containerRef: HTMLDivElement;
|
|
68
|
+
svgRef: SVGSVGElement;
|
|
69
|
+
tooltipRef: HTMLDivElement;
|
|
70
|
+
};
|
|
71
|
+
rootEl: HTMLDivElement;
|
|
72
|
+
};
|
|
73
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
74
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
75
|
+
hover: (payload: {
|
|
76
|
+
index: number;
|
|
77
|
+
} | null) => any;
|
|
78
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
79
|
+
onHover?: ((payload: {
|
|
80
|
+
index: number;
|
|
81
|
+
} | null) => any) | undefined;
|
|
82
|
+
}>, {
|
|
33
83
|
menu: boolean | string;
|
|
34
84
|
lineOpacity: number;
|
|
35
85
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
36
86
|
containerRef: HTMLDivElement;
|
|
37
87
|
svgRef: SVGSVGElement;
|
|
88
|
+
tooltipRef: HTMLDivElement;
|
|
38
89
|
}, HTMLDivElement>;
|
|
90
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
39
91
|
export default _default;
|
|
92
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
93
|
+
new (): {
|
|
94
|
+
$slots: S;
|
|
95
|
+
};
|
|
96
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.chart-menu-trigger-area[data-v-
|
|
1
|
+
.chart-menu-trigger-area[data-v-fe2f6904]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-fe2f6904]{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-fe2f6904]{opacity:1}.chart-menu-button[data-v-fe2f6904]: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-55a24433]{width:100%;position:relative}.line-chart-wrapper[data-v-55a24433]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-55a24433]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-55a24433]{align-items:center;gap:.375em;display:flex}.line-chart-tooltip-swatch[data-v-55a24433]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-7f5b0832]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-7f5b0832]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-7f5b0832]:active{cursor:grabbing}.choropleth-wrapper[data-v-7f5b0832]:hover .chart-menu-button{opacity:1}.state-path[data-v-7f5b0832]{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-dbfb7c84]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-dbfb7c84]{padding-top:32px}.TableOuter[data-v-dbfb7c84]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-dbfb7c84]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-dbfb7c84]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border)}.Table tr[data-v-dbfb7c84],.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{background:0 0;border:none}.Table th[data-v-dbfb7c84],.Table td[data-v-dbfb7c84]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-dbfb7c84]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-dbfb7c84]{border-bottom:none}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { default as LineChart, type Series, type Area, } from './LineChart/LineChart';
|
|
2
2
|
export { default as ChoroplethMap, type GeoType, type StateData, type ChoroplethColorScale, type ThresholdStop, type CategoricalStop, } from './ChoroplethMap/ChoroplethMap';
|
|
3
|
+
export { default as ChartTooltip } from './ChartTooltip/ChartTooltip';
|
|
3
4
|
export { default as DataTable, type TableData, type TableRecord, type ColumnAlign, type ColumnConfig, type ColumnWidth, } from './DataTable/DataTable';
|