Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
components/chart.json
{
"name": "Chart",
"tagName": "noora-chart",
"elementClassName": "NooraChart",
"className": "noora-chart",
"modulePath": "./priv/static/noora-web-components.js",
"description": "Renders an Apache ECharts visualization from declarative configuration elements.",
"usage": "<noora-chart aria-label=\"Build activity\"><noora-chart-axis dimension=\"x\" type=\"category\"><noora-chart-category>Mon</noora-chart-category><noora-chart-category>Tue</noora-chart-category></noora-chart-axis><noora-chart-axis dimension=\"y\" type=\"value\"></noora-chart-axis><noora-chart-series type=\"line\"><noora-chart-point value=\"2\"></noora-chart-point><noora-chart-point value=\"5\"></noora-chart-point></noora-chart-series></noora-chart>",
"previewLayout": "stack",
"attributes": [
{
"name": "renderer",
"property": "renderer",
"type": "string",
"values": ["canvas", "svg"],
"default": "canvas",
"description": "Chooses the chart renderer."
},
{
"name": "tooltip-trigger",
"property": "tooltipTrigger",
"type": "string",
"values": ["axis", "item"],
"default": "axis",
"description": "Shows a tooltip for an axis or an individual item."
},
{
"name": "hide-tooltip",
"property": "hideTooltip",
"type": "boolean",
"default": false,
"description": "Hides the chart tooltip."
},
{
"name": "hide-legend",
"property": "hideLegend",
"type": "boolean",
"default": false,
"description": "Hides the chart legend."
},
{
"name": "aria-label",
"property": "_ariaLabel",
"publicProperty": false,
"type": "string",
"description": "Provides an accessible chart label."
}
],
"properties": [
{
"name": "options",
"type": "json",
"typescriptType": "Record<string, unknown>",
"default": {},
"description": "Sets an Apache ECharts configuration object when programmatic configuration is needed."
}
],
"readonlyProperties": [
{
"name": "chart",
"type": "unknown | null",
"description": "The underlying Apache ECharts instance."
}
],
"slots": [
{
"name": "",
"description": "Declarative grid, axis, and series configuration elements."
}
],
"cssParts": [
{
"name": "container",
"description": "The chart wrapper."
},
{
"name": "chart",
"description": "The chart drawing surface."
}
],
"events": [
{
"name": "noora-chart-select",
"type": "CustomEvent<{ item: unknown; parameters: unknown }>",
"description": "Emitted when an interactive chart item is selected. Prevent the default action to stop navigation for items with a link target."
}
],
"notes": [
"Set an explicit block size on the element or its chart part.",
"Use declarative configuration elements for markup-authored charts.",
"Declarative charts use the same grid, axis, tooltip, legend, color, and typography defaults as the Phoenix LiveView chart component.",
"The options property remains available for charts assembled or updated by JavaScript.",
"Declarative configuration elements take precedence when both forms are provided."
],
"examples": [
{
"id": "multi-series-line",
"title": "Multi-series line",
"description": "Compare multiple effectiveness series over time.",
"markup": "<noora-chart hide-legend aria-label=\"Cache and test effectiveness\" style=\"width: 600px; height: 300px\">\n <noora-chart-axis dimension=\"x\" type=\"category\">\n <noora-chart-category>Aug</noora-chart-category>\n <noora-chart-category>Sep</noora-chart-category>\n <noora-chart-category>Oct</noora-chart-category>\n <noora-chart-category>Nov</noora-chart-category>\n <noora-chart-category>Dec</noora-chart-category>\n </noora-chart-axis>\n <noora-chart-axis dimension=\"y\" type=\"value\" min=\"0\" max=\"100\" label-format=\"{value}%\"></noora-chart-axis>\n <noora-chart-series name=\"Binary cache effectiveness\" type=\"line\" symbol=\"none\">\n <noora-chart-point value=\"32\"></noora-chart-point>\n <noora-chart-point value=\"38\"></noora-chart-point>\n <noora-chart-point value=\"42\"></noora-chart-point>\n <noora-chart-point value=\"48\"></noora-chart-point>\n <noora-chart-point value=\"64\"></noora-chart-point>\n </noora-chart-series>\n <noora-chart-series name=\"Selective test effectiveness\" type=\"line\" symbol=\"none\">\n <noora-chart-point value=\"48\"></noora-chart-point>\n <noora-chart-point value=\"52\"></noora-chart-point>\n <noora-chart-point value=\"45\"></noora-chart-point>\n <noora-chart-point value=\"56\"></noora-chart-point>\n <noora-chart-point value=\"62\"></noora-chart-point>\n </noora-chart-series>\n</noora-chart>"
},
{
"id": "horizontal-bars",
"title": "Horizontal bar comparison",
"description": "Compare build optimization durations on a horizontal scale.",
"markup": "<noora-chart aria-label=\"Optimization duration comparison\" style=\"width: 500px; height: 146px\">\n <noora-chart-grid height=\"76\" width=\"400\"></noora-chart-grid>\n <noora-chart-axis dimension=\"x\" type=\"value\" label-format=\"{value}h\" label-margin=\"25\"></noora-chart-axis>\n <noora-chart-axis dimension=\"y\" type=\"category\" no-boundary-gap>\n <noora-chart-category>Selective Test</noora-chart-category>\n <noora-chart-category>Build Cache</noora-chart-category>\n </noora-chart-axis>\n <noora-chart-series type=\"bar\" bar-gap=\"-100%\" bar-width=\"24\" border-radius=\"7\">\n <noora-chart-point value=\"19\"></noora-chart-point>\n <noora-chart-point value=\"22\"></noora-chart-point>\n </noora-chart-series>\n <noora-chart-series type=\"bar\" bar-width=\"24\" border-radius=\"7\">\n <noora-chart-point value=\"7.2\"></noora-chart-point>\n <noora-chart-point value=\"9\"></noora-chart-point>\n </noora-chart-series>\n</noora-chart>"
},
{
"id": "test-duration",
"title": "Test run duration",
"description": "Use semantic colors to distinguish successful and failed runs.",
"markup": "<noora-chart hide-legend hide-tooltip aria-label=\"Test run duration\" style=\"width: 700px; height: 300px\">\n <noora-chart-axis dimension=\"x\" type=\"category\" hidden></noora-chart-axis>\n <noora-chart-axis dimension=\"y\" type=\"value\"></noora-chart-axis>\n <noora-chart-series type=\"bar\" bar-width=\"8\">\n <noora-chart-point value=\"28\" color=\"var:noora-chart-primary\"></noora-chart-point>\n <noora-chart-point value=\"23\" color=\"var:noora-chart-primary\"></noora-chart-point>\n <noora-chart-point value=\"37\" color=\"var:noora-chart-tertiary\"></noora-chart-point>\n <noora-chart-point value=\"22\" color=\"var:noora-chart-primary\"></noora-chart-point>\n <noora-chart-point value=\"32\" color=\"var:noora-chart-tertiary\"></noora-chart-point>\n </noora-chart-series>\n</noora-chart>"
}
]
}