@forter/chart - npm Package Compare versions

Comparing version 5.3.0 to 5.3.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [5.3.1](https://github.com/forter/web-components/compare/@forter/chart@5.3.0...@forter/chart@5.3.1) (2021-08-26)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 # [5.3.0](https://github.com/forter/web-components/compare/@forter/chart@5.2.0...@forter/chart@5.3.0) (2021-08-26)
@@ -8,0 +16,0 @@

chart-config-builders/basic-config-builder.js

@@ -80,3 +80,3 @@ import { merge } from 'lodash-es';
 };
-const generateBasicChartJSConfig = (config, chartJSConfig) => {
+var generateBasicChartJSConfig = ((config, chartJSConfig) => {
   const basicConfig = {
@@ -91,3 +91,3 @@ type: 'line',
   return merge(chartJSConfig, basicConfig);
-};
+});
 
@@ -119,3 +119,3 @@ const extractDatasets = config => {
 
-export { generateBasicChartJSConfig };
+export default generateBasicChartJSConfig;
 //# sourceMappingURL=basic-config-builder.js.map

fc-chart.css.js

@@ -60,2 +60,3 @@ import { css } from 'lit-element';
   flex-direction: column;
+  z-index: 1;
 }
@@ -62,0 +63,0 @@

FcChart.js

@@ -5,6 +5,8 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { get, merge } from 'lodash-es';
 import style from './fc-chart.css';
 import 'chartjs-adapter-moment';
-import { generateBasicChartJSConfig } from './chart-config-builders/basic-config-builder.js';
+import generateBasicChartJSConfig from './chart-config-builders/basic-config-builder.js';
+import generateTooltipConfig from './chart-config-builders/tooltip-config-builder.js';
+import insertYAxisTicks from './chart-config-builders/y-axis-symbol-config-builder.js';
+import insertTimeAxisTicks from './chart-config-builders/time-axis-config-builder.js';
 
@@ -35,20 +37,6 @@ /**
   class FcChart extends _LitElement {
-    /**
-     * If the element is disabled
-     * @type {Boolean}
-     * @attr
-     */
+    constructor(...args) {
+      super(...args);
 
-    /** @inheritdoc */
-
-    /** @inheritdoc */
-    constructor() {
-      super();
-
       _initialize(this);
-
-      this.tooltipPosition = {
-        x: -999,
-        y: -999
-      };
     }
@@ -110,3 +98,13 @@
       key: "tooltipElement",
-      value: function tooltipElement() {
+      value:
+      /**
+       * If the element is disabled
+       * @type {Boolean}
+       * @attr
+       */
+
+      /** @inheritdoc */
+
+      /** @inheritdoc */
+      function tooltipElement() {
         return this.shadowRoot.getElementById('tooltip');
@@ -149,3 +147,3 @@ }
         return builders.reduce((currentChartJSConfig, currentBuilder) => {
-          return currentBuilder ? currentBuilder.bind(this)(config, currentChartJSConfig) : currentChartJSConfig;
+          return currentBuilder ? currentBuilder.bind(this)(config, currentChartJSConfig, this) : currentChartJSConfig;
         }, {});
@@ -157,133 +155,6 @@ }
       value: function getConfigBuilders() {
-        const {
-          insertYAxisTicks,
-          insertXAxisTicks,
-          insertTooltipConfig
-        } = this;
-        return [generateBasicChartJSConfig, insertYAxisTicks, insertXAxisTicks, insertTooltipConfig];
+        return [generateBasicChartJSConfig, insertYAxisTicks, insertTimeAxisTicks, generateTooltipConfig];
       }
     }, {
       kind: "method",
-      key: "insertYAxisTicks",
-      value: function insertYAxisTicks(config, chartJSConfig) {
-        const symbol = get(config, 'style.options.scales.y.ticks.forterSymbol');
-
-        if (symbol) {
-          const callback = function (value, index, values) {
-            return `${value}${symbol}`;
-          };
-
-          const callbackObject = {
-            options: {
-              scales: {
-                y: {
-                  ticks: {
-                    callback
-                  }
-                }
-              }
-            }
-          };
-          chartJSConfig = merge(chartJSConfig, callbackObject);
-        }
-
-        return chartJSConfig;
-      }
-    }, {
-      kind: "method",
-      key: "insertXAxisTicks",
-      value: function insertXAxisTicks(config, chartJSConfig) {
-        const callback = function (value, index, values) {
-          return index % 7 === 0 && index === values.length - 1 ? '' : index % 7 === 0 ? `WEEK ${(index + 7) / 7}` : null;
-        };
-
-        const callbackObject = {
-          options: {
-            scales: {
-              x: {
-                ticks: {
-                  callback
-                }
-              }
-            }
-          }
-        };
-        return merge(chartJSConfig, callbackObject);
-      }
-    }, {
-      kind: "method",
-      key: "insertTooltipConfig",
-      value: function insertTooltipConfig(config, chartJSConfig) {
-        const callbackObject = {
-          options: {
-            plugins: {
-              tooltip: {
-                external: this.tooltipCallback.bind(this)
-              }
-            }
-          }
-        };
-        return merge(chartJSConfig, callbackObject);
-      }
-    }, {
-      kind: "method",
-      key: "tooltipCallback",
-      value: function tooltipCallback(context) {
-        const {
-          tooltipElement
-        } = this;
-        const tooltipModel = context.tooltip;
-
-        if (tooltipModel.opacity === 0) {
-          tooltipElement.classList.add('hide');
-          return;
-        }
-
-        tooltipElement.classList.remove('hide');
-        this.extractDataAndRenderTooltip(tooltipModel);
-      }
-    }, {
-      kind: "method",
-      key: "extractDataAndRenderTooltip",
-      value: function extractDataAndRenderTooltip(tooltipModel) {
-        const {
-          tooltipElement
-        } = this;
-        const dataPoint = get(tooltipModel, 'dataPoints[0]');
-        tooltipElement.style.left = `${tooltipModel.caretX}px`;
-        tooltipElement.style.top = `${tooltipModel.caretY}px`;
-        tooltipElement.style.setProperty('--fc-chart-tooltip-color', get(dataPoint, 'dataset.borderColor'));
-        tooltipElement.innerHTML = this.renderTooltip(get(dataPoint, 'raw.y'), get(dataPoint, 'raw.x'));
-      }
-    }, {
-      kind: "method",
-      key: "renderTooltip",
-      value: function renderTooltip(tooltipMainInsight, tooltipPositionText, tooltipAdditionalInsights = []) {
-        return `
-      <div class="pin"></div>
-      <div class="card">
-        <div class="tooltip-header">
-          <span class="main-insight">${tooltipMainInsight}</span>
-          <span class="tooltip-position">${tooltipPositionText}</span>
-        </div>
-        ${tooltipAdditionalInsights.map(tooltipAdditionalInsight => html`
-          <span class="additional-insight main-insight">${tooltipAdditionalInsight}</span>`).join('')}        
-        ${this.renderDrillDown()}
-      </div>
-      `;
-      }
-    }, {
-      kind: "method",
-      key: "renderDrillDown",
-      value: function renderDrillDown() {
-        return `
-      <div class="drill-down">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM9 4V6H7V4H9ZM9 12V7.5H7V12H9Z" fill="#B5BECC"/>
-        </svg>
-        Click to see more on this
-      </div>`;
-      }
-    }, {
-      kind: "method",
       key: "render",
@@ -290,0 +161,0 @@ value: function render() {

package.json

 {
   "name": "@forter/chart",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "chart from Forter Components",
@@ -58,3 +58,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "8181675288add4f4bc3dce630bbf4fcb72e60041"
+  "gitHead": "643111ee2b36b006a599939cd65e915418c5a0b1"
 }

README.md

@@ -21,9 +21,8 @@ # fc-chart
 
-| Property          | Attribute  | Type      | Default             | Description                |
-|-------------------|------------|-----------|---------------------|----------------------------|
-| `config`          | `config`   | `any`     |                     |                            |
-| `currentBuilder`  |            | `any`     |                     |                            |
-| `disabled`        | `disabled` | `boolean` | false               | If the element is disabled |
-| `tooltipPosition` |            | `{}`      | {"x":-999,"y":-999} |                            |
-| `type`            | `type`     | `string`  | "line"              |                            |
+| Property         | Attribute  | Type      | Default | Description                |
+|------------------|------------|-----------|---------|----------------------------|
+| `config`         | `config`   | `any`     |         |                            |
+| `currentBuilder` |            | `any`     |         |                            |
+| `disabled`       | `disabled` | `boolean` | false   | If the element is disabled |
+| `type`           | `type`     | `string`  | "line"  |                            |
 
@@ -30,0 +29,0 @@ ## CSS Custom Properties

src/chart-config-builders/basic-config-builder.js

@@ -83,3 +83,3 @@ import { merge } from 'lodash-es';
 
-export const generateBasicChartJSConfig = (config, chartJSConfig) => {
+export default (config, chartJSConfig) => {
   const basicConfig = {
@@ -86,0 +86,0 @@ type: 'line',

src/FcChart.js

 import { LitElement, html, property } from 'lit-element';
 import { Chart, registerables } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { get, merge } from 'lodash-es';
 import style from './fc-chart.css';
 import 'chartjs-adapter-moment';
-import { generateBasicChartJSConfig } from './chart-config-builders/basic-config-builder';
+import generateBasicChartJSConfig from './chart-config-builders/basic-config-builder';
+import generateTooltipConfig from './chart-config-builders/tooltip-config-builder';
+import insertYAxisTicks from './chart-config-builders/y-axis-symbol-config-builder';
+import insertTimeAxisTicks from './chart-config-builders/time-axis-config-builder';
 
@@ -48,10 +50,2 @@ /**
 
-  constructor() {
-    super();
-    this.tooltipPosition = {
-      x: -999,
-      y: -999
-    };
-  }
-
   get tooltipElement() {
@@ -85,3 +79,3 @@ return this.shadowRoot.getElementById('tooltip');
       return currentBuilder
-        ? currentBuilder.bind(this)(config, currentChartJSConfig)
+        ? currentBuilder.bind(this)(config, currentChartJSConfig, this)
         : currentChartJSConfig;
@@ -92,108 +86,10 @@ }, {});
   getConfigBuilders() {
-    const {
-      insertYAxisTicks,
-      insertXAxisTicks,
-      insertTooltipConfig
-    } = this;
-
     return [
       generateBasicChartJSConfig,
       insertYAxisTicks,
-      insertXAxisTicks,
-      insertTooltipConfig
+      insertTimeAxisTicks,
+      generateTooltipConfig
     ];
   }
 
-  insertYAxisTicks(config, chartJSConfig) {
-    const symbol = get(config, 'style.options.scales.y.ticks.forterSymbol');
-
-    if (symbol) {
-      const callback = function(value, index, values) {
-        return `${value}${symbol}`;
-      };
-
-      const callbackObject = { options: { scales: { y: { ticks: { callback } } } } };
-
-      chartJSConfig = merge(chartJSConfig, callbackObject);
-    }
-
-    return chartJSConfig;
-  }
-
-  insertXAxisTicks(config, chartJSConfig) {
-    const callback = function(value, index, values) {
-      return index % 7 === 0 && index === values.length - 1
-        ? ''
-        : index % 7 === 0
-          ? `WEEK ${(index + 7) / 7}`
-          : null;
-    };
-
-    const callbackObject = { options: { scales: { x: { ticks: { callback } } } } };
-
-    return merge(chartJSConfig, callbackObject);
-  }
-
-  insertTooltipConfig(config, chartJSConfig) {
-    const callbackObject =
-      { options: { plugins: { tooltip: { external: this.tooltipCallback.bind(this) } } } };
-
-    return merge(chartJSConfig, callbackObject);
-  }
-
-  tooltipCallback(context) {
-    const { tooltipElement } = this;
-    const tooltipModel = context.tooltip;
-
-    if (tooltipModel.opacity === 0) {
-      tooltipElement.classList.add('hide');
-      return;
-    }
-
-    tooltipElement.classList.remove('hide');
-
-    this.extractDataAndRenderTooltip(tooltipModel);
-  }
-
-  extractDataAndRenderTooltip(tooltipModel) {
-    const { tooltipElement } = this;
-
-    const dataPoint = get(tooltipModel, 'dataPoints[0]');
-
-    tooltipElement.style.left = `${tooltipModel.caretX}px`;
-    tooltipElement.style.top = `${tooltipModel.caretY}px`;
-    tooltipElement.style.setProperty(
-      '--fc-chart-tooltip-color',
-      get(dataPoint, 'dataset.borderColor'));
-
-    tooltipElement.innerHTML = this.renderTooltip(
-      get(dataPoint, 'raw.y'),
-      get(dataPoint, 'raw.x'));
-  }
-
-  renderTooltip(tooltipMainInsight, tooltipPositionText, tooltipAdditionalInsights = []) {
-    return `
-      <div class="pin"></div>
-      <div class="card">
-        <div class="tooltip-header">
-          <span class="main-insight">${tooltipMainInsight}</span>
-          <span class="tooltip-position">${tooltipPositionText}</span>
-        </div>
-        ${tooltipAdditionalInsights.map(tooltipAdditionalInsight => html`
-          <span class="additional-insight main-insight">${tooltipAdditionalInsight}</span>`).join('')}        
-        ${this.renderDrillDown()}
-      </div>
-      `;
-  }
-
-  renderDrillDown() {
-    return `
-      <div class="drill-down">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM9 4V6H7V4H9ZM9 12V7.5H7V12H9Z" fill="#B5BECC"/>
-        </svg>
-        Click to see more on this
-      </div>`;
-  }
-
   render() {
@@ -200,0 +96,0 @@ return html`

web-components.json

@@ -40,6 +40,2 @@ {
         {
-          "name": "tooltipPosition",
-          "type": "{}"
-        },
-        {
           "name": "currentBuilder",
@@ -46,0 +42,0 @@ "type": "any"

No alert changes

Improved metrics

Total package byte prevSize

90922

increased by0.82%

Number of package files

41

increased by28.13%

Worsened metrics

Lines of code

2002

decreased by-1.04%

Number of lines in readme file

33

decreased by-2.94%

No dependency changes