@cascivo/charts 0.16.0 → 0.16.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.
- package/dist/charts.css +1 -1
- package/dist/index.d.ts +20 -13
- package/dist/index.js +508 -505
- package/dist/node/index.js +508 -505
- package/package.json +3 -3
package/dist/charts.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer cascivo.component{.
|
|
1
|
+
@layer cascivo.component{._frame_1gm0a_2{flex:auto;min-block-size:0;inline-size:100%;min-inline-size:0;position:relative}._frame_1gm0a_2>svg{block-size:auto;max-block-size:100%;max-inline-size:100%}@media (prefers-reduced-motion:no-preference){._frame_1gm0a_2>svg{animation:_cascivo-chart-in_1gm0a_1 var(--cascivo-chart-anim-dur,.32s) var(--cascivo-chart-anim-ease,ease-out) both}@keyframes _cascivo-chart-in_1gm0a_1{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}._frame_1gm0a_2 svg :is(path,rect,circle,line)[data-series],._frame_1gm0a_2 svg path[data-link],._frame_1gm0a_2 svg path[data-depth],._frame_1gm0a_2 svg rect[data-day]{transition-property:var(--cascivo-chart-anim-props,opacity, fill, fill-opacity);transition-duration:var(--cascivo-chart-anim-dur,.24s);transition-timing-function:var(--cascivo-chart-anim-ease,ease)}._frame_1gm0a_2[data-no-anim]>svg{animation:none}._frame_1gm0a_2[data-no-anim] svg :is(path,rect,circle,line)[data-series],._frame_1gm0a_2[data-no-anim] svg path[data-link],._frame_1gm0a_2[data-no-anim] svg path[data-depth],._frame_1gm0a_2[data-no-anim] svg rect[data-day]{transition:none}}._fallback_1gm0a_78{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;inset-inline-start:-9999px;overflow:hidden}._legend_1pign_2{gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._item_1pign_9{align-items:center;gap:var(--cascivo-space-1);padding:var(--cascivo-space-1) var(--cascivo-space-2);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-sm);cursor:pointer;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);transition:opacity var(--cascivo-duration-150,.15s) ease;background:0 0;display:flex}._item_1pign_9[data-state=off]{opacity:.4}._swatch_1pign_27{border-radius:2px;flex-shrink:0;block-size:12px;inline-size:12px;display:inline-block}._meter_cns3q_2{inline-size:100%;min-inline-size:0}._svg_cns3q_9{block-size:auto;inline-size:100%;max-inline-size:100%;display:block}._label_cns3q_16{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-foreground-muted);margin-block-start:var(--cascivo-space-1)}._gaugeLabel_cns3q_22{text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-foreground-muted)}._fill_cns3q_28{transform-origin:0;transition:transform .4s}@media (prefers-reduced-motion:reduce){._fill_cns3q_28{transition:none}}._kpi_nrb8p_7{gap:var(--cascivo-space-2);padding:var(--cascivo-kpi-padding,var(--cascivo-space-4));border-radius:var(--cascivo-radius-surface);border:1px solid var(--cascivo-color-border);background:var(--cascivo-color-surface);flex-direction:column;min-inline-size:0;display:flex}._head_nrb8p_19{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._label_nrb8p_27{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-foreground-muted);overflow-wrap:anywhere;min-inline-size:0}._valueRow_nrb8p_34{align-items:flex-end;gap:var(--cascivo-space-2);min-inline-size:0;display:flex}._value_nrb8p_34{font-size:var(--cascivo-text-2xl);font-weight:var(--cascivo-font-bold);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-foreground);font-variant-numeric:tabular-nums}._delta_nrb8p_49{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);white-space:nowrap;color:var(--cascivo-color-foreground-muted)}._delta_nrb8p_49[data-sentiment=good]{color:var(--cascivo-color-success-foreground)}._delta_nrb8p_49[data-sentiment=bad]{color:var(--cascivo-color-destructive-foreground)}}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/index.d.ts
CHANGED
|
@@ -912,8 +912,17 @@ interface ChartFrameProps {
|
|
|
912
912
|
* container (`max-inline-size: 100%`) so it can never overflow its card.
|
|
913
913
|
*/
|
|
914
914
|
width?: number | undefined;
|
|
915
|
-
/**
|
|
916
|
-
*
|
|
915
|
+
/**
|
|
916
|
+
* Height of the **plot area** in px — the SVG only. The title, description and legend
|
|
917
|
+
* render OUTSIDE it (the legend is a sibling of this frame), so the rendered block is
|
|
918
|
+
* taller than `height` by whatever chrome the chart shows. Sizing a card to `height`
|
|
919
|
+
* exactly is what clips a legend.
|
|
920
|
+
*
|
|
921
|
+
* **Omit it (the default) for a responsive chart.** Like `width`, height now tracks the
|
|
922
|
+
* container via `ResizeObserver`: in a parent with a definite block size the plot fills
|
|
923
|
+
* the space left over after the legend, and in an auto-height parent it falls back to
|
|
924
|
+
* 300px. Set it only to force a fixed aspect.
|
|
925
|
+
*/
|
|
917
926
|
height?: number | undefined;
|
|
918
927
|
fallback?: ReactNode;
|
|
919
928
|
children: (size: {
|
|
@@ -1966,11 +1975,10 @@ declare function ScatterChart({
|
|
|
1966
1975
|
interface SparklineBaseProps {
|
|
1967
1976
|
data: readonly number[];
|
|
1968
1977
|
/**
|
|
1969
|
-
*
|
|
1970
|
-
*
|
|
1971
|
-
*
|
|
1972
|
-
*
|
|
1973
|
-
* this — charts call it internally.
|
|
1978
|
+
* SVG width in px. **This chart is fixed-width by default** — it is a compact, inline
|
|
1979
|
+
* chart meant to sit in a table cell or beside a label, so omitting `width` gives you
|
|
1980
|
+
* 120px rather than a container-filling chart. Pass a number to change it. The
|
|
1981
|
+
* catalogue-wide "omit for a responsive chart" note does not apply to this chart.
|
|
1974
1982
|
*
|
|
1975
1983
|
* @defaultValue `80`
|
|
1976
1984
|
* @see the component manifest
|
|
@@ -2049,7 +2057,7 @@ declare function Meter({
|
|
|
2049
2057
|
label,
|
|
2050
2058
|
variant,
|
|
2051
2059
|
thresholds,
|
|
2052
|
-
width,
|
|
2060
|
+
width: fixedWidth,
|
|
2053
2061
|
height
|
|
2054
2062
|
}: MeterProps): import("react").JSX.Element;
|
|
2055
2063
|
interface KpiProps {
|
|
@@ -2478,11 +2486,10 @@ interface BulletProps {
|
|
|
2478
2486
|
min?: number;
|
|
2479
2487
|
max?: number;
|
|
2480
2488
|
/**
|
|
2481
|
-
*
|
|
2482
|
-
*
|
|
2483
|
-
*
|
|
2484
|
-
*
|
|
2485
|
-
* this — charts call it internally.
|
|
2489
|
+
* SVG width in px. **This chart is fixed-width by default** — it is a compact, inline
|
|
2490
|
+
* chart meant to sit in a table cell or beside a label, so omitting `width` gives you
|
|
2491
|
+
* 300px rather than a container-filling chart. Pass a number to change it. The
|
|
2492
|
+
* catalogue-wide "omit for a responsive chart" note does not apply to this chart.
|
|
2486
2493
|
*
|
|
2487
2494
|
* @defaultValue `300`
|
|
2488
2495
|
* @see the component manifest
|