@forter/chart - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [3.0.0](https://github.com/forter/web-components/compare/@forter/chart@2.0.2...@forter/chart@3.0.0) (2019-09-02)
+
+
+### Features
+
+* **chart:** making chart support color schemas ([7240da4](https://github.com/forter/web-components/commit/7240da4))
+* **helpers:** break helpers up into smaller packages ([c315923](https://github.com/forter/web-components/commit/c315923))
+
+
+### BREAKING CHANGES
+
+* **helpers:** Deprecates most functionality in \`helpers\` and moves them to new packages
+
+
+
+
+
 ## [2.0.2](https://github.com/forter/web-components/compare/@forter/chart@2.0.1...@forter/chart@2.0.2) (2019-07-22)
@@ -8,0 +25,0 @@

fc-chart.js

@@ -1,2 +0,2 @@
-import { register } from '@forter/helpers/functions/register';
+import { register } from '@forter/core';
 import { FcChart } from './FcChart.js';
@@ -3,0 +3,0 @@

FcChart.js

@@ -6,2 +6,25 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 
+Chart.plugins.register({
+  afterDraw: function (chart) {
+    if (chart.data.datasets.length === 0) {
+      // No data is present
+      const {
+        ctx
+      } = chart.chart;
+      const {
+        width
+      } = chart.chart;
+      const {
+        height
+      } = chart.chart;
+      chart.clear();
+      ctx.save();
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.font = '16px normal \'Helvetica Nueue\'';
+      ctx.fillText('No data to display', width / 2, height / 2);
+      ctx.restore();
+    }
+  }
+});
 /**
@@ -48,2 +71,13 @@ * # `<fc-chart>`
       decorators: [property({
+        type: String
+      })],
+      key: "palette",
+
+      value() {
+        return 'default';
+      }
+
+    }, {
+      kind: "field",
+      decorators: [property({
         type: Object
@@ -87,18 +121,2 @@ })],
             intersect: true
-          },
-          scales: {
-            xAxes: [{
-              display: true,
-              scaleLabel: {
-                display: true,
-                labelString: 'Month'
-              }
-            }],
-            yAxes: [{
-              display: true,
-              scaleLabel: {
-                display: true,
-                labelString: 'Value'
-              }
-            }]
           }
@@ -143,2 +161,26 @@ };
       }
+    }, {
+      kind: "method",
+      key: "getColor",
+      value: function getColor(palette, i) {
+        return getComputedStyle(this).getPropertyValue(`--chart-${palette}-${i + 1}`).trim();
+      }
+    }, {
+      kind: "method",
+      key: "fillColors",
+      value: function fillColors() {
+        const {
+          palette,
+          type
+        } = this;
+        this.data.datasets.map((dataset, index) => {
+          if (['line', 'scatter', 'radar'].includes(type)) {
+            dataset.backgroundColor = this.getColor(palette, index);
+            return;
+          }
+
+          dataset.backgroundColor = [];
+          dataset.data.map((x, i) => dataset.backgroundColor.push(this.getColor(palette, i)));
+        });
+      }
       /**
@@ -161,3 +203,3 @@ * Initializes chart.js data.
 
-        if (this.items) {
+        if (this.items && this.items.length > 0) {
           data.labels = this.items.map(x => x.date);
@@ -167,2 +209,4 @@ data.datasets[0].data = this.items.map(x => x.count);
 
+        this.fillColors();
+
         if (!this.chart) {
@@ -198,2 +242,12 @@ const ctx = this.shadowRoot.querySelector('canvas').getContext('2d');
       }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated() {
+        this.fillColors();
+        this.chart.type = this.type;
+        this.chart.data = this.data;
+        this.chart.options = this.options;
+        this.chart.update();
+      }
       /**
@@ -200,0 +254,0 @@ * Use Proxy to watch object props change

package.json

 {
   "name": "@forter/chart",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "Chart from Forter Components",
@@ -44,3 +44,3 @@ "main": "index.js",
   "dependencies": {
-    "@forter/helpers": "^2.1.0",
+    "@forter/core": "^2.0.0",
     "chart.js": "^2.7.3",
@@ -50,3 +50,3 @@ "lit-element": "^2.1.0",
   },
-  "gitHead": "df8a9d04e45df726a55f4696657df938d760b5be"
+  "gitHead": "b2e02bb45adf8f84dda34e8be754bf1a8fb413c4"
 }

src/fc-chart.js

@@ -1,4 +0,4 @@
-import { register } from '@forter/helpers/functions/register';
+import { register } from '@forter/core';
 import { FcChart } from './FcChart.js';
 
 register(FcChart);

src/FcChart.js

@@ -6,2 +6,20 @@ import { LitElement, html, property } from 'lit-element';
 
+Chart.plugins.register({
+  afterDraw: function(chart) {
+    if (chart.data.datasets.length === 0) {
+      // No data is present
+      const { ctx } = chart.chart;
+      const { width } = chart.chart;
+      const { height } = chart.chart;
+      chart.clear();
+
+      ctx.save();
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.font = '16px normal \'Helvetica Nueue\'';
+      ctx.fillText('No data to display', width / 2, height / 2);
+      ctx.restore();
+    }
+  },
+});
 /**
@@ -15,2 +33,4 @@ * # `<fc-chart>`
 
+  @property({ type: String }) palette = 'default';
+
   @property({ type: Object }) data = {
@@ -43,22 +63,2 @@ labels: [],
     },
-    scales: {
-      xAxes: [
-        {
-          display: true,
-          scaleLabel: {
-            display: true,
-            labelString: 'Month',
-          },
-        },
-      ],
-      yAxes: [
-        {
-          display: true,
-          scaleLabel: {
-            display: true,
-            labelString: 'Value',
-          },
-        },
-      ],
-    },
   };
@@ -81,3 +81,23 @@
 
+  getColor(palette, i) {
+    return getComputedStyle(this).getPropertyValue(`--chart-${palette}-${i + 1}`).trim();
+  }
 
+  fillColors() {
+    const { palette, type } = this;
+
+    this.data.datasets.map((dataset, index) => {
+      if (['line', 'scatter', 'radar'].includes(type)) {
+        dataset.backgroundColor = this.getColor(palette, index);
+        return;
+      }
+      dataset.backgroundColor = [];
+      dataset.data.map((x, i) =>
+        dataset.backgroundColor.push(
+          this.getColor(palette, i)
+        )
+      );
+    });
+  }
+
   /**
@@ -92,3 +112,4 @@ * Initializes chart.js data.
 
-    if (this.items) {
+
+    if (this.items && this.items.length > 0) {
       data.labels = this.items.map(x => x.date);
@@ -98,2 +119,4 @@ data.datasets[0].data = this.items.map(x => x.count);
 
+    this.fillColors();
+
     if (!this.chart) {
@@ -131,2 +154,10 @@ const ctx = this.shadowRoot.querySelector('canvas').getContext('2d');
 
+  updated() {
+    this.fillColors();
+    this.chart.type = this.type;
+    this.chart.data = this.data;
+    this.chart.options = this.options;
+    this.chart.update();
+  }
+
   /**
@@ -133,0 +164,0 @@ * Use Proxy to watch object props change

stories/chart.stories.js

 import { html } from 'lit-html';
-import { withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
 import { withKnobs } from '@storybook/addon-knobs';
@@ -13,11 +12,86 @@ import { storiesOf } from '@storybook/polymer';
 
+ 
 function elementProperties() {
-  return withClassPropertiesKnobs(FcChart, { template: html`
+  return html`
     <fc-chart></fc-chart>
-  ` });
+  `
 }
+let _seed = 1;
 
+function rand(min, max) {
+	const seed = _seed;
+	min = min === undefined ? 0 : min;
+	max = max === undefined ? 1 : max;
+	_seed = (seed * 9301 + 49297) % 233280;
+	return min + (_seed / 233280) * (max - min);
+}
+
+function randomScalingFactor(min=0, max=100) {
+  return Math.round(rand(min, max));
+}
+
+function changeChartOption(name, value) {
+   return document.querySelector('fc-chart')[name] =  value
+}
+
+function randomizeData(min, max) {
+  console.log(min, max)
+	const chart = document.querySelector('fc-chart').chart;
+	chart.data.datasets.forEach(function(dataset) {
+		dataset.data = dataset.data.map(function() {
+			return  randomScalingFactor(min, max);
+		});
+
+	});
+	chart.update();
+}
+
+
+  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
+    }],
+  }
+function chartByType(type) {
+  return function() {
+    let max = 100, min = 10;
+    return html`
+      <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>
+        <label> Values</label>
+        <fc-input style="width:100px" label="Min" .value=${min} @select=${e => min = e.target.value*1}></fc-input>
+        <fc-input style="width:100px" label="Max" .value=${max} @select=${e => max = e.target.value*1}></fc-input>
+        <fc-button @click=${() => randomizeData(min, max)}> Randomize Data</fc-button>
+      </div>
+      <fc-chart type="${type}" .data=${data}></fc-chart>
+    `;
+  }
+}
+
 (storiesOf('Data Components|Chart', module)
   .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 })
 );

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

54385

increased by16.65%

Lines of code

912

increased by18.13%

Dependency changes

• + Added@forter/core@^2.0.0

• + Added@forter/core@2.0.5(transitive)

• - Removed@forter/helpers@^2.1.0

• - Removed@forter/helpers@2.1.0(transitive)