@forter/chart - npm Package Compare versions

Comparing version 3.0.0 to 3.0.2

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+## [3.0.2](https://github.com/forter/web-components/compare/@forter/chart@3.0.1...@forter/chart@3.0.2) (2019-09-16)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
+## [3.0.1](https://github.com/forter/web-components/compare/@forter/chart@3.0.0...@forter/chart@3.0.1) (2019-09-09)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 # [3.0.0](https://github.com/forter/web-components/compare/@forter/chart@2.0.2...@forter/chart@3.0.0) (2019-09-02)
@@ -8,0 +24,0 @@

FcChart.js

@@ -6,2 +6,5 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 
+Chart.defaults.global.legend.position = 'bottom';
+Chart.defaults.global.legend.labels.usePointStyle = true;
+Chart.defaults.global.legend.labels.boxWidth = 15;
 Chart.plugins.register({
@@ -30,4 +33,8 @@ afterDraw: function (chart) {
 });
+/** @typedef {Object} ChartData */
+
+/** @typedef {Object} ChartOptions */
+
 /**
- * # `<fc-chart>`
+ * Custom Element wrapper for chart.js
  */
@@ -150,4 +157,26 @@
       key: "render",
-      value: // tslint:disable-line:no-reserved-keywords
+      value:
+      /**
+       * Chart type
+       * @type {'bar'|'doughnut'|'horizontalBar'|'line'|'pie'|'polarArea'|'radar'}
+       * @attr
+       */
+      // tslint:disable-line:no-reserved-keywords
 
+      /**
+       * Chart colour palette from forter theme
+       * @type {'default'|'positive'|'negative'}
+       * @attr
+       */
+
+      /**
+       * Chart data
+       * @type {ChartData}
+       */
+
+      /**
+       * Chart Options
+       * @type {ChartOptions}
+       */
+
       /** @inheritdoc */
@@ -189,3 +218,3 @@ function render() {
        * Adds resize listener
-       * @protected
+       * @inheritdoc
        */
@@ -240,2 +269,4 @@
       }
+      /** @inheritdoc */
+
     }, {
@@ -242,0 +273,0 @@ kind: "method",

package.json

 {
   "name": "@forter/chart",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Chart from Forter Components",
@@ -49,3 +49,3 @@ "main": "index.js",
   },
-  "gitHead": "b2e02bb45adf8f84dda34e8be754bf1a8fb413c4"
+  "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e"
 }

src/FcChart.js

@@ -6,2 +6,6 @@ import { LitElement, html, property } from 'lit-element';
 
+Chart.defaults.global.legend.position = 'bottom';
+Chart.defaults.global.legend.labels.usePointStyle = true;
+Chart.defaults.global.legend.labels.boxWidth = 15;
+
 Chart.plugins.register({
@@ -25,4 +29,8 @@ afterDraw: function(chart) {
 });
+
+/** @typedef {Object} ChartData */
+/** @typedef {Object} ChartOptions */
+
 /**
- * # `<fc-chart>`
+ * Custom Element wrapper for chart.js
  */
@@ -32,6 +40,20 @@ export class FcChart extends LitElement {
 
+  /**
+   * Chart type
+   * @type {'bar'|'doughnut'|'horizontalBar'|'line'|'pie'|'polarArea'|'radar'}
+   * @attr
+   */
   @property({ type: String }) type = 'line'; // tslint:disable-line:no-reserved-keywords
 
+  /**
+   * Chart colour palette from forter theme
+   * @type {'default'|'positive'|'negative'}
+   * @attr
+   */
   @property({ type: String }) palette = 'default';
 
+  /**
+   * Chart data
+   * @type {ChartData}
+   */
   @property({ type: Object }) data = {
@@ -50,2 +72,6 @@ labels: [],
 
+  /**
+   * Chart Options
+   * @type {ChartOptions}
+   */
   @property({ type: Object }) options = {
@@ -107,3 +133,3 @@ responsive: true,
    * Adds resize listener
-   * @protected
+   * @inheritdoc
    */
@@ -153,2 +179,3 @@ firstUpdated() {
 
+  /** @inheritdoc */
   updated() {
@@ -155,0 +182,0 @@ this.fillColors();

stories/chart.stories.js

 import { html } from 'lit-html';
-import { withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/polymer';
+import { enumerateProperties } from '../../../lib/storybook-helpers';
 
-import '../src/fc-chart';
+import { select, text, withKnobs } from '@storybook/addon-knobs';
+
+import '../src';
 import { FcChart } from '../src/FcChart';
@@ -12,8 +14,4 @@
 
- 
-function elementProperties() {
-  return html`
-    <fc-chart></fc-chart>
-  `
-}
+const story = enumerateProperties(FcChart);
+
 let _seed = 1;
@@ -49,20 +47,19 @@
 
-
-  const data = {
-    labels: ['ApplePay', 'Visa', 'MasterCard', 'Paypal', 'AMEX', 'Dinners', 'Discover', 'JCB', 'Unipay'],
-    datasets: [{
-      label: 'Dataset 1',
-      data: [
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor(),
-        randomScalingFactor()
-      ],
-      fill: true
-    }],
+const data = {
+   labels: ['ApplePay', 'Visa', 'MasterCard', 'Paypal', 'AMEX', 'Dinners', 'Discover', 'JCB', 'Unipay'],
+   datasets: [{
+    label: 'Dataset 1',
+    data: [
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor(),
+      randomScalingFactor()
+    ],
+    fill: true
+   }],
   }
@@ -73,7 +70,7 @@ function chartByType(type) {
     return html`
-      <div style="display: grid;grid-auto-flow: column;place-items: center;grid-column-gap: 10px;grid-template-columns: repeat(8, min-content);">
+     <div style="display: grid;grid-auto-flow: column;place-items: center;grid-column-gap: 10px;grid-template-columns: repeat(8, min-content);">
         <label> Colors </label>
-        <fc-button intent="apply" @click=${e => changeChartOption('palette', 'default')}> Default</fc-button>
-        <fc-button intent="success" @change=${() => randomizeData(min, max)} @click=${e => changeChartOption('palette', 'approve')}> Positive</fc-button>
-        <fc-button intent="danger" @change=${() => randomizeData(min, max)} @click=${e => changeChartOption('palette', 'decline')}> Negative</fc-button>
+        <fc-button intent="apply" @click="${e => changeChartOption('palette', 'default')}"> Default</fc-button>
+        <fc-button intent="success" @change="${() => randomizeData(min, max)}" @click="${e => changeChartOption('palette', 'positive')}"> Positive</fc-button>
+        <fc-button intent="danger" @change="${() => randomizeData(min, max)}" @click="${e => changeChartOption('palette', 'negative')}"> Negative</fc-button>
         <label> Values</label>
@@ -84,3 +81,10 @@ <fc-input style="width:100px" label="Min" .value=${min} @select=${e => min = e.target.value*1}></fc-input>
       </div>
-      <fc-chart type="${type}" .data=${data}></fc-chart>
+      <fc-card>
+        <h1 slot="title" style="text-transform: capitalize;">${text('title', type)}</h1>
+        <div slot="subtitle" style="margin-bottom: 15px">${text('subtitle', 'Showing nice visualization of data')} </div>
+        <fc-chart
+           type="${type}"
+           .palette="${select('palette', ['default', 'positive', 'negative'], 'default')}"
+           .data="${data}"></fc-chart>
+      </fc-card>
     `;
@@ -92,10 +96,11 @@ }
   .addDecorator(withKnobs)
-  .add('Element Properties', elementProperties, { notes, options })
-  .add('Bar (Vertical)', chartByType('bar'), { notes, options })
-  .add('Bar (Horizontal)', chartByType('horizontalBar'), { notes, options })
-  .add('Pie Chart', chartByType('pie'), { notes, options })
-  .add('Donut Chart', chartByType('doughnut'), { notes, options })
-  .add('Polar Chart', chartByType('polarArea'), { notes, options })
-  .add('Line Chart', chartByType('line'), { notes, options })
-  .add('Radar Chart', chartByType('radar'), { notes, options })
+  .addParameters({ notes, options })
+  .add('Element Properties', () => story(html`<fc-chart></fc-chart>`))
+  .add('Bar (Vertical)', chartByType('bar'))
+  .add('Bar (Horizontal)', chartByType('horizontalBar'))
+  .add('Pie Chart', chartByType('pie'))
+  .add('Donut Chart', chartByType('doughnut'))
+  .add('Polar Chart', chartByType('polarArea'))
+  .add('Line Chart', chartByType('line'))
+  .add('Radar Chart', chartByType('radar'))
 );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57123

increased by5.03%

Number of package files

22

increased by4.76%

Lines of code

969

increased by6.25%

Worsened metrics

Number of lines in readme file

1

decreased by-75%

No dependency changes