@synergy-design-system/metadata 3.16.0 → 3.17.0

package/data/layers/examples/component/component:syn-chart.md

@@ -13,6 +13,7 @@ The default story demonstrates a basic line chart configuration. The chart is co
       xAxis: {
         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
         type: "category",
+        name: "Days",
       },
       yAxis: { type: "value" },
     };
@@ -29,12 +30,14 @@ The config property is the main way to configure the chart. It accepts an object
 ```html
 <syn-chart id="chart-config"></syn-chart>
 <script type="module">
-  const chart = document.querySelector("#chart-config");
-  chart.config = {
-    series: [{ data: [150, 230, 224], type: "line" }],
-    xAxis: { data: ["Mon", "Tue", "Wed"], type: "category" },
-    yAxis: { type: "value" },
-  };
+  const charts = document.querySelectorAll("#chart-config");
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [{ data: [150, 230, 224], type: "line" }],
+      xAxis: { data: ["Mon", "Tue", "Wed"], type: "category" },
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```
 
@@ -47,51 +50,53 @@ Use the palette attribute to apply a Synergy design token color palette to chart
 ```html
 <syn-chart id="chart-palette" palette="sequential-01"></syn-chart>
 <script type="module">
-  const chart = document.querySelector("#chart-palette");
-  chart.config = {
-    series: [
-      {
-        data: [150, 230, 224, 218, 135, 147, 260],
-        name: "Series A",
-        type: "line",
-      },
-      {
-        data: [80, 130, 180, 100, 90, 120, 200],
-        name: "Series B",
-        type: "line",
-      },
-      {
-        data: [200, 160, 140, 170, 210, 180, 150],
-        name: "Series C",
-        type: "line",
-      },
-      {
-        data: [100, 120, 150, 80, 70, 110, 130],
-        name: "Series D",
-        type: "line",
-      },
-      {
-        data: [180, 200, 170, 190, 220, 210, 240],
-        name: "Series E",
-        type: "line",
-      },
-      {
-        data: [90, 110, 130, 70, 60, 100, 120],
-        name: "Series F",
-        type: "line",
-      },
-      {
-        data: [160, 190, 150, 200, 230, 220, 250],
-        name: "Series G",
-        type: "line",
+  const charts = document.querySelectorAll("#chart-palette");
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [
+        {
+          data: [150, 230, 224, 218, 135, 147, 260],
+          name: "Series A",
+          type: "line",
+        },
+        {
+          data: [80, 130, 180, 100, 90, 120, 200],
+          name: "Series B",
+          type: "line",
+        },
+        {
+          data: [200, 160, 140, 170, 210, 180, 150],
+          name: "Series C",
+          type: "line",
+        },
+        {
+          data: [100, 120, 150, 80, 70, 110, 130],
+          name: "Series D",
+          type: "line",
+        },
+        {
+          data: [180, 200, 170, 190, 220, 210, 240],
+          name: "Series E",
+          type: "line",
+        },
+        {
+          data: [90, 110, 130, 70, 60, 100, 120],
+          name: "Series F",
+          type: "line",
+        },
+        {
+          data: [160, 190, 150, 200, 230, 220, 250],
+          name: "Series G",
+          type: "line",
+        },
+      ],
+      xAxis: {
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        type: "category",
       },
-    ],
-    xAxis: {
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      type: "category",
-    },
-    yAxis: { type: "value" },
-  };
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```
 
@@ -114,20 +119,22 @@ Use getInstance() to access the underlying ECharts instance directly and work wi
   event payload.
 </p>
 <script type="module">
-  const chart = document.querySelector("#chart-get-instance");
-  chart.config = {
-    series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: "line" }],
-    tooltip: { trigger: "item" },
-    xAxis: {
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      type: "category",
-    },
-    yAxis: { type: "value" },
-  };
-  const chartInstance = chart.getInstance();
-  chartInstance.on("click", (params) =>
-    console.log("ECharts click event:", params),
-  );
+  const charts = document.querySelectorAll("#chart-get-instance");
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: "line" }],
+      tooltip: { trigger: "item" },
+      xAxis: {
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        type: "category",
+      },
+      yAxis: { type: "value" },
+    };
+    const chartInstance = chart.getInstance();
+    chartInstance.on("click", (params) =>
+      console.log("ECharts click event:", params),
+    );
+  });
 </script>
 ```
 
@@ -140,52 +147,54 @@ You can use multiple charts in one <syn-chart> instance, each with its own confi
 ```html
 <syn-chart id="chart-multiple-charts" palette="categorical"></syn-chart>
 <script type="module">
-  const chart = document.querySelector("#chart-multiple-charts");
+  const charts = document.querySelectorAll("#chart-multiple-charts");
 
   const getHexValueFromVariable = (val) =>
     getComputedStyle(document.documentElement).getPropertyValue(val).trim();
 
-  chart.config = {
-    series: [
-      {
-        data: [160, 185, 180, 175, 150, 160, 190],
-        name: "Series A",
-        type: "line",
-      },
-      {
-        data: [170, 165, 155, 168, 180, 170, 158],
-        name: "Series B",
-        type: "line",
-      },
-      {
-        data: [165, 175, 158, 172, 182, 175, 185],
-        name: "Series C",
-        type: "line",
-      },
-      {
-        color: [getHexValueFromVariable("--syn-sequential-05-80")],
-        data: [80, 60, 90, 50, 70, 55, 85],
-        name: "Series D",
-        type: "line",
-      },
-      {
-        color: [getHexValueFromVariable("--syn-sequential-05-60")],
-        data: [65, 75, 55, 80, 45, 70, 60],
-        name: "Series E",
-        type: "line",
-      },
-      {
-        color: [getHexValueFromVariable("--syn-sequential-05-40")],
-        data: [50, 70, 60, 45, 55, 65, 75],
-        name: "Series F",
-        type: "line",
+  charts.forEach((chart) => {
+    chart.config = {
+      series: [
+        {
+          data: [160, 185, 180, 175, 150, 160, 190],
+          name: "Series A",
+          type: "line",
+        },
+        {
+          data: [170, 165, 155, 168, 180, 170, 158],
+          name: "Series B",
+          type: "line",
+        },
+        {
+          data: [165, 175, 158, 172, 182, 175, 185],
+          name: "Series C",
+          type: "line",
+        },
+        {
+          color: [getHexValueFromVariable("--syn-sequential-05-80")],
+          data: [80, 60, 90, 50, 70, 55, 85],
+          name: "Series D",
+          type: "line",
+        },
+        {
+          color: [getHexValueFromVariable("--syn-sequential-05-60")],
+          data: [65, 75, 55, 80, 45, 70, 60],
+          name: "Series E",
+          type: "line",
+        },
+        {
+          color: [getHexValueFromVariable("--syn-sequential-05-40")],
+          data: [50, 70, 60, 45, 55, 65, 75],
+          name: "Series F",
+          type: "line",
+        },
+      ],
+      xAxis: {
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        type: "category",
       },
-    ],
-    xAxis: {
-      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-      type: "category",
-    },
-    yAxis: { type: "value" },
-  };
+      yAxis: { type: "value" },
+    };
+  });
 </script>
 ```

package/data/layers/examples/component/component:syn-combobox.md

@@ -491,24 +491,6 @@ The filtered options shown in the list can be customized by passing a function t
   // the highlight option renderer utility function can be imported via:
   // import { highlightOptionRenderer } from '@synergy-design-system/components';
 
-  // preview-ignore:start
-  const highlightOptionRenderer = (e, t) => {
-    if (!t) return e;
-    let n = e.cloneNode(!0),
-      r = n.getTextLabel();
-    n.selected = e.selected;
-    let i = r.toLowerCase().indexOf(t.toLowerCase()),
-      a = n.innerHTML.indexOf(r),
-      o = document.createElement(`mark`);
-    ((o.textContent = r.slice(i, i + t.length)),
-      o.classList.add(`syn-highlight-style`));
-    let s = r.replace(new RegExp(t, `i`), o.outerHTML),
-      c = n.innerHTML.slice(0, a),
-      l = n.innerHTML.slice(a + r.length);
-    return ((n.innerHTML = c.concat(s, l)), n);
-  };
-  // preview-ignore:end
-
   const comboboxes = document.querySelectorAll(".highlight-combobox");
   comboboxes.forEach((combobox) => {
     combobox.getOption = highlightOptionRenderer;

package/data/layers/full/component/component:syn-chart/angular/chart.component.ts

@@ -21,7 +21,7 @@ import '@synergy-design-system/components/components/chart/chart.js';
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -61,16 +61,22 @@ it takes precedence over the palette.
   }
 
   /**
-* The ECharts configuration option object.
+* The ECharts configuration input.
 
-This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+This property accepts either:
+- a plain `ECConfig` object, or
+- a callback that receives a typed preset handle and applies chart presets.
+
+The resolved result 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.
+and assign either the object directly or build it through the handle.
 
 > **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`).
+Assigning a new config input 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.
  */

package/data/layers/full/component/component:syn-chart/components/chart.component.ts

@@ -1,5 +1,5 @@
 import {
-  type EChartsType, init, use,
+  type EChartsType, init, registerPreprocessor, registerTheme, use,
 } from 'echarts/core.js';
 import { CanvasRenderer } from 'echarts/renderers.js';
 import { html } from 'lit';
@@ -10,12 +10,14 @@ import { LineChart } from 'echarts/charts.js';
 import {
   GridComponent, LegendComponent, TitleComponent, TooltipComponent,
 } from 'echarts/components.js';
-import { classMap } from 'lit/directives/class-map.js';
 import SynergyElement from '../../internal/synergy-element.js';
 import componentStyles from '../../styles/component.styles.js';
 import styles from './chart.styles.js';
-import { PALETTE_TOKENS, type SynChartPalette } from './chart.palettes.js';
-import type { ECConfig } from './types.js';
+import { type ChartPalette, PALETTE_TOKENS } from './chart.palettes.js';
+import { resolveConfigInput } from './configs/config.js';
+import type { ChartConfigType, ECConfig } from './types.js';
+import { synergyLightTheme } from './themes/light.js';
+import { applyAxisDefaultsPreprocessor } from './configs/axes/utilities.js';
 
 // TODO: Check, should we let the user define the *use* so the bundle size is optimized for their specific use case?
 use([
@@ -32,7 +34,7 @@ use([
  *
  * @documentation https://synergy-design-system.github.io/?path=/docs/charting-syn-chart--docs
  * @status experimental
- * @since 0.0.0
+ * @since 3.15.0
  *
  * @csspart base - The component's base wrapper.
  */
@@ -49,31 +51,59 @@ export default class SynChart extends SynergyElement {
 
   private resizeObserver: ResizeObserver;
 
+  private resolvedConfig: ECConfig = {};
+
   /**
-   * The ECharts configuration option object.
+   * The ECharts configuration input.
+   *
+   * This property accepts either:
+   * - a plain `ECConfig` object, or
+   * - a callback that receives a typed preset handle and applies chart presets.
    *
-   * This property maps 1:1 to the ECharts `option` parameter passed to `setOption()`.
+   * The resolved result 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.
+   * and assign either the object directly or build it through the handle.
    *
    * > **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`).
+   * Assigning a new config input 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.
    *
    * @example
    * ```js
+   * // Using a plain object
    * chart.config = {
    *   xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    *   yAxis: { type: 'value' },
    *   series: [{ type: 'line', data: [150, 230, 224] }],
    * };
+   *
+   * // Using the handle with method chaining
+   * chart.config = (handle) => handle
+   *   .baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   })
+   *   .axesShowSplitLines();
+   *
+   * // Using the handle with sequential calls
+   * chart.config = (handle) => {
+   *   handle.baseConfig({
+   *     xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
+   *     yAxis: { type: 'value' },
+   *     series: [{ type: 'line', data: [150, 230, 224] }],
+   *   });
+   *   handle.axesShowSplitLines();
+   * };
    * ```
    */
   @property({ attribute: false })
-  config: ECConfig = {};
+  config: ChartConfigType = {};
 
   /**
    * The color palette to apply to chart series.
@@ -88,13 +118,13 @@ export default class SynChart extends SynergyElement {
    * it takes precedence over the palette.
    */
   @property({ reflect: true })
-  palette: SynChartPalette = 'categorical';
+  palette: ChartPalette = 'categorical';
 
   /** Resolves palette CSS custom properties to computed color values and applies them to the chart. */
   private applyPalette(): void {
     if (!this.chartInstance) return;
     // If the user explicitly set config.color, respect it — palette is a default only
-    if (Array.isArray(this.config.color) && this.config.color.length > 0) return;
+    if (Array.isArray(this.resolvedConfig.color) && this.resolvedConfig.color.length > 0) return;
 
     const tokens = PALETTE_TOKENS[this.palette];
     const computedStyles = getComputedStyle(this);
@@ -103,23 +133,41 @@ export default class SynChart extends SynergyElement {
       .filter(Boolean);
 
     if (colors.length > 0) {
-      this.chartInstance.setOption({ color: colors }, { notMerge: false });
+      const oldOption = this.chartInstance.getOption();
+      if (!oldOption) return;
+
+      oldOption.color = colors;
+      // We can not only replace 'color' via { replaceMerge: ['color'] }. Echarts does not allow to do this.
+      // Therefore we need to completely replace it, with the old option but new color.
+      this.chartInstance.setOption(oldOption, { notMerge: true });
     }
   }
 
   protected updated(changedProperties: PropertyValues<this>): void {
     if (changedProperties.has('config') && this.chartInstance) {
-      this.chartInstance.setOption(this.config, { notMerge: true });
+      this.resolvedConfig = resolveConfigInput(this.config);
+      this.chartInstance.setOption(this.resolvedConfig, { notMerge: true });
     }
     if ((changedProperties.has('palette') || changedProperties.has('config')) && this.chartInstance) {
       this.applyPalette();
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    registerTheme('default', synergyLightTheme);
+    /**
+     * Depending if x-axis or y-axis, the axis name has different positions and alignments. This preprocessor ensures that the correct styles are applied to the axis names based on the axis type.
+     * This is needed because ECharts does not provide a way to set specific styles for x and y axis, only for axis types.
+     */
+    registerPreprocessor(applyAxisDefaultsPreprocessor);
+  }
+
   // Initialize echarts instance and resize observer
   protected firstUpdated(_changedProperties: PropertyValues): void {
     if (this.chartContainer !== null && this.chartContainer !== undefined) {
-      this.chartInstance = init(this.chartContainer);
+      this.chartInstance = init(this.chartContainer, 'default');
+
       // Resize observer
       this.resizeObserver = new ResizeObserver(() => {
         this.chartInstance?.resize();
@@ -127,8 +175,9 @@ export default class SynChart extends SynergyElement {
       this.resizeObserver.observe(this.chartContainer);
 
       // Apply config if already set before first render
-      if (Object.keys(this.config).length > 0) {
-        this.chartInstance.setOption(this.config);
+      this.resolvedConfig = resolveConfigInput(this.config);
+      if (Object.keys(this.resolvedConfig).length > 0) {
+        this.chartInstance.setOption(this.resolvedConfig);
       }
       // Apply palette after config so colors blend in without replacing the full config
       this.applyPalette();
@@ -172,9 +221,7 @@ export default class SynChart extends SynergyElement {
     return html`
       <div
         part="base"
-        class=${classMap({
-          chart: true,
-        })}>
+        class="chart">
       </div>
     `;
   }