@forter/chart - npm Package Compare versions

Comparing version 5.32.0 to 5.33.0

CHANGELOG.md

@@ -6,2 +6,17 @@ # Change Log
 
+# [5.33.0](https://github.com/forter/web-components/compare/@forter/chart@5.32.0...@forter/chart@5.33.0) (2023-06-07)
+
+
+### Features
+
+* **chart:** legend design revamp ([ead6357](https://github.com/forter/web-components/commit/ead6357))
+* **chart:** legend fitting in different widget sizes ([2c69be8](https://github.com/forter/web-components/commit/2c69be8))
+* **chart:** legend revamp structure ([49a2728](https://github.com/forter/web-components/commit/49a2728))
+* **chart:** styling and css ([bba0756](https://github.com/forter/web-components/commit/bba0756))
+* **chart:** styling and hovers ([0f16e15](https://github.com/forter/web-components/commit/0f16e15))
+
+
+
+
+
 # [5.32.0](https://github.com/forter/web-components/compare/@forter/chart@5.31.6...@forter/chart@5.32.0) (2023-05-28)
@@ -8,0 +23,0 @@

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

@@ -16,3 +16,3 @@ import { cloneDeep, merge } from 'lodash-es';
   font,
-  resizeDelay: 100,
+  resizeDelay: 10,
   maintainAspectRatio: false,
@@ -19,0 +19,0 @@ responsive: true,

chart-config-builders/html-legend-builder.js

@@ -75,13 +75,11 @@ import { merge } from 'lodash-es';
     const dash = item && item.lineDash && item.lineDash.length;
-    return `<li
-        class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
-        <div
-          class="legend-color-box ${dash ? 'dash' : ''}"
-          style="--legend-color: ${item && item.fillStyle};">
-          
-          ${dash ? dashedLegend() : `<div></div>`}
-          
-        </div>
-        <span class="legend-label" style="${style}">${item && item.text}</span>
-      </li>`;
+    return `
+    <li class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
+      <div
+        class="legend-color-box ${dash ? 'dash' : ''}"
+        style="--legend-color: ${item && item.fillStyle};">
+        ${dash ? dashedLegend() : `<div></div>`}
+      </div>
+      <span class="legend-label" style="${style}">${item && item.text}</span>
+    </li>`;
   }).join('')}`;
@@ -88,0 +86,0 @@ };

fc-chart.css.js

@@ -6,3 +6,2 @@ import { css } from 'lit-element';
   flex-direction: column;
-  gap: 20px;
   position: relative;
@@ -175,11 +174,10 @@ }
 .legend-container {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   margin: 0;
   padding: 0;
-  gap: 16px;
+  gap: 0 32px;
   height: 44px;
-  width: fit-content;
   overflow: hidden;
+  width: 100%;
 }
@@ -199,5 +197,4 @@
 .legend-label {
-  font: var(--fc-font-11px-400);
-  font-size: 10px;
-  color: var(--fc-blue-gray-900);
+  font: var(--fc-poppins-font-12px-400);
+  color: var(--fc-gray-800);
   text-transform: uppercase;
@@ -224,11 +221,50 @@ transition: color 0.2s ease-in-out;
 
+.expand-button {
+  width: 100%;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  transition: 0.1s;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 3px;
+}
+
+.expand-button:hover {
+  background: var(--fc-blue-gray-50);
+  border-radius: 5px;
+}
+
+.expand-button fc-icon {
+  color: var(--fc-gray-800);
+  transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
 #legend-container {
   position: relative;
-  height: fit-content;
   width: fit-content;
+  width: calc(100% - 20px);
+  height: 89px;
+  transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
+  overflow: hidden;
+  padding: 0 10px;
+  outline: 1px solid transparent;
 }
 
+#legend-container[open] {
+  height: 300px;
+  background-color: var(--fc-gray-50);
+  border-radius: 8px;
+  padding: 10px;
+  outline: 1px solid var(--fc-gray-100);
+}
+
+#legend-container[open] .expand-button fc-icon {
+  transform: rotate3d(1, 0, 0, 180deg);
+}
+
 :host #real-legend-container {
   transition: opacity 0.2s ease-in-out;
   opacity: 1;
+  overflow: hidden;
 }
@@ -240,2 +276,15 @@
 
+#legend-container[expandable] .expand-button {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#legend-container:not([expandable]) #real-legend-container {
+  height: max-content;
+}
+
+#legend-container[open] #real-legend-container {
+  overflow: auto;
+}
+
 #skeleton-legend-container {
@@ -259,6 +308,13 @@ position: absolute;
   cursor: pointer;
-  gap: 6px;
+  gap: 10px;
   user-select: none;
+  padding: 2px 6px;
+  border-radius: 5px;
+  transition: 0.1s;
 }
 
+.legend-item:hover {
+  background-color: var(--fc-blue-gray-100);
+}
+
 .legend-color-box {
@@ -265,0 +321,0 @@ --legend-color-box-size: 10px;

FcChart.js

@@ -77,2 +77,10 @@ import { defineProperty as _defineProperty } from './_virtual/_rollupPluginBabelHelpers.js';
         value: false
+      },
+      isLegendBoxOpen: {
+        type: Boolean,
+        value: true
+      },
+      isLegendExpandIndicatorVisible: {
+        type: Boolean,
+        value: false
       }
@@ -89,2 +97,4 @@ };
     this.configHash = null;
+    this.resizeObserver = null;
+    this.minExpandHeight = 46;
   }
@@ -100,2 +110,23 @@
 
+  get legendContainer() {
+    return this.shadowRoot.getElementById('real-legend-container');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.isLegendExpandIndicatorVisible = this.legendContainer.scrollHeight < this.minExpandHeight;
+    });
+    this.resizeObserver.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
   firstUpdated() {
@@ -170,5 +201,10 @@ this.context = this.canvas.getContext('2d');
         <span class="skeleton-legend-label"></span>
-      </li>`);
+      </li>
+    `);
   }
 
+  toggleLegendBox() {
+    this.isLegendBoxOpen = !this.isLegendBoxOpen;
+  }
+
   render() {
@@ -182,3 +218,6 @@ var _this$config, _this$config$series, _this$config$series$a, _this$config$series$a2;
       </div>
-      <div id="legend-container">
+      <div id="legend-container" ?expandable=${this.isLegendExpandIndicatorVisible} ?open=${this.isLegendBoxOpen}>
+        <button class="expand-button" @click=${this.toggleLegendBox}>
+          <fc-icon icon="arrow-up"></fc-icon>
+        </button>
         <ul id="real-legend-container" class="legend-container"></ul>
@@ -185,0 +224,0 @@ <ul id="skeleton-legend-container" class="skeleton-legend-container">

package.json

 {
   "name": "@forter/chart",
-  "version": "5.32.0",
+  "version": "5.33.0",
   "description": "chart from Forter Components",
@@ -61,3 +61,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "d5c6f796c443846c1805bc3dc4d5be625c6c5fb6"
+  "gitHead": "a2d3d404500bac6506d40d14579fa80099a104b9"
 }

README.md

@@ -21,11 +21,13 @@ # fc-chart
 
-| Property         | Attribute      | Type      | Default |
-|------------------|----------------|-----------|---------|
-| `config`         | `config`       | `{}`      | {}      |
-| `configHash`     | `configHash`   | `string`  |         |
-| `currentBuilder` |                | `any`     |         |
-| `disabled`       | `disabled`     | `boolean` | false   |
-| `loading`        | `loading`      | `boolean` | false   |
-| `previewMode`    | `preview-mode` | `boolean` | false   |
-| `type`           | `type`         | `string`  | "line"  |
+| Property                         | Attribute                        | Type      | Default |
+|----------------------------------|----------------------------------|-----------|---------|
+| `config`                         | `config`                         | `{}`      | {}      |
+| `configHash`                     | `configHash`                     | `string`  |         |
+| `currentBuilder`                 |                                  | `any`     |         |
+| `disabled`                       | `disabled`                       | `boolean` | false   |
+| `isLegendBoxOpen`                | `isLegendBoxOpen`                | `boolean` | true    |
+| `isLegendExpandIndicatorVisible` | `isLegendExpandIndicatorVisible` | `boolean` | false   |
+| `loading`                        | `loading`                        | `boolean` | false   |
+| `previewMode`                    | `preview-mode`                   | `boolean` | false   |
+| `type`                           | `type`                           | `string`  | "line"  |
 
@@ -32,0 +34,0 @@ ## CSS Custom Properties

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

@@ -17,3 +17,3 @@ import { merge, cloneDeep } from 'lodash-es';
   font,
-  resizeDelay: 100,
+  resizeDelay: 10,
   maintainAspectRatio: false,
@@ -20,0 +20,0 @@ responsive: true,

src/chart-config-builders/html-legend-builder.js

@@ -65,13 +65,11 @@ import { merge } from 'lodash-es';
     const dash = item && item.lineDash && item.lineDash.length;
-    return `<li
-        class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
-        <div
-          class="legend-color-box ${dash ? 'dash' : ''}"
-          style="--legend-color: ${item && item.fillStyle};">
-          
-          ${dash ? dashedLegend() : `<div></div>`}
-          
-        </div>
-        <span class="legend-label" style="${style}">${item && item.text}</span>
-      </li>`;
+    return `
+    <li class="legend-item ${item && item.hidden ? 'disabled-legend-item' : ''}"> 
+      <div
+        class="legend-color-box ${dash ? 'dash' : ''}"
+        style="--legend-color: ${item && item.fillStyle};">
+        ${dash ? dashedLegend() : `<div></div>`}
+      </div>
+      <span class="legend-label" style="${style}">${item && item.text}</span>
+    </li>`;
   }).join('')}`;
@@ -78,0 +76,0 @@ };

src/FcChart.js

@@ -0,1 +1,2 @@
+/* eslint-disable max-len */
 import { LitElement, html } from 'lit-element';
@@ -57,3 +58,5 @@ import { Chart, registerables } from 'chart.js';
       loading: { type: Boolean, value: false },
-      previewMode: { type: Boolean, attribute: 'preview-mode', value: false }
+      previewMode: { type: Boolean, attribute: 'preview-mode', value: false },
+      isLegendBoxOpen: { type: Boolean, value: true },
+      isLegendExpandIndicatorVisible: { type: Boolean, value: false }
     };
@@ -73,2 +76,4 @@ }
     this.configHash = null;
+    this.resizeObserver = null;
+    this.minExpandHeight = 46;
   }
@@ -84,2 +89,22 @@
 
+  get legendContainer() {
+    return this.shadowRoot.getElementById('real-legend-container');
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(() => {
+      this.isLegendExpandIndicatorVisible = this.legendContainer.scrollHeight < this.minExpandHeight;
+    });
+    this.resizeObserver.observe(this);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
   firstUpdated() {
@@ -155,5 +180,10 @@ this.context = this.canvas.getContext('2d');
         <span class="skeleton-legend-label"></span>
-      </li>`);
+      </li>
+    `);
   }
 
+  toggleLegendBox() {
+    this.isLegendBoxOpen = !this.isLegendBoxOpen;
+  }
+
   render() {
@@ -165,3 +195,6 @@ const seriesType = this.config?.series?.at(0)?.seriesType?.toLowerCase();
       </div>
-      <div id="legend-container">
+      <div id="legend-container" ?expandable=${this.isLegendExpandIndicatorVisible} ?open=${this.isLegendBoxOpen}>
+        <button class="expand-button" @click=${this.toggleLegendBox}>
+          <fc-icon icon="arrow-up"></fc-icon>
+        </button>
         <ul id="real-legend-container" class="legend-container"></ul>
@@ -168,0 +201,0 @@ <ul id="skeleton-legend-container" class="skeleton-legend-container">

web-components.json

@@ -32,2 +32,10 @@ {
           "type": "boolean"
+        },
+        {
+          "name": "isLegendBoxOpen",
+          "type": "boolean"
+        },
+        {
+          "name": "isLegendExpandIndicatorVisible",
+          "type": "boolean"
         }
@@ -61,2 +69,10 @@ ],
         {
+          "name": "isLegendBoxOpen",
+          "type": "boolean"
+        },
+        {
+          "name": "isLegendExpandIndicatorVisible",
+          "type": "boolean"
+        },
+        {
           "name": "currentBuilder",
@@ -63,0 +79,0 @@ "type": "any"

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

347429

increased by2.33%

Lines of code

5608

increased by3.18%

Number of lines in readme file

38

increased by5.56%

No dependency changes