@sankhyalabs/ezui 5.21.2 → 5.22.0-dev.1

package/dist/collection/components/ez-chart/components/LineChart.js

@@ -0,0 +1,27 @@
+import * as Highcharts from 'highcharts';
+import { BaseHighChartsRender } from "../types/BaseHighChartsRender";
+export class LineChartStrategy extends BaseHighChartsRender {
+  buildOptions(series, xAxis, yAxis, options) {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ chart: Object.assign(Object.assign({}, (options.width && { width: options.width })), (options.height && { height: options.height })), title: this.parseTitle(options.title) }, (options.subTitle && { subtitle: this.parseSubTitle(options.subTitle) })), (yAxis && { yAxis: this.parseAxis(yAxis) })), (xAxis && { xAxis: this.parseAxis(xAxis) })), { series: this.parseSerie(series) }), this.buildResposiveConfig()), this.buildDefaultChartOptions()), { tooltip: this.buildFormatterTooltip(series), legend: {
+        enabled: options.legendEnabled,
+      } }), (options.onClickSerie && {
+      plotOptions: {
+        series: {
+          cursor: 'pointer',
+          point: {
+            events: {
+              click: this.buildOnClickCallBack(options.onClickSerie),
+            }
+          }
+        }
+      }
+    }));
+  }
+  render(container, series, xAxis, yAxis, options) {
+    this.chart = Highcharts.chart(container, this.buildOptions(series, xAxis, yAxis, options));
+  }
+  destroy() {
+    var _a;
+    (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+}

package/dist/collection/components/ez-chart/components/PieChart.js

@@ -0,0 +1,45 @@
+import * as Highcharts from 'highcharts';
+import { BaseHighChartsRender } from "../types/BaseHighChartsRender";
+export class PieChartStrategy extends BaseHighChartsRender {
+  buildOptions(series, options) {
+    const dataLabels = [
+      {
+        enabled: true,
+        distance: 10
+      },
+      {
+        enabled: true,
+        distance: -40,
+        format: '{point.percentage:.1f}%',
+        style: {
+          fontSize: '1.2em',
+          textOutline: 'none',
+          opacity: 0.7
+        },
+        filter: {
+          property: 'percentage',
+          operator: '>',
+          value: 4
+        }
+      }
+    ];
+    return Object.assign(Object.assign(Object.assign(Object.assign({ chart: Object.assign(Object.assign({ type: 'pie' }, (options.width && { width: options.width })), (options.height && { height: options.height })), title: this.parseTitle(options.title) }, (options.subTitle && { subtitle: this.parseSubTitle(options.subTitle) })), { series: this.parseSerie(series), tooltip: this.buildFormatterTooltip(series), legend: {
+        enabled: options.legendEnabled,
+      }, plotOptions: {
+        series: Object.assign({ dataLabels, cursor: 'pointer' }, (options.onClickSerie && {
+          point: {
+            events: {
+              click: this.buildOnClickCallBack(options.onClickSerie),
+            }
+          }
+        }))
+      } }), this.buildResposiveConfig()), this.buildDefaultChartOptions());
+  }
+  render(container, series, _xAxis, _yAxis, options) {
+    this.chart = Highcharts.chart(container, this.buildOptions(series, options));
+  }
+  destroy() {
+    var _a;
+    (_a = this.chart) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+}

package/dist/collection/components/ez-chart/components/index.js

@@ -0,0 +1,5 @@
+export * from './BarChart';
+export * from './ColumnChart';
+export * from './DonutChart';
+export * from './LineChart';
+export * from './PieChart';

package/dist/collection/components/ez-chart/ez-chart.css

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

package/dist/collection/components/ez-chart/ez-chart.js

@@ -0,0 +1,284 @@
+import { h } from '@stencil/core';
+import { ChartContext, ChartType } from './interfaces';
+import { ColumnChartStrategy, BarChartStrategy, LineChartStrategy, PieChartStrategy, DonutChartStrategy } from './components';
+export class EzChart {
+  constructor() {
+    this.STRATEGY_BY_CHART_TYPE = new Map();
+    this.type = ChartType.LINE;
+    this.xAxis = undefined;
+    this.yAxis = undefined;
+    this.chartTitle = "";
+    this.chartSubTitle = "";
+    this.legendEnabled = true;
+    this.series = undefined;
+    this.width = undefined;
+    this.height = undefined;
+    this.initializeStrategies();
+  }
+  initializeStrategies() {
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.COLUMN, new ColumnChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.BAR, new BarChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.LINE, new LineChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.PIE, new PieChartStrategy());
+    this.STRATEGY_BY_CHART_TYPE.set(ChartType.DONUT, new DonutChartStrategy());
+  }
+  renderChart() {
+    this.chartContext.render(this._container, this.series, this.xAxis, this.yAxis, {
+      title: this.chartTitle,
+      subTitle: this.chartSubTitle,
+      legendEnabled: this.legendEnabled,
+      onClickSerie: this.ezSerieClick,
+    });
+  }
+  componentWillLoad() {
+    this.setChartStrategy();
+  }
+  componentWillUpdate() {
+    this.renderChart();
+  }
+  componentDidLoad() {
+    this.renderChart();
+  }
+  disconnectedCallback() {
+    this.chartContext.destroy();
+  }
+  handleTypeChange() {
+    this.setChartStrategy();
+  }
+  setChartStrategy() {
+    const strategy = this.STRATEGY_BY_CHART_TYPE.get(this.type);
+    if (strategy) {
+      this.chartContext = new ChartContext(strategy);
+      return;
+    }
+    this.chartContext = new ChartContext(new LineChartStrategy());
+  }
+  render() {
+    return (h("div", { ref: (el) => this._container = el }));
+  }
+  static get is() { return "ez-chart"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-chart.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartType",
+          "resolved": "ChartType.BAR | ChartType.COLUMN | ChartType.DONUT | ChartType.LINE | ChartType.PIE",
+          "references": {
+            "ChartType": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo de gr\u00E1fico apresentado pelo componente"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "ChartType.LINE"
+      },
+      "xAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis | Array<ChartAxis>",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defini\u00E7\u00F5es do eixo X do gr\u00E1fico"
+        }
+      },
+      "yAxis": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartAxis | Array<ChartAxis>",
+          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; })",
+          "references": {
+            "ChartAxis": {
+              "location": "import",
+              "path": "./interfaces"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defini\u00E7\u00F5es do eixo Y do gr\u00E1fico"
+        }
+      },
+      "chartTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o titulo a ser apresentado no gr\u00E1fico"
+        },
+        "attribute": "chart-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "chartSubTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o sub titulo a ser apresentado no gr\u00E1fico"
+        },
+        "attribute": "chart-sub-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "legendEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se a legenda do gr\u00E1fico deve ser apresentada ou n\u00E3o."
+        },
+        "attribute": "legend-enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "series": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartSerie | Array<ChartSerie>",
+          "resolved": "ChartSerie[] | ({ data: (number | ChartSerieData)[]; name?: string; color?: string; type?: \"line\" | \"column\" | \"bar\"; yAxis?: number; toolTipFormatter?: (serieName: string, xAxis: string | number, yAxis: number, dataName: string, percentage: number) => string; showDataLabel?: boolean; })",
+          "references": {
+            "ChartSerie": {
+              "location": "import",
+              "path": "./interfaces/ChartSerie"
+            },
+            "Array": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define as series a serem apresentadas no gr\u00E1fico"
+        }
+      },
+      "width": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define uma largura do gr\u00E1fico"
+        },
+        "attribute": "width",
+        "reflect": false
+      },
+      "height": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define a altura do gr\u00E1fico"
+        },
+        "attribute": "height",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezSerieClick",
+        "name": "ezSerieClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido quando ocorre um click em uma serie do gr\u00E1fico"
+        },
+        "complexType": {
+          "original": "SerieClickEvent",
+          "resolved": "{ name: string; data: number[]; type: string; yAxis: number; }",
+          "references": {
+            "SerieClickEvent": {
+              "location": "import",
+              "path": "./interfaces/ChartSerie"
+            }
+          }
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "type",
+        "methodName": "handleTypeChange"
+      }];
+  }
+}

package/dist/collection/components/ez-chart/interfaces/ChartAxis.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartContext.js

@@ -0,0 +1,14 @@
+export class ChartContext {
+  constructor(strategy) {
+    this.strategy = strategy;
+  }
+  setStrategy(strategy) {
+    this.strategy = strategy;
+  }
+  render(container, series, xAxis, yAxis, options) {
+    return this.strategy.render(container, series, xAxis, yAxis, options);
+  }
+  destroy() {
+    return this.strategy.destroy();
+  }
+}

package/dist/collection/components/ez-chart/interfaces/ChartOptions.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartSerie.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartStrategies.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/ez-chart/interfaces/ChartType.js

@@ -0,0 +1,8 @@
+export var ChartType;
+(function (ChartType) {
+  ChartType["COLUMN"] = "column";
+  ChartType["BAR"] = "bar";
+  ChartType["LINE"] = "line";
+  ChartType["PIE"] = "pie";
+  ChartType["DONUT"] = "donut";
+})(ChartType || (ChartType = {}));

package/dist/collection/components/ez-chart/interfaces/index.js

@@ -0,0 +1,5 @@
+export * from './ChartContext';
+export * from './ChartStrategies';
+export * from './ChartType';
+export * from './ChartAxis';
+export * from './ChartSerie';

package/dist/collection/components/ez-chart/test/mock-chart.js

@@ -0,0 +1,137 @@
+export const mockChartProp = {
+    chartTitle: "Titulo do gráfico",
+    chartSubTitle: "Sub-titulo do gráfico",
+    series: [{
+        name: 'Qtd. Vendas',
+        data: [23, 20, 22, 26, 24, 28],
+        yAxis: 1,
+        showDataLabel: true,
+    }, {
+        name: 'Vlr. Vendas',
+        data: [25600, 21600, 24500, 26890, 20560, 22508],
+        yAxis: 0,
+        toolTipFormatter: jest.fn(),
+    }],
+    yAxis: [{
+        text: 'Valor das vendas no semestre',
+    },
+    {
+        text: 'Quantidade de itens vendidos',
+        invertedPosition: true,
+    }],
+    xAxis: {
+        text: 'Defina uma descrição para o eixo',
+        formatter: jest.fn(),
+        color: '#008561',
+        categories: ['Jan', 'Feb', 'Mar', 'Abr', 'Mai', 'Jun']
+    },
+}
+
+export const expectChart = {
+    title: { text: "Titulo do gráfico" },
+    subtitle: { text: "Sub-titulo do gráfico" },
+    tooltip: { formatter: function () { return jest.fn(); } },
+    yAxis: [
+        {
+            title: { text: "Valor das vendas no semestre" }
+        },
+        {
+            title: { text: "Quantidade de itens vendidos" },
+            opposite: true,
+        },
+    ],
+    xAxis: {
+        categories: ["Jan", "Feb", "Mar", "Abr", "Mai", "Jun"],
+        title: {
+            text: "Defina uma descrição para o eixo",
+            style: { color: "#008561" }
+        }
+    },
+    series: [{
+        name: "Qtd. Vendas",
+        data: [23, 20, 22, 26, 24, 28],
+        dataLabels: { enabled: true },
+        yAxis: 1,
+    }, {
+        name: "Vlr. Vendas",
+        data: [25600, 21600, 24500, 26890, 20560, 22508],
+        yAxis: 0,
+    }],
+    rules: [
+        {
+            condition: { maxWidth: 500 },
+            chartOptions: {
+                legend: { enabled: false },
+                xAxis: {
+                    labels: { enabled: false },
+                    gridLineWidth: 0,
+                },
+                yAxis: {
+                    labels: { enabled: false },
+                    gridLineWidth: 0,
+                },
+            },
+        },
+        {
+            condition: { maxWidth: 600 },
+            chartOptions: {
+                xAxis: {
+                    labels: {
+                        style: { fontSize: "10px" },
+                    },
+                },
+                yAxis: {
+                    labels: {
+                        style: { fontSize: "10px" },
+                    },
+                },
+                title: {
+                    style: { fontSize: "14px" },
+                },
+                subtitle: {
+                    style: { fontSize: "12px" },
+                },
+            },
+        },
+        {
+            condition: { maxWidth: 400 },
+            chartOptions: {
+                chart: { margin: [10, 10, 15, 10] },
+                subtitle: { text: null },
+                title: { text: null },
+            },
+        },
+    ],
+    credits: { enabled: false },
+}
+
+
+export const mockChartPieProp = {
+    chartTitle: "Titulo do gráfico",
+    chartSubTitle: "Sub-titulo do gráfico",
+    series: {
+        name: 'venda',
+        data: [
+            { name: 'Chrome', y: 74.03 },
+            { name: 'Edge', y: 12.66 },
+            { name: 'Firefox', y: 4 },
+            { name: 'Internet Explorer', y: 2 },
+            { name: 'Other', y: 3 }
+        ],
+        showDataLabel: true,
+    }
+}
+
+export const expectPieChart = {
+    series: [{
+        name: "venda",
+        data: [
+            { name: 'Chrome', y: 74.03 },
+            { name: 'Edge', y: 12.66 },
+            { name: 'Firefox', y: 4 },
+            { name: 'Internet Explorer', y: 2 },
+            { name: 'Other', y: 3 }
+        ],
+        dataLabels: { enabled: true },
+    }],
+}

package/dist/collection/components/ez-chart/types/BaseHighChartsRender.js

@@ -0,0 +1,146 @@
+export class BaseHighChartsRender {
+  parseSerie(series) {
+    if (Array.isArray(series)) {
+      const seriesOptions = series.map(serie => this.chartSerieToSeriesOptions(serie));
+      return seriesOptions;
+    }
+    const seriesOptions = this.chartSerieToSeriesOptions(series);
+    return [seriesOptions];
+  }
+  parseAxis(axis) {
+    if (Array.isArray(axis)) {
+      const axisOptions = axis.map(value => this.chartAxisToAxisOptions(value));
+      return axisOptions;
+    }
+    const axisOptions = this.chartAxisToAxisOptions(axis);
+    return axisOptions;
+  }
+  parseTitle(title) {
+    return {
+      text: title,
+    };
+  }
+  parseSubTitle(subTtile) {
+    return {
+      text: subTtile,
+    };
+  }
+  buildFormatterTooltip(series) {
+    const seriesArray = Array.isArray(series) ? series : [series];
+    return {
+      formatter: function (tooltip) {
+        const indexSerie = seriesArray.findIndex(serie => serie.name === this.series.name && serie.toolTipFormatter);
+        if (indexSerie !== -1) {
+          return seriesArray[indexSerie].toolTipFormatter(this.series.name, this.x, this.y, this.point.name, this.point.percentage);
+        }
+        return tooltip.defaultFormatter.call(this, tooltip);
+      }
+    };
+  }
+  buildOnClickCallBack(evt) {
+    return function (_e) {
+      evt.emit({
+        name: this.series.name,
+        data: this.series.data,
+        type: this.series.type,
+        yAxis: this.x,
+      });
+    };
+  }
+  buildResposiveConfig() {
+    return {
+      rules: [
+        {
+          condition: {
+            maxWidth: 500
+          },
+          chartOptions: {
+            legend: {
+              enabled: false
+            },
+            xAxis: {
+              labels: {
+                enabled: false
+              },
+              gridLineWidth: 0
+            },
+            yAxis: {
+              labels: {
+                enabled: false
+              },
+              gridLineWidth: 0
+            }
+          }
+        },
+        {
+          condition: {
+            maxWidth: 600
+          },
+          chartOptions: {
+            xAxis: {
+              labels: {
+                style: {
+                  fontSize: '10px'
+                }
+              }
+            },
+            yAxis: {
+              labels: {
+                style: {
+                  fontSize: '10px'
+                },
+              }
+            },
+            title: {
+              style: {
+                fontSize: '14px'
+              }
+            },
+            subtitle: {
+              style: {
+                fontSize: '12px'
+              }
+            }
+          }
+        },
+        {
+          condition: {
+            maxWidth: 400
+          },
+          chartOptions: {
+            chart: {
+              margin: [10, 10, 15, 10],
+            },
+            subtitle: {
+              text: null
+            },
+            title: {
+              text: null
+            }
+          }
+        }
+      ]
+    };
+  }
+  buildDefaultChartOptions() {
+    return {
+      credits: {
+        enabled: false
+      }
+    };
+  }
+  chartSerieToSeriesOptions(serie) {
+    const { name, data, color, showDataLabel, type, yAxis } = serie;
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { name })), (type && { type })), (data && { data })), (color && { color })), (showDataLabel && { dataLabels: { enabled: showDataLabel } })), (yAxis !== undefined && { yAxis }));
+  }
+  chartAxisToAxisOptions(axis) {
+    const { categories, color, text, invertedPosition, formatter } = axis;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, (categories && { categories })), (text && {
+      title: Object.assign({ text }, (color && { style: { color } }))
+    })), (formatter && {
+      labels: {
+        formatter: function () { return formatter(this.value); },
+      }
+    })), (invertedPosition && { opposite: invertedPosition }));
+  }
+}