@fusion.dev/helix 0.203.0 → 0.204.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/api.json +1 -1
- package/custom-elements.json +481 -11
- package/dist/element-events.generated.js +1 -1
- package/dist/log/line/log-line.css.js +1 -1
- package/dist/log/line/log-line.d.ts +1 -0
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js +1 -1
- package/dist/spatial-bar-chart/root/spatial-bar-chart-root.d.ts +1 -1
- package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.css.js +1 -1
- package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.d.ts +1 -1
- package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.css.js +1 -1
- package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts +1 -1
- package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.js +1 -1
- package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts +1 -1
- package/dist/spatial-treemap/root/spatial-treemap-root.css.js +1 -1
- package/dist/spatial-treemap/root/spatial-treemap-root.d.ts +1 -1
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +103 -29
- package/types/vue.d.ts +35 -8
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover {color: var(--helix-color-foreground);text-decoration: underline}a[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
|
|
@@ -15,6 +15,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
15
15
|
* @cssproperty --log-error-color - The color of a line at `error`, and of the band behind it. Defaults to the danger color.
|
|
16
16
|
* @cssproperty --log-mark-background-color - The band behind a line `mark-lines` names.
|
|
17
17
|
* @cssproperty --log-match-background-color - The fill behind text that matches the log's `query`.
|
|
18
|
+
* @cssproperty --log-selected-background-color - The band behind a selected line, on a `selectable` log.
|
|
18
19
|
* @cssproperty --log-warn-color - The color of a line at `warn`, and of the band behind it. Defaults to the warning color.
|
|
19
20
|
*/
|
|
20
21
|
export declare class HelixLogLine extends HelixHeadlessLogLine {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
|
|
@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
|
|
|
16
16
|
* @groups charts
|
|
17
17
|
* @documentation https://fusion.dev/helix/components/spatial-bar-chart
|
|
18
18
|
*
|
|
19
|
-
* @cssproperty --spatial-bar-chart-block-size - How tall the plot is.
|
|
19
|
+
* @cssproperty --spatial-bar-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
20
20
|
*/
|
|
21
21
|
export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
|
|
22
22
|
static tier: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-ribbon-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="ribbon"] {--_spatial-ribbon-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-ribbon-chart-face: oklch(from var(--_spatial-ribbon-chart-color) calc(l - var(--spatial-ribbon-chart-shade, 0) * 0.5) c h);--_spatial-ribbon-chart-edge: oklch(from var(--_spatial-ribbon-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-ribbon-chart-fill, var(--_spatial-ribbon-chart-face));fill-opacity: calc(var(--_spatial-ribbon-chart-area, 1) * var(--_spatial-ribbon-chart-through, 1));stroke: var(--_spatial-ribbon-chart-line, var(--_spatial-ribbon-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-ribbon-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-ribbon-chart-fill: color-mix(in oklab, var(--_spatial-ribbon-chart-face) 60%, var(--helix-color-background));--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-ribbon-chart-area: 0.2;--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([material="glass"]) {--_spatial-ribbon-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-ribbon-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-ribbon-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-ribbon-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="ribbon"] {--_spatial-ribbon-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-ribbon-chart-face: oklch(from var(--_spatial-ribbon-chart-color) calc(l - var(--spatial-ribbon-chart-shade, 0) * 0.5) c h);--_spatial-ribbon-chart-edge: oklch(from var(--_spatial-ribbon-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-ribbon-chart-fill, var(--_spatial-ribbon-chart-face));fill-opacity: calc(var(--_spatial-ribbon-chart-area, 1) * var(--_spatial-ribbon-chart-through, 1));stroke: var(--_spatial-ribbon-chart-line, var(--_spatial-ribbon-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-ribbon-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-ribbon-chart-fill: color-mix(in oklab, var(--_spatial-ribbon-chart-face) 60%, var(--helix-color-background));--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-ribbon-chart-area: 0.2;--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([material="glass"]) {--_spatial-ribbon-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-ribbon-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
|
|
|
16
16
|
* @groups charts
|
|
17
17
|
* @documentation https://fusion.dev/helix/components/spatial-ribbon-chart
|
|
18
18
|
*
|
|
19
|
-
* @cssproperty --spatial-ribbon-chart-block-size - How tall the plot is.
|
|
19
|
+
* @cssproperty --spatial-ribbon-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
20
20
|
*/
|
|
21
21
|
export declare class HelixSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart {
|
|
22
22
|
static tier: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="drop-line"] {opacity: 0.45;stroke: var(--chart-series, var(--helix-color-primary));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="point"] {fill: var(--_spatial-scatter-chart-fill, var(--chart-series, var(--helix-color-primary)));fill-opacity: calc(var(--_spatial-scatter-chart-area, 1) * var(--_spatial-scatter-chart-through, 1));stroke: var(--_spatial-scatter-chart-line, var(--helix-color-surface-sunken));stroke-opacity: var(--_spatial-scatter-chart-through, 1);stroke-width: var(--_spatial-scatter-chart-weight, var(--helix-border-thin));vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part~="point"] {--_spatial-scatter-chart-fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 60%, var(--helix-color-background));--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([emphasis="subtle"]) [part~="point"] {--_spatial-scatter-chart-area: 0.2;--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([material="glass"]) {--_spatial-scatter-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-scatter-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="drop-line"] {stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-scatter-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="drop-line"] {opacity: 0.45;stroke: var(--chart-series, var(--helix-color-primary));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="point"] {fill: var(--_spatial-scatter-chart-fill, var(--chart-series, var(--helix-color-primary)));fill-opacity: calc(var(--_spatial-scatter-chart-area, 1) * var(--_spatial-scatter-chart-through, 1));stroke: var(--_spatial-scatter-chart-line, var(--helix-color-surface-sunken));stroke-opacity: var(--_spatial-scatter-chart-through, 1);stroke-width: var(--_spatial-scatter-chart-weight, var(--helix-border-thin));vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part~="point"] {--_spatial-scatter-chart-fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 60%, var(--helix-color-background));--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([emphasis="subtle"]) [part~="point"] {--_spatial-scatter-chart-area: 0.2;--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([material="glass"]) {--_spatial-scatter-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-scatter-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="drop-line"] {stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
@@ -15,7 +15,7 @@ import '../../tooltip/index.js';
|
|
|
15
15
|
* @groups charts
|
|
16
16
|
* @documentation https://fusion.dev/helix/components/spatial-scatter-chart
|
|
17
17
|
*
|
|
18
|
-
* @cssproperty --spatial-scatter-chart-block-size - How tall the plot is.
|
|
18
|
+
* @cssproperty --spatial-scatter-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
19
19
|
*/
|
|
20
20
|
export declare class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
|
|
21
21
|
static tier: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-fill, var(--_spatial-surface-chart-lit));fill-opacity: calc(var(--_spatial-surface-chart-area, 1) * var(--_spatial-surface-chart-through, 1));stroke: var(--_spatial-surface-chart-line, var(--_spatial-surface-chart-rule));stroke-linejoin: round;stroke-opacity: var(--_spatial-surface-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="contour"] {--_spatial-surface-chart-contour: oklch(from color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low)) calc(l + clamp(-0.18, (0.6 - l) * 1000, 0.22)) c h);fill: none;stroke: var(--_spatial-surface-chart-contour);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-surface-chart-fill: color-mix(in oklab, var(--_spatial-surface-chart-lit) 60%, var(--helix-color-background));--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-surface-chart-area: 0.2;--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([material="glass"]) {--_spatial-surface-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-surface-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="contour"] {stroke: CanvasText}[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-surface-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-fill, var(--_spatial-surface-chart-lit));fill-opacity: calc(var(--_spatial-surface-chart-area, 1) * var(--_spatial-surface-chart-through, 1));stroke: var(--_spatial-surface-chart-line, var(--_spatial-surface-chart-rule));stroke-linejoin: round;stroke-opacity: var(--_spatial-surface-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="contour"] {--_spatial-surface-chart-contour: oklch(from color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low)) calc(l + clamp(-0.18, (0.6 - l) * 1000, 0.22)) c h);fill: none;stroke: var(--_spatial-surface-chart-contour);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-surface-chart-fill: color-mix(in oklab, var(--_spatial-surface-chart-lit) 60%, var(--helix-color-background));--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-surface-chart-area: 0.2;--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([material="glass"]) {--_spatial-surface-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-surface-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="contour"] {stroke: CanvasText}[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
|
|
@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
|
|
|
16
16
|
* @groups charts
|
|
17
17
|
* @documentation https://fusion.dev/helix/components/spatial-surface-chart
|
|
18
18
|
*
|
|
19
|
-
* @cssproperty --spatial-surface-chart-block-size - How tall the plot is.
|
|
19
|
+
* @cssproperty --spatial-surface-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
20
20
|
* @cssproperty --spatial-surface-chart-high - The color of the highest reading, which the renderer reads too.
|
|
21
21
|
* @cssproperty --spatial-surface-chart-low - The color of the lowest reading, which the renderer reads too.
|
|
22
22
|
*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-treemap-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
|
|
@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
|
|
|
16
16
|
* @groups charts
|
|
17
17
|
* @documentation https://fusion.dev/helix/components/spatial-treemap
|
|
18
18
|
*
|
|
19
|
-
* @cssproperty --spatial-treemap-block-size - How tall the plot is.
|
|
19
|
+
* @cssproperty --spatial-treemap-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
|
|
20
20
|
*/
|
|
21
21
|
export declare class HelixSpatialTreemap extends HelixHeadlessSpatialTreemap {
|
|
22
22
|
static tier: string;
|