@nvidia-elements/core 0.0.10 → 0.0.11
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/CHANGELOG.md +12 -0
- package/dist/accordion/accordion.examples.json +11 -11
- package/dist/accordion/accordion2.js +4 -4
- package/dist/alert/alert-group2.js +1 -1
- package/dist/alert/alert.examples.json +12 -12
- package/dist/alert/alert2.js +1 -1
- package/dist/avatar/avatar-group2.js +1 -1
- package/dist/avatar/avatar.examples.json +6 -6
- package/dist/avatar/avatar2.js +1 -1
- package/dist/badge/badge.examples.json +12 -12
- package/dist/badge/badge2.js +1 -1
- package/dist/breadcrumb/breadcrumb.examples.json +3 -3
- package/dist/breadcrumb/breadcrumb2.js +1 -1
- package/dist/bundles/index.js +3 -3
- package/dist/button/button.examples.json +24 -24
- package/dist/button/button2.js +1 -1
- package/dist/button-group/button-group.examples.json +11 -11
- package/dist/button-group/button-group2.js +1 -1
- package/dist/card/card.examples.json +10 -10
- package/dist/card/card2.js +4 -4
- package/dist/chat-message/chat-message.examples.json +7 -7
- package/dist/chat-message/chat-message2.js +1 -1
- package/dist/checkbox/checkbox-group2.js +1 -1
- package/dist/checkbox/checkbox.examples.json +7 -7
- package/dist/checkbox/checkbox2.js +1 -1
- package/dist/color/color.examples.json +4 -4
- package/dist/color/color2.js +1 -1
- package/dist/combobox/combobox.examples.json +24 -24
- package/dist/combobox/combobox2.js +1 -1
- package/dist/copy-button/copy-button.examples.json +9 -9
- package/dist/copy-button/copy-button2.js +1 -1
- package/dist/custom-elements.json +13 -71
- package/dist/date/date.examples.json +7 -7
- package/dist/date/date2.js +1 -1
- package/dist/datetime/datetime.examples.json +4 -4
- package/dist/datetime/datetime2.js +1 -1
- package/dist/dialog/dialog-footer2.js +1 -1
- package/dist/dialog/dialog-header2.js +1 -1
- package/dist/dialog/dialog.examples.json +21 -21
- package/dist/dialog/dialog2.js +1 -1
- package/dist/divider/divider.examples.json +5 -5
- package/dist/divider/divider2.js +1 -1
- package/dist/dot/dot.examples.json +5 -5
- package/dist/dot/dot2.js +1 -1
- package/dist/drawer/drawer-content2.js +1 -1
- package/dist/drawer/drawer-footer2.js +1 -1
- package/dist/drawer/drawer-header2.js +1 -1
- package/dist/drawer/drawer.examples.json +13 -13
- package/dist/drawer/drawer2.js +1 -1
- package/dist/dropdown/dropdown-footer2.js +1 -1
- package/dist/dropdown/dropdown-header2.js +1 -1
- package/dist/dropdown/dropdown.examples.json +14 -14
- package/dist/dropdown/dropdown2.js +1 -1
- package/dist/dropdown-group/dropdown-group.examples.json +4 -4
- package/dist/dropdown-group/dropdown-group.js +1 -1
- package/dist/dropzone/dropzone.examples.json +3 -3
- package/dist/dropzone/dropzone2.js +1 -1
- package/dist/file/file.examples.json +3 -3
- package/dist/file/file2.js +1 -1
- package/dist/format-datetime/format-datetime.examples.json +9 -9
- package/dist/format-datetime/format-datetime2.js +1 -1
- package/dist/format-relative-time/format-relative-time.examples.json +7 -7
- package/dist/format-relative-time/format-relative-time2.js +1 -1
- package/dist/forms/actions.examples.json +3 -3
- package/dist/forms/control/control.examples.json +11 -11
- package/dist/forms/control/control2.js +1 -1
- package/dist/forms/control-group/control-group2.js +1 -1
- package/dist/forms/control-message/control-message2.js +1 -1
- package/dist/forms/forms.examples.json +8 -8
- package/dist/forms/validation.examples.json +5 -5
- package/dist/grid/cell/cell2.js +1 -1
- package/dist/grid/column/column2.js +1 -1
- package/dist/grid/footer/footer2.js +1 -1
- package/dist/grid/grid.examples.json +43 -43
- package/dist/grid/grid2.js +1 -1
- package/dist/grid/header/header2.js +2 -2
- package/dist/grid/header/header2.js.map +1 -1
- package/dist/grid/placeholder/placeholder2.js +1 -1
- package/dist/grid/row/row2.js +1 -1
- package/dist/icon/icon.examples.json +8 -8
- package/dist/icon/icon2.js +2 -2
- package/dist/icon-button/icon-button.examples.json +13 -13
- package/dist/icon-button/icon-button2.js +1 -1
- package/dist/index.js +1 -1
- package/dist/input/input-group.examples.json +2 -2
- package/dist/input/input-group2.js +1 -1
- package/dist/input/input.examples.json +8 -8
- package/dist/input/input2.js +1 -1
- package/dist/internal/controllers/i18n.controller.examples.json +1 -1
- package/dist/internal/controllers/keynav-grid.controller.examples.json +2 -2
- package/dist/internal/controllers/keynav-grid.controller.js +15 -7
- package/dist/internal/controllers/keynav-grid.controller.js.map +1 -1
- package/dist/internal/controllers/keynav-list.controller.examples.json +4 -4
- package/dist/internal/controllers/keynav-list.controller.js +11 -5
- package/dist/internal/controllers/keynav-list.controller.js.map +1 -1
- package/dist/internal/controllers/popover.examples.json +8 -8
- package/dist/internal/controllers/type-button.controller.examples.json +1 -1
- package/dist/internal/controllers/type-popover.controller.examples.json +2 -2
- package/dist/internal/controllers/type-touch.controller.examples.json +1 -1
- package/dist/internal/services/global.service.js +1 -1
- package/dist/logo/logo.examples.json +6 -6
- package/dist/logo/logo2.js +1 -1
- package/dist/menu/menu-item2.js +1 -1
- package/dist/menu/menu.examples.json +15 -15
- package/dist/menu/menu2.js +1 -1
- package/dist/month/month.examples.json +4 -4
- package/dist/month/month2.js +1 -1
- package/dist/notification/notification-group2.js +1 -1
- package/dist/notification/notification.examples.json +15 -15
- package/dist/notification/notification2.js +1 -1
- package/dist/page/page-panel/page-panel-content2.js +1 -1
- package/dist/page/page-panel/page-panel-footer2.js +1 -1
- package/dist/page/page-panel/page-panel-header2.js +1 -1
- package/dist/page/page-panel/page-panel2.js +1 -1
- package/dist/page/page.examples.js.map +1 -1
- package/dist/page/page.examples.json +36 -34
- package/dist/page/page2.js +1 -1
- package/dist/page-header/page-header.examples.json +9 -9
- package/dist/page-header/page-header2.js +1 -1
- package/dist/page-loader/page-loader.examples.json +2 -2
- package/dist/page-loader/page-loader2.js +1 -1
- package/dist/pagination/pagination.examples.json +16 -16
- package/dist/pagination/pagination2.js +1 -1
- package/dist/panel/panel.examples.json +7 -7
- package/dist/panel/panel2.js +4 -4
- package/dist/password/password.examples.json +3 -3
- package/dist/password/password2.js +1 -1
- package/dist/preferences-input/preferences-input.examples.json +3 -3
- package/dist/preferences-input/preferences-input2.js +1 -1
- package/dist/progress-bar/progress-bar.examples.json +8 -8
- package/dist/progress-bar/progress-bar2.js +1 -1
- package/dist/progress-ring/progress-ring.examples.json +8 -8
- package/dist/progress-ring/progress-ring2.js +1 -1
- package/dist/progressive-filter-chip/progressive-filter-chip.examples.json +7 -7
- package/dist/progressive-filter-chip/progressive-filter-chip2.js +1 -1
- package/dist/pulse/pulse.examples.json +4 -4
- package/dist/pulse/pulse2.js +1 -1
- package/dist/radio/radio-group2.js +1 -1
- package/dist/radio/radio.examples.json +5 -5
- package/dist/radio/radio2.js +1 -1
- package/dist/range/range.examples.json +9 -9
- package/dist/range/range2.js +1 -1
- package/dist/resize-handle/resize-handle.examples.json +7 -7
- package/dist/resize-handle/resize-handle2.js +1 -1
- package/dist/search/search.examples.json +5 -5
- package/dist/search/search2.js +1 -1
- package/dist/select/select.examples.json +18 -18
- package/dist/select/select2.js +1 -1
- package/dist/skeleton/skeleton.examples.json +4 -4
- package/dist/skeleton/skeleton2.js +1 -1
- package/dist/sort-button/sort-button.examples.json +3 -3
- package/dist/sort-button/sort-button2.js +1 -1
- package/dist/sparkline/sparkline.examples.json +13 -13
- package/dist/sparkline/sparkline.utils.d.ts +26 -5
- package/dist/sparkline/sparkline.utils.js +30 -30
- package/dist/sparkline/sparkline.utils.js.map +1 -1
- package/dist/sparkline/sparkline2.js +21 -6
- package/dist/sparkline/sparkline2.js.map +1 -1
- package/dist/star-rating/star-rating.examples.json +4 -4
- package/dist/star-rating/star-rating2.js +1 -1
- package/dist/steps/steps.examples.json +5 -5
- package/dist/steps/steps2.js +2 -2
- package/dist/switch/switch-group2.js +1 -1
- package/dist/switch/switch.examples.json +7 -7
- package/dist/switch/switch2.js +1 -1
- package/dist/tabs/tabs-group2.js +9 -6
- package/dist/tabs/tabs-group2.js.map +1 -1
- package/dist/tabs/tabs.examples.json +14 -14
- package/dist/tabs/tabs2.js +2 -2
- package/dist/tag/tag.examples.json +8 -8
- package/dist/tag/tag2.js +1 -1
- package/dist/textarea/textarea.examples.json +5 -5
- package/dist/textarea/textarea2.js +1 -1
- package/dist/time/time.examples.json +4 -4
- package/dist/time/time2.js +1 -1
- package/dist/toast/toast.examples.json +11 -11
- package/dist/toast/toast2.js +1 -1
- package/dist/toggletip/toggletip-footer2.js +1 -1
- package/dist/toggletip/toggletip-header2.js +1 -1
- package/dist/toggletip/toggletip.examples.json +12 -12
- package/dist/toggletip/toggletip2.js +1 -1
- package/dist/toolbar/toolbar.examples.json +8 -8
- package/dist/toolbar/toolbar2.js +1 -1
- package/dist/tooltip/tooltip.examples.json +22 -22
- package/dist/tooltip/tooltip2.js +1 -1
- package/dist/tree/tree-node2.js +1 -1
- package/dist/tree/tree.examples.json +13 -13
- package/dist/tree/tree2.js +1 -1
- package/dist/week/week.examples.json +5 -5
- package/dist/week/week2.js +1 -1
- package/package.json +3 -3
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"entrypoint": "@nvidia-elements/core/sort-button/sort-button.examples.json",
|
|
4
4
|
"items": [
|
|
5
5
|
{
|
|
6
|
-
"id": "
|
|
6
|
+
"id": "sort-button",
|
|
7
7
|
"name": "Default",
|
|
8
8
|
"template": "<nve-sort-button></nve-sort-button>\n",
|
|
9
9
|
"summary": "Basic sort button in its default unsorted state for column header sorting controls.",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"tags": []
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"id": "
|
|
15
|
+
"id": "sort-button-light-theme",
|
|
16
16
|
"name": "LightTheme",
|
|
17
17
|
"template": "<div nve-theme=\"root light\" nve-layout=\"row gap:md pad:md align:wrap\">\n <nve-sort-button></nve-sort-button>\n <nve-sort-button sort=\"ascending\"></nve-sort-button>\n <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n",
|
|
18
18
|
"summary": "Sort button states (unsorted, ascending, descending) displayed on light theme background.",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"id": "
|
|
26
|
+
"id": "sort-button-dark-theme",
|
|
27
27
|
"name": "DarkTheme",
|
|
28
28
|
"template": "<div nve-theme=\"root dark\" nve-layout=\"row gap:md pad:md align:wrap\">\n <nve-sort-button></nve-sort-button>\n <nve-sort-button sort=\"ascending\"></nve-sort-button>\n <nve-sort-button sort=\"descending\"></nve-sort-button>\n</div>\n",
|
|
29
29
|
"summary": "Sort button states (unsorted, ascending, descending) displayed on dark theme background.",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"entrypoint": "@nvidia-elements/core/sparkline/sparkline.examples.json",
|
|
4
4
|
"items": [
|
|
5
5
|
{
|
|
6
|
-
"id": "
|
|
6
|
+
"id": "sparkline",
|
|
7
7
|
"name": "Default",
|
|
8
8
|
"template": "<nve-sparkline id=\"default\"></nve-sparkline>\n<script type=\"module\">\n const sparkline = document.querySelector(\"nve-sparkline#default\");\n sparkline.data = [18, 22, 20, 24, 19, 28, 25, 30];\n</script>\n",
|
|
9
9
|
"summary": "Basic sparkline from numeric array values. Use as a compact trend indicator.",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"tags": []
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"id": "
|
|
15
|
+
"id": "sparkline-marks",
|
|
16
16
|
"name": "Marks",
|
|
17
17
|
"template": "<div nve-layout=\"row gap:md\">\n <nve-sparkline data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n <nve-sparkline mark=\"area\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n <nve-sparkline mark=\"gradient\" data=\"[14, 18, 17, 20, 19, 24, 21]\"></nve-sparkline>\n <nve-sparkline mark=\"column\" data=\"[6, 10, 8, 16, 13, 18, 15]\"></nve-sparkline>\n <nve-sparkline mark=\"winloss\" data=\"[5, -3, 2, -1, 4, 0, 3]\"></nve-sparkline>\n</div>\n",
|
|
18
18
|
"summary": "Mark variants include line, area, gradient, column, and winloss to support trend and outcome signals.",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"tags": []
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
"id": "
|
|
24
|
+
"id": "sparkline-status",
|
|
25
25
|
"name": "Status",
|
|
26
26
|
"template": "<div nve-layout=\"row gap:md\">\n <nve-sparkline status=\"accent\" mark=\"area\" data=\"[3, 2, 10, 8, 4, 6, 9]\"></nve-sparkline>\n <nve-sparkline status=\"danger\" mark=\"area\" data=\"[15, 14, 12, 9, 8, 7, 5]\"></nve-sparkline>\n <nve-sparkline status=\"warning\" mark=\"area\" data=\"[8, 9, 7, 10, 9, 8, 9]\"></nve-sparkline>\n <nve-sparkline status=\"success\" mark=\"area\" data=\"[5, 7, 8, 9, 12, 14, 15]\"></nve-sparkline>\n</div>\n",
|
|
27
27
|
"summary": "Semantic statuses apply task, support, and trend color mappings.",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"tags": []
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
"id": "
|
|
33
|
+
"id": "sparkline-inline-with-text",
|
|
34
34
|
"name": "InlineWithText",
|
|
35
35
|
"template": "<div nve-layout=\"column gap:lg\">\n <p nve-text=\"body loose\">\n This week's lane keeping safety score trend\n <nve-sparkline\n mark=\"area\"\n status=\"success\"\n data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n aria-label=\"lane keeping safety score trend\"\n ></nve-sparkline>\n shows a steady rise after an early dip, with decreasing interventions per shift:\n <nve-sparkline\n mark=\"column\"\n status=\"accent\"\n data=\"[16, 14, 15, 13, 12, 11, 10]\"\n aria-label=\"lane keeping interventions per shift\"\n ></nve-sparkline\n >, and predominantly successful route outcomes:\n <nve-sparkline\n mark=\"winloss\"\n status=\"success\"\n data=\"[1, 1, -1, 1, 0, 1, 1]\"\n aria-label=\"lane keeping route outcomes\"\n ></nve-sparkline\n >.\n </p>\n</div>\n",
|
|
36
36
|
"summary": "Sparklines inherit font size and flow inline with surrounding text and metrics.",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"tags": []
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
|
-
"id": "
|
|
42
|
+
"id": "sparkline-data-grid",
|
|
43
43
|
"name": "DataGrid",
|
|
44
44
|
"template": "<nve-grid>\n <nve-grid-header>\n <nve-grid-column>Autonomy Service</nve-grid-column>\n <nve-grid-column>Safety Score</nve-grid-column>\n <nve-grid-column>Interventions / Shift</nve-grid-column>\n <nve-grid-column>Route Outcome</nve-grid-column>\n </nve-grid-header>\n <nve-grid-row>\n <nve-grid-cell>Lane Keeping</nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Lane Keeping 30 day safety score trend\"\n mark=\"area\"\n status=\"success\"\n min=\"0\"\n max=\"100\"\n data=\"[86, 87, 86, 88, 89, 90, 92, 93]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Lane Keeping interventions per shift\"\n mark=\"column\"\n status=\"success\"\n min=\"0\"\n max=\"50\"\n data=\"[12, 11, 12, 10, 9, 8, 7, 6]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Lane Keeping route outcomes\"\n mark=\"winloss\"\n data=\"[1, 1, 1, 0, 1, 0, 1, 1]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n </nve-grid-row>\n <nve-grid-row>\n <nve-grid-cell>Object Detection</nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Object Detection 30 day safety score trend\"\n mark=\"area\"\n status=\"warning\"\n min=\"0\"\n max=\"100\"\n data=\"[76, 88, 72, 79, 85, 70, 83, 74]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Object Detection interventions per shift\"\n mark=\"column\"\n status=\"warning\"\n min=\"0\"\n max=\"50\"\n data=\"[18, 20, 17, 19, 20, 21, 19, 22]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Object Detection route outcomes\"\n mark=\"winloss\"\n data=\"[1, 0, -1, 1, 0, -1, 0, 1]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n </nve-grid-row>\n <nve-grid-row>\n <nve-grid-cell>Path Planning</nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Path Planning 30 day safety score trend\"\n mark=\"area\"\n status=\"danger\"\n min=\"0\"\n max=\"100\"\n data=\"[58, 54, 49, 45, 40, 36, 31, 27]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Path Planning interventions per shift\"\n mark=\"column\"\n status=\"danger\"\n min=\"0\"\n max=\"50\"\n data=\"[24, 26, 29, 31, 34, 36, 39, 42]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n <nve-grid-cell>\n <nve-sparkline\n aria-label=\"Path Planning route outcomes\"\n mark=\"winloss\"\n data=\"[1, -1, 0, -1, -1, -1, 0, -1]\"\n size=\"md\"\n ></nve-sparkline>\n </nve-grid-cell>\n </nve-grid-row>\n</nve-grid>\n",
|
|
45
45
|
"summary": "Embed sparklines in grid cells to add compact trend context to tabular data.",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"tags": []
|
|
49
49
|
},
|
|
50
50
|
{
|
|
51
|
-
"id": "
|
|
51
|
+
"id": "sparkline-explicit-size",
|
|
52
52
|
"name": "ExplicitSize",
|
|
53
53
|
"template": "<div id=\"sparkline-sizes\" nve-layout=\"row gap:md\">\n <nve-sparkline size=\"xs\"></nve-sparkline>\n <nve-sparkline size=\"sm\"></nve-sparkline>\n <nve-sparkline size=\"md\"></nve-sparkline>\n <nve-sparkline size=\"lg\"></nve-sparkline>\n <nve-sparkline size=\"xl\"></nve-sparkline>\n</div>\n<script type=\"module\">\n const sparklines = document.querySelectorAll(\"#sparkline-sizes > nve-sparkline\");\n for (const sparkline of sparklines) {\n sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n }\n</script>\n",
|
|
54
54
|
"summary": "Explicit size tokens set fixed sparkline height independent of text context.",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"tags": []
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
|
-
"id": "
|
|
60
|
+
"id": "sparkline-default-size",
|
|
61
61
|
"name": "DefaultSize",
|
|
62
62
|
"template": "<div id=\"inline-sparkline-sizes\" nve-layout=\"column gap:md\">\n <div nve-layout=\"row gap:sm\" nve-text=\"heading\">\n <span>heading</span>\n <nve-sparkline></nve-sparkline>\n </div>\n <div nve-layout=\"row gap:sm\" nve-text=\"body\">\n <span>body</span>\n <nve-sparkline></nve-sparkline>\n </div>\n <div nve-layout=\"row gap:sm\" nve-text=\"label sm\">\n <span>label sm</span>\n <nve-sparkline></nve-sparkline>\n </div>\n</div>\n<script type=\"module\">\n const sparklines = document.querySelectorAll(\"#inline-sparkline-sizes > div[nve-text] > nve-sparkline\");\n for (const sparkline of sparklines) {\n sparkline.data = [9, 12, 11, 13, 15, 14, 16];\n }\n</script>\n",
|
|
63
63
|
"summary": "Without a size attribute, height scales with the parent text size for typographic alignment.",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"tags": []
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
|
-
"id": "
|
|
69
|
+
"id": "sparkline-interpolation",
|
|
70
70
|
"name": "Interpolation",
|
|
71
71
|
"template": "<div id=\"sparkline-interpolations\" nve-layout=\"row gap:md\">\n <nve-sparkline mark=\"area\" interpolation=\"linear\"></nve-sparkline>\n <nve-sparkline mark=\"area\" interpolation=\"smooth\"></nve-sparkline>\n <nve-sparkline mark=\"area\" interpolation=\"step\"></nve-sparkline>\n</div>\n<script type=\"module\">\n const sparklines = document.querySelectorAll(\"#sparkline-interpolations > nve-sparkline\");\n for (const sparkline of sparklines) {\n sparkline.data = [6, 10, 8, 16, 13, 18, 15];\n }\n</script>\n",
|
|
72
72
|
"summary": "Interpolation controls linear, smooth, or step transitions between points.",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"tags": []
|
|
76
76
|
},
|
|
77
77
|
{
|
|
78
|
-
"id": "
|
|
78
|
+
"id": "sparkline-symbols",
|
|
79
79
|
"name": "Symbols",
|
|
80
80
|
"template": "<div id=\"sparkline-symbols\" nve-layout=\"row gap:md\">\n <nve-sparkline denote-last></nve-sparkline>\n <nve-sparkline denote-first denote-last></nve-sparkline>\n <nve-sparkline denote-min denote-max></nve-sparkline>\n</div>\n<script type=\"module\">\n const sparklines = document.querySelectorAll(\"#sparkline-symbols > nve-sparkline\");\n for (const sparkline of sparklines) {\n sparkline.data = [12, 8, 15, 10, 18, 14, 11];\n }\n</script>\n",
|
|
81
81
|
"summary": "Symbols denote specific data points in line, area, and gradient marks.",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"tags": []
|
|
85
85
|
},
|
|
86
86
|
{
|
|
87
|
-
"id": "
|
|
87
|
+
"id": "sparkline-fixed-data-domain",
|
|
88
88
|
"name": "FixedDataDomain",
|
|
89
89
|
"template": "<div nve-layout=\"column gap:md align:left\" nve-text=\"body lg\">\n <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[80, 85, 90, 95, 100]\"></nve-sparkline>\n <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[40, 45, 50, 55, 60]\"></nve-sparkline>\n <nve-sparkline min=\"0\" max=\"100\" mark=\"area\" status=\"accent\" data=\"[0, 5, 10, 15, 20]\"></nve-sparkline>\n</div>\n",
|
|
90
90
|
"summary": "Fixed min and max values define a shared vertical domain to ensure comparability across adjacent sparklines.",
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
"tags": []
|
|
94
94
|
},
|
|
95
95
|
{
|
|
96
|
-
"id": "
|
|
96
|
+
"id": "sparkline-zero-line",
|
|
97
97
|
"name": "ZeroLine",
|
|
98
98
|
"template": "<div nve-layout=\"row gap:md\">\n <nve-sparkline aria-label=\"mixed values\" mark=\"area\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n <nve-sparkline aria-label=\"mostly negative values\" mark=\"gradient\" data=\"[-8, -5, -2, 1, -3, -6, -4]\"></nve-sparkline>\n <nve-sparkline aria-label=\"mixed values column\" mark=\"column\" data=\"[-3, 2, 5, -1, 3, -2, 4]\"></nve-sparkline>\n</div>\n",
|
|
99
99
|
"summary": "The chart renders a zero baseline when the data includes both positive and negative values.",
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
"tags": []
|
|
103
103
|
},
|
|
104
104
|
{
|
|
105
|
-
"id": "
|
|
105
|
+
"id": "sparkline-interval-length",
|
|
106
106
|
"name": "IntervalLength",
|
|
107
107
|
"template": "<div id=\"sparkline-intervals\" nve-layout=\"row gap:md\">\n <nve-sparkline interval-length=\"0.3\"></nve-sparkline>\n <nve-sparkline interval-length=\"0.6\"></nve-sparkline>\n <nve-sparkline interval-length=\"2.0\"></nve-sparkline>\n</div>\n<script type=\"module\">\n const sparklines = document.querySelectorAll(\"#sparkline-intervals > nve-sparkline\");\n for (const sparkline of sparklines) {\n sparkline.data = [10, 20, 15, 25, 18];\n }\n</script>\n",
|
|
108
108
|
"summary": "Interval length adjusts spacing between points for line marks, from compact to spacious.",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"tags": []
|
|
112
112
|
},
|
|
113
113
|
{
|
|
114
|
-
"id": "
|
|
114
|
+
"id": "sparkline-custom-styling",
|
|
115
115
|
"name": "CustomStyling",
|
|
116
116
|
"template": "<nve-sparkline\n aria-label=\"custom sparkline\"\n mark=\"gradient\"\n interpolation=\"smooth\"\n data=\"[8, 14, 9, 17, 13, 21, 16]\"\n denote-last\n style=\"\n --height: 120px;\n --accent-color: var(--nve-sys-layer-canvas-background);\n --accent-radius: 5px;\n --accent-border-width: 3px;\n --line-width: 2.5px;\n --line-color: var(--nve-ref-color-blue-cobalt-1100);\n --gradient-max-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100) 45%, transparent);\n --gradient-min-color: color-mix(in oklab, var(--nve-ref-color-blue-cobalt-1100), transparent 90%);\n \"\n></nve-sparkline>\n",
|
|
117
117
|
"summary": "CSS custom properties are available to adjust dimensions and visual styling.",
|
|
@@ -4,14 +4,35 @@ export declare const VIEW_HEIGHT = 100;
|
|
|
4
4
|
export declare const DEFAULT_INTERVAL_LENGTH_EM = 0.6;
|
|
5
5
|
export declare function toValidData(data: unknown): number[];
|
|
6
6
|
export declare function calculateViewBox(mark: SparklineMark, pointCount: number, intervalLength?: number): Dimensions;
|
|
7
|
-
export declare function calculateDomain(values: number[],
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
export declare function calculateDomain(values: number[], options?: {
|
|
8
|
+
explicitMin?: number;
|
|
9
|
+
explicitMax?: number;
|
|
10
|
+
includeZero?: boolean;
|
|
11
|
+
}): Scale | undefined;
|
|
12
|
+
export declare function valueToY(value: number, range: {
|
|
13
|
+
min: number;
|
|
14
|
+
max: number;
|
|
15
|
+
}, viewHeight?: number): number;
|
|
16
|
+
export declare function toPlotPoints(values: number[], range: {
|
|
17
|
+
min: number;
|
|
18
|
+
max: number;
|
|
19
|
+
}, view: {
|
|
20
|
+
width: number;
|
|
21
|
+
height?: number;
|
|
22
|
+
}): Point[];
|
|
23
|
+
export declare function calculateSymbolIndices(values: number[], denote: {
|
|
24
|
+
first: boolean;
|
|
25
|
+
last: boolean;
|
|
26
|
+
min: boolean;
|
|
27
|
+
max: boolean;
|
|
28
|
+
}): Set<number>;
|
|
11
29
|
export declare function toInterpolation(interpolation: unknown): Interpolation;
|
|
12
30
|
export declare function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string;
|
|
13
31
|
export declare function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight?: number): string;
|
|
14
32
|
export declare function toColumnRects(points: Point[], baselineY: number, width: number): Rect[];
|
|
15
|
-
export declare function toWinLossRects(values: number[], baselineY: number,
|
|
33
|
+
export declare function toWinLossRects(values: number[], baselineY: number, dimensions: {
|
|
34
|
+
width: number;
|
|
35
|
+
height: number;
|
|
36
|
+
}): (Rect & {
|
|
16
37
|
className: 'win' | 'loss' | 'draw';
|
|
17
38
|
})[];
|
|
@@ -9,32 +9,32 @@ function a(n, r, i = e) {
|
|
|
9
9
|
height: 100
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
|
-
function o(e, t
|
|
12
|
+
function o(e, t = {}) {
|
|
13
13
|
if (e.length === 0) return;
|
|
14
|
-
let i = Math.min(...e),
|
|
14
|
+
let { explicitMin: n, explicitMax: r, includeZero: i = !1 } = t, a = Math.min(...e), o = Math.max(...e);
|
|
15
15
|
return {
|
|
16
|
-
min:
|
|
17
|
-
max:
|
|
16
|
+
min: n ?? (i ? Math.min(a, 0) : a),
|
|
17
|
+
max: r ?? (i ? Math.max(o, 0) : o)
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
|
-
function s(e, t, n
|
|
21
|
-
let
|
|
22
|
-
return
|
|
20
|
+
function s(e, t, n = 100) {
|
|
21
|
+
let r = t.max - t.min;
|
|
22
|
+
return r === 0 ? n / 2 : n - (e - t.min) / r * n;
|
|
23
23
|
}
|
|
24
|
-
function c(e, t, n
|
|
25
|
-
let
|
|
26
|
-
return e.map((e,
|
|
27
|
-
x:
|
|
28
|
-
y: s(e, t,
|
|
24
|
+
function c(e, t, n) {
|
|
25
|
+
let r = n.height ?? 100, i = e.length > 1 ? n.width / (e.length - 1) : 0;
|
|
26
|
+
return e.map((e, n) => ({
|
|
27
|
+
x: n * i,
|
|
28
|
+
y: s(e, t, r)
|
|
29
29
|
}));
|
|
30
30
|
}
|
|
31
|
-
function l(e, t
|
|
32
|
-
let
|
|
33
|
-
if (e.length === 0 || (t &&
|
|
34
|
-
let
|
|
35
|
-
return e.forEach((e,
|
|
36
|
-
|
|
37
|
-
}),
|
|
31
|
+
function l(e, t) {
|
|
32
|
+
let n = /* @__PURE__ */ new Set();
|
|
33
|
+
if (e.length === 0 || (t.first && n.add(0), t.last && n.add(e.length - 1), !(t.min || t.max))) return n;
|
|
34
|
+
let r = Math.min(...e), i = Math.max(...e);
|
|
35
|
+
return e.forEach((e, a) => {
|
|
36
|
+
t.min && e === r && n.add(a), t.max && e === i && n.add(a);
|
|
37
|
+
}), n;
|
|
38
38
|
}
|
|
39
39
|
function u(e) {
|
|
40
40
|
switch (e) {
|
|
@@ -87,28 +87,28 @@ function p(e, t, r) {
|
|
|
87
87
|
};
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
|
-
function m(e, t, n
|
|
91
|
-
let { bandSize:
|
|
90
|
+
function m(e, t, n) {
|
|
91
|
+
let { bandSize: i, stepSize: a } = v(e.length, n.width, r), o = n.height / 2;
|
|
92
92
|
return e.map((e, n) => {
|
|
93
|
-
let r = n *
|
|
93
|
+
let r = n * a + (a - i) / 2;
|
|
94
94
|
return e > 0 ? {
|
|
95
95
|
className: "win",
|
|
96
96
|
x: r,
|
|
97
|
-
y: t -
|
|
98
|
-
width:
|
|
99
|
-
height:
|
|
97
|
+
y: t - o,
|
|
98
|
+
width: i,
|
|
99
|
+
height: o
|
|
100
100
|
} : e < 0 ? {
|
|
101
101
|
className: "loss",
|
|
102
102
|
x: r,
|
|
103
103
|
y: t,
|
|
104
|
-
width:
|
|
105
|
-
height:
|
|
104
|
+
width: i,
|
|
105
|
+
height: o
|
|
106
106
|
} : {
|
|
107
107
|
className: "draw",
|
|
108
108
|
x: r,
|
|
109
|
-
y: t -
|
|
110
|
-
width:
|
|
111
|
-
height:
|
|
109
|
+
y: t - o / 4,
|
|
110
|
+
width: i,
|
|
111
|
+
height: o / 2
|
|
112
112
|
};
|
|
113
113
|
});
|
|
114
114
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nexport const DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n explicitMin?: number,\n explicitMax?: number,\n includeZero = false\n): Scale | undefined {\n if (values.length === 0) return undefined;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, min: number, max: number, viewHeight = VIEW_HEIGHT): number {\n const range = max - min;\n if (range === 0) return viewHeight / 2;\n return viewHeight - ((value - min) / range) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n min: number,\n max: number,\n viewWidth: number,\n viewHeight = VIEW_HEIGHT\n): Point[] {\n const stepX = values.length > 1 ? viewWidth / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, min, max, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denoteFirst: boolean,\n denoteLast: boolean,\n denoteMin: boolean,\n denoteMax: boolean\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denoteFirst) indices.add(0);\n if (denoteLast) indices.add(values.length - 1);\n\n const needsExtrema = denoteMin || denoteMax;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denoteMin && value === min) indices.add(index);\n if (denoteMax && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n width: number,\n height: number\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(values.length, width, WINLOSS_GAP_RATIO);\n const barHeight = height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline.utils.js","names":[],"sources":["../../src/sparkline/sparkline.utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { Dimensions, Interpolation, Point, Rect, Scale, SparklineMark } from '@nvidia-elements/core/internal';\n\nexport const PRECISION = 2;\nexport const VIEW_HEIGHT = 100;\nexport const DEFAULT_INTERVAL_LENGTH_EM = 0.6;\n\nconst HORIZONTAL_UNIT_WIDTH = VIEW_HEIGHT * DEFAULT_INTERVAL_LENGTH_EM;\nconst COLUMN_GAP_RATIO = 0.7;\nconst WINLOSS_GAP_RATIO = 0.85;\n\nexport function toValidData(data: unknown): number[] {\n if (!Array.isArray(data)) return [];\n return data.filter(Number.isFinite);\n}\n\nexport function calculateViewBox(\n mark: SparklineMark,\n pointCount: number,\n intervalLength = DEFAULT_INTERVAL_LENGTH_EM\n): Dimensions {\n const isIntervalBased = mark === 'line' || mark === 'area' || mark === 'gradient';\n const widthUnitCount = isIntervalBased ? Math.max(pointCount - 1, 1) : pointCount;\n const normalizedIntervalLength =\n Number.isFinite(intervalLength) && intervalLength > 0 ? intervalLength : DEFAULT_INTERVAL_LENGTH_EM;\n const width =\n mark === 'line' ? widthUnitCount * VIEW_HEIGHT * normalizedIntervalLength : widthUnitCount * HORIZONTAL_UNIT_WIDTH;\n\n return {\n width,\n height: VIEW_HEIGHT\n };\n}\n\nexport function calculateDomain(\n values: number[],\n options: { explicitMin?: number; explicitMax?: number; includeZero?: boolean } = {}\n): Scale | undefined {\n if (values.length === 0) return undefined;\n const { explicitMin, explicitMax, includeZero = false } = options;\n\n const dataMinimum = Math.min(...values);\n const dataMaximum = Math.max(...values);\n\n return {\n min: explicitMin ?? (includeZero ? Math.min(dataMinimum, 0) : dataMinimum),\n max: explicitMax ?? (includeZero ? Math.max(dataMaximum, 0) : dataMaximum)\n };\n}\n\nexport function valueToY(value: number, range: { min: number; max: number }, viewHeight = VIEW_HEIGHT): number {\n const span = range.max - range.min;\n if (span === 0) return viewHeight / 2;\n return viewHeight - ((value - range.min) / span) * viewHeight;\n}\n\nexport function toPlotPoints(\n values: number[],\n range: { min: number; max: number },\n view: { width: number; height?: number }\n): Point[] {\n const viewHeight = view.height ?? VIEW_HEIGHT;\n const stepX = values.length > 1 ? view.width / (values.length - 1) : 0;\n return values.map((value, index) => ({\n x: index * stepX,\n y: valueToY(value, range, viewHeight)\n }));\n}\n\nexport function calculateSymbolIndices(\n values: number[],\n denote: { first: boolean; last: boolean; min: boolean; max: boolean }\n): Set<number> {\n const indices = new Set<number>();\n if (values.length === 0) return indices;\n\n if (denote.first) indices.add(0);\n if (denote.last) indices.add(values.length - 1);\n\n const needsExtrema = denote.min || denote.max;\n if (!needsExtrema) return indices;\n\n const min = Math.min(...values);\n const max = Math.max(...values);\n\n values.forEach((value, index) => {\n if (denote.min && value === min) indices.add(index);\n if (denote.max && value === max) indices.add(index);\n });\n\n return indices;\n}\n\nexport function toInterpolation(interpolation: unknown): Interpolation {\n switch (interpolation) {\n case 'linear':\n return 'linear';\n case 'smooth':\n return 'smooth';\n case 'step':\n return 'step';\n default: {\n return 'linear';\n }\n }\n}\n\nexport function toLinePath(points: Point[], interpolation: Interpolation, viewWidth: number): string {\n if (points.length === 0) return '';\n if (points.length === 1) {\n const y = points[0]!.y.toFixed(PRECISION);\n return `M 0 ${y} L ${viewWidth.toFixed(PRECISION)} ${y}`;\n }\n\n switch (interpolation) {\n case 'step':\n return toStepOpenPath(points);\n case 'smooth':\n return toSmoothOpenPath(points);\n case 'linear':\n return toLinearOpenPath(points);\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n}\n\nexport function toAreaPath(points: Point[], interpolation: Interpolation, viewHeight = VIEW_HEIGHT): string {\n if (points.length === 0) return '';\n\n let openPath = '';\n switch (interpolation) {\n case 'step':\n openPath = toStepOpenPath(points);\n break;\n case 'smooth':\n openPath = toSmoothOpenPath(points);\n break;\n case 'linear':\n openPath = toLinearOpenPath(points);\n break;\n default: {\n const exhaustiveCheck: never = interpolation;\n throw new Error(`Unhandled interpolation: ${exhaustiveCheck}`);\n }\n }\n\n const last = points[points.length - 1]!;\n const first = points[0]!;\n openPath += ` L ${last.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)}`;\n openPath += ` L ${first.x.toFixed(PRECISION)} ${viewHeight.toFixed(PRECISION)} Z`;\n return openPath;\n}\n\nexport function toColumnRects(points: Point[], baselineY: number, width: number): Rect[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(points.length, width, COLUMN_GAP_RATIO);\n\n return points.map((point, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n const height = Math.abs(point.y - baselineY);\n const y = Math.min(point.y, baselineY);\n return { x, y, width: bandWidth, height };\n });\n}\n\nexport function toWinLossRects(\n values: number[],\n baselineY: number,\n dimensions: { width: number; height: number }\n): (Rect & { className: 'win' | 'loss' | 'draw' })[] {\n const { bandSize: bandWidth, stepSize: stepX } = calculateBandSizing(\n values.length,\n dimensions.width,\n WINLOSS_GAP_RATIO\n );\n const barHeight = dimensions.height / 2;\n\n return values.map((value, index) => {\n const x = index * stepX + (stepX - bandWidth) / 2;\n\n if (value > 0) {\n return { className: 'win', x, y: baselineY - barHeight, width: bandWidth, height: barHeight };\n }\n\n if (value < 0) {\n return { className: 'loss', x, y: baselineY, width: bandWidth, height: barHeight };\n }\n\n return {\n className: 'draw',\n x,\n y: baselineY - barHeight / 4,\n width: bandWidth,\n height: barHeight / 2\n };\n });\n}\n\nfunction toLinearOpenPath(points: Point[]): string {\n return points.reduce((path, point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n return `${path} L ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }, '');\n}\n\nfunction toSmoothOpenPath(points: Point[]): string {\n const segments = points.map((point, index) => {\n if (index === 0) {\n return `M ${point.x.toFixed(PRECISION)} ${point.y.toFixed(PRECISION)}`;\n }\n const previous = points[index - 1]!;\n const deltaX = (point.x - previous.x) / 3;\n const p = PRECISION;\n return `C ${(previous.x + deltaX).toFixed(p)} ${previous.y.toFixed(p)} ${(point.x - deltaX).toFixed(p)} ${point.y.toFixed(p)} ${point.x.toFixed(p)} ${point.y.toFixed(p)}`;\n });\n return segments.join(' ');\n}\n\nfunction toStepOpenPath(points: Point[]): string {\n let path = `M ${points[0]!.x.toFixed(PRECISION)} ${points[0]!.y.toFixed(PRECISION)}`;\n for (let index = 1; index < points.length; index++) {\n const point = points[index]!;\n path += ` H ${point.x.toFixed(PRECISION)} V ${point.y.toFixed(PRECISION)}`;\n }\n return path;\n}\n\nfunction calculateBandSizing(count: number, viewDimension: number, gapRatio: number) {\n if (count <= 0) return { bandSize: 0, stepSize: 0 };\n\n const stepSize = viewDimension / count;\n const bandSize = stepSize * gapRatio;\n return { bandSize, stepSize };\n}\n"],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@ var C = class extends _ {
|
|
|
21
21
|
static {
|
|
22
22
|
this.metadata = {
|
|
23
23
|
tag: "nve-sparkline",
|
|
24
|
-
version: "0.0.
|
|
24
|
+
version: "0.0.11"
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
27
|
render() {
|
|
@@ -50,9 +50,17 @@ var C = class extends _ {
|
|
|
50
50
|
this.style.setProperty("--_aspect-ratio", i.toFixed(4));
|
|
51
51
|
}
|
|
52
52
|
#t(e, t) {
|
|
53
|
-
let n = a(this.validData,
|
|
53
|
+
let n = a(this.validData, {
|
|
54
|
+
explicitMin: this.min,
|
|
55
|
+
explicitMax: this.max
|
|
56
|
+
});
|
|
54
57
|
if (!n) return y;
|
|
55
|
-
let r = h(0, n
|
|
58
|
+
let r = h(0, n), i = n.min < 0 && n.max > 0, s = f(this.validData, n, { width: e }), l = o(this.validData, {
|
|
59
|
+
first: this.denoteFirst,
|
|
60
|
+
last: this.denoteLast,
|
|
61
|
+
min: this.denoteMin,
|
|
62
|
+
max: this.denoteMax
|
|
63
|
+
}), p = u(this.interpolation), m = d(s, p, e), g = this.mark === "area" || this.mark === "gradient" ? c(s, p, 100) : "";
|
|
56
64
|
return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${this.mark === "gradient" ? this.#n(t) : y} ${g.length ? this.mark === "gradient" ? b`<path class="area" d="${g}" style="fill:url(#gradient)"></path>` : b`<path class="area" d="${g}"></path>` : y} ${i ? this.#r(r, e) : y} ${m ? b`<path class="line" d="${m}" vector-effect="non-scaling-stroke"></path>` : y}</svg> ${this.#i(s, l)}`;
|
|
57
65
|
}
|
|
58
66
|
#n(e) {
|
|
@@ -68,14 +76,21 @@ var C = class extends _ {
|
|
|
68
76
|
})}`;
|
|
69
77
|
}
|
|
70
78
|
#a(e, t) {
|
|
71
|
-
let n = a(this.validData,
|
|
79
|
+
let n = a(this.validData, {
|
|
80
|
+
explicitMin: this.min,
|
|
81
|
+
explicitMax: this.max,
|
|
82
|
+
includeZero: !0
|
|
83
|
+
});
|
|
72
84
|
if (!n) return y;
|
|
73
|
-
let r = h(0, n
|
|
85
|
+
let r = h(0, n), i = n.min < 0 && n.max > 0, o = l(f(this.validData, n, { width: e }), r, e);
|
|
74
86
|
return b`<svg viewBox="0 0 ${e} ${t}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${i ? this.#r(r, e) : y} ${o.map((e) => b`<rect class="column" x="${e.x.toFixed(2)}" y="${e.y.toFixed(2)}" width="${e.width.toFixed(2)}" height="${e.height.toFixed(2)}"></rect>`)}</svg>`;
|
|
75
87
|
}
|
|
76
88
|
#o(e, t, n) {
|
|
77
89
|
if (this.validData.length === 0) return y;
|
|
78
|
-
let r = m(this.validData, e,
|
|
90
|
+
let r = m(this.validData, e, {
|
|
91
|
+
width: t,
|
|
92
|
+
height: n
|
|
93
|
+
});
|
|
79
94
|
return b`<svg viewBox="0 0 ${t} ${n}" preserveAspectRatio="xMidYMid meet" aria-hidden="true">${this.#r(e, t)} ${r.map((e) => b`<rect class="${e.className}" x="${e.x.toFixed(2)}" y="${e.y.toFixed(2)}" width="${e.width.toFixed(2)}" height="${e.height.toFixed(2)}"></rect>`)}</svg>`;
|
|
80
95
|
}
|
|
81
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, this.min, this.max);\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain.min, domain.max);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain.min, domain.max, width);\n const symbolIndices = calculateSymbolIndices(\n this.validData,\n this.denoteFirst,\n this.denoteLast,\n this.denoteMin,\n this.denoteMax\n );\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, this.min, this.max, true);\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain.min, domain.max);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain.min, domain.max, width);\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, width, height);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sparkline2.js","names":["#renderChart","#renderLineVariant","#renderColumn","#renderWinLoss","#renderGradientDef","#renderZeroLine","#renderAccents"],"sources":["../../src/sparkline/sparkline.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues, SVGTemplateResult } from 'lit';\nimport { html, LitElement, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport type {\n DataElement,\n Interpolation,\n Point,\n SizeExpanded,\n SparklineMark,\n SupportStatus,\n TaskStatus\n} from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport {\n calculateDomain,\n calculateSymbolIndices,\n calculateViewBox,\n PRECISION,\n toAreaPath,\n toColumnRects,\n toInterpolation,\n toLinePath,\n toPlotPoints,\n toValidData,\n toWinLossRects,\n valueToY,\n VIEW_HEIGHT\n} from './sparkline.utils.js';\nimport styles from './sparkline.css?inline';\n\n/**\n * @element nve-sparkline\n * @description A sparkline is a compact, word-sized chart with typographic scale, for data-dense layouts (text, tables, cards, dashboards).\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/sparkline\n * @cssprop --height - Height (defaults to 1em and scales with parent font-size).\n * @cssprop --line-color\n * @cssprop --line-width\n * @cssprop --fill-color - Color used by area and column marks.\n * @cssprop --gradient-max-color\n * @cssprop --gradient-min-color\n * @cssprop --zero-line-color\n * @cssprop --zero-line-width\n * @cssprop --win-color Color used to represent positive values (wins).\n * @cssprop --loss-color Color used to represent negative values (losses).\n * @cssprop --draw-color Color used to represent zero values (draws / neutral outcomes).\n * @cssprop --symbol-color\n * @cssprop --symbol-border-color\n * @cssprop --symbol-border-width\n * @cssprop --symbol-radius - symbol circle radius in SVG units.\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Sparkline extends LitElement implements DataElement<number[]> {\n static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n static readonly metadata = {\n tag: 'nve-sparkline',\n version: '0.0.0'\n };\n\n /** Numeric values representing a data series. */\n @property({ type: Array }) data: number[] = [];\n\n /** Controls the visual representation of data points. */\n @property({ type: String }) mark: SparklineMark = 'line';\n\n /** Controls how the chart connects intermediate values between points in a data series. Defaults to `linear`. */\n @property({ type: String }) interpolation: Interpolation = 'linear';\n\n /** Applies semantic status colors used across Elements status patterns. */\n @property({ type: String, reflect: true }) status?: TaskStatus | SupportStatus;\n\n /** Controls the sparkline size with explicit font-size tokens. Omit to auto-scale with parent font-size (1em). */\n @property({ type: String, reflect: true }) size?: SizeExpanded;\n\n /** Denotes the first data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-first', reflect: true })\n denoteFirst = false;\n\n /** Denotes the last data point by rendering a symbol at its position. */\n @property({ type: Boolean, attribute: 'denote-last', reflect: true })\n denoteLast = false;\n\n /** Denotes all minimum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-min', reflect: true })\n denoteMin = false;\n\n /** Denotes all maximum-value data points by rendering symbols at their positions. */\n @property({ type: Boolean, attribute: 'denote-max', reflect: true })\n denoteMax = false;\n\n /** Controls spacing between points in a line, in em (1 = chart height). Defaults to `0.6`. */\n @property({ type: Number, attribute: 'interval-length' }) intervalLength = 0.6;\n\n /** Lower bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) min?: number;\n\n /** Upper bound for the y-axis domain. When undefined, derives the bound from data. */\n @property({ type: Number }) max?: number;\n\n /** Cached valid numeric values derived from data property. */\n @state() private validData: number[] = [];\n\n /** @private */\n declare _internals: ElementInternals;\n\n render() {\n return html`<div internal-host>${this.#renderChart()}</div>`;\n }\n\n connectedCallback() {\n super.connectedCallback();\n attachInternals(this);\n this._internals.role = 'img';\n }\n\n willUpdate(changedProperties: PropertyValues<this>) {\n super.willUpdate(changedProperties);\n\n if (changedProperties.has('data')) {\n this.validData = toValidData(this.data);\n }\n }\n\n #renderChart(): SVGTemplateResult | typeof nothing {\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n\n switch (this.mark) {\n case 'line':\n case 'area':\n case 'gradient':\n return this.#renderLineVariant(width, height);\n case 'column':\n return this.#renderColumn(width, height);\n case 'winloss':\n return this.#renderWinLoss(VIEW_HEIGHT / 2, width, height);\n default:\n const _exhaustiveCheck: never = this.mark;\n return nothing;\n }\n }\n\n updated(props: PropertyValues<this>) {\n super.updated(props);\n\n const { width, height } = calculateViewBox(this.mark, this.validData.length, this.intervalLength);\n const aspectRatio = width / height;\n const validAspectRatio = Number.isFinite(aspectRatio) && aspectRatio > 0 ? aspectRatio : 1;\n this.style.setProperty('--_aspect-ratio', validAspectRatio.toFixed(4));\n }\n\n #renderLineVariant(width: number, height: number) {\n const domain = calculateDomain(this.validData, { explicitMin: this.min, explicitMax: this.max });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const drawZeroLine = domain.min < 0 && domain.max > 0;\n\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const symbolIndices = calculateSymbolIndices(this.validData, {\n first: this.denoteFirst,\n last: this.denoteLast,\n min: this.denoteMin,\n max: this.denoteMax\n });\n const interpolation = toInterpolation(this.interpolation);\n\n const linePath = toLinePath(plotPoints, interpolation, width);\n const drawArea = this.mark === 'area' || this.mark === 'gradient';\n const areaPath = drawArea ? toAreaPath(plotPoints, interpolation, VIEW_HEIGHT) : '';\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.mark === 'gradient' ? this.#renderGradientDef(height) : nothing}\n\n ${\n areaPath.length\n ? this.mark === 'gradient'\n ? svg`<path class=\"area\" d=${areaPath} style=\"fill: url(#gradient)\"></path>`\n : svg`<path class=\"area\" d=${areaPath}></path>`\n : nothing\n }\n\n ${drawZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${linePath ? svg`<path class=\"line\" d=${linePath} vector-effect=\"non-scaling-stroke\"></path>` : nothing}\n </svg>\n ${this.#renderAccents(plotPoints, symbolIndices)}\n `;\n }\n\n #renderGradientDef(height: number) {\n return svg`\n <defs>\n <linearGradient id=\"gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"${height}\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0%\" style=\"stop-color: var(--gradient-max-color)\"></stop>\n <stop offset=\"100%\" style=\"stop-color: var(--gradient-min-color)\"></stop>\n </linearGradient>\n </defs>\n `;\n }\n\n #renderZeroLine(position: number, width: number) {\n return svg`\n <line\n class=\"zero-line\"\n vector-effect=\"non-scaling-stroke\"\n x1=\"0\"\n y1=\"${position.toFixed(PRECISION)}\"\n x2=\"${width}\"\n y2=\"${position.toFixed(PRECISION)}\">\n </line>\n `;\n }\n\n #renderAccents(points: Point[], accentIndices: Set<number>) {\n if (points.length === 0 || accentIndices.size === 0) return nothing;\n\n return html`\n ${Array.from(accentIndices).map(index => {\n const point = points[index];\n if (!point) return nothing;\n\n const style = `--x: ${point.x.toFixed(PRECISION)}; --y: ${point.y.toFixed(PRECISION)}`;\n return html`\n <span style=${style} class=\"accent\"></span>\n `;\n })}\n `;\n }\n\n #renderColumn(width: number, height: number) {\n const domain = calculateDomain(this.validData, {\n explicitMin: this.min,\n explicitMax: this.max,\n includeZero: true\n });\n if (!domain) return nothing;\n\n const baselineY = valueToY(0, domain);\n const showZeroLine = domain.min < 0 && domain.max > 0;\n const plotPoints = toPlotPoints(this.validData, domain, { width });\n const rects = toColumnRects(plotPoints, baselineY, width);\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${showZeroLine ? this.#renderZeroLine(baselineY, width) : nothing}\n\n ${rects.map(rect => {\n return svg`<rect class=\"column\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n\n #renderWinLoss(baselineY: number, width: number, height: number) {\n if (this.validData.length === 0) return nothing;\n\n const rects = toWinLossRects(this.validData, baselineY, { width, height });\n\n return svg`\n <svg viewBox=\"0 0 ${width} ${height}\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n ${this.#renderZeroLine(baselineY, width)}\n\n ${rects.map(rect => {\n return svg`<rect class=\"${rect.className}\" x=\"${rect.x.toFixed(PRECISION)}\" y=\"${rect.y.toFixed(PRECISION)}\" width=\"${rect.width.toFixed(PRECISION)}\" height=\"${rect.height.toFixed(PRECISION)}\"></rect>`;\n })}\n </svg>\n `;\n }\n}\n"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"entrypoint": "@nvidia-elements/core/star-rating/star-rating.examples.json",
|
|
4
4
|
"items": [
|
|
5
5
|
{
|
|
6
|
-
"id": "
|
|
6
|
+
"id": "star-rating",
|
|
7
7
|
"name": "Default",
|
|
8
8
|
"template": "<nve-star-rating>\n <label>rate this input</label>\n <input id=\"range\" type=\"range\" max=\"5\" value=\"3\" min=\"0\" />\n <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
|
|
9
9
|
"summary": "Basic star rating using a range input. Use for collecting user feedback, product reviews, or satisfaction scores in forms.",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"tags": []
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"id": "
|
|
15
|
+
"id": "star-rating-disabled",
|
|
16
16
|
"name": "Disabled",
|
|
17
17
|
"template": "<nve-star-rating>\n <label>disabled</label>\n <input type=\"range\" max=\"5\" value=\"3\" min=\"0\" disabled />\n <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
|
|
18
18
|
"summary": "Disabled star rating for display-only contexts. Use when showing existing ratings that users cannot change.",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
]
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
"id": "
|
|
26
|
+
"id": "star-rating-half-star",
|
|
27
27
|
"name": "HalfStar",
|
|
28
28
|
"template": "<nve-star-rating>\n <label>Half-star rating</label>\n <input id=\"half-star-input\" type=\"range\" max=\"5\" value=\"3.5\" min=\"0\" step=\"0.5\" />\n <nve-control-message>message</nve-control-message>\n</nve-star-rating>\n",
|
|
29
29
|
"summary": "Half-star increments using step=\"0.5\" for more granular ratings. Ideal when detailed feedback requires finer rating precision.",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"tags": []
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
|
-
"id": "
|
|
35
|
+
"id": "star-rating-toggle",
|
|
36
36
|
"name": "Toggle",
|
|
37
37
|
"template": "<nve-star-rating>\n <label>toggle/favorite</label>\n <input type=\"range\" max=\"1\" value=\"0\" min=\"0\" />\n</nve-star-rating>\n<script type=\"module\">\n const input = document.querySelector(\"#range\");\n input.addEventListener(\"input\", () => console.log(\"input\", input.valueAsNumber));\n input.addEventListener(\"change\", () => console.log(\"change\", input.valueAsNumber));\n</script>\n",
|
|
38
38
|
"summary": "Single star toggle for favorite/bookmark functionality. Use with max=\"1\" for binary on/off states like wishlists or bookmarks.",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"entrypoint": "@nvidia-elements/core/steps/steps.examples.json",
|
|
4
4
|
"items": [
|
|
5
5
|
{
|
|
6
|
-
"id": "
|
|
6
|
+
"id": "steps",
|
|
7
7
|
"name": "Default",
|
|
8
8
|
"template": "<nve-steps behavior-select>\n <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n <nve-steps-item selected>Step 3</nve-steps-item>\n <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
|
|
9
9
|
"summary": "Interactive step indicator with status colors for multi-step workflows. Use for wizards, onboarding flows, or process tracking where users can navigate between steps.",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"tags": []
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"id": "
|
|
15
|
+
"id": "steps-condensed",
|
|
16
16
|
"name": "Condensed",
|
|
17
17
|
"template": "<nve-steps behavior-select container=\"condensed\">\n <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n <nve-steps-item selected>Step 3</nve-steps-item>\n <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
|
|
18
18
|
"summary": "Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"tags": []
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
|
-
"id": "
|
|
24
|
+
"id": "steps-vertical-steps",
|
|
25
25
|
"name": "VerticalSteps",
|
|
26
26
|
"template": "<nve-steps vertical behavior-select style=\"width: 150px\">\n <nve-steps-item selected>Step 1</nve-steps-item>\n <nve-steps-item>Step 2</nve-steps-item>\n <nve-steps-item>Step 3</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
|
|
27
27
|
"summary": "Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"tags": []
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
|
-
"id": "
|
|
33
|
+
"id": "steps-vertical-condensed-steps",
|
|
34
34
|
"name": "VerticalCondensedSteps",
|
|
35
35
|
"template": "<nve-steps vertical container=\"condensed\" behavior-select>\n <nve-steps-item selected>Step 1</nve-steps-item>\n <nve-steps-item>Step 2</nve-steps-item>\n <nve-steps-item>Step 3</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n <nve-steps-item>Step 5</nve-steps-item>\n</nve-steps>\n",
|
|
36
36
|
"summary": "Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"tags": []
|
|
40
40
|
},
|
|
41
41
|
{
|
|
42
|
-
"id": "
|
|
42
|
+
"id": "steps-stateless-steps",
|
|
43
43
|
"name": "StatelessSteps",
|
|
44
44
|
"template": "<nve-steps>\n <nve-steps-item selected>Step 1</nve-steps-item>\n <nve-steps-item>Step 2</nve-steps-item>\n <nve-steps-item>Step 3</nve-steps-item>\n <nve-steps-item>Step 4</nve-steps-item>\n <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n",
|
|
45
45
|
"summary": "Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.",
|
package/dist/steps/steps2.js
CHANGED
|
@@ -23,7 +23,7 @@ var v = class extends r {
|
|
|
23
23
|
static {
|
|
24
24
|
this.metadata = {
|
|
25
25
|
tag: "nve-steps-item",
|
|
26
|
-
version: "0.0.
|
|
26
|
+
version: "0.0.11",
|
|
27
27
|
parents: ["nve-steps"]
|
|
28
28
|
};
|
|
29
29
|
}
|
|
@@ -67,7 +67,7 @@ var y = class extends f {
|
|
|
67
67
|
static {
|
|
68
68
|
this.metadata = {
|
|
69
69
|
tag: "nve-steps",
|
|
70
|
-
version: "0.0.
|
|
70
|
+
version: "0.0.11",
|
|
71
71
|
children: ["nve-steps-item"]
|
|
72
72
|
};
|
|
73
73
|
}
|