@siemens/charts-ng 48.0.0-next.2 → 48.0.0-next.4

package/README.md

@@ -37,7 +37,7 @@ export class AppModule {}
 
 ### Running unit tests
 
-Run `yarn charts:test` to perform the unit tests via [Karma](https://karma-runner.github.io).
+Run `npm run charts:test` to perform the unit tests via [Karma](https://karma-runner.github.io).
 You can set a seed for running the tests in a specific using an environment variable: `SEED=71384 yarn lib:test`
 
 ## License

package/fesm2022/siemens-charts-ng.mjs

@@ -5,6 +5,7 @@ import { BarChart, CandlestickChart, CustomChart, GaugeChart, HeatmapChart, Line
 import { AxisPointerComponent, BrushComponent, DataZoomInsideComponent, DataZoomSliderComponent, DatasetComponent, GridComponent, LegendComponent, LegendScrollComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, PolarComponent, SingleAxisComponent, TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 export { echarts };
+import { LegacyGridContainLabel } from 'echarts/features';
 import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';
 import { CommonModule } from '@angular/common';
 
@@ -44,7 +45,9 @@ echarts.use([
     SunburstChart,
     // renderers
     CanvasRenderer,
-    SVGRenderer
+    SVGRenderer,
+    // features
+    LegacyGridContainLabel
 ]);
 
 /**
@@ -166,11 +169,14 @@ const themeElement = {
             textStyle: {
                 fontFamily
             },
+            richInheritPlainLabel: false,
             color: colorPalettes.default,
             gradientColor: gradientColors.default,
             backgroundColor: 'transparent',
             animationDuration: 700,
             title: {
+                left: 0,
+                top: 0,
                 padding: [10, 0, 0, 10],
                 textStyle: {
                     fontFamily,
@@ -191,6 +197,7 @@ const themeElement = {
                 left: 'auto',
                 right: 20,
                 top: 35,
+                itemGap: 10,
                 textStyle: {
                     fontFamily,
                     color: textColor,
@@ -294,6 +301,7 @@ const themeElement = {
                     hideOverlap: true
                 },
                 axisTick: {
+                    show: true,
                     alignWithLabel: true
                 },
                 splitLine: {
@@ -322,6 +330,7 @@ const themeElement = {
                     hideOverlap: true
                 },
                 axisTick: {
+                    show: true,
                     alignWithLabel: true
                 },
                 splitLine: {
@@ -361,7 +370,8 @@ const themeElement = {
                 },
                 selectedDataBackground: {
                     areaStyle: {
-                        color: dataZoomLineColor
+                        color: dataZoomLineColor,
+                        opacity: 0.2
                     },
                     lineStyle: {
                         color: dataZoomLineColor
@@ -403,9 +413,11 @@ const themeElement = {
                 areaStyle: {
                     opacity: 0.3
                 },
-                symbol: 'circle'
+                symbol: 'circle',
+                symbolSize: 4
             },
             pie: {
+                radius: [0, '75%'],
                 label: {
                     fontFamily,
                     formatter: '{d}%',
@@ -414,6 +426,7 @@ const themeElement = {
                     fontSize
                 },
                 labelLine: {
+                    length2: 15,
                     lineStyle: {
                         color: elementTextSecondary
                     }
@@ -592,14 +605,23 @@ class SiCustomLegendComponent {
     /** @internal */
     customLegendContainer = viewChild.required('customLegendContainer');
     customLegend = input();
+    /** The legend title. */
     title = input();
+    /** The legend subtitle. */
     subTitle = input();
+    /** The color of the legend title. */
     titleColor = input();
+    /** The color of the legend subtitle. */
     subTitleColor = input();
+    /** The color of the legend text. */
     textColor = input();
+    /** The event emitted when a legend icon is clicked. */
     legendIconClickEvent = output();
+    /** The event emitted when a legend is clicked. */
     legendClickEvent = output();
+    /** The event emitted when the mouse enters a legend. */
     legendHoverStartEvent = output();
+    /** The event emitted when the mouse leaves a legend. */
     legendHoverEndEvent = output();
     legendIconClick(legend) {
         legend.selected = !legend.selected;
@@ -643,11 +665,22 @@ class SiChartComponent {
     options = input();
     /** Used to override specific properties set in `options`. */
     additionalOptions = input();
+    /** The title of the chart. */
     title = input();
+    /** The subtitle of the chart. */
     subTitle = input();
-    /** @defaultValue true */
+    /**
+     * Show Echarts legend
+     *
+     * @defaultValue true
+     */
     showLegend = model(true);
-    /** @defaultValue false */
+    /**
+     * Enable to show a custom legend.
+     * The custom legend offers additional features such as, scroll bar to avoid legend and chart overlapping,
+     * Left and right alignment of legends based on y-axis, etc and many more.
+     * @defaultValue false
+     */
     showCustomLegend = input(false);
     /**
      * the renderer to use: canvas or svg
@@ -682,10 +715,16 @@ class SiChartComponent {
     /**
      * Enables zooming inside the chart with the mouse wheel/touch.
      *
+     * Whether zooming inside the chart is possible with mouse.
+     *
      * @defaultValue false
      */
     zoomInside = input(false);
-    /** @defaultValue 1000 */
+    /**
+     * Maximum number of series data points shown in the chart.
+     *
+     * @defaultValue 1000
+     */
     maxEntries = input(1000);
     /**
      * No auto dataZoom update) by default. Use together with `autoZoomSeriesIndex`.
@@ -721,19 +760,42 @@ class SiChartComponent {
      * @defaultValue false
      */
     axisPointer = input(false);
+    /**
+     * Apply a specific zoom range (see {@link https://echarts.apache.org/en/option.html#dataZoom-inside}).
+     */
     dataZoomRange = input();
+    /**
+     * The lower limit of the data zoom slider (see {@link https://echarts.apache.org/en/option.html#dataZoom-slider.minValueSpan}).
+     */
     dataZoomMinValueSpan = input();
+    /**
+     * The upper limit of the data zoom slider (see {@link https://echarts.apache.org/en/option.html#dataZoom-slider.maxValueSpan}).
+     */
     dataZoomMaxValueSpan = input();
-    /** @defaultValue 'none' */
+    /**
+     * The data zoom filter mode. (see {@link https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode})
+     *
+     * The value 'filter' will cause the lines to be disconnected to the outside of the chart.
+     *
+     * @defaultValue 'none'
+     */
     dataZoomFilterMode = input('none');
+    /**
+     * Enable custom legend click actions exposed by the `selectionChanged` event.
+     */
     customLegendAction = input();
     /**
+     * Specify selected legend item.
+     *
      * @defaultValue
      * ```
      * { legendItemName: '' }
      * ```
      */
     selectedItem = input({ legendItemName: '' });
+    /**
+     * The height of the ECharts container as decimal.
+     */
     eChartContainerHeight = input();
     /**
      * Flag to use external zoom slider
@@ -754,12 +816,15 @@ class SiChartComponent {
     dataZoom = output();
     /** Event emitted when axis pointer moves. */
     pointer = output();
+    /** Event emitted when selection changes e.g. clicking on a legend item. */
     selectionChanged = output();
+    /** Event emitted when a chart series is clicked. */
     chartSeriesClick = output();
     /** Event emitted when chart grid is resized. */
     chartGridResized = output();
+    /** Event emitted when custom legend multi-line info changes. */
     customLegendMultiLineInfoEvent = output();
-    /** Emitted when datazoom changes, indicating the time range in milliseconds, 0 for full range */
+    /** Emitted when data zoom changes, indicating the time range in milliseconds, 0 for full range */
     timeRangeChange = output();
     /** Allow to override options specific for a chart type. */
     actualOptions = {};
@@ -2333,10 +2398,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartCartesianComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     subChartGrids = input();
+    /** The y axis in cartesian(rectangular) coordinate. */
     yAxis = input();
+    /** The x axis in cartesian(rectangular) coordinate. */
     xAxis = input();
+    /** The content formatter of tooltip's floating layer which supports string template and callback function (see (see {@link https://echarts.apache.org/en/option.html#tooltip.formatter }). */
     tooltipFormatter = input();
     /**
      * Used to display the chart as a stacked one.
@@ -2670,6 +2739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartCircleComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     applyOptions() {
         this.actualOptions = {
@@ -3096,6 +3166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartProgressComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     /**
      * How big the data can get in degrees.
@@ -3298,6 +3369,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartProgressBarComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     /** Used to display the label in inline or above the progress-bar. */
     labelPosition = input();
@@ -3454,6 +3526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartSankeyComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     /** @defaultValue false */
     toolTip = input(false);
@@ -3483,6 +3556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * SPDX-License-Identifier: MIT
  */
 class SiChartSunburstComponent extends SiChartComponent {
+    /** The series for the chart. */
     series = input();
     /** @defaultValue false */
     toolTip = input(false);