@cfasim-ui/charts 0.4.15 → 0.4.16
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.
|
@@ -34,15 +34,31 @@ type __VLS_Props = {
|
|
|
34
34
|
/** Filename (without extension) for downloaded CSV files. */
|
|
35
35
|
filename?: string;
|
|
36
36
|
/**
|
|
37
|
-
* Label for the Download item in the table's top-right menu
|
|
38
|
-
* Defaults to
|
|
37
|
+
* Label for the Download item in the table's top-right menu, and for
|
|
38
|
+
* the button rendered when `downloadButton` is true. Defaults to
|
|
39
|
+
* "Download".
|
|
39
40
|
*/
|
|
40
41
|
downloadMenuLink?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Render a visible "Download" button beneath the table instead of
|
|
44
|
+
* exposing the action only via the top-right menu. When enabled, the
|
|
45
|
+
* menu's Download item is suppressed to avoid duplicate controls.
|
|
46
|
+
*/
|
|
47
|
+
downloadButton?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* Render a plain text link beneath the table for downloading CSV.
|
|
50
|
+
* Pass `true` for the default "Download data (CSV)" label, or a
|
|
51
|
+
* string to customize. When set, the menu's Download item is
|
|
52
|
+
* suppressed. Mutually exclusive with `downloadButton`; if both are
|
|
53
|
+
* set, `downloadButton` wins.
|
|
54
|
+
*/
|
|
55
|
+
downloadLink?: boolean | string;
|
|
41
56
|
/** Stretch the table to fill its container's width. */
|
|
42
57
|
fullWidth?: boolean;
|
|
43
58
|
};
|
|
44
59
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
45
60
|
menu: boolean | string;
|
|
61
|
+
downloadButton: boolean;
|
|
46
62
|
downloadMenuLink: string;
|
|
47
63
|
fullWidth: boolean;
|
|
48
64
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
@@ -114,6 +114,13 @@ export interface ChartCommonProps {
|
|
|
114
114
|
* for the default label or a string to customize.
|
|
115
115
|
*/
|
|
116
116
|
downloadLink?: boolean | string;
|
|
117
|
+
/**
|
|
118
|
+
* Show a `<button>` below the chart to download CSV. Pass `true` for
|
|
119
|
+
* the default label or a string to customize. When set, the CSV menu
|
|
120
|
+
* item is suppressed. Mutually exclusive with `downloadLink`; if both
|
|
121
|
+
* are set, `downloadButton` wins.
|
|
122
|
+
*/
|
|
123
|
+
downloadButton?: boolean | string;
|
|
117
124
|
/** Annotations rendered as the top layer of the chart. */
|
|
118
125
|
annotations?: readonly ChartAnnotation[];
|
|
119
126
|
/**
|
|
@@ -15,6 +15,7 @@ export interface ChartFoundationOptions {
|
|
|
15
15
|
tooltipClamp: () => TooltipClamp | undefined;
|
|
16
16
|
filename: () => string | undefined;
|
|
17
17
|
downloadLink: () => boolean | string | undefined;
|
|
18
|
+
downloadButton: () => boolean | string | undefined;
|
|
18
19
|
chartPadding: () => ChartPadding | undefined;
|
|
19
20
|
/**
|
|
20
21
|
* Labels for the inline legend in render order. Empty array = no
|
|
@@ -90,6 +91,8 @@ export declare function useChartFoundation(opts: ChartFoundationOptions): {
|
|
|
90
91
|
menuItems: import('vue').ComputedRef<import('../ChartMenu/ChartMenu').ChartMenuItem[]>;
|
|
91
92
|
downloadLinkText: import('vue').ComputedRef<string | null>;
|
|
92
93
|
csvHref: import('vue').ComputedRef<string | null>;
|
|
94
|
+
downloadButtonText: import('vue').ComputedRef<string | null>;
|
|
95
|
+
triggerCsvDownload: () => void;
|
|
93
96
|
menuFilename: () => string;
|
|
94
97
|
isFullscreen: import('vue').Ref<boolean, boolean>;
|
|
95
98
|
measuredHeight: import('vue').Ref<number, number>;
|
|
@@ -8,6 +8,8 @@ export interface ChartMenuOptions {
|
|
|
8
8
|
getCsv: () => string;
|
|
9
9
|
/** Whether a separate download link is rendered (and the CSV menu item should be hidden). */
|
|
10
10
|
downloadLink: () => boolean | string | undefined;
|
|
11
|
+
/** Whether a separate download button is rendered (and the CSV menu item should be hidden). */
|
|
12
|
+
downloadButton?: () => boolean | string | undefined;
|
|
11
13
|
/**
|
|
12
14
|
* When true, prepends an Expand/Collapse menu item that toggles the
|
|
13
15
|
* chart into a full-window view. The consumer is responsible for
|
|
@@ -25,6 +27,8 @@ export declare function useChartMenu(opts: ChartMenuOptions): {
|
|
|
25
27
|
items: import('vue').ComputedRef<ChartMenuItem[]>;
|
|
26
28
|
downloadLinkText: import('vue').ComputedRef<string | null>;
|
|
27
29
|
csvHref: import('vue').ComputedRef<string | null>;
|
|
30
|
+
downloadButtonText: import('vue').ComputedRef<string | null>;
|
|
31
|
+
triggerCsvDownload: () => void;
|
|
28
32
|
resolvedFilename: () => string;
|
|
29
33
|
isFullscreen: Ref<boolean, boolean>;
|
|
30
34
|
};
|
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.line-chart-wrapper:hover .chart-menu-button,.bar-chart-wrapper:hover .chart-menu-button,.choropleth-wrapper:hover .chart-menu-button,.line-chart-wrapper:focus-within .chart-menu-button,.bar-chart-wrapper:focus-within .chart-menu-button,.choropleth-wrapper:focus-within .chart-menu-button,.line-chart-wrapper.is-fullscreen .chart-menu-button,.bar-chart-wrapper.is-fullscreen .chart-menu-button,.choropleth-wrapper.is-fullscreen .chart-menu-button{opacity:1}.line-chart-wrapper.is-fullscreen,.bar-chart-wrapper.is-fullscreen,.choropleth-wrapper.is-fullscreen{z-index:var(--cfasim-z-fullscreen,1000);background:var(--color-bg-0,#fff);color:var(--color-text,inherit);box-sizing:border-box;flex-direction:column;justify-content:center;padding:2em;display:flex;position:fixed;inset:0}.choropleth-wrapper.is-fullscreen svg{flex:auto;width:100%;height:100%;min-height:0}.chart-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.chart-menu-trigger-area[data-v-c74e2889]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-c74e2889]{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-c74e2889]{opacity:1}.chart-menu-button[data-v-c74e2889]: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-
|
|
1
|
+
.line-chart-wrapper:hover .chart-menu-button,.bar-chart-wrapper:hover .chart-menu-button,.choropleth-wrapper:hover .chart-menu-button,.line-chart-wrapper:focus-within .chart-menu-button,.bar-chart-wrapper:focus-within .chart-menu-button,.choropleth-wrapper:focus-within .chart-menu-button,.line-chart-wrapper.is-fullscreen .chart-menu-button,.bar-chart-wrapper.is-fullscreen .chart-menu-button,.choropleth-wrapper.is-fullscreen .chart-menu-button{opacity:1}.line-chart-wrapper.is-fullscreen,.bar-chart-wrapper.is-fullscreen,.choropleth-wrapper.is-fullscreen{z-index:var(--cfasim-z-fullscreen,1000);background:var(--color-bg-0,#fff);color:var(--color-text,inherit);box-sizing:border-box;flex-direction:column;justify-content:center;padding:2em;display:flex;position:fixed;inset:0}.choropleth-wrapper.is-fullscreen svg{flex:auto;width:100%;height:100%;min-height:0}.chart-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.chart-menu-trigger-area[data-v-c74e2889]{z-index:1;position:absolute;top:0;right:0}.chart-menu-button[data-v-c74e2889]{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-c74e2889]{opacity:1}.chart-menu-button[data-v-c74e2889]: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-0d24242d]{width:100%;position:relative}.line-chart-tooltip-label[data-v-0d24242d]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-0d24242d]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-0d24242d]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-0d24242d]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.line-chart-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.5em;padding:.5em 1em;display:inline-flex}.line-chart-download-button:hover{background:var(--color-bg-1,#0000000d)}.line-chart-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.bar-chart-wrapper[data-v-bce03a52]{width:100%;position:relative}.bar-chart-tooltip-label[data-v-bce03a52]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-bce03a52]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-bce03a52]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-bce03a52]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.5em;padding:.5em 1em;display:inline-flex}.bar-chart-download-button:hover{background:var(--color-bg-1,#0000000d)}.bar-chart-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.choropleth-wrapper[data-v-b11a80ed]{--choropleth-legend-bg:var(--color-bg-0,#fff);width:100%;position:relative}.choropleth-wrapper svg[data-v-b11a80ed]{width:100%;height:auto;display:block}.choropleth-wrapper.pannable svg[data-v-b11a80ed]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-b11a80ed]:active{cursor:grabbing}.state-path[data-v-b11a80ed]{cursor:pointer}.choropleth-reset[data-v-b11a80ed]{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-b11a80ed]:hover{background:var(--color-bg-1,#f8f9fa);color:var(--color-text,#212529)}.choropleth-header[data-v-b11a80ed]{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-b11a80ed]{white-space:pre-line;font-size:14px;font-weight:600;line-height:1.2}.choropleth-legend[data-v-b11a80ed]{align-items:center;gap:14px;font-size:13px;line-height:1.2;display:flex}.choropleth-legend-title[data-v-b11a80ed]{font-weight:600}.choropleth-legend-item[data-v-b11a80ed]{align-items:center;gap:6px;display:inline-flex}.choropleth-legend-swatch[data-v-b11a80ed]{border-radius:3px;width:12px;height:12px;display:inline-block}.choropleth-legend-continuous[data-v-b11a80ed]{flex-direction:column;width:160px;display:flex}.choropleth-legend-gradient[data-v-b11a80ed]{border-radius:2px;height:12px}.choropleth-legend-ticks[data-v-b11a80ed]{opacity:.7;height:14px;margin-top:4px;font-size:11px;position:relative}.choropleth-legend-ticks>span[data-v-b11a80ed]{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-20a55780]{display:inline-block;position:relative}.TableOuter.full-width[data-v-20a55780]{display:block}.TableWrapper[data-v-20a55780]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-20a55780]{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-20a55780]{width:100%}.Table tr[data-v-20a55780],.Table th[data-v-20a55780],.Table td[data-v-20a55780]{background:0 0;border:none}.Table th[data-v-20a55780],.Table td[data-v-20a55780]{white-space:nowrap;text-align:left;padding:.75em 1.25em}.Table th[data-v-20a55780]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-20a55780]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-20a55780]{border-bottom:none}.TableOuter[data-v-20a55780] .chart-menu-trigger-area{top:4px;right:4px}.TableOuter[data-v-20a55780] .chart-menu-button{opacity:1}.TableOuter.has-menu .Table thead th[data-v-20a55780]:last-child{padding-right:2.5em}.data-table-download-button{border:1px solid var(--color-border);background:var(--color-bg-0,#fff);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;border-radius:.25em;align-items:center;margin-top:.75em;padding:.5em 1em;display:inline-flex}.data-table-download-button:hover{background:var(--color-bg-1,#0000000d)}.data-table-download-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.data-table-download-link{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
|
|
2
2
|
/*$vite$:1*/
|