@fusion.dev/helix 0.181.0 → 0.181.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/custom-elements.json
CHANGED
|
@@ -10880,7 +10880,7 @@
|
|
|
10880
10880
|
{
|
|
10881
10881
|
"name": "bar",
|
|
10882
10882
|
"type": {
|
|
10883
|
-
"text": "(\n value: number,\n index: number,\n depth: number,\n tone: number,\n scale: (value: number) => number,\n from?: number,\n ) => TemplateResult"
|
|
10883
|
+
"text": "(\n value: number,\n index: number,\n depth: number,\n tone: number,\n scale: (value: number) => number,\n from?: number,\n end?: StackEnd,\n ) => TemplateResult"
|
|
10884
10884
|
}
|
|
10885
10885
|
}
|
|
10886
10886
|
],
|
|
@@ -11775,13 +11775,21 @@
|
|
|
11775
11775
|
}
|
|
11776
11776
|
},
|
|
11777
11777
|
{
|
|
11778
|
-
"description": "One column.",
|
|
11778
|
+
"description": "One column. Under `stacked`, one segment of a category's column.",
|
|
11779
11779
|
"name": "bar",
|
|
11780
11780
|
"inheritedFrom": {
|
|
11781
11781
|
"name": "HelixHeadlessBarChart",
|
|
11782
11782
|
"module": "src/bar-chart/root/bar-chart-root.ts"
|
|
11783
11783
|
}
|
|
11784
11784
|
},
|
|
11785
|
+
{
|
|
11786
|
+
"description": "Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.",
|
|
11787
|
+
"name": "bar-end",
|
|
11788
|
+
"inheritedFrom": {
|
|
11789
|
+
"name": "HelixHeadlessBarChart",
|
|
11790
|
+
"module": "src/bar-chart/root/bar-chart-root.ts"
|
|
11791
|
+
}
|
|
11792
|
+
},
|
|
11785
11793
|
{
|
|
11786
11794
|
"description": "The far stop of a bar's gradient, where one is used.",
|
|
11787
11795
|
"name": "bar-wash-end",
|
|
@@ -251363,6 +251371,6 @@
|
|
|
251363
251371
|
],
|
|
251364
251372
|
"helix": {
|
|
251365
251373
|
"package": "@fusion.dev/helix",
|
|
251366
|
-
"version": "0.181.
|
|
251374
|
+
"version": "0.181.1"
|
|
251367
251375
|
}
|
|
251368
251376
|
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part
|
|
3
|
-
[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part
|
|
2
|
+
export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs));}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em);}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible;}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series);}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2);}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0;}:host([stacked]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px);}:host([stacked][orientation="horizontal"]) [part~="bar-end"][data-end="negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px);}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column;}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap;}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr;}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1;}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end;}[part~="bar"],
|
|
3
|
+
[part="line"] {--_bar-chart-series: var(--chart-series);}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45;}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate);}[part~="bar"] {transition:
|
|
4
4
|
height var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
5
5
|
width var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
6
6
|
x var(--helix-duration-normal) var(--helix-easing-decelerate),
|
|
7
|
-
y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:not([orientation="horizontal"])) [part
|
|
7
|
+
y var(--helix-duration-normal) var(--helix-easing-decelerate);}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100;}:host([orientation="horizontal"]) [part~="bar"] {width: 0;}}[part="plot"] {cursor: crosshair;}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke;}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken));}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke;}:host([secondary]) {grid-template-columns: auto 1fr auto;}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1;}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(
|
|
8
8
|
in oklab,
|
|
9
9
|
var(--bar-chart-secondary) 45%,
|
|
10
10
|
var(--helix-color-foreground)
|
|
11
11
|
);color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle));}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1;}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1;}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2;}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr;}:host([value-axis]:not([secondary]):not([orientation="horizontal"]))
|
|
12
12
|
[part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1;}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"],
|
|
13
|
-
:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2;}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto;}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part
|
|
14
|
-
:host([emphasis="outlined"]) [part
|
|
15
|
-
:host([emphasis="subtle"]) [part
|
|
13
|
+
:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2;}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto;}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2;}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative;}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch);}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh;}[part="tick"] {position: absolute;}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%;}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0;}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0;}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0;}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1);}[part~="bar"][data-emphasis="outlined"],
|
|
14
|
+
:host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part~="bar"][data-emphasis="subtle"],
|
|
15
|
+
:host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke;}[part~="bar"] {--_bar-chart-shade: color-mix(
|
|
16
16
|
in oklab,
|
|
17
17
|
var(--_bar-chart-series) 60%,
|
|
18
18
|
var(--helix-color-background)
|
|
19
|
-
);}[part
|
|
20
|
-
:host([material="glass"]) [part
|
|
19
|
+
);}[part~="bar"][data-material="glass"],
|
|
20
|
+
:host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity));}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity));}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash);}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity));}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity));}@media print {:host {print-color-adjust: exact;}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap;}`);
|
|
@@ -31,7 +31,7 @@ let HelixBarChart = class HelixBarChart extends HelixHeadlessBarChart {
|
|
|
31
31
|
const outlined = slots(this.outlined);
|
|
32
32
|
const subtle = slots(this.subtle);
|
|
33
33
|
const glass = slots(this.glass);
|
|
34
|
-
for (const bar of this.renderRoot.querySelectorAll('[part
|
|
34
|
+
for (const bar of this.renderRoot.querySelectorAll('[part~="bar"]')) {
|
|
35
35
|
const at = Number(bar.dataset.series);
|
|
36
36
|
mark(bar, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
|
|
37
37
|
mark(bar, 'material', glass.has(at) ? 'glass' : undefined);
|