@fusion.dev/helix 0.40.0 → 0.41.0
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 +320 -31
- package/dist/area-chart/root/area-chart-root.d.ts +27 -2
- package/dist/bar-chart/root/bar-chart-root.css.js +0 -1
- package/dist/bar-chart/root/bar-chart-root.d.ts +17 -5
- package/dist/bar-chart/root/bar-chart-root.js +2 -6
- package/dist/donut-chart/root/donut-chart-root.css.js +1 -1
- package/dist/donut-chart/root/donut-chart-root.d.ts +1 -1
- package/dist/legend/root/legend-root.js +2 -6
- package/dist/line-chart/root/line-chart-root.d.ts +15 -6
- package/dist/scatter-chart/root/scatter-chart-root.css.js +1 -1
- package/dist/scatter-chart/root/scatter-chart-root.d.ts +25 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +761 -137
- package/types/vue.d.ts +101 -44
package/types/vue.d.ts
CHANGED
|
@@ -508,9 +508,13 @@ words and is already written. */
|
|
|
508
508
|
label?: (HelixAreaChart["label"]) | undefined;
|
|
509
509
|
/** How a band's edge gets from one reading to the next.
|
|
510
510
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
511
|
+
Three values, and the class doc argues for each: `straight` is absent and
|
|
512
|
+
is the default, `smooth` is for a stack read as a shape and is the one that
|
|
513
|
+
can draw a part as less than nothing, `step` is for a quantity that changes
|
|
514
|
+
at a moment and is ordered the way `straight` is.
|
|
515
|
+
|
|
516
|
+
Absent rather than defaulted because a reflecting property with a default
|
|
517
|
+
writes its attribute onto every host, including the ones nobody configured. */
|
|
514
518
|
curve?: (HelixAreaChart["curve"]) | undefined;
|
|
515
519
|
/** Which rules are drawn across the plot, if any.
|
|
516
520
|
|
|
@@ -740,6 +744,12 @@ The chart's treatment, which every series takes unless `outlined` or
|
|
|
740
744
|
of the series color with that edge on it, and absent is the filled column,
|
|
741
745
|
per the rule that a reflected property takes no default.
|
|
742
746
|
|
|
747
|
+
`solid` is that filled column written out. It matches no rule in the sheet
|
|
748
|
+
and lands on the base one, which is what the resting value of every axis in
|
|
749
|
+
the registry does, and it is worth having so a consumer switching a chart
|
|
750
|
+
between treatments has a word for the one it started at rather than having
|
|
751
|
+
to remove the attribute.
|
|
752
|
+
|
|
743
753
|
**It composes with `material` rather than competing with it.** Emphasis
|
|
744
754
|
decides what is drawn and material decides how much of it comes through, so
|
|
745
755
|
`glass` thins whatever emphasis put there: the fill on a solid column, the
|
|
@@ -796,10 +806,15 @@ having the datum rather than by painting it invisibly. */
|
|
|
796
806
|
material?: (HelixBarChart["material"]) | undefined;
|
|
797
807
|
/** Which series are drawn as an outline rather than a fill, by name.
|
|
798
808
|
|
|
799
|
-
|
|
800
|
-
the way `lines` and `secondary` are, so a chart says
|
|
801
|
-
rather than counting columns. Names because they are
|
|
802
|
-
carries and what the legend already shows.
|
|
809
|
+
Separated by whitespace or commas and matched against the column headings
|
|
810
|
+
the table gives, the way `lines` and `secondary` are, so a chart says
|
|
811
|
+
`outlined="Forecast"` rather than counting columns. Names because they are
|
|
812
|
+
what the table already carries and what the legend already shows.
|
|
813
|
+
|
|
814
|
+
All five read one splitter, `seriesNames` in `core`, because the sentence
|
|
815
|
+
above was true of the matching and false of the splitting: these three took
|
|
816
|
+
a comma and those two did not, so `lines="Gateway, Billing"` drew no line
|
|
817
|
+
and said nothing.
|
|
803
818
|
|
|
804
819
|
**The case this exists for is a series that is not a measurement.** A
|
|
805
820
|
forecast, a target, a budget: something drawn on the same axis as the
|
|
@@ -868,28 +883,38 @@ and reach no reader through the table. */
|
|
|
868
883
|
gridlines?: (HelixBarChart["gridlines"]) | undefined;
|
|
869
884
|
/** Which series are drawn as a line instead of as columns, by name.
|
|
870
885
|
|
|
871
|
-
|
|
872
|
-
chart says `lines="Margin"` rather than counting
|
|
873
|
-
they are what the table already carries and what the
|
|
874
|
-
an index is a fourth place the column order is
|
|
875
|
-
one to go stale when somebody moves a column.
|
|
876
|
-
|
|
877
|
-
**
|
|
878
|
-
|
|
879
|
-
something comparable to the columns beside it.
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
886
|
+
Separated by whitespace or commas and matched against the column headings
|
|
887
|
+
the table gives, so a chart says `lines="Margin"` rather than counting
|
|
888
|
+
columns. Names because they are what the table already carries and what the
|
|
889
|
+
legend already shows: an index is a fourth place the column order is
|
|
890
|
+
written down and the first one to go stale when somebody moves a column.
|
|
891
|
+
|
|
892
|
+
**This says which mark a series takes and nothing about which scale it is
|
|
893
|
+
measured on.** Named here alone, a line shares the columns' domain, so it
|
|
894
|
+
says something comparable to the columns beside it.
|
|
895
|
+
|
|
896
|
+
The other half of a combination chart, a count against a percentage on a
|
|
897
|
+
scale of its own, is `secondary`, which is a separate property because it
|
|
898
|
+
is a separate question and because the two compose: `with-a-second-axis`
|
|
899
|
+
ships naming one series in both. The argument for why a second scale is opt
|
|
900
|
+
in, and why setting it labels both axes, is written there.
|
|
901
|
+
|
|
902
|
+
A line among columns measures from zero, because the columns do and they
|
|
903
|
+
share the axis. So does a line on the second scale, which is that scale's
|
|
904
|
+
own rule rather than this one's. */
|
|
887
905
|
lines?: (HelixBarChart["lines"]) | undefined;
|
|
888
906
|
/** Which series are measured against a scale of their own, by name.
|
|
889
907
|
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
908
|
+
Separated and matched the way `lines` is, against the column headings the
|
|
909
|
+
table gives. Opt in: absent, every series shares one domain, which is what
|
|
910
|
+
makes a chart comparable and is the right default.
|
|
911
|
+
|
|
912
|
+
**The scale, and `lines` is the mark.** The two are separate properties
|
|
913
|
+
because they answer separate questions and a series usually wants both:
|
|
914
|
+
a percentage beside a count is drawn as a line *and* measured on its own
|
|
915
|
+
axis, which is what `with-a-second-axis` writes out. Neither implies the
|
|
916
|
+
other, so a series can be a line on the shared scale and a column can have
|
|
917
|
+
a scale to itself.
|
|
893
918
|
|
|
894
919
|
**Two scales on one frame let an author put any two shapes in any relation
|
|
895
920
|
by choosing the ranges, and a reader cannot see it happening.** That is not
|
|
@@ -3532,7 +3557,15 @@ the bar chart's baseline is not a property at all.
|
|
|
3532
3557
|
circumference, which needs the radius, and reading a custom property means
|
|
3533
3558
|
`getComputedStyle`, which is client-only: a server would draw a different
|
|
3534
3559
|
ring than the client. A plot's proportions are markup for the same reason
|
|
3535
|
-
`curve` is.
|
|
3560
|
+
`curve` is.
|
|
3561
|
+
|
|
3562
|
+
**And so it does not reflect**, which is the same argument read forward. No
|
|
3563
|
+
selector on either tier asks about it and none can want to: everything the
|
|
3564
|
+
thickness decides is arithmetic done here and published as
|
|
3565
|
+
`--donut-chart-stroke`, which is a number a rule can do sums with where the
|
|
3566
|
+
word is not. Reflected, it wrote a value onto every host a script had set
|
|
3567
|
+
it on for nothing to read. `sweep` beside it is the converse and reflects,
|
|
3568
|
+
because three rules select on it. */
|
|
3536
3569
|
hole?: (HelixDonutChart["hole"]) | undefined;
|
|
3537
3570
|
/** How much of the circle the whole occupies.
|
|
3538
3571
|
|
|
@@ -4908,7 +4941,20 @@ Matched as `outlined` is. */
|
|
|
4908
4941
|
/** Which way to read the table.
|
|
4909
4942
|
|
|
4910
4943
|
Absent is `series`, one entry per data column. `categories` reads one entry
|
|
4911
|
-
per body row instead, for a donut, whose slices are the rows.
|
|
4944
|
+
per body row instead, for a donut, whose slices are the rows.
|
|
4945
|
+
|
|
4946
|
+
**`measures` is `series` without the first column, and it is for a
|
|
4947
|
+
scatter.** That chart reads its first numeric column as the measure
|
|
4948
|
+
*across*, so its first plotted series is the table's second and everything
|
|
4949
|
+
a legend beside it named was one color out: the across column wearing the
|
|
4950
|
+
color of the first series drawn, and each real series wearing the next
|
|
4951
|
+
one's. The across gets no entry rather than a shifted one, because it is an
|
|
4952
|
+
axis and a scatter already writes its name at the end of the scale under
|
|
4953
|
+
the plot.
|
|
4954
|
+
|
|
4955
|
+
A legend cannot ask the chart which of these it is, `for` naming the table
|
|
4956
|
+
they share and not each other, so the consumer says it. That is the same
|
|
4957
|
+
shape `categories` already has. */
|
|
4912
4958
|
entries?: (HelixLegend["entries"]) | undefined;
|
|
4913
4959
|
/** The id of the table to take the names from.
|
|
4914
4960
|
|
|
@@ -5037,9 +5083,20 @@ useful thing: it is where a reader looks for "and what is it now", which is
|
|
|
5037
5083
|
the question a sparkline's single mark answers too.
|
|
5038
5084
|
|
|
5039
5085
|
`none` lets the lines stop on their own, which suits a chart read for its
|
|
5040
|
-
shape rather than for where it finished.
|
|
5086
|
+
shape rather than for where it finished. `square` is the same mark with its
|
|
5087
|
+
corners, for a drawing whose neighbors are square, the columns of a table
|
|
5088
|
+
beside it for instance. `ring` lets the ground through, for a chart drawn
|
|
5089
|
+
over something busy. `triangle` points along the axis and reads as "and
|
|
5090
|
+
onward" rather than as a second claim about the data.
|
|
5091
|
+
|
|
5092
|
+
The shapes come from
|
|
5041
5093
|
`helix/styled/src/shared/chart/terminus.css`, the same sheet `Sparkline` takes, so
|
|
5042
|
-
the set is identical wherever one appears.
|
|
5094
|
+
the set is identical wherever one appears. **Which is why every value is
|
|
5095
|
+
named here.** `Sparkline` shipped `square` implemented, drawn, asserted and
|
|
5096
|
+
undocumented until the cohort before this one; this family reads the same
|
|
5097
|
+
four out of the same sheet and had left two of them unwritten, so the
|
|
5098
|
+
finding arrived twice. A shared vocabulary wants naming at each door into
|
|
5099
|
+
it, because a reader arrives at one door and not at the set.
|
|
5043
5100
|
|
|
5044
5101
|
`ring` is the one that asks something of the drawing. It leaves a hole and a
|
|
5045
5102
|
line ends at the reading, which is the hole's center, so the `<svg>` is
|
|
@@ -10243,6 +10300,8 @@ export type CustomCssProperties = {
|
|
|
10243
10300
|
"--area-chart-gridline-color"?: (string) | undefined;
|
|
10244
10301
|
/** Thickness of a band's top edge, over `--chart-stroke`. */
|
|
10245
10302
|
"--area-chart-width"?: (string) | undefined;
|
|
10303
|
+
/** Thickness of a band's top edge, one name across this family, Line Chart and Bar Chart's `lines`, since the three read one shared rule. `--area-chart-width` overrides it here. */
|
|
10304
|
+
"--chart-stroke"?: (string) | undefined;
|
|
10246
10305
|
/** How far each avatar sits over the one before it. */
|
|
10247
10306
|
"--avatar-group-overlap"?: (string) | undefined;
|
|
10248
10307
|
/** The separation drawn between one avatar and the next. */
|
|
@@ -10273,7 +10332,7 @@ export type CustomCssProperties = {
|
|
|
10273
10332
|
"--bar-chart-line-color"?: (string) | undefined;
|
|
10274
10333
|
/** Thickness of a `lines` series, over `--chart-stroke`. */
|
|
10275
10334
|
"--bar-chart-line-width"?: (string) | undefined;
|
|
10276
|
-
/**
|
|
10335
|
+
/** How wide an axis column is drawn, in `ch`, from the widest number on it. Written on the axis itself, and only where the categories run along the bottom: turned sideways an axis is a row and takes a line's height instead. */
|
|
10277
10336
|
"--bar-chart-axis"?: (string) | undefined;
|
|
10278
10337
|
/** The color of the secondary axis when one series owns it. It resolves a `--helix-color-series-*` token, so on the headless tier alone it names something that is not there. #138. */
|
|
10279
10338
|
"--bar-chart-secondary"?: (string) | undefined;
|
|
@@ -10685,8 +10744,10 @@ export type CustomCssProperties = {
|
|
|
10685
10744
|
"--legend-swatch-size"?: (string) | undefined;
|
|
10686
10745
|
/** Width of the edge an `outlined` or `subtle` swatch is drawn with. */
|
|
10687
10746
|
"--legend-swatch-stroke"?: (string) | undefined;
|
|
10688
|
-
/**
|
|
10689
|
-
"--chart-
|
|
10747
|
+
/** A fill for the middle of a `ring` terminus, which is otherwise open. One name across this family and Sparkline, the two reading one shared sheet. */
|
|
10748
|
+
"--chart-terminus-hole"?: (string) | undefined;
|
|
10749
|
+
/** Size of the mark on each series' last reading. One name across this family and Sparkline, the two reading one shared sheet. */
|
|
10750
|
+
"--chart-terminus-size"?: (string) | undefined;
|
|
10690
10751
|
/** How much of a line's color its wash takes. */
|
|
10691
10752
|
"--line-chart-area-opacity"?: (string) | undefined;
|
|
10692
10753
|
/** The slot the pointer is resting in. */
|
|
@@ -10699,6 +10760,10 @@ export type CustomCssProperties = {
|
|
|
10699
10760
|
"--line-chart-gridline-color"?: (string) | undefined;
|
|
10700
10761
|
/** Thickness of a line, over `--chart-stroke`. */
|
|
10701
10762
|
"--line-chart-width"?: (string) | undefined;
|
|
10763
|
+
/** Where a series' last reading sits horizontally, as a percentage. Written by the component. */
|
|
10764
|
+
"--chart-terminus-x"?: (string) | undefined;
|
|
10765
|
+
/** Where a series' last reading sits vertically, as a percentage. Written by the component. */
|
|
10766
|
+
"--chart-terminus-y"?: (string) | undefined;
|
|
10702
10767
|
/** Padding inside the row. */
|
|
10703
10768
|
"--list-item-padding"?: (string) | undefined;
|
|
10704
10769
|
/** What the rail cell shows. Written by the list. */
|
|
@@ -11031,10 +11096,6 @@ export type CustomCssProperties = {
|
|
|
11031
11096
|
"--slider-marker-at"?: (string) | undefined;
|
|
11032
11097
|
/** Where the filled span ends, as a percentage of the track. */
|
|
11033
11098
|
"--slider-to"?: (string) | undefined;
|
|
11034
|
-
/** A fill for the middle of a `ring` terminus, which is otherwise open. */
|
|
11035
|
-
"--chart-terminus-hole"?: (string) | undefined;
|
|
11036
|
-
/** Size of the mark on the last reading. */
|
|
11037
|
-
"--chart-terminus-size"?: (string) | undefined;
|
|
11038
11099
|
/** How much of the line's color the wash takes where it meets the line. */
|
|
11039
11100
|
"--sparkline-area-opacity"?: (string) | undefined;
|
|
11040
11101
|
/** Corner radius on a column, under `plot="bar"`. */
|
|
@@ -11049,10 +11110,6 @@ export type CustomCssProperties = {
|
|
|
11049
11110
|
"--sparkline-inline-size"?: (string) | undefined;
|
|
11050
11111
|
/** Thickness of the line, overriding `weight`. */
|
|
11051
11112
|
"--sparkline-width"?: (string) | undefined;
|
|
11052
|
-
/** Where the last point sits horizontally, as a percentage. */
|
|
11053
|
-
"--chart-terminus-x"?: (string) | undefined;
|
|
11054
|
-
/** Where the last point sits vertically, as a percentage. */
|
|
11055
|
-
"--chart-terminus-y"?: (string) | undefined;
|
|
11056
11113
|
/** Edge length of the mark. */
|
|
11057
11114
|
"--speed-dial-item-size"?: (string) | undefined;
|
|
11058
11115
|
/** Space between the actions. */
|
|
@@ -11269,7 +11326,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
11269
11326
|
HelixAppHeaderVueProps,
|
|
11270
11327
|
HelixAppHeaderVueEvents
|
|
11271
11328
|
>;
|
|
11272
|
-
/** The bands take the series palette in order, the first column at the bottom, so a legend beside the chart names them in the order they are stacked. Each band is a pale fill with its top edge drawn at the series' full color. The fills are mixed toward the page rather than made translucent, because the bands overlap where they are drawn and a translucent one would show the others through it. */
|
|
11329
|
+
/** The bands take the series palette in order, the first column at the bottom, so a legend beside the chart names them in the order they are stacked. Each band is a pale fill with its top edge drawn at the series' full color. The fills are mixed toward the page rather than made translucent, because the bands overlap where they are drawn and a translucent one would show the others through it. **No visual axis applies here, and that is the answer rather than a gap.** Both refusals are geometric and both were argued in the stylesheet before they were argued anywhere a reader looks. 'emphasis' is which of a family's two marks carries the reading, and here neither can give way. The fill is the value, a band's thickness being its amount, and the edge is the boundary, which is why it is drawn at full color over a pale fill rather than left to two pale fills meeting. Every point on the axis moves one at the other's expense: 'outlined' thins the fill until the chart is a set of cumulative lines, which is 'LineChart' and is the form this one exists because a reader cannot read shares off; 'solid' takes the fill to the series' own color, which is the edge's color, so the boundary disappears into the band it bounds. 'LineChart' can take the axis because its wash is optional there, 'area' deciding whether one is drawn at all. 'material' is what reads through a mark, and a band cannot let anything through. Each is drawn as everything under its top edge with the next one down covering the rest, so a translucent band shows the bands behind it and reads as a third color that is in no palette. That is 'LineChart''s recorded reason for refusing 'wash', met here from the other side. The strength of a fill is still adjustable and is '--area-chart-fill-strength', which is a continuum rather than an axis and is a theme's business rather than a reader's. */
|
|
11273
11330
|
"helix-area-chart": DefineCustomElement<
|
|
11274
11331
|
HelixAreaChart,
|
|
11275
11332
|
HelixAreaChartVueProps,
|
|
@@ -11593,7 +11650,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
11593
11650
|
HelixLegendVueProps,
|
|
11594
11651
|
HelixLegendVueEvents
|
|
11595
11652
|
>;
|
|
11596
|
-
/** The lines take the series palette in order, so a chart of one is series one and a chart of four is the first four, and a legend beside it maps the same twenty-four. The stroke does not scale with the box. 'preserveAspectRatio="none"' is what lets one drawing fill a narrow card and a wide panel, and without 'vector-effect: non-scaling-stroke' the same line comes out hairline in the first and heavy in the second. It rescues strokes and not geometry, which is why
|
|
11653
|
+
/** The lines take the series palette in order, so a chart of one is series one and a chart of four is the first four, and a legend beside it maps the same twenty-four. The stroke does not scale with the box. 'preserveAspectRatio="none"' is what lets one drawing fill a narrow card and a wide panel, and without 'vector-effect: non-scaling-stroke' the same line comes out hairline in the first and heavy in the second. It rescues strokes and not geometry, which is why nothing inside the drawing marks a reading: a circle in a stretched coordinate space is an ellipse, and there is no vector-effect that answers for a shape. **The last reading of each series is marked, and that is the same rule rather than an exception to it.** 'terminus' draws an HTML element placed over the plot by percentage instead of a shape inside it, so it keeps its shape at any width. It is on by default, as a dot, because the column of marks at the far edge is where a reader looks for "and what is it now". */
|
|
11597
11654
|
"helix-line-chart": DefineCustomElement<
|
|
11598
11655
|
HelixLineChart,
|
|
11599
11656
|
HelixLineChartVueProps,
|
|
@@ -11809,7 +11866,7 @@ export interface WcToolkitVueGlobalComponents {
|
|
|
11809
11866
|
HelixSandboxToolbarVueProps,
|
|
11810
11867
|
HelixSandboxToolbarVueEvents
|
|
11811
11868
|
>;
|
|
11812
|
-
/** The points take the series palette in order, so a table with one column measured up is series one and a table with three is the first three. Each point has a ring of the page around it and stops short of opaque, so a dense cluster reads as dense rather than as one blot, and two points that overlap each keep their edge. */
|
|
11869
|
+
/** The points take the series palette in order, so a table with one column measured up is series one and a table with three is the first three. Each point has a ring of the page around it and stops short of opaque, so a dense cluster reads as dense rather than as one blot, and two points that overlap each keep their edge. **No visual axis applies here, and that is the answer rather than a gap.** Both refusals come out of that sentence, and both were argued in the stylesheet before they were argued anywhere a reader looks. 'emphasis' is how much ink a mark claims, and on a scatter that channel is already carrying data. The points rest at 0.8 so that where they pile up they compound: how dark a region is *is* how many rows are in it, which is most of what a reader is looking at a scatter to see and is the one thing a table of the same numbers hides. 'solid' flattens a dense cluster and a sparse one into the same picture; 'outlined' replaces the pile with overlapping rings, which reads as texture rather than as count. An axis whose two ends each cost the drawing its density is not a treatment, it is a second meaning for a property the chart already spends. 'material' is the same refusal said once more. Translucency is the density channel here, so 'glass' and 'frosted' are two more named stops on a scale the data is using, and a point admitting the page through is a point that counts for less than one. What stays adjustable is '--scatter-chart-point-opacity', and it is a continuum rather than an axis: a chart drawn over a busier ground wants a different resting density, and that is a fact about the ground rather than a claim about the points. */
|
|
11813
11870
|
"helix-scatter-chart": DefineCustomElement<
|
|
11814
11871
|
HelixScatterChart,
|
|
11815
11872
|
HelixScatterChartVueProps,
|