Merge pull request #1522 from infor-design/1458-chart-responsive

1458 - IdsAxisChart responsive setting
infor-design · Oct 10, 2023 · 86051cb · 86051cb
2 parents 2f598bd + 10bdfe1
commit 86051cb
Show file tree

Hide file tree

Showing 9 changed files with 304 additions and 159 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 ### 1.0.0-beta.16 Fixes
 
+- `[AxisChart]` Fixed responsive axis charts `inherit` setting value. ([#1458](https://github.com/infor-design/enterprise-wc/issues/1458))
 - `[Calendar]` Allow propagation of `dayselected` event from calendar. ([#1470](https://github.com/infor-design/enterprise-wc/issues/1470))
 - `[DataGrid]` Fixed contextmenu focused menu item in datagrid. ([#1453](https://github.com/infor-design/enterprise-wc/issues/1453))
 - `[DataGrid]` Fixed a bug on the size of the `xxs` filter row inputs. ([#1456](https://github.com/infor-design/enterprise-wc/issues/1456))

diff --git a/src/components/ids-axis-chart/demos/index.yaml b/src/components/ids-axis-chart/demos/index.yaml
@@ -23,3 +23,6 @@
   - link: horizontal.html
     type: Example
     description: Shows as horizontal usage
+  - link: responsive.html
+    type: Example
+    description: Shows responsive example
diff --git a/src/components/ids-axis-chart/demos/responsive.html b/src/components/ids-axis-chart/demos/responsive.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-theme-switcher mode="light"></ids-theme-switcher>
+    <ids-layout-grid auto-fit="true" padding="md">
+      <ids-text font-size="12" type="h1">Axis Chart Responsive</ids-text>
+    </ids-layout-grid>
+    <ids-layout-grid cols="2" gap="md" padding-x="md">
+      <ids-layout-grid-cell>
+        <ids-card>
+          <div slot="card-header">
+            <ids-text font-size="20" type="h2" overflow="ellipsis" tooltip="true">Axis Chart</ids-text>
+          </div>
+          <ids-axis-chart
+            slot="card-content"
+            title="A line chart showing component usage"
+            width="inherit"
+            height="inherit"
+            id="index-example">
+          </ids-axis-chart>
+        </ids-card>
+      </ids-layout-grid-cell>
+      <ids-layout-grid-cell>
+        <ids-card>
+          <div slot="card-header">
+            <ids-text font-size="20" type="h2">Bar Chart</ids-text>
+          </div>
+          <ids-bar-chart
+            slot="card-content"
+            rotate-name-labels="-65"
+            id="bar-chart-example"
+            title="Bar Chart horizontal rotate name labels"
+            width="inherit"
+            height="inherit"
+            animated="false"
+            horizontal>
+          </ids-bar-chart>
+        </ids-card>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+    <ids-layout-grid cols="1" gap="md" padding-x="md" padding-y="md">
+      <ids-layout-grid-cell>
+        <ids-card>
+          <div slot="card-header">
+            <ids-text font-size="20" type="h2" overflow="ellipsis" tooltip="true">Line Chart</ids-text>
+          </div>
+          <ids-line-chart
+            slot="card-content"
+            title="A line chart showing component usage"
+            width="inherit"
+            height="inherit"
+            id="line-chart-example"
+            show-vertical-grid-lines="true"
+            rotate-name-labels="-65">
+          </ids-line-chart>
+        </ids-card>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+  </ids-container>
+</body>
+</html>
diff --git a/src/components/ids-axis-chart/demos/responsive.ts b/src/components/ids-axis-chart/demos/responsive.ts
@@ -0,0 +1,29 @@
+import componentsJSON from '../../../assets/data/components.json';
+import barChartJSON from '../../../assets/data/components-long-text.json';
+import '../../ids-card/ids-card';
+import '../../ids-bar-chart/ids-bar-chart';
+import '../../ids-line-chart/ids-line-chart';
+import type IdsAxisChart from '../ids-axis-chart';
+
+const setData = async () => {
+  const res = await fetch(componentsJSON as any);
+  const data = await res.json();
+  const chart = document.querySelector<IdsAxisChart>('#index-example');
+  if (chart) {
+    chart.data = data;
+  }
+
+  const lineChart = document.querySelector<IdsAxisChart>('#line-chart-example');
+  if (lineChart) {
+    lineChart.data = data;
+  }
+
+  const barChartRes = await fetch(barChartJSON as any);
+  const barChartData = await barChartRes.json();
+  const barChart = document.querySelector<IdsAxisChart>('#bar-chart-example');
+  if (barChart) {
+    barChart.data = barChartData;
+  }
+};
+
+setData();
diff --git a/src/components/ids-axis-chart/ids-axis-chart.scss b/src/components/ids-axis-chart/ids-axis-chart.scss
@@ -86,6 +86,20 @@
       font-size: 1px;
     }
   }
+
+  &.full-height {
+    height: 100%;
+    overflow-y: hidden;
+
+    svg {
+      flex-grow: 1;
+    }
+  }
+
+  &.full-width {
+    width: 100%;
+    overflow-x: hidden;
+  }
 }
 
 // Center an Empty Message