@synergy-design-system/metadata 3.8.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/data/core/component/component:syn-chart.json +181 -0
- package/data/core/setup/setup:angular-components-module.json +1 -1
- package/data/core/setup/setup:angular-forms-module.json +1 -1
- package/data/core/setup/setup:angular-package.json +2 -2
- package/data/core/setup/setup:angular-validators-module.json +1 -1
- package/data/core/setup/setup:components-package.json +2 -2
- package/data/core/setup/setup:react-package.json +2 -2
- package/data/core/setup/setup:tokens-package.json +10 -2
- package/data/core/setup/setup:vue-package.json +2 -2
- package/data/core/token/token:tokens-charts-js-index-d-ts.json +31 -0
- package/data/core/token/token:tokens-charts-js-index-js.json +31 -0
- package/data/core/token/token:tokens-charts-scss-tokens-scss.json +31 -0
- package/data/core/token/token:tokens-charts-themes-sick2025-dark-css.json +32 -0
- package/data/core/token/token:tokens-charts-themes-sick2025-light-css.json +32 -0
- package/data/core/token/token:tokens-figma-variables-sick2018-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2018-light-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-dark-json.json +1 -1
- package/data/core/token/token:tokens-figma-variables-sick2025-light-json.json +1 -1
- package/data/core/token/token:tokens-js-index-d-ts.json +1 -1
- package/data/core/token/token:tokens-js-index-js.json +1 -1
- package/data/core/token/token:tokens-scss-tokens-scss.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2018-light-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-dark-css.json +1 -1
- package/data/core/token/token:tokens-themes-sick2025-light-css.json +1 -1
- package/data/index.json +108 -1
- package/data/layers/examples/component/component:syn-chart.md +191 -0
- package/data/layers/full/component/component:syn-accordion/angular/accordion.component.ts +1 -1
- package/data/layers/full/component/component:syn-accordion/vue/SynVueAccordion.vue +1 -1
- package/data/layers/full/component/component:syn-alert/angular/alert.component.ts +1 -1
- package/data/layers/full/component/component:syn-alert/vue/SynVueAlert.vue +1 -1
- package/data/layers/full/component/component:syn-badge/angular/badge.component.ts +1 -1
- package/data/layers/full/component/component:syn-badge/vue/SynVueBadge.vue +1 -1
- package/data/layers/full/component/component:syn-breadcrumb/angular/breadcrumb.component.ts +1 -1
- package/data/layers/full/component/component:syn-breadcrumb/vue/SynVueBreadcrumb.vue +1 -1
- package/data/layers/full/component/component:syn-breadcrumb-item/angular/breadcrumb-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-breadcrumb-item/vue/SynVueBreadcrumbItem.vue +1 -1
- package/data/layers/full/component/component:syn-button/angular/button.component.ts +1 -1
- package/data/layers/full/component/component:syn-button/vue/SynVueButton.vue +1 -1
- package/data/layers/full/component/component:syn-button-group/angular/button-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-button-group/vue/SynVueButtonGroup.vue +1 -1
- package/data/layers/full/component/component:syn-card/angular/card.component.ts +1 -1
- package/data/layers/full/component/component:syn-card/vue/SynVueCard.vue +1 -1
- package/data/layers/full/component/component:syn-chart/angular/chart.component.ts +84 -0
- package/data/layers/full/component/component:syn-chart/components/chart.component.ts +181 -0
- package/data/layers/full/component/component:syn-chart/components/chart.palettes.ts +110 -0
- package/data/layers/full/component/component:syn-chart/components/chart.styles.ts +15 -0
- package/data/layers/full/component/component:syn-chart/components/chart.ts +14 -0
- package/data/layers/full/component/component:syn-chart/components/types.ts +5 -0
- package/data/layers/full/component/component:syn-chart/react/SynChartJSXElement.ts +1 -0
- package/data/layers/full/component/component:syn-chart/react/chart.ts +28 -0
- package/data/layers/full/component/component:syn-chart/vue/SynVueChart.vue +76 -0
- package/data/layers/full/component/component:syn-checkbox/angular/checkbox.component.ts +1 -1
- package/data/layers/full/component/component:syn-checkbox/vue/SynVueCheckbox.vue +1 -1
- package/data/layers/full/component/component:syn-combobox/angular/combobox.component.ts +1 -1
- package/data/layers/full/component/component:syn-combobox/vue/SynVueCombobox.vue +1 -1
- package/data/layers/full/component/component:syn-details/angular/details.component.ts +1 -1
- package/data/layers/full/component/component:syn-details/vue/SynVueDetails.vue +1 -1
- package/data/layers/full/component/component:syn-dialog/angular/dialog.component.ts +1 -1
- package/data/layers/full/component/component:syn-dialog/vue/SynVueDialog.vue +1 -1
- package/data/layers/full/component/component:syn-divider/angular/divider.component.ts +1 -1
- package/data/layers/full/component/component:syn-divider/vue/SynVueDivider.vue +1 -1
- package/data/layers/full/component/component:syn-drawer/angular/drawer.component.ts +1 -1
- package/data/layers/full/component/component:syn-drawer/vue/SynVueDrawer.vue +1 -1
- package/data/layers/full/component/component:syn-dropdown/angular/dropdown.component.ts +1 -1
- package/data/layers/full/component/component:syn-dropdown/vue/SynVueDropdown.vue +1 -1
- package/data/layers/full/component/component:syn-file/angular/file.component.ts +1 -1
- package/data/layers/full/component/component:syn-file/vue/SynVueFile.vue +1 -1
- package/data/layers/full/component/component:syn-header/angular/header.component.ts +1 -1
- package/data/layers/full/component/component:syn-header/vue/SynVueHeader.vue +1 -1
- package/data/layers/full/component/component:syn-icon/angular/icon.component.ts +1 -1
- package/data/layers/full/component/component:syn-icon/vue/SynVueIcon.vue +1 -1
- package/data/layers/full/component/component:syn-icon-button/angular/icon-button.component.ts +1 -1
- package/data/layers/full/component/component:syn-icon-button/vue/SynVueIconButton.vue +1 -1
- package/data/layers/full/component/component:syn-input/angular/input.component.ts +1 -1
- package/data/layers/full/component/component:syn-input/vue/SynVueInput.vue +1 -1
- package/data/layers/full/component/component:syn-menu/angular/menu.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu/vue/SynVueMenu.vue +1 -1
- package/data/layers/full/component/component:syn-menu-item/angular/menu-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu-item/vue/SynVueMenuItem.vue +1 -1
- package/data/layers/full/component/component:syn-menu-label/angular/menu-label.component.ts +1 -1
- package/data/layers/full/component/component:syn-menu-label/vue/SynVueMenuLabel.vue +1 -1
- package/data/layers/full/component/component:syn-nav-item/angular/nav-item.component.ts +1 -1
- package/data/layers/full/component/component:syn-nav-item/vue/SynVueNavItem.vue +1 -1
- package/data/layers/full/component/component:syn-optgroup/angular/optgroup.component.ts +1 -1
- package/data/layers/full/component/component:syn-optgroup/vue/SynVueOptgroup.vue +1 -1
- package/data/layers/full/component/component:syn-option/angular/option.component.ts +1 -1
- package/data/layers/full/component/component:syn-option/vue/SynVueOption.vue +1 -1
- package/data/layers/full/component/component:syn-pagination/angular/pagination.component.ts +1 -1
- package/data/layers/full/component/component:syn-pagination/vue/SynVuePagination.vue +1 -1
- package/data/layers/full/component/component:syn-popup/angular/popup.component.ts +1 -1
- package/data/layers/full/component/component:syn-popup/vue/SynVuePopup.vue +1 -1
- package/data/layers/full/component/component:syn-prio-nav/angular/prio-nav.component.ts +1 -1
- package/data/layers/full/component/component:syn-prio-nav/vue/SynVuePrioNav.vue +1 -1
- package/data/layers/full/component/component:syn-progress-bar/angular/progress-bar.component.ts +1 -1
- package/data/layers/full/component/component:syn-progress-bar/vue/SynVueProgressBar.vue +1 -1
- package/data/layers/full/component/component:syn-progress-ring/angular/progress-ring.component.ts +1 -1
- package/data/layers/full/component/component:syn-progress-ring/vue/SynVueProgressRing.vue +1 -1
- package/data/layers/full/component/component:syn-radio/angular/radio.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio/vue/SynVueRadio.vue +1 -1
- package/data/layers/full/component/component:syn-radio-button/angular/radio-button.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio-button/vue/SynVueRadioButton.vue +1 -1
- package/data/layers/full/component/component:syn-radio-group/angular/radio-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-radio-group/vue/SynVueRadioGroup.vue +1 -1
- package/data/layers/full/component/component:syn-range/angular/range.component.ts +1 -1
- package/data/layers/full/component/component:syn-range/vue/SynVueRange.vue +1 -1
- package/data/layers/full/component/component:syn-range-tick/angular/range-tick.component.ts +1 -1
- package/data/layers/full/component/component:syn-range-tick/vue/SynVueRangeTick.vue +1 -1
- package/data/layers/full/component/component:syn-select/angular/select.component.ts +1 -1
- package/data/layers/full/component/component:syn-select/vue/SynVueSelect.vue +1 -1
- package/data/layers/full/component/component:syn-side-nav/angular/side-nav.component.ts +1 -1
- package/data/layers/full/component/component:syn-side-nav/vue/SynVueSideNav.vue +1 -1
- package/data/layers/full/component/component:syn-spinner/angular/spinner.component.ts +1 -1
- package/data/layers/full/component/component:syn-spinner/vue/SynVueSpinner.vue +1 -1
- package/data/layers/full/component/component:syn-switch/angular/switch.component.ts +1 -1
- package/data/layers/full/component/component:syn-switch/vue/SynVueSwitch.vue +1 -1
- package/data/layers/full/component/component:syn-tab/angular/tab.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab/vue/SynVueTab.vue +1 -1
- package/data/layers/full/component/component:syn-tab-group/angular/tab-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab-group/vue/SynVueTabGroup.vue +1 -1
- package/data/layers/full/component/component:syn-tab-panel/angular/tab-panel.component.ts +1 -1
- package/data/layers/full/component/component:syn-tab-panel/vue/SynVueTabPanel.vue +1 -1
- package/data/layers/full/component/component:syn-tag/angular/tag.component.ts +1 -1
- package/data/layers/full/component/component:syn-tag/vue/SynVueTag.vue +1 -1
- package/data/layers/full/component/component:syn-tag-group/angular/tag-group.component.ts +1 -1
- package/data/layers/full/component/component:syn-tag-group/vue/SynVueTagGroup.vue +1 -1
- package/data/layers/full/component/component:syn-textarea/angular/textarea.component.ts +1 -1
- package/data/layers/full/component/component:syn-textarea/vue/SynVueTextarea.vue +1 -1
- package/data/layers/full/component/component:syn-tooltip/angular/tooltip.component.ts +1 -1
- package/data/layers/full/component/component:syn-tooltip/vue/SynVueTooltip.vue +1 -1
- package/data/layers/full/component/component:syn-validate/angular/validate.component.ts +1 -1
- package/data/layers/full/component/component:syn-validate/vue/SynVueValidate.vue +1 -1
- package/data/layers/full/setup/setup:angular-package/angular/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:angular-package/angular/README.md +4 -0
- package/data/layers/full/setup/setup:angular-package/angular/package.json +1 -1
- package/data/layers/full/setup/setup:components-package/components/CHANGELOG.md +18 -0
- package/data/layers/full/setup/setup:components-package/components/README.md +84 -2
- package/data/layers/full/setup/setup:components-package/components/package.json +8 -5
- package/data/layers/full/setup/setup:react-package/react/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:react-package/react/README.md +4 -0
- package/data/layers/full/setup/setup:react-package/react/package.json +1 -1
- package/data/layers/full/setup/setup:react-package/react/syn-jsx-elements.ts +19 -0
- package/data/layers/full/setup/setup:tokens-package/tokens/CHANGELOG.md +16 -0
- package/data/layers/full/setup/setup:tokens-package/tokens/README.md +119 -19
- package/data/layers/full/setup/setup:tokens-package/tokens/package.json +11 -6
- package/data/layers/full/setup/setup:vue-package/vue/CHANGELOG.md +19 -0
- package/data/layers/full/setup/setup:vue-package/vue/README.md +4 -0
- package/data/layers/full/setup/setup:vue-package/vue/package.json +9 -2
- package/data/layers/full/tokens/charts/js/index.d.ts +664 -0
- package/data/layers/full/tokens/charts/js/index.js +664 -0
- package/data/layers/full/tokens/charts/scss/_tokens.scss +136 -0
- package/data/layers/full/tokens/charts/themes/sick2025_dark.css +142 -0
- package/data/layers/full/tokens/charts/themes/sick2025_light.css +142 -0
- package/data/layers/full/tokens/figma-variables/sick2025-light.json +12 -12
- package/data/layers/full/tokens/js/index.d.ts +1 -1
- package/data/layers/full/tokens/js/index.js +1 -1
- package/data/layers/full/tokens/scss/_tokens.scss +1 -1
- package/data/layers/full/tokens/themes/sick2018_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2018_light.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_dark.css +1 -1
- package/data/layers/full/tokens/themes/sick2025_light.css +12 -12
- package/data/layers/interface/component/component:syn-chart.json +51 -0
- package/data/layers/interface/component/component:syn-chart.md +61 -0
- package/data/layers/rules/component/component:syn-chart.md +39 -0
- package/data/manifest.json +3 -3
- package/package.json +5 -5
- package/dist/intentPolicy/capabilities/action.d.ts +0 -2
- package/dist/intentPolicy/capabilities/action.js +0 -26
- package/dist/intentPolicy/capabilities/assistance.d.ts +0 -2
- package/dist/intentPolicy/capabilities/assistance.js +0 -10
- package/dist/intentPolicy/capabilities/disclosure.d.ts +0 -2
- package/dist/intentPolicy/capabilities/disclosure.js +0 -14
- package/dist/intentPolicy/capabilities/feedback.d.ts +0 -2
- package/dist/intentPolicy/capabilities/feedback.js +0 -42
- package/dist/intentPolicy/capabilities/index.d.ts +0 -6
- package/dist/intentPolicy/capabilities/index.js +0 -22
- package/dist/intentPolicy/capabilities/input.d.ts +0 -2
- package/dist/intentPolicy/capabilities/input.js +0 -38
- package/dist/intentPolicy/capabilities/navigation.d.ts +0 -2
- package/dist/intentPolicy/capabilities/navigation.js +0 -54
- package/dist/intentPolicy/capabilities/status.d.ts +0 -2
- package/dist/intentPolicy/capabilities/status.js +0 -14
- package/dist/intentPolicy/capabilities/structure.d.ts +0 -2
- package/dist/intentPolicy/capabilities/structure.js +0 -22
- package/dist/intentPolicy/categories/action.d.ts +0 -2
- package/dist/intentPolicy/categories/action.js +0 -4
- package/dist/intentPolicy/categories/assistance.d.ts +0 -2
- package/dist/intentPolicy/categories/assistance.js +0 -4
- package/dist/intentPolicy/categories/disclosure.d.ts +0 -2
- package/dist/intentPolicy/categories/disclosure.js +0 -4
- package/dist/intentPolicy/categories/feedback.d.ts +0 -2
- package/dist/intentPolicy/categories/feedback.js +0 -4
- package/dist/intentPolicy/categories/index.d.ts +0 -5
- package/dist/intentPolicy/categories/index.js +0 -22
- package/dist/intentPolicy/categories/input.d.ts +0 -2
- package/dist/intentPolicy/categories/input.js +0 -4
- package/dist/intentPolicy/categories/navigation.d.ts +0 -2
- package/dist/intentPolicy/categories/navigation.js +0 -4
- package/dist/intentPolicy/categories/status.d.ts +0 -2
- package/dist/intentPolicy/categories/status.js +0 -4
- package/dist/intentPolicy/categories/structure.d.ts +0 -2
- package/dist/intentPolicy/categories/structure.js +0 -4
- package/dist/intentPolicy/intents/action.d.ts +0 -2
- package/dist/intentPolicy/intents/action.js +0 -38
- package/dist/intentPolicy/intents/assistance.d.ts +0 -2
- package/dist/intentPolicy/intents/assistance.js +0 -14
- package/dist/intentPolicy/intents/disclosure.d.ts +0 -2
- package/dist/intentPolicy/intents/disclosure.js +0 -20
- package/dist/intentPolicy/intents/feedback.d.ts +0 -2
- package/dist/intentPolicy/intents/feedback.js +0 -32
- package/dist/intentPolicy/intents/index.d.ts +0 -7
- package/dist/intentPolicy/intents/index.js +0 -23
- package/dist/intentPolicy/intents/input.d.ts +0 -2
- package/dist/intentPolicy/intents/input.js +0 -62
- package/dist/intentPolicy/intents/navigation.d.ts +0 -2
- package/dist/intentPolicy/intents/navigation.js +0 -44
- package/dist/intentPolicy/intents/status.d.ts +0 -2
- package/dist/intentPolicy/intents/status.js +0 -26
- package/dist/intentPolicy/intents/structure.d.ts +0 -2
- package/dist/intentPolicy/intents/structure.js +0 -32
- package/dist/intentPolicy/patterns/action.d.ts +0 -2
- package/dist/intentPolicy/patterns/action.js +0 -195
- package/dist/intentPolicy/patterns/assistance.d.ts +0 -2
- package/dist/intentPolicy/patterns/assistance.js +0 -13
- package/dist/intentPolicy/patterns/disclosure.d.ts +0 -2
- package/dist/intentPolicy/patterns/disclosure.js +0 -23
- package/dist/intentPolicy/patterns/feedback.d.ts +0 -2
- package/dist/intentPolicy/patterns/feedback.js +0 -44
- package/dist/intentPolicy/patterns/index.d.ts +0 -6
- package/dist/intentPolicy/patterns/index.js +0 -22
- package/dist/intentPolicy/patterns/input.d.ts +0 -2
- package/dist/intentPolicy/patterns/input.js +0 -99
- package/dist/intentPolicy/patterns/navigation.d.ts +0 -2
- package/dist/intentPolicy/patterns/navigation.js +0 -192
- package/dist/intentPolicy/patterns/status.d.ts +0 -2
- package/dist/intentPolicy/patterns/status.js +0 -32
- package/dist/intentPolicy/patterns/structure.d.ts +0 -2
- package/dist/intentPolicy/patterns/structure.js +0 -107
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"attributes": [
|
|
3
|
+
{
|
|
4
|
+
"default": "'categorical'",
|
|
5
|
+
"description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
|
|
6
|
+
"fieldName": "palette",
|
|
7
|
+
"name": "palette",
|
|
8
|
+
"reflects": true,
|
|
9
|
+
"type": "SynChartPalette"
|
|
10
|
+
}
|
|
11
|
+
],
|
|
12
|
+
"cssParts": [
|
|
13
|
+
{
|
|
14
|
+
"description": "The component's base wrapper.",
|
|
15
|
+
"name": "base"
|
|
16
|
+
}
|
|
17
|
+
],
|
|
18
|
+
"dependencies": [],
|
|
19
|
+
"documentation": "https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs",
|
|
20
|
+
"events": [],
|
|
21
|
+
"figmaDocsId": "https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0",
|
|
22
|
+
"methods": [
|
|
23
|
+
{
|
|
24
|
+
"description": "Returns the underlying ECharts instance, giving direct access to the full\n[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).\n\nUse this when the `config` property alone is not sufficient — for example to\nimperatively call `setOption()` with custom merge flags, listen to ECharts events,\ntrigger actions, or retrieve chart data.\n\nReturns `undefined` if called before the component has been connected to the DOM\n(i.e. before `firstUpdated` has run).",
|
|
25
|
+
"name": "getInstance",
|
|
26
|
+
"parameters": []
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"properties": [
|
|
30
|
+
{
|
|
31
|
+
"access": "public",
|
|
32
|
+
"default": "{}",
|
|
33
|
+
"description": "The ECharts configuration option object.\n\nThis property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.\nConsult the [ECharts option documentation](https://echarts.apache.org/en/option.html)\nand assign the object directly to this property.\n\n> **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported.\n> Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested.\n\nAssigning a new object completely replaces the previous chart configuration (`notMerge: true`).\nTo update only parts of the chart, access the underlying ECharts instance directly and\ncall `setOption()` with custom merge options.",
|
|
34
|
+
"name": "config",
|
|
35
|
+
"type": "ECConfig"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"access": "public",
|
|
39
|
+
"default": "'categorical'",
|
|
40
|
+
"description": "The color palette to apply to chart series.\n\n- `categorical` (default) — 12 distinct colors for comparing unrelated data series\n- `sequential-01` … `sequential-07` — 10-step single-hue ramps:\n `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral\n- `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`,\n `sequential-status-success`, `sequential-status-warning` — 10-step status ramps\n\nThe palette sets the ECharts `color` array. If `config.color` is explicitly provided,\nit takes precedence over the palette.",
|
|
41
|
+
"name": "palette",
|
|
42
|
+
"type": "SynChartPalette"
|
|
43
|
+
}
|
|
44
|
+
],
|
|
45
|
+
"since": "0.0.0",
|
|
46
|
+
"slots": [],
|
|
47
|
+
"sourceModulePath": "components/chart/chart.js",
|
|
48
|
+
"status": "experimental",
|
|
49
|
+
"summary": "The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)",
|
|
50
|
+
"tagName": "syn-chart"
|
|
51
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# syn-chart
|
|
2
|
+
|
|
3
|
+
## Summary
|
|
4
|
+
|
|
5
|
+
The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)
|
|
6
|
+
|
|
7
|
+
## Documentation
|
|
8
|
+
|
|
9
|
+
- [Component Documentation](https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs)
|
|
10
|
+
- [Figma Examples](https://www.figma.com/design/9IpXnDH4GFziUH9sOpnK8V/Chart-Library?node-id=0-1&p=f&t=PkQKC2p7WIr2k0og-0)
|
|
11
|
+
|
|
12
|
+
## Class Information
|
|
13
|
+
|
|
14
|
+
- **Tag Name:** `syn-chart`
|
|
15
|
+
- **Import Example:** `import SynChart from '@synergy-design-system/components/components/chart/chart.js';`
|
|
16
|
+
|
|
17
|
+
## Usage Information
|
|
18
|
+
|
|
19
|
+
- **Status:** experimental
|
|
20
|
+
- **Since:** 0.0.0
|
|
21
|
+
|
|
22
|
+
## Available Properties
|
|
23
|
+
|
|
24
|
+
### config
|
|
25
|
+
|
|
26
|
+
attribute: -
|
|
27
|
+
reflects: -
|
|
28
|
+
type: `ECConfig`
|
|
29
|
+
default: `{}`
|
|
30
|
+
|
|
31
|
+
The ECharts configuration option object. This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`. Consult the [ECharts option documentation](https://echarts.apache.org/en/option.html) and assign the object directly to this property. > **Note:** Currently only **line charts** (`series[].type: 'line'`) are supported. > Support for additional chart types (bar, pie, etc.) will be added in future releases or can be requested. Assigning a new object completely replaces the previous chart configuration (`notMerge: true`). To update only parts of the chart, access the underlying ECharts instance directly and call `setOption()` with custom merge options.
|
|
32
|
+
|
|
33
|
+
### palette
|
|
34
|
+
|
|
35
|
+
attribute: `palette`
|
|
36
|
+
reflects: yes
|
|
37
|
+
type: `SynChartPalette`
|
|
38
|
+
default: `'categorical'`
|
|
39
|
+
|
|
40
|
+
The color palette to apply to chart series. - `categorical` (default) — 12 distinct colors for comparing unrelated data series - `sequential-01` … `sequential-07` — 10-step single-hue ramps: `01`=primary, `02`=accent, `03`=muted, `04`=purple, `05`=teal, `06`=magenta, `07`=neutral - `sequential-status-critical`, `sequential-status-error`, `sequential-status-info`, `sequential-status-success`, `sequential-status-warning` — 10-step status ramps The palette sets the ECharts `color` array. If `config.color` is explicitly provided, it takes precedence over the palette.
|
|
41
|
+
|
|
42
|
+
## Available Methods
|
|
43
|
+
|
|
44
|
+
### getInstance()
|
|
45
|
+
|
|
46
|
+
parameters: -
|
|
47
|
+
returns: `void`
|
|
48
|
+
|
|
49
|
+
Returns the underlying ECharts instance, giving direct access to the full
|
|
50
|
+
[ECharts API](https://echarts.apache.org/en/api.html#echartsInstance).
|
|
51
|
+
|
|
52
|
+
Use this when the `config` property alone is not sufficient — for example to
|
|
53
|
+
imperatively call `setOption()` with custom merge flags, listen to ECharts events,
|
|
54
|
+
trigger actions, or retrieve chart data.
|
|
55
|
+
|
|
56
|
+
Returns `undefined` if called before the component has been connected to the DOM
|
|
57
|
+
(i.e. before `firstUpdated` has run).
|
|
58
|
+
|
|
59
|
+
## Available CSS Parts
|
|
60
|
+
|
|
61
|
+
- `base`: The component's base wrapper.
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# syn-chart
|
|
2
|
+
|
|
3
|
+
## Summary
|
|
4
|
+
|
|
5
|
+
The `<syn-chart>` component is a container for displaying charts. It provides a structured layout and styling for chart elements, allowing for consistent presentation across different types of charts. The chart component is based on [Apache ECharts](https://echarts.apache.org)
|
|
6
|
+
|
|
7
|
+
## Common Use Cases
|
|
8
|
+
|
|
9
|
+
- Display time-based trends such as sensor values, throughput, or production metrics.
|
|
10
|
+
- Compare multiple data series in dashboards to identify differences and anomalies.
|
|
11
|
+
- Present historical data to support analysis, reporting, and decision-making.
|
|
12
|
+
- Visualize key performance indicators where users need a fast visual overview.
|
|
13
|
+
|
|
14
|
+
## Usage Guidelines
|
|
15
|
+
|
|
16
|
+
### Data and Purpose
|
|
17
|
+
|
|
18
|
+
- Use charts when visual pattern recognition (trends, peaks, outliers) is more helpful than raw tables.
|
|
19
|
+
- Keep the chart goal specific and clear (for example trend over time, comparison, distribution).
|
|
20
|
+
- Avoid using charts when exact value lookup is the primary task; provide a table or value list as a complement.
|
|
21
|
+
|
|
22
|
+
### Visual Clarity
|
|
23
|
+
|
|
24
|
+
- Use clear axis labels, units, and legends so users can understand the data context immediately.
|
|
25
|
+
- Limit the number of simultaneously visible series to reduce visual noise.
|
|
26
|
+
- Choose palettes that maintain sufficient contrast between series and background.
|
|
27
|
+
- Avoid excessive decoration and effects that do not add analytical value.
|
|
28
|
+
|
|
29
|
+
### Responsiveness and Density
|
|
30
|
+
|
|
31
|
+
- Ensure labels, tooltips, and legends remain readable at small viewport sizes.
|
|
32
|
+
- Prevent overlapping labels and crowded markers by simplifying or reducing displayed data where needed.
|
|
33
|
+
- Keep chart dimensions appropriate for the amount and complexity of the data shown.
|
|
34
|
+
|
|
35
|
+
## Accessibility
|
|
36
|
+
|
|
37
|
+
- Do not rely on color alone to distinguish data series; use labels, markers, or patterns where helpful.
|
|
38
|
+
- Provide a text alternative or data table for users who cannot interpret visualizations reliably.
|
|
39
|
+
- Ensure chart context is available in surrounding text, including what is shown and why it matters.
|
package/data/manifest.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"builtAt": "2026-
|
|
2
|
+
"builtAt": "2026-06-02T08:27:54.929Z",
|
|
3
3
|
"sources": [
|
|
4
4
|
{
|
|
5
5
|
"entityCount": 4,
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"status": "success"
|
|
13
13
|
},
|
|
14
14
|
{
|
|
15
|
-
"entityCount":
|
|
15
|
+
"entityCount": 57,
|
|
16
16
|
"source": "components",
|
|
17
17
|
"status": "success"
|
|
18
18
|
},
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"status": "success"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
|
-
"entityCount":
|
|
35
|
+
"entityCount": 17,
|
|
36
36
|
"source": "tokens",
|
|
37
37
|
"status": "success"
|
|
38
38
|
},
|
package/package.json
CHANGED
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"serve-handler": "^6.1.7",
|
|
23
23
|
"typescript": "^5.9.3",
|
|
24
24
|
"zod": "^4.3.6",
|
|
25
|
-
"@synergy-design-system/components": "3.14.0",
|
|
26
|
-
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
27
25
|
"@synergy-design-system/docs": "0.1.0",
|
|
28
|
-
"@synergy-design-system/
|
|
26
|
+
"@synergy-design-system/components": "3.15.0",
|
|
27
|
+
"@synergy-design-system/eslint-config-syn": "^0.1.0",
|
|
28
|
+
"@synergy-design-system/fonts": "1.0.6",
|
|
29
29
|
"@synergy-design-system/styles": "2.1.0",
|
|
30
|
-
"@synergy-design-system/
|
|
30
|
+
"@synergy-design-system/tokens": "^3.15.0"
|
|
31
31
|
},
|
|
32
32
|
"exports": {
|
|
33
33
|
".": {
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
},
|
|
71
71
|
"types": "./dist/index.d.ts",
|
|
72
72
|
"type": "module",
|
|
73
|
-
"version": "3.
|
|
73
|
+
"version": "3.10.0",
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build:all": "METADATA_LOG_LEVEL=info pnpm run build:ts && RUN_STORYBOOK_SCRAPER=true pnpm run build:data",
|
|
76
76
|
"build": "METADATA_LOG_LEVEL=info pnpm run build:ts && pnpm run build:data",
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export const actionCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['action'],
|
|
4
|
-
target: {
|
|
5
|
-
id: 'component:syn-button',
|
|
6
|
-
kind: 'component',
|
|
7
|
-
name: 'syn-button',
|
|
8
|
-
},
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['action'],
|
|
12
|
-
target: {
|
|
13
|
-
id: 'component:syn-icon-button',
|
|
14
|
-
kind: 'component',
|
|
15
|
-
name: 'syn-icon-button',
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
categories: ['action'],
|
|
20
|
-
target: {
|
|
21
|
-
id: 'component:syn-button-group',
|
|
22
|
-
kind: 'component',
|
|
23
|
-
name: 'syn-button-group',
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
];
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export const assistanceCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['assistance'],
|
|
4
|
-
target: { id: 'component:syn-tooltip', kind: 'component', name: 'syn-tooltip' },
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
categories: ['assistance'],
|
|
8
|
-
target: { id: 'component:syn-icon', kind: 'component', name: 'syn-icon' },
|
|
9
|
-
},
|
|
10
|
-
];
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export const disclosureCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['disclosure'],
|
|
4
|
-
target: { id: 'component:syn-details', kind: 'component', name: 'syn-details' },
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
categories: ['disclosure'],
|
|
8
|
-
target: { id: 'component:syn-accordion', kind: 'component', name: 'syn-accordion' },
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['disclosure'],
|
|
12
|
-
target: { id: 'component:syn-popup', kind: 'component', name: 'syn-popup' },
|
|
13
|
-
},
|
|
14
|
-
];
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export const feedbackCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['feedback'],
|
|
4
|
-
target: {
|
|
5
|
-
id: 'component:syn-alert',
|
|
6
|
-
kind: 'component',
|
|
7
|
-
name: 'syn-alert',
|
|
8
|
-
},
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['feedback'],
|
|
12
|
-
target: {
|
|
13
|
-
id: 'component:syn-badge',
|
|
14
|
-
kind: 'component',
|
|
15
|
-
name: 'syn-badge',
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
categories: ['feedback'],
|
|
20
|
-
target: {
|
|
21
|
-
id: 'component:syn-tag',
|
|
22
|
-
kind: 'component',
|
|
23
|
-
name: 'syn-tag',
|
|
24
|
-
},
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
categories: ['feedback'],
|
|
28
|
-
target: {
|
|
29
|
-
id: 'component:syn-tag-group',
|
|
30
|
-
kind: 'component',
|
|
31
|
-
name: 'syn-tag-group',
|
|
32
|
-
},
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
categories: ['feedback'],
|
|
36
|
-
target: {
|
|
37
|
-
id: 'component:syn-validate',
|
|
38
|
-
kind: 'component',
|
|
39
|
-
name: 'syn-validate',
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
];
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { IntentCapability } from '../types.js';
|
|
2
|
-
/**
|
|
3
|
-
* A comprehensive list of intent capabilities, categorized by their respective intent categories.
|
|
4
|
-
* Each capability outlines the specific functionalities and features that an intent can support within a user interface, providing designers and developers with a clear understanding of how to effectively implement and leverage these capabilities to enhance user interactions and overall experience.
|
|
5
|
-
*/
|
|
6
|
-
export declare const targetCapabilities: IntentCapability[];
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { actionCapabilities } from './action.js';
|
|
2
|
-
import { assistanceCapabilities } from './assistance.js';
|
|
3
|
-
import { disclosureCapabilities } from './disclosure.js';
|
|
4
|
-
import { feedbackCapabilities } from './feedback.js';
|
|
5
|
-
import { inputCapabilities } from './input.js';
|
|
6
|
-
import { navigationCapabilities } from './navigation.js';
|
|
7
|
-
import { statusCapabilities } from './status.js';
|
|
8
|
-
import { structureCapabilities } from './structure.js';
|
|
9
|
-
/**
|
|
10
|
-
* A comprehensive list of intent capabilities, categorized by their respective intent categories.
|
|
11
|
-
* Each capability outlines the specific functionalities and features that an intent can support within a user interface, providing designers and developers with a clear understanding of how to effectively implement and leverage these capabilities to enhance user interactions and overall experience.
|
|
12
|
-
*/
|
|
13
|
-
export const targetCapabilities = [
|
|
14
|
-
...actionCapabilities,
|
|
15
|
-
...feedbackCapabilities,
|
|
16
|
-
...inputCapabilities,
|
|
17
|
-
...navigationCapabilities,
|
|
18
|
-
...disclosureCapabilities,
|
|
19
|
-
...statusCapabilities,
|
|
20
|
-
...assistanceCapabilities,
|
|
21
|
-
...structureCapabilities,
|
|
22
|
-
];
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
export const inputCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['input'],
|
|
4
|
-
target: { id: 'component:syn-input', kind: 'component', name: 'syn-input' },
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
categories: ['input'],
|
|
8
|
-
target: { id: 'component:syn-textarea', kind: 'component', name: 'syn-textarea' },
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['input'],
|
|
12
|
-
target: { id: 'component:syn-select', kind: 'component', name: 'syn-select' },
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
categories: ['input'],
|
|
16
|
-
target: { id: 'component:syn-combobox', kind: 'component', name: 'syn-combobox' },
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
categories: ['input'],
|
|
20
|
-
target: { id: 'component:syn-checkbox', kind: 'component', name: 'syn-checkbox' },
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
categories: ['input'],
|
|
24
|
-
target: { id: 'component:syn-switch', kind: 'component', name: 'syn-switch' },
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
categories: ['input'],
|
|
28
|
-
target: { id: 'component:syn-radio-group', kind: 'component', name: 'syn-radio-group' },
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
categories: ['input'],
|
|
32
|
-
target: { id: 'component:syn-file', kind: 'component', name: 'syn-file' },
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
categories: ['input'],
|
|
36
|
-
target: { id: 'component:syn-range', kind: 'component', name: 'syn-range' },
|
|
37
|
-
},
|
|
38
|
-
];
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
export const navigationCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['navigation', 'action'],
|
|
4
|
-
target: {
|
|
5
|
-
classes: ['syn-link'],
|
|
6
|
-
id: 'style:syn-link',
|
|
7
|
-
kind: 'style',
|
|
8
|
-
layer: 'examples',
|
|
9
|
-
selector: '.syn-link',
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
categories: ['navigation'],
|
|
14
|
-
target: {
|
|
15
|
-
classes: ['syn-link-list'],
|
|
16
|
-
id: 'style:syn-link-list',
|
|
17
|
-
kind: 'style',
|
|
18
|
-
layer: 'examples',
|
|
19
|
-
selector: '.syn-link-list',
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
categories: ['navigation'],
|
|
24
|
-
target: { id: 'component:syn-tab-group', kind: 'component', name: 'syn-tab-group' },
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
categories: ['navigation'],
|
|
28
|
-
target: { id: 'component:syn-menu', kind: 'component', name: 'syn-menu' },
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
categories: ['navigation'],
|
|
32
|
-
target: { id: 'component:syn-dropdown', kind: 'component', name: 'syn-dropdown' },
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
categories: ['navigation'],
|
|
36
|
-
target: { id: 'component:syn-pagination', kind: 'component', name: 'syn-pagination' },
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
categories: ['navigation'],
|
|
40
|
-
target: { id: 'component:syn-breadcrumb', kind: 'component', name: 'syn-breadcrumb' },
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
categories: ['navigation'],
|
|
44
|
-
target: { id: 'component:syn-breadcrumb-item', kind: 'component', name: 'syn-breadcrumb-item' },
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
categories: ['navigation'],
|
|
48
|
-
target: { id: 'component:syn-side-nav', kind: 'component', name: 'syn-side-nav' },
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
categories: ['navigation'],
|
|
52
|
-
target: { id: 'component:syn-nav-item', kind: 'component', name: 'syn-nav-item' },
|
|
53
|
-
},
|
|
54
|
-
];
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export const statusCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['status'],
|
|
4
|
-
target: { id: 'component:syn-spinner', kind: 'component', name: 'syn-spinner' },
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
categories: ['status'],
|
|
8
|
-
target: { id: 'component:syn-progress-bar', kind: 'component', name: 'syn-progress-bar' },
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['status'],
|
|
12
|
-
target: { id: 'component:syn-progress-ring', kind: 'component', name: 'syn-progress-ring' },
|
|
13
|
-
},
|
|
14
|
-
];
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export const structureCapabilities = [
|
|
2
|
-
{
|
|
3
|
-
categories: ['structure'],
|
|
4
|
-
target: { id: 'component:syn-dialog', kind: 'component', name: 'syn-dialog' },
|
|
5
|
-
},
|
|
6
|
-
{
|
|
7
|
-
categories: ['structure'],
|
|
8
|
-
target: { id: 'component:syn-drawer', kind: 'component', name: 'syn-drawer' },
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
categories: ['structure'],
|
|
12
|
-
target: { id: 'component:syn-header', kind: 'component', name: 'syn-header' },
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
categories: ['structure'],
|
|
16
|
-
target: { id: 'component:syn-card', kind: 'component', name: 'syn-card' },
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
categories: ['structure'],
|
|
20
|
-
target: { id: 'component:syn-divider', kind: 'component', name: 'syn-divider' },
|
|
21
|
-
},
|
|
22
|
-
];
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* A comprehensive list of intent categories, each representing a distinct classification of user intents that can be utilized within a user interface.
|
|
3
|
-
* These categories serve as a foundational framework for organizing and understanding the various types of user interactions and behaviors that can occur within a digital product, enabling designers and developers to create more intuitive and user-friendly interfaces that effectively address the needs and goals of their users.
|
|
4
|
-
*/
|
|
5
|
-
export declare const intentCategories: import("../types.js").IntentCategory[];
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { actionCategory } from './action.js';
|
|
2
|
-
import { assistanceCategory } from './assistance.js';
|
|
3
|
-
import { disclosureCategory } from './disclosure.js';
|
|
4
|
-
import { feedbackCategory } from './feedback.js';
|
|
5
|
-
import { inputCategory } from './input.js';
|
|
6
|
-
import { navigationCategory } from './navigation.js';
|
|
7
|
-
import { statusCategory } from './status.js';
|
|
8
|
-
import { structureCategory } from './structure.js';
|
|
9
|
-
/**
|
|
10
|
-
* A comprehensive list of intent categories, each representing a distinct classification of user intents that can be utilized within a user interface.
|
|
11
|
-
* These categories serve as a foundational framework for organizing and understanding the various types of user interactions and behaviors that can occur within a digital product, enabling designers and developers to create more intuitive and user-friendly interfaces that effectively address the needs and goals of their users.
|
|
12
|
-
*/
|
|
13
|
-
export const intentCategories = [
|
|
14
|
-
actionCategory,
|
|
15
|
-
feedbackCategory,
|
|
16
|
-
inputCategory,
|
|
17
|
-
navigationCategory,
|
|
18
|
-
disclosureCategory,
|
|
19
|
-
statusCategory,
|
|
20
|
-
assistanceCategory,
|
|
21
|
-
structureCategory,
|
|
22
|
-
];
|