@oods/component-contracts 0.6.0 → 0.6.2
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/README.md +1 -1
- package/dist/index.cjs +8 -1
- package/dist/index.js +8 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -29,4 +29,4 @@ Use matching versions of the OODS packages. These packages are separate from the
|
|
|
29
29
|
|
|
30
30
|
## License
|
|
31
31
|
|
|
32
|
-
Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-contracts@0.6.
|
|
32
|
+
Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-contracts@0.6.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-contracts@0.6.2/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
|
package/dist/index.cjs
CHANGED
|
@@ -16878,6 +16878,13 @@ function formatPriceCode(value) {
|
|
|
16878
16878
|
// fixtures/viz-preview-samples.v1.json
|
|
16879
16879
|
var viz_preview_samples_v1_default = {
|
|
16880
16880
|
samples: {
|
|
16881
|
+
VizLinePreview: {
|
|
16882
|
+
input: {
|
|
16883
|
+
name: "Line chart sample",
|
|
16884
|
+
description: "Four authored sample observations, grouped into category A and category B series."},
|
|
16885
|
+
svg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210" role="img" aria-label="Line chart sample" aria-description="Four authored sample observations, grouped into category A and category B series."><title>Line chart sample</title><desc>Four authored sample observations, grouped into category A and category B series.</desc><rect width="370" height="210" fill="#FFFFFF"/><g fill="none" stroke-miterlimit="10" transform="translate(43,36)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,123)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,95)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,67)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,39)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,11)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Jan, Feb"><g transform="translate(0.5,123.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(59,0)" x2="0" y2="5" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(176,0)" x2="0" y2="5" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(58.5,7) rotate(270) translate(0,3)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">Jan</text><text text-anchor="end" transform="translate(175.5,7) rotate(270) translate(0,3)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">Feb</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="234" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(117,44)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Value' for a linear scale with values from 0 to 22"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,123)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,95)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,67)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,39)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,11)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,126)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">0</text><text text-anchor="end" transform="translate(-7,98.04545454545455)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">5</text><text text-anchor="end" transform="translate(-7,70.09090909090908)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">10</text><text text-anchor="end" transform="translate(-7,42.13636363636364)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">15</text><text text-anchor="end" transform="translate(-7,14.181818181818185)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">20</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,123)" x2="0" y2="-123" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-27,61.5) rotate(-90) translate(0,-2)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-scope pathgroup" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-line role-mark marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="Period: Jan; Value: 12; Category: A" role="graphics-symbol" aria-roledescription="line mark" d="M58.5,55.909L175.5,0" stroke="#3E63DD" stroke-width="2.5"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-line role-mark marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="Period: Jan; Value: 18; Category: B" role="graphics-symbol" aria-roledescription="line mark" d="M58.5,22.364L175.5,39.136" stroke="#B98E00" stroke-width="2.5"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g><g class="mark-group role-legend" role="graphics-symbol" aria-roledescription="legend" aria-label="Symbol legend titled 'Category' for stroke color with 2 values: A, B"><g transform="translate(252,0)"><path class="background" aria-hidden="true" d="M0,0h70v40h-70Z" pointer-events="none"/><g><g class="mark-group role-legend-entry"><g transform="translate(0,16)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-group role-scope" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h24v11h-24Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#3E63DD" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">A</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g><g transform="translate(0,13)"><path class="background" aria-hidden="true" d="M0,0h24v11h-24Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#B98E00" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">B</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-text role-legend-title" pointer-events="none"><text text-anchor="start" transform="translate(0,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Category</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-title"><g transform="translate(-38,-30.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Line chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="24px" font-weight="600" fill="#0A0A0A" opacity="1">Line chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>`,
|
|
16886
|
+
svgHash: "e797e674539c5baeb689f22cb916333ddc5c09915d7778621dca1db6a8b22531"
|
|
16887
|
+
},
|
|
16881
16888
|
VizGraphPreview: {
|
|
16882
16889
|
input: {
|
|
16883
16890
|
name: "Example connected relationships",
|
|
@@ -16898,7 +16905,7 @@ var authoredScenarios = [
|
|
|
16898
16905
|
{ "id": "VizHeatmapControls", "oodsComponentId": "VizHeatmapControls", "props": { "value": { "chartType": "heatmap", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "category", "type": "nominal" }, "color": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "heatmap", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "category", "type": "nominal" }, "color": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "append x to the first field", "expected": '{"chartType":"heatmap","encodings":{"x":{"field":"periodx","type":"nominal"},"y":{"field":"category","type":"nominal"},"color":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16899
16906
|
{ "id": "VizHeatmapPreview", "oodsComponentId": "VizHeatmapPreview", "props": { "svg": `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210"><rect width="370" height="210" fill="#FDF3DE"/><g fill="none" stroke-miterlimit="10" transform="translate(35,33)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h268v126h-268Z"/><g><g class="mark-rect role-mark marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="Period: Jan; Category: A; Value: 12" role="graphics-symbol" aria-roledescription="rect mark" d="M134,0h134v63h-134Z" fill="rgb(239, 249, 189)"/><path aria-label="Period: Jan; Category: B; Value: 18" role="graphics-symbol" aria-roledescription="rect mark" d="M134,63h134v63h-134Z" fill="rgb(44, 158, 192)"/><path aria-label="Period: Feb; Category: A; Value: 22" role="graphics-symbol" aria-roledescription="rect mark" d="M0,0h134v63h-134Z" fill="rgb(28, 49, 133)"/><path aria-label="Period: Feb; Category: B; Value: 15" role="graphics-symbol" aria-roledescription="rect mark" d="M0,63h134v63h-134Z" fill="rgb(148, 213, 185)"/></g><g class="mark-group role-legend" role="graphics-symbol" aria-roledescription="legend" aria-label="Gradient legend titled 'Value' for fill color with values from 12 to 22"><g transform="translate(286,0)"><path class="background" aria-hidden="true" d="M0,0h44v142h-44Z" pointer-events="none"/><g><g class="mark-group role-legend-entry"><g transform="translate(0,16)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rect role-legend-gradient" pointer-events="none"><path d="M0,0h16v126h-16Z" fill="url(#oods-id-0)" stroke="#ddd" stroke-width="0" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(18,124)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">12</text><text text-anchor="start" transform="translate(18,8)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">22</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-text role-legend-title" pointer-events="none"><text text-anchor="start" transform="translate(0,9)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-title"><g transform="translate(-30,-28)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Heatmap chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="24px" font-weight="600" fill="#18233C" opacity="1">Heatmap chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Feb, Jan"><g transform="translate(0.5,126.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(67,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(201,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(66.5,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Feb</text><text text-anchor="end" transform="translate(200.5,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Jan</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="268" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(134,44)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Category' for a discrete scale with 2 values: A, B"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,31)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,94)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,34)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">A</text><text text-anchor="end" transform="translate(-7,97)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">B</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="0" y2="126" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-19,63) rotate(-90) translate(0,-2)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Category</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g><defs><linearGradient id="oods-id-0" x1="0" x2="0" y1="1" y2="0"><stop offset="0" stop-color="rgb(239, 249, 189)"/><stop offset="0.05" stop-color="rgb(229, 245, 185)"/><stop offset="0.1" stop-color="rgb(219, 241, 180)"/><stop offset="0.15" stop-color="rgb(204, 235, 181)"/><stop offset="0.2" stop-color="rgb(189, 229, 181)"/><stop offset="0.25" stop-color="rgb(169, 221, 183)"/><stop offset="0.3" stop-color="rgb(148, 213, 185)"/><stop offset="0.35" stop-color="rgb(126, 205, 188)"/><stop offset="0.4" stop-color="rgb(105, 197, 190)"/><stop offset="0.45" stop-color="rgb(87, 189, 192)"/><stop offset="0.5" stop-color="rgb(69, 180, 194)"/><stop offset="0.55" stop-color="rgb(57, 169, 193)"/><stop offset="0.6" stop-color="rgb(44, 158, 192)"/><stop offset="0.65" stop-color="rgb(39, 144, 188)"/><stop offset="0.7" stop-color="rgb(33, 130, 184)"/><stop offset="0.75" stop-color="rgb(33, 115, 177)"/><stop offset="0.8" stop-color="rgb(33, 99, 170)"/><stop offset="0.85" stop-color="rgb(34, 85, 163)"/><stop offset="0.9" stop-color="rgb(35, 71, 156)"/><stop offset="0.95" stop-color="rgb(32, 60, 145)"/><stop offset="1" stop-color="rgb(28, 49, 133)"/></linearGradient></defs></svg>`, "title": "Heatmap chart sample", "description": "Four authored sample observations.", "width": 360, "height": 200 }, "slots": {}, "initialState": { "authored": true }, "renderExpectation": { "name": "render", "trigger": "mount the authored fragment or shared-renderer SVG", "expected": "SVG bytes hash 0a661f59cc96aa4b7cbb922cddd0d7bf744171c28b239a5615892353712629b3" }, "assertions": ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16900
16907
|
{ "id": "VizLineControls", "oodsComponentId": "VizLineControls", "props": { "value": { "chartType": "line", "encodings": { "x": { "field": "period", "type": "nominal", "sort": "ascending" }, "y": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "line", "encodings": { "x": { "field": "period", "type": "nominal", "sort": "ascending" }, "y": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "append x to the first field", "expected": '{"chartType":"line","encodings":{"x":{"field":"periodx","type":"nominal","sort":"ascending"},"y":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16901
|
-
{
|
|
16908
|
+
{ id: "VizLinePreview", oodsComponentId: "VizLinePreview", props: { svg: viz_preview_samples_v1_default.samples.VizLinePreview.svg, title: viz_preview_samples_v1_default.samples.VizLinePreview.input.name, description: viz_preview_samples_v1_default.samples.VizLinePreview.input.description, width: 360, height: 200 }, slots: {}, initialState: { authored: true }, renderExpectation: { name: "render", trigger: "mount the authored fragment or shared-renderer SVG", expected: `SVG bytes hash ${viz_preview_samples_v1_default.samples.VizLinePreview.svgHash}` }, assertions: ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16902
16909
|
{ "id": "VizMarkControls", "oodsComponentId": "VizMarkControls", "props": { "value": { "chartType": "bar", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "bar", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "choose area", "expected": '{"chartType":"area","encodings":{"x":{"field":"period","type":"nominal"},"y":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16903
16910
|
{ "id": "VizMarkPreview", "oodsComponentId": "VizMarkPreview", "props": { "svg": `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210"><rect width="370" height="210" fill="#FDF3DE"/><g fill="none" stroke-miterlimit="10" transform="translate(43,38)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h322v121h-322Z"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,121)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,91)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,61)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,30)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Feb, Jan"><g transform="translate(0.5,121.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(80,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(241,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(80.00000000000001,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Feb</text><text text-anchor="end" transform="translate(241,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Jan</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="322" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(161,44)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Value' for a linear scale with values from 0 to 40"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,121)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,91)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,61)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,30)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,124)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">0</text><text text-anchor="end" transform="translate(-7,93.75)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">10</text><text text-anchor="end" transform="translate(-7,63.5)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">20</text><text text-anchor="end" transform="translate(-7,33.25)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">30</text><text text-anchor="end" transform="translate(-7,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">40</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,121)" x2="0" y2="-121" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-27,60.5) rotate(-90) translate(0,-2)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-rect role-mark marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="Period: Jan; Value: 12" role="graphics-symbol" aria-roledescription="bar" d="M169.05,84.69999999999999h144.9v36.30000000000001h-144.9Z" fill="#416CD9"/><path aria-label="Period: Jan; Value: 18" role="graphics-symbol" aria-roledescription="bar" d="M169.05,30.25h144.9v54.44999999999999h-144.9Z" fill="#416CD9"/><path aria-label="Period: Feb; Value: 22" role="graphics-symbol" aria-roledescription="bar" d="M8.050000000000011,54.449999999999996h144.9v66.55000000000001h-144.9Z" fill="#416CD9"/><path aria-label="Period: Feb; Value: 15" role="graphics-symbol" aria-roledescription="bar" d="M8.050000000000011,9.074999999999994h144.9v45.375h-144.9Z" fill="#416CD9"/></g><g class="mark-group role-title"><g transform="translate(-38,-33)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Mark chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="24px" font-weight="600" fill="#18233C" opacity="1">Mark chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>`, "title": "Mark chart sample", "description": "Four authored sample observations.", "width": 360, "height": 200 }, "slots": {}, "initialState": { "authored": true }, "renderExpectation": { "name": "render", "trigger": "mount the authored fragment or shared-renderer SVG", "expected": "SVG bytes hash 248677b82ea7b26d2f811baeb5f6cb67237a766b5b3a696cf8b0130912fa24a7" }, "assertions": ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16904
16911
|
{ "id": "VizOpacityControls", "oodsComponentId": "VizOpacityControls", "props": { "value": { "opacity": 0.8 } }, "slots": {}, "initialState": { "opacity": 0.8 }, "renderExpectation": { "name": "change", "trigger": "choose 0.4", "expected": '{"opacity":0.4}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
package/dist/index.js
CHANGED
|
@@ -16876,6 +16876,13 @@ function formatPriceCode(value) {
|
|
|
16876
16876
|
// fixtures/viz-preview-samples.v1.json
|
|
16877
16877
|
var viz_preview_samples_v1_default = {
|
|
16878
16878
|
samples: {
|
|
16879
|
+
VizLinePreview: {
|
|
16880
|
+
input: {
|
|
16881
|
+
name: "Line chart sample",
|
|
16882
|
+
description: "Four authored sample observations, grouped into category A and category B series."},
|
|
16883
|
+
svg: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210" role="img" aria-label="Line chart sample" aria-description="Four authored sample observations, grouped into category A and category B series."><title>Line chart sample</title><desc>Four authored sample observations, grouped into category A and category B series.</desc><rect width="370" height="210" fill="#FFFFFF"/><g fill="none" stroke-miterlimit="10" transform="translate(43,36)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,123)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,95)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,67)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,39)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/><line transform="translate(0,11)" x2="234" y2="0" stroke="#E5E5E5" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Jan, Feb"><g transform="translate(0.5,123.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(59,0)" x2="0" y2="5" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(176,0)" x2="0" y2="5" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(58.5,7) rotate(270) translate(0,3)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">Jan</text><text text-anchor="end" transform="translate(175.5,7) rotate(270) translate(0,3)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">Feb</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="234" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(117,44)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Value' for a linear scale with values from 0 to 22"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,123)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,95)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,67)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,39)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/><line transform="translate(0,11)" x2="-5" y2="0" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,126)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">0</text><text text-anchor="end" transform="translate(-7,98.04545454545455)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">5</text><text text-anchor="end" transform="translate(-7,70.09090909090908)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">10</text><text text-anchor="end" transform="translate(-7,42.13636363636364)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">15</text><text text-anchor="end" transform="translate(-7,14.181818181818185)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">20</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,123)" x2="0" y2="-123" stroke="#D4D4D4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-27,61.5) rotate(-90) translate(0,-2)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-scope pathgroup" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-line role-mark marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="Period: Jan; Value: 12; Category: A" role="graphics-symbol" aria-roledescription="line mark" d="M58.5,55.909L175.5,0" stroke="#3E63DD" stroke-width="2.5"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h234v123h-234Z"/><g><g class="mark-line role-mark marks" role="graphics-object" aria-roledescription="line mark container"><path aria-label="Period: Jan; Value: 18; Category: B" role="graphics-symbol" aria-roledescription="line mark" d="M58.5,22.364L175.5,39.136" stroke="#B98E00" stroke-width="2.5"/></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g><g class="mark-group role-legend" role="graphics-symbol" aria-roledescription="legend" aria-label="Symbol legend titled 'Category' for stroke color with 2 values: A, B"><g transform="translate(252,0)"><path class="background" aria-hidden="true" d="M0,0h70v40h-70Z" pointer-events="none"/><g><g class="mark-group role-legend-entry"><g transform="translate(0,16)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-group role-scope" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h24v11h-24Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#3E63DD" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">A</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g><g transform="translate(0,13)"><path class="background" aria-hidden="true" d="M0,0h24v11h-24Z" pointer-events="none" opacity="1"/><g><g class="mark-symbol role-legend-symbol" pointer-events="none"><path transform="translate(6,6)" d="M-5,0L5,0" stroke="#B98E00" stroke-width="1.5" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(16,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="10px" fill="#525252" opacity="1">B</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-text role-legend-title" pointer-events="none"><text text-anchor="start" transform="translate(0,9)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="11px" font-weight="bold" fill="#0A0A0A" opacity="1">Category</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-title"><g transform="translate(-38,-30.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Line chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif" font-size="24px" font-weight="600" fill="#0A0A0A" opacity="1">Line chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>`,
|
|
16884
|
+
svgHash: "e797e674539c5baeb689f22cb916333ddc5c09915d7778621dca1db6a8b22531"
|
|
16885
|
+
},
|
|
16879
16886
|
VizGraphPreview: {
|
|
16880
16887
|
input: {
|
|
16881
16888
|
name: "Example connected relationships",
|
|
@@ -16896,7 +16903,7 @@ var authoredScenarios = [
|
|
|
16896
16903
|
{ "id": "VizHeatmapControls", "oodsComponentId": "VizHeatmapControls", "props": { "value": { "chartType": "heatmap", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "category", "type": "nominal" }, "color": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "heatmap", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "category", "type": "nominal" }, "color": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "append x to the first field", "expected": '{"chartType":"heatmap","encodings":{"x":{"field":"periodx","type":"nominal"},"y":{"field":"category","type":"nominal"},"color":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16897
16904
|
{ "id": "VizHeatmapPreview", "oodsComponentId": "VizHeatmapPreview", "props": { "svg": `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210"><rect width="370" height="210" fill="#FDF3DE"/><g fill="none" stroke-miterlimit="10" transform="translate(35,33)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h268v126h-268Z"/><g><g class="mark-rect role-mark marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="Period: Jan; Category: A; Value: 12" role="graphics-symbol" aria-roledescription="rect mark" d="M134,0h134v63h-134Z" fill="rgb(239, 249, 189)"/><path aria-label="Period: Jan; Category: B; Value: 18" role="graphics-symbol" aria-roledescription="rect mark" d="M134,63h134v63h-134Z" fill="rgb(44, 158, 192)"/><path aria-label="Period: Feb; Category: A; Value: 22" role="graphics-symbol" aria-roledescription="rect mark" d="M0,0h134v63h-134Z" fill="rgb(28, 49, 133)"/><path aria-label="Period: Feb; Category: B; Value: 15" role="graphics-symbol" aria-roledescription="rect mark" d="M0,63h134v63h-134Z" fill="rgb(148, 213, 185)"/></g><g class="mark-group role-legend" role="graphics-symbol" aria-roledescription="legend" aria-label="Gradient legend titled 'Value' for fill color with values from 12 to 22"><g transform="translate(286,0)"><path class="background" aria-hidden="true" d="M0,0h44v142h-44Z" pointer-events="none"/><g><g class="mark-group role-legend-entry"><g transform="translate(0,16)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rect role-legend-gradient" pointer-events="none"><path d="M0,0h16v126h-16Z" fill="url(#oods-id-0)" stroke="#ddd" stroke-width="0" opacity="1"/></g><g class="mark-text role-legend-label" pointer-events="none"><text text-anchor="start" transform="translate(18,124)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">12</text><text text-anchor="start" transform="translate(18,8)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">22</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-text role-legend-title" pointer-events="none"><text text-anchor="start" transform="translate(0,9)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-title"><g transform="translate(-30,-28)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Heatmap chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="24px" font-weight="600" fill="#18233C" opacity="1">Heatmap chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Feb, Jan"><g transform="translate(0.5,126.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(67,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(201,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(66.5,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Feb</text><text text-anchor="end" transform="translate(200.5,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Jan</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="268" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(134,44)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Category' for a discrete scale with 2 values: A, B"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,31)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,94)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,34)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">A</text><text text-anchor="end" transform="translate(-7,97)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">B</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="0" y2="126" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-19,63) rotate(-90) translate(0,-2)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Category</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g><defs><linearGradient id="oods-id-0" x1="0" x2="0" y1="1" y2="0"><stop offset="0" stop-color="rgb(239, 249, 189)"/><stop offset="0.05" stop-color="rgb(229, 245, 185)"/><stop offset="0.1" stop-color="rgb(219, 241, 180)"/><stop offset="0.15" stop-color="rgb(204, 235, 181)"/><stop offset="0.2" stop-color="rgb(189, 229, 181)"/><stop offset="0.25" stop-color="rgb(169, 221, 183)"/><stop offset="0.3" stop-color="rgb(148, 213, 185)"/><stop offset="0.35" stop-color="rgb(126, 205, 188)"/><stop offset="0.4" stop-color="rgb(105, 197, 190)"/><stop offset="0.45" stop-color="rgb(87, 189, 192)"/><stop offset="0.5" stop-color="rgb(69, 180, 194)"/><stop offset="0.55" stop-color="rgb(57, 169, 193)"/><stop offset="0.6" stop-color="rgb(44, 158, 192)"/><stop offset="0.65" stop-color="rgb(39, 144, 188)"/><stop offset="0.7" stop-color="rgb(33, 130, 184)"/><stop offset="0.75" stop-color="rgb(33, 115, 177)"/><stop offset="0.8" stop-color="rgb(33, 99, 170)"/><stop offset="0.85" stop-color="rgb(34, 85, 163)"/><stop offset="0.9" stop-color="rgb(35, 71, 156)"/><stop offset="0.95" stop-color="rgb(32, 60, 145)"/><stop offset="1" stop-color="rgb(28, 49, 133)"/></linearGradient></defs></svg>`, "title": "Heatmap chart sample", "description": "Four authored sample observations.", "width": 360, "height": 200 }, "slots": {}, "initialState": { "authored": true }, "renderExpectation": { "name": "render", "trigger": "mount the authored fragment or shared-renderer SVG", "expected": "SVG bytes hash 0a661f59cc96aa4b7cbb922cddd0d7bf744171c28b239a5615892353712629b3" }, "assertions": ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16898
16905
|
{ "id": "VizLineControls", "oodsComponentId": "VizLineControls", "props": { "value": { "chartType": "line", "encodings": { "x": { "field": "period", "type": "nominal", "sort": "ascending" }, "y": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "line", "encodings": { "x": { "field": "period", "type": "nominal", "sort": "ascending" }, "y": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "append x to the first field", "expected": '{"chartType":"line","encodings":{"x":{"field":"periodx","type":"nominal","sort":"ascending"},"y":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16899
|
-
{
|
|
16906
|
+
{ id: "VizLinePreview", oodsComponentId: "VizLinePreview", props: { svg: viz_preview_samples_v1_default.samples.VizLinePreview.svg, title: viz_preview_samples_v1_default.samples.VizLinePreview.input.name, description: viz_preview_samples_v1_default.samples.VizLinePreview.input.description, width: 360, height: 200 }, slots: {}, initialState: { authored: true }, renderExpectation: { name: "render", trigger: "mount the authored fragment or shared-renderer SVG", expected: `SVG bytes hash ${viz_preview_samples_v1_default.samples.VizLinePreview.svgHash}` }, assertions: ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16900
16907
|
{ "id": "VizMarkControls", "oodsComponentId": "VizMarkControls", "props": { "value": { "chartType": "bar", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } } }, "slots": {}, "initialState": { "chartType": "bar", "encodings": { "x": { "field": "period", "type": "nominal" }, "y": { "field": "value", "type": "quantitative" } } }, "renderExpectation": { "name": "change", "trigger": "choose area", "expected": '{"chartType":"area","encodings":{"x":{"field":"period","type":"nominal"},"y":{"field":"value","type":"quantitative"}}}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
|
16901
16908
|
{ "id": "VizMarkPreview", "oodsComponentId": "VizMarkPreview", "props": { "svg": `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="marks" width="370" height="210" viewBox="0 0 370 210"><rect width="370" height="210" fill="#FDF3DE"/><g fill="none" stroke-miterlimit="10" transform="translate(43,38)"><g class="mark-group role-frame root" role="graphics-object" aria-roledescription="group mark container"><g transform="translate(0,0)"><path class="background" aria-hidden="true" d="M0,0h322v121h-322Z"/><g><g class="mark-group role-axis" aria-hidden="true"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-grid" pointer-events="none"><line transform="translate(0,121)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,91)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,61)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,30)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="322" y2="0" stroke="#DAD0BA" stroke-width="1" opacity="1"/></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="X-axis titled 'Period' for a discrete scale with 2 values: Feb, Jan"><g transform="translate(0.5,121.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(80,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(241,0)" x2="0" y2="5" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(80.00000000000001,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Feb</text><text text-anchor="end" transform="translate(241,7) rotate(270) translate(0,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">Jan</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,0)" x2="322" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(161,44)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Period</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-group role-axis" role="graphics-symbol" aria-roledescription="axis" aria-label="Y-axis titled 'Value' for a linear scale with values from 0 to 40"><g transform="translate(0.5,0.5)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-rule role-axis-tick" pointer-events="none"><line transform="translate(0,121)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,91)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,61)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,30)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/><line transform="translate(0,0)" x2="-5" y2="0" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-label" pointer-events="none"><text text-anchor="end" transform="translate(-7,124)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">0</text><text text-anchor="end" transform="translate(-7,93.75)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">10</text><text text-anchor="end" transform="translate(-7,63.5)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">20</text><text text-anchor="end" transform="translate(-7,33.25)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">30</text><text text-anchor="end" transform="translate(-7,3)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10px" fill="#4B4D5A" opacity="1">40</text></g><g class="mark-rule role-axis-domain" pointer-events="none"><line transform="translate(0,121)" x2="0" y2="-121" stroke="#D6DAE4" stroke-width="1" opacity="1"/></g><g class="mark-text role-axis-title" pointer-events="none"><text text-anchor="middle" transform="translate(-27,60.5) rotate(-90) translate(0,-2)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="11px" font-weight="bold" fill="#18233C" opacity="1">Value</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g><g class="mark-rect role-mark marks" role="graphics-object" aria-roledescription="rect mark container"><path aria-label="Period: Jan; Value: 12" role="graphics-symbol" aria-roledescription="bar" d="M169.05,84.69999999999999h144.9v36.30000000000001h-144.9Z" fill="#416CD9"/><path aria-label="Period: Jan; Value: 18" role="graphics-symbol" aria-roledescription="bar" d="M169.05,30.25h144.9v54.44999999999999h-144.9Z" fill="#416CD9"/><path aria-label="Period: Feb; Value: 22" role="graphics-symbol" aria-roledescription="bar" d="M8.050000000000011,54.449999999999996h144.9v66.55000000000001h-144.9Z" fill="#416CD9"/><path aria-label="Period: Feb; Value: 15" role="graphics-symbol" aria-roledescription="bar" d="M8.050000000000011,9.074999999999994h144.9v45.375h-144.9Z" fill="#416CD9"/></g><g class="mark-group role-title"><g transform="translate(-38,-33)"><path class="background" aria-hidden="true" d="M0,0h0v0h0Z" pointer-events="none"/><g><g class="mark-text role-title-text" role="graphics-symbol" aria-roledescription="title" aria-label="Title text 'Mark chart sample'" pointer-events="none"><text text-anchor="start" transform="translate(0,19)" font-family="'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="24px" font-weight="600" fill="#18233C" opacity="1">Mark chart sample</text></g></g><path class="foreground" aria-hidden="true" d="" pointer-events="none" display="none"/></g></g></g><path class="foreground" aria-hidden="true" d="" display="none"/></g></g></g></svg>`, "title": "Mark chart sample", "description": "Four authored sample observations.", "width": 360, "height": 200 }, "slots": {}, "initialState": { "authored": true }, "renderExpectation": { "name": "render", "trigger": "mount the authored fragment or shared-renderer SVG", "expected": "SVG bytes hash 248677b82ea7b26d2f811baeb5f6cb67237a766b5b3a696cf8b0130912fa24a7" }, "assertions": ["static SVG bytes are preserved", "figure is named", "sample is generated by public viz.render"] },
|
|
16902
16909
|
{ "id": "VizOpacityControls", "oodsComponentId": "VizOpacityControls", "props": { "value": { "opacity": 0.8 } }, "slots": {}, "initialState": { "opacity": 0.8 }, "renderExpectation": { "name": "change", "trigger": "choose 0.4", "expected": '{"opacity":0.4}' }, "assertions": ["emitted payload is a typed public input fragment", "untouched sibling bindings are preserved", "labels name native controls"] },
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oods/component-contracts",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "Component contracts for OODS Foundry: each component's identity, props, events, states, token roles and accessibility obligations, with shared formatting helpers.",
|
|
5
5
|
"homepage": "https://oods-foundry.com/",
|
|
6
6
|
"bugs": {
|