@drayman/elements 1.82.0 → 1.84.0

package/dist/types/ngx-charts/src/app/models/ngx-charts-options.d.ts

@@ -6,7 +6,7 @@ export interface DraymanNgxCharts {
     onSelect?: ElementEvent<{
         data: any;
     }>;
-    type: 'pie' | 'verticalBar' | 'numberCard' | 'gauge' | 'areaNormalized' | 'areaStacked' | 'line';
+    type: 'pie' | 'verticalBar' | 'verticalBarStacked' | 'numberCard' | 'gauge' | 'areaNormalized' | 'areaStacked' | 'line';
     /**
      * Chart data.
      */
@@ -84,11 +84,39 @@ export interface DraymanNgxCharts {
     /**
      * Trim or don't trim ticks on the x axis.
      */
-    xAxisTicks?: boolean;
+    trimXAxisTicks?: boolean;
     /**
-    * Trim or don't trim ticks on the y axis.
-    */
-    yAxisTicks?: boolean;
+     * Trim or don't trim ticks on the y axis.
+     */
+    trimYAxisTicks?: boolean;
+    /**
+     * Rotate x axis tick labels to prevent overlap.
+     */
+    rotateXAxisTicks?: boolean;
+    /**
+     * Maximum length of x axis tick labels when trimming is enabled.
+     */
+    maxXAxisTickLength?: number;
+    /**
+     * Maximum length of y axis tick labels when trimming is enabled.
+     */
+    maxYAxisTickLength?: number;
+    /**
+     * Custom x axis tick formatting function.
+     */
+    xAxisTickFormatting?: any;
+    /**
+     * Custom y axis tick formatting function.
+     */
+    yAxisTickFormatting?: any;
+    /**
+     * Predefined list of x axis tick values.
+     */
+    xAxisTicks?: any[];
+    /**
+     * Predefined list of y axis tick values.
+     */
+    yAxisTicks?: any[];
     /**
      * Padding between bars in `px`.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drayman/elements",
-  "version": "1.82.0",
+  "version": "1.84.0",
   "description": "A collection of web components for Drayman.",
   "license": "MIT",
   "keywords": [

package/types/index.d.ts

@@ -560,11 +560,11 @@ declare global {
      *
      * ![](media://drayman-ngx-charts.gif)
      *
-     * ```typescript
-     * export const component: DraymanComponent = async ({ forceUpdate }) => {
-     *     return () => (
-     *         <drayman-ngx-charts
-     *             type="pie"
+     * ```typescript
+     * export const component: DraymanComponent = async ({ forceUpdate }) => {
+     *     return () => (
+     *         <drayman-ngx-charts
+     *             type="pie"
      *             results={
      *                 [
      *                     { name: 'Cherries', value: 10 },
@@ -573,11 +573,43 @@ declare global {
      *             }
      *             labels
      *         />
-     *     );
-     * }
-     * ```
-     */
-    interface DraymanNgxChartsProps extends DraymanNgxCharts, DraymanElementsProps { }
+     *     );
+     * }
+     * ```
+     *
+     * ### Stacked vertical bar chart
+     *
+     * ```typescript
+     * export const component: DraymanComponent = async ({ forceUpdate }) => {
+     *     return () => (
+     *         <drayman-ngx-charts
+     *             type="verticalBarStacked"
+     *             results={[
+     *                 {
+     *                     name: 'Germany',
+     *                     series: [
+     *                         { name: '2010', value: 7300000 },
+     *                         { name: '2011', value: 8940000 },
+     *                     ],
+     *                 },
+     *                 {
+     *                     name: 'USA',
+     *                     series: [
+     *                         { name: '2010', value: 7870000 },
+     *                         { name: '2011', value: 8270000 },
+     *                     ],
+     *                 },
+     *             ]}
+     *             legend
+     *             xAxis
+     *             yAxis
+     *             showGridLines
+     *         />
+     *     );
+     * }
+     * ```
+     */
+    interface DraymanNgxChartsProps extends DraymanNgxCharts, DraymanElementsProps { }
     /**
      * # <drayman-ngx-graph \/>
      *