Feature | Charts Preview

public/assets/js/charts/barChartVertical.js

@@ -5,53 +5,67 @@ export default function barChartVertical(targetNode, dataset) {
   const { data } = dataset;
   const [col_x, col_y] = dataset.columns;
   const svg = d3.select(targetNode).append('svg');
-  const svgWidth = targetNode.clientWidth;
-  const svgHeight = targetNode.clientHeight;
-
-  svg.attr('width', svgWidth).attr('height', svgHeight);
-
-  const margin = {
-    top: 20, right: 20, bottom: 70, left: 70,
-  };
-  const width = +svg.attr('width') - margin.left - margin.right;
-  const height = +svg.attr('height') - margin.top - margin.bottom;
-
-  const g = svg.append('g')
-    .attr('transform', `translate(${margin.left},${margin.top})`);
-
-  // X axis
-  const x = d3.scaleBand()
-    .range([0, width])
-    .domain(data.map((d) => d[col_x]))
-    .padding(0.2);
-  g.append('g')
-    .attr('class', 'charts__text charts__text--x-axis')
-    .attr('transform', `translate(0,${height})`)
-    .call(d3.axisBottom(x))
-    .selectAll('text')
-    .attr('transform', 'translate(-10,0)rotate(-45)')
-    .style('text-anchor', 'end');
-
-  // Add Y axis
-  const y = d3.scaleLinear()
-    .domain([0, d3.max(data, (d) => +d[col_y])])
-    .nice()
-    .range([height, 0]);
-  g.append('g')
-    .attr('class', 'charts__text charts__text--y-axis')
-    .call(d3.axisLeft(y));
-
-  // Bars
-  g.append('g')
-    .attr('class', 'charts__data')
-    .selectAll('bar')
-    .data(data)
-    .enter()
-    .append('rect')
-    .attr('x', (d) => x(d[col_x]))
-    .attr('y', (d) => y(d[col_y]))
-    .attr('width', x.bandwidth())
-    .attr('height', (d) => height - y(d[col_y]))
-    .attr('fill', '#69b3a2')
-    .attr('class', (d, i, n) => `charts__data--bar-vertical charts__data--${i}`);
+
+  function drawChart() {
+    svg.selectAll('.charts__data--bar-vertical').remove();
+    svg.selectAll('.charts__text').remove();
+
+    const svgWidth = targetNode.clientWidth;
+    const svgHeight = targetNode.clientHeight;
+
+    svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`).attr('preserveAspectRatio', 'xMidYMid meet');
+
+    const margin = {
+      top: 20,
+      right: 20,
+      bottom: 70,
+      left: 70,
+    };
+    const width = svgWidth - margin.left - margin.right;
+    const height = svgHeight - margin.top - margin.bottom;
+
+    // const width = +svg.attr('width') - margin.left - margin.right;
+    // const height = +svg.attr('height') - margin.top - margin.bottom;
+
+    const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`);
+
+    // X axis
+    const x = d3
+      .scaleBand()
+      .range([0, width])
+      .domain(data.map((d) => d[col_x]))
+      .padding(0.2);
+    g.append('g')
+      .attr('class', 'charts__text charts__text--x-axis')
+      .attr('transform', `translate(0,${height})`)
+      .call(d3.axisBottom(x))
+      .selectAll('text')
+      .attr('transform', 'translate(-10,0)rotate(-45)')
+      .style('text-anchor', 'end');
+
+    // Add Y axis
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, (d) => +d[col_y])])
+      .nice()
+      .range([height, 0]);
+    g.append('g').attr('class', 'charts__text charts__text--y-axis').call(d3.axisLeft(y));
+
+    // Bars
+    g.append('g')
+      .attr('class', 'charts__data')
+      .selectAll('bar')
+      .data(data)
+      .enter()
+      .append('rect')
+      .attr('x', (d) => x(d[col_x]))
+      .attr('y', (d) => y(d[col_y]))
+      .attr('width', x.bandwidth())
+      .attr('height', (d) => height - y(d[col_y]))
+      .attr('fill', '#69b3a2')
+      .attr('class', (d, i, n) => `charts__data--bar-vertical charts__data--${i}`);
+  }
+
+  window.addEventListener('resize', drawChart);
+  drawChart();
 }

src/charts/echarts/index.js

@@ -29,16 +29,18 @@ export const colorways = {
 export const mixedColourWay = () => {
   const themes = Object.keys(colorways).filter((key) => key !== 'rainbow');
 
-  return colorways.rainbow.reduce((colours, hex, index) => [hex].concat(
-    themes.reduce((_themed, theme) => {
-      if (colorways[theme].length > index) {
-        return _themed.concat(colorways[theme][index]);
-      }
+  return colorways.rainbow.reduce((colours, hex, index) =>
+    [hex].concat(
+      themes.reduce((_themed, theme) => {
+        if (colorways[theme].length > index) {
+          return _themed.concat(colorways[theme][index]);
+        }
 
-      return _themed;
-    }, colours),
-    [],
-  ));
+        return _themed;
+      }, colours),
+      []
+    )
+  );
 };
 
 // default echart options for DI charts
@@ -111,19 +113,19 @@ const defaultOptions = {
 
 export const handleResize = (chart, chartNode) => {
   window.addEventListener(
-    'onresize',
+    'resize',
     () => {
       chart.resize({ width: `${chartNode.clientWidth}px`, height: `${chartNode.clientHeight}px` });
     },
-    true,
+    true
   );
 };
 
 export const getYAxisNamePositionFromSeries = (series) => {
   const isStack = series.some((item) => item.stack);
   const seriesCount = Array.from(new Set(series.map((d) => d.name))).length;
   const max = Math.max(
-    ...series.reduce((allData, { data }) => allData.concat(data.map((item) => item.value || 0)), []),
+    ...series.reduce((allData, { data }) => allData.concat(data.map((item) => item.value || 0)), [])
   );
   if (max === 0) {
     return 'blank';

src/components/ChartViews.js

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import PreviewWidth from '../widgets/previewWidth';
+
+const ChartView = () => {
+  const width = new PreviewWidth();
+
+  const [view, setView] = useState('desktop');
+  const [checked, setChecked] = useState(false);
+
+  const chartPreview = document.getElementById('preview-iframe');
+  const allCharts = document.getElementById('all-charts');
+
+  useEffect(() => {
+    if (view === 'mobile') {
+      chartPreview.style.maxWidth = width.getWidth('mobile');
+    }
+    if (view === 'desktop') {
+      chartPreview.style.maxWidth = width.getWidth('desktop');
+    }
+    if (view === 'tablet') {
+      chartPreview.style.maxWidth = width.getWidth('tablet');
+    }
+
+    // force table layout recalculation
+    window.dispatchEvent(new Event('resize'));
+    if (checked) {
+      window.dispatchEvent(new Event('resize'));
+    }
+  }, [view, checked]);
+
+  const container = document.getElementById('page-container');
+  container.style.display = 'flex';
+
+  const previewPane = document.getElementById('preview-pane');
+  previewPane.style.display = checked ? 'block' : 'none';
+
+  const handleToggleChange = () => {
+    setChecked((preview) => !preview);
+    container.style.display = checked ? 'block' : 'flex';
+    previewPane.style.minWidth = checked ? '0%' : '30%';
+    allCharts.style.minWidth = checked ? '100%' : '70%';
+  };
+
+  return (
+    <div className="preview">
+      <div className="toggle-buttons">
+        {checked && (
+          <div className="buttons" id="buttons">
+            <button className="button" onClick={() => setView('desktop')}>
+              Desktop
+            </button>
+            <button className="button" onClick={() => setView('tablet')}>
+              Tablet
+            </button>
+            <button className="button" onClick={() => setView('mobile')}>
+              Mobile
+            </button>
+          </div>
+        )}
+        <div className="preview-label">
+          <h3> {checked ? 'Hide Preview' : 'Show Preview'}</h3>
+          <label className="preview-switch">
+            <input type="checkbox" checked={checked} value={checked} onChange={() => handleToggleChange()} />
+            <span className="switch"></span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChartView;

src/core/chartViews.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import ChartView from '../components/ChartViews';
+
+const renderChartViews = () => {
+  const viewWrapper = document.getElementsByClassName('dicharts--chart-views')[0];
+  if (viewWrapper) {
+    const root = createRoot(viewWrapper);
+    root.render(<ChartView />);
+  }
+};
+
+export default renderChartViews;