@cfasim-ui/charts 0.4.0 → 0.4.1

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.
@@ -39,6 +39,11 @@ type __VLS_Props = {
39
39
  valueTicks?: number | number[];
40
40
  /** Formatter for value-axis tick labels. */
41
41
  valueTickFormat?: (value: number) => string;
42
+ /**
43
+ * Formatter for numeric values shown in the default tooltip. Receives
44
+ * the raw value. Defaults to the same tick formatter used for axes.
45
+ */
46
+ tooltipValueFormat?: (value: number) => string;
42
47
  /** Formatter for category-axis labels. Receives the resolved category string. */
43
48
  categoryFormat?: (label: string, index: number) => string;
44
49
  /**
@@ -54,8 +59,12 @@ type __VLS_Props = {
54
59
  debounce?: number;
55
60
  menu?: boolean | string;
56
61
  valueGrid?: boolean;
57
- /** Custom per-index data passed to the tooltip slot. */
58
- tooltipData?: unknown[];
62
+ /**
63
+ * Custom per-index data passed to the tooltip slot. Accepts a plain
64
+ * array or any `ArrayLike` (e.g. a typed array column from a
65
+ * `ModelOutput`).
66
+ */
67
+ tooltipData?: ArrayLike<unknown>;
59
68
  /** Tooltip activation mode. */
60
69
  tooltipTrigger?: "hover" | "click";
61
70
  /** Boundary for tooltip flip/clamp. Default "chart". */
@@ -4,6 +4,10 @@ export interface ChartMenuItem {
4
4
  }
5
5
  type __VLS_Props = {
6
6
  items: ChartMenuItem[];
7
+ /** Force the dropdown style even when only one item is provided. */
8
+ forceDropdown?: boolean;
7
9
  };
8
- declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
10
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
11
+ forceDropdown: boolean;
12
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
9
13
  export default _default;
@@ -56,6 +56,12 @@ type __VLS_Props = {
56
56
  name: string;
57
57
  value?: number | string;
58
58
  }) => string;
59
+ /**
60
+ * Formatter for numeric values shown in the default tooltip. Receives
61
+ * the raw value. Ignored when `tooltipFormat` is provided (the caller
62
+ * controls the entire tooltip in that case).
63
+ */
64
+ tooltipValueFormat?: (value: number) => string;
59
65
  /**
60
66
  * Boundary for tooltip flip/clamp. `"none"` always places to the right of
61
67
  * the pointer with no clamping. `"chart"` (default) uses the map
@@ -15,22 +15,24 @@ type __VLS_Props = {
15
15
  columnConfig?: Record<string, ColumnConfig>;
16
16
  menu?: boolean | string;
17
17
  /**
18
- * Custom CSV content for the Download CSV menu item and download link.
19
- * Can be a raw CSV string or a function returning one. When omitted, CSV
20
- * is generated from the table data.
18
+ * Custom CSV content for the Download menu item. Can be a raw CSV string
19
+ * or a function returning one. When omitted, CSV is generated from the
20
+ * table data.
21
21
  */
22
22
  csv?: string | (() => string);
23
23
  /** Filename (without extension) for downloaded CSV files. */
24
24
  filename?: string;
25
25
  /**
26
- * Show a plain text link below the table to download the CSV data.
27
- * Pass `true` for the default label ("Download data (CSV)") or a string
28
- * to customize the link text. When set, the Download CSV menu item is
29
- * hidden.
26
+ * Label for the Download item in the table's top-right menu.
27
+ * Defaults to "Download".
30
28
  */
31
- downloadLink?: boolean | string;
29
+ downloadMenuLink?: string;
30
+ /** Stretch the table to fill its container's width. */
31
+ fullWidth?: boolean;
32
32
  };
33
33
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
34
34
  menu: boolean | string;
35
+ downloadMenuLink: string;
36
+ fullWidth: boolean;
35
37
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
36
38
  export default _default;
@@ -108,6 +108,11 @@ type __VLS_Props = {
108
108
  xTickFormat?: (value: number, index: number) => string;
109
109
  /** Formatter for y-axis tick labels. Receives the raw numeric value. */
110
110
  yTickFormat?: (value: number) => string;
111
+ /**
112
+ * Formatter for numeric values shown in the default tooltip. Receives
113
+ * the raw value. Defaults to the same tick formatter used for axes.
114
+ */
115
+ tooltipValueFormat?: (value: number) => string;
111
116
  /**
112
117
  * @deprecated Use `xTickFormat` (e.g. `(_, i) => labels[i]`) together
113
118
  * with `xTicks` for explicit control. Still honored for tooltip x-labels
@@ -118,8 +123,12 @@ type __VLS_Props = {
118
123
  menu?: boolean | string;
119
124
  xGrid?: boolean;
120
125
  yGrid?: boolean;
121
- /** Custom per-index data passed to the tooltip slot */
122
- tooltipData?: unknown[];
126
+ /**
127
+ * Custom per-index data passed to the tooltip slot. Accepts a plain
128
+ * array or any `ArrayLike` (e.g. a typed array column from a
129
+ * `ModelOutput`).
130
+ */
131
+ tooltipData?: ArrayLike<unknown>;
123
132
  /** Tooltip activation mode. Default: 'hover' */
124
133
  tooltipTrigger?: "hover" | "click";
125
134
  /**
package/dist/index.css CHANGED
@@ -1,2 +1,2 @@
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-d66a19bd]{width:100%;position:relative}.line-chart-wrapper[data-v-d66a19bd]:hover .chart-menu-button{opacity:1}.line-chart-tooltip-label[data-v-d66a19bd]{margin-bottom:.25em;font-weight:600}.line-chart-tooltip-row[data-v-d66a19bd]{align-items:center;gap:.375em;display:flex}.line-chart-download-link[data-v-d66a19bd]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.line-chart-tooltip-swatch[data-v-d66a19bd]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.bar-chart-wrapper[data-v-c2d91885]{width:100%;position:relative}.bar-chart-wrapper[data-v-c2d91885]:hover .chart-menu-button{opacity:1}.bar-chart-tooltip-label[data-v-c2d91885]{margin-bottom:.25em;font-weight:600}.bar-chart-tooltip-row[data-v-c2d91885]{align-items:center;gap:.375em;display:flex}.bar-chart-download-link[data-v-c2d91885]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}.bar-chart-tooltip-swatch[data-v-c2d91885]{border-radius:50%;flex-shrink:0;width:.625em;height:.625em;display:inline-block}.choropleth-wrapper[data-v-25a20d5b]{width:100%;position:relative}.choropleth-wrapper.pannable svg[data-v-25a20d5b]{cursor:grab}.choropleth-wrapper.pannable svg[data-v-25a20d5b]:active{cursor:grabbing}.choropleth-wrapper[data-v-25a20d5b]:hover .chart-menu-button{opacity:1}.state-path[data-v-25a20d5b]{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-505e2187]{display:inline-block;position:relative}.TableOuter.has-menu[data-v-505e2187]{margin-top:32px}.TableOuter[data-v-505e2187] .chart-menu-trigger-area{top:-32px;right:0}.TableOuter[data-v-505e2187]:hover .chart-menu-button{opacity:1}.TableWrapper[data-v-505e2187]{font-size:var(--font-size-sm);overflow-x:auto}.Table[data-v-505e2187]{border-collapse:collapse;font-variant-numeric:tabular-nums;border:1px solid var(--color-border);margin:0;display:table}.Table tr[data-v-505e2187],.Table th[data-v-505e2187],.Table td[data-v-505e2187]{background:0 0;border:none}.Table th[data-v-505e2187],.Table td[data-v-505e2187]{white-space:nowrap;padding:.75em 1.25em}.Table th[data-v-505e2187]{border-bottom:1px solid var(--color-border-header);font-weight:600;position:sticky;top:0}.Table tbody td[data-v-505e2187]{border-bottom:1px solid var(--color-border)}.Table tbody tr:last-child td[data-v-505e2187]{border-bottom:none}.data-table-download-link[data-v-505e2187]{text-align:right;font-size:var(--font-size-sm);margin-top:.25em;display:block}
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}
2
2
  /*$vite$:1*/